feat: MVP-5 Sprint 3 - Sidebar, Work Mode, and Drafts

- Enhance note-connections with collapsible sections and recent versions
- Add work mode toggle in header for focused work
- Add draft autosave with 7-day TTL and recovery banner
- Save drafts on changes for new notes

src/components/note-connections.tsx

@@ -1,9 +1,10 @@
 'use client'
 
 import Link from 'next/link'
+import { useState, useEffect } from 'react'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
-import { ArrowRight, Link2, RefreshCw, ExternalLink, Users } from 'lucide-react'
+import { ArrowRight, Link2, RefreshCw, ExternalLink, Users, ChevronDown, ChevronRight, History } from 'lucide-react'
 
 interface BacklinkInfo {
   id: string
@@ -38,12 +39,20 @@ function ConnectionGroup({
   icon: Icon,
   notes,
   emptyMessage,
+  isCollapsed,
+  onToggle,
 }: {
   title: string
   icon: React.ComponentType<{ className?: string }>
   notes: { id: string; title: string; type: string }[]
   emptyMessage: string
+  isCollapsed?: boolean
+  onToggle?: () => void
 }) {
+  if (notes.length === 0 && isCollapsed) {
+    return null
+  }
+
   if (notes.length === 0) {
     return (
       <div className="space-y-2">
@@ -59,23 +68,31 @@ function ConnectionGroup({
   return (
     <div className="space-y-2">
       <h4 className="text-sm font-medium flex items-center gap-2">
-        <Icon className="h-4 w-4" />
-        {title}
+        <button
+          onClick={onToggle}
+          className="flex items-center gap-2 hover:text-primary transition-colors"
+        >
+          {isCollapsed ? <ChevronRight className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+          <Icon className="h-4 w-4" />
+          {title}
+        </button>
         <Badge variant="secondary" className="ml-auto text-xs">
           {notes.length}
         </Badge>
       </h4>
-      <div className="pl-6 space-y-1">
-        {notes.map((note) => (
-          <Link
-            key={note.id}
-            href={`/notes/${note.id}`}
-            className="block text-sm text-foreground hover:text-primary transition-colors"
-          >
-            {note.title}
-          </Link>
-        ))}
-      </div>
+      {!isCollapsed && (
+        <div className="pl-6 space-y-1">
+          {notes.map((note) => (
+            <Link
+              key={note.id}
+              href={`/notes/${note.id}`}
+              className="block text-sm text-foreground hover:text-primary transition-colors"
+            >
+              {note.title}
+            </Link>
+          ))}
+        </div>
+      )}
     </div>
   )
 }
@@ -87,10 +104,24 @@ export function NoteConnections({
   relatedNotes,
   coUsedNotes,
 }: NoteConnectionsProps) {
+  const [collapsed, setCollapsed] = useState<Record<string, boolean>>({})
+  const [recentVersions, setRecentVersions] = useState<{ id: string; version: number; createdAt: string }[]>([])
+
+  useEffect(() => {
+    fetch(`/api/notes/${noteId}/versions`)
+      .then((r) => r.json())
+      .then((d) => setRecentVersions(d.data?.slice(0, 3) || []))
+      .catch(() => setRecentVersions([]))
+  }, [noteId])
+
   const hasAnyConnections =
     backlinks.length > 0 || outgoingLinks.length > 0 || relatedNotes.length > 0 || coUsedNotes.length > 0
 
-  if (!hasAnyConnections) {
+  const toggleCollapsed = (key: string) => {
+    setCollapsed((prev) => ({ ...prev, [key]: !prev[key] }))
+  }
+
+  if (!hasAnyConnections && recentVersions.length === 0) {
     return null
   }
 
@@ -113,6 +144,8 @@ export function NoteConnections({
             type: bl.sourceNote.type,
           }))}
           emptyMessage="Ningún otro documento enlaza a esta nota"
+          isCollapsed={collapsed['backlinks']}
+          onToggle={() => toggleCollapsed('backlinks')}
         />
 
         {/* Outgoing links - notes this note links TO */}
@@ -125,6 +158,8 @@ export function NoteConnections({
             type: ol.sourceNote.type,
           }))}
           emptyMessage="Esta nota no enlaza a ningún otro documento"
+          isCollapsed={collapsed['outgoing']}
+          onToggle={() => toggleCollapsed('outgoing')}
         />
 
         {/* Related notes - by content similarity and scoring */}
@@ -137,6 +172,8 @@ export function NoteConnections({
             type: rn.type,
           }))}
           emptyMessage="No hay notas relacionadas"
+          isCollapsed={collapsed['related']}
+          onToggle={() => toggleCollapsed('related')}
         />
 
         {/* Co-used notes - often viewed together */}
@@ -149,7 +186,26 @@ export function NoteConnections({
             type: cu.type,
           }))}
           emptyMessage="No hay notas co-usadas"
+          isCollapsed={collapsed['coused']}
+          onToggle={() => toggleCollapsed('coused')}
         />
+
+        {/* Recent versions */}
+        {recentVersions.length > 0 && (
+          <div className="space-y-2 pt-2 border-t">
+            <h4 className="text-sm font-medium flex items-center gap-2">
+              <History className="h-4 w-4" />
+              Versiones recientes
+            </h4>
+            <div className="pl-6 space-y-1">
+              {recentVersions.map((v) => (
+                <p key={v.id} className="text-xs text-muted-foreground">
+                  v{v.version} - {new Date(v.createdAt).toLocaleDateString()}
+                </p>
+              ))}
+            </div>
+          </div>
+        )}
       </CardContent>
     </Card>
   )