From edd6c4416fed5de94aa207c028fdcdc4cbb57cbc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yusuf=20=C4=B0pek?= Date: Sat, 11 Oct 2025 20:19:45 +0300 Subject: [PATCH] docs: update the memory bank --- memory-bank/activeContext.md | 6 ++++++ memory-bank/progress.md | 6 ++++++ memory-bank/systemPatterns.md | 3 +++ memory-bank/techContext.md | 1 + 4 files changed, 16 insertions(+) diff --git a/memory-bank/activeContext.md b/memory-bank/activeContext.md index 027889f..faf4fb9 100644 --- a/memory-bank/activeContext.md +++ b/memory-bank/activeContext.md @@ -5,6 +5,8 @@ - **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 - **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 - 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. - **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. +- **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 1. Test with live YouTube stream to verify badge parsing and superchat detection diff --git a/memory-bank/progress.md b/memory-bank/progress.md index 5343959..d240cc3 100644 --- a/memory-bank/progress.md +++ b/memory-bank/progress.md @@ -19,6 +19,8 @@ - [x] Centered layout with gradient backgrounds and glass-morphism effects. - [x] Message count display and connection status. - [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. - [ ] 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] Ensure transparent background for OBS browser source. - [x] Display new member announcements on overlay. +- [x] Timezone-aware timestamp display on overlay. - [ ] Add entrance/exit animations for message transitions. - [ ] 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. - **✅ 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. +- **✅ 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 diff --git a/memory-bank/systemPatterns.md b/memory-bank/systemPatterns.md index 4ed9737..040add8 100644 --- a/memory-bank/systemPatterns.md +++ b/memory-bank/systemPatterns.md @@ -15,3 +15,6 @@ - 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. - 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. diff --git a/memory-bank/techContext.md b/memory-bank/techContext.md index b398353..ab276b9 100644 --- a/memory-bank/techContext.md +++ b/memory-bank/techContext.md @@ -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. - **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. +- **Timezone Handling:** Browser timezone detection via `Intl.DateTimeFormat().resolvedOptions().timeZone` with GMT+3 fallback for international users. ## Tooling & Commands - Single root `package.json`; `pnpm install` manages all deps.