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
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.
- 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°
- Add 'Show menu' / 'Hide menu' text next to chevron icon
- Uses text-text-muted and font-mono for consistency
- Improves button discoverability and clarity
- 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 explicit text-text-default class to icon and label
- Ensures consistent text color with TopNavigation tiles
- Improves readability and visual consistency
- 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
- Add safety check for extensionsList before calling filter
- Prevents test failure when extensionsList is undefined
- Returns '0 of 0 enabled' as fallback
- 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
- Remove unused setIsGoosehintsModalOpen parameter in AppLayout
- Add eslint-disable comments for insights and error in SessionsInsights
- Remove unused TabsList and TabsTrigger imports in SettingsView
- 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
spencrmartin