Settings: added lang and region picker dialog

2024-09-27 14:15:34 +08:00 · 2024-09-27 14:15:34 +08:00 · e56dc4bf7b
commit e56dc4bf7b
parent 55705b0a6d
10 changed files with 316 additions and 75 deletions
--- a/bun.lockb
+++ b/bun.lockb
--- a/package.json
+++ b/package.json
@ -42,6 +42,7 @@
    "date-fns": "^3.6.0",
    "fast-average-color": "^9.4.0",
    "hammerjs": "^2.0.8",
+    "iso-639-1": "^3.1.3",
    "masto": "^6.8.0",
    "nanostores": "^0.11.3",
    "solid-js": "^1.8.22",
--- a/src/masto/acct.ts
+++ b/src/masto/acct.ts
@ -12,11 +12,16 @@ export function useSignedInProfiles() {
  });
  return [
    () => {
+      try {
        const value = accessor();
-      if (!value) {
-        return sessions().map((x) => ({ ...x, inf: x.account.inf }));
-      }
+        if (value) {
          return value;
+        }
+      } catch (reason) {
+        console.error("useSignedInProfiles: update acct info failed", reason);
+      }
+
+      return sessions().map((x) => ({ ...x, inf: x.account.inf }));
    },
    tools,
  ] as const;
--- a/src/platform/i18n.tsx
+++ b/src/platform/i18n.tsx
@ -20,9 +20,9 @@ async function synchronised(
  await navigator.locks.request(name, callback);
 }

-export const SUPPORTED_LANGS = ["en", "zh-Hans"];
+export const SUPPORTED_LANGS = ["en", "zh-Hans"] as const;

-export const SUPPORTED_REGIONS = ["en_US", "en_GB", "zh_CN"];
+export const SUPPORTED_REGIONS = ["en_US", "en_GB", "zh_CN"] as const;

 const DEFAULT_LANG = "en";

--- a/src/settings/ChooseLang.tsx
+++ b/src/settings/ChooseLang.tsx
@ -0,0 +1,117 @@
+import { createMemo, For, type Component, type JSX } from "solid-js";
+import Scaffold from "../material/Scaffold";
+import {
+  AppBar,
+  Checkbox,
+  IconButton,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemSecondaryAction,
+  ListItemText,
+  ListSubheader,
+  Radio,
+  Switch,
+  Toolbar,
+} from "@suid/material";
+import { Close as CloseIcon } from "@suid/icons-material";
+import iso639_1 from "iso-639-1";
+import {
+  autoMatchLangTag,
+  createTranslator,
+  SUPPORTED_LANGS,
+} from "../platform/i18n";
+import { Title } from "../material/typography";
+import type { Template } from "@solid-primitives/i18n";
+
+type ChooseLangProps = {
+  code?: string;
+  onCodeChange: (ncode?: string) => void;
+  onClose?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>;
+};
+
+const ChooseLang: Component<ChooseLangProps> = (props) => {
+  const [t] = createTranslator(
+    () => import("./i18n/lang-names.json"),
+    (code) =>
+      import(`./i18n/${code}.json`) as Promise<{
+        default: Record<string, string | undefined> & {
+          ["lang.auto"]: Template<{ detected: string }>;
+        };
+      }>,
+  );
+
+  const unsupportedLangCodes = createMemo(() => {
+    return iso639_1.getAllCodes().filter((x) => !["zh", "en"].includes(x));
+  });
+
+  const matchedLangCode = createMemo(() => autoMatchLangTag());
+
+  return (
+    <Scaffold
+      topbar={
+        <AppBar position="static">
+          <Toolbar
+            variant="dense"
+            sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
+          >
+            <IconButton color="inherit" onClick={props.onClose} disableRipple>
+              <CloseIcon />
+            </IconButton>
+            <Title>{t("Choose Language")}</Title>
+          </Toolbar>
+        </AppBar>
+      }
+    >
+      <List
+        sx={{
+          paddingBottom: "var(--safe-area-inset-bottom, 0)",
+        }}
+      >
+        <ListItemButton
+          onClick={() => {
+            props.onCodeChange(props.code ? undefined : matchedLangCode());
+          }}
+        >
+          <ListItemText>
+            {t("lang.auto", {
+              detected: t(`lang.${matchedLangCode()}`) ?? matchedLangCode(),
+            })}
+          </ListItemText>
+          <ListItemSecondaryAction>
+            <Switch checked={typeof props.code === "undefined"} />
+          </ListItemSecondaryAction>
+        </ListItemButton>
+        <List subheader={<ListSubheader>{t("Supported")}</ListSubheader>}>
+          <For each={SUPPORTED_LANGS}>
+            {(code) => (
+              <ListItemButton
+                disabled={typeof props.code === "undefined"}
+                onClick={[props.onCodeChange, code]}
+              >
+                <ListItemText>{t(`lang.${code}`)}</ListItemText>
+                <ListItemSecondaryAction>
+                  <Radio
+                    checked={props.code === code || (props.code === undefined && matchedLangCode() == code)}
+                  />
+                </ListItemSecondaryAction>
+              </ListItemButton>
+            )}
+          </For>
+        </List>
+
+        <List subheader={<ListSubheader>{t("Unsupported")}</ListSubheader>}>
+          <For each={unsupportedLangCodes()}>
+            {(code) => (
+              <ListItem>
+                <ListItemText>{iso639_1.getNativeName(code)}</ListItemText>
+              </ListItem>
+            )}
+          </For>
+        </List>
+      </List>
+    </Scaffold>
+  );
+};
+
+export default ChooseLang;
--- a/src/settings/ChooseRegion.tsx
+++ b/src/settings/ChooseRegion.tsx
@ -0,0 +1,110 @@
+import { createMemo, For, type Component, type JSX } from "solid-js";
+import Scaffold from "../material/Scaffold";
+import {
+  AppBar,
+  Checkbox,
+  IconButton,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemSecondaryAction,
+  ListItemText,
+  ListSubheader,
+  Radio,
+  Switch,
+  Toolbar,
+} from "@suid/material";
+import { Close as CloseIcon } from "@suid/icons-material";
+import iso639_1 from "iso-639-1";
+import {
+  autoMatchLangTag,
+  autoMatchRegion,
+  createTranslator,
+  SUPPORTED_LANGS,
+  SUPPORTED_REGIONS,
+} from "../platform/i18n";
+import { Title } from "../material/typography";
+import type { Template } from "@solid-primitives/i18n";
+
+type ChooseRegionProps = {
+  code?: string;
+  onCodeChange: (ncode?: string) => void;
+  onClose?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>;
+};
+
+const ChooseRegion: Component<ChooseRegionProps> = (props) => {
+  const [t] = createTranslator(
+    () => import("./i18n/lang-names.json"),
+    (code) =>
+      import(`./i18n/${code}.json`) as Promise<{
+        default: Record<string, string | undefined> & {
+          ["lang.auto"]: Template<{ detected: string }>;
+        };
+      }>,
+  );
+
+  const unsupportedLangCodes = createMemo(() => {
+    return iso639_1.getAllCodes().filter((x) => !["zh", "en"].includes(x));
+  });
+
+  const matchedRegionCode = createMemo(() => autoMatchRegion());
+
+  return (
+    <Scaffold
+      topbar={
+        <AppBar position="static">
+          <Toolbar
+            variant="dense"
+            sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
+          >
+            <IconButton color="inherit" onClick={props.onClose} disableRipple>
+              <CloseIcon />
+            </IconButton>
+            <Title>{t("Choose Language")}</Title>
+          </Toolbar>
+        </AppBar>
+      }
+    >
+      <List
+        sx={{
+          paddingBottom: "var(--safe-area-inset-bottom, 0)",
+        }}
+      >
+        <ListItemButton
+          onClick={() => {
+            props.onCodeChange(props.code ? undefined : matchedRegionCode());
+          }}
+        >
+          <ListItemText>
+            {t("region.auto", {
+              detected: t(`region.${matchedRegionCode()}`) ?? matchedRegionCode(),
+            })}
+          </ListItemText>
+          <ListItemSecondaryAction>
+            <Switch checked={typeof props.code === "undefined"} />
+          </ListItemSecondaryAction>
+        </ListItemButton>
+
+        <List subheader={<ListSubheader>{t("Supported")}</ListSubheader>}>
+          <For each={SUPPORTED_REGIONS}>
+            {(code) => (
+              <ListItemButton
+                disabled={typeof props.code === "undefined"}
+                onClick={[props.onCodeChange, code]}
+              >
+                <ListItemText>{t(`region.${code}`)}</ListItemText>
+                <ListItemSecondaryAction>
+                  <Radio
+                    checked={props.code === code || (props.code === undefined && matchedRegionCode() == code)}
+                  />
+                </ListItemSecondaryAction>
+              </ListItemButton>
+            )}
+          </For>
+        </List>
+      </List>
+    </Scaffold>
+  );
+};
+
+export default ChooseRegion;
--- a/src/settings/Settings.tsx
+++ b/src/settings/Settings.tsx
@ -1,4 +1,4 @@
-import { For, Show, type ParentComponent } from "solid-js";
+import { createSignal, For, Show, type ParentComponent } from "solid-js";
 import Scaffold from "../material/Scaffold.js";
 import {
  AppBar,
@ -40,10 +40,13 @@ import {
  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";

 type Strings = {
-  ["lang.auto"]: Template<{detected: string}>
-} & Record<string, string | undefined>
+  ["lang.auto"]: Template<{ detected: string }>;
+} & Record<string, string | undefined>;

 const Settings: ParentComponent = () => {
  const [t] = createTranslator(
@ -51,7 +54,7 @@ const Settings: ParentComponent = () => {
      import(`./i18n/${code}.json`) as Promise<{
        default: Strings;
      }>,
-    () => import(`./i18n/lang-names.json`)
+    () => import(`./i18n/lang-names.json`),
  );
  const navigate = useNavigate();
  const settings$ = useStore($settings);
@ -59,6 +62,8 @@ const Settings: ParentComponent = () => {
    needRefresh: [needRefresh],
  } = useRegisterSW();
  const dateFnLocale = useDateFnLocale();
+  const [langPickerOpen, setLangPickerOpen] = createSignal(false);
+  const [regionPickerOpen, setRegionPickerOpen] = createSignal(false);

  const [profiles] = useSignedInProfiles();

@ -98,7 +103,7 @@ const Settings: ParentComponent = () => {
            <ListItemButton disabled>
              <ListItemText>{t("All Notifications")}</ListItemText>
              <ListItemSecondaryAction>
-                <Switch value={false} disabled/>
+                <Switch value={false} disabled />
              </ListItemSecondaryAction>
            </ListItemButton>
            <Divider />
@ -114,13 +119,13 @@ const Settings: ParentComponent = () => {
                <ListItemButton disabled>
                  <ListItemText>{t("Notifications")}</ListItemText>
                  <ListItemSecondaryAction>
-                    <Switch value={false} disabled/>
+                    <Switch value={false} disabled />
                  </ListItemSecondaryAction>
                </ListItemButton>
                <Divider />
                <ListItemButton onClick={[doSignOut, acct]}>
                  <ListItemIcon>
-                    <Logout/>
+                    <Logout />
                  </ListItemIcon>
                  <ListItemText>{t("Sign out")}</ListItemText>
                </ListItemButton>
@ -150,65 +155,55 @@ const Settings: ParentComponent = () => {
        </li>
        <li>
          <ListSubheader>{t("This Application")}</ListSubheader>
-          <ListItem>
+          <ListItemButton onClick={[setLangPickerOpen, true]}>
            <ListItemIcon>
              <TranslateIcon />
            </ListItemIcon>
-            <ListItemText>{t("Language")}</ListItemText>
-            <ListItemSecondaryAction>
-              <NativeSelect
-                value={settings$().language || "xauto"}
-                onChange={(e) => {
-                  $settings.setKey(
-                    "language",
-                    e.currentTarget.value === "xauto"
-                      ? undefined
-                      : e.currentTarget.value,
-                  );
-                }}
+            <ListItemText
+              secondary={
+                settings$().language === undefined
+                  ? t("lang.auto", {
+                      detected:
+                        t("lang." + autoMatchLangTag()) ?? autoMatchLangTag(),
+                    })
+                  : t("lang." + settings$().language)
+              }
            >
-                <option value={"xauto"}>
-                  {t("lang.auto", {
-                    detected: t("lang." + autoMatchLangTag()) ?? autoMatchLangTag(),
-                  })}
-                </option>
-                <For each={SUPPORTED_LANGS}>
-                  {(code) => <option value={code}>{t("lang." + code)}</option>}
-                </For>
-              </NativeSelect>
-            </ListItemSecondaryAction>
-          </ListItem>
+              {t("Language")}
+            </ListItemText>
+          </ListItemButton>
+          <BottomSheet open={langPickerOpen()}>
+            <ChooseLang
+              code={settings$().language}
+              onCodeChange={(nval) => $settings.setKey("language", nval)}
+              onClose={[setLangPickerOpen, false]}
+            />
+          </BottomSheet>
          <Divider />
-          <ListItem>
+          <ListItemButton onClick={[setRegionPickerOpen, true]}>
            <ListItemIcon>
              <PublicIcon />
            </ListItemIcon>
-            <ListItemText>{t("Region")}</ListItemText>
-            <ListItemSecondaryAction>
-              <NativeSelect
-                value={settings$().region}
-                onChange={(e) => {
-                  $settings.setKey(
-                    "region",
-                    e.currentTarget.value === "xauto"
-                      ? undefined
-                      : e.currentTarget.value,
-                  );
-                }}
+            <ListItemText
+              secondary={
+                settings$().region === undefined
+                  ? t("region.auto", {
+                      detected:
+                        t("region." + autoMatchRegion()) ?? autoMatchRegion(),
+                    })
+                  : t("region." + settings$().region)
+              }
            >
-                <option value={"xauto"}>
-                  {t("region.auto", {
-                    detected: t("region." + autoMatchRegion()) ?? autoMatchRegion(),
-                  })}
-                </option>
-                <For each={SUPPORTED_REGIONS}>
-                  {(code) => (
-                    <option value={code}>{t("region." + code)}</option>
-                  )}
-                </For>
-              </NativeSelect>
-            </ListItemSecondaryAction>
-          </ListItem>
+              {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")}>
--- a/src/settings/i18n/en.json
+++ b/src/settings/i18n/en.json
@ -14,12 +14,17 @@
  "version": "Using v{{packageVersion}} (built on {{builtAt}}, {{buildMode}})",
  "Language": "Language",
  "Region": "Region",
-  "lang.auto": "Auto({{detected}})",
-  "region.auto": "Auto({{detected}})",
+  "lang.auto": "(Auto) {{detected}}",
+  "region.auto": "(Auto) {{detected}}",
  "region.en_GB": "Great Britan (English)",
  "region.en_US": "United States (English)",
  "region.zh_CN": "China Mainland (Chinese)",
  "datefmt": "yyyy/MM/dd",
  "Sign out": "Sign out",
-  "Notifications": "Notifications"
+  "Notifications": "Notifications",
+
+  "Choose Language": "Choose Language",
+  "Supported": "Supported",
+  "Unsupported": "Unsupported",
+  "Choose Region": "Choose Region"
 }
--- a/src/settings/i18n/zh-Hans.json
+++ b/src/settings/i18n/zh-Hans.json
@ -1,6 +1,6 @@
 {
  "Settings": "设置",
-  "Accounts": "所有账号",
+  "Accounts": "所有账户",
  "All Notifications": "所有通知",
  "Sign in...": "登录新账户...",
  "Reading": "阅读",
@ -14,12 +14,17 @@
  "version": "正在使用 v{{packageVersion}} ({{builtAt}}构建, {{buildMode}})",
  "Language": "语言",
  "Region": "区域",
-  "lang.auto": "自动（{{detected}}）",
-  "region.auto": "自动（{{detected}}）",
+  "lang.auto": "（自动）{{detected}}",
+  "region.auto": "（自动）{{detected}}",
  "region.en_GB": "英国和苏格兰（英语）",
  "region.en_US": "美国（英语）",
  "region.zh_CN": "中国大陆（中文）",
  "datefmt": "yyyy年MM月dd日",
  "Sign out": "登出此账户",
-  "Notifications": "通知"
+  "Notifications": "通知",
+
+  "Choose Language": "选择语言",
+  "Supported": "已支持",
+  "Unsupported": "尚未支持",
+  "Choose Region": "选择区域"
 }
--- a/src/timelines/Home.tsx
+++ b/src/timelines/Home.tsx
@ -10,7 +10,8 @@ import {
  children,
  Suspense,
  Match,
-  Switch as JsSwitch
+  Switch as JsSwitch,
+  ErrorBoundary
 } from "solid-js";
 import { useDocumentTitle } from "../utils";
 import { type mastodon } from "masto";
@ -125,7 +126,9 @@ const TimelinePanel: Component<{
  };

  return (
-    <>
+    <ErrorBoundary fallback={(err, reset) => {
+      return <p>Oops: {String(err)}</p>
+    }}>
      <PullDownToRefresh
        linkedElement={scrollLinked()}
        loading={snapshot.loading}
@ -202,7 +205,7 @@ const TimelinePanel: Component<{
          </Match>
        </JsSwitch>
      </div>
-    </>
+    </ErrorBoundary>
  );
 };