Better ui and slight change for settings #3

src/app/home/page.tsx

@@ -1,28 +1,14 @@
 "use client";
 
-import { Button } from "@/components/ui/button";
-import { Avatar, AvatarFallback } from "@/components/ui/avatar";
-import { Card } from "@/components/ui/card";
-import { useState } from "react";
 import AppSidebar from "@/components/Sidebar";
 import MessageBox from "@/components/MessageBox";
+import useUser from "@/hooks/get-user";
 
 export default function HomePage() {
-  const [messages, setMessages] = useState([
-    { id: 1, user: "Alice", text: "Hey, how are you?" },
-    { id: 2, user: "You", text: "Doing good, just working on the chat app!" },
-  ]);
-
-  const [input, setInput] = useState("");
-
-  function sendMessage() {
-    if (!input.trim()) return;
-    setMessages([...messages, { id: Date.now(), user: "You", text: input }]);
-    setInput("");
-  }
+  const { user, loading } = useUser();
 
   return (
-    <AppSidebar>
+    <AppSidebar user={user}>
       <MessageBox
         channelName="Alice"
         messages={[]}
@@ -33,36 +19,3 @@ export default function HomePage() {
     </AppSidebar>
   );
 }
-
-function ServerButton({
-  label,
-  icon,
-}: {
-  label: string;
-  icon: React.ReactNode;
-}) {
-  return (
-    <Button
-      variant="ghost"
-      size="icon"
-      className="rounded-full h-12 w-12"
-      title={label}
-    >
-      {icon}
-    </Button>
-  );
-}
-
-function DMItem({ name, status }: { name: string; status: string }) {
-  return (
-    <Card className="p-2 flex items-center gap-2 cursor-pointer hover:bg-accent">
-      <Avatar className="h-8 w-8">
-        <AvatarFallback>{name[0]}</AvatarFallback>
-      </Avatar>
-      <div className="flex flex-col">
-        <span className="text-sm font-medium">{name}</span>
-        <span className="text-xs text-muted-foreground">{status}</span>
-      </div>
-    </Card>
-  );
-}

src/app/layout.tsx

@@ -1,6 +1,8 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import { cookies } from "next/headers";
+import { parseClientSettings } from "@/lib/clientSettings";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -17,15 +19,19 @@ export const metadata: Metadata = {
   description: "Generated by create next app",
 };
 
-export default function RootLayout({
+export default async function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  const cookieStore = await cookies();
+
+  const settings = parseClientSettings(cookieStore.get("settings")?.value);
+
   return (
     <html lang="en">
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased dark`}
+        className={`${geistSans.variable} ${geistMono.variable} antialiased ${settings.theme}`}
       >
         {children}
       </body>

src/app/server/[id]/page.tsx

@@ -84,6 +84,7 @@ export default function Server() {
 
   return (
     <AppSidebar
+      user={user}
       server={
         {
           channels: [{ id: "general", name: "General", kind: "text" }],

src/app/settings/page.tsx

@@ -7,41 +7,57 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Card } from "@/components/ui/card";
 import { CardContent } from "@/components/ui/card";
 import { ACCOUNT_SCHEMA, CLIENT_SCHEMA } from "@/types/settings";
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { ChevronLeftCircle } from "lucide-react";
 
 export default function SettingsPage() {
   const [settings, setSettings] = useClientSettings();
   const [accountSettings, setAccountSettings] = useAccountSettings();
+  const router = useRouter();
 
   return (
-    <Tabs className="mx-auto" defaultValue="client">
-      <TabsList className="mx-auto">
-        <TabsTrigger value="client">Client Settings</TabsTrigger>
-        <TabsTrigger value="account">Account Settings</TabsTrigger>
-      </TabsList>
-      <TabsContent value="client">
-        <Card className="w-xl mx-auto">
-          <CardContent className="flex flex-col gap-3">
-            <Settings
-              settings={settings}
-              setSettings={setSettings}
-              schema={CLIENT_SCHEMA}
-              onSave={() => setClientSettings(settings)}
-            />
-          </CardContent>
-        </Card>
-      </TabsContent>
-      <TabsContent value="account">
-        <Card className="w-xl mx-auto">
-          <CardContent className="flex flex-col gap-3">
-            <Settings
-              settings={accountSettings}
-              setSettings={setAccountSettings}
-              schema={ACCOUNT_SCHEMA}
-              onSave={() => {}}
-            />
-          </CardContent>
-        </Card>
-      </TabsContent>
-    </Tabs>
+    <div>
+      <Button
+        variant="outline"
+        className="ml-2 mt-2"
+        onClick={() => router.back()}
+      >
+        <ChevronLeftCircle />
+      </Button>
+      <Tabs className="mx-auto mt-3" defaultValue="client">
+        <TabsList className="mx-auto">
+          <TabsTrigger value="client">Client Settings</TabsTrigger>
+          <TabsTrigger value="account">Account Settings</TabsTrigger>
+        </TabsList>
+        <TabsContent value="client">
+          <Card className="w-xl mx-auto">
+            <CardContent className="flex flex-col gap-3">
+              <Settings
+                settings={settings}
+                setSettings={setSettings}
+                schema={CLIENT_SCHEMA}
+                onSave={() => {
+                  setClientSettings(settings);
+                  router.refresh();
+                }}
+              />
+            </CardContent>
+          </Card>
+        </TabsContent>
+        <TabsContent value="account">
+          <Card className="w-xl mx-auto">
+            <CardContent className="flex flex-col gap-3">
+              <Settings
+                settings={accountSettings}
+                setSettings={setAccountSettings}
+                schema={ACCOUNT_SCHEMA}
+                onSave={() => {}}
+              />
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
   );
 }