Settings: move lang and region to separate route

src/settings/Region.tsx

@@ -0,0 +1,111 @@
+import { createMemo, For, type Component, type JSX } from "solid-js";
+import Scaffold from "../material/Scaffold";
+import {
+  AppBar,
+  IconButton,
+  List,
+  ListItemButton,
+  ListItemSecondaryAction,
+  ListItemText,
+  ListSubheader,
+  Radio,
+  Switch,
+  Toolbar,
+} from "@suid/material";
+import { ArrowBack } from "@suid/icons-material";
+import {
+  autoMatchRegion,
+  createTranslator,
+  SUPPORTED_REGIONS,
+} 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";
+
+const ChooseRegion: Component = () => {
+  const navigate = useNavigate();
+  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 settings = useStore($settings);
+
+  const region = () => settings().region;
+
+  const matchedRegionCode = createMemo(() => autoMatchRegion());
+
+  const onCodeChange = (code?: string) => {
+    $settings.setKey("region", code);
+  };
+
+  return (
+    <Scaffold
+      topbar={
+        <AppBar position="static">
+          <Toolbar
+            variant="dense"
+            sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
+          >
+            <IconButton color="inherit" onClick={[navigate, -1]} disableRipple>
+              <ArrowBack />
+            </IconButton>
+            <Title>{t("Choose Language")}</Title>
+          </Toolbar>
+        </AppBar>
+      }
+    >
+      <List
+        sx={{
+          paddingBottom: "var(--safe-area-inset-bottom, 0)",
+        }}
+      >
+        <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>
+      </List>
+    </Scaffold>
+  );
+};
+
+export default ChooseRegion;