feat: UI design system - sidebar layout, workspace system, and shell redesign (#77)

* feat: add workspace system and sidebar layout (UI design system Phase A+B) Backend: Workspace model, migration (036), schemas, CRUD API endpoints. Adds workspace_id to trees and categories, seeds 4 default workspaces per account, auto-assigns existing trees by tree_type. Frontend: Complete AppLayout rewrite from top-nav to CSS Grid shell with persistent sidebar + topbar. New components: WorkspaceSwitcher, NavItem, CategoryList, TagCloud, TopBar, Sidebar. Dashboard components: QuickStats, FiltersBar, SectionGroup, TreeListItem, SessionsPanel. WorkspaceStore with localStorage persistence. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add command palette search, dashboard rewrite, and shell height fixes (Phase C) - Add ⌘K command palette with debounced search across flows and sessions - Rewrite QuickStartPage as dashboard with stats, filters, sessions panel - Fix h-[calc(100vh-4rem)] → h-full across all pages for CSS Grid shell - Add active session count badge to sidebar Sessions nav item Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add sidebar collapse, category/tag filtering, and workspace CRUD (Phase D) - Sidebar collapse/expand toggle with icon-only rail mode (persisted) - Sidebar category/tag clicks navigate to /trees with URL params - TreeLibraryPage syncs filters from URL search params bidirectionally - Workspace create modal with icon picker and auto-slug generation - TopBar logo adapts to collapsed sidebar state Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add Quick Launch modal with actions and recent flows - Zap button opens Quick Launch with create/navigate shortcuts - Shows recent flows for quick session start - Keyboard navigation support (arrows + enter) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add activity notifications panel with session feed - Bell icon shows dot indicator for recent activity - Dropdown panel shows recent sessions with status icons - Links to session detail and sessions list page Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: remove workspace system, add pinned flows and label renames Replace workspace system with pinned flows API (pin/unpin/list/reorder). Rename user-facing labels: Tree→Flow, Procedure→Project. Add sidebar nav sub-items for flow type filtering. Remove 11 workspace files, add migrations 037-038, clean all workspace references. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: collapsed sidebar layout scaling and toggle button size Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: migrate auth pages to new design system Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: migrate TreeLibraryPage to new design system Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: migrate session pages to new design system Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: migrate TreeEditorPage to new design system Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: migrate TreeNavigationPage to new design system Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: migrate session sharing components to new design system Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * chore: remove workspace dropdown animation (dead code) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: migrate common components to new design system Migrate 15 components from monochrome glass-card design to purple gradient accent design system tokens (bg-card, border-border, text-foreground, bg-gradient-brand, etc.) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: migrate procedural and step library components to new design system Migrate 10 components from monochrome glass-card design to purple gradient accent design system tokens. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: migrate admin pages and components to new design system Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: migrate remaining pages to new design system Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: migrate remaining components to new design system Migrates 38 files: tree-editor forms, session modals, step library, common components, library views, tree preview, and misc UI to use design tokens (bg-card, border-border, text-foreground, bg-accent, bg-gradient-brand) replacing old monochrome patterns. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: keep brand text visible on sidebar collapse, hide sub-items until hover - TopBar: always show "ResolutionFlow" text regardless of sidebar state - NavItem: sub-items (Troubleshooting, Projects) hidden by default, revealed on hover or when a child route is active Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-15 22:45:19 -05:00
parent ef829f06a4
commit fa709faa60
138 changed files with 5011 additions and 3796 deletions
--- a/backend/app/api/endpoints/trees.py
+++ b/backend/app/api/endpoints/trees.py
@@ -17,8 +17,10 @@ from app.models.folder import UserFolder, user_folder_trees
 from app.schemas.tree import (
    TreeCreate, TreeUpdate, TreeResponse, TreeListResponse, CategoryInfo,
    ForkCreate, ForkInfo, TreeShareCreate, TreeShareResponse,
-    TreeVisibilityUpdate, SharedTreeResponse, TreeValidationResponse, ValidationError
+    TreeVisibilityUpdate, SharedTreeResponse, TreeValidationResponse, ValidationError,
+    PinnedFlowResponse, PinnedFlowsListResponse, PinnedFlowReorderRequest
 )
+from app.models.user_pinned_tree import UserPinnedTree
 from app.api.deps import get_current_active_user, require_engineer_or_admin, require_admin
 from app.core.permissions import can_edit_tree, can_access_tree
 from app.core.filters import build_tree_access_filter
@@ -1030,3 +1032,185 @@ async def check_tree_can_publish(
        can_publish=can_publish,
        errors=[ValidationError(**error) for error in validation_errors]
    )
+
+
+# --- Pinned Flows Endpoints ---
+
+MAX_PINNED_FLOWS = 15
+
+
+@router.get("/pinned", response_model=PinnedFlowsListResponse)
+async def list_pinned_flows(
+    db: Annotated[AsyncSession, Depends(get_db)],
+    current_user: Annotated[User, Depends(get_current_active_user)]
+):
+    """List user's pinned flows, ordered by display_order."""
+    result = await db.execute(
+        select(UserPinnedTree, Tree)
+        .join(Tree, UserPinnedTree.tree_id == Tree.id)
+        .options(selectinload(Tree.category_rel))
+        .where(
+            UserPinnedTree.user_id == current_user.id,
+            Tree.is_active == True,
+            Tree.deleted_at.is_(None)
+        )
+        .order_by(UserPinnedTree.display_order, UserPinnedTree.pinned_at)
+    )
+    rows = result.all()
+
+    items = []
+    for pin, tree in rows:
+        items.append(PinnedFlowResponse(
+            id=pin.id,
+            tree_id=tree.id,
+            tree_name=tree.name,
+            tree_type=tree.tree_type,
+            category_emoji=None,
+            category_name=tree.category_rel.name if tree.category_rel else None,
+            pinned_at=pin.pinned_at,
+            display_order=pin.display_order,
+        ))
+
+    return PinnedFlowsListResponse(items=items, count=len(items))
+
+
+@router.post("/{tree_id}/pin", response_model=PinnedFlowResponse)
+async def pin_flow(
+    tree_id: UUID,
+    db: Annotated[AsyncSession, Depends(get_db)],
+    current_user: Annotated[User, Depends(get_current_active_user)]
+):
+    """Pin a flow to the user's sidebar."""
+    # Check tree exists and user can access it
+    tree_result = await db.execute(
+        select(Tree)
+        .options(selectinload(Tree.category_rel))
+        .where(Tree.id == tree_id, Tree.is_active == True)
+    )
+    tree = tree_result.scalar_one_or_none()
+    if not tree:
+        raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail="Tree not found")
+    if not can_access_tree(current_user, tree):
+        raise HTTPException(status_code=status.HTTP_403_FORBIDDEN, detail="You don't have access to this tree")
+
+    # Check if already pinned (idempotent)
+    existing = await db.execute(
+        select(UserPinnedTree).where(
+            UserPinnedTree.user_id == current_user.id,
+            UserPinnedTree.tree_id == tree_id
+        )
+    )
+    pin = existing.scalar_one_or_none()
+    if pin:
+        return PinnedFlowResponse(
+            id=pin.id,
+            tree_id=tree.id,
+            tree_name=tree.name,
+            tree_type=tree.tree_type,
+            category_emoji=None,
+            category_name=tree.category_rel.name if tree.category_rel else None,
+            pinned_at=pin.pinned_at,
+            display_order=pin.display_order,
+        )
+
+    # Check max pins
+    count_result = await db.execute(
+        select(func.count(UserPinnedTree.id)).where(
+            UserPinnedTree.user_id == current_user.id
+        )
+    )
+    count = count_result.scalar() or 0
+    if count >= MAX_PINNED_FLOWS:
+        raise HTTPException(
+            status_code=status.HTTP_409_CONFLICT,
+            detail=f"Maximum of {MAX_PINNED_FLOWS} pinned flows reached"
+        )
+
+    # Create pin
+    pin = UserPinnedTree(
+        user_id=current_user.id,
+        tree_id=tree_id,
+        display_order=count,  # Append at end
+    )
+    db.add(pin)
+    await db.commit()
+    await db.refresh(pin)
+
+    return PinnedFlowResponse(
+        id=pin.id,
+        tree_id=tree.id,
+        tree_name=tree.name,
+        tree_type=tree.tree_type,
+        category_emoji=None,
+        category_name=tree.category_rel.name if tree.category_rel else None,
+        pinned_at=pin.pinned_at,
+        display_order=pin.display_order,
+    )
+
+
+@router.delete("/{tree_id}/pin")
+async def unpin_flow(
+    tree_id: UUID,
+    db: Annotated[AsyncSession, Depends(get_db)],
+    current_user: Annotated[User, Depends(get_current_active_user)]
+):
+    """Unpin a flow from the user's sidebar."""
+    result = await db.execute(
+        select(UserPinnedTree).where(
+            UserPinnedTree.user_id == current_user.id,
+            UserPinnedTree.tree_id == tree_id
+        )
+    )
+    pin = result.scalar_one_or_none()
+    if pin:
+        await db.delete(pin)
+        await db.commit()
+    return {"success": True}
+
+
+@router.patch("/pinned/reorder", response_model=PinnedFlowsListResponse)
+async def reorder_pinned_flows(
+    reorder_data: PinnedFlowReorderRequest,
+    db: Annotated[AsyncSession, Depends(get_db)],
+    current_user: Annotated[User, Depends(get_current_active_user)]
+):
+    """Update display_order for all pinned flows."""
+    for item in reorder_data.order:
+        await db.execute(
+            update(UserPinnedTree)
+            .where(
+                UserPinnedTree.user_id == current_user.id,
+                UserPinnedTree.tree_id == item.tree_id
+            )
+            .values(display_order=item.display_order)
+        )
+    await db.commit()
+
+    # Return updated list
+    result = await db.execute(
+        select(UserPinnedTree, Tree)
+        .join(Tree, UserPinnedTree.tree_id == Tree.id)
+        .options(selectinload(Tree.category_rel))
+        .where(
+            UserPinnedTree.user_id == current_user.id,
+            Tree.is_active == True,
+            Tree.deleted_at.is_(None)
+        )
+        .order_by(UserPinnedTree.display_order, UserPinnedTree.pinned_at)
+    )
+    rows = result.all()
+
+    items = []
+    for pin, tree in rows:
+        items.append(PinnedFlowResponse(
+            id=pin.id,
+            tree_id=tree.id,
+            tree_name=tree.name,
+            tree_type=tree.tree_type,
+            category_emoji=None,
+            category_name=tree.category_rel.name if tree.category_rel else None,
+            pinned_at=pin.pinned_at,
+            display_order=pin.display_order,
+        ))
+
+    return PinnedFlowsListResponse(items=items, count=len(items))