first prototype of i18n system

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}>
-          <Routing />
-        </ClientProvider>
+        <DateFnScope>
+          <ClientProvider value={clientStore}>
+            <Routing />
+          </ClientProvider>
+        </DateFnScope>
       </ThemeProvider>
     </ErrorBoundary>
   );