feature(web): Change the settings page to be tabbed

4 files changed, 55 insertions, 33 deletions

diff --git a/apps/web/app/dashboard/settings/page.tsx b/apps/web/app/dashboard/settings/page.tsx
index 97048657..c116fb86 100644
--- a/apps/web/app/dashboard/settings/page.tsx
+++ b/apps/web/app/dashboard/settings/page.tsx
@@ -1,32 +1,60 @@
-import Link from "next/link";
+import AISettings from "@/components/dashboard/settings/AISettings";
 import ApiKeySettings from "@/components/dashboard/settings/ApiKeySettings";
 import { ChangePassword } from "@/components/dashboard/settings/ChangePassword";
 import ImportExport from "@/components/dashboard/settings/ImportExport";
 import UserDetails from "@/components/dashboard/settings/UserDetails";
-import { ExternalLink } from "lucide-react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Download, KeyRound, Sparkle, User } from "lucide-react";
 
 export default async function Settings() {
   return (
-    <>
-      <div className="rounded-md border bg-background p-4">
-        <UserDetails />
-        <ChangePassword />
-      </div>
-      <div className="mt-4 rounded-md border bg-background p-4">
-        <Link
-          className="flex items-center gap-2 text-lg font-medium"
-          href="/dashboard/settings/ai"
-        >
+    <Tabs
+      defaultValue="info"
+      orientation="horizontal"
+      className="flex flex-col gap-1"
+    >
+      <TabsList className="flex justify-start">
+        <TabsTrigger className="flex items-center gap-2 p-3" value="info">
+          <User className="size-4" />
+          User Info
+        </TabsTrigger>
+        <TabsTrigger className="flex items-center gap-2 p-3" value="ai">
+          <Sparkle className="size-4" />
           AI Settings
-          <ExternalLink />
-        </Link>
-      </div>
-      <div className="mt-4 rounded-md border bg-background p-4">
-        <ImportExport />
-      </div>
-      <div className="mt-4 rounded-md border bg-background p-4">
-        <ApiKeySettings />
+        </TabsTrigger>
+        <TabsTrigger
+          className="flex items-center gap-2 p-3"
+          value="importexport"
+        >
+          <Download className="size-4" />
+          Import / Export
+        </TabsTrigger>
+        <TabsTrigger className="flex items-center gap-2 p-3" value="apikeys">
+          <KeyRound className="size-4" />
+          API Keys
+        </TabsTrigger>
+      </TabsList>
+      <div className="w-full">
+        <TabsContent value="info">
+          <div className="rounded-md border bg-background p-4">
+            <UserDetails />
+            <ChangePassword />
+          </div>
+        </TabsContent>
+        <TabsContent value="ai">
+          <AISettings />
+        </TabsContent>
+        <TabsContent value="importexport">
+          <div className="rounded-md border bg-background p-4">
+            <ImportExport />
+          </div>
+        </TabsContent>
+        <TabsContent value="apikeys">
+          <div className="rounded-md border bg-background p-4">
+            <ApiKeySettings />
+          </div>
+        </TabsContent>
       </div>
-    </>
+    </Tabs>
   );
 }
diff --git a/apps/web/app/dashboard/settings/ai/page.tsx b/apps/web/components/dashboard/settings/AISettings.tsx
index 009919a0..12f656ba 100644
--- a/apps/web/app/dashboard/settings/ai/page.tsx
+++ b/apps/web/components/dashboard/settings/AISettings.tsx
@@ -306,7 +306,7 @@ export function PromptDemo() {
   );
 }
 
-export default function PromptsPage() {
+export default function AISettings() {
   return (
     <>
       <div className="rounded-md border bg-background p-4">
diff --git a/apps/web/components/dashboard/settings/ImportExport.tsx b/apps/web/components/dashboard/settings/ImportExport.tsx
index 25b2073c..2bc930f7 100644
--- a/apps/web/components/dashboard/settings/ImportExport.tsx
+++ b/apps/web/components/dashboard/settings/ImportExport.tsx
@@ -187,7 +187,7 @@ export function ImportExportRow() {
 
   return (
     <div className="flex flex-col gap-3">
-      <div className="flex flex-row gap-2">
+      <div className="flex flex-row flex-wrap gap-2">
         <FilePickerButton
           loading={false}
           accept=".html"
@@ -233,15 +233,9 @@ export function ImportExportRow() {
 
 export default function ImportExport() {
   return (
-    <div>
-      <div className="flex items-center justify-between">
-        <div className="mb-4 text-lg font-medium">
-          Import / Export Bookmarks
-        </div>
-      </div>
-      <div className="mt-2">
-        <ImportExportRow />
-      </div>
+    <div className="flex w-full flex-col gap-2">
+      <p className="mb-4 text-lg font-medium">Import / Export Bookmarks</p>
+      <ImportExportRow />
     </div>
   );
 }
diff --git a/apps/web/components/dashboard/settings/UserDetails.tsx b/apps/web/components/dashboard/settings/UserDetails.tsx
index 3915782b..471a6e09 100644
--- a/apps/web/components/dashboard/settings/UserDetails.tsx
+++ b/apps/web/components/dashboard/settings/UserDetails.tsx
@@ -16,7 +16,7 @@ export default async function UserDetails() {
   ];
 
   return (
-    <div className="mb-8 flex flex-col sm:flex-row">
+    <div className="mb-8 flex w-full flex-col sm:flex-row">
       <div className="mb-4 w-full text-lg font-medium sm:w-1/3">
         Basic Details
       </div>