Spence/chat2nav #5632
Draft
Spence/chat2nav #5632
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Replace sidebar navigation with expandable top navigation bar - Implement iOS-style dock with glass effect app icons (Plus, FileEdit, Globe, FileText) - Add dynamic data pills to navigation tiles (time, chat counts, sessions, etc.) - Create widget tiles: analog clock, activity heatmap, token counter - Redesign settings page with smaller tile-based navigation - Fix clock animation to prevent counter-clockwise rotation - Remove useSidebar dependencies from pair.tsx and BaseChat2.tsx - Adjust animation timing for smoother expand/collapse transitions - Ensure proper spacing and rounded corners throughout
- Add drag-and-drop functionality for tile reordering - Users can drag any tile to customize layout - Visual feedback with opacity, scale, and ring indicators - Grip handle icon appears on hover - Order persists during session - Add pulse animation on data updates - Tiles pulse with blue ring when data changes - 2-second animation provides visual feedback - Tracks previous values to detect changes - Fix clock animation precision - Recalculate angles from current time instead of incrementing - Eliminates time drift over long sessions - Optimize todayChatsCount calculation - Single-pass counting instead of double iteration - More efficient and cleaner code Technical changes: - Add unique id to NavItem interface - Add state management for drag-and-drop (draggedItem, dragOverItem, tileOrder) - Add state management for pulse animation (prevValues, pulsingItems) - Import GripVertical icon from lucide-react - Implement HTML5 drag-and-drop API handlers
- Import listSavedRecipes from recipe_management - Fetch actual recipe count instead of placeholder - Add error handling for recipe fetch - Recipes tile now shows correct count
- Remove unused setIsGoosehintsModalOpen parameter in AppLayout - Add eslint-disable comments for insights and error in SessionsInsights - Remove unused TabsList and TabsTrigger imports in SettingsView
- Rename insights and error to _insights and _error (TypeScript convention) - Remove documentTools.ts file that was causing type errors - This file was accidentally included and is unrelated to navigation work
- Disable exhaustive-deps for fetchNavigationData effect (intentional) - Disable exhaustive-deps for tileOrder initialization (runs once) - Disable exhaustive-deps for pulse animation effect (intentional)
- Remove temporary .md documentation files - Remove temporal-service binary - Remove verify_monaco.sh script - Keep only project-related .md files (README, CONTRIBUTING, etc.)
- Add safety check for extensionsList before calling filter - Prevents test failure when extensionsList is undefined - Returns '0 of 0 enabled' as fallback
…nimations - Add framer-motion dependency (^11.15.0) - Implement spring physics for drawer open/close animation - Stiffness: 300, Damping: 30, Mass: 0.8 for natural feel - Replaces inconsistent CSS transitions (700ms open, 1000ms close) - Add content slide animation with spring physics - Enhance tile entrance animations with spring and scale effects - 30ms stagger between tiles (reduced from 50ms) - Smooth fade-in with scale from 0.9 to 1.0 - Add interactive hover/tap animations on navigation buttons - whileHover: scale 1.02 - whileTap: scale 0.98 - Replace max-height animation with height: auto for better performance - Integrate drag state animations with spring physics Benefits: - Natural, organic animation feel with physics-based motion - Consistent timing for open and close (adaptive spring) - Better performance using GPU-accelerated transforms - Proper exit animations with AnimatePresence - Built-in reduced-motion support from framer-motion
- Cast drag events to React.DragEvent for motion.div components - Fixes TypeScript errors with framer-motion drag handlers - Resolves TS2345 type assignment errors
- Add explicit text-text-default class to icon and label - Ensures consistent text color with TopNavigation tiles - Improves readability and visual consistency
- Apply bg-background-accent and text-text-on-accent to active tiles - Matches primary button color scheme (Switch models button) - Update both TopNavigation and Settings tiles - Active state now clearly distinguishable with accent color - Description text uses text-on-accent/70 when active for contrast
- Add 'Show menu' / 'Hide menu' text next to chevron icon - Uses text-text-muted and font-mono for consistency - Improves button discoverability and clarity
- Remove pt-0.5 from inner motion.div container - Grid now sits flush at top with 0px padding - Maintains pb-0.5 for bottom spacing
- Track cumulative rotation for second hand - Detect when crossing from 59s to 0s and add 360° to rotation - Second hand now continuously rotates clockwise through 12 - Fixes counter-clockwise jump when transitioning from 354° to 0°
- Replace complex rotation tracking with simple increment - Second hand now increments by 6° each second: prev => prev + 6 - Continuously rotates forward: 0°, 6°, 12°... 354°, 360°, 366°... - CSS handles visual wrapping naturally (360° = 0°) - Eliminates counter-clockwise jump at 12 o'clock
- Remove unused 'seconds' variable declaration - Fixes TypeScript error TS6133 - Second hand increments independently without needing seconds value
Remove awkward 3 and 4 column layouts at sm/md breakpoints. Now maintains clean 2-column vertical layout until 1024px, then switches to 5-column horizontal layout. This eliminates layout shifts in the 930-1023px range that were affecting the bottom bar positioning.
In the 3-column responsive layout (640-1023px), the last tile now spans the full width while maintaining the same height as other tiles. - Last tile uses 3:1 aspect ratio (sm/md) instead of 1:1 (square) - Spans 3 columns in sm/md breakpoints, returns to 1 column in lg+ - Position-based logic works regardless of tile arrangement - Creates a featured, banner-like appearance for the 10th tile Layout progression: - < 640px: 2 cols, all square tiles - 640-1023px: 3 cols + full-width last tile (3:1 ratio) - ≥ 1024px: 5 cols, all square tiles
- Fix SSE stream abort issue by correcting cleanup effect dependencies - Add multi-chat tab system with status indicators (waiting/working/done/error) - Style chat tabs like navigation tiles with accent colors - Add smooth animations for drawer, tabs, and transitions - Fix analog clock second hand rotation - Add conditional macOS spacing for stoplight buttons - Implement session caching to preserve messages on tab switch - Fix ChatInput state management to prevent premature resets - Always show tab bar when sessions exist - Position New Chat button inline with tabs as icon-only - Add extensive debug logging for troubleshooting - Update spacing throughout UI (1px gaps, rounded corners)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary