+ {/* Server List Sidebar - Always visible on desktop, overlay on mobile */}
+
+
+
+ {/* Channel Sidebar - Collapsible */}
+
+
+ {/* Main Content Area */}
+
+
+
+ {/* Member List - Conditionally shown */}
+ {showMemberList && !isMobile && (
+
+
+ )}
+
+ {/* Mobile overlay for sidebars */}
+ {isMobile && !sidebarCollapsed && (
+
useUiStore.getState().toggleSidebar()}
+ />
+ )}
+
+ );
+};
+
+export default AppLayout;
diff --git a/concord-client/src/components/layout/ChannelSidebar.tsx b/concord-client/src/components/layout/ChannelSidebar.tsx
new file mode 100644
index 0000000..19363d0
--- /dev/null
+++ b/concord-client/src/components/layout/ChannelSidebar.tsx
@@ -0,0 +1,147 @@
+import React from "react";
+import { useParams } from "react-router";
+import { ChevronDown, Plus, Users, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { useInstanceDetails } from "@/hooks/useServers";
+import { useChannels } from "@/hooks/useChannel";
+import { useUiStore } from "@/stores/uiStore";
+import { useResponsive } from "@/hooks/useResponsive";
+import ChannelList from "@/components/channel/ChannelList";
+
+const ChannelSidebar: React.FC = () => {
+ const { instanceId } = useParams();
+ const { data: instance, isLoading: instanceLoading } =
+ useInstanceDetails(instanceId);
+ const { data: categories, isLoading: channelsLoading } =
+ useChannels(instanceId);
+ const {
+ toggleMemberList,
+ showMemberList,
+ toggleSidebar,
+ openCreateChannel,
+ openServerSettings,
+ } = useUiStore();
+ const { isMobile, isDesktop } = useResponsive();
+
+ // Handle Direct Messages view
+ if (!instanceId || instanceId === "@me") {
+ return (
+
+ {/* DM Header */}
+
+
+ {isMobile && (
+
+
+ )}
+
Direct Messages
+
+
+
+
+
+ {/* DM List */}
+
+
+
+ No direct messages yet
+
+
+
+ );
+ }
+
+ if (instanceLoading || channelsLoading) {
+ return (
+
+ );
+ }
+
+ if (!instance) {
+ return (
+
+ );
+ }
+
+ return (
+
+ {/* Server Header */}
+
+
+ {isMobile && (
+
+
+ )}
+
+ {instance.name}
+
+
+
+
+ {/* Channel Categories and Channels */}
+
+
+ {categories && categories.length > 0 ? (
+
+ ) : (
+
+ No channels yet
+
+ )}
+
+
+ {/* Bottom Actions */}
+
+
+
+
+
+ {isDesktop && (
+
+
+ )}
+
+
+
+ );
+};
+
+export default ChannelSidebar;
diff --git a/concord-client/src/components/layout/MemberList.tsx b/concord-client/src/components/layout/MemberList.tsx
new file mode 100644
index 0000000..547fd41
--- /dev/null
+++ b/concord-client/src/components/layout/MemberList.tsx
@@ -0,0 +1,176 @@
+import React from "react";
+import { useParams } from "react-router";
+import { Crown, Shield } from "lucide-react";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { useInstanceMembers } from "@/hooks/useServers";
+import { UserWithRoles } from "@/types/api";
+
+interface MemberItemProps {
+ member: UserWithRoles;
+ isOwner?: boolean;
+}
+
+const MemberItem: React.FC
= ({ member, isOwner = false }) => {
+ const getStatusColor = (status: string) => {
+ switch (status) {
+ case "online":
+ return "bg-green-500";
+ case "away":
+ return "bg-yellow-500";
+ case "busy":
+ return "bg-red-500";
+ default:
+ return "bg-gray-500";
+ }
+ };
+
+ const getHighestRole = (roles: any[]) => {
+ if (!roles || roles.length === 0) return null;
+ // Sort by position (higher position = higher role)
+ return roles.sort((a, b) => b.position - a.position)[0];
+ };
+
+ const highestRole = getHighestRole(member.roles);
+
+ return (
+
+
+
+
+ {member.username.slice(0, 2).toUpperCase()}
+
+
+ {/* Status indicator */}
+
+
+
+
+
+ {isOwner && (
+
+ {member.nickname || member.username}
+
+
+ {member.bio && (
+
{member.bio}
+ )}
+
+
,
+ );
+
+ // Sort role groups by highest role position
+ const sortedRoleGroups = Object.entries(groupedMembers).sort(
+ ([roleNameA, membersA], [roleNameB, membersB]) => {
+ const roleA = membersA[0]?.roles?.find((r) => r.name === roleNameA);
+ const roleB = membersB[0]?.roles?.find((r) => r.name === roleNameB);
+
+ if (!roleA && !roleB) return 0;
+ if (!roleA) return 1;
+ if (!roleB) return -1;
+
+ return roleB.position - roleA.position;
+ },
+ );
+
+ return (
+
+ {/* Header */}
+
+
+ Members — {members.length}
+
+
+
+ {/* Member List */}
+
+
+ {sortedRoleGroups.map(([roleName, roleMembers]) => (
+
+ {/* Role Header */}
+
+
+ {roleName} — {roleMembers.length}
+
+
+
+ {/* Role Members */}
+
+ {roleMembers
+ .sort((a, b) => a.username.localeCompare(b.username))
+ .map((member) => (
+
+
+ ))}
+
+
+
+ {/* Mobile menu toggle */}
+ {isMobile && (
+
+
+
+
+
+
+ Toggle Menu
+
+
+ )}
+
+ {/* Home/DM Button */}
+
+
+
+
+
+
+ Direct Messages
+
+
+
+ {/* Separator */}
+
+
+ {/* Server List */}
+
+ {isLoading ? (
+
+ ) : (
+ servers?.map((server) => (
+
+
+
+ handleServerClick(server.id)}
+ />
+
+
+
+ {server.name}
+
+
+ ))
+ )}
+
+
+ {/* Add Server Button */}
+
+
+
+
+
+
+ Add a Server
+
+
+
+ );
+};
+
+export default ServerSidebar;
diff --git a/concord-client/src/components/layout/UserPanel.tsx b/concord-client/src/components/layout/UserPanel.tsx
new file mode 100644
index 0000000..7ddd2bc
--- /dev/null
+++ b/concord-client/src/components/layout/UserPanel.tsx
@@ -0,0 +1,198 @@
+import React, { useState } from "react";
+import { Settings, Mic, MicOff, Headphones } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from "@/components/ui/tooltip";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+import { useAuthStore } from "@/stores/authStore";
+import { useUiStore } from "@/stores/uiStore";
+
+const UserPanel: React.FC = () => {
+ const { user, logout } = useAuthStore();
+ const { openUserSettings } = useUiStore();
+
+ // Voice/Audio states (for future implementation)
+ const [isMuted, setIsMuted] = useState(false);
+ const [isDeafened, setIsDeafened] = useState(false);
+
+ if (!user) return null;
+
+ const getStatusColor = (status: string) => {
+ switch (status) {
+ case "online":
+ return "bg-green-500";
+ case "away":
+ return "bg-yellow-500";
+ case "busy":
+ return "bg-red-500";
+ default:
+ return "bg-gray-500";
+ }
+ };
+
+ const handleStatusChange = (newStatus: string) => {
+ // TODO: Implement status change
+ console.log("Status change to:", newStatus);
+ };
+
+ const handleMuteToggle = () => {
+ setIsMuted(!isMuted);
+ // TODO: Implement actual mute functionality
+ };
+
+ const handleDeafenToggle = () => {
+ setIsDeafened(!isDeafened);
+ if (!isDeafened) {
+ setIsMuted(true); // Deafening also mutes
+ }
+ // TODO: Implement actual deafen functionality
+ };
+
+ return (
+
+ {/* User Info */}
+
+
+
+
+
+
+ {user.username.slice(0, 2).toUpperCase()}
+
+
+ {/* Status indicator */}
+
+
+
+ {user.nickname || user.username}
+
+
+ {user.status}
+
+
+
+
+
+ handleStatusChange("online")}>
+
+
+ handleStatusChange("away")}>
+
+
+ handleStatusChange("busy")}>
+
+
+ handleStatusChange("offline")}>
+
+
+
+
+
+
+
+ Log Out
+
+
+
+
+ {/* Voice Controls */}
+
+
+ {/* Mute/Unmute */}
+
+
+
+ {isMuted ?
+
+
+ {isMuted ? "Unmute" : "Mute"}
+
+
+
+ {/* Deafen/Undeafen */}
+
+
+
+
+
+
+ {isDeafened ? "Undeafen" : "Deafen"}
+
+
+
+ {/* Settings */}
+
+
+
+
+
+
+ User Settings
+
+
+
+
+
+
+
+ Toggle theme
+
+
+
+ setTheme("light")}>
+ Light
+
+ setTheme("dark")}>
+ Dark
+
+ setTheme("system")}>
+ System
+
+
+
+ );
+}
diff --git a/concord-client/src/components/server/ServerIcon.tsx b/concord-client/src/components/server/ServerIcon.tsx
new file mode 100644
index 0000000..1012be5
--- /dev/null
+++ b/concord-client/src/components/server/ServerIcon.tsx
@@ -0,0 +1,60 @@
+import React from "react";
+import { Button } from "@/components/ui/button";
+import { Instance } from "@/types/database";
+
+interface ServerIconProps {
+ server: Instance;
+ isActive: boolean;
+ onClick: () => void;
+}
+
+const ServerIcon: React.FC = ({
+ server,
+ isActive,
+ onClick,
+}) => {
+ const getServerInitials = (name: string) => {
+ return name
+ .split(" ")
+ .map((word) => word[0])
+ .join("")
+ .toUpperCase()
+ .slice(0, 2);
+ };
+
+ return (
+
+ {/* Active indicator */}
+
+
+
+ {server.icon ? (
+
+ {getServerInitials(server.name)}
+
+ )}
+
+
(initialState);
+
+export function ThemeProvider({
+ children,
+ defaultTheme = "system",
+ storageKey = "vite-ui-theme",
+ ...props
+}: ThemeProviderProps) {
+ const [theme, setTheme] = useState(
+ () => (localStorage.getItem(storageKey) as Theme) || defaultTheme,
+ );
+
+ useEffect(() => {
+ const root = window.document.documentElement;
+
+ root.classList.remove("light", "dark");
+
+ if (theme === "system") {
+ const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+ .matches
+ ? "dark"
+ : "light";
+
+ root.classList.add(systemTheme);
+ return;
+ }
+
+ root.classList.add(theme);
+ }, [theme]);
+
+ const value = {
+ theme,
+ setTheme: (theme: Theme) => {
+ localStorage.setItem(storageKey, theme);
+ setTheme(theme);
+ },
+ };
+
+ return (
+
+ {children}
+
+ );
+}
+
+export const useTheme = () => {
+ const context = useContext(ThemeProviderContext);
+
+ if (context === undefined)
+ throw new Error("useTheme must be used within a ThemeProvider");
+
+ return context;
+};
diff --git a/concord-client/src/components/ui/alert.tsx b/concord-client/src/components/ui/alert.tsx
new file mode 100644
index 0000000..1421354
--- /dev/null
+++ b/concord-client/src/components/ui/alert.tsx
@@ -0,0 +1,66 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+ "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+ {
+ variants: {
+ variant: {
+ default: "bg-card text-card-foreground",
+ destructive:
+ "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ }
+)
+
+function Alert({
+ className,
+ variant,
+ ...props
+}: React.ComponentProps<"div"> & VariantProps) {
+ return (
+
+ )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function AlertDescription({
+ className,
+ ...props
+}: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+export { Alert, AlertTitle, AlertDescription }
diff --git a/concord-client/src/components/ui/avatar.tsx b/concord-client/src/components/ui/avatar.tsx
new file mode 100644
index 0000000..b7224f0
--- /dev/null
+++ b/concord-client/src/components/ui/avatar.tsx
@@ -0,0 +1,51 @@
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+ & {
+ asChild?: boolean
+ }) {
+ const Comp = asChild ? Slot : "button"
+
+ return (
+
+ )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+export {
+ Card,
+ CardHeader,
+ CardFooter,
+ CardTitle,
+ CardAction,
+ CardDescription,
+ CardContent,
+}
diff --git a/concord-client/src/components/ui/dropdown-menu.tsx b/concord-client/src/components/ui/dropdown-menu.tsx
new file mode 100644
index 0000000..0d6741b
--- /dev/null
+++ b/concord-client/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,255 @@
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenu({
+ ...props
+}: React.ComponentProps) {
+ return ) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+
+
+ )
+}
+
+function DropdownMenuGroup({
+ ...props
+}: React.ComponentProps) {
+ return (
+ & {
+ inset?: boolean
+ variant?: "default" | "destructive"
+}) {
+ return (
+ ) {
+ return (
+
+
+
+
+
+ {children}
+
+ )
+}
+
+function DropdownMenuRadioGroup({
+ ...props
+}: React.ComponentProps) {
+ return (
+ ) {
+ return (
+
+
+
+
+
+ {children}
+
+ )
+}
+
+function DropdownMenuLabel({
+ className,
+ inset,
+ ...props
+}: React.ComponentProps & {
+ inset?: boolean
+}) {
+ return (
+ ) {
+ return (
+ ) {
+ return & {
+ inset?: boolean
+}) {
+ return (
+
+ {children}
+
+ )
+}
+
+function DropdownMenuSubContent({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+
+
+ {children}
+
+
+ )
+}
+
+function ScrollBar({
+ className,
+ orientation = "vertical",
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+ )
+}
+
+export { ScrollArea, ScrollBar }
diff --git a/concord-client/src/components/ui/sonner.tsx b/concord-client/src/components/ui/sonner.tsx
new file mode 100644
index 0000000..cd62aff
--- /dev/null
+++ b/concord-client/src/components/ui/sonner.tsx
@@ -0,0 +1,23 @@
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+ const { theme = "system" } = useTheme()
+
+ return (
+ ) {
+ return (
+ ) {
+ return (
+
+
+ )
+}
+
+function TooltipTrigger({
+ ...props
+}: React.ComponentProps) {
+ return ) {
+ return (
+
+
+ {children}
+
+
+ )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/concord-client/src/hooks/useChannel.ts b/concord-client/src/hooks/useChannel.ts
new file mode 100644
index 0000000..cb0d201
--- /dev/null
+++ b/concord-client/src/hooks/useChannel.ts
@@ -0,0 +1,72 @@
+// src/hooks/useChannels.ts
+import { useQuery } from "@tanstack/react-query";
+import { CategoryWithChannels } from "@/types/api";
+
+// Placeholder hook for channels by instance
+export const useChannels = (instanceId?: string) => {
+ return useQuery({
+ queryKey: ["channels", instanceId],
+ queryFn: async (): Promise => {
+ if (!instanceId || instanceId === "@me") return [];
+
+ // TODO: Replace with actual API call
+ return [
+ {
+ id: "1",
+ name: "Text Channels",
+ instanceId: instanceId,
+ position: 0,
+ createdAt: new Date().toISOString(),
+ updatedAt: new Date().toISOString(),
+ channels: [
+ {
+ id: "1",
+ name: "general",
+ type: "text",
+ categoryId: "1",
+ instanceId: instanceId,
+ position: 0,
+ topic: "General discussion",
+ createdAt: new Date().toISOString(),
+ updatedAt: new Date().toISOString(),
+ },
+ {
+ id: "2",
+ name: "random",
+ type: "text",
+ categoryId: "1",
+ instanceId: instanceId,
+ position: 1,
+ topic: "Random chat",
+ createdAt: new Date().toISOString(),
+ updatedAt: new Date().toISOString(),
+ },
+ ],
+ },
+ {
+ id: "2",
+ name: "Voice Channels",
+ instanceId: instanceId,
+ position: 1,
+ createdAt: new Date().toISOString(),
+ updatedAt: new Date().toISOString(),
+ channels: [
+ {
+ id: "3",
+ name: "General",
+ type: "voice",
+ categoryId: "2",
+ instanceId: instanceId,
+ position: 0,
+ topic: "",
+ createdAt: new Date().toISOString(),
+ updatedAt: new Date().toISOString(),
+ },
+ ],
+ },
+ ];
+ },
+ enabled: !!instanceId && instanceId !== "@me",
+ staleTime: 1000 * 60 * 5, // 5 minutes
+ });
+};
diff --git a/concord-client/src/hooks/useResponsive.ts b/concord-client/src/hooks/useResponsive.ts
new file mode 100644
index 0000000..56b995f
--- /dev/null
+++ b/concord-client/src/hooks/useResponsive.ts
@@ -0,0 +1,32 @@
+import { useEffect } from "react";
+import { useUiStore } from "@/stores/uiStore";
+
+export const useResponsive = () => {
+ const { screenWidth, isMobile, setScreenWidth, updateIsMobile } =
+ useUiStore();
+
+ useEffect(() => {
+ const handleResize = () => {
+ const width = window.innerWidth;
+ setScreenWidth(width);
+ updateIsMobile();
+ };
+
+ // Set initial values
+ handleResize();
+
+ // Add event listener
+ window.addEventListener("resize", handleResize);
+
+ // Cleanup
+ return () => window.removeEventListener("resize", handleResize);
+ }, [setScreenWidth, updateIsMobile]);
+
+ return {
+ screenWidth,
+ isMobile,
+ isTablet: screenWidth >= 768 && screenWidth < 1024,
+ isDesktop: screenWidth >= 1024,
+ isLargeDesktop: screenWidth >= 1280,
+ };
+};
diff --git a/concord-client/src/hooks/useServers.ts b/concord-client/src/hooks/useServers.ts
new file mode 100644
index 0000000..932c612
--- /dev/null
+++ b/concord-client/src/hooks/useServers.ts
@@ -0,0 +1,78 @@
+import { useQuery } from "@tanstack/react-query";
+import { Instance, InstanceWithDetails, UserWithRoles } from "@/types/api";
+
+// Placeholder hook for servers/instances
+export const useServers = () => {
+ return useQuery({
+ queryKey: ["servers"],
+ queryFn: async (): Promise => {
+ // TODO: Replace with actual API call
+ return [
+ {
+ id: "1",
+ name: "My Server",
+ icon: null,
+ description: "A cool server",
+ createdAt: new Date().toISOString(),
+ updatedAt: new Date().toISOString(),
+ },
+ ];
+ },
+ staleTime: 1000 * 60 * 5, // 5 minutes
+ });
+};
+
+// Placeholder hook for instance details
+export const useInstanceDetails = (instanceId?: string) => {
+ return useQuery({
+ queryKey: ["instance", instanceId],
+ queryFn: async (): Promise => {
+ if (!instanceId || instanceId === "@me") return null;
+
+ // TODO: Replace with actual API call
+ return {
+ id: instanceId,
+ name: "My Server",
+ icon: null,
+ description: "A cool server",
+ createdAt: new Date().toISOString(),
+ updatedAt: new Date().toISOString(),
+ categories: [],
+ memberCount: 1,
+ roles: [],
+ };
+ },
+ enabled: !!instanceId && instanceId !== "@me",
+ staleTime: 1000 * 60 * 5,
+ });
+};
+
+// Placeholder hook for instance members
+export const useInstanceMembers = (instanceId?: string) => {
+ return useQuery({
+ queryKey: ["instance", instanceId, "members"],
+ queryFn: async (): Promise => {
+ if (!instanceId || instanceId === "@me") return [];
+
+ // TODO: Replace with actual API call
+ return [
+ {
+ id: "1",
+ username: "testuser",
+ nickname: "Test User",
+ bio: "Just testing",
+ picture: null,
+ banner: null,
+ hashPassword: "",
+ algorithms: "{}",
+ status: "online",
+ createdAt: new Date().toISOString(),
+ updatedAt: new Date().toISOString(),
+ roles: [],
+ },
+ ];
+ },
+ enabled: !!instanceId && instanceId !== "@me",
+ staleTime: 1000 * 60 * 2, // 2 minutes (members change more frequently)
+ });
+};
diff --git a/concord-client/src/index.css b/concord-client/src/index.css
index 00a7a3c..f4c1e9b 100644
--- a/concord-client/src/index.css
+++ b/concord-client/src/index.css
@@ -1,68 +1,120 @@
-:root {
- font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
- line-height: 1.5;
- font-weight: 400;
-
- color-scheme: light dark;
- color: rgba(255, 255, 255, 0.87);
- background-color: #242424;
-
- font-synthesis: none;
- text-rendering: optimizeLegibility;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-a {
- font-weight: 500;
- color: #646cff;
- text-decoration: inherit;
-}
-a:hover {
- color: #535bf2;
-}
-
-body {
- margin: 0;
- display: flex;
- place-items: center;
- min-width: 320px;
- min-height: 100vh;
-}
-
-h1 {
- font-size: 3.2em;
- line-height: 1.1;
-}
-
-button {
- border-radius: 8px;
- border: 1px solid transparent;
- padding: 0.6em 1.2em;
- font-size: 1em;
- font-weight: 500;
- font-family: inherit;
- background-color: #1a1a1a;
- cursor: pointer;
- transition: border-color 0.25s;
-}
-button:hover {
- border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
- outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
- :root {
- color: #213547;
- background-color: #ffffff;
- }
- a:hover {
- color: #747bff;
- }
- button {
- background-color: #f9f9f9;
- }
-}
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+ --radius-sm: calc(var(--radius) - 4px);
+ --radius-md: calc(var(--radius) - 2px);
+ --radius-lg: var(--radius);
+ --radius-xl: calc(var(--radius) + 4px);
+ --color-background: var(--background);
+ --color-foreground: var(--foreground);
+ --color-card: var(--card);
+ --color-card-foreground: var(--card-foreground);
+ --color-popover: var(--popover);
+ --color-popover-foreground: var(--popover-foreground);
+ --color-primary: var(--primary);
+ --color-primary-foreground: var(--primary-foreground);
+ --color-secondary: var(--secondary);
+ --color-secondary-foreground: var(--secondary-foreground);
+ --color-muted: var(--muted);
+ --color-muted-foreground: var(--muted-foreground);
+ --color-accent: var(--accent);
+ --color-accent-foreground: var(--accent-foreground);
+ --color-destructive: var(--destructive);
+ --color-border: var(--border);
+ --color-input: var(--input);
+ --color-ring: var(--ring);
+ --color-chart-1: var(--chart-1);
+ --color-chart-2: var(--chart-2);
+ --color-chart-3: var(--chart-3);
+ --color-chart-4: var(--chart-4);
+ --color-chart-5: var(--chart-5);
+ --color-sidebar: var(--sidebar);
+ --color-sidebar-foreground: var(--sidebar-foreground);
+ --color-sidebar-primary: var(--sidebar-primary);
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+ --color-sidebar-accent: var(--sidebar-accent);
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+ --color-sidebar-border: var(--sidebar-border);
+ --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+ --radius: 0.625rem;
+ --background: oklch(1 0 0);
+ --foreground: oklch(0.145 0 0);
+ --card: oklch(1 0 0);
+ --card-foreground: oklch(0.145 0 0);
+ --popover: oklch(1 0 0);
+ --popover-foreground: oklch(0.145 0 0);
+ --primary: oklch(0.205 0 0);
+ --primary-foreground: oklch(0.985 0 0);
+ --secondary: oklch(0.97 0 0);
+ --secondary-foreground: oklch(0.205 0 0);
+ --muted: oklch(0.97 0 0);
+ --muted-foreground: oklch(0.556 0 0);
+ --accent: oklch(0.97 0 0);
+ --accent-foreground: oklch(0.205 0 0);
+ --destructive: oklch(0.577 0.245 27.325);
+ --border: oklch(0.922 0 0);
+ --input: oklch(0.922 0 0);
+ --ring: oklch(0.708 0 0);
+ --chart-1: oklch(0.646 0.222 41.116);
+ --chart-2: oklch(0.6 0.118 184.704);
+ --chart-3: oklch(0.398 0.07 227.392);
+ --chart-4: oklch(0.828 0.189 84.429);
+ --chart-5: oklch(0.769 0.188 70.08);
+ --sidebar: oklch(0.985 0 0);
+ --sidebar-foreground: oklch(0.145 0 0);
+ --sidebar-primary: oklch(0.205 0 0);
+ --sidebar-primary-foreground: oklch(0.985 0 0);
+ --sidebar-accent: oklch(0.97 0 0);
+ --sidebar-accent-foreground: oklch(0.205 0 0);
+ --sidebar-border: oklch(0.922 0 0);
+ --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+ --background: oklch(0.145 0 0);
+ --foreground: oklch(0.985 0 0);
+ --card: oklch(0.205 0 0);
+ --card-foreground: oklch(0.985 0 0);
+ --popover: oklch(0.205 0 0);
+ --popover-foreground: oklch(0.985 0 0);
+ --primary: oklch(0.922 0 0);
+ --primary-foreground: oklch(0.205 0 0);
+ --secondary: oklch(0.269 0 0);
+ --secondary-foreground: oklch(0.985 0 0);
+ --muted: oklch(0.269 0 0);
+ --muted-foreground: oklch(0.708 0 0);
+ --accent: oklch(0.269 0 0);
+ --accent-foreground: oklch(0.985 0 0);
+ --destructive: oklch(0.704 0.191 22.216);
+ --border: oklch(1 0 0 / 10%);
+ --input: oklch(1 0 0 / 15%);
+ --ring: oklch(0.556 0 0);
+ --chart-1: oklch(0.488 0.243 264.376);
+ --chart-2: oklch(0.696 0.17 162.48);
+ --chart-3: oklch(0.769 0.188 70.08);
+ --chart-4: oklch(0.627 0.265 303.9);
+ --chart-5: oklch(0.645 0.246 16.439);
+ --sidebar: oklch(0.205 0 0);
+ --sidebar-foreground: oklch(0.985 0 0);
+ --sidebar-primary: oklch(0.488 0.243 264.376);
+ --sidebar-primary-foreground: oklch(0.985 0 0);
+ --sidebar-accent: oklch(0.269 0 0);
+ --sidebar-accent-foreground: oklch(0.985 0 0);
+ --sidebar-border: oklch(1 0 0 / 10%);
+ --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+ * {
+ @apply border-border outline-ring/50;
+ }
+ body {
+ @apply bg-background text-foreground;
+ }
+}
diff --git a/concord-client/src/lib/utils.ts b/concord-client/src/lib/utils.ts
new file mode 100644
index 0000000..bd0c391
--- /dev/null
+++ b/concord-client/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs))
+}
diff --git a/concord-client/src/pages/ChatPage.tsx b/concord-client/src/pages/ChatPage.tsx
new file mode 100644
index 0000000..26e2341
--- /dev/null
+++ b/concord-client/src/pages/ChatPage.tsx
@@ -0,0 +1,192 @@
+import React from "react";
+import { useParams } from "react-router";
+import { Hash, Volume2, Users, HelpCircle, Inbox, Pin } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { useInstanceDetails } from "@/hooks/useServers";
+import { useChannels } from "@/hooks/useChannel";
+import { useUiStore } from "@/stores/uiStore";
+
+const ChatPage: React.FC = () => {
+ const { instanceId, channelId } = useParams();
+ const { instance } = useInstanceDetails(instanceId);
+ const { categories } = useChannels(instanceId);
+ const { toggleMemberList, showMemberList } = useUiStore();
+
+ // Find current channel
+ const currentChannel = categories
+ ?.flatMap((cat) => cat.channels)
+ ?.find((ch) => ch.id === channelId);
+
+ // Handle Direct Messages view
+ // if (!instanceId || instanceId === '@me') {
+ // return (
+ //
+ // {/* DM Header */}
+ //
+ //
+ // Direct Messages
+ //
+ //
+ //
+ //
+ //
+ //
+
+ // {/* DM Content */}
+ //
+ //
+ //
+ //
+ //
No Direct Messages
+ //
+ // When someone sends you a direct message, it will show up here.
+ //
+ //
+ //
+ //
+
+
Channel not found
+
+ The channel you're looking for doesn't exist or you don't have
+ access to it.
+
+
+
+
+
+
+
+ Welcome to {instance.name}!
+
+
+ {firstChannel
+ ? `Select a channel from the sidebar to start chatting, or head to #${firstChannel.name} to get started.`
+ : "This server doesn't have any channels yet. Create one to get started!"}
+
+
+
+ {/* Channel Header */}
+
+
+
+
+ {currentChannel?.name}
+
+ {currentChannel?.topic && (
+ <>
+
+
+ {currentChannel.topic}
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Chat Content */}
+
+ {/* Messages Area */}
+
+
+ {/* Welcome Message */}
+
+
+
+
+
+
+ Welcome to #{currentChannel?.name}!
+
+
+ This is the start of the #{currentChannel?.name} channel.
+
+
+
+ {currentChannel?.topic && (
+
+ Topic: {currentChannel.topic}
+
+ )}
+
+
+ {/* Placeholder messages */}
+
+
No messages yet. Start the conversation!
+
+
+
+
+ {/* Message Input */}
+
+
+
+
+
+ {/* Emoji picker, file upload, etc. would go here */}
+
Press Enter to send
+
+
+
+
+
+
+
+
+
+ Welcome back!
+
+
+ We're so excited to see you again!
+
+
+
+
+
+
+
+
+
Settings
+
User settings will go here
+
+
) => void;
+ logout: () => void;
+ setLoading: (loading: boolean) => void;
+}
+
+export const useAuthStore = create()(
+ persist(
+ (set, get) => ({
+ user: null,
+ token: null,
+ refreshToken: null,
+ isAuthenticated: false,
+ isLoading: false,
+
+ setAuth: (user, token, refreshToken) =>
+ set({
+ user,
+ token,
+ refreshToken,
+ isAuthenticated: true,
+ isLoading: false,
+ }),
+
+ updateUser: (userData) =>
+ set((state) => ({
+ user: state.user ? { ...state.user, ...userData } : null,
+ })),
+
+ logout: () =>
+ set({
+ user: null,
+ token: null,
+ refreshToken: null,
+ isAuthenticated: false,
+ isLoading: false,
+ }),
+
+ setLoading: (isLoading) => set({ isLoading }),
+ }),
+ {
+ name: "concord-auth-store",
+ // Persist auth data
+ partialize: (state) => ({
+ user: state.user,
+ token: state.token,
+ refreshToken: state.refreshToken,
+ isAuthenticated: state.isAuthenticated,
+ }),
+ },
+ ),
+);
+
+export const useCurrentUser = () => useAuthStore((state) => state.user);
+export const useIsAuthenticated = () =>
+ useAuthStore((state) => state.isAuthenticated);
+export const useAuthToken = () => useAuthStore((state) => state.token);
diff --git a/concord-client/src/stores/uiStore.ts b/concord-client/src/stores/uiStore.ts
new file mode 100644
index 0000000..aac2b36
--- /dev/null
+++ b/concord-client/src/stores/uiStore.ts
@@ -0,0 +1,138 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+interface UiState {
+ // Sidebar states
+ showMemberList: boolean;
+ sidebarCollapsed: boolean;
+
+ // Responsive
+ isMobile: boolean;
+ screenWidth: number;
+
+ // Theme
+ theme: "dark" | "light";
+
+ // Modal states
+ showUserSettings: boolean;
+ showServerSettings: boolean;
+ showCreateChannel: boolean;
+ showCreateServer: boolean;
+ showInviteModal: boolean;
+
+ // Chat states
+ // isTyping: boolean;
+ // typingUsers: string[];
+
+ // Navigation
+ activeChannelId: string | null;
+ activeInstanceId: string | null;
+
+ // Actions
+ toggleMemberList: () => void;
+ toggleSidebar: () => void;
+ setTheme: (theme: "dark" | "light") => void;
+ setScreenWidth: (width: number) => void;
+ updateIsMobile: () => void;
+
+ // Modal actions
+ openUserSettings: () => void;
+ closeUserSettings: () => void;
+ openServerSettings: () => void;
+ closeServerSettings: () => void;
+ openCreateChannel: () => void;
+ closeCreateChannel: () => void;
+ openCreateServer: () => void;
+ closeCreateServer: () => void;
+ openInviteModal: () => void;
+ closeInviteModal: () => void;
+
+ // Chat actions
+ // setTyping: (isTyping: boolean) => void;
+ // addTypingUser: (userId: string) => void;
+ // removeTypingUser: (userId: string) => void;
+ // clearTypingUsers: () => void;
+
+ // Navigation actions
+ setActiveChannel: (channelId: string | null) => void;
+ setActiveInstance: (instanceId: string | null) => void;
+}
+
+export const useUiStore = create()(
+ persist(
+ (set, get) => ({
+ // Initial state
+ showMemberList: true,
+ sidebarCollapsed: false,
+ isMobile: typeof window !== "undefined" ? window.innerWidth < 768 : false,
+ screenWidth: typeof window !== "undefined" ? window.innerWidth : 1024,
+ theme: "dark",
+ showUserSettings: false,
+ showServerSettings: false,
+ showCreateChannel: false,
+ showCreateServer: false,
+ showInviteModal: false,
+ isTyping: false,
+ typingUsers: [],
+ activeChannelId: null,
+ activeInstanceId: null,
+
+ // Sidebar actions
+ toggleMemberList: () =>
+ set((state) => ({ showMemberList: !state.showMemberList })),
+ toggleSidebar: () =>
+ set((state) => ({ sidebarCollapsed: !state.sidebarCollapsed })),
+ setTheme: (theme) => set({ theme }),
+ setScreenWidth: (screenWidth) => set({ screenWidth }),
+ updateIsMobile: () =>
+ set((state) => ({
+ isMobile: state.screenWidth < 768,
+ // Auto-collapse sidebar on mobile
+ sidebarCollapsed:
+ state.screenWidth < 768 ? true : state.sidebarCollapsed,
+ // Hide member list on small screens
+ showMemberList:
+ state.screenWidth < 1024 ? false : state.showMemberList,
+ })),
+
+ // Modal actions
+ openUserSettings: () => set({ showUserSettings: true }),
+ closeUserSettings: () => set({ showUserSettings: false }),
+ openServerSettings: () => set({ showServerSettings: true }),
+ closeServerSettings: () => set({ showServerSettings: false }),
+ openCreateChannel: () => set({ showCreateChannel: true }),
+ closeCreateChannel: () => set({ showCreateChannel: false }),
+ openCreateServer: () => set({ showCreateServer: true }),
+ closeCreateServer: () => set({ showCreateServer: false }),
+ openInviteModal: () => set({ showInviteModal: true }),
+ closeInviteModal: () => set({ showInviteModal: false }),
+
+ // Chat actions
+ // setTyping: (isTyping) => set({ isTyping }),
+ // addTypingUser: (userId) =>
+ // set((state) => ({
+ // typingUsers: state.typingUsers.includes(userId)
+ // ? state.typingUsers
+ // : [...state.typingUsers, userId],
+ // })),
+ // removeTypingUser: (userId) =>
+ // set((state) => ({
+ // typingUsers: state.typingUsers.filter((id) => id !== userId),
+ // })),
+ // clearTypingUsers: () => set({ typingUsers: [] }),
+
+ // Navigation actions
+ setActiveChannel: (channelId) => set({ activeChannelId: channelId }),
+ setActiveInstance: (instanceId) => set({ activeInstanceId: instanceId }),
+ }),
+ {
+ name: "concord-ui-store",
+ // Only persist UI preferences, not temporary states
+ partialize: (state) => ({
+ showMemberList: state.showMemberList,
+ sidebarCollapsed: state.sidebarCollapsed,
+ theme: state.theme,
+ }),
+ },
+ ),
+);
diff --git a/concord-client/src/types/api.ts b/concord-client/src/types/api.ts
new file mode 100644
index 0000000..068114f
--- /dev/null
+++ b/concord-client/src/types/api.ts
@@ -0,0 +1,91 @@
+import { Instance, Category, Channel, User, Role, Message } from "./database";
+
+// API Response wrappers
+export interface ApiResponse {
+ data: T;
+ success: boolean;
+ message?: string;
+}
+
+export interface PaginatedResponse {
+ data: T[];
+ pagination: {
+ page: number;
+ limit: number;
+ total: number;
+ totalPages: number;
+ hasNext: boolean;
+ hasPrev: boolean;
+ };
+}
+
+// Extended types with relations for frontend use
+export interface ChannelWithCategory extends Channel {
+ category: Category;
+}
+
+export interface CategoryWithChannels extends Category {
+ channels: Channel[];
+}
+
+export interface InstanceWithDetails extends Instance {
+ categories: CategoryWithChannels[];
+ memberCount: number;
+ roles: Role[];
+}
+
+export interface MessageWithUser extends Message {
+ user: User;
+}
+
+export interface UserWithRoles extends User {
+ roles: Role[];
+}
+
+// Request types
+export interface CreateInstanceRequest {
+ name: string;
+ description?: string;
+ icon?: string;
+}
+
+export interface CreateCategoryRequest {
+ name: string;
+ instanceId: string;
+ position?: number;
+}
+
+export interface CreateChannelRequest {
+ name: string;
+ type: "text" | "voice";
+ categoryId: string;
+ topic?: string;
+ position?: number;
+}
+
+export interface SendMessageRequest {
+ content: string;
+ channelId: string;
+ user: User;
+}
+
+export interface UpdateMessageRequest {
+ content: string;
+}
+
+export interface LoginRequest {
+ username: string;
+ password: string;
+}
+
+export interface RegisterRequest {
+ username: string;
+ password: string;
+ email?: string;
+}
+
+export interface AuthResponse {
+ user: User;
+ token: string;
+ refreshToken: string;
+}
diff --git a/concord-client/src/types/database.ts b/concord-client/src/types/database.ts
new file mode 100644
index 0000000..f69fcd0
--- /dev/null
+++ b/concord-client/src/types/database.ts
@@ -0,0 +1,93 @@
+export interface Instance {
+ id: string;
+ name: string;
+ icon?: string;
+ description?: string;
+ createdAt: string;
+ updatedAt: string;
+}
+
+export interface Category {
+ id: string;
+ name: string;
+ instanceId: string;
+ position: number;
+ createdAt: string;
+ updatedAt: string;
+}
+
+export interface Channel {
+ id: string;
+ name: string;
+ type: "text" | "voice";
+ categoryId: string;
+ instanceId: string;
+ position: number;
+ topic?: string;
+ createdAt: string;
+ updatedAt: string;
+}
+
+export interface User {
+ id: string;
+ username: string;
+ nickname?: string;
+ bio?: string;
+ picture?: string;
+ banner?: string;
+ hashPassword: string; // Won't be sent to client
+ admin: boolean;
+ status: "online" | "away" | "busy" | "offline";
+ createdAt: string;
+ updatedAt: string;
+}
+
+export interface Role {
+ id: string;
+ name: string;
+ color?: string;
+ permissions: string; // JSON string of permissions
+ instanceId: string;
+ position: number;
+ createdAt: string;
+ updatedAt: string;
+}
+
+export interface Message {
+ id: string;
+ content: string;
+ channelId: string;
+ userId: string;
+ edited: boolean;
+ createdAt: string;
+ updatedAt: string;
+ // Relations
+ user?: User;
+ channel?: Channel;
+}
+
+// Direct messages
+// export interface DirectMessage {
+// id: string;
+// content: string;
+// senderId: string;
+// receiverId: string;
+// edited: boolean;
+// createdAt: string;
+// updatedAt: string;
+// // Relations
+// sender?: User;
+// receiver?: User;
+// }
+
+export interface UserRole {
+ userId: string;
+ roleId: string;
+ instanceId: string;
+}
+
+export interface UserInstance {
+ userId: string;
+ instanceId: string;
+ joinedAt: string;
+}
diff --git a/concord-client/tsconfig.json b/concord-client/tsconfig.json
index fd9b1c3..017ff67 100644
--- a/concord-client/tsconfig.json
+++ b/concord-client/tsconfig.json
@@ -1,25 +1,29 @@
-{
- "compilerOptions": {
- "target": "ES2020",
- "useDefineForClassFields": true,
- "lib": ["ES2020", "DOM", "DOM.Iterable"],
- "module": "ESNext",
- "skipLibCheck": true,
-
- /* Bundler mode */
- "moduleResolution": "bundler",
- "allowImportingTsExtensions": true,
- "resolveJsonModule": true,
- "isolatedModules": true,
- "noEmit": true,
- "jsx": "react-jsx",
-
- /* Linting */
- "strict": true,
- "noUnusedLocals": true,
- "noUnusedParameters": true,
- "noFallthroughCasesInSwitch": true
- },
- "include": ["src", "electron"],
- "references": [{ "path": "./tsconfig.node.json" }]
-}
+{
+ "compilerOptions": {
+ "target": "ES2020",
+ "useDefineForClassFields": true,
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["./src/*"],
+ },
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true,
+ },
+ "include": ["src", "electron"],
+ "references": [{ "path": "./tsconfig.node.json" }],
+}
diff --git a/concord-client/tsconfig.node.json b/concord-client/tsconfig.node.json
index b850582..efd3582 100644
--- a/concord-client/tsconfig.node.json
+++ b/concord-client/tsconfig.node.json
@@ -1,11 +1,15 @@
-{
- "compilerOptions": {
- "composite": true,
- "skipLibCheck": true,
- "module": "ESNext",
- "moduleResolution": "bundler",
- "allowSyntheticDefaultImports": true,
- "strict": true
- },
- "include": ["vite.config.ts"]
-}
+{
+ "compilerOptions": {
+ "composite": true,
+ "skipLibCheck": true,
+ "module": "ESNext",
+ "moduleResolution": "bundler",
+ "allowSyntheticDefaultImports": true,
+ "strict": true,
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["./src/*"]
+ }
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/concord-client/vite.config.ts b/concord-client/vite.config.ts
index 544a4b4..754f636 100644
--- a/concord-client/vite.config.ts
+++ b/concord-client/vite.config.ts
@@ -1,29 +1,37 @@
-import { defineConfig } from 'vite'
-import path from 'node:path'
-import electron from 'vite-plugin-electron/simple'
-import react from '@vitejs/plugin-react'
-
-// https://vitejs.dev/config/
-export default defineConfig({
+import { defineConfig } from "vite";
+import path from "path";
+import electron from "vite-plugin-electron/simple";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+
+// https://vitejs.dev/config/
+export default defineConfig({
plugins: [
react(),
electron({
main: {
// Shortcut of `build.lib.entry`.
- entry: 'electron/main.ts',
+ entry: "electron/main.ts",
},
preload: {
// Shortcut of `build.rollupOptions.input`.
// Preload scripts may contain Web assets, so use the `build.rollupOptions.input` instead `build.lib.entry`.
- input: path.join(__dirname, 'electron/preload.ts'),
+ input: path.join(__dirname, "electron/preload.ts"),
},
// Ployfill the Electron and Node.js API for Renderer process.
// If you want use Node.js in Renderer process, the `nodeIntegration` needs to be enabled in the Main process.
// See 👉 https://github.com/electron-vite/vite-plugin-electron-renderer
- renderer: process.env.NODE_ENV === 'test'
- // https://github.com/electron-vite/vite-plugin-electron-renderer/issues/78#issuecomment-2053600808
- ? undefined
- : {},
+ renderer:
+ process.env.NODE_ENV === "test"
+ ? // https://github.com/electron-vite/vite-plugin-electron-renderer/issues/78#issuecomment-2053600808
+ undefined
+ : {},
}),
+ tailwindcss(),
],
-})
+ resolve: {
+ alias: {
+ "@": path.resolve(__dirname, "./src"),
+ },
+ },
+});