refactor: remove pinned flows frontend (PinnedFlowsSection, store, API, pin buttons)

Removed: PinnedFlowsSection component, pinnedFlowsStore, pinnedFlows API client.
Cleaned: pin buttons from TreeGridView, TreeListView, TreeTableView.
Cleaned: favorites section from QuickStartPage, pin props from TreeLibraryPage.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/api/index.ts

@@ -11,7 +11,6 @@ export { default as stepCategoriesApi } from './stepCategories'
 export { default as accountsApi } from './accounts'
 export { default as adminApi } from './admin'
 export { treeMarkdownApi } from './treeMarkdown'
-export { default as pinnedFlowsApi } from './pinnedFlows'
 export { default as analyticsApi } from './analytics'
 export { targetListsApi } from './targetLists'
 export { maintenanceSchedulesApi, batchLaunchApi } from './maintenanceSchedules'

frontend/src/api/pinnedFlows.ts

@@ -1,34 +0,0 @@
-import { apiClient } from './client'
-
-export interface PinnedFlow {
-  id: string
-  tree_id: string
-  tree_name: string
-  tree_type: 'troubleshooting' | 'procedural' | 'maintenance'
-  category_emoji?: string
-  category_name?: string
-  pinned_at: string
-  display_order: number
-}
-
-export interface PinnedFlowsResponse {
-  items: PinnedFlow[]
-  count: number
-}
-
-export const pinnedFlowsApi = {
-  list: async (): Promise<PinnedFlowsResponse> => {
-    const { data } = await apiClient.get('/trees/pinned')
-    return data
-  },
-
-  unpin: async (treeId: string): Promise<void> => {
-    await apiClient.delete(`/trees/${treeId}/pin`)
-  },
-
-  pin: async (treeId: string): Promise<void> => {
-    await apiClient.post(`/trees/${treeId}/pin`)
-  },
-}
-
-export default pinnedFlowsApi

frontend/src/components/library/TreeGridView.tsx

@@ -1,5 +1,5 @@
 import { Link } from 'react-router-dom'
-import { Pencil, Globe, Lock, Trash2, GitBranch, FileText, Wrench, Star, Download, ClipboardList } from 'lucide-react'
+import { Pencil, Globe, Lock, Trash2, GitBranch, FileText, Wrench, Download, ClipboardList } from 'lucide-react'
 import type { TreeListItem } from '@/types'
 import { TagBadges } from '@/components/common/TagBadges'
 import { StaggerList } from '@/components/common/StaggerList'
@@ -16,9 +16,6 @@ interface TreeGridViewProps {
   onDeleteTree: (tree: TreeListItem) => void
   onForkTree?: (treeId: string) => void
   onExportTree?: (treeId: string) => void
-  pinnedTreeIds?: Set<string>
-  onTogglePin?: (treeId: string) => void
-  pinLoadingTreeIds?: Set<string>
 }
 
 export function TreeGridView({
@@ -29,9 +26,6 @@ export function TreeGridView({
   onDeleteTree,
   onForkTree,
   onExportTree,
-  pinnedTreeIds,
-  onTogglePin,
-  pinLoadingTreeIds,
 }: TreeGridViewProps) {
   const { canEditTree, canDeleteTree } = usePermissions()
 
@@ -64,26 +58,6 @@ export function TreeGridView({
               )}
             </div>
             <div className="flex items-center gap-2">
-              {onTogglePin && (
-                <button
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    e.preventDefault()
-                    onTogglePin(tree.id)
-                  }}
-                  disabled={pinLoadingTreeIds?.has(tree.id)}
-                  aria-label={pinnedTreeIds?.has(tree.id) ? 'Remove from favorites' : 'Add to favorites'}
-                  className={cn(
-                    'rounded-md p-1 transition-colors',
-                    pinnedTreeIds?.has(tree.id)
-                      ? 'text-amber-400 hover:text-amber-300'
-                      : 'text-muted-foreground/40 hover:text-amber-400',
-                    pinLoadingTreeIds?.has(tree.id) && 'opacity-50 pointer-events-none'
-                  )}
-                >
-                  <Star size={14} fill={pinnedTreeIds?.has(tree.id) ? 'currentColor' : 'none'} />
-                </button>
-              )}
               {tree.is_public ? (
                 <span title="Public tree">
                   <Globe className="h-4 w-4 text-muted-foreground" />

frontend/src/components/library/TreeListView.tsx

@@ -1,5 +1,5 @@
 import { Link } from 'react-router-dom'
-import { Pencil, Globe, Lock, GitBranch, FileText, Trash2, Wrench, Star, Download, ClipboardList } from 'lucide-react'
+import { Pencil, Globe, Lock, GitBranch, FileText, Trash2, Wrench, Download, ClipboardList } from 'lucide-react'
 import type { TreeListItem } from '@/types'
 import { TagBadges } from '@/components/common/TagBadges'
 import { cn } from '@/lib/utils'
@@ -15,9 +15,6 @@ interface TreeListViewProps {
   onDeleteTree: (tree: TreeListItem) => void
   onForkTree?: (treeId: string) => void
   onExportTree?: (treeId: string) => void
-  pinnedTreeIds?: Set<string>
-  onTogglePin?: (treeId: string) => void
-  pinLoadingTreeIds?: Set<string>
 }
 
 export function TreeListView({
@@ -28,9 +25,6 @@ export function TreeListView({
   onDeleteTree,
   onForkTree,
   onExportTree,
-  pinnedTreeIds,
-  onTogglePin,
-  pinLoadingTreeIds,
 }: TreeListViewProps) {
   const { canEditTree } = usePermissions()
 
@@ -99,26 +93,6 @@ export function TreeListView({
             </div>
 
             <div className="flex items-center gap-2">
-              {onTogglePin && (
-                <button
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    e.preventDefault()
-                    onTogglePin(tree.id)
-                  }}
-                  disabled={pinLoadingTreeIds?.has(tree.id)}
-                  aria-label={pinnedTreeIds?.has(tree.id) ? 'Remove from favorites' : 'Add to favorites'}
-                  className={cn(
-                    'shrink-0 rounded-md p-1 transition-colors',
-                    pinnedTreeIds?.has(tree.id)
-                      ? 'text-amber-400 hover:text-amber-300'
-                      : 'text-muted-foreground/40 hover:text-amber-400',
-                    pinLoadingTreeIds?.has(tree.id) && 'opacity-50 pointer-events-none'
-                  )}
-                >
-                  <Star size={16} fill={pinnedTreeIds?.has(tree.id) ? 'currentColor' : 'none'} />
-                </button>
-              )}
               {onExportTree && (
                 <button
                   type="button"

frontend/src/components/library/TreeTableView.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { Link } from 'react-router-dom'
-import { Pencil, Globe, Lock, ChevronUp, ChevronDown, GitBranch, FileText, Trash2, Wrench, Star, Download, ClipboardList } from 'lucide-react'
+import { Pencil, Globe, Lock, ChevronUp, ChevronDown, GitBranch, FileText, Trash2, Wrench, Download, ClipboardList } from 'lucide-react'
 import type { TreeListItem } from '@/types'
 import { TagBadges } from '@/components/common/TagBadges'
 import { cn } from '@/lib/utils'
@@ -17,9 +17,6 @@ interface TreeTableViewProps {
   onSortChange?: (sortBy: string) => void
   onForkTree?: (treeId: string) => void
   onExportTree?: (treeId: string) => void
-  pinnedTreeIds?: Set<string>
-  onTogglePin?: (treeId: string) => void
-  pinLoadingTreeIds?: Set<string>
 }
 
 type SortColumn = 'name' | 'category' | 'version' | 'usage' | 'updated'
@@ -33,9 +30,6 @@ export function TreeTableView({
   onSortChange,
   onForkTree,
   onExportTree,
-  pinnedTreeIds,
-  onTogglePin,
-  pinLoadingTreeIds,
 }: TreeTableViewProps) {
   const { canEditTree } = usePermissions()
   const [sortColumn, setSortColumn] = useState<SortColumn | null>(null)
@@ -83,11 +77,6 @@ export function TreeTableView({
       <table className="w-full">
         <thead className="bg-accent/50 sticky top-0 z-10">
           <tr className="border-b border-border">
-            {onTogglePin && (
-              <th className="w-10 px-2 py-3 text-center">
-                <Star size={14} className="inline text-muted-foreground" />
-              </th>
-            )}
             <th
               className="px-4 py-3 text-left text-sm font-medium text-muted-foreground cursor-pointer hover:text-foreground"
               onClick={() => handleSort('name')}
@@ -147,28 +136,6 @@ export function TreeTableView({
         <tbody className="bg-transparent">
           {trees.map((tree) => (
             <tr key={tree.id} className="border-b border-border last:border-0 hover:bg-accent/50">
-              {onTogglePin && (
-                <td className="w-10 px-2 py-3 text-center">
-                  <button
-                    onClick={(e) => {
-                      e.stopPropagation()
-                      e.preventDefault()
-                      onTogglePin(tree.id)
-                    }}
-                    disabled={pinLoadingTreeIds?.has(tree.id)}
-                    aria-label={pinnedTreeIds?.has(tree.id) ? 'Remove from favorites' : 'Add to favorites'}
-                    className={cn(
-                      'rounded-md p-1 transition-colors',
-                      pinnedTreeIds?.has(tree.id)
-                        ? 'text-amber-400 hover:text-amber-300'
-                        : 'text-muted-foreground/40 hover:text-amber-400',
-                      pinLoadingTreeIds?.has(tree.id) && 'opacity-50 pointer-events-none'
-                    )}
-                  >
-                    <Star size={14} fill={pinnedTreeIds?.has(tree.id) ? 'currentColor' : 'none'} />
-                  </button>
-                </td>
-              )}
               <td className="px-4 py-3">
                 <div className="flex items-center gap-2">
                   <span className="font-medium text-foreground truncate max-w-[200px]">

frontend/src/components/sidebar/PinnedFlowsSection.tsx

@@ -1,98 +0,0 @@
-import { useState } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { ChevronDown, ChevronRight, Pin } from 'lucide-react'
-import { getTreeNavigatePath } from '@/lib/routing'
-import { cn } from '@/lib/utils'
-import type { PinnedFlow } from '@/api/pinnedFlows'
-
-interface PinnedFlowsSectionProps {
-  flows: PinnedFlow[]
-  onUnpin: (treeId: string) => void
-}
-
-const TRUNCATE_COUNT = 5
-
-export function PinnedFlowsSection({ flows, onUnpin }: PinnedFlowsSectionProps) {
-  const navigate = useNavigate()
-  const [collapsed, setCollapsed] = useState(false)
-  const [showAll, setShowAll] = useState(false)
-
-  const handleToggleCollapse = () => {
-    if (collapsed) {
-      setShowAll(false) // Reset to truncated on re-expand
-    }
-    setCollapsed(!collapsed)
-  }
-
-  const visibleFlows = showAll ? flows : flows.slice(0, TRUNCATE_COUNT)
-  const hasMore = flows.length > TRUNCATE_COUNT
-
-  const handleFlowClick = (flow: PinnedFlow) => {
-    setShowAll(false) // Collapse back to 5 on navigation
-    navigate(getTreeNavigatePath(flow.tree_id, flow.tree_type))
-  }
-
-  return (
-    <div className="px-3 py-2">
-      <button
-        onClick={handleToggleCollapse}
-        className="flex w-full items-center gap-1 px-3 mb-1 font-heading text-[0.6875rem] font-bold uppercase tracking-[0.04em] text-muted-foreground hover:text-foreground transition-colors"
-      >
-        {collapsed ? <ChevronRight size={12} /> : <ChevronDown size={12} />}
-        Pinned
-        {flows.length > 0 && (
-          <span className="ml-auto text-[0.625rem] font-normal">{flows.length}</span>
-        )}
-      </button>
-
-      <div
-        className="overflow-hidden transition-[max-height] duration-250 ease-out"
-        style={{
-          maxHeight: collapsed ? 0 : showAll
-            ? `${flows.length * 36 + 40}px`
-            : `${Math.min(flows.length, TRUNCATE_COUNT) * 36 + 40}px`,
-        }}
-      >
-        <div className="space-y-0.5">
-          {flows.length === 0 ? (
-            <p className="px-3 py-2 text-xs text-muted-foreground">
-              Pin your most-used flows here
-            </p>
-          ) : (
-            <>
-              {visibleFlows.map(flow => (
-                <button
-                  key={flow.tree_id}
-                  onClick={() => handleFlowClick(flow)}
-                  onContextMenu={(e) => {
-                    e.preventDefault()
-                    onUnpin(flow.tree_id)
-                  }}
-                  className={cn(
-                    'group flex w-full items-center gap-2.5 rounded-lg px-3 py-1.5 text-[0.8125rem] font-medium transition-colors',
-                    'text-muted-foreground hover:bg-[var(--sidebar-hover)] hover:text-foreground'
-                  )}
-                  title={`${flow.tree_name} (right-click to unpin)`}
-                >
-                  <span className="text-sm shrink-0">
-                    {flow.tree_type === 'procedural' ? '📋' : flow.tree_type === 'maintenance' ? '🛠️' : '🔧'}
-                  </span>
-                  <span className="truncate flex-1 text-left">{flow.tree_name}</span>
-                  <Pin size={12} className="shrink-0 opacity-0 group-hover:opacity-40 transition-opacity" />
-                </button>
-              ))}
-              {hasMore && (
-                <button
-                  onClick={() => setShowAll(!showAll)}
-                  className="w-full px-3 py-1 text-xs text-muted-foreground hover:text-foreground transition-colors text-left"
-                >
-                  {showAll ? 'Show less' : `Show more (${flows.length})`}
-                </button>
-              )}
-            </>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}

frontend/src/pages/QuickStartPage.tsx

@@ -1,6 +1,6 @@
-import { useState, useEffect, useRef, useMemo, useCallback } from 'react'
+import { useState, useEffect, useRef, useCallback } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { Search, Loader2, Star, ChevronLeft, ChevronRight, GitBranch } from 'lucide-react'
+import { Search, Loader2, ChevronLeft, ChevronRight, GitBranch } from 'lucide-react'
 import { PageMeta } from '@/components/common/PageMeta'
 import { treesApi } from '@/api/trees'
 import { sessionsApi } from '@/api/sessions'
@@ -9,7 +9,6 @@ import type { Session } from '@/types/session'
 import { getTreeNavigatePath } from '@/lib/routing'
 import { usePermissions } from '@/hooks/usePermissions'
 import { useAuthStore } from '@/store/authStore'
-import { usePinnedFlowsStore } from '@/store/pinnedFlowsStore'
 import { useUserPreferencesStore } from '@/store/userPreferencesStore'
 import { usePaginationParams } from '@/hooks/usePaginationParams'
 import { useCachedQuota } from '@/hooks/useCachedQuota'
@@ -66,7 +65,7 @@ export function QuickStartPage() {
   const [allFlowsCeiling, setAllFlowsCeiling] = useState(false)
 
   // Favorites state
-  const [showAllFavorites, setShowAllFavorites] = useState(false)
+
 
   // AI Builder
   const { aiEnabled } = useCachedQuota()
@@ -81,19 +80,6 @@ export function QuickStartPage() {
   const [forkReason, setForkReason] = useState('')
   const [isForking, setIsForking] = useState(false)
 
-  // Pin store
-  const pinnedItems = usePinnedFlowsStore((s) => s.items)
-  const pinnedIsLoading = usePinnedFlowsStore((s) => s.isLoading)
-  const loadPinned = usePinnedFlowsStore((s) => s.load)
-  const isMutatingByTreeId = usePinnedFlowsStore((s) => s.isMutatingByTreeId)
-  const togglePin = usePinnedFlowsStore((s) => s.toggle)
-
-  const pinnedTreeIds = useMemo(() => new Set(pinnedItems.map((f) => f.tree_id)), [pinnedItems])
-  const pinLoadingTreeIds = useMemo(
-    () => new Set(Object.entries(isMutatingByTreeId).filter(([, v]) => v).map(([k]) => k)),
-    [isMutatingByTreeId]
-  )
-
   // Preferences
   const { dashboardMyFlowsView, setDashboardMyFlowsView } = useUserPreferencesStore()
 
@@ -103,8 +89,7 @@ export function QuickStartPage() {
     allowedPageSizes: [10, 25, 50, 'all'],
   })
 
-  // Load pinned flows
+
-  useEffect(() => { loadPinned() }, [loadPinned])
 
   // Load sessions on mount
   useEffect(() => {
@@ -241,11 +226,6 @@ export function QuickStartPage() {
 
   // recentSessionItems removed — replaced by RecentActivity component
 
-  // Favorites display
-  const MAX_VISIBLE_FAVORITES = 8
-  const visibleFavorites = showAllFavorites ? pinnedItems : pinnedItems.slice(0, MAX_VISIBLE_FAVORITES)
-  const hasMoreFavorites = pinnedItems.length > MAX_VISIBLE_FAVORITES
-
   // Handlers
   const handleStartSession = (treeId: string, treeType?: string) => {
     navigate(getTreeNavigatePath(treeId, treeType))
@@ -319,7 +299,6 @@ export function QuickStartPage() {
               { label: 'Active Flows', value: myFlows.length, gradient: true, glow: true },
               { label: 'This Week', value: todaySessions },
               { label: 'Open Sessions', value: openSessions },
-              { label: 'Favorites', value: pinnedItems.length },
             ].map((stat, i) => (
               <div
                 key={stat.label}
@@ -387,63 +366,6 @@ export function QuickStartPage() {
           )}
         </div>
 
-        {/* Favorites Section */}
-        <div>
-          <div className="mb-3 flex items-center justify-between">
-            <h2 className="font-heading text-lg font-semibold text-foreground">
-              Favorites
-              {pinnedItems.length > 0 && (
-                <span className="ml-2 text-sm font-normal text-muted-foreground">({pinnedItems.length})</span>
-              )}
-            </h2>
-            {hasMoreFavorites && (
-              <button
-                onClick={() => setShowAllFavorites(!showAllFavorites)}
-                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
-              >
-                {showAllFavorites ? 'Show less' : 'View all favorites'}
-              </button>
-            )}
-          </div>
-          {pinnedIsLoading ? (
-            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
-              {Array.from({ length: 4 }).map((_, i) => (
-                <div key={i} className="h-20 rounded-xl bg-card border border-border animate-pulse" />
-              ))}
-            </div>
-          ) : pinnedItems.length === 0 ? (
-            <p className="text-sm text-muted-foreground py-4">
-              Star a flow to pin it here for quick access.
-            </p>
-          ) : (
-            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
-              {visibleFavorites.map((flow) => (
-                <button
-                  key={flow.tree_id}
-                  onClick={() => navigate(getTreeNavigatePath(flow.tree_id, flow.tree_type))}
-                  className="group relative flex items-center gap-3 rounded-xl bg-card border border-border p-4 text-left transition-colors hover:border-border/80 hover:bg-accent/50"
-                >
-                  <span className="text-lg shrink-0">
-                    {flow.tree_type === 'procedural' ? '📋' : flow.tree_type === 'maintenance' ? '🛠️' : '🔧'}
-                  </span>
-                  <span className="truncate text-sm font-medium text-foreground">{flow.tree_name}</span>
-                  <button
-                    onClick={(e) => {
-                      e.stopPropagation()
-                      e.preventDefault()
-                      togglePin(flow.tree_id)
-                    }}
-                    aria-label="Remove from favorites"
-                    className="absolute top-2 right-2 rounded-md p-1 text-amber-400 opacity-0 group-hover:opacity-100 hover:text-amber-300 transition-all"
-                  >
-                    <Star size={14} fill="currentColor" />
-                  </button>
-                </button>
-              ))}
-            </div>
-          )}
-        </div>
-
         {/* My Flows Section — tabbed */}
         <div>
           <div className="mb-3 flex items-center gap-1 border-b border-border">
@@ -513,9 +435,6 @@ export function QuickStartPage() {
                   onTagClick={handleTagClick}
                   onFolderCreated={handleFolderCreated}
                   onDeleteTree={handleDeleteTree}
-                  pinnedTreeIds={pinnedTreeIds}
-                  onTogglePin={togglePin}
-                  pinLoadingTreeIds={pinLoadingTreeIds}
                 />
               )}
               {dashboardMyFlowsView === 'list' && (
@@ -525,9 +444,6 @@ export function QuickStartPage() {
                   onTagClick={handleTagClick}
                   onFolderCreated={handleFolderCreated}
                   onDeleteTree={handleDeleteTree}
-                  pinnedTreeIds={pinnedTreeIds}
-                  onTogglePin={togglePin}
-                  pinLoadingTreeIds={pinLoadingTreeIds}
                 />
               )}
               {dashboardMyFlowsView === 'table' && (
@@ -537,9 +453,6 @@ export function QuickStartPage() {
                   onTagClick={handleTagClick}
                   onFolderCreated={handleFolderCreated}
                   onDeleteTree={handleDeleteTree}
-                  pinnedTreeIds={pinnedTreeIds}
-                  onTogglePin={togglePin}
-                  pinLoadingTreeIds={pinLoadingTreeIds}
                 />
               )}
 

frontend/src/pages/TreeLibraryPage.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useCallback, useMemo, useRef } from 'react'
+import { useEffect, useState, useCallback, useRef } from 'react'
 import { useNavigate, useSearchParams } from 'react-router-dom'
 import { X, RotateCcw, Play, FileUp } from 'lucide-react'
 import { PageMeta } from '@/components/common/PageMeta'
@@ -24,7 +24,6 @@ import { cn, safeGetItem } from '@/lib/utils'
 import { getSessionResumePath, getTreeNavigatePath } from '@/lib/routing'
 import { usePermissions } from '@/hooks/usePermissions'
 import { useUserPreferencesStore } from '@/store/userPreferencesStore'
-import { usePinnedFlowsStore } from '@/store/pinnedFlowsStore'
 import { useCachedQuota } from '@/hooks/useCachedQuota'
 import { CreateFlowDropdown } from '@/components/common/CreateFlowDropdown'
 import { Spinner } from '@/components/common/Spinner'
@@ -96,17 +95,6 @@ export function TreeLibraryPage() {
 
   const { aiEnabled } = useCachedQuota()
 
-  // Pin store
-  const pinnedItems = usePinnedFlowsStore((s) => s.items)
-  const isMutatingByTreeId = usePinnedFlowsStore((s) => s.isMutatingByTreeId)
-  const pinnedTreeIds = useMemo(() => new Set(pinnedItems.map((f) => f.tree_id)), [pinnedItems])
-  const pinLoadingTreeIds = useMemo(
-    () => new Set(Object.entries(isMutatingByTreeId).filter(([, v]) => v).map(([k]) => k)),
-    [isMutatingByTreeId]
-  )
-  const togglePin = usePinnedFlowsStore((s) => s.toggle)
-  const loadPinned = usePinnedFlowsStore((s) => s.load)
-
   // Repeat Last Session
   const lastSessionData = (() => {
     const raw = safeGetItem('last-session')
@@ -140,9 +128,6 @@ export function TreeLibraryPage() {
       .catch((err) => console.error('Failed to load incomplete sessions:', err))
   }, [])
 
-  // Load pinned flows
-  useEffect(() => { loadPinned() }, [loadPinned])
-
   const dismissSession = (sessionId: string) => {
     const next = new Set(dismissedSessionIds)
     next.add(sessionId)
@@ -534,9 +519,6 @@ export function TreeLibraryPage() {
                   }}
                   onForkTree={handleForkTree}
                   onExportTree={handleExportTree}
-                  pinnedTreeIds={pinnedTreeIds}
-                  onTogglePin={togglePin}
-                  pinLoadingTreeIds={pinLoadingTreeIds}
                 />
               )}
               {treeLibraryView === 'list' && (
@@ -552,9 +534,6 @@ export function TreeLibraryPage() {
                   }}
                   onForkTree={handleForkTree}
                   onExportTree={handleExportTree}
-                  pinnedTreeIds={pinnedTreeIds}
-                  onTogglePin={togglePin}
-                  pinLoadingTreeIds={pinLoadingTreeIds}
                 />
               )}
               {treeLibraryView === 'table' && (
@@ -575,9 +554,6 @@ export function TreeLibraryPage() {
                   }}
                   onForkTree={handleForkTree}
                   onExportTree={handleExportTree}
-                  pinnedTreeIds={pinnedTreeIds}
-                  onTogglePin={togglePin}
-                  pinLoadingTreeIds={pinLoadingTreeIds}
                 />
               )}
             </>

frontend/src/store/pinnedFlowsStore.ts

@@ -1,104 +0,0 @@
-import { create } from 'zustand'
-import { pinnedFlowsApi } from '@/api/pinnedFlows'
-import type { PinnedFlow } from '@/api/pinnedFlows'
-import { toast } from '@/lib/toast'
-
-interface PinnedFlowsState {
-  items: PinnedFlow[]
-  isLoaded: boolean
-  isLoading: boolean
-  isMutatingByTreeId: Record<string, boolean>
-  error: string | null
-
-  load: (force?: boolean) => Promise<void>
-  pin: (treeId: string) => Promise<void>
-  unpin: (treeId: string) => Promise<void>
-  toggle: (treeId: string) => void
-  isPinned: (treeId: string) => boolean
-}
-
-export const usePinnedFlowsStore = create<PinnedFlowsState>()((set, get) => ({
-  items: [],
-  isLoaded: false,
-  isLoading: false,
-  isMutatingByTreeId: {},
-  error: null,
-
-  load: async (force = false) => {
-    const state = get()
-    if (state.isLoaded && !force) return
-    if (state.isLoading) return
-
-    set({ isLoading: true, error: null })
-    try {
-      const data = await pinnedFlowsApi.list()
-      set({ items: data.items, isLoaded: true, isLoading: false })
-    } catch {
-      set({ error: 'Failed to load pinned flows', isLoading: false })
-    }
-  },
-
-  pin: async (treeId: string) => {
-    const state = get()
-    if (state.isMutatingByTreeId[treeId]) return
-
-    set({ isMutatingByTreeId: { ...state.isMutatingByTreeId, [treeId]: true } })
-
-    try {
-      await pinnedFlowsApi.pin(treeId)
-      const data = await pinnedFlowsApi.list()
-      set((s) => ({
-        items: data.items,
-        isMutatingByTreeId: { ...s.isMutatingByTreeId, [treeId]: false },
-      }))
-    } catch (err: unknown) {
-      const status = (err as { response?: { status?: number } })?.response?.status
-      if (status === 409) {
-        toast.error('Maximum of 15 favorites reached. Unpin a flow to add a new one.')
-      } else {
-        toast.error('Failed to pin flow')
-      }
-      set((s) => ({
-        isMutatingByTreeId: { ...s.isMutatingByTreeId, [treeId]: false },
-      }))
-    }
-  },
-
-  unpin: async (treeId: string) => {
-    const state = get()
-    if (state.isMutatingByTreeId[treeId]) return
-
-    const prevItems = state.items
-    set({
-      items: state.items.filter((f) => f.tree_id !== treeId),
-      isMutatingByTreeId: { ...state.isMutatingByTreeId, [treeId]: true },
-    })
-
-    try {
-      await pinnedFlowsApi.unpin(treeId)
-      set((s) => ({
-        isMutatingByTreeId: { ...s.isMutatingByTreeId, [treeId]: false },
-      }))
-    } catch {
-      toast.error('Failed to unpin flow')
-      set((s) => ({
-        items: prevItems,
-        isMutatingByTreeId: { ...s.isMutatingByTreeId, [treeId]: false },
-      }))
-    }
-  },
-
-  toggle: (treeId: string) => {
-    const state = get()
-    if (state.isPinned(treeId)) {
-      state.unpin(treeId)
-    } else {
-      state.pin(treeId)
-    }
-  },
-
-  isPinned: (treeId: string) => {
-    return get().items.some((f) => f.tree_id === treeId)
-  },
-}))
-