feat: unread indicators + DM bug fixes + data-driven isDmChannel

- Fix stale message cache: add force param to loadMessages, clearAllMessages action
- Fix reload race condition: URL-based isDmChannel fallback before WS ready
- Add read_states DB table for persistent unread tracking
- Add channel_ack WS event (client→server→echo) with BigInt comparison
- Wire up unread state in chatStore (readStates, unreadChannels, ackChannel)
- Auto-ack channels on MessageList view (200ms debounced)
- Unread pill indicators on server icons in ServerSidebar
- Bold text + white dot on unread channels/DMs in ChannelSidebar
- Replace all showDms reads with data-driven isDmChannel() across 8 files
- Design system, UI polish, and component fixes from previous sessions
This commit is contained in:
Jannis Braun
2026-02-18 20:48:48 +01:00
parent 7168149d98
commit 435d12e5b8
50 changed files with 711 additions and 285 deletions
@@ -33,7 +33,7 @@ export function LoginPage() {
return (
<div className="min-h-screen flex items-center justify-center bg-discord-bg-tertiary">
<div className="w-full max-w-[480px] bg-discord-bg-primary rounded-md p-8 shadow-2xl">
<div className="w-full max-w-[480px] bg-discord-bg-surface rounded-md p-8 shadow-elevation-high">
<div className="text-center mb-6">
<h1 className="text-2xl font-bold text-discord-text-primary">Welcome back!</h1>
<p className="text-discord-text-muted mt-1">We're so excited to see you again!</p>
@@ -41,7 +41,7 @@ export function LoginPage() {
<form onSubmit={handleSubmit}>
{error && (
<div className="mb-4 p-3 bg-discord-red/10 border border-discord-red/30 rounded text-discord-red text-sm">
<div className="mb-4 p-3 bg-discord-red/10 border border-discord-red/30 rounded text-discord-text-danger text-sm">
{error}
</div>
)}
@@ -83,7 +83,7 @@ export function LoginPage() {
<p className="mt-3 text-sm text-discord-text-muted">
Need an account?{' '}
<Link to="/register" className="text-[#00aff4] hover:underline">
<Link to="/register" className="text-discord-text-link hover:underline">
Register
</Link>
</p>