From fa46abde2101b8ffd580fcff9834e6e20dcd47bf Mon Sep 17 00:00:00 2001 From: Leo dev Date: Sun, 5 Oct 2025 11:01:01 +0200 Subject: [PATCH] Simple Dm home / hub --- package-lock.json | 22 ++++++++++++ package.json | 2 ++ src/app/chat/page.tsx | 68 +++++++++++++++++++++--------------- src/app/layout.tsx | 2 ++ src/components/ui/badge.tsx | 46 ++++++++++++++++++++++++ src/components/ui/sonner.tsx | 25 +++++++++++++ src/lib/auth.ts | 7 ++-- 7 files changed, 141 insertions(+), 31 deletions(-) create mode 100644 src/components/ui/badge.tsx create mode 100644 src/components/ui/sonner.tsx diff --git a/package-lock.json b/package-lock.json index ba29dfa..2d536ec 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index bfe1b65..611ca6a 100644 --- a/package.json +++ b/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": { diff --git a/src/app/chat/page.tsx b/src/app/chat/page.tsx index 24882c3..6468bd7 100644 --- a/src/app/chat/page.tsx +++ b/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(null); - const [messages, setMessages] = useState([]); const { user, loading } = useUser(); const [userList, setUserList] = useState>({}); 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 ( - - m.channel_id === id || m.from === id) - .toReversed()} - sendMessage={(message) => { - wsRef.current?.send( - JSON.stringify({ - type: "send_message", - params: { - channel_id: id, - contents: message, - }, - }) - ); - }} - /> + + + + Direct Messages + + + + + ); } + +function DMItem({ name, status }: { name: string; status: string }) { + return ( + + + + {name[0]} + +
+ {name} + {status} +
+ + ); +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 8642836..2c3d506 100644 --- a/src/app/layout.tsx +++ b/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} + ); diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx new file mode 100644 index 0000000..0205413 --- /dev/null +++ b/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 & { asChild?: boolean }) { + const Comp = asChild ? Slot : "span" + + return ( + + ) +} + +export { Badge, badgeVariants } diff --git a/src/components/ui/sonner.tsx b/src/components/ui/sonner.tsx new file mode 100644 index 0000000..957524e --- /dev/null +++ b/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 ( + + ) +} + +export { Toaster } diff --git a/src/lib/auth.ts b/src/lib/auth.ts index f044f97..e789b2f 100644 --- a/src/lib/auth.ts +++ b/src/lib/auth.ts @@ -11,7 +11,8 @@ export default async function auth( ip: string, wsRef: RefObject, setServer: Dispatch>, - setMessages: Dispatch> + setMessages: Dispatch>, + 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; } };