Settings: move lang and region to separate route

src/App.tsx

@@ -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>

src/settings/Language.tsx

@@ -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 = {
+const ChooseLang: Component = () => {
-  code?: string;
+  const navigate = useNavigate()
-  onCodeChange: (ncode?: string) => void;
-  onClose?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>;
-};
-
-const ChooseLang: Component<ChooseLangProps> = (props) => {
   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>
+            <IconButton color="inherit" onClick={[navigate, -1]} disableRipple>
-              <CloseIcon />
+              <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"}
+                disabled={typeof code() === "undefined"}
-                onClick={[props.onCodeChange, code]}
+                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>

src/settings/Motions.tsx

@@ -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>

src/settings/Region.tsx

@@ -12,8 +12,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 {
   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 = {
+const ChooseRegion: Component = () => {
-  code?: string;
+  const navigate = useNavigate();
-  onCodeChange: (ncode?: string) => void;
-  onClose?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>;
-};
-
-const ChooseRegion: Component<ChooseRegionProps> = (props) => {
   const [t] = createTranslator(
     () => import("./i18n/lang-names.json"),
     (code) =>
@@ -39,12 +36,16 @@ const ChooseRegion: Component<ChooseRegionProps> = (props) => {
       }>,
   );
 
-  const unsupportedLangCodes = createMemo(() => {
+  const settings = useStore($settings);
-    return iso639_1.getAllCodes().filter((x) => !["zh", "en"].includes(x));
+
-  });
+  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>
+            <IconButton color="inherit" onClick={[navigate, -1]} disableRipple>
-              <CloseIcon />
+              <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"}
+                disabled={typeof region() === "undefined"}
-                onClick={[props.onCodeChange, code]}
+                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>

src/settings/Settings.tsx

@@ -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")}>