Rubicon/tutu
1
0
Fork 0
Code Issues 19 Pull requests Projects Activity Actions

Settings: move lang and region to separate route

Browse source
This commit is contained in:
thislight 2024-10-09 23:27:20 +08:00
parent 4fb5582b3d
commit 3dba564112
5 changed files with 55 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/App.tsx
View file

@ -26,6 +26,8 @@ const TimelineHome = lazy(() => import("./timelines/Home.js"));
const Settings = lazy(() => import("./settings/Settings.js"));
const TootBottomSheet = lazy(() => import("./timelines/TootBottomSheet.js"));
const MotionSettings = lazy(() => import("./settings/Motions.js"));
const LanguageSettings = lazy(() => import("./settings/Language.js"));
const RegionSettings = lazy(() => import("./settings/Region.jsx"));
const Routing: Component = () => {
return (
@ -34,6 +36,8 @@ const Routing: Component = () => {
<Route path=""></Route>
<Route path="/settings" component={Settings}>
<Route path=""></Route>
<Route path="/language" component={LanguageSettings}></Route>
<Route path="/region" component={RegionSettings}></Route>
<Route path="/motions" component={MotionSettings}></Route>
</Route>
<Route path="/:acct/:id" component={TootBottomSheet}></Route>

39
src/settings/ChooseLang.tsx → src/settings/Language.tsx
View file

@ -13,7 +13,7 @@ import {
Switch,
Toolbar,
} from "@suid/material";
import { Close as CloseIcon } from "@suid/icons-material";
import { ArrowBack } from "@suid/icons-material";
import iso639_1 from "iso-639-1";
import {
autoMatchLangTag,
@ -22,14 +22,12 @@ import {
} from "../platform/i18n";
import { Title } from "../material/typography";
import type { Template } from "@solid-primitives/i18n";
import { useStore } from "@nanostores/solid";
import { $settings } from "./stores";
import { useNavigate } from "@solidjs/router";
type ChooseLangProps = {
code?: string;
onCodeChange: (ncode?: string) => void;
onClose?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>;
};
const ChooseLang: Component<ChooseLangProps> = (props) => {
const ChooseLang: Component = () => {
const navigate = useNavigate()
const [t] = createTranslator(
() => import("./i18n/lang-names.json"),
(code) =>
@ -39,6 +37,9 @@ const ChooseLang: Component<ChooseLangProps> = (props) => {
};
}>,
);
const settings = useStore($settings)
const code = () => settings().language
const unsupportedLangCodes = createMemo(() => {
return iso639_1.getAllCodes().filter((x) => !["zh", "en"].includes(x));
@ -46,6 +47,10 @@ const ChooseLang: Component<ChooseLangProps> = (props) => {
const matchedLangCode = createMemo(() => autoMatchLangTag());
const onCodeChange = (code?: string) => {
$settings.setKey("language", code)
}
return (
<Scaffold
topbar={
@ -54,8 +59,8 @@ const ChooseLang: Component<ChooseLangProps> = (props) => {
variant="dense"
sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
>
<IconButton color="inherit" onClick={props.onClose} disableRipple>
<CloseIcon />
<IconButton color="inherit" onClick={[navigate, -1]} disableRipple>
<ArrowBack />
</IconButton>
<Title>{t("Choose Language")}</Title>
</Toolbar>
@ -69,7 +74,7 @@ const ChooseLang: Component<ChooseLangProps> = (props) => {
>
<ListItemButton
onClick={() => {
props.onCodeChange(props.code ? undefined : matchedLangCode());
onCodeChange(code() ? undefined : matchedLangCode());
}}
>
<ListItemText>
@ -78,20 +83,20 @@ const ChooseLang: Component<ChooseLangProps> = (props) => {
})}
</ListItemText>
<ListItemSecondaryAction>
<Switch checked={typeof props.code === "undefined"} />
<Switch checked={typeof code() === "undefined"} />
</ListItemSecondaryAction>
</ListItemButton>
<List subheader={<ListSubheader>{t("Supported")}</ListSubheader>}>
<For each={SUPPORTED_LANGS}>
{(code) => (
{(c) => (
<ListItemButton
disabled={typeof props.code === "undefined"}
onClick={[props.onCodeChange, code]}
disabled={typeof code() === "undefined"}
onClick={[onCodeChange, c]}
>
<ListItemText>{t(`lang.${code}`)}</ListItemText>
<ListItemText>{t(`lang.${c}`)}</ListItemText>
<ListItemSecondaryAction>
<Radio
checked={props.code === code || (props.code === undefined && matchedLangCode() == code)}
checked={code() === c || (code() === undefined && matchedLangCode() == c)}
/>
</ListItemSecondaryAction>
</ListItemButton>

4
src/settings/Motions.tsx
View file

@ -14,7 +14,7 @@ import {
} from "@suid/material";
import { Title } from "../material/typography";
import { useNavigate } from "@solidjs/router";
import { Close as CloseIcon } from "@suid/icons-material";
import { ArrowBack } from "@suid/icons-material";
import { createTranslator } from "../platform/i18n";
import { useStore } from "@nanostores/solid";
import { $settings } from "./stores";
@ -37,7 +37,7 @@ const Motions: Component = () => {
sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
>
<IconButton color="inherit" onClick={[navigate, -1]} disableRipple>
<CloseIcon />
<ArrowBack />
</IconButton>
<Title>{t("motions")}</Title>
</Toolbar>

45
src/settings/ChooseRegion.tsx → src/settings/Region.tsx
View file

@ -12,8 +12,7 @@ import {
Switch,
Toolbar,
} from "@suid/material";
import { Close as CloseIcon } from "@suid/icons-material";
import iso639_1 from "iso-639-1";
import { ArrowBack } from "@suid/icons-material";
import {
autoMatchRegion,
createTranslator,
@ -21,14 +20,12 @@ import {
} from "../platform/i18n";
import { Title } from "../material/typography";
import type { Template } from "@solid-primitives/i18n";
import { useNavigate } from "@solidjs/router";
import { $settings } from "./stores";
import { useStore } from "@nanostores/solid";
type ChooseRegionProps = {
code?: string;
onCodeChange: (ncode?: string) => void;
onClose?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>;
};
const ChooseRegion: Component<ChooseRegionProps> = (props) => {
const ChooseRegion: Component = () => {
const navigate = useNavigate();
const [t] = createTranslator(
() => import("./i18n/lang-names.json"),
(code) =>
@ -39,12 +36,16 @@ const ChooseRegion: Component<ChooseRegionProps> = (props) => {
}>,
);
const unsupportedLangCodes = createMemo(() => {
return iso639_1.getAllCodes().filter((x) => !["zh", "en"].includes(x));
});
const settings = useStore($settings);
const region = () => settings().region;
const matchedRegionCode = createMemo(() => autoMatchRegion());
const onCodeChange = (code?: string) => {
$settings.setKey("region", code);
};
return (
<Scaffold
topbar={
@ -53,8 +54,8 @@ const ChooseRegion: Component<ChooseRegionProps> = (props) => {
variant="dense"
sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
>
<IconButton color="inherit" onClick={props.onClose} disableRipple>
<CloseIcon />
<IconButton color="inherit" onClick={[navigate, -1]} disableRipple>
<ArrowBack />
</IconButton>
<Title>{t("Choose Language")}</Title>
</Toolbar>
@ -68,16 +69,17 @@ const ChooseRegion: Component<ChooseRegionProps> = (props) => {
>
<ListItemButton
onClick={() => {
props.onCodeChange(props.code ? undefined : matchedRegionCode());
onCodeChange(region() ? undefined : matchedRegionCode());
}}
>
<ListItemText>
{t("region.auto", {
detected: t(`region.${matchedRegionCode()}`) ?? matchedRegionCode(),
detected:
t(`region.${matchedRegionCode()}`) ?? matchedRegionCode(),
})}
</ListItemText>
<ListItemSecondaryAction>
<Switch checked={typeof props.code === "undefined"} />
<Switch checked={typeof region() === "undefined"} />
</ListItemSecondaryAction>
</ListItemButton>
@ -85,13 +87,16 @@ const ChooseRegion: Component<ChooseRegionProps> = (props) => {
<For each={SUPPORTED_REGIONS}>
{(code) => (
<ListItemButton
disabled={typeof props.code === "undefined"}
onClick={[props.onCodeChange, code]}
disabled={typeof region() === "undefined"}
onClick={[onCodeChange, code]}
>
<ListItemText>{t(`region.${code}`)}</ListItemText>
<ListItemSecondaryAction>
<Radio
checked={props.code === code || (props.code === undefined && matchedRegionCode() == code)}
checked={
region() === code ||
(region() === undefined && matchedRegionCode() == code)
}
/>
</ListItemSecondaryAction>
</ListItemButton>

25
src/settings/Settings.tsx
View file

@ -41,15 +41,10 @@ import {
autoMatchLangTag,
autoMatchRegion,
createTranslator,
SUPPORTED_LANGS,
SUPPORTED_REGIONS,
useDateFnLocale,
} from "../platform/i18n.jsx";
import { type Template } from "@solid-primitives/i18n";
import BottomSheet from "../material/BottomSheet.jsx";
import ChooseLang from "./ChooseLang.jsx";
import ChooseRegion from "./ChooseRegion.jsx";
import { Portal } from "solid-js/web";
type Strings = {
["lang.auto"]: Template<{ detected: string }>;
@ -69,8 +64,6 @@ const Settings: ParentComponent = (props) => {
needRefresh: [needRefresh],
} = useRegisterSW();
const dateFnLocale = useDateFnLocale();
const [langPickerOpen, setLangPickerOpen] = createSignal(false);
const [regionPickerOpen, setRegionPickerOpen] = createSignal(false);
const [profiles] = useSignedInProfiles();
@ -175,7 +168,7 @@ const Settings: ParentComponent = (props) => {
</li>
<li>
<ListSubheader>{t("This Application")}</ListSubheader>
<ListItemButton onClick={[setLangPickerOpen, true]}>
<ListItemButton component={A} href="./language">
<ListItemIcon>
<TranslateIcon />
</ListItemIcon>
@ -192,15 +185,8 @@ const Settings: ParentComponent = (props) => {
{t("Language")}
</ListItemText>
</ListItemButton>
<BottomSheet open={langPickerOpen()}>
<ChooseLang
code={settings$().language}
onCodeChange={(nval) => $settings.setKey("language", nval)}
onClose={[setLangPickerOpen, false]}
/>
</BottomSheet>
<Divider />
<ListItemButton onClick={[setRegionPickerOpen, true]}>
<ListItemButton component={A} href="./region">
<ListItemIcon>
<PublicIcon />
</ListItemIcon>
@ -217,13 +203,6 @@ const Settings: ParentComponent = (props) => {
{t("Region")}
</ListItemText>
</ListItemButton>
<BottomSheet open={regionPickerOpen()}>
<ChooseRegion
code={settings$().region}
onCodeChange={(nval) => $settings.setKey("region", nval)}
onClose={[setRegionPickerOpen, false]}
/>
</BottomSheet>
<Divider />
<ListItem>
<ListItemText secondary={t("About Tutu.2nd")}>