docs: update the memory bank

This commit is contained in:
Yusuf İpek
2025-10-11 20:19:45 +03:00
parent d182a05b31
commit edd6c4416f
4 changed files with 16 additions and 0 deletions
+6
View File
@@ -5,6 +5,8 @@
- **Dark minimalist UI redesign**: Clean dashboard with dark theme (#0a0a0a background), tab-based navigation, grid layout, and minimal spacing - **Dark minimalist UI redesign**: Clean dashboard with dark theme (#0a0a0a background), tab-based navigation, grid layout, and minimal spacing
- **Connection flow**: Shows connection prompt on startup, disappears after connecting to YouTube Live stream - **Connection flow**: Shows connection prompt on startup, disappears after connecting to YouTube Live stream
- **Rich message parsing**: Full support for superchats, memberships, badges (moderator, member, verified) - **Rich message parsing**: Full support for superchats, memberships, badges (moderator, member, verified)
- **Timezone-aware timestamps**: All message timestamps display in user's local timezone with proper browser detection
- **Visual selection feedback**: Previously selected messages show dimmed state for better user experience
## Recent Decisions ## Recent Decisions
- Fixed CORS issues by setting headers on raw response object after `reply.hijack()` for SSE endpoint - Fixed CORS issues by setting headers on raw response object after `reply.hijack()` for SSE endpoint
@@ -18,6 +20,10 @@
- **Conditional Auto-Scroll**: Implemented intelligent auto-scrolling that only activates when the user is at the bottom of the chat, preventing interruptions when reading older messages. - **Conditional Auto-Scroll**: Implemented intelligent auto-scrolling that only activates when the user is at the bottom of the chat, preventing interruptions when reading older messages.
- **Overlay Redesign**: The overlay has been completely restyled to match the dashboard's compact, dark theme. It now displays new member announcements. - **Overlay Redesign**: The overlay has been completely restyled to match the dashboard's compact, dark theme. It now displays new member announcements.
- **Gifted Memberships**: The 'Memberships & Milestones' panel now correctly displays the user who purchased the gift, not the recipient. - **Gifted Memberships**: The 'Memberships & Milestones' panel now correctly displays the user who purchased the gift, not the recipient.
- **Timestamp Resolution Fixed**: Resolved critical issue where timestamps showed 1970 epoch time. Now uses `timestamp_usec` (microseconds) from YouTube data and converts properly to user's local timezone.
- **Timezone Support**: Implemented browser timezone detection and proper timestamp formatting across dashboard and overlay using `Intl.DateTimeFormat` with GMT+3 fallback.
- **Visual Selection States**: Added three-tier visual feedback system - active (selected), normal, and previously-selected (dimmed) states for better user experience.
- **UI Polish**: Fixed pulse animations on initial load, hidden N/A messages, and improved overlay timestamp display.
## Immediate Next Steps ## Immediate Next Steps
1. Test with live YouTube stream to verify badge parsing and superchat detection 1. Test with live YouTube stream to verify badge parsing and superchat detection
+6
View File
@@ -19,6 +19,8 @@
- [x] Centered layout with gradient backgrounds and glass-morphism effects. - [x] Centered layout with gradient backgrounds and glass-morphism effects.
- [x] Message count display and connection status. - [x] Message count display and connection status.
- [x] Conditional auto-scrolling for chat panels. - [x] Conditional auto-scrolling for chat panels.
- [x] Timezone-aware timestamp formatting for all messages.
- [x] Visual selection state management (active, normal, previously-selected).
- [ ] Add filters/search functionality. - [ ] Add filters/search functionality.
- [ ] Handle error states (rate limits, disconnects) gracefully in UI. - [ ] Handle error states (rate limits, disconnects) gracefully in UI.
@@ -27,6 +29,7 @@
- [x] Style overlay with modern design including avatars, badges, and superchat displays. - [x] Style overlay with modern design including avatars, badges, and superchat displays.
- [x] Ensure transparent background for OBS browser source. - [x] Ensure transparent background for OBS browser source.
- [x] Display new member announcements on overlay. - [x] Display new member announcements on overlay.
- [x] Timezone-aware timestamp display on overlay.
- [ ] Add entrance/exit animations for message transitions. - [ ] Add entrance/exit animations for message transitions.
- [ ] Add theme controls and customization options. - [ ] Add theme controls and customization options.
@@ -41,4 +44,7 @@
- **✅ Rich Parsing**: Moderators, members, verified users, superchats, and membership gifts all detected and displayed. Currency parsing is now more robust. - **✅ Rich Parsing**: Moderators, members, verified users, superchats, and membership gifts all detected and displayed. Currency parsing is now more robust.
- **✅ UI Polished**: The dashboard and overlay layouts have been refined for better spacing and alignment. The overlay now matches the dashboard's aesthetic. - **✅ UI Polished**: The dashboard and overlay layouts have been refined for better spacing and alignment. The overlay now matches the dashboard's aesthetic.
- **✅ Auto-Scroll Implemented**: Chat panels now auto-scroll intelligently. - **✅ Auto-Scroll Implemented**: Chat panels now auto-scroll intelligently.
- **✅ Timestamp Resolution Fixed**: Critical bug resolved - timestamps now display correct current time instead of 1970 epoch
- **✅ Timezone Support**: All timestamps display in user's local timezone with browser detection and GMT+3 fallback
- **✅ Visual Selection States**: Three-tier feedback system (active/normal/previously-selected) for better UX
- **Next**: Add search/filter, error recovery, and polish UX details - **Next**: Add search/filter, error recovery, and polish UX details
+3
View File
@@ -15,3 +15,6 @@
- Use shared TypeScript definitions via the `@shared` path alias to maintain type safety across backend and client. - Use shared TypeScript definitions via the `@shared` path alias to maintain type safety across backend and client.
- Centralized logging in the backend with structured payloads for easier debugging during long streams. - Centralized logging in the backend with structured payloads for easier debugging during long streams.
- Graceful degradation: backoff strategies for fetch failures and mock-data fallback keep the UI usable even without credentials. - Graceful degradation: backoff strategies for fetch failures and mock-data fallback keep the UI usable even without credentials.
- **Timezone Context Pattern**: React context provider (`TimezoneContext`) manages browser timezone detection and shares across components for consistent timestamp formatting.
- **Selection State Management**: Three-tier visual state system (active/selected, normal, previously-selected) with CSS class composition for clear user feedback.
- **Timestamp Resolution**: Backend uses `timestamp_usec` (microseconds) from YouTube data, converts to milliseconds, and frontend formats in user's local timezone.
+1
View File
@@ -5,6 +5,7 @@
- **Backend Worker:** Node.js service run with `tsx`, using `youtubei.js` for Innertube chat ingestion, `fastify` + `@fastify/cors` for REST/SSE transport, and `eventemitter3` for internal pub/sub. - **Backend Worker:** Node.js service run with `tsx`, using `youtubei.js` for Innertube chat ingestion, `fastify` + `@fastify/cors` for REST/SSE transport, and `eventemitter3` for internal pub/sub.
- **Shared Types:** Simple TypeScript module in `shared/chat.ts`, imported via the `@shared/*` path alias defined in `tsconfig.base.json`. - **Shared Types:** Simple TypeScript module in `shared/chat.ts`, imported via the `@shared/*` path alias defined in `tsconfig.base.json`.
- **Realtime:** Server-Sent Events for overlay updates; WebSockets remain a future enhancement option. - **Realtime:** Server-Sent Events for overlay updates; WebSockets remain a future enhancement option.
- **Timezone Handling:** Browser timezone detection via `Intl.DateTimeFormat().resolvedOptions().timeZone` with GMT+3 fallback for international users.
## Tooling & Commands ## Tooling & Commands
- Single root `package.json`; `pnpm install` manages all deps. - Single root `package.json`; `pnpm install` manages all deps.