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>