133 lines
No EOL
4.2 KiB
TypeScript
133 lines
No EOL
4.2 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { cn } from "@/lib/utils";
|
|
import { useSidebarStore } from "@/lib/stores/sidebar-store";
|
|
import { ChatSectionHeader } from "./ChatSectionHeader";
|
|
import { ChatListRow } from "./ChatListRow";
|
|
import { usePathname } from "next/navigation";
|
|
|
|
export interface ChatSidebarProps {
|
|
favorites: any[];
|
|
channels: any[];
|
|
dms: any[];
|
|
}
|
|
|
|
export default function ChatSidebar({ favorites, channels, dms }: ChatSidebarProps) {
|
|
const pathname = usePathname();
|
|
const isChatRoute = pathname.startsWith("/") && pathname.includes("/chat/");
|
|
|
|
if (!isChatRoute) return null;
|
|
|
|
const [searchQuery, setSearchQuery] = useState("");
|
|
const [filter, setFilter] = useState("");
|
|
const expandedSections = useSidebarStore((state) => state.expandedSections);
|
|
const toggleSection = useSidebarStore((state) => state.toggleSection);
|
|
|
|
const filterItems = (items: any[], query: string) => {
|
|
if (!query) return items;
|
|
return items.filter(
|
|
(item) =>
|
|
item.label.toLowerCase().includes(query.toLowerCase()) ||
|
|
item.preview?.toLowerCase().includes(query.toLowerCase())
|
|
);
|
|
};
|
|
|
|
const filteredFavorites = filterItems(favorites, searchQuery);
|
|
const filteredChannels = filterItems(channels, searchQuery);
|
|
const filteredDms = filterItems(dms, searchQuery);
|
|
|
|
return (
|
|
<div className="chat-sidebar w-64 bg-background text-foreground h-full flex flex-col">
|
|
<div className="p-2 border-b border-sidebar-border">
|
|
<input
|
|
type="text"
|
|
placeholder="Search chats"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
className="w-full mb-2 p-2 border border-sidebar-rounded bg-background"
|
|
/>
|
|
<select
|
|
value={filter}
|
|
onChange={(e) => setFilter(e.target.value)}
|
|
className="w-full p-2 border border-sidebar-rounded bg-background"
|
|
>
|
|
<option value="">All</option>
|
|
<option value="unread">Unread</option>
|
|
<option value="favorites">Favorites</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-y-auto">
|
|
{/* Favorites Section */}
|
|
<ChatSectionHeader
|
|
title="Favorites"
|
|
isExpanded={expandedSections.favorites}
|
|
onToggle={() => toggleSection("favorites")}
|
|
onAdd={() => console.log("Add favorite")}
|
|
onMore={() => console.log("More favorites")}
|
|
/>
|
|
{expandedSections.favorites && (
|
|
<div className="px-2">
|
|
{filteredFavorites.map((item) => (
|
|
<ChatListRow
|
|
key={item.id}
|
|
label={item.label}
|
|
type={item.type}
|
|
id={item.id}
|
|
count={item.count}
|
|
preview={item.preview}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Channels Section */}
|
|
<ChatSectionHeader
|
|
title="Channels"
|
|
isExpanded={expandedSections.channels}
|
|
onToggle={() => toggleSection("channels")}
|
|
onAdd={() => console.log("Add channel")}
|
|
onMore={() => console.log("More channels")}
|
|
/>
|
|
{expandedSections.channels && (
|
|
<div className="px-2">
|
|
{filteredChannels.map((item) => (
|
|
<ChatListRow
|
|
key={item.id}
|
|
label={item.label}
|
|
type={item.type}
|
|
id={item.id}
|
|
count={item.count}
|
|
preview={item.preview}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* DMs Section */}
|
|
<ChatSectionHeader
|
|
title="DMs"
|
|
isExpanded={expandedSections.dms}
|
|
onToggle={() => toggleSection("dms")}
|
|
onAdd={() => console.log("Add DM")}
|
|
onMore={() => console.log("More DMs")}
|
|
/>
|
|
{expandedSections.dms && (
|
|
<div className="px-2">
|
|
{filteredDms.map((item) => (
|
|
<ChatListRow
|
|
key={item.id}
|
|
label={item.label}
|
|
type={item.type}
|
|
id={item.id}
|
|
count={item.count}
|
|
preview={item.preview}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |