* add ~platform/DocumentTitle * add titles for some pages
This commit is contained in:
thislight
parent
1115135380
commit
1c8a3f0bbb
12 changed files with 843 additions and 823 deletions
|
|
@ -26,6 +26,7 @@ import { useStore } from "@nanostores/solid";
|
|||
import { $settings } from "./stores";
|
||||
import { useNavigator } from "~platform/StackedRouter";
|
||||
import AppTopBar from "~material/AppTopBar";
|
||||
import DocumentTitle from "~platform/DocumentTitle";
|
||||
|
||||
const ChooseLang: Component = () => {
|
||||
const { pop } = useNavigator();
|
||||
|
|
@ -53,67 +54,70 @@ const ChooseLang: Component = () => {
|
|||
};
|
||||
|
||||
return (
|
||||
<Scaffold
|
||||
topbar={
|
||||
<AppTopBar>
|
||||
<IconButton color="inherit" onClick={[pop, 1]} disableRipple>
|
||||
<ArrowBack />
|
||||
</IconButton>
|
||||
<Title>{t("Choose Language")}</Title>
|
||||
</AppTopBar>
|
||||
}
|
||||
>
|
||||
<List
|
||||
sx={{
|
||||
paddingBottom: "var(--safe-area-inset-bottom, 0)",
|
||||
}}
|
||||
<>
|
||||
<DocumentTitle>{t("Choose Language")}</DocumentTitle>
|
||||
<Scaffold
|
||||
topbar={
|
||||
<AppTopBar>
|
||||
<IconButton color="inherit" onClick={[pop, 1]} disableRipple>
|
||||
<ArrowBack />
|
||||
</IconButton>
|
||||
<Title>{t("Choose Language")}</Title>
|
||||
</AppTopBar>
|
||||
}
|
||||
>
|
||||
<ListItemButton
|
||||
onClick={() => {
|
||||
onCodeChange(code() ? undefined : matchedLangCode());
|
||||
<List
|
||||
sx={{
|
||||
paddingBottom: "var(--safe-area-inset-bottom, 0)",
|
||||
}}
|
||||
>
|
||||
<ListItemText>
|
||||
{t("lang.auto", {
|
||||
detected: t(`lang.${matchedLangCode()}`) ?? matchedLangCode(),
|
||||
})}
|
||||
</ListItemText>
|
||||
<ListItemSecondaryAction>
|
||||
<Switch checked={typeof code() === "undefined"} />
|
||||
</ListItemSecondaryAction>
|
||||
</ListItemButton>
|
||||
<List subheader={<ListSubheader>{t("Supported")}</ListSubheader>}>
|
||||
<For each={SUPPORTED_LANGS}>
|
||||
{(c) => (
|
||||
<ListItemButton
|
||||
disabled={typeof code() === "undefined"}
|
||||
onClick={[onCodeChange, c]}
|
||||
>
|
||||
<ListItemText>{t(`lang.${c}`)}</ListItemText>
|
||||
<ListItemSecondaryAction>
|
||||
<Radio
|
||||
checked={
|
||||
code() === c ||
|
||||
(code() === undefined && matchedLangCode() == c)
|
||||
}
|
||||
/>
|
||||
</ListItemSecondaryAction>
|
||||
</ListItemButton>
|
||||
)}
|
||||
</For>
|
||||
</List>
|
||||
<ListItemButton
|
||||
onClick={() => {
|
||||
onCodeChange(code() ? undefined : matchedLangCode());
|
||||
}}
|
||||
>
|
||||
<ListItemText>
|
||||
{t("lang.auto", {
|
||||
detected: t(`lang.${matchedLangCode()}`) ?? matchedLangCode(),
|
||||
})}
|
||||
</ListItemText>
|
||||
<ListItemSecondaryAction>
|
||||
<Switch checked={typeof code() === "undefined"} />
|
||||
</ListItemSecondaryAction>
|
||||
</ListItemButton>
|
||||
<List subheader={<ListSubheader>{t("Supported")}</ListSubheader>}>
|
||||
<For each={SUPPORTED_LANGS}>
|
||||
{(c) => (
|
||||
<ListItemButton
|
||||
disabled={typeof code() === "undefined"}
|
||||
onClick={[onCodeChange, c]}
|
||||
>
|
||||
<ListItemText>{t(`lang.${c}`)}</ListItemText>
|
||||
<ListItemSecondaryAction>
|
||||
<Radio
|
||||
checked={
|
||||
code() === c ||
|
||||
(code() === undefined && matchedLangCode() == c)
|
||||
}
|
||||
/>
|
||||
</ListItemSecondaryAction>
|
||||
</ListItemButton>
|
||||
)}
|
||||
</For>
|
||||
</List>
|
||||
|
||||
<List subheader={<ListSubheader>{t("Unsupported")}</ListSubheader>}>
|
||||
<For each={unsupportedLangCodes()}>
|
||||
{(code) => (
|
||||
<ListItem>
|
||||
<ListItemText>{iso639_1.getNativeName(code)}</ListItemText>
|
||||
</ListItem>
|
||||
)}
|
||||
</For>
|
||||
<List subheader={<ListSubheader>{t("Unsupported")}</ListSubheader>}>
|
||||
<For each={unsupportedLangCodes()}>
|
||||
{(code) => (
|
||||
<ListItem>
|
||||
<ListItemText>{iso639_1.getNativeName(code)}</ListItemText>
|
||||
</ListItem>
|
||||
)}
|
||||
</For>
|
||||
</List>
|
||||
</List>
|
||||
</List>
|
||||
</Scaffold>
|
||||
</Scaffold>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -19,9 +19,10 @@ import { useStore } from "@nanostores/solid";
|
|||
import { $settings } from "./stores";
|
||||
import { useNavigator } from "~platform/StackedRouter";
|
||||
import AppTopBar from "~material/AppTopBar";
|
||||
import DocumentTitle from "~platform/DocumentTitle";
|
||||
|
||||
const Motions: Component = () => {
|
||||
const {pop} = useNavigator();
|
||||
const { pop } = useNavigator();
|
||||
const [t] = createTranslator(
|
||||
(code) =>
|
||||
import(`./i18n/${code}.json`) as Promise<{
|
||||
|
|
@ -30,55 +31,58 @@ const Motions: Component = () => {
|
|||
);
|
||||
const settings = useStore($settings);
|
||||
return (
|
||||
<Scaffold
|
||||
topbar={
|
||||
<AppTopBar>
|
||||
<IconButton color="inherit" onClick={[pop, 1]} disableRipple>
|
||||
<>
|
||||
<DocumentTitle>{t("motions")}</DocumentTitle>
|
||||
<Scaffold
|
||||
topbar={
|
||||
<AppTopBar>
|
||||
<IconButton color="inherit" onClick={[pop, 1]} disableRipple>
|
||||
<ArrowBack />
|
||||
</IconButton>
|
||||
<Title>{t("motions")}</Title>
|
||||
</AppTopBar>
|
||||
}
|
||||
>
|
||||
<List
|
||||
sx={{
|
||||
paddingBottom: "calc(var(--safe-area-inset-bottom, 0px) + 16px)",
|
||||
}}
|
||||
</AppTopBar>
|
||||
}
|
||||
>
|
||||
<li>
|
||||
<ul style={{ "padding-left": 0 }}>
|
||||
<ListSubheader>{t("motions.gifs")}</ListSubheader>
|
||||
<ListItemButton
|
||||
onClick={() =>
|
||||
$settings.setKey("autoPlayGIFs", !settings().autoPlayGIFs)
|
||||
}
|
||||
>
|
||||
<ListItemText>{t("motions.gifs.autoplay")}</ListItemText>
|
||||
<ListItemSecondaryAction>
|
||||
<Switch checked={settings().autoPlayGIFs}></Switch>
|
||||
</ListItemSecondaryAction>
|
||||
</ListItemButton>
|
||||
<Divider />
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<ul style={{ "padding-left": 0 }}>
|
||||
<ListSubheader>{t("motions.vids")}</ListSubheader>
|
||||
<ListItemButton
|
||||
onClick={() =>
|
||||
$settings.setKey("autoPlayVideos", !settings().autoPlayVideos)
|
||||
}
|
||||
>
|
||||
<ListItemText>{t("motions.vids.autoplay")}</ListItemText>
|
||||
<ListItemSecondaryAction>
|
||||
<Switch checked={settings().autoPlayVideos}></Switch>
|
||||
</ListItemSecondaryAction>
|
||||
</ListItemButton>
|
||||
<Divider />
|
||||
</ul>
|
||||
</li>
|
||||
</List>
|
||||
</Scaffold>
|
||||
<List
|
||||
sx={{
|
||||
paddingBottom: "calc(var(--safe-area-inset-bottom, 0px) + 16px)",
|
||||
}}
|
||||
>
|
||||
<li>
|
||||
<ul style={{ "padding-left": 0 }}>
|
||||
<ListSubheader>{t("motions.gifs")}</ListSubheader>
|
||||
<ListItemButton
|
||||
onClick={() =>
|
||||
$settings.setKey("autoPlayGIFs", !settings().autoPlayGIFs)
|
||||
}
|
||||
>
|
||||
<ListItemText>{t("motions.gifs.autoplay")}</ListItemText>
|
||||
<ListItemSecondaryAction>
|
||||
<Switch checked={settings().autoPlayGIFs}></Switch>
|
||||
</ListItemSecondaryAction>
|
||||
</ListItemButton>
|
||||
<Divider />
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<ul style={{ "padding-left": 0 }}>
|
||||
<ListSubheader>{t("motions.vids")}</ListSubheader>
|
||||
<ListItemButton
|
||||
onClick={() =>
|
||||
$settings.setKey("autoPlayVideos", !settings().autoPlayVideos)
|
||||
}
|
||||
>
|
||||
<ListItemText>{t("motions.vids.autoplay")}</ListItemText>
|
||||
<ListItemSecondaryAction>
|
||||
<Switch checked={settings().autoPlayVideos}></Switch>
|
||||
</ListItemSecondaryAction>
|
||||
</ListItemButton>
|
||||
<Divider />
|
||||
</ul>
|
||||
</li>
|
||||
</List>
|
||||
</Scaffold>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@ import { $settings } from "./stores";
|
|||
import { useStore } from "@nanostores/solid";
|
||||
import { useNavigator } from "~platform/StackedRouter";
|
||||
import AppTopBar from "~material/AppTopBar";
|
||||
import DocumentTitle from "~platform/DocumentTitle";
|
||||
|
||||
const ChooseRegion: Component = () => {
|
||||
const { pop } = useNavigator();
|
||||
|
|
@ -48,59 +49,62 @@ const ChooseRegion: Component = () => {
|
|||
};
|
||||
|
||||
return (
|
||||
<Scaffold
|
||||
topbar={
|
||||
<AppTopBar>
|
||||
<IconButton color="inherit" onClick={[pop, 1]} disableRipple>
|
||||
<ArrowBack />
|
||||
</IconButton>
|
||||
<Title>{t("Choose Region")}</Title>
|
||||
</AppTopBar>
|
||||
}
|
||||
>
|
||||
<List
|
||||
sx={{
|
||||
paddingBottom: "var(--safe-area-inset-bottom, 0)",
|
||||
}}
|
||||
<>
|
||||
<DocumentTitle>{t("Choose Region")}</DocumentTitle>
|
||||
<Scaffold
|
||||
topbar={
|
||||
<AppTopBar>
|
||||
<IconButton color="inherit" onClick={[pop, 1]} disableRipple>
|
||||
<ArrowBack />
|
||||
</IconButton>
|
||||
<Title>{t("Choose Region")}</Title>
|
||||
</AppTopBar>
|
||||
}
|
||||
>
|
||||
<ListItemButton
|
||||
onClick={() => {
|
||||
onCodeChange(region() ? undefined : matchedRegionCode());
|
||||
<List
|
||||
sx={{
|
||||
paddingBottom: "var(--safe-area-inset-bottom, 0)",
|
||||
}}
|
||||
>
|
||||
<ListItemText>
|
||||
{t("region.auto", {
|
||||
detected:
|
||||
t(`region.${matchedRegionCode()}`) ?? matchedRegionCode(),
|
||||
})}
|
||||
</ListItemText>
|
||||
<ListItemSecondaryAction>
|
||||
<Switch checked={typeof region() === "undefined"} />
|
||||
</ListItemSecondaryAction>
|
||||
</ListItemButton>
|
||||
<ListItemButton
|
||||
onClick={() => {
|
||||
onCodeChange(region() ? undefined : matchedRegionCode());
|
||||
}}
|
||||
>
|
||||
<ListItemText>
|
||||
{t("region.auto", {
|
||||
detected:
|
||||
t(`region.${matchedRegionCode()}`) ?? matchedRegionCode(),
|
||||
})}
|
||||
</ListItemText>
|
||||
<ListItemSecondaryAction>
|
||||
<Switch checked={typeof region() === "undefined"} />
|
||||
</ListItemSecondaryAction>
|
||||
</ListItemButton>
|
||||
|
||||
<List subheader={<ListSubheader>{t("Supported")}</ListSubheader>}>
|
||||
<For each={SUPPORTED_REGIONS}>
|
||||
{(code) => (
|
||||
<ListItemButton
|
||||
disabled={typeof region() === "undefined"}
|
||||
onClick={[onCodeChange, code]}
|
||||
>
|
||||
<ListItemText>{t(`region.${code}`)}</ListItemText>
|
||||
<ListItemSecondaryAction>
|
||||
<Radio
|
||||
checked={
|
||||
region() === code ||
|
||||
(region() === undefined && matchedRegionCode() == code)
|
||||
}
|
||||
/>
|
||||
</ListItemSecondaryAction>
|
||||
</ListItemButton>
|
||||
)}
|
||||
</For>
|
||||
<List subheader={<ListSubheader>{t("Supported")}</ListSubheader>}>
|
||||
<For each={SUPPORTED_REGIONS}>
|
||||
{(code) => (
|
||||
<ListItemButton
|
||||
disabled={typeof region() === "undefined"}
|
||||
onClick={[onCodeChange, code]}
|
||||
>
|
||||
<ListItemText>{t(`region.${code}`)}</ListItemText>
|
||||
<ListItemSecondaryAction>
|
||||
<Radio
|
||||
checked={
|
||||
region() === code ||
|
||||
(region() === undefined && matchedRegionCode() == code)
|
||||
}
|
||||
/>
|
||||
</ListItemSecondaryAction>
|
||||
</ListItemButton>
|
||||
)}
|
||||
</For>
|
||||
</List>
|
||||
</List>
|
||||
</List>
|
||||
</Scaffold>
|
||||
</Scaffold>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -41,6 +41,7 @@ import { makeAcctText, useSessions } from "../masto/clients.js";
|
|||
import { useNavigator } from "~platform/StackedRouter.jsx";
|
||||
import AppTopBar from "~material/AppTopBar.jsx";
|
||||
import MastodonLogo from "./MastodonLogo.jsx";
|
||||
import DocumentTitle from "~platform/DocumentTitle.jsx";
|
||||
|
||||
type Inset = {
|
||||
top?: number;
|
||||
|
|
@ -197,225 +198,228 @@ const Settings: Component = () => {
|
|||
}
|
||||
`;
|
||||
return (
|
||||
<Scaffold
|
||||
topbar={
|
||||
<AppTopBar>
|
||||
<IconButton color="inherit" onClick={[pop, 1]} disableRipple>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
<Title>{t("Settings")}</Title>
|
||||
</AppTopBar>
|
||||
}
|
||||
>
|
||||
<List class="setting-list" use:solid-styled>
|
||||
<li>
|
||||
<ul>
|
||||
<ListSubheader>{t("Accounts")}</ListSubheader>
|
||||
<ListItemButton disabled>
|
||||
<ListItemText>{t("All Notifications")}</ListItemText>
|
||||
<ListItemSecondaryAction>
|
||||
<Switch value={false} disabled />
|
||||
</ListItemSecondaryAction>
|
||||
</ListItemButton>
|
||||
<Divider />
|
||||
<ListItemButton disabled>
|
||||
<ListItemText>{t("Sign in...")}</ListItemText>
|
||||
</ListItemButton>
|
||||
<Divider />
|
||||
</ul>
|
||||
<For each={profiles()}>
|
||||
{({ account: acct }) => (
|
||||
<ul data-site={acct.site} data-username={acct.inf?.username}>
|
||||
<ListSubheader>{`@${acct.inf?.username ?? "..."}@${new URL(acct.site).host}`}</ListSubheader>
|
||||
<ListItemButton disabled>
|
||||
<ListItemText>{t("Notifications")}</ListItemText>
|
||||
<ListItemSecondaryAction>
|
||||
<Switch value={false} disabled />
|
||||
</ListItemSecondaryAction>
|
||||
</ListItemButton>
|
||||
<Divider />
|
||||
<ListItemButton onClick={[doSignOut, acct]}>
|
||||
<ListItemIcon>
|
||||
<Logout />
|
||||
</ListItemIcon>
|
||||
<ListItemText>{t("Sign out")}</ListItemText>
|
||||
</ListItemButton>
|
||||
<Divider />
|
||||
</ul>
|
||||
)}
|
||||
</For>
|
||||
</li>
|
||||
<li>
|
||||
<ListSubheader>{t("timelines")}</ListSubheader>
|
||||
<ListItemButton
|
||||
onClick={(e) =>
|
||||
$settings.setKey(
|
||||
"prefetchTootsDisabled",
|
||||
!settings$().prefetchTootsDisabled,
|
||||
)
|
||||
}
|
||||
>
|
||||
<ListItemText secondary={t("Prefetch Toots.2nd")}>
|
||||
{t("Prefetch Toots")}
|
||||
</ListItemText>
|
||||
<ListItemSecondaryAction>
|
||||
<Switch checked={!settings$().prefetchTootsDisabled} />
|
||||
</ListItemSecondaryAction>
|
||||
</ListItemButton>
|
||||
<Divider />
|
||||
<ListItemButton component={A} href="./motions">
|
||||
<ListItemIcon>
|
||||
<AnimationIcon></AnimationIcon>
|
||||
</ListItemIcon>
|
||||
<ListItemText>{t("motions")}</ListItemText>
|
||||
</ListItemButton>
|
||||
<Divider />
|
||||
</li>
|
||||
<li>
|
||||
<ListSubheader>{t("storage")}</ListSubheader>
|
||||
<ListItemButton disabled>
|
||||
<ListItemIcon>
|
||||
<DeleteForever />
|
||||
</ListItemIcon>
|
||||
<ListItemText secondary={t("storage.cache.UA-managed")}>
|
||||
{t("storage.cache.clear")}
|
||||
</ListItemText>
|
||||
</ListItemButton>
|
||||
</li>
|
||||
<li>
|
||||
<ListSubheader>{t("This Application")}</ListSubheader>
|
||||
<ListItemButton component={A} href="./language">
|
||||
<ListItemIcon>
|
||||
<TranslateIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
secondary={
|
||||
settings$().language === undefined
|
||||
? t("lang.auto", {
|
||||
detected:
|
||||
t("lang." + autoMatchLangTag()) ?? autoMatchLangTag(),
|
||||
})
|
||||
: t("lang." + settings$().language)
|
||||
}
|
||||
>
|
||||
{t("Language")}
|
||||
</ListItemText>
|
||||
</ListItemButton>
|
||||
<Divider />
|
||||
<ListItemButton component={A} href="./region">
|
||||
<ListItemIcon>
|
||||
<PublicIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
secondary={
|
||||
settings$().region === undefined
|
||||
? t("region.auto", {
|
||||
detected:
|
||||
t("region." + autoMatchRegion()) ?? autoMatchRegion(),
|
||||
})
|
||||
: t("region." + settings$().region)
|
||||
}
|
||||
>
|
||||
{t("Region")}
|
||||
</ListItemText>
|
||||
</ListItemButton>
|
||||
<Divider />
|
||||
<ListItem
|
||||
secondaryAction={
|
||||
<IconButton
|
||||
component={A}
|
||||
aria-label={t("mastodonlink.open")}
|
||||
href={`/${encodeURIComponent(profiles().length > 0 ? makeAcctText(profiles()[0]) : "@")}/profile/@tutu@indieweb.social`}
|
||||
>
|
||||
<MastodonLogo />
|
||||
</IconButton>
|
||||
}
|
||||
>
|
||||
<ListItemText secondary={t("About Tutu.2nd")}>
|
||||
{t("About Tutu")}
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
<Divider />
|
||||
<ListItem>
|
||||
<ListItemText
|
||||
secondary={t("version", {
|
||||
packageVersion: import.meta.env.PACKAGE_VERSION,
|
||||
builtAt: format(
|
||||
import.meta.env.BUILT_AT,
|
||||
t("datefmt") || "yyyy/MM/dd",
|
||||
{ locale: dateFnLocale() },
|
||||
),
|
||||
buildMode: import.meta.env.MODE,
|
||||
})}
|
||||
>
|
||||
{needRefresh() ? t("updates.ready") : t("updates.no")}
|
||||
</ListItemText>
|
||||
<Show when={needRefresh()}>
|
||||
<ListItemSecondaryAction>
|
||||
<IconButton
|
||||
aria-label="Restart Now"
|
||||
onClick={() => window.location.reload()}
|
||||
>
|
||||
<RefreshIcon />
|
||||
</IconButton>
|
||||
</ListItemSecondaryAction>
|
||||
</Show>
|
||||
</ListItem>
|
||||
<Divider />
|
||||
{import.meta.env.VITE_CODE_VERSION ? (
|
||||
<>
|
||||
<ListItem>
|
||||
<ListItemText secondary={import.meta.env.VITE_CODE_VERSION}>
|
||||
{t("version.code")}
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
<Divider />
|
||||
</>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</li>
|
||||
{import.meta.env.DEV ? (
|
||||
<>
|
||||
<DocumentTitle>{t("Settings")}</DocumentTitle>
|
||||
<Scaffold
|
||||
topbar={
|
||||
<AppTopBar>
|
||||
<IconButton color="inherit" onClick={[pop, 1]} disableRipple>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
<Title>{t("Settings")}</Title>
|
||||
</AppTopBar>
|
||||
}
|
||||
>
|
||||
<List class="setting-list" use:solid-styled>
|
||||
<li>
|
||||
<ListSubheader>Developer Tools</ListSubheader>
|
||||
<ListItem
|
||||
secondaryAction={
|
||||
window.screen?.orientation ? (
|
||||
<NativeSelect
|
||||
sx={{ maxWidth: "40vw" }}
|
||||
onChange={(event) => {
|
||||
const k = event.currentTarget.value;
|
||||
setupSafeAreaEmulation(k);
|
||||
}}
|
||||
>
|
||||
<option>Don't change</option>
|
||||
<option value={"ua"}>User agent</option>
|
||||
<option value={"iphone15"}>
|
||||
iPhone 15 and Plus, Pro, Pro Max
|
||||
</option>
|
||||
<option value={"iphone12"}>iPhone 12, 13 and 14</option>
|
||||
<option value={"iphone13mini"}>iPhone 13 mini</option>
|
||||
</NativeSelect>
|
||||
) : undefined
|
||||
<ul>
|
||||
<ListSubheader>{t("Accounts")}</ListSubheader>
|
||||
<ListItemButton disabled>
|
||||
<ListItemText>{t("All Notifications")}</ListItemText>
|
||||
<ListItemSecondaryAction>
|
||||
<Switch value={false} disabled />
|
||||
</ListItemSecondaryAction>
|
||||
</ListItemButton>
|
||||
<Divider />
|
||||
<ListItemButton disabled>
|
||||
<ListItemText>{t("Sign in...")}</ListItemText>
|
||||
</ListItemButton>
|
||||
<Divider />
|
||||
</ul>
|
||||
<For each={profiles()}>
|
||||
{({ account: acct }) => (
|
||||
<ul data-site={acct.site} data-username={acct.inf?.username}>
|
||||
<ListSubheader>{`@${acct.inf?.username ?? "..."}@${new URL(acct.site).host}`}</ListSubheader>
|
||||
<ListItemButton disabled>
|
||||
<ListItemText>{t("Notifications")}</ListItemText>
|
||||
<ListItemSecondaryAction>
|
||||
<Switch value={false} disabled />
|
||||
</ListItemSecondaryAction>
|
||||
</ListItemButton>
|
||||
<Divider />
|
||||
<ListItemButton onClick={[doSignOut, acct]}>
|
||||
<ListItemIcon>
|
||||
<Logout />
|
||||
</ListItemIcon>
|
||||
<ListItemText>{t("Sign out")}</ListItemText>
|
||||
</ListItemButton>
|
||||
<Divider />
|
||||
</ul>
|
||||
)}
|
||||
</For>
|
||||
</li>
|
||||
<li>
|
||||
<ListSubheader>{t("timelines")}</ListSubheader>
|
||||
<ListItemButton
|
||||
onClick={(e) =>
|
||||
$settings.setKey(
|
||||
"prefetchTootsDisabled",
|
||||
!settings$().prefetchTootsDisabled,
|
||||
)
|
||||
}
|
||||
>
|
||||
<ListItemText secondary={t("Prefetch Toots.2nd")}>
|
||||
{t("Prefetch Toots")}
|
||||
</ListItemText>
|
||||
<ListItemSecondaryAction>
|
||||
<Switch checked={!settings$().prefetchTootsDisabled} />
|
||||
</ListItemSecondaryAction>
|
||||
</ListItemButton>
|
||||
<Divider />
|
||||
<ListItemButton component={A} href="./motions">
|
||||
<ListItemIcon>
|
||||
<AnimationIcon></AnimationIcon>
|
||||
</ListItemIcon>
|
||||
<ListItemText>{t("motions")}</ListItemText>
|
||||
</ListItemButton>
|
||||
<Divider />
|
||||
</li>
|
||||
<li>
|
||||
<ListSubheader>{t("storage")}</ListSubheader>
|
||||
<ListItemButton disabled>
|
||||
<ListItemIcon>
|
||||
<DeleteForever />
|
||||
</ListItemIcon>
|
||||
<ListItemText secondary={t("storage.cache.UA-managed")}>
|
||||
{t("storage.cache.clear")}
|
||||
</ListItemText>
|
||||
</ListItemButton>
|
||||
</li>
|
||||
<li>
|
||||
<ListSubheader>{t("This Application")}</ListSubheader>
|
||||
<ListItemButton component={A} href="./language">
|
||||
<ListItemIcon>
|
||||
<TranslateIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
secondary={
|
||||
window.screen?.orientation
|
||||
? undefined
|
||||
: "Unsupported on This Platform"
|
||||
settings$().language === undefined
|
||||
? t("lang.auto", {
|
||||
detected:
|
||||
t("lang." + autoMatchLangTag()) ?? autoMatchLangTag(),
|
||||
})
|
||||
: t("lang." + settings$().language)
|
||||
}
|
||||
>
|
||||
Safe Area Insets
|
||||
{t("Language")}
|
||||
</ListItemText>
|
||||
</ListItemButton>
|
||||
<Divider />
|
||||
<ListItemButton component={A} href="./region">
|
||||
<ListItemIcon>
|
||||
<PublicIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
secondary={
|
||||
settings$().region === undefined
|
||||
? t("region.auto", {
|
||||
detected:
|
||||
t("region." + autoMatchRegion()) ?? autoMatchRegion(),
|
||||
})
|
||||
: t("region." + settings$().region)
|
||||
}
|
||||
>
|
||||
{t("Region")}
|
||||
</ListItemText>
|
||||
</ListItemButton>
|
||||
<Divider />
|
||||
<ListItem
|
||||
secondaryAction={
|
||||
<IconButton
|
||||
component={A}
|
||||
aria-label={t("mastodonlink.open")}
|
||||
href={`/${encodeURIComponent(profiles().length > 0 ? makeAcctText(profiles()[0]) : "@")}/profile/@tutu@indieweb.social`}
|
||||
>
|
||||
<MastodonLogo />
|
||||
</IconButton>
|
||||
}
|
||||
>
|
||||
<ListItemText secondary={t("About Tutu.2nd")}>
|
||||
{t("About Tutu")}
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
<Divider />
|
||||
<ListItem>
|
||||
<ListItemText
|
||||
secondary={t("version", {
|
||||
packageVersion: import.meta.env.PACKAGE_VERSION,
|
||||
builtAt: format(
|
||||
import.meta.env.BUILT_AT,
|
||||
t("datefmt") || "yyyy/MM/dd",
|
||||
{ locale: dateFnLocale() },
|
||||
),
|
||||
buildMode: import.meta.env.MODE,
|
||||
})}
|
||||
>
|
||||
{needRefresh() ? t("updates.ready") : t("updates.no")}
|
||||
</ListItemText>
|
||||
<Show when={needRefresh()}>
|
||||
<ListItemSecondaryAction>
|
||||
<IconButton
|
||||
aria-label="Restart Now"
|
||||
onClick={() => window.location.reload()}
|
||||
>
|
||||
<RefreshIcon />
|
||||
</IconButton>
|
||||
</ListItemSecondaryAction>
|
||||
</Show>
|
||||
</ListItem>
|
||||
<Divider />
|
||||
{import.meta.env.VITE_CODE_VERSION ? (
|
||||
<>
|
||||
<ListItem>
|
||||
<ListItemText secondary={import.meta.env.VITE_CODE_VERSION}>
|
||||
{t("version.code")}
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
<Divider />
|
||||
</>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</li>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</List>
|
||||
</Scaffold>
|
||||
{import.meta.env.DEV ? (
|
||||
<li>
|
||||
<ListSubheader>Developer Tools</ListSubheader>
|
||||
<ListItem
|
||||
secondaryAction={
|
||||
window.screen?.orientation ? (
|
||||
<NativeSelect
|
||||
sx={{ maxWidth: "40vw" }}
|
||||
onChange={(event) => {
|
||||
const k = event.currentTarget.value;
|
||||
setupSafeAreaEmulation(k);
|
||||
}}
|
||||
>
|
||||
<option>Don't change</option>
|
||||
<option value={"ua"}>User agent</option>
|
||||
<option value={"iphone15"}>
|
||||
iPhone 15 and Plus, Pro, Pro Max
|
||||
</option>
|
||||
<option value={"iphone12"}>iPhone 12, 13 and 14</option>
|
||||
<option value={"iphone13mini"}>iPhone 13 mini</option>
|
||||
</NativeSelect>
|
||||
) : undefined
|
||||
}
|
||||
>
|
||||
<ListItemText
|
||||
secondary={
|
||||
window.screen?.orientation
|
||||
? undefined
|
||||
: "Unsupported on This Platform"
|
||||
}
|
||||
>
|
||||
Safe Area Insets
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
<Divider />
|
||||
</li>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</List>
|
||||
</Scaffold>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue