Home: add translation

src/timelines/Home.tsx

@@ -1,27 +1,23 @@
 import {
   createSignal,
   Show,
-  onMount,
   type ParentComponent,
-  createRenderEffect,
   createEffect,
+  useTransition,
 } from "solid-js";
 import { useDocumentTitle } from "../utils";
 import Scaffold from "~material/Scaffold";
 import {
-  AppBar,
   ListItemSecondaryAction,
   ListItemText,
   MenuItem,
   Switch,
-  Toolbar,
 } from "@suid/material";
 import { css } from "solid-styled";
 import { TimeSourceProvider, createTimeSource } from "~platform/timesrc";
 import ProfileMenuButton from "./ProfileMenuButton";
 import Tabs from "~material/Tabs";
 import Tab from "~material/Tab";
-import { makeEventListener } from "@solid-primitives/event-listener";
 import { $settings } from "../settings/stores";
 import { useStore } from "@nanostores/solid";
 import TrendTimelinePanel from "./TrendTimelinePanel";
@@ -32,10 +28,20 @@ import {
   default as ItemSelectionProvider,
 } from "./toots/ItemSelectionProvider";
 import AppTopBar from "~material/AppTopBar";
+import { createTranslator } from "~platform/i18n";
+import { useWindowSize } from "@solid-primitives/resize-observer";
+
+type StringRes = Record<
+  "tabs.home" | "tabs.trending" | "tabs.public" | "set.prefetch-toots",
+  string
+>;
 
 const Home: ParentComponent = (props) => {
   let panelList: HTMLDivElement;
   useDocumentTitle("Timelines");
+  const [t] = createTranslator(
+    (code) => import(`./i18n/${code}.json`) as Promise<{ default: StringRes }>,
+  );
   const now = createTimeSource();
   const [, selectionState] = createSingluarItemSelection(
     undefined as string | undefined,
@@ -98,10 +104,19 @@ const Home: ParentComponent = (props) => {
     }
   };
 
-  createEffect(() => {
-    makeEventListener(window, "resize", requestRecalculateTabIndicator);
+  const windowSize = useWindowSize();
+  createEffect((last) => {
+    if (last !== windowSize.width) {
+      requestRecalculateTabIndicator();
+    }
+  });
 
-    requestAnimationFrame(recalculateTabIndicator);
+  const [inTransition] = useTransition();
+
+  createEffect(() => {
+    if (!inTransition()) {
+      requestAnimationFrame(recalculateTabIndicator);
+    }
   });
 
   const isTabFocus = (idx: number) => {
@@ -169,13 +184,13 @@ const Home: ParentComponent = (props) => {
           <AppTopBar>
             <Tabs>
               <Tab focus={isTabFocus(0)} onClick={[onTabClick, 0]}>
-                Home
+                {t("tabs.home")}
               </Tab>
               <Tab focus={isTabFocus(1)} onClick={[onTabClick, 1]}>
-                Trending
+                {t("tabs.trending")}
               </Tab>
               <Tab focus={isTabFocus(2)} onClick={[onTabClick, 2]}>
-                Public
+                {t("tabs.public")}
               </Tab>
             </Tabs>
             <ProfileMenuButton profile={profiles()[0]}>
@@ -187,7 +202,7 @@ const Home: ParentComponent = (props) => {
                   )
                 }
               >
-                <ListItemText>Prefetch Toots</ListItemText>
+                <ListItemText>{t("set.prefetch-toots")}</ListItemText>
                 <ListItemSecondaryAction>
                   <Switch checked={prefetching()}></Switch>
                 </ListItemSecondaryAction>

src/timelines/ProfileMenuButton.tsx

@@ -16,6 +16,12 @@ import {
 } from "@suid/icons-material";
 import A from "~platform/A";
 import Menu, { createManagedMenuState } from "~material/Menu";
+import { createTranslator } from "~platform/i18n";
+
+type StringRes = Record<
+  "nav.bookmarks" | "nav.likes" | "nav.lists" | "nav.settings",
+  string
+>;
 
 const ProfileMenuButton: ParentComponent<{
   profile?: {
@@ -32,6 +38,10 @@ const ProfileMenuButton: ParentComponent<{
 }> = (props) => {
   const menuId = createUniqueId();
   const buttonId = createUniqueId();
+  const [t] = createTranslator(
+    async (code) =>
+      (await import(`./i18n/${code}.json`)) as { default: StringRes },
+  );
 
   const [open, state] = createManagedMenuState();
 
@@ -84,19 +94,19 @@ const ProfileMenuButton: ParentComponent<{
           <ListItemIcon>
             <BookmarkIcon />
           </ListItemIcon>
-          <ListItemText>Bookmarks</ListItemText>
+          <ListItemText>{t("nav.bookmarks")}</ListItemText>
         </MenuItem>
         <MenuItem disabled>
           <ListItemIcon>
             <LikeIcon />
           </ListItemIcon>
-          <ListItemText>Likes</ListItemText>
+          <ListItemText>{t("nav.likes")}</ListItemText>
         </MenuItem>
         <MenuItem disabled>
           <ListItemIcon>
             <ListIcon />
           </ListItemIcon>
-          <ListItemText>Lists</ListItemText>
+          <ListItemText>{t("nav.lists")}</ListItemText>
         </MenuItem>
         <Divider />
         <Show when={props.children}>
@@ -107,7 +117,7 @@ const ProfileMenuButton: ParentComponent<{
           <ListItemIcon>
             <SettingsIcon />
           </ListItemIcon>
-          <ListItemText>Settings</ListItemText>
+          <ListItemText>{t("nav.settings")}</ListItemText>
         </MenuItem>
       </Menu>
     </>

src/timelines/i18n/en.json

@@ -1,3 +1,15 @@
 {
-  "Choose Language": "Choose Language"
+  "Choose Language": "Choose Language",
+
+  "tabs.home": "Home",
+  "tabs.trending": "Trending",
+  "tabs.public": "Public",
+
+  "set.prefetch-toots": "Prefetch Toots",
+
+  "nav.bookmarks": "Bookmarks",
+  "nav.likes": "Likes",
+  "nav.lists": "Lists",
+  "nav.settings": "Settings"
+
 }

src/timelines/i18n/zh-Hans.json

@@ -1,3 +1,14 @@
 {
-  "Choose Language": "选择语言"
+  "Choose Language": "选择语言",
+
+  "tabs.home": "主页",
+  "tabs.trending": "当下热门",
+  "tabs.public": "公开",
+
+  "set.prefetch-toots": "提前下载嘟文",
+
+  "nav.bookmarks": "所有书签",
+  "nav.likes": "喜欢的嘟文",
+  "nav.lists": "所有列表",
+  "nav.settings": "设置"
 }