ui: Changes for user settings page (#251)

* fix: ui refactoring for user settings page

* fix: type error

* fix: pr comments

6 files changed, 108 insertions, 44 deletions

diff --git a/apps/web/app/dashboard/settings/page.tsx b/apps/web/app/dashboard/settings/page.tsx
index 059660b7..bab76794 100644
--- a/apps/web/app/dashboard/settings/page.tsx
+++ b/apps/web/app/dashboard/settings/page.tsx
@@ -1,12 +1,17 @@
 import ApiKeySettings from "@/components/dashboard/settings/ApiKeySettings";
 import { ChangePassword } from "@/components/dashboard/settings/ChangePassword";
+import UserDetails from "@/components/dashboard/settings/UserDetails";
 
 export default async function Settings() {
   return (
-    <div className="flex flex-col space-y-2 rounded-md border bg-background p-4">
-      <p className="text-2xl">Settings</p>
-      <ChangePassword />
-      <ApiKeySettings />
-    </div>
+    <>
+      <div className="rounded-md border bg-background p-4">
+        <UserDetails />
+        <ChangePassword />
+      </div>
+      <div className="mt-4 rounded-md border bg-background p-4">
+        <ApiKeySettings />
+      </div>
+    </>
   );
 }
diff --git a/apps/web/components/dashboard/settings/ApiKeySettings.tsx b/apps/web/components/dashboard/settings/ApiKeySettings.tsx
index 1455e1b6..4d43be7a 100644
--- a/apps/web/components/dashboard/settings/ApiKeySettings.tsx
+++ b/apps/web/components/dashboard/settings/ApiKeySettings.tsx
@@ -1,4 +1,3 @@
-import { Separator } from "@/components/ui/separator";
 import {
   Table,
   TableBody,
@@ -15,13 +14,12 @@ import DeleteApiKey from "./DeleteApiKey";
 export default async function ApiKeys() {
   const keys = await api.apiKeys.list();
   return (
-    <div className="pt-4">
-      <span className="text-xl">API Keys</span>
-      <Separator className="my-2" />
-      <div className="flex flex-col space-y-3">
-        <div className="flex flex-1 justify-end">
-          <AddApiKey />
-        </div>
+    <div>
+      <div className="flex items-center justify-between">
+        <div className="mb-2 text-lg font-medium">API Keys</div>
+        <AddApiKey />
+      </div>
+      <div className="mt-2">
         <Table>
           <TableHeader>
             <TableRow>
diff --git a/apps/web/components/dashboard/settings/ChangePassword.tsx b/apps/web/components/dashboard/settings/ChangePassword.tsx
index 070caee8..aa27f223 100644
--- a/apps/web/components/dashboard/settings/ChangePassword.tsx
+++ b/apps/web/components/dashboard/settings/ChangePassword.tsx
@@ -11,7 +11,6 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { Separator } from "@/components/ui/separator";
 import { toast } from "@/components/ui/use-toast";
 import { api } from "@/lib/trpc";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -54,13 +53,14 @@ export function ChangePassword() {
   }
 
   return (
-    <div className="w-full pt-4">
-      <span className="text-xl">Change Password</span>
-      <Separator className="my-2" />
+    <div className="flex flex-col sm:flex-row">
+      <div className="mb-4 w-full text-lg font-medium sm:w-1/3">
+        Change Password
+      </div>
       <Form {...form}>
         <form
           onSubmit={form.handleSubmit(onSubmit)}
-          className="flex flex-col gap-2 pt-4 lg:w-1/2"
+          className="flex w-full flex-col gap-2"
         >
           <FormField
             control={form.control}
@@ -120,7 +120,7 @@ export function ChangePassword() {
             }}
           />
           <ActionButton
-            className="h-full"
+            className="mt-4 h-10 w-max px-8"
             type="submit"
             loading={mutator.isPending}
           >
diff --git a/apps/web/components/dashboard/settings/DeleteApiKey.tsx b/apps/web/components/dashboard/settings/DeleteApiKey.tsx
index cbbe8320..e2334c44 100644
--- a/apps/web/components/dashboard/settings/DeleteApiKey.tsx
+++ b/apps/web/components/dashboard/settings/DeleteApiKey.tsx
@@ -47,8 +47,8 @@ export default function DeleteApiKey({
         </ActionButton>
       )}
     >
-      <Button variant="destructive">
-        <Trash className="size-5" />
+      <Button variant="outline">
+        <Trash size={18} color="red" />
       </Button>
     </ActionConfirmingDialog>
   );
diff --git a/apps/web/components/dashboard/settings/UserDetails.tsx b/apps/web/components/dashboard/settings/UserDetails.tsx
new file mode 100644
index 00000000..3915782b
--- /dev/null
+++ b/apps/web/components/dashboard/settings/UserDetails.tsx
@@ -0,0 +1,33 @@
+import { Input } from "@/components/ui/input";
+import { api } from "@/server/api/client";
+
+export default async function UserDetails() {
+  const whoami = await api.users.whoami();
+
+  const details = [
+    {
+      label: "Name",
+      value: whoami.name ?? undefined,
+    },
+    {
+      label: "Email",
+      value: whoami.email ?? undefined,
+    },
+  ];
+
+  return (
+    <div className="mb-8 flex flex-col sm:flex-row">
+      <div className="mb-4 w-full text-lg font-medium sm:w-1/3">
+        Basic Details
+      </div>
+      <div className="w-full">
+        {details.map(({ label, value }) => (
+          <div className="mb-2" key={label}>
+            <div className="mb-2 text-sm font-medium">{label}</div>
+            <Input value={value} disabled />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/components/dashboard/sidebar/Sidebar.tsx b/apps/web/components/dashboard/sidebar/Sidebar.tsx
index 08ad2936..84a10d2d 100644
--- a/apps/web/components/dashboard/sidebar/Sidebar.tsx
+++ b/apps/web/components/dashboard/sidebar/Sidebar.tsx
@@ -20,6 +20,51 @@ export default async function Sidebar() {
 
   const lists = await api.lists.list();
 
+  const searchItem = serverConfig.meilisearch
+    ? [
+        {
+          name: "Search",
+          icon: <Search size={18} />,
+          path: "/dashboard/search",
+        },
+      ]
+    : [];
+
+  const adminItem =
+    session.user.role == "admin"
+      ? [
+          {
+            name: "Admin",
+            icon: <Shield size={18} />,
+            path: "/dashboard/admin",
+          },
+        ]
+      : [];
+
+  const menu: {
+    name: string;
+    icon: JSX.Element;
+    path: string;
+  }[] = [
+    {
+      name: "Home",
+      icon: <Home size={18} />,
+      path: "/dashboard/bookmarks",
+    },
+    ...searchItem,
+    {
+      name: "Tags",
+      icon: <Tag size={18} />,
+      path: "/dashboard/tags",
+    },
+    {
+      name: "Settings",
+      icon: <Settings size={18} />,
+      path: "/dashboard/settings",
+    },
+    ...adminItem,
+  ];
+
   return (
     <aside className="flex h-screen w-60 flex-col gap-5 border-r p-4">
       <Link href={"/dashboard/bookmarks"}>
@@ -28,31 +73,14 @@ export default async function Sidebar() {
       <Separator />
       <div>
         <ul className="space-y-2 text-sm font-medium">
-          <SidebarItem
-            logo={<Home />}
-            name="Home"
-            path="/dashboard/bookmarks"
-          />
-          {serverConfig.meilisearch && (
-            <SidebarItem
-              logo={<Search />}
-              name="Search"
-              path="/dashboard/search"
-            />
-          )}
-          <SidebarItem logo={<Tag />} name="Tags" path="/dashboard/tags" />
-          <SidebarItem
-            logo={<Settings />}
-            name="Settings"
-            path="/dashboard/settings"
-          />
-          {session.user.role == "admin" && (
+          {menu.map((item) => (
             <SidebarItem
-              logo={<Shield />}
-              name="Admin"
-              path="/dashboard/admin"
+              key={item.name}
+              logo={item.icon}
+              name={item.name}
+              path={item.path}
             />
-          )}
+          ))}
         </ul>
       </div>
       <Separator />