feat: convex optimizations, mobile studio ui

.agent/investigations/mobile-sidebar-control.md

@@ -0,0 +1,206 @@
+# Mobile Sidebar Control Investigation
+
+## Summary
+**YES** - We have full control over how sidebar content looks and renders on mobile devices. The implementation is clean and provides multiple ways to customize mobile-specific behavior.
+
+## Key Findings
+
+### 1. Mobile Detection
+- **Breakpoint**: `768px` (defined in `hooks/use-mobile.ts`)
+- **Hook**: `useIsMobile()` - available throughout the app
+- **Behavior**: Below 768px = mobile, 768px and above = desktop
+
+### 2. Sidebar Context Exposes Mobile State
+The `useSidebar()` hook provides:
+```typescript
+{
+  state: "expanded" | "collapsed",  // Desktop state
+  open: boolean,                     // Desktop open state
+  setOpen: (open: boolean) => void,  // Desktop control
+  openMobile: boolean,               // Mobile open state
+  setOpenMobile: (open: boolean) => void, // Mobile control
+  isMobile: boolean,                 // ✅ Mobile detection flag
+  toggleSidebar: () => void          // Works for both mobile/desktop
+}
+```
+
+### 3. How Mobile Rendering Works
+
+#### Desktop (≥768px):
+- Sidebar is positioned absolutely with `hidden md:block`
+- Uses `offcanvas` collapsible behavior
+- Slides in/out from edge with width transitions
+- Toggle button straddles the sidebar edge
+
+#### Mobile (<768px):
+- Sidebar is `fixed inset-y-0 z-50`
+- Full-height overlay sheet
+- Slides in from left/right with transform
+- Backdrop overlay (`z-40`) to close on click
+- Width: `var(--sidebar-width)` (360px for left, 320px for right)
+
+### 4. Same Content, Different Presentation
+**Important**: The sidebar receives the **same children** on both mobile and desktop. The `Sidebar` component handles the responsive rendering internally.
+
+```tsx
+// In studio-shell.tsx
+const sidebarContent = (
+  <div className="h-full flex flex-col">
+    {/* This exact same content renders on both mobile and desktop */}
+    <ScrollArea>
+      <PromptFeature />
+      <ControlsFeature />
+    </ScrollArea>
+    <Button>Generate</Button>
+  </div>
+)
+```
+
+## How to Customize Mobile Sidebar
+
+### Option 1: Use `useSidebar()` Hook (Recommended)
+Any component inside the sidebar can access mobile state:
+
+```tsx
+import { useSidebar } from "@/components/ui/sidebar"
+
+function MyComponent() {
+  const { isMobile } = useSidebar()
+
+  return (
+    <div className={isMobile ? "mobile-styles" : "desktop-styles"}>
+      {isMobile ? <MobileVersion /> : <DesktopVersion />}
+    </div>
+  )
+}
+```
+
+### Option 2: Use `useIsMobile()` Hook
+Direct access to mobile detection:
+
+```tsx
+import { useIsMobile } from "@/hooks/use-mobile"
+
+function MyComponent() {
+  const isMobile = useIsMobile()
+
+  return isMobile ? <MobileLayout /> : <DesktopLayout />
+}
+```
+
+### Option 3: CSS-Based Responsive Design
+Use Tailwind breakpoints (md: prefix = 768px+):
+
+```tsx
+<div className="p-4 md:p-2">  {/* More padding on mobile */}
+  <h2 className="text-xl md:text-base">  {/* Larger text on mobile */}
+    Title
+  </h2>
+</div>
+```
+
+### Option 4: Conditional Rendering in studio-shell.tsx
+Modify the sidebar content definition:
+
+```tsx
+const { isMobile } = useIsMobile()
+
+const sidebarContent = (
+  <div className="h-full flex flex-col">
+    {isMobile ? (
+      <MobileSidebarContent />
+    ) : (
+      <DesktopSidebarContent />
+    )}
+  </div>
+)
+```
+
+## Current Studio Sidebar Structure
+
+```
+SidebarProvider (provides isMobile context)
+└── Sidebar (handles mobile vs desktop rendering)
+    └── SidebarContent
+        └── sidebarContent (from studio-shell)
+            ├── ScrollArea (with fade overlays)
+            │   ├── PromptFeature
+            │   └── ControlsFeature
+            └── Generate Button (fixed at bottom)
+```
+
+## Easy Changes You Can Make
+
+### 1. Hide/Show Elements on Mobile
+```tsx
+const { isMobile } = useSidebar()
+
+{!isMobile && <AdvancedSettings />}  // Desktop only
+{isMobile && <SimplifiedControls />}  // Mobile only
+```
+
+### 2. Change Layout/Spacing
+```tsx
+<div className={cn(
+  "space-y-4",
+  isMobile && "space-y-6"  // More spacing on mobile
+)}>
+```
+
+### 3. Adjust Collapsible Sections
+```tsx
+<Collapsible defaultOpen={!isMobile}>  {/* Collapsed on mobile by default */}
+  <CollapsibleTrigger>Advanced Options</CollapsibleTrigger>
+  <CollapsibleContent>...</CollapsibleContent>
+</Collapsible>
+```
+
+### 4. Change Button Sizes
+```tsx
+<Button size={isMobile ? "lg" : "default"}>
+  Generate
+</Button>
+```
+
+### 5. Modify Sidebar Width (Mobile)
+In `studio-layout.tsx`:
+```tsx
+<SidebarProvider
+  style={{
+    "--sidebar-width": isMobile ? "100vw" : "360px",  // Full width on mobile
+  }}
+>
+```
+
+## Data Attributes Available
+
+The mobile sidebar has these data attributes for CSS targeting:
+- `data-mobile="true"` - Only on mobile sidebar
+- `data-state="expanded" | "collapsed"` - Current state
+- `data-sidebar="sidebar"` - Sidebar identifier
+
+Example CSS:
+```css
+[data-mobile="true"] .my-component {
+  /* Mobile-specific styles */
+}
+```
+
+## Breakpoint Consistency
+
+The same `768px` breakpoint is used for:
+- `useIsMobile()` hook
+- Tailwind `md:` prefix
+- Sidebar mobile/desktop switch
+
+This ensures consistent behavior across all responsive features.
+
+## Conclusion
+
+✅ **Full control** over mobile sidebar appearance
+✅ **Easy to customize** with hooks or CSS
+✅ **Same breakpoint** (768px) everywhere
+✅ **No code duplication** needed - same content, different presentation
+✅ **Multiple approaches** available depending on use case
+
+The architecture is well-designed for responsive customization!

.vscode/settings.json

@@ -1,4 +1,5 @@
 {
   "css.lint.unknownAtRules": "ignore",
-  "kiroAgent.configureMCP": "Disabled"
+  "kiroAgent.configureMCP": "Disabled",
+  "typescript.autoClosingTags": false
 }