Settings: move lang and region to separate route

2024-10-09 23:27:20 +08:00 · 2024-10-09 23:27:20 +08:00 · 3dba564112
commit 3dba564112
parent 4fb5582b3d
5 changed files with 55 additions and 62 deletions
--- a/src/settings/ChooseLang.tsx
+++ b/src/settings/ChooseLang.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 = {
-  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>
--- a/src/settings/Motions.tsx
+++ b/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>
--- a/src/settings/ChooseRegion.tsx
+++ b/src/settings/ChooseRegion.tsx
@ -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>
--- a/src/settings/Settings.tsx
+++ b/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")}>