diff --git a/src/app/chat/page.tsx b/src/app/chat/page.tsx index dd9e76f..a35b042 100644 --- a/src/app/chat/page.tsx +++ b/src/app/chat/page.tsx @@ -1,24 +1,145 @@ "use client"; +import ProfilePicture from "@/components/ProfilePicture"; +import SettingsDialog from "@/components/settings/SettingsDialog"; import AppSidebar from "@/components/Sidebar"; +import { Button } from "@/components/ui/button"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; -import { useIsMobile } from "@/hooks/is-mobile"; +import { Separator } from "@/components/ui/separator"; import useApp from "@/hooks/use-app"; +import { ProfileSettings } from "@/types/settings"; +import { Server } from "@/types/types"; +import { motion } from "framer-motion"; +import { + ChevronLeft, + MessageCircle, + Users, + PlusCircle, + Settings, + ChevronRight, +} from "lucide-react"; +import Link from "next/link"; -export default function Chat() { +export default function ChatHub() { const app = useApp(); - const isMobile = useIsMobile(); + + const recentDMs = app.dms?.slice(0, 5) || []; + // const activeServers = app.servers?.slice(0, 5) || []; + const activeServers: Server[] = []; return ( - - - isMobile && app.setSidebarOpen(true)}> - Direct Messages - - - - +
+ + {/* Greeting */} +
app.setSidebarOpen(true)}> +

+ + Hey {app.profile?.display_name || "there"} +

+

+ Here's what's happening in your network today. +

+
+ +
+ {/* Recent DMs */} + + + + + Recent DMs + + + + {recentDMs.length ? ( + recentDMs.map((dm) => ( + + + + + {dm.display_name || dm.id} + + + + + )) + ) : ( +

+ No recent DMs yet. +

+ )} + + + + {/* Active Servers */} + + + + + Active Servers + + + + {activeServers.length ? ( + activeServers.map((srv) => ( + + + + {srv.name} + + + + )) + ) : ( +

+ No servers joined yet. +

+ )} + + +
+ + + + {/* Quick Actions */} +
+

Quick Actions

+
+ + + + + +
+
+ +
); } diff --git a/src/components/MessageBox.tsx b/src/components/MessageBox.tsx index 18c0019..50d3bb6 100644 --- a/src/components/MessageBox.tsx +++ b/src/components/MessageBox.tsx @@ -11,15 +11,13 @@ import { DropdownMenuTrigger, } from "./ui/dropdown-menu"; import { ChevronLeftIcon, SendIcon, SmilePlusIcon } from "lucide-react"; -import { useEffect, useRef, useState } from "react"; +import { useRef, useState } from "react"; import { format, isToday, isYesterday } from "date-fns"; import ReactMarkdown from "react-markdown"; import remarkGfm from "remark-gfm"; import { UserProfile } from "@/hooks/get-user"; -import axios from "axios"; import ProfilePicture from "./ProfilePicture"; import App from "@/types/app"; -import { useIsMobile } from "@/hooks/use-mobile"; import { Textarea } from "./ui/textarea"; function MessageContainer({ message, app }: { message: Message; app: App }) { @@ -130,7 +128,6 @@ export default function MessageBox({ messages: Message[]; }) { const [text, setText] = useState(""); - const isMobile = useIsMobile(); const inputRef = useRef(null); return ( @@ -138,7 +135,7 @@ export default function MessageBox({ {channelName && (
isMobile && app.setSidebarOpen(true)} + onClick={() => app.setSidebarOpen(true)} className="cursor-pointer flex" > diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index 6bfa638..1b887b7 100644 --- a/src/components/Sidebar.tsx +++ b/src/components/Sidebar.tsx @@ -36,6 +36,7 @@ import { cn } from "@/lib/utils"; import App from "@/types/app"; import { ProfileSettings } from "@/types/settings"; import axios from "axios"; +import { useIsMobile } from "@/hooks/is-mobile"; export default function AppSidebar({ children, @@ -54,7 +55,7 @@ export default function AppSidebar({ const [newServer, setNewServer] = useState({ name: "", ip: "" }); const [query, setQuery] = useState(""); const router = useRouter(); - const [filteredDms, setFilteredDms] = useState([]); + const isMobile = useIsMobile(); const dms = useMemo(() => { return Array.from( @@ -69,7 +70,7 @@ export default function AppSidebar({ useEffect(() => { const load = async () => { const users = await Promise.all(dms.map((id) => app.getUserById(id))); - setFilteredDms( + app.setDms( users.filter( (user) => user !== null && @@ -139,7 +140,7 @@ export default function AppSidebar({
@@ -258,7 +259,7 @@ export default function AppSidebar({ ) : ( <> - {filteredDms.map((user) => ( + {app.dms.map((user) => ( ))} - {filteredDms.length === 0 && query.trim() !== "" ? ( + {app.dms.length === 0 && query.trim() !== "" ? (
- {app.sidebarOpen ? ( + {app.sidebarOpen && isMobile ? (
app.setSidebarOpen(false)} diff --git a/src/components/settings/SettingsDialog.tsx b/src/components/settings/SettingsDialog.tsx index 6ed0225..12c6789 100644 --- a/src/components/settings/SettingsDialog.tsx +++ b/src/components/settings/SettingsDialog.tsx @@ -10,28 +10,34 @@ import { import { cn } from "@/lib/utils"; import Settings from "./Settings"; import { ProfileSettings } from "@/types/settings"; -import { useState } from "react"; +import { ReactNode, useState } from "react"; export default function SettingsDialog({ className, tab, profile, + children, }: { className?: string; tab?: string; profile: ProfileSettings; + children?: ReactNode; }) { return ( - + {children ? ( + children + ) : ( + + )} diff --git a/src/hooks/use-app.ts b/src/hooks/use-app.ts index 59dc115..ec226ec 100644 --- a/src/hooks/use-app.ts +++ b/src/hooks/use-app.ts @@ -13,8 +13,11 @@ export default function useApp(): App { const [sidebarOpen, setSidebarOpen] = useState(false); const profile = useUser(); const [clientSettings, setClientSettings] = useClientSettings(); + const [dms, setDms] = useState([]); return { + dms, + setDms, node, clientSettings, setClientSettings, diff --git a/src/types/app.ts b/src/types/app.ts index 834fff5..2624abb 100644 --- a/src/types/app.ts +++ b/src/types/app.ts @@ -23,4 +23,7 @@ export default interface App { setSidebarOpen: SetState; getUserById: (userId: string) => Promise; + + dms: UserProfile[]; + setDms: SetState; }