Simple Dm home / hub

src/app/chat/page.tsx

@@ -7,23 +7,29 @@ import Message from "@/types/message";
 import useUser, { User } from "@/hooks/get-user";
 import { NumberMap } from "@/types/typeUtils";
 import auth, { makeAddress } from "@/lib/auth";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { toast } from "sonner";
 
-// In this testing instance we are assuming that Alice's node is localhost
-// To make this functional we need to add a settings feature to the api
-
-export default function AppHome() {
-  // Again we assume a static id, specifically Alice's user id
-  // const { id } = useParams<{ id: string }>();
-  const id = 667;
+export default function Chat() {
   const ip = "localhost";
   const wsRef = useRef<WebSocket | null>(null);
-  const [messages, setMessages] = useState<Message[]>([]);
   const { user, loading } = useUser();
   const [userList, setUserList] = useState<NumberMap<User>>({});
 
   useEffect(() => {
     if (!ip || !user || loading) return;
-    auth(makeAddress(ip, 7090), wsRef, () => {}, setMessages);
+    auth(
+      makeAddress(ip, 7090),
+      wsRef,
+      () => {},
+      () => {},
+      (m) => {
+        toast(`New message from ${m.from}`, {
+          description: m.contents.slice(0, 80),
+        });
+      }
+    );
     setUserList((prev) => {
       prev[user.id] = user;
       return prev;
@@ -31,26 +37,30 @@ export default function AppHome() {
   }, [ip, user, loading]);
 
   return (
-    <AppSidebar user={user}>
-      <MessageBox
-        channelName="Alice"
-        userList={userList}
-        setUserList={setUserList}
-        messages={messages
-          .filter((m) => m.channel_id === id || m.from === id)
-          .toReversed()}
-        sendMessage={(message) => {
-          wsRef.current?.send(
-            JSON.stringify({
-              type: "send_message",
-              params: {
-                channel_id: id,
-                contents: message,
-              },
-            })
-          );
-        }}
-      />
+    <AppSidebar user={{ id: 173, username: "leo", email: "" }}>
+      <Card className="bg-background w-full">
+        <CardHeader>
+          <CardTitle>Direct Messages</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <DMItem name="Alice" status="online" />
+        </CardContent>
+      </Card>
     </AppSidebar>
   );
 }
+
+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">
+        <span className="text-sm font-medium">{name}</span>
+        <span className="text-xs text-muted-foreground">{status}</span>
+      </div>
+    </Card>
+  );
+}

src/app/layout.tsx

@@ -3,6 +3,7 @@ import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import { cookies } from "next/headers";
 import { parseClientSettings } from "@/lib/clientSettings";
+import { Toaster } from "@/components/ui/sonner";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -34,6 +35,7 @@ export default async function RootLayout({
         className={`${geistSans.variable} ${geistMono.variable} antialiased ${settings.theme}`}
       >
         {children}
+        <Toaster />
       </body>
     </html>
   );