chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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>
This commit is contained in:
chihlasm
2026-03-15 15:21:08 -04:00
parent 9e4566cc1d
commit ffac0f8503
9 changed files with 8 additions and 441 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/api/index.ts
View File

@@ -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'

34
frontend/src/api/pinnedFlows.ts
View File

@@ -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

28
frontend/src/components/library/TreeGridView.tsx
View File

@@ -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" />

28
frontend/src/components/library/TreeListView.tsx
View File

@@ -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"

35
frontend/src/components/library/TreeTableView.tsx
View File

@@ -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]">

98
frontend/src/components/sidebar/PinnedFlowsSection.tsx
View File

@@ -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>
)
}

95
frontend/src/pages/QuickStartPage.tsx
View File

@@ -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}
/>
)}

26
frontend/src/pages/TreeLibraryPage.tsx
View File

@@ -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}
/>
)}
</>

104
frontend/src/store/pinnedFlowsStore.ts
View File

@@ -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)
},
}))