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>
   );
 }

src/components/MessageBox.tsx

@@ -18,6 +18,7 @@ import remarkGfm from "remark-gfm";
 import { NumberMap, StringMap } from "@/types/typeUtils";
 import { User } from "@/hooks/get-user";
 import axios from "axios";
+import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
 
 function MessageContainer({
   message,
@@ -40,7 +41,18 @@ function MessageContainer({
   return (
     <div className="flex flex-col gap-3 rounded-lg p-4 hover:bg-accent">
       <div className="flex gap-2">
-        <div className="w-8 h-8 rounded-full bg-gray-400" />
+        {/* <div className="w-8 h-8 rounded-full bg-gray-400" /> */}
+        <Avatar className="h-8 w-8">
+          <AvatarImage
+            src="https://github.com/kleo-dev.png"
+            alt={message.from.toString()}
+          />
+          <AvatarFallback>
+            {userList[message.from]
+              ? userList[message.from].username
+              : message.from}
+          </AvatarFallback>
+        </Avatar>
         <div className="flex flex-col flex-1">
           <span className="font-bold flex gap-1 items-center">
             {userList[message.from]

src/components/Sidebar.tsx

@@ -5,6 +5,7 @@ import {
   MessageCircle,
   Plus,
   Search,
+  SettingsIcon,
   Volume2Icon,
 } from "lucide-react";
 import Server from "@/types/server";
@@ -24,16 +25,21 @@ import { Input } from "./ui/input";
 import { Label } from "./ui/label";
 import { Button } from "./ui/button";
 import { Card } from "./ui/card";
-import { Avatar, AvatarFallback } from "./ui/avatar";
+import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
 import { ScrollArea } from "./ui/scroll-area";
 import { useRouter } from "next/navigation";
 import Channel from "@/types/channel";
+import Link from "next/link";
+import { NumberMap } from "@/types/typeUtils";
+import { User } from "@/hooks/get-user";
 
 export default function AppSidebar({
+  user,
   server,
   children,
 }: Readonly<{
   server?: Server;
+  user: User | null;
   children: React.ReactNode;
 }>) {
   const [servers, setServers] = useState<[string, string][]>([]);
@@ -143,6 +149,12 @@ export default function AppSidebar({
               </DialogFooter>
             </DialogContent>
           </Dialog>
+
+          <footer className="mt-auto">
+            <Link href="/settings">
+              <SettingsIcon />
+            </Link>
+          </footer>
         </div>
 
         {/* Right column */}
@@ -177,6 +189,10 @@ export default function AppSidebar({
               )}
             </div>
           </ScrollArea>
+
+          <footer className="mt-auto pb-3 pl-3 pr-3">
+            <DMItem name={user?.username || "Loading.."} status="online" />
+          </footer>
         </div>
       </div>
 
@@ -189,6 +205,7 @@ function DMItem({ name, status }: { name: string; status: string }) {
   return (
     <Card className="p-2 flex flex-row items-center gap-2 cursor-pointer hover:bg-accent">
       <Avatar className="h-8 w-8">
+        <AvatarImage src="https://github.com/kleo-dev.png" alt={name} />
         <AvatarFallback>{name[0]}</AvatarFallback>
       </Avatar>
       <div className="flex flex-col">

src/lib/clientSettings.ts

@@ -5,13 +5,12 @@ export const defaultSettings: ClientSettings = {
   theme: "dark",
 };
 
-export function getClientSettings(): ClientSettings {
-  const s_cookie = Cookies.get("settings");
+export function parseClientSettings(s?: string): ClientSettings {
   let parsed: Partial<ClientSettings> = {};
 
-  if (s_cookie) {
+  if (s) {
     try {
-      parsed = JSON.parse(s_cookie);
+      parsed = JSON.parse(s);
     } catch {
       parsed = {};
     }
@@ -23,6 +22,10 @@ export function getClientSettings(): ClientSettings {
   };
 }
 
+export function getClientSettings(): ClientSettings {
+  return parseClientSettings(Cookies.get("settings"));
+}
+
 export function setClientSettings(value?: ClientSettings) {
   Cookies.set("settings", JSON.stringify(value || defaultSettings));
 }