feat: set manage title

src/app/i18n.ts

@@ -1,4 +1,5 @@
 import { createI18nContext } from "@solid-primitives/i18n";
+import { createSignal } from "solid-js";
 
 interface Language {
   code: string;
@@ -39,4 +40,6 @@ export const loadedLangs = new Set<string>();
 
 const i18n = createI18nContext({}, initialLang);
 
-export { languages, i18n };
+const [currentLang, setLang] = createSignal(initialLang);
+
+export { languages, i18n, currentLang, setLang };

src/components/SwitchLanguage.tsx

@@ -9,14 +9,25 @@ import {
 } from "@hope-ui/solid";
 import { useI18n } from "@solid-primitives/i18n";
 import { createSignal, For, Show } from "solid-js";
-import { langMap, languages, loadedLangs } from "~/app/i18n";
+import { langMap, languages, loadedLangs, setLang } from "~/app/i18n";
 import { TbLanguageHiragana } from "solid-icons/tb";
 import { Portal } from "solid-js/web";
 
 const [fetchingLang, setFetchingLang] = createSignal(false);
 
 const SwitchLnaguage = () => {
   const [, { locale, add }] = useI18n();
+  const switchLang = async (lang: string) => {
+    if (!loadedLangs.has(lang)) {
+      setFetchingLang(true);
+      add(lang, (await langMap[lang]()).default);
+      setFetchingLang(false);
+      loadedLangs.add(lang);
+    }
+    locale(lang);
+    setLang(lang);
+    localStorage.setItem("lang", lang);
+  };
   return (
     <>
       <Menu>
@@ -29,15 +40,8 @@ const SwitchLnaguage = () => {
           <For each={languages}>
             {(lang, i) => (
               <MenuItem
-                onSelect={async () => {
-                  if (!loadedLangs.has(lang.code)) {
-                    setFetchingLang(true);
-                    add(lang.code, (await langMap[lang.code]()).default);
-                    setFetchingLang(false);
-                    loadedLangs.add(lang.code);
-                  }
-                  locale(lang.code);
-                  localStorage.setItem("lang", lang.code);
+                onSelect={() => {
+                  switchLang(lang.code);
                 }}
               >
                 {lang.lang}

src/hooks/useTitle.ts

@@ -1,4 +1,5 @@
 import { createEffect, onCleanup } from "solid-js";
+import { useT } from "./useT";
 
 const useTitle = (title: string | (() => string)) => {
   const pre = document.title;
@@ -15,4 +16,9 @@ const useTitle = (title: string | (() => string)) => {
   });
 };
 
+export const useManageTitle = (title: string) => {
+  const t = useT();
+  useTitle(() => `${t(title)} - ${t("manage.title")}`);
+};
+
 export { useTitle };

src/pages/manage/Dashboard.tsx

@@ -1,6 +1,8 @@
 import { Center, Heading } from "@hope-ui/solid";
+import { useManageTitle } from "~/hooks";
 
 const Dashboard = () => {
+  useManageTitle("manage.sidemenu.dashboard");
   return (
     <Center h="$full">
       <Heading>Dashboard</Heading>

src/pages/manage/routes.tsx

@@ -2,6 +2,7 @@ import { lazy } from "solid-js";
 import { Center, Heading } from "@hope-ui/solid";
 import { trimLeft } from "~/utils";
 import { SideMenuItem, side_menu_items } from "./sidemenu_items";
+import { useManageTitle } from "~/hooks";
 
 type Route = Pick<SideMenuItem, "to" | "component">;
 
@@ -16,7 +17,8 @@ const ignore_routes: Route[] = [
   },
 ];
 
-const Placeholder = (props: { title: string }) => {
+const Placeholder = (props: { title: string; to: string }) => {
+  useManageTitle(props.title);
   return (
     <Center h="$full">
       <Heading>{props.title}</Heading>
@@ -32,7 +34,8 @@ const get_routes = (items: SideMenuItem[], acc: Route[] = []) => {
       acc.push({
         to: trimLeft(item.to!, "/@manage"),
         component:
-          item.component || (() => <Placeholder title={item.to || "empty"} />),
+          item.component ||
+          (() => <Placeholder title={item.title} to={item.to || "empty"} />),
       });
     }
   });

src/pages/manage/settings/Common.tsx

@@ -1,5 +1,12 @@
 import { MaybeLoading } from "~/components";
-import { useAuth, useFetch, useT } from "~/hooks";
+import {
+  useAuth,
+  useFetch,
+  useT,
+  useTitle,
+  useRouter,
+  useManageTitle,
+} from "~/hooks";
 import { Group, SettingItem, Resp } from "~/types";
 import { r, notify, getTarget } from "~/utils";
 import { createStore } from "solid-js/store";
@@ -12,6 +19,8 @@ export interface CommonSettingsProps {
 }
 const CommonSettings = (props: CommonSettingsProps) => {
   const t = useT();
+  const { pathname } = useRouter();
+  useManageTitle(`manage.sidemenu.${pathname().split("/").pop()}`);
   const [settingsLoading, getSettings] = useFetch(() =>
     r.get(`/admin/setting/list?group=${props.group}`)
   );

src/pages/manage/settings/Other.tsx

@@ -1,14 +1,15 @@
 import { Button, Heading, HStack, Input, SimpleGrid } from "@hope-ui/solid";
 import { createSignal } from "solid-js";
 import { MaybeLoading } from "~/components";
-import { useFetch, useT } from "~/hooks";
+import { useFetch, useT, useTitle } from "~/hooks";
 import { Resp, Group, SettingItem } from "~/types";
 import { notify, r } from "~/utils";
 import { Item } from "./SettingItem";
 import copy from "copy-to-clipboard";
 
 const OtherSettings = () => {
   const t = useT();
+  useTitle(() => `${t("manage.sidemenu.other")} - ${t("manage.title")}`);
   const [uri, setUri] = createSignal("");
   const [secret, setSecret] = createSignal("");
   const [token, setToken] = createSignal("");

src/pages/manage/storages/index.tsx

@@ -11,12 +11,13 @@ import {
   VStack,
 } from "@hope-ui/solid";
 import { createSignal, For } from "solid-js";
-import { useFetch, useRouter, useT } from "~/hooks";
+import { useFetch, useManageTitle, useRouter, useT } from "~/hooks";
 import { notify, r } from "~/utils";
 import { PageResp, Storage } from "~/types";
 
 const Storages = () => {
   const t = useT();
+  useManageTitle("manage.sidemenu.storages");
   const { to } = useRouter();
   const [getStoragesLoading, getStorages] = useFetch(() =>
     r.get("/admin/storage/list")