diff --git a/.cursorrules b/.cursorrules index accdfdbf0..9b8e56e20 100644 --- a/.cursorrules +++ b/.cursorrules @@ -410,6 +410,34 @@ localStorage.getItem('selected-agent') - Duration: 0.6s with `easeInOut` easing - Provides clear visual feedback before selecting Morgan and populating input +### Pinned Agents Drawer +**Mobile (Bottom Sheet):** +- Appears as full-width bottom sheet on mobile +- Drag handle indicator at top +- Rounded top corners with semi-transparent dark background +- Smooth slide-up animation from bottom + +**Desktop (Side Drawer):** +- Slides out from under the main glass manuscript card to the right +- Positioned relative to manuscript panel, partially behind it +- Shorter height (slightly less than manuscript panel) +- Centered vertically on screen +- 40% less opacity than desktop UI baseline for subtle appearance +- Smooth slide animation with easeInOut timing + +**Card Features:** +- Minimalist design showing only name, handle, and start chat button +- Hover effects: description and button become visible on hover +- Smooth height expansion animation on hover (grid-based) +- Drag-and-drop reordering with visual feedback +- Dragged cards render above all other cards (z-index management) +- Delete button visible only on hover + +**Animation Details:** +- Entrance: 0.2s opacity fade-in + scale from left +- Exit: Slide deeper left with 0.28s opacity fade-out, easeIn timing +- Card content transitions smoothly between collapsed/expanded states + **Last Updated**: 2025-11-15 **Version**: 1.1 diff --git a/CLAUDE.md b/CLAUDE.md index 6319b08e9..e48cfb072 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -147,6 +147,28 @@ The route handles multiple n8n response formats: - Loading state: animated shimmer bar - Scrollbars: gray color (neutral), hidden by default, shown on hover +### Pinned Agents Drawer +**Mobile Design:** +- Full-width bottom sheet sliding up from bottom +- Drag handle indicator visible at top +- Semi-transparent dark background +- Responsive layout for touch interaction + +**Desktop Design:** +- Side drawer that slides out from behind the main manuscript card to the right +- Positioned relative to the manuscript panel (not viewport-locked) +- Partially hidden behind main card, with left edge not visible +- Shorter height, centered vertically on screen +- Reduced opacity (40% less) for subtle appearance + +**Card Functionality:** +- Minimalist cards showing: agent name, handle, and start chat button +- Hover reveals: full description and action button +- Smooth height animation on hover using CSS Grid transitions +- Drag-and-drop reordering with visual feedback +- Dragged cards render above others (z-index layering) +- Delete button only visible on hover + ## Feature Flag System ### Architecture