feat: Add initial frontend components and their corresponding build assets, along with generated API types and configuration.

CLAUDE.md

@@ -14,7 +14,7 @@ See also: [CONVEX_RULES.md](./CONVEX_RULES.md) | [CONVEX_EXAMPLES.md](./CONVEX_E
 
 ## Key Convex Files (convex/)
 
-- `schema.ts` - Full schema: userProfiles (with avatarStorageId, aboutMe, customStatus), channels (with category, topic, position), messages, messageReactions, channelKeys, roles, userRoles, invites, dmParticipants, typingIndicators, voiceStates
+- `schema.ts` - Full schema: userProfiles (with avatarStorageId, aboutMe, customStatus), channels (with category, topic, position), messages, messageReactions, channelKeys, roles, userRoles, invites, dmParticipants, typingIndicators, voiceStates, channelReadState
 - `auth.ts` - getSalt, verifyUser, createUserWithProfile, getPublicKeys (includes avatarUrl, aboutMe, customStatus), updateProfile, updateStatus
 - `channels.ts` - list, get, create (with category/topic/position), rename, remove (cascade), updateTopic
 - `members.ts` - getChannelMembers (includes isHoist on roles, avatarUrl, aboutMe, customStatus)
@@ -29,6 +29,7 @@ See also: [CONVEX_RULES.md](./CONVEX_RULES.md) | [CONVEX_EXAMPLES.md](./CONVEX_E
 - `voice.ts` - getToken (Node action, livekit-server-sdk)
 - `files.ts` - generateUploadUrl, getFileUrl
 - `gifs.ts` - search, categories (Node actions, Tenor API)
+- `readState.ts` - getReadState, markRead, getAllReadStates, getLatestMessageTimestamps (unread tracking)
 
 ## Frontend Structure (Frontend/Electron/src/)
 
@@ -41,6 +42,7 @@ See also: [CONVEX_RULES.md](./CONVEX_RULES.md) | [CONVEX_EXAMPLES.md](./CONVEX_E
 - `contexts/VoiceContext.jsx` - Voice state via Convex + LiveKit room management
 - `components/ChannelSettingsModal.jsx` - Channel rename/delete via Convex mutations
 - `components/ServerSettingsModal.jsx` - Role management via Convex queries/mutations
+- `components/MessageItem.jsx` - Individual message rendering with unread divider support
 - `components/Avatar.jsx` - Reusable avatar component (image or colored-initial fallback)
 - `components/FriendsView.jsx` - User list via Convex query
 - `components/DMList.jsx` - DM user picker via Convex query
@@ -67,6 +69,7 @@ See also: [CONVEX_RULES.md](./CONVEX_RULES.md) | [CONVEX_EXAMPLES.md](./CONVEX_E
 - Chat header includes thread, pin, members, notification icons + channel topic
 - Voice connected panel includes elapsed time timer
 - Keyboard shortcuts: Ctrl+K (quick switcher), Ctrl+Shift+M (mute toggle)
+- Unread tracking: `channelReadState` table stores last-read timestamp per user/channel. ChatArea shows red "NEW" divider, Sidebar shows white dot on unread channels
 
 ## Environment Variables