feat: implement pinned private messages with MONITOR support and UI improvements by ValwareIRC · Pull Request #81 · obbyworld/obby

ValwareIRC · 2025-10-11T06:12:40Z

🚀 Features

Pinned Private Messages with MONITOR Support

Full IRCv3 MONITOR protocol implementation (numerics 730-734)
Extended-monitor support for away-notify integration
Pinned PMs with localStorage persistence - survive page refreshes
Drag-and-drop reordering for pinned private message tabs
Auto-MONITOR users when PM tabs are opened
Status indicators (online/away/offline) on PM tabs with proper colors
Server-specific MONITOR lists (not global across servers)
Auto-cleanup of MONITOR entries when unpinned PMs are closed
Restore pinned PMs and MONITOR subscriptions on reconnect

UI Consistency and Typing Notifications

Improved typing notifications with 6-second auto-clear and 3-second rate limit
Consistent avatar sizing (24px) across channel and PM tabs
Enhanced member list styling to match PM tabs
Status prefix badges with distinct blue background
Better message spacing for improved readability
Darker gray hover background on chat messages

🐛 Bug Fixes

Duplicate Channel Handling

Case-insensitive channel operations to prevent duplicate channels
Auto-rename channels to match server canonical case

Mobile Layout Fixes

Mobile channel list width now spans available screen space (viewport width minus server list)
Prevent text overflow in channel names and UI elements with max-width constraints

Code Quality

Resolve all linting issues with proper TypeScript types
Remove useless React fragments and improve code structure
Fix optional chaining usage and type assertions

Spacing Optimizations

Tighter channel list layout with removed left margins
Consistent horizontal padding across channel and member lists
Optimized member list spacing for visual balance

📋 Implementation Details

MONITOR Protocol Support

Implements IRCv3 MONITOR specification for tracking user online status
Handles extended-monitor for away notifications
Server-specific MONITOR lists prevent cross-server conflicts

UI Improvements

Enhanced responsive design for mobile devices
Improved accessibility with proper ARIA labels and keyboard navigation
Consistent styling across all components

Performance Optimizations

Efficient MONITOR list management
Optimized re-rendering with proper React keys
Improved typing notification cleanup

🧪 Testing

All existing tests pass
New functionality covered by comprehensive test suite
Mobile responsiveness verified across different screen sizes

📚 Documentation

Added detailed implementation docs for MONITOR and extended-monitor
Updated bug fixes documentation
Comprehensive commit history with clear feature descriptions

Summary by CodeRabbit

New Features
- Pin/unpin private chats and drag-and-drop reorder them.
- Rich private chat header: avatar, online/away status, pin control, and quick access to user profile.
- User Profile modal now includes “PM User” action.
Improvements
- Member list shows display names, verified/bot badges, and clearer status/away indicators.
- More responsive typing indicators (faster update cadence).
- Enhanced channel and server notice rendering with clearer avatars and labels.
Style
- Updated hover color for messages and adjusted spacing for messages with headers.
- Tweaked sidebar width and channel list responsiveness.

…itor support Features: - Add pinned private messages with localStorage persistence - Implement drag-and-drop reordering for pinned PMs - Add full MONITOR protocol support (IRCv3) - Implement extended-monitor for away-notify integration - Add status indicators (online/away/offline) to PM tabs - Auto-MONITOR users when PM tabs are opened - Auto-cleanup MONITOR entries when unpinned PMs are closed - Restore pinned PMs and MONITOR subscriptions on reconnect - Server-specific MONITOR lists (not global) Bug Fixes: - Fix PM persistence through page refreshes - Add user avatar display in private message chat header - Fix status indicator colors based on WHO response (H=green, G=yellow) - Remove incorrect global METADATA UNSUB when closing PMs - Update private chat status from WHO_REPLY events - Handle WHO_END for individual users (not just channels) - Send WHO request when opening existing PM tabs - Update METADATA handler to refresh private chat state Implements IRCv3 MONITOR (730-734 numerics) and extended-monitor specs

- Fix typing notification cleanup on user disconnect (PART/KICK/QUIT) - Add 6-second auto-clear timer for typing notifications with reset on new activity - Update typing notification rate limit to 3 seconds - Make channel and PM tab avatars consistent size (24px when deselected) - Add darker gray hover background to chat messages - Improve member list styling to match PM tabs - Add status prefix badges with distinct blue background - Fix WHOX parsing to extract op levels from flags field - Update message spacing for better readability

- Remove useless React fragment in ChannelList.tsx - Replace explicit 'any' types with proper TypeScript types - Fix optional chain usage in store/index.ts - Replace non-null assertion with type assertion - Ensure all biome linting rules pass

- Remove left margins from channel tabs for tighter layout - Adjust channel list default width to compensate for removed margins - Apply consistent horizontal padding to both channel and member lists - Fine-tune member list spacing for optimal visual balance

- Make all IRC channel operations case-insensitive to prevent duplicates - Auto-rename channels to match server canonical case - Optimize UI spacing for channel and member lists

- Change mobile channel list width from fixed w-64 to calculated w-[calc(100vw-72px)] - This ensures the channel list spans the full available width minus the server list width on mobile - Prevents overflow while maximizing usable space for channel navigation

- Set mobile channel list width to w-[calc(100vw-72px)] to span available screen space - Add max-w-full classes to prevent text overflow in channel names and UI elements - Ensure proper responsive behavior on mobile devices

coderabbitai · 2025-10-11T06:12:48Z

Walkthrough

Adds private chat pinning, reordering, and richer metadata/UI across ChannelList, ChatHeader, and MemberList. Integrates IRC MONITOR, WHO/WHOX, and away handling in ircClient and store with persistence in localStorage. Adjusts typing throttle, layout widths, message hover color, and test expectations for display-name and status rendering.

Changes

Cohort / File(s)	Summary
Private chat UI & controls `src/components/layout/ChannelList.tsx`, `src/components/layout/ChatHeader.tsx`, `src/components/ui/UserProfileModal.tsx`	Adds pin/unpin, drag-reorder, richer private chat header (avatar/status/profile), and “PM User” action from profile modal. Uses new store actions, metadata lookups, and avatars with fallbacks.
Presence/typing/monitoring & state `src/lib/ircClient.ts`, `src/store/index.ts`, `src/hooks/useTypingNotification.ts`, `src/types/index.ts`	Implements IRC MONITOR, WHOX, RPL_AWAY parsing/events; store wiring for pins, reorders, presence/away, metadata enrichment, CHATHISTORY. Typing throttle 5s→3s. Expands types (User.realname, PrivateChat fields).
Member rendering & tests `src/components/layout/MemberList.tsx`, `tests/components/MetadataDisplay.test.tsx`	Renders display-name, verified/bot badges, avatar status overlays; updates tests for display-name usage, status text, and action message formatting.
Layout & styling tweaks `src/components/layout/AppLayout.tsx`, `src/components/message/MessageItem.tsx`, `tailwind.config.js`	Sidebar default width 240→264; ChannelList width responsive tweak; message hover color token updated; conditional message item padding based on header.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor U as User
  participant CL as ChannelList
  participant CH as ChatHeader
  participant ST as Store
  participant LS as localStorage
  participant IRC as ircClient

  rect rgba(230,245,255,0.6)
  note over U,ST: Pin/Unpin private chat
  U->>CL: Click pin/unpin on PM
  CL->>ST: pinPrivateChat/unpinPrivateChat(serverId, pmId)
  ST->>LS: Save pinned PMs
  ST->>IRC: monitorAdd/monitorRemove(target)
  ST-->>CL: State update (isPinned/order)
  ST-->>CH: Header pin state update
  end

sequenceDiagram
  autonumber
  actor U as User
  participant PM as UserProfileModal
  participant ST as Store
  participant IRC as ircClient

  rect rgba(235,255,235,0.6)
  note over U,ST: Open PM from profile
  U->>PM: Click "PM User"
  PM->>ST: openPrivateChat(serverId, username)
  ST->>IRC: CHATHISTORY LATEST (optional)
  ST->>IRC: monitorAdd(username)
  ST-->>PM: Close modal
  ST-->>U: Selects/creates PM view
  end

sequenceDiagram
  autonumber
  participant IRC as ircClient
  participant ST as Store
  participant UI as UI (ChannelList/MemberList/ChatHeader)

  rect rgba(255,245,230,0.6)
  note over IRC,ST: Presence & WHOX enrichment
  IRC-->>ST: WHOX_REPLY / WHO_REPLY (account, realname, flags, isAway)
  IRC-->>ST: MONONLINE / MONOFFLINE
  IRC-->>ST: RPL_AWAY (awayMessage)
  ST-->>UI: Update PM/channels (isOnline, isAway, realname, status)
  end

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~75 minutes

Possibly related PRs

Test Suite Fixes and UI Enhancements #70: Overlaps on private chat metadata, WHO/WHOX, monitoring, and UI changes in ChannelList/ChatHeader/store/types.
feat/keyup to history #78: Touches the same typing hook and ChatHeader; this PR adjusts the throttle and extends header behavior.
Add IRCv3 METADATA, including avatars, nick colors, display name and status message #64: Shares IRCv3 metadata integration across store, ircClient, and UI components for display-name/avatar/status.

Suggested reviewers

matheusfillipe

Poem

I pin my chats like carrots in a row,
WHOX winds whisper who is friend or foe.
Monitors blink—online, away, offline—
I thump the keys, a typing, tidy line.
In burrows of state, my data hops true—
Private paths paved, just for me and you. 🐇✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title clearly highlights the primary feature of pinned private messages with MONITOR support and notes additional UI improvements, accurately reflecting the main functionality introduced in the pull request. It is concise, specific, and directly related to the key changes without extraneous details.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch feature/pinned-pms-and-monitor

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

github-actions · 2025-10-11T06:13:41Z

Preview URL: https://feature-pinned-pms-and-monit.obsidianirc.pages.dev

Automated deployment preview for the PR in the Cloudflare Pages.

coderabbitai

Actionable comments posted: 6

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (2)

src/components/message/MessageItem.tsx (1)
113-124: Remove unreachable duplicate code block.

Lines 113-124 duplicate the exact same imageError handling from lines 100-111. Since the first block returns early, this second block is unreachable dead code.

Apply this diff to remove the duplicate:
-  if (imageError) {
-    // Fallback to showing expired badge
-    return (
-      <div className="max-w-md">
-        <div className="bg-gray-100 border border-gray-300 rounded-lg p-4 text-center">
-          <div className="inline-flex items-center px-3 py-1 rounded-full text-sm bg-red-100 text-red-800 border border-red-200">
-            <span>This image has expired</span>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
src/components/layout/ChatHeader.tsx (1)
3-330: Clear avatarLoadFailed when the avatar metadata changes.

After a single load failure, avatarLoadFailed stays true because we never reset it when new metadata arrives. Subsequent avatar updates (e.g., user sets a new image) remain hidden until a full reload. Import useEffect and depend on privateChatAvatar so the state clears on each avatar change.
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
@@
 const [avatarLoadFailed, setAvatarLoadFailed] = useState(false);
@@
 const privateChatAvatar = privateChatUserMetadata?.avatar?.value;
+
+useEffect(() => {
+  setAvatarLoadFailed(false);
+}, [privateChatAvatar]);

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 9801d3b and 730f3a6.

📒 Files selected for processing (17)

BUG_FIXES.md (1 hunks)
PINNED_PMS_AND_MONITOR.md (1 hunks)
ai_docs/extended-monitor.md (1 hunks)
ai_docs/metadata-2.md (1 hunks)
ai_docs/monitor.md (1 hunks)
src/components/layout/AppLayout.tsx (1 hunks)
src/components/layout/ChannelList.tsx (14 hunks)
src/components/layout/ChatHeader.tsx (5 hunks)
src/components/layout/MemberList.tsx (4 hunks)
src/components/message/MessageItem.tsx (1 hunks)
src/components/ui/UserProfileModal.tsx (4 hunks)
src/hooks/useTypingNotification.ts (2 hunks)
src/lib/ircClient.ts (8 hunks)
src/store/index.ts (39 hunks)
src/types/index.ts (2 hunks)
tailwind.config.js (1 hunks)
tests/components/MetadataDisplay.test.tsx (2 hunks)

🧰 Additional context used

🧬 Code graph analysis (6)

tests/components/MetadataDisplay.test.tsx (1)

src/components/layout/MemberList.tsx (1)

MemberList (205-523)

src/components/layout/MemberList.tsx (1)

src/lib/ircUtils.tsx (2)

getColorStyle (298-318)

mircToHtml (183-295)

src/components/layout/ChannelList.tsx (3)

src/store/index.ts (1)

loadSavedMetadata (113-115)

src/types/index.ts (2)

PrivateChat (72-87)

User (1-15)

src/lib/ircUtils.tsx (3)

getChannelAvatarUrl (339-354)

getChannelDisplayName (324-334)

mircToHtml (183-295)

src/lib/ircClient.ts (1)

src/types/index.ts (1)

BaseIRCEvent (187-189)

src/components/layout/ChatHeader.tsx (1)

src/store/index.ts (1)

loadSavedMetadata (113-115)

src/store/index.ts (3)

src/lib/ircClient.ts (1)

ircClient (2296-2296)

src/types/index.ts (3)

Message (94-146)

PrivateChat (72-87)

User (1-15)

src/lib/notificationSounds.ts (2)

shouldPlayNotificationSound (68-120)

playNotificationSound (6-65)

🪛 markdownlint-cli2 (0.18.1)

PINNED_PMS_AND_MONITOR.md

41-41: Fenced code blocks should have a language specified

(MD040, fenced-code-language)

ai_docs/metadata-2.md

271-271: Hard tabs
Column: 6

(MD010, no-hard-tabs)

272-272: Hard tabs
Column: 16

(MD010, no-hard-tabs)

273-273: Hard tabs
Column: 13

(MD010, no-hard-tabs)

274-274: Hard tabs
Column: 20

(MD010, no-hard-tabs)

275-275: Hard tabs
Column: 19

(MD010, no-hard-tabs)

276-276: Hard tabs
Column: 13

(MD010, no-hard-tabs)

277-277: Hard tabs
Column: 15

(MD010, no-hard-tabs)

278-278: Hard tabs
Column: 14

(MD010, no-hard-tabs)

279-279: Hard tabs
Column: 15

(MD010, no-hard-tabs)

280-280: Hard tabs
Column: 15

(MD010, no-hard-tabs)

283-283: Hard tabs
Column: 6

(MD010, no-hard-tabs)

283-283: Hard tabs
Column: 11

(MD010, no-hard-tabs)

283-283: Hard tabs
Column: 17

(MD010, no-hard-tabs)

283-283: Hard tabs
Column: 22

(MD010, no-hard-tabs)

283-283: Hard tabs
Column: 29

(MD010, no-hard-tabs)

283-283: Hard tabs
Column: 34

(MD010, no-hard-tabs)

283-283: Hard tabs
Column: 41

(MD010, no-hard-tabs)

283-283: Hard tabs
Column: 47

(MD010, no-hard-tabs)

283-283: Hard tabs
Column: 53

(MD010, no-hard-tabs)

284-284: Hard tabs
Column: 16

(MD010, no-hard-tabs)

284-284: Hard tabs
Column: 19

(MD010, no-hard-tabs)

284-284: Hard tabs
Column: 22

(MD010, no-hard-tabs)

284-284: Hard tabs
Column: 25

(MD010, no-hard-tabs)

284-284: Hard tabs
Column: 28

(MD010, no-hard-tabs)

284-284: Hard tabs
Column: 31

(MD010, no-hard-tabs)

284-284: Hard tabs
Column: 34

(MD010, no-hard-tabs)

284-284: Hard tabs
Column: 37

(MD010, no-hard-tabs)

284-284: Hard tabs
Column: 40

(MD010, no-hard-tabs)