tutu/src/settings/Settings.tsx

import { For, Show, type ParentComponent } from "solid-js";
import Scaffold from "../material/Scaffold.js";
import {
  AppBar,
  Divider,
  IconButton,
  List,
  ListItem,
  ListItemButton,
  ListItemIcon,
  ListItemSecondaryAction,
  ListItemText,
  ListSubheader,
  NativeSelect,
  Switch,
  Toolbar,
} from "@suid/material";
import {
  Close as CloseIcon,
  Logout,
  Public as PublicIcon,
  Refresh as RefreshIcon,
  Translate as TranslateIcon,
} from "@suid/icons-material";
import { useNavigate } from "@solidjs/router";
import { Title } from "../material/typography.jsx";
import { css } from "solid-styled";
import { useSignedInProfiles } from "../masto/acct.js";
import { signOut, type Account } from "../accounts/stores.js";
import { format, intlFormat } from "date-fns";
import { useStore } from "@nanostores/solid";
import { $settings } from "./stores.js";
import { useRegisterSW } from "virtual:pwa-register/solid";
import {
  autoMatchLangTag,
  autoMatchRegion,
  createStringResource,
  SUPPORTED_LANGS,
  SUPPORTED_REGIONS,
  useDateFnLocale,
} from "../platform/i18n.jsx";
import { resolveTemplate, translator, type Template } from "@solid-primitives/i18n";

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

const Settings: ParentComponent = () => {
  const [strings] = createStringResource(
    (code) =>
      import(`./i18n/${code}.json`) as Promise<{
        default: Strings;
      }>,
    () => import(`./i18n/lang-names.json`)
  );
  const t = translator(strings, resolveTemplate);
  const navigate = useNavigate();
  const settings$ = useStore($settings);
  const {
    needRefresh: [needRefresh],
  } = useRegisterSW();
  const dateFnLocale = useDateFnLocale();

  const [profiles] = useSignedInProfiles();

  const doSignOut = (acct: Account) => {
    signOut((a) => a.site === acct.site && a.accessToken === acct.accessToken);
  };

  css`
    ul {
      padding: 0;
    }

    .setting-list {
      padding-bottom: calc(var(--safe-area-inset-bottom, 0px) + 16px);
    }
  `;
  return (
    <Scaffold
      topbar={
        <AppBar position="static">
          <Toolbar
            variant="dense"
            sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
          >
            <IconButton color="inherit" onClick={[navigate, -1]} disableRipple>
              <CloseIcon />
            </IconButton>
            <Title>{t("Settings")}</Title>
          </Toolbar>
        </AppBar>
      }
    >
      <List class="setting-list" use:solid-styled>
        <li>
          <ul>
            <ListSubheader>{t("Accounts")}</ListSubheader>
            <ListItemButton disabled>
              <ListItemText>{t("All Notifications")}</ListItemText>
              <ListItemSecondaryAction>
                <Switch value={false} disabled/>
              </ListItemSecondaryAction>
            </ListItemButton>
            <Divider />
            <ListItemButton disabled>
              <ListItemText>{t("Sign in...")}</ListItemText>
            </ListItemButton>
            <Divider />
          </ul>
          <For each={profiles()}>
            {({ account: acct, inf }) => (
              <ul data-site={acct.site} data-username={inf?.username}>
                <ListSubheader>{`@${inf?.username ?? "..."}@${new URL(acct.site).host}`}</ListSubheader>
                <ListItemButton disabled>
                  <ListItemText>{t("Notifications")}</ListItemText>
                  <ListItemSecondaryAction>
                    <Switch value={false} disabled/>
                  </ListItemSecondaryAction>
                </ListItemButton>
                <Divider />
                <ListItemButton onClick={[doSignOut, acct]}>
                  <ListItemIcon>
                    <Logout/>
                  </ListItemIcon>
                  <ListItemText>{t("Sign out")}</ListItemText>
                </ListItemButton>
                <Divider />
              </ul>
            )}
          </For>
        </li>
        <li>
          <ListSubheader>{t("Reading")}</ListSubheader>
          <ListItemButton
            onClick={(e) =>
              $settings.setKey(
                "prefetchTootsDisabled",
                !settings$().prefetchTootsDisabled,
              )
            }
          >
            <ListItemText secondary={t("Prefetch Toots.2nd")}>
              {t("Prefetch Toots")}
            </ListItemText>
            <ListItemSecondaryAction>
              <Switch checked={!settings$().prefetchTootsDisabled} />
            </ListItemSecondaryAction>
          </ListItemButton>
          <Divider />
        </li>
        <li>
          <ListSubheader>{t("This Application")}</ListSubheader>
          <ListItem>
            <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,
                  );
                }}
              >
                <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>
          <Divider />
          <ListItem>
            <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,
                  );
                }}
              >
                <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>
          <Divider />
          <ListItem>
            <ListItemText secondary={t("About Tutu.2nd")}>
              {t("About Tutu")}
            </ListItemText>
          </ListItem>
          <Divider />
          <ListItem>
            <ListItemText
              secondary={t("version", {
                packageVersion: import.meta.env.PACKAGE_VERSION,
                builtAt: format(
                  import.meta.env.BUILT_AT,
                  t("datefmt") || "yyyy/MM/dd",
                  { locale: dateFnLocale() },
                ),
                buildMode: import.meta.env.MODE,
              })}
            >
              {needRefresh() ? t("updates.ready") : t("updates.no")}
            </ListItemText>
            <Show when={needRefresh()}>
              <ListItemSecondaryAction>
                <IconButton
                  aria-label="Restart Now"
                  onClick={() => window.location.reload()}
                >
                  <RefreshIcon />
                </IconButton>
              </ListItemSecondaryAction>
            </Show>
          </ListItem>
          <Divider />
        </li>
      </List>
    </Scaffold>
  );
};

export default Settings;