Simple Dm home / hub

package-lock.json

@@ -37,11 +37,13 @@
         "lexical": "^0.34.0",
         "lucide-react": "^0.541.0",
         "next": "15.5.0",
+        "next-themes": "^0.4.6",
         "pg": "^8.16.3",
         "react": "19.1.0",
         "react-dom": "19.1.0",
         "react-markdown": "^10.1.0",
         "remark-gfm": "^4.0.1",
+        "sonner": "^2.0.7",
         "tailwind-merge": "^3.3.1"
       },
       "devDependencies": {
@@ -4383,6 +4385,16 @@
         }
       }
     },
+    "node_modules/next-themes": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
+      "integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -4895,6 +4907,16 @@
         "is-arrayish": "^0.3.1"
       }
     },
+    "node_modules/sonner": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.7.tgz",
+      "integrity": "sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",

package.json

@@ -40,11 +40,13 @@
     "lexical": "^0.34.0",
     "lucide-react": "^0.541.0",
     "next": "15.5.0",
+    "next-themes": "^0.4.6",
     "pg": "^8.16.3",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.1"
   },
   "devDependencies": {

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
+export default function Chat() {
-// 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;
   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}>
+    <AppSidebar user={{ id: 173, username: "leo", email: "" }}>
-      <MessageBox
+      <Card className="bg-background w-full">
-        channelName="Alice"
+        <CardHeader>
-        userList={userList}
+          <CardTitle>Direct Messages</CardTitle>
-        setUserList={setUserList}
+        </CardHeader>
-        messages={messages
+        <CardContent>
-          .filter((m) => m.channel_id === id || m.from === id)
+          <DMItem name="Alice" status="online" />
-          .toReversed()}
+        </CardContent>
-        sendMessage={(message) => {
+      </Card>
-          wsRef.current?.send(
-            JSON.stringify({
-              type: "send_message",
-              params: {
-                channel_id: id,
-                contents: message,
-              },
-            })
-          );
-        }}
-      />
     </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>
   );

src/components/ui/badge.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

src/components/ui/sonner.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

src/lib/auth.ts

@@ -11,7 +11,8 @@ export default async function auth(
   ip: string,
   wsRef: RefObject<WebSocket | null>,
   setServer: Dispatch<SetStateAction<Server | undefined>>,
-  setMessages: Dispatch<SetStateAction<Message[]>>
+  setMessages: Dispatch<SetStateAction<Message[]>>,
+  onNewMessage?: (m: Message) => void
 ) {
   const server_auth = (
     (await axios.post("/api/auth", { server_ip: ip })).data as any
@@ -44,10 +45,12 @@ export default async function auth(
     switch (data.type) {
       case "authenticated":
         setMessages(data.params.messages);
+        break;
 
       case "message_create":
-        // setMessages([...messages, data.params]);
+        if (onNewMessage) onNewMessage(data.params as Message);
         setMessages((prev) => [...prev, data.params]);
+        break;
     }
   };