S6: refactor UI to shadcn components, design system enforcement
- App: use Sheet for mobile sidebar (proper shadcn component) - ComposeBox: use ToggleGroup + Button + Input (no raw HTML) - Use Tailwind text scale (text-xs, text-sm) instead of arbitrary text-[10px] - Design system rule expanded with color palette, forbidden patterns Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,27 +1,28 @@
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import type { Channel } from "@/types/Channel";
|
||||
import type { Message } from "@/types/Message";
|
||||
import { getChannels, getMessages, getCurrentUsername } from "@/api";
|
||||
import { getChannels, getMessages } from "@/api";
|
||||
import { ChannelSidebar } from "@/components/ChannelSidebar";
|
||||
import { MessageItem } from "@/components/MessageItem";
|
||||
import { ComposeBox } from "@/components/ComposeBox";
|
||||
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
export default function App() {
|
||||
const [channels, setChannels] = useState<Channel[]>([]);
|
||||
const [activeChannelId, setActiveChannelId] = useState<string | null>(null);
|
||||
const [messages, setMessages] = useState<Message[]>([]);
|
||||
const [replyTo, setReplyTo] = useState<string | null>(null);
|
||||
const [sheetOpen, setSheetOpen] = useState(false);
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
const prevMsgCountRef = useRef(0);
|
||||
const activeChannelRef = useRef(activeChannelId);
|
||||
|
||||
// Keep ref in sync
|
||||
activeChannelRef.current = activeChannelId;
|
||||
|
||||
const loadChannels = useCallback(async () => {
|
||||
const chs = await getChannels();
|
||||
setChannels(chs);
|
||||
// Auto-select first channel only if none selected
|
||||
setActiveChannelId((prev) => (prev ? prev : chs[0]?.id ?? null));
|
||||
}, []);
|
||||
|
||||
@@ -30,7 +31,6 @@ export default function App() {
|
||||
if (!channelId) return;
|
||||
try {
|
||||
const msgs = await getMessages(channelId);
|
||||
// Only update if we're still on the same channel (prevent race)
|
||||
if (activeChannelRef.current === channelId) {
|
||||
setMessages(msgs);
|
||||
}
|
||||
@@ -39,20 +39,15 @@ export default function App() {
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Initial channel load
|
||||
useEffect(() => {
|
||||
loadChannels();
|
||||
}, [loadChannels]);
|
||||
useEffect(() => { loadChannels(); }, [loadChannels]);
|
||||
|
||||
// Load messages on channel switch
|
||||
useEffect(() => {
|
||||
setMessages([]); // Clear immediately on switch
|
||||
setMessages([]);
|
||||
setReplyTo(null);
|
||||
prevMsgCountRef.current = 0;
|
||||
loadMessages();
|
||||
}, [activeChannelId, loadMessages]);
|
||||
|
||||
// Auto-scroll only when NEW messages arrive (not on every poll)
|
||||
useEffect(() => {
|
||||
if (messages.length > prevMsgCountRef.current && scrollRef.current) {
|
||||
scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
|
||||
@@ -60,7 +55,6 @@ export default function App() {
|
||||
prevMsgCountRef.current = messages.length;
|
||||
}, [messages]);
|
||||
|
||||
// Poll until WebSocket (S5)
|
||||
useEffect(() => {
|
||||
const interval = setInterval(loadMessages, 3000);
|
||||
return () => clearInterval(interval);
|
||||
@@ -68,69 +62,63 @@ export default function App() {
|
||||
|
||||
const messagesById = new Map(messages.map((m) => [m.id, m]));
|
||||
const activeChannel = channels.find((c) => c.id === activeChannelId);
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
|
||||
const sidebar = (
|
||||
<ChannelSidebar
|
||||
channels={channels}
|
||||
activeId={activeChannelId}
|
||||
onSelect={(id) => {
|
||||
setActiveChannelId(id);
|
||||
setSheetOpen(false);
|
||||
}}
|
||||
onChannelCreated={loadChannels}
|
||||
/>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex h-full relative">
|
||||
{/* Mobile sidebar overlay */}
|
||||
{sidebarOpen && (
|
||||
<div
|
||||
className="fixed inset-0 bg-black/50 z-40 md:hidden"
|
||||
onClick={() => setSidebarOpen(false)}
|
||||
onKeyDown={() => {}}
|
||||
role="button"
|
||||
tabIndex={-1}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className={`${sidebarOpen ? "fixed inset-y-0 left-0 z-50" : "hidden"} md:relative md:block`}>
|
||||
<ChannelSidebar
|
||||
channels={channels}
|
||||
activeId={activeChannelId}
|
||||
onSelect={(id) => {
|
||||
setActiveChannelId(id);
|
||||
setSidebarOpen(false);
|
||||
}}
|
||||
onChannelCreated={loadChannels}
|
||||
/>
|
||||
<div className="flex h-full">
|
||||
{/* Desktop sidebar */}
|
||||
<div className="hidden md:block">
|
||||
{sidebar}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 flex flex-col min-w-0">
|
||||
{/* Channel header */}
|
||||
<div className="px-4 py-2 border-b border-border flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSidebarOpen(true)}
|
||||
className="md:hidden text-muted-foreground hover:text-foreground text-[14px] mr-1"
|
||||
>
|
||||
=
|
||||
</button>
|
||||
<div className="px-3 py-2 md:px-4 border-b border-border flex items-center gap-2">
|
||||
{/* Mobile: Sheet trigger */}
|
||||
<Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
|
||||
<SheetTrigger asChild>
|
||||
<Button variant="ghost" size="sm" className="md:hidden p-1 h-8 w-8 text-muted-foreground">
|
||||
=
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
<SheetContent side="left" className="p-0 w-64 bg-background">
|
||||
{sidebar}
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
|
||||
{activeChannel ? (
|
||||
<>
|
||||
<span className="text-muted-foreground">#</span>
|
||||
<span className="font-bold text-[14px]">
|
||||
{activeChannel.name}
|
||||
</span>
|
||||
<span className="font-bold text-sm">{activeChannel.name}</span>
|
||||
{activeChannel.description && (
|
||||
<span className="text-[11px] text-muted-foreground ml-2">
|
||||
<span className="text-xs text-muted-foreground ml-2 hidden md:inline">
|
||||
{activeChannel.description}
|
||||
</span>
|
||||
)}
|
||||
<span className="ml-auto text-[10px] text-muted-foreground tabular-nums">
|
||||
<span className="ml-auto text-xs text-muted-foreground tabular-nums">
|
||||
{messages.length} msg
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<span className="text-muted-foreground text-[12px]">
|
||||
select a channel
|
||||
</span>
|
||||
<span className="text-muted-foreground text-xs">select a channel</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Messages */}
|
||||
<div ref={scrollRef} className="flex-1 overflow-y-auto">
|
||||
{messages.length === 0 && activeChannelId && (
|
||||
<div className="flex items-center justify-center h-full text-muted-foreground text-[12px]">
|
||||
<div className="flex items-center justify-center h-full text-muted-foreground text-xs">
|
||||
no messages yet
|
||||
</div>
|
||||
)}
|
||||
@@ -138,15 +126,12 @@ export default function App() {
|
||||
<MessageItem
|
||||
key={msg.id}
|
||||
message={msg}
|
||||
replyTarget={
|
||||
msg.reply_to ? messagesById.get(msg.reply_to) : undefined
|
||||
}
|
||||
replyTarget={msg.reply_to ? messagesById.get(msg.reply_to) : undefined}
|
||||
onReply={setReplyTo}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Compose — key forces reset on channel switch */}
|
||||
{activeChannelId && (
|
||||
<ComposeBox
|
||||
key={activeChannelId}
|
||||
|
||||
Reference in New Issue
Block a user