ReplyEditor: promote the blur condition up

Reviewed-on: https://code.lightstands.xyz///Rubicon/tutu/pulls/22

package.json

@@ -27,9 +27,11 @@
     "wrangler": "^3.78.2"
   },
   "dependencies": {
+    "@formatjs/intl-localematcher": "^0.5.4",
     "@nanostores/persistent": "^0.10.2",
     "@nanostores/solid": "^0.4.2",
     "@solid-primitives/event-listener": "^2.3.3",
+    "@solid-primitives/i18n": "^2.1.1",
     "@solid-primitives/intersection-observer": "^2.1.6",
     "@solid-primitives/resize-observer": "^2.0.26",
     "@solidjs/router": "^0.14.5",
@@ -40,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",

src/App.tsx

@@ -6,6 +6,7 @@ import {
   createSignal,
   ErrorBoundary,
   lazy,
+  onCleanup,
 } from "solid-js";
 import { useRootTheme } from "./material/mui.js";
 import {
@@ -15,6 +16,7 @@ import {
 } from "./masto/clients.js";
 import { $accounts } from "./accounts/stores.js";
 import { useStore } from "@nanostores/solid";
+import { DateFnScope, useLanguage } from "./platform/i18n.jsx";
 
 const AccountSignIn = lazy(() => import("./accounts/SignIn.js"));
 const AccountMastodonOAuth2Callback = lazy(
@@ -47,6 +49,7 @@ const App: Component = () => {
   const theme = useRootTheme();
   const accts = useStore($accounts);
   const clientStore = createSignal<Session[]>([]);
+  const lang = useLanguage();
 
   createRenderEffect(() => {
     const [, setClients] = clientStore;
@@ -55,6 +58,16 @@ const App: Component = () => {
     );
   });
 
+  createRenderEffect(() => {
+    const root = document.querySelector(":root")!;
+    root.setAttribute("lang", lang());
+  });
+
+  onCleanup(() => {
+    const root = document.querySelector(":root")!;
+    root.removeAttribute("lang");
+  });
+
   const UnexpectedError = lazy(() => import("./UnexpectedError.js"));
 
   return (
@@ -65,9 +78,11 @@ const App: Component = () => {
       }}
     >
       <ThemeProvider theme={theme()}>
-        <ClientProvider value={clientStore}>
+        <DateFnScope>
-          <Routing />
+          <ClientProvider value={clientStore}>
-        </ClientProvider>
+            <Routing />
+          </ClientProvider>
+        </DateFnScope>
       </ThemeProvider>
     </ErrorBoundary>
   );

src/masto/acct.ts

@@ -12,11 +12,16 @@ export function useSignedInProfiles() {
   });
   return [
     () => {
-      const value = accessor();
+      try {
-      if (!value) {
+        const value = accessor();
-        return sessions().map((x) => ({ ...x, inf: x.account.inf }));
+        if (value) {
+          return value;
+        }
+      } catch (reason) {
+        console.error("useSignedInProfiles: update acct info failed", reason);
       }
-      return value;
+
+      return sessions().map((x) => ({ ...x, inf: x.account.inf }));
     },
     tools,
   ] as const;

src/material/BottomSheet.module.css

@@ -1,5 +1,7 @@
 .bottomSheet {
-  composes: surface from "material.module.css";
+  composes: surface from "./material.module.css";
+  composes: cardGutSkip from "./cards.module.css";
+  composes: cardNoPad from "./cards.module.css";
   border: none;
   position: absolute;
   left: 50%;
@@ -47,4 +49,10 @@
       opacity: 0;
     }
   }
+
+  &.bottom {
+    top: unset;
+    transform: translateX(-50%);
+    bottom: 0;
+  }
 }

src/material/BottomSheet.tsx

@@ -13,9 +13,12 @@ import {
 } from "solid-js";
 import styles from "./BottomSheet.module.css";
 import { useHeroSignal } from "../platform/anim";
+import { makeEventListener } from "@solid-primitives/event-listener";
 
 export type BottomSheetProps = {
   open?: boolean;
+  bottomUp?: boolean;
+  onClose?(reason: "backdrop"): void;
 };
 
 export const HERO = Symbol("BottomSheet Hero Symbol");
@@ -123,8 +126,28 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
     }
   });
 
+  onMount(() => {
+    makeEventListener(element, "click", (event) => {
+      const rect = element.getBoundingClientRect();
+      const isInDialog =
+        rect.top <= event.clientY &&
+        event.clientY <= rect.top + rect.height &&
+        rect.left <= event.clientX &&
+        event.clientX <= rect.left + rect.width;
+      if (!isInDialog) {
+        props.onClose?.("backdrop");
+      }
+    });
+  });
+
   return (
-    <dialog class={styles.bottomSheet} ref={element!}>
+    <dialog
+      classList={{
+        [styles.bottomSheet]: true,
+        [styles.bottom]: props.bottomUp,
+      }}
+      ref={element!}
+    >
       {ochildren() ?? cache()}
     </dialog>
   );

src/material/Scaffold.tsx

@@ -12,6 +12,7 @@ import { css } from "solid-styled";
 interface ScaffoldProps {
   topbar?: JSX.Element;
   fab?: JSX.Element;
+  bottom?: JSX.Element;
 }
 
 const Scaffold: ParentComponent<ScaffoldProps> = (props) => {
@@ -36,6 +37,16 @@ const Scaffold: ParentComponent<ScaffoldProps> = (props) => {
       right: 40px;
       z-index: var(--tutu-zidx-nav, auto);
     }
+
+    .bottom-dock {
+      position: sticky;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      z-index: var(--tutu-zidx-nav, auto);
+      padding-bottom: var(--safe-area-inset-bottom, 0);
+
+    }
   `;
   return (
     <>
@@ -48,6 +59,9 @@ const Scaffold: ParentComponent<ScaffoldProps> = (props) => {
         <div class="fab-dock">{props.fab}</div>
       </Show>
       <div class="scaffold-content">{props.children}</div>
+      <Show when={props.bottom}>
+        <div class="bottom-dock">{props.bottom}</div>
+      </Show>
     </>
   );
 };

src/platform/i18n.tsx

@@ -0,0 +1,188 @@
+import {
+  ParentComponent,
+  createContext,
+  createMemo,
+  createResource,
+  useContext,
+} from "solid-js";
+import { match } from "@formatjs/intl-localematcher";
+import { Accessor, createEffect, createSignal } from "solid-js";
+import { $settings } from "../settings/stores";
+import { enGB } from "date-fns/locale/en-GB";
+import { useStore } from "@nanostores/solid";
+import type { Locale } from "date-fns";
+import { resolveTemplate, translator, type Template } from "@solid-primitives/i18n";
+
+async function synchronised(
+  name: string,
+  callback: () => Promise<void> | void,
+): Promise<void> {
+  await navigator.locks.request(name, callback);
+}
+
+export const SUPPORTED_LANGS = ["en", "zh-Hans"] as const;
+
+export const SUPPORTED_REGIONS = ["en_US", "en_GB", "zh_CN"] as const;
+
+const DEFAULT_LANG = "en";
+
+/**
+ * Decide the using language for the user.
+ * @returns the selected language tag
+ */
+export function autoMatchLangTag() {
+  return match(Array.from(navigator.languages), SUPPORTED_LANGS, DEFAULT_LANG);
+}
+
+const DateFnLocaleCx = /* __@PURE__ */createContext<Accessor<Locale>>(() => enGB);
+
+const cachedDateFnLocale: Record<string, Locale> = {
+  enGB,
+};
+
+export function autoMatchRegion() {
+  const regions = navigator.languages
+    .map((x) => {
+      const parts = x.split("_");
+      if (parts.length > 1) {
+        return parts[1];
+      }
+      return undefined;
+    })
+    .filter((x): x is string => !!x);
+  for (const r of regions) {
+    for (const available of SUPPORTED_REGIONS) {
+      if (available.toLowerCase().endsWith(r.toLowerCase())) {
+        return available;
+      }
+    }
+  }
+  return "en_GB";
+}
+
+export function useRegion() {
+  const appSettings = useStore($settings);
+
+  return createMemo(() => {
+    const settings = appSettings();
+    if (typeof settings.region !== "undefined") {
+      return settings.region;
+    } else {
+      return autoMatchRegion();
+    }
+  });
+}
+
+async function importDateFnLocale(tag: string): Promise<Locale> {
+  switch (tag.toLowerCase()) {
+    case "en_us":
+      return (await import("date-fns/locale/en-US")).enUS;
+    case "en_gb":
+      return (await import("date-fns/locale/en-GB")).enGB;
+    case "zh_cn":
+      return (await import("date-fns/locale/zh-CN")).zhCN;
+    default:
+      throw new TypeError(`unsupported tag "${tag}"`);
+  }
+}
+
+/**
+ * Provides runtime values and fetch dependencies for date-fns locale
+ */
+export const DateFnScope: ParentComponent = (props) => {
+  const [dateFnLocale, setDateFnLocale] = createSignal(enGB);
+  const region = useRegion();
+
+  createEffect(() => {
+    const dateFnLocaleName = region();
+
+    if (cachedDateFnLocale[dateFnLocaleName]) {
+      setDateFnLocale(cachedDateFnLocale[dateFnLocaleName]);
+    } else {
+      synchronised("i18n-wrapper-load-date-fns-locale", async () => {
+        if (cachedDateFnLocale[dateFnLocaleName]) {
+          setDateFnLocale(cachedDateFnLocale[dateFnLocaleName]);
+          return;
+        }
+        const target = `date-fns/locale/${dateFnLocaleName}`;
+        try {
+          const mod = await importDateFnLocale(dateFnLocaleName);
+          cachedDateFnLocale[dateFnLocaleName] = mod;
+          setDateFnLocale(mod);
+        } catch (reason) {
+          console.error(
+            {
+              act: "load-date-fns-locale",
+              stat: "failed",
+              reason,
+              target,
+            },
+            "failed to load date-fns locale",
+          );
+        }
+      });
+    }
+  });
+
+  return (
+    <DateFnLocaleCx.Provider value={dateFnLocale}>
+      {props.children}
+    </DateFnLocaleCx.Provider>
+  );
+};
+
+/**
+ * Get the {@link Locale} object for date-fns.
+ *
+ * This function must be using in {@link DateFnScope}
+ *
+ * @returns Accessor for Locale
+ */
+export function useDateFnLocale(): Accessor<Locale> {
+  const cx = useContext(DateFnLocaleCx);
+  return cx;
+}
+
+export function useLanguage() {
+  const settings = useStore($settings);
+  return () => settings().language || autoMatchLangTag();
+}
+
+type ImportFn<T> = (name: string) => Promise<{default: T}>
+
+type ImportedModule<F> = F extends ImportFn<infer T> ? T: never
+
+type MergedImportedModule<T> =
+  T extends [] ? {} :
+  T extends [infer I] ? ImportedModule<I> :
+  T extends [infer I, ...infer J] ? ImportedModule<I> & MergedImportedModule<J> : never
+
+export function createStringResource<
+  T extends ImportFn<Record<string, string | Template<any> | undefined>>[],
+>(...importFns: T) {
+  const language = useLanguage();
+  const cache: Record<string, MergedImportedModule<T>> = {};
+
+  return createResource(
+    () => [language()] as const,
+    async ([nlang]) => {
+      if (cache[nlang]) {
+        return cache[nlang];
+      }
+
+      const results = await Promise.all(importFns.map(x => x(nlang).then(v => v.default)))
+
+      const merged: MergedImportedModule<T> = Object.assign({}, ...results)
+
+      cache[nlang] = merged;
+
+      return merged;
+    },
+  );
+}
+
+export function createTranslator<T extends ImportFn<Record<string, string | Template<any> | undefined>>[],>(...importFns: T) {
+  const res = createStringResource(...importFns)
+
+  return [translator(res[0], resolveTemplate), res] as const
+}

src/settings/ChooseLang.tsx

@@ -0,0 +1,116 @@
+import { createMemo, For, type Component, type JSX } from "solid-js";
+import Scaffold from "../material/Scaffold";
+import {
+  AppBar,
+  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;

src/settings/ChooseRegion.tsx

@@ -0,0 +1,106 @@
+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 { Close as CloseIcon } from "@suid/icons-material";
+import iso639_1 from "iso-639-1";
+import {
+  autoMatchRegion,
+  createTranslator,
+  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;

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,
@@ -7,32 +7,63 @@ import {
   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 { intlFormat } from "date-fns";
+import { format } from "date-fns";
 import { useStore } from "@nanostores/solid";
 import { $settings } from "./stores.js";
 import { useRegisterSW } from "virtual:pwa-register/solid";
+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";
+
+type Strings = {
+  ["lang.auto"]: Template<{ detected: string }>;
+} & Record<string, string | undefined>;
 
 const Settings: ParentComponent = () => {
+  const [t] = createTranslator(
+    (code) =>
+      import(`./i18n/${code}.json`) as Promise<{
+        default: Strings;
+      }>,
+    () => import(`./i18n/lang-names.json`),
+  );
   const navigate = useNavigate();
   const settings$ = useStore($settings);
   const {
     needRefresh: [needRefresh],
   } = useRegisterSW();
+  const dateFnLocale = useDateFnLocale();
+  const [langPickerOpen, setLangPickerOpen] = createSignal(false);
+  const [regionPickerOpen, setRegionPickerOpen] = createSignal(false);
 
   const [profiles] = useSignedInProfiles();
 
@@ -60,7 +91,7 @@ const Settings: ParentComponent = () => {
             <IconButton color="inherit" onClick={[navigate, -1]} disableRipple>
               <CloseIcon />
             </IconButton>
-            <Title>Settings</Title>
+            <Title>{t("Settings")}</Title>
           </Toolbar>
         </AppBar>
       }
@@ -68,32 +99,35 @@ const Settings: ParentComponent = () => {
       <List class="setting-list" use:solid-styled>
         <li>
           <ul>
-            <ListSubheader>Accounts</ListSubheader>
+            <ListSubheader>{t("Accounts")}</ListSubheader>
-            <ListItem>
+            <ListItemButton disabled>
-              <ListItemText>All Notifications</ListItemText>
+              <ListItemText>{t("All Notifications")}</ListItemText>
               <ListItemSecondaryAction>
-                <Switch value={false} />
+                <Switch value={false} disabled />
               </ListItemSecondaryAction>
-            </ListItem>
+            </ListItemButton>
             <Divider />
-            <ListItem>
+            <ListItemButton disabled>
-              <ListItemText>Sign in...</ListItemText>
+              <ListItemText>{t("Sign in...")}</ListItemText>
-            </ListItem>
+            </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>
-                <ListItem>
+                <ListItemButton disabled>
-                  <ListItemText>Notifications</ListItemText>
+                  <ListItemText>{t("Notifications")}</ListItemText>
                   <ListItemSecondaryAction>
-                    <Switch value={false} />
+                    <Switch value={false} disabled />
                   </ListItemSecondaryAction>
-                </ListItem>
+                </ListItemButton>
                 <Divider />
                 <ListItemButton onClick={[doSignOut, acct]}>
-                  <ListItemText>Sign out</ListItemText>
+                  <ListItemIcon>
+                    <Logout />
+                  </ListItemIcon>
+                  <ListItemText>{t("Sign out")}</ListItemText>
                 </ListItemButton>
                 <Divider />
               </ul>
@@ -101,12 +135,8 @@ const Settings: ParentComponent = () => {
           </For>
         </li>
         <li>
-          <ListSubheader>Reading</ListSubheader>
+          <ListSubheader>{t("Reading")}</ListSubheader>
-          <ListItem>
+          <ListItemButton
-            <ListItemText secondary="Regular">Fonts</ListItemText>
-          </ListItem>
-          <Divider />
-          <ListItem
             onClick={(e) =>
               $settings.setKey(
                 "prefetchTootsDisabled",
@@ -114,34 +144,93 @@ const Settings: ParentComponent = () => {
               )
             }
           >
-            <ListItemText secondary="Tutu will download toots before you scroll to the position.">
+            <ListItemText secondary={t("Prefetch Toots.2nd")}>
-              Prefetch Toots
+              {t("Prefetch Toots")}
             </ListItemText>
             <ListItemSecondaryAction>
               <Switch checked={!settings$().prefetchTootsDisabled} />
             </ListItemSecondaryAction>
-          </ListItem>
+          </ListItemButton>
           <Divider />
         </li>
         <li>
-          <ListSubheader>This Application</ListSubheader>
+          <ListSubheader>{t("This Application")}</ListSubheader>
+          <ListItemButton onClick={[setLangPickerOpen, true]}>
+            <ListItemIcon>
+              <TranslateIcon />
+            </ListItemIcon>
+            <ListItemText
+              secondary={
+                settings$().language === undefined
+                  ? t("lang.auto", {
+                      detected:
+                        t("lang." + autoMatchLangTag()) ?? autoMatchLangTag(),
+                    })
+                  : t("lang." + settings$().language)
+              }
+            >
+              {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]}>
+            <ListItemIcon>
+              <PublicIcon />
+            </ListItemIcon>
+            <ListItemText
+              secondary={
+                settings$().region === undefined
+                  ? t("region.auto", {
+                      detected:
+                        t("region." + autoMatchRegion()) ?? autoMatchRegion(),
+                    })
+                  : t("region." + settings$().region)
+              }
+            >
+              {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="Comformtable tooting experience.">
+            <ListItemText secondary={t("About Tutu.2nd")}>
-              About Tutu
+              {t("About Tutu")}
             </ListItemText>
           </ListItem>
           <Divider />
           <ListItem>
             <ListItemText
-              secondary={`Using v${import.meta.env.PACKAGE_VERSION} (built on ${intlFormat(import.meta.env.BUILT_AT)}, ${import.meta.env.MODE})`}
+              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()
+              {needRefresh() ? t("updates.ready") : t("updates.no")}
-                ? "An update is ready, restart the Tutu to apply"
-                : "No updates"}
             </ListItemText>
             <Show when={needRefresh()}>
               <ListItemSecondaryAction>
-                <IconButton aria-label="Restart Now" onClick={() => window.location.reload()}>
+                <IconButton
+                  aria-label="Restart Now"
+                  onClick={() => window.location.reload()}
+                >
                   <RefreshIcon />
                 </IconButton>
               </ListItemSecondaryAction>

src/settings/i18n/en.json

@@ -0,0 +1,30 @@
+{
+  "Settings": "Settings",
+  "Accounts": "Accounts",
+  "All Notifications": "All Notifications",
+  "Sign in...": "Sign in...",
+  "Reading": "Reading",
+  "Prefetch Toots": "Prefetch Toots",
+  "Prefetch Toots.2nd": "Tutu will download the toots before you need.",
+  "This Application": "This Application",
+  "About Tutu": "About Tutu",
+  "About Tutu.2nd": "Comfortable tooting experience.",
+  "updates.ready": "An update is ready, restart the Tutu to apply",
+  "updates.no": "No updates",
+  "version": "Using v{{packageVersion}} (built on {{builtAt}}, {{buildMode}})",
+  "Language": "Language",
+  "Region": "Region",
+  "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",
+
+  "Choose Language": "Choose Language",
+  "Supported": "Supported",
+  "Unsupported": "Unsupported",
+  "Choose Region": "Choose Region"
+}

src/settings/i18n/lang-names.json

@@ -0,0 +1,4 @@
+{
+  "lang.zh-Hans": "中文（简体）",
+  "lang.en": "English"
+}

src/settings/i18n/zh-Hans.json

@@ -0,0 +1,30 @@
+{
+  "Settings": "设置",
+  "Accounts": "所有账户",
+  "All Notifications": "所有通知",
+  "Sign in...": "登录新账户...",
+  "Reading": "阅读",
+  "Prefetch Toots": "提前下载嘟文",
+  "Prefetch Toots.2nd": "图图会在你可能需要的时候提前下载嘟文。",
+  "This Application": "本应用",
+  "About Tutu": "关于图图",
+  "About Tutu.2nd": "舒服地刷嘟。",
+  "updates.ready": "更新已准备好，下次开启会启动新版本",
+  "updates.no": "已是最新版本",
+  "version": "正在使用 v{{packageVersion}} ({{builtAt}}构建, {{buildMode}})",
+  "Language": "语言",
+  "Region": "区域",
+  "lang.auto": "（自动）{{detected}}",
+  "region.auto": "（自动）{{detected}}",
+  "region.en_GB": "英国和苏格兰（英语）",
+  "region.en_US": "美国（英语）",
+  "region.zh_CN": "中国大陆（中文）",
+  "datefmt": "yyyy年MM月dd日",
+  "Sign out": "登出此账户",
+  "Notifications": "通知",
+
+  "Choose Language": "选择语言",
+  "Supported": "已支持",
+  "Unsupported": "尚未支持",
+  "Choose Region": "选择区域"
+}

src/settings/stores.ts

@@ -3,6 +3,8 @@ import { persistentMap } from "@nanostores/persistent";
 type Settings = {
   onGoingOAuth2Process?: string;
   prefetchTootsDisabled?: boolean;
+  language?: string;
+  region?: string;
 };
 
 export const $settings = persistentMap<Settings>(

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>
   );
 };
 

src/timelines/RegularToot.tsx

@@ -36,6 +36,7 @@ import Button from "../material/Button.js";
 import MediaAttachmentGrid from "./MediaAttachmentGrid.js";
 import { FastAverageColor } from "fast-average-color";
 import Color from "colorjs.io";
+import { useDateFnLocale } from "../platform/i18n";
 
 type TootContentViewProps = {
   source?: string;
@@ -170,6 +171,7 @@ function TootActionGroup<T extends mastodon.v1.Status>(
 
 function TootAuthorGroup(props: { status: mastodon.v1.Status; now: Date }) {
   const toot = () => props.status;
+  const dateFnLocale = useDateFnLocale()
 
   return (
     <div class={tootStyle.tootAuthorGrp}>
@@ -187,7 +189,7 @@ function TootAuthorGroup(props: { status: mastodon.v1.Status; now: Date }) {
           }}
         />
         <time datetime={toot().createdAt}>
-          {formatRelative(toot().createdAt, props.now)}
+          {formatRelative(toot().createdAt, props.now, {locale: dateFnLocale()})}
         </time>
         <span>
           @{toot().account.username}@{new URL(toot().account.url).hostname}

src/timelines/ReplyEditor.tsx

@@ -0,0 +1,237 @@
+import {
+  batch,
+  createSignal,
+  createUniqueId,
+  onMount,
+  type Component,
+  type Setter,
+} from "solid-js";
+import Scaffold from "../material/Scaffold";
+import {
+  Avatar,
+  Button,
+  IconButton,
+  List,
+  ListItemButton,
+  ListItemIcon,
+  ListItemSecondaryAction,
+  ListItemText,
+  Radio,
+  Switch,
+  Divider,
+} from "@suid/material";
+import {
+  ArrowDropDown,
+  Public as PublicIcon,
+  Send,
+  People as PeopleIcon,
+  ThreeP as ThreePIcon,
+  ListAlt as ListAltIcon,
+} from "@suid/icons-material";
+import type { Account } from "../accounts/stores";
+import tootComposers from "./TootComposer.module.css";
+import { makeEventListener } from "@solid-primitives/event-listener";
+import BottomSheet from "../material/BottomSheet";
+
+type TootVisibility = "public" | "unlisted" | "private" | "direct";
+
+const TootVisibilityPickerDialog: Component<{
+  open?: boolean;
+  onClose: () => void;
+  visibility: TootVisibility;
+  onVisibilityChange: (value: TootVisibility) => void;
+}> = (props) => {
+  type Kind = "public" | "private" | "direct";
+
+  const kind = () =>
+    props.visibility === "public" || props.visibility === "unlisted"
+      ? "public"
+      : props.visibility;
+
+  const setKind = (nv: Kind) => {
+    if (nv == "public") {
+      props.onVisibilityChange(discoverable() ? "public" : "unlisted");
+    } else {
+      props.onVisibilityChange(nv);
+    }
+  };
+
+  const discoverable = () => {
+    return props.visibility === "public";
+  };
+
+  const setDiscoverable = (setter: (v: boolean) => boolean) => {
+    const nval = setter(discoverable());
+    props.onVisibilityChange(nval ? "public" : "unlisted"); // trigger change
+  };
+
+  return (
+    <BottomSheet open={props.open} onClose={props.onClose} bottomUp>
+      <Scaffold
+        bottom={
+          <div
+            style={{
+              "border-top": "1px solid #ddd",
+              background: "var(--tutu-color-surface)",
+              padding: "8px 16px",
+              width: "100%",
+              "text-align": "end",
+            }}
+          >
+            <Button onClick={props.onClose}>Confirm</Button>
+          </div>
+        }
+      >
+        <List dense>
+          <ListItemButton onClick={[setKind, "public"]}>
+            <ListItemIcon>
+              <PublicIcon />
+            </ListItemIcon>
+            <ListItemText
+              primary="Public"
+              secondary="Everyone can see this toot"
+            ></ListItemText>
+            <ListItemSecondaryAction>
+              <Radio checked={kind() == "public"}></Radio>
+            </ListItemSecondaryAction>
+          </ListItemButton>
+
+          <ListItemButton
+            sx={{ paddingLeft: "40px" }}
+            disabled={kind() !== "public"}
+            onClick={() => setDiscoverable((x) => !x)}
+          >
+            <ListItemIcon>
+              <ListAltIcon />
+            </ListItemIcon>
+            <ListItemText
+              primary="Discoverable"
+              secondary="The others can discover it on the exploration."
+            ></ListItemText>
+            <ListItemSecondaryAction>
+              <Switch
+                checked={discoverable()}
+                disabled={kind() !== "public"}
+              ></Switch>
+            </ListItemSecondaryAction>
+          </ListItemButton>
+
+          <Divider />
+
+          <ListItemButton onClick={[setKind, "private"]}>
+            <ListItemIcon>
+              <PeopleIcon />
+            </ListItemIcon>
+            <ListItemText
+              primary="Only Followers"
+              secondary="Visibile for followers only"
+            ></ListItemText>
+            <ListItemSecondaryAction>
+              <Radio checked={kind() == "private"}></Radio>
+            </ListItemSecondaryAction>
+          </ListItemButton>
+
+          <Divider />
+
+          <ListItemButton onClick={[setKind, "direct"]}>
+            <ListItemIcon>
+              <ThreePIcon />
+            </ListItemIcon>
+            <ListItemText
+              primary="Only Mentions"
+              secondary="Visible for mentioned users only"
+            ></ListItemText>
+            <ListItemSecondaryAction>
+              <Radio checked={kind() == "direct"}></Radio>
+            </ListItemSecondaryAction>
+          </ListItemButton>
+        </List>
+      </Scaffold>
+    </BottomSheet>
+  );
+};
+
+const ReplyEditor: Component<{
+  profile: Account;
+  replyToDisplayName: string;
+  isTyping?: boolean
+  onTypingChange: (value: boolean) => void
+}> = (props) => {
+  let inputRef: HTMLTextAreaElement;
+  const buttonId = createUniqueId();
+  const menuId = createUniqueId();
+
+  const typing = () => props.isTyping
+  const setTyping = (v: boolean) => props.onTypingChange(v)
+  const [visibility, setVisibility] = createSignal<TootVisibility>("public");
+  const [permPicker, setPermPicker] = createSignal(false);
+
+  onMount(() => {
+    makeEventListener(inputRef, "focus", () => setTyping(true));
+  });
+
+  const containerStyle = () =>
+    typing() || permPicker()
+      ? {
+          position: "sticky" as const,
+          top: "var(--scaffold-topbar-height, 0)",
+          bottom: "var(--safe-area-inset-bottom, 0)",
+          "z-index": 2,
+        }
+      : undefined;
+
+  const visibilityText = () => {
+    switch (visibility()) {
+      case "public":
+        return "Discoverable";
+      case "unlisted":
+        return "Public";
+      case "private":
+        return "Only Followers";
+      case "direct":
+        return "Only Mentions";
+    }
+  };
+
+  return (
+    <div
+      class={tootComposers.composer}
+      style={containerStyle()}
+      onClick={(e) => inputRef.focus()}
+    >
+      <div class={tootComposers.replyInput}>
+        <Avatar src={props.profile.inf?.avatar} />
+        <textarea
+          ref={inputRef!}
+          placeholder={`Reply to ${props.replyToDisplayName}...`}
+          style={{ width: "100%", border: "none" }}
+        ></textarea>
+        <IconButton>
+          <Send />
+        </IconButton>
+      </div>
+
+      <div
+        style={{
+          display: "flex",
+          "justify-content": "flex-end",
+          "margin-top": "8px",
+        }}
+      >
+        <Button onClick={[setPermPicker, true]} id={buttonId}>
+          {visibilityText()}
+          <ArrowDropDown sx={{ marginTop: "-0.25em" }} />
+        </Button>
+      </div>
+
+      <TootVisibilityPickerDialog
+        open={permPicker()}
+        onClose={() => setPermPicker(false)}
+        visibility={visibility()}
+        onVisibilityChange={setVisibility}
+      />
+    </div>
+  );
+};
+
+export default ReplyEditor;

src/timelines/TootBottomSheet.tsx

@@ -3,26 +3,18 @@ import {
   createEffect,
   createRenderEffect,
   createResource,
+  createSignal,
   For,
   Show,
   type Component,
 } from "solid-js";
 import Scaffold from "../material/Scaffold";
-import TootThread from "./TootThread";
+import { AppBar, CircularProgress, IconButton, Toolbar } from "@suid/material";
-import {
-  AppBar,
-  Avatar,
-  CircularProgress,
-  IconButton,
-  Toolbar,
-} from "@suid/material";
 import { Title } from "../material/typography";
 import {
   ArrowBack as BackIcon,
   Close as CloseIcon,
-  Send,
 } from "@suid/icons-material";
-import { isiOS } from "../platform/host";
 import { createUnauthorizedClient, useSessions } from "../masto/clients";
 import { resolveCustomEmoji } from "../masto/toot";
 import RegularToot from "./RegularToot";
@@ -30,6 +22,8 @@ import type { mastodon } from "masto";
 import cards from "../material/cards.module.css";
 import { css } from "solid-styled";
 import { vibrate } from "../platform/hardware";
+import { createTimeSource, TimeSourceProvider } from "../platform/timesrc";
+import ReplyEditor from "./ReplyEditor";
 
 let cachedEntry: [string, mastodon.v1.Status] | undefined;
 
@@ -48,6 +42,8 @@ const TootBottomSheet: Component = (props) => {
   const location = useLocation<{ tootBottomSheetPushedCount?: number }>();
   const navigate = useNavigate();
   const allSession = useSessions();
+  const time = createTimeSource();
+  const [isInTyping, setInTyping] = createSignal(false);
   const acctText = () => decodeURIComponent(params.acct);
   const session = () => {
     const [inputUsername, inputSite] = acctText().split("@", 2);
@@ -121,6 +117,11 @@ const TootBottomSheet: Component = (props) => {
   const onBookmark = async () => {
     const status = remoteToot()!;
     const client = actSession()!.client;
+    setRemoteToot(
+      Object.assign({}, status, {
+        bookmarked: !status.bookmarked,
+      }),
+    );
     const result = await (status.bookmarked
       ? client.v1.statuses.$select(status.id).unbookmark()
       : client.v1.statuses.$select(status.id).bookmark());
@@ -140,12 +141,17 @@ const TootBottomSheet: Component = (props) => {
       ? client.v1.statuses.$select(status.id).unreblog()
       : client.v1.statuses.$select(status.id).reblog());
     vibrate([20, 30]);
-    setRemoteToot(result);
+    setRemoteToot(result.reblog!);
   };
 
   const onFav = async () => {
     const status = remoteToot()!;
     const client = actSession()!.client;
+    setRemoteToot(
+      Object.assign({}, status, {
+        favourited: !status.favourited,
+      }),
+    );
     const result = await (status.favourited
       ? client.v1.statuses.$select(status.id).favourite()
       : client.v1.statuses.$select(status.id).unfavourite());
@@ -153,6 +159,10 @@ const TootBottomSheet: Component = (props) => {
   };
 
   const switchContext = (status: mastodon.v1.Status) => {
+    if (isInTyping()) {
+      setInTyping(false);
+      return;
+    }
     setCache(params.acct, status);
     navigate(`/${params.acct}/${status.id}`, {
       state: {
@@ -162,12 +172,6 @@ const TootBottomSheet: Component = (props) => {
   };
 
   css`
-    .bottom-dock {
-      position: sticky;
-      bottom: 0;
-      z-index: var(--tutu-zidx-nav);
-    }
-
     .name :global(img) {
       max-height: 1em;
     }
@@ -201,74 +205,71 @@ const TootBottomSheet: Component = (props) => {
         </AppBar>
       }
     >
-      <For each={ancestors()}>
+      <TimeSourceProvider value={time}>
-        {(item) => (
+        <For each={ancestors()}>
-          <RegularToot
+          {(item) => (
-            id={`toot-${item.id}`}
+            <RegularToot
-            class={cards.card}
+              id={`toot-${item.id}`}
-            status={item}
+              class={cards.card}
-            actionable={false}
+              status={item}
-            onClick={[switchContext, item]}
+              actionable={false}
-          ></RegularToot>
+              onClick={[switchContext, item]}
-        )}
+            ></RegularToot>
-      </For>
+          )}
+        </For>
 
-      <article>
+        <article>
-        <Show when={toot()}>
+          <Show when={toot()}>
-          <RegularToot
+            <RegularToot
-            id={`toot-${toot()!.id}`}
+              id={`toot-${toot()!.id}`}
-            class={cards.card}
+              class={cards.card}
-            style={{
+              style={{
-              "scroll-margin-top": "calc(var(--scaffold-topbar-height) + 20px)",
+                "scroll-margin-top":
-            }}
+                  "calc(var(--scaffold-topbar-height) + 20px)",
-            status={toot()!}
+              }}
-            actionable={!!actSession()}
+              status={toot()!}
-            evaluated={true}
+              actionable={!!actSession()}
-            onBookmark={onBookmark}
+              evaluated={true}
-            onRetoot={onBoost}
+              onBookmark={onBookmark}
-            onFavourite={onFav}
+              onRetoot={onBoost}
-          ></RegularToot>
+              onFavourite={onFav}
-        </Show>
+            ></RegularToot>
-      </article>
+          </Show>
+        </article>
 
-      <Show when={tootContext.loading}>
-        <div
-          style={{
-            display: "flex",
-            "justify-content": "center",
-            "margin-block": "12px",
-          }}
-        >
-          <CircularProgress style="width: 1.5em; height: 1.5em;" />
-        </div>
-      </Show>
-
-      <For each={descendants()}>
-        {(item) => (
-          <RegularToot
-            id={`toot-${item.id}`}
-            class={cards.card}
-            status={item}
-            actionable={false}
-            onClick={[switchContext, item]}
-          ></RegularToot>
-        )}
-      </For>
-
-      <div class="bottom-dock">
         <Show when={profile()}>
-          <div style="display: flex; gap: 8px; background: var(--tutu-color-surface); padding: 8px 8px calc(var(--safe-area-inset-bottom, 0px) + 8px);">
+          <ReplyEditor
-            <Avatar src={profile()!.inf?.avatar} />
+            isTyping={isInTyping()}
-            <textarea
+            onTypingChange={setInTyping}
-              placeholder={`Reply to ${toot()?.account?.displayName ?? ""}...`}
+            profile={profile()!}
-              style={{ width: "100%", border: "none" }}
+            replyToDisplayName={toot()?.account?.displayName || ""}
-            ></textarea>
+          />
-            <IconButton>
+        </Show>
-              <Send />
+
-            </IconButton>
+        <Show when={tootContext.loading}>
+          <div
+            style={{
+              display: "flex",
+              "justify-content": "center",
+              "margin-block": "12px",
+            }}
+          >
+            <CircularProgress style="width: 1.5em; height: 1.5em;" />
           </div>
         </Show>
-      </div>
+
+        <For each={descendants()}>
+          {(item) => (
+            <RegularToot
+              id={`toot-${item.id}`}
+              class={cards.card}
+              status={item}
+              actionable={false}
+              onClick={[switchContext, item]}
+            ></RegularToot>
+          )}
+        </For>
+      </TimeSourceProvider>
     </Scaffold>
   );
 };

src/timelines/TootComposer.module.css

@@ -0,0 +1,11 @@
+
+.composer {
+  composes: card from "../material/cards.module.css";
+  --card-gut: 8px;
+}
+
+.replyInput {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+}

tsconfig.json

@@ -11,5 +11,6 @@
     "types": ["vite/client", "vite-plugin-pwa/solid"],
     "noEmit": true,
     "isolatedModules": true,
+    "resolveJsonModule": true,
   }
 }