feat: use hash router to sub-setting pages

web/src/components/Empty.tsx

@@ -3,7 +3,7 @@ import { BirdIcon } from "lucide-react";
 const Empty = () => {
   return (
     <div className="mx-auto">
-      <BirdIcon strokeWidth={1} className="w-24 h-auto text-gray-500 dark:text-gray-400" />
+      <BirdIcon strokeWidth={0.5} absoluteStrokeWidth={true} className="w-24 h-auto text-gray-500 dark:text-gray-400" />
     </div>
   );
 };

web/src/pages/Setting.tsx

 import { Option, Select } from "@mui/joy";
 import { CogIcon, DatabaseIcon, KeyIcon, LibraryIcon, LucideIcon, Settings2Icon, UserIcon, UsersIcon } from "lucide-react";
 import { useCallback, useEffect, useMemo, useState } from "react";
+import { useLocation } from "react-router-dom";
 import MobileHeader from "@/components/MobileHeader";
 import MemberSection from "@/components/Settings/MemberSection";
 import MemoRelatedSettings from "@/components/Settings/MemoRelatedSettings";
@@ -37,6 +38,7 @@ const SECTION_ICON_MAP: Record<SettingSection, LucideIcon> = {
 
 const Setting = () => {
   const t = useTranslate();
+  const location = useLocation();
   const commonContext = useCommonContext();
   const user = useCurrentUser();
   const workspaceSettingStore = useWorkspaceSettingStore();
@@ -53,6 +55,17 @@ const Setting = () => {
     return settingList;
   }, [isHost]);
 
+  useEffect(() => {
+    let hash = location.hash.slice(1) as SettingSection;
+    // If the hash is not a valid section, redirect to the default section.
+    if (![...BASIC_SECTIONS, ...ADMIN_SECTIONS].includes(hash)) {
+      hash = "my-account";
+    }
+    setState({
+      selectedSection: hash,
+    });
+  }, [location.hash]);
+
   useEffect(() => {
     if (!isHost) {
       return;
@@ -67,9 +80,7 @@ const Setting = () => {
   }, [isHost]);
 
   const handleSectionSelectorItemClick = useCallback((settingSection: SettingSection) => {
-    setState({
-      selectedSection: settingSection,
-    });
+    window.location.hash = settingSection;
   }, []);
 
   return (

web/src/pages/UserProfile.tsx

@@ -100,10 +100,10 @@ const UserProfile = () => {
               <div className="w-full flex flex-col justify-start items-start pt-4 pb-8 px-3">
                 <UserAvatar className="!w-16 !h-16 drop-shadow rounded-3xl" avatarUrl={user?.avatarUrl} />
                 <div className="mt-2 w-auto max-w-[calc(100%-6rem)] flex flex-col justify-center items-start">
-                  <p className="w-full text-3xl text-black leading-tight opacity-80 dark:text-gray-200 truncate">
+                  <p className="w-full text-3xl text-black leading-tight font-medium opacity-80 dark:text-gray-200 truncate">
                     {user.nickname || user.username}
                   </p>
-                  <p className="w-full text-gray-500 leading-snug opacity-80 dark:text-gray-400 whitespace-pre-wrap truncate line-clamp-6">
+                  <p className="w-full text-gray-500 leading-snug dark:text-gray-400 whitespace-pre-wrap truncate line-clamp-6">
                     {user.description}
                   </p>
                 </div>