238 lines
8.7 KiB
TypeScript
238 lines
8.7 KiB
TypeScript
"use client";
|
||
|
||
import ProfilePicture from "@/components/ProfilePicture";
|
||
import SettingsDialog from "@/components/settings/SettingsDialog";
|
||
import AppLayout from "@/components/app/AppLayout";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||
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,
|
||
ChevronRight,
|
||
MessageCircle,
|
||
Users,
|
||
Settings,
|
||
PlusCircle,
|
||
} from "lucide-react";
|
||
import Link from "next/link";
|
||
import StartNewDM from "./StartNewDM";
|
||
import AsyncValue from "@/components/AsyncValue";
|
||
|
||
export default function ChatHub() {
|
||
const app = useApp();
|
||
|
||
const recentDMs = app.dms?.slice(0, 5) || [];
|
||
const activeServers: Server[] = Object.values(app.servers).slice(0, 5) || [];
|
||
const suggestedServers: Server[] = [
|
||
{ id: "1", name: "Frontend Devs", icon_url: "", channels: [] },
|
||
{ id: "2", name: "Gamers Lounge", icon_url: "", channels: [] },
|
||
{ id: "3", name: "Music Hub", icon_url: "", channels: [] },
|
||
];
|
||
const recentActivity = app.messages.slice(0, 5);
|
||
|
||
const stats = {
|
||
dms: app.dms?.length || 0,
|
||
servers: app.servers?.length || 0,
|
||
// friends: app.friends?.length || 0,
|
||
};
|
||
|
||
return (
|
||
<AppLayout app={app}>
|
||
<div className="h-svh w-full max-h-svh flex flex-col py-6 px-5 md:px-10 gap-6 overflow-y-auto">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 10 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.3 }}
|
||
className="space-y-10"
|
||
>
|
||
{/* Greeting */}
|
||
<div onClick={() => app.setSidebarOpen(true)}>
|
||
<h1 className="text-3xl font-bold flex cursor-pointer gap-2">
|
||
<ChevronLeft className="my-auto w-5 md:hidden" />
|
||
Hey {app.profile?.display_name || "there"}!
|
||
</h1>
|
||
<p className="text-muted-foreground">
|
||
Here’s what’s happening in your network today.
|
||
</p>
|
||
</div>
|
||
|
||
{/* Recent DMs + Active Servers */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
{/* Recent DMs */}
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center gap-2">
|
||
<MessageCircle className="w-5 h-5" />
|
||
Recent DMs
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-3">
|
||
{recentDMs.length ? (
|
||
recentDMs.map((dm) => (
|
||
<Link
|
||
href={`/chat/${dm.id}`}
|
||
key={dm.id}
|
||
className="flex justify-between items-center hover:bg-accent hover:text-accent-foreground rounded p-2 transition"
|
||
>
|
||
<span className="flex gap-2">
|
||
<ProfilePicture
|
||
name={dm.display_name}
|
||
url={dm.avatar_url}
|
||
/>
|
||
<span className="truncate my-auto">
|
||
{dm.display_name || dm.id}
|
||
</span>
|
||
</span>
|
||
<ChevronRight />
|
||
</Link>
|
||
))
|
||
) : (
|
||
<p className="text-sm text-muted-foreground">
|
||
No recent DMs yet.
|
||
</p>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Active Servers */}
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center gap-2">
|
||
<Users className="w-5 h-5" />
|
||
Active Servers
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-3">
|
||
{activeServers.length ? (
|
||
activeServers.map((srv) => (
|
||
<Link
|
||
href={`/server/${srv.id}`}
|
||
key={srv.id}
|
||
className="flex justify-between items-center hover:bg-accent hover:text-accent-foreground rounded p-2 transition"
|
||
>
|
||
<span className="flex gap-2">
|
||
<ProfilePicture
|
||
name={srv.name}
|
||
url={srv.icon_url || ""}
|
||
/>
|
||
<span className="truncate my-auto">{srv.name}</span>
|
||
</span>
|
||
<ChevronRight />
|
||
</Link>
|
||
))
|
||
) : (
|
||
<p className="text-sm text-muted-foreground">
|
||
No servers joined yet.
|
||
</p>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
|
||
{/* Recent Activity Feed */}
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center gap-2">
|
||
<MessageCircle className="w-5 h-5" />
|
||
Recent Activity
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-3">
|
||
{recentActivity.length ? (
|
||
recentActivity.map((msg) => (
|
||
<AsyncValue
|
||
key={msg.id + msg.channel_id}
|
||
func={() => app.getUserById(msg.from)}
|
||
render={({ value: user }) => (
|
||
<Link
|
||
href={`/chat/${msg.from}`}
|
||
className="flex items-center justify-between hover:bg-accent rounded p-2 transition"
|
||
>
|
||
<div className="flex items-center gap-3">
|
||
<ProfilePicture
|
||
name={user?.display_name || ""}
|
||
url={user?.avatar_url || ""}
|
||
/>
|
||
<div>
|
||
<p className="font-medium">
|
||
{user?.display_name || ""}
|
||
</p>
|
||
<p className="text-sm text-muted-foreground truncate w-[200px]">
|
||
{msg.contents}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<ChevronRight className="opacity-70 w-4 h-4" />
|
||
</Link>
|
||
)}
|
||
/>
|
||
))
|
||
) : (
|
||
<p className="text-sm text-muted-foreground">
|
||
No recent messages yet.
|
||
</p>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Server Discovery */}
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center gap-2">
|
||
<Users className="w-5 h-5" />
|
||
Discover Servers
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||
{suggestedServers.map((srv) => (
|
||
<motion.div
|
||
key={srv.id}
|
||
whileHover={{ scale: 1.03 }}
|
||
transition={{ type: "spring", stiffness: 300 }}
|
||
>
|
||
<Card className="hover:bg-accent transition">
|
||
<CardContent className="p-4 flex flex-col items-center text-center gap-2">
|
||
<ProfilePicture name={srv.name} url={srv.icon_url} />
|
||
<h3 className="font-medium truncate">{srv.name}</h3>
|
||
<Button size="sm" className="gap-2">
|
||
<PlusCircle className="w-4 h-4" />
|
||
Join
|
||
</Button>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Separator />
|
||
|
||
{/* Quick Actions */}
|
||
<div className="w-full flex items-center justify-center">
|
||
<div className="flex flex-wrap gap-3">
|
||
<StartNewDM />
|
||
<Button variant="outline" className="gap-2">
|
||
<Users className="w-4 h-4" />
|
||
Create Server
|
||
</Button>
|
||
<SettingsDialog profile={app.profile as ProfileSettings}>
|
||
<Button variant="outline" className="gap-2">
|
||
<Settings className="w-4 h-4" />
|
||
Settings
|
||
</Button>
|
||
</SettingsDialog>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</AppLayout>
|
||
);
|
||
}
|