[Updt] Mtp 0.3.0

packages/settings/src/layout.tsx

@@ -1,8 +1,8 @@
-import { Outlet, useLocation, useNavigate } from "@tanstack/react-router";
-import { Button, ClearStorageButton, cn, useIsMobile } from "@methanium/ui";
+import { Outlet, useLocation } from "@tanstack/react-router";
+import { Button, useIsMobile } from "@methanium/ui";
 import { ArrowLeft } from "lucide-react";
 
-import { settingsNavigation } from "./manifest";
+import { SettingsSidebar } from "./sidebar";
 
 export default function SettingsLayout() {
   const isMobile = useIsMobile();
@@ -36,47 +36,3 @@ export default function SettingsLayout() {
     </div>
   );
 }
-
-export function SettingsSidebar({
-  mobile = false,
-  className,
-}: {
-  mobile?: boolean;
-  className?: string;
-}) {
-  const navigate = useNavigate();
-  const categories = [
-    ...new Set(settingsNavigation.map((page) => page.category)),
-  ];
-
-  return (
-    <div
-      className={cn(
-        mobile ? "w-full p-1" : "p-3 rounded-tl-2xl border-r bg-input/15 w-50",
-        "flex flex-col gap-6",
-        className,
-      )}
-    >
-      {categories.map((category) => (
-        <div key={category} className="flex flex-col gap-2">
-          <h2 className="font-bold text-xs uppercase">{category}</h2>
-          {settingsNavigation
-            .filter((page) => page.category === category)
-            .map((page) => (
-              <Button
-                key={page.path}
-                className="w-full"
-                variant="outline"
-                onClick={() => navigate({ to: `/settings/${page.path}` })}
-              >
-                {page.label}
-              </Button>
-            ))}
-        </div>
-      ))}
-      <div className="mt-auto">
-        <ClearStorageButton className="w-full" />
-      </div>
-    </div>
-  );
-}

packages/settings/src/manifest.ts

@@ -8,46 +8,24 @@ import Profile from "./pages/profile";
 import Security from "./pages/security";
 import Theme from "./pages/theme";
 import Hotkeys from "./pages/hotkeys";
+import { settingsNavigation } from "./navigation";
+
+const pageComponents = {
+  profile: Profile,
+  security: Security,
+  chat: Chat,
+  call: Call,
+  cache: Cache,
+  theme: Theme,
+  accessibility: Accessibility,
+  hotkeys: Hotkeys,
+  licenses: Licenses,
+} as const;
 
 export const settingsPages = [
   { path: "/", component: Index },
-  {
-    category: "account",
-    path: "profile",
-    label: "Profile",
-    component: Profile,
-  },
-  {
-    category: "account",
-    path: "security",
-    label: "Security",
-    component: Security,
-  },
-  { category: "general", path: "chat", label: "Chat", component: Chat },
-  { category: "general", path: "call", label: "Call", component: Call },
-  { category: "application", path: "cache", label: "Cache", component: Cache },
-  { category: "application", path: "theme", label: "Theme", component: Theme },
-  {
-    category: "application",
-    path: "accessibility",
-    label: "Accessibility",
-    component: Accessibility,
-  },
-  {
-    category: "application",
-    path: "hotkeys",
-    label: "Hotkeys",
-    component: Hotkeys,
-  },
-  {
-    category: "application",
-    path: "licenses",
-    label: "Licenses",
-    component: Licenses,
-  },
+  ...settingsNavigation.map((page) => ({
+    ...page,
+    component: pageComponents[page.path],
+  })),
 ] as const;
-
-export const settingsNavigation = settingsPages.filter(
-  (page): page is Exclude<(typeof settingsPages)[number], { path: "/" }> =>
-    page.path !== "/",
-);

packages/settings/src/navigation.ts

@@ -0,0 +1,31 @@
+export const settingsNavigation = [
+  {
+    category: "account",
+    path: "profile",
+    label: "Profile",
+  },
+  {
+    category: "account",
+    path: "security",
+    label: "Security",
+  },
+  { category: "general", path: "chat", label: "Chat" },
+  { category: "general", path: "call", label: "Call" },
+  { category: "application", path: "cache", label: "Cache" },
+  { category: "application", path: "theme", label: "Theme" },
+  {
+    category: "application",
+    path: "accessibility",
+    label: "Accessibility",
+  },
+  {
+    category: "application",
+    path: "hotkeys",
+    label: "Hotkeys",
+  },
+  {
+    category: "application",
+    path: "licenses",
+    label: "Licenses",
+  },
+] as const;

packages/settings/src/pages/index.tsx

@@ -1,4 +1,4 @@
-import { SettingsSidebar } from "../layout";
+import { SettingsSidebar } from "../sidebar";
 
 export default function Page() {
   return (

packages/settings/src/sidebar.tsx

@@ -0,0 +1,48 @@
+import { Button, ClearStorageButton, cn } from "@methanium/ui";
+import { useNavigate } from "@tanstack/react-router";
+
+import { settingsNavigation } from "./navigation";
+
+export function SettingsSidebar({
+  mobile = false,
+  className,
+}: {
+  mobile?: boolean;
+  className?: string;
+}) {
+  const navigate = useNavigate();
+  const categories = [
+    ...new Set(settingsNavigation.map((page) => page.category)),
+  ];
+
+  return (
+    <div
+      className={cn(
+        mobile ? "w-full p-1" : "p-3 rounded-tl-2xl border-r bg-input/15 w-50",
+        "flex flex-col gap-6",
+        className,
+      )}
+    >
+      {categories.map((category) => (
+        <div key={category} className="flex flex-col gap-2">
+          <h2 className="font-bold text-xs uppercase">{category}</h2>
+          {settingsNavigation
+            .filter((page) => page.category === category)
+            .map((page) => (
+              <Button
+                key={page.path}
+                className="w-full"
+                variant="outline"
+                onClick={() => navigate({ to: `/settings/${page.path}` })}
+              >
+                {page.label}
+              </Button>
+            ))}
+        </div>
+      ))}
+      <div className="mt-auto">
+        <ClearStorageButton className="w-full" />
+      </div>
+    </div>
+  );
+}