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

fix: split category fetch, safe localStorage, aria-labels on icon buttons

Browse Source 
- TreeLibraryPage: split categories into a mount-only fetch so filter
  changes only re-fetch trees (not categories every time)
- Add safeGetItem/safeSetItem/safeRemoveItem helpers in utils.ts to
  prevent crashes in private browsing or when storage is unavailable
- Replace raw localStorage calls in ScratchpadSidebar, TreeNavigationPage,
  TreeEditorPage, and treeEditorStore with safe wrappers
- Add aria-label to 20 icon-only buttons across 8 component files
  for screen reader accessibility

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
2026-02-10 18:41:46 -05:00
parent 0c9fbdc90b
commit d155c83ef0
14 changed files with 81 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/components/admin/CategoryRow.tsx
View File

@@ -81,6 +81,7 @@ export function CategoryRow({
'hover:bg-white/10 hover:text-white'
)}
title="Edit category"
aria-label="Edit category"
>
<Edit className="h-4 w-4" />
</button>
@@ -94,6 +95,7 @@ export function CategoryRow({
'hover:bg-accent hover:text-accent-foreground'
)}
title="Archive category"
aria-label="Archive category"
>
<Archive className="h-4 w-4" />
</button>
@@ -106,6 +108,7 @@ export function CategoryRow({
'hover:bg-accent hover:text-accent-foreground'
)}
title="Restore category"
aria-label="Restore category"
>
<RotateCcw className="h-4 w-4" />
</button>

1
frontend/src/components/library/AddToFolderMenu.tsx
View File

@@ -93,6 +93,7 @@ export function AddToFolderMenu({ treeId, onFolderCreated }: AddToFolderMenuProp
'hover:bg-white/10 hover:text-white'
)}
title="Add to folder"
aria-label="Add to folder"
>
<FolderPlus className="h-4 w-4" />
</button>

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

@@ -85,6 +85,7 @@ export function TreeGridView({
'hover:bg-white/10 hover:text-white'
)}
title="Fork tree"
aria-label="Fork tree"
>
<GitBranch className="h-4 w-4" />
</button>
@@ -97,6 +98,7 @@ export function TreeGridView({
'hover:bg-white/10 hover:text-white'
)}
title="Edit tree"
aria-label="Edit tree"
>
<Pencil className="h-4 w-4" />
</Link>
@@ -110,6 +112,7 @@ export function TreeGridView({
'hover:bg-red-400/10 hover:text-red-400'
)}
title="Delete tree"
aria-label="Delete tree"
>
<Trash2 className="h-4 w-4" />
</button>

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

@@ -88,6 +88,7 @@ export function TreeListView({
'hover:bg-white/10 hover:text-white'
)}
title="Fork tree"
aria-label="Fork tree"
>
<GitBranch className="h-4 w-4" />
</button>
@@ -100,6 +101,7 @@ export function TreeListView({
'hover:bg-white/10 hover:text-white'
)}
title="Edit tree"
aria-label="Edit tree"
>
<Pencil className="h-4 w-4" />
</Link>

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

@@ -192,6 +192,7 @@ export function TreeTableView({
'hover:bg-white/10 hover:text-white'
)}
title="Fork tree"
aria-label="Fork tree"
>
<GitBranch className="h-3.5 w-3.5" />
</button>
@@ -204,6 +205,7 @@ export function TreeTableView({
'hover:bg-white/10 hover:text-white'
)}
title="Edit tree"
aria-label="Edit tree"
>
<Pencil className="h-3.5 w-3.5" />
</Link>

3
frontend/src/components/library/ViewToggle.tsx
View File

@@ -22,6 +22,7 @@ export function ViewToggle({ view, onChange, className }: ViewToggleProps) {
: 'text-white/50 hover:bg-white/[0.06] hover:text-white'
)}
title="Grid view"
aria-label="Grid view"
>
<LayoutGrid className="h-4 w-4" />
</button>
@@ -35,6 +36,7 @@ export function ViewToggle({ view, onChange, className }: ViewToggleProps) {
: 'text-white/50 hover:bg-white/[0.06] hover:text-white'
)}
title="List view"
aria-label="List view"
>
<List className="h-4 w-4" />
</button>
@@ -48,6 +50,7 @@ export function ViewToggle({ view, onChange, className }: ViewToggleProps) {
: 'text-white/50 hover:bg-white/[0.06] hover:text-white'
)}
title="Table view"
aria-label="Table view"
>
<Table className="h-4 w-4" />
</button>

8
frontend/src/components/session/ScratchpadSidebar.tsx
View File

@@ -1,5 +1,5 @@
import { useState, useEffect, useRef, useCallback } from 'react'
import { cn } from '@/lib/utils'
import { cn, safeGetItem, safeSetItem } from '@/lib/utils'
import { MarkdownContent } from '@/components/ui/MarkdownContent'
import { StickyNote, X, Eye, Pencil, Loader2 } from 'lucide-react'
@@ -14,7 +14,7 @@ export function ScratchpadSidebar({ sessionId, initialContent, onSave, onOpenCha
const [content, setContent] = useState(initialContent)
const [lastSaved, setLastSaved] = useState(initialContent)
const [isCollapsed, setIsCollapsed] = useState(() => {
return localStorage.getItem('scratchpad-collapsed') !== 'false'
return safeGetItem('scratchpad-collapsed') !== 'false'
})
const [isSaving, setIsSaving] = useState(false)
const [showPreview, setShowPreview] = useState(false)
@@ -43,7 +43,7 @@ export function ScratchpadSidebar({ sessionId, initialContent, onSave, onOpenCha
// Persist collapse state and notify parent
useEffect(() => {
localStorage.setItem('scratchpad-collapsed', String(isCollapsed))
safeSetItem('scratchpad-collapsed', String(isCollapsed))
onOpenChange?.(!isCollapsed)
}, [isCollapsed, onOpenChange])
@@ -130,6 +130,7 @@ export function ScratchpadSidebar({ sessionId, initialContent, onSave, onOpenCha
isCollapsed ? 'opacity-100' : 'pointer-events-none opacity-0'
)}
title="Open scratchpad (Ctrl+/)"
aria-label="Open scratchpad (Ctrl+/)"
>
<StickyNote className="h-5 w-5" />
{hasUnsavedChanges && (
@@ -176,6 +177,7 @@ export function ScratchpadSidebar({ sessionId, initialContent, onSave, onOpenCha
onClick={() => setIsCollapsed(true)}
className="rounded p-1 text-white/40 hover:bg-white/10 hover:text-white"
title="Close scratchpad"
aria-label="Close scratchpad"
>
<X className="h-4 w-4" />
</button>

3
frontend/src/components/tree-editor/DynamicArrayField.tsx
View File

@@ -53,6 +53,7 @@ export function DynamicArrayField<T>({
disabled={index === 0}
className="rounded p-0.5 text-white/50 hover:bg-white/[0.06] hover:text-white disabled:opacity-30"
title="Move up"
aria-label="Move up"
>
<ChevronUp className="h-3 w-3" />
</button>
@@ -62,6 +63,7 @@ export function DynamicArrayField<T>({
disabled={index === items.length - 1}
className="rounded p-0.5 text-white/50 hover:bg-white/[0.06] hover:text-white disabled:opacity-30"
title="Move down"
aria-label="Move down"
>
<ChevronDown className="h-3 w-3" />
</button>
@@ -78,6 +80,7 @@ export function DynamicArrayField<T>({
onClick={() => onRemove(index)}
className="mt-1 rounded p-1 text-white/50 hover:bg-red-400/20 hover:text-red-400"
title="Remove"
aria-label="Remove"
>
<Trash2 className="h-4 w-4" />
</button>

4
frontend/src/components/tree-editor/NodeList.tsx
View File

@@ -286,6 +286,7 @@ function NodeListItem({
onAddChild(node.id)
}}
title="Add child node"
aria-label="Add child node"
className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
>
<Plus className="h-3 w-3" />
@@ -298,6 +299,7 @@ function NodeListItem({
onEdit(node)
}}
title="Edit node"
aria-label="Edit node"
className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
>
<Pencil className="h-3 w-3" />
@@ -311,6 +313,7 @@ function NodeListItem({
onDuplicate(node.id)
}}
title="Duplicate node"
aria-label="Duplicate node"
className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
>
<Copy className="h-3 w-3" />
@@ -322,6 +325,7 @@ function NodeListItem({
onDelete(node.id)
}}
title="Delete node"
aria-label="Delete node"
className="rounded p-1 text-muted-foreground hover:bg-destructive/20 hover:text-destructive"
>
<Trash2 className="h-3 w-3" />

25
frontend/src/lib/utils.ts
View File

@@ -4,3 +4,28 @@ import { twMerge } from 'tailwind-merge'
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
/** Safe localStorage access — returns null on error (e.g. private browsing) */
export function safeGetItem(key: string): string | null {
try {
return localStorage.getItem(key)
} catch {
return null
}
}
export function safeSetItem(key: string, value: string): void {
try {
localStorage.setItem(key, value)
} catch {
// Storage full or unavailable — silently fail
}
}
export function safeRemoveItem(key: string): void {
try {
localStorage.removeItem(key)
} catch {
// Storage unavailable — silently fail
}
}

4
frontend/src/pages/TreeEditorPage.tsx
View File

@@ -10,7 +10,7 @@ import { TreeEditorLayout } from '@/components/tree-editor/TreeEditorLayout'
import { ValidationSummary } from '@/components/tree-editor/ValidationSummary'
import { useKeyboardShortcuts } from '@/hooks/useKeyboardShortcuts'
import { usePermissions } from '@/hooks/usePermissions'
import { cn } from '@/lib/utils'
import { cn, safeGetItem } from '@/lib/utils'
import { toast } from '@/lib/toast'
export function TreeEditorPage() {
@@ -156,7 +156,7 @@ export function TreeEditorPage() {
initNewTree()
setTreeStatus('draft') // New trees start as draft
// Check for draft after initializing
const draftExists = localStorage.getItem('tree-editor-draft') !== null
const draftExists = safeGetItem('tree-editor-draft') !== null
if (draftExists) {
setShowDraftPrompt(true)
}

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

@@ -58,8 +58,16 @@ export function TreeLibraryPage() {
}
}, [])
// Load categories once on mount (they rarely change)
useEffect(() => {
loadData()
categoriesApi.list()
.then(setCategories)
.catch((err) => console.error('Failed to load categories:', err))
}, [])
// Load trees when filters change
useEffect(() => {
loadTrees()
}, [selectedCategoryId, selectedTags, selectedFolderId, treeLibrarySortBy, showDrafts])
// Load folders on mount and listen for changes
@@ -70,21 +78,17 @@ export function TreeLibraryPage() {
return () => window.removeEventListener('folder-changed', handleFolderChange)
}, [loadFolders])
const loadData = async () => {
const loadTrees = async () => {
setIsLoading(true)
try {
const [treesData, categoriesData] = await Promise.all([
treesApi.list({
category_id: selectedCategoryId || undefined,
tags: selectedTags.length > 0 ? selectedTags.join(',') : undefined,
folder_id: selectedFolderId || undefined,
sort_by: treeLibrarySortBy,
include_drafts: showDrafts || undefined,
}),
categoriesApi.list(),
])
const treesData = await treesApi.list({
category_id: selectedCategoryId || undefined,
tags: selectedTags.length > 0 ? selectedTags.join(',') : undefined,
folder_id: selectedFolderId || undefined,
sort_by: treeLibrarySortBy,
include_drafts: showDrafts || undefined,
})
setTrees(treesData)
setCategories(categoriesData)
} catch (err) {
toast.error('Failed to load trees')
console.error(err)
@@ -95,7 +99,7 @@ export function TreeLibraryPage() {
const handleSearch = async () => {
if (!searchQuery.trim()) {
loadData()
loadTrees()
return
}
setIsLoading(true)
@@ -413,7 +417,7 @@ export function TreeLibraryPage() {
setFolderModalOpen(false)
setNewFolderParentId(null)
}}
onSave={loadData}
onSave={loadTrees}
/>
{/* Delete Confirmation */}

4
frontend/src/pages/TreeNavigationPage.tsx
View File

@@ -4,7 +4,7 @@ import { treesApi, sessionsApi } from '@/api'
import { useTreeNavigationShortcuts } from '@/hooks/useKeyboardShortcuts'
import { useCustomStepFlow } from '@/hooks/useCustomStepFlow'
import type { Tree, Session, DecisionRecord, TreeStructure } from '@/types'
import { cn } from '@/lib/utils'
import { cn, safeGetItem } from '@/lib/utils'
import { MarkdownContent } from '@/components/ui/MarkdownContent'
import { CustomStepModal } from '@/components/step-library/CustomStepModal'
import { PostStepActionModal, ContinuationModal, ForkTreeModal, ScratchpadSidebar } from '@/components/session'
@@ -37,7 +37,7 @@ export function TreeNavigationPage() {
// Scratchpad state
const [scratchpadOpen, setScratchpadOpen] = useState(() => {
return localStorage.getItem('scratchpad-collapsed') === 'false'
return safeGetItem('scratchpad-collapsed') === 'false'
})
const findNode = (nodeId: string, structure?: TreeStructure): TreeStructure | null => {

13
frontend/src/store/treeEditorStore.ts
View File

@@ -4,6 +4,7 @@ import { shallow } from 'zustand/shallow'
import { immer } from 'zustand/middleware/immer'
import type { Tree, TreeStructure, TreeCreate, TreeUpdate, NodeType, TreeMarkdownValidationError, TreeMarkdownValidation } from '@/types'
import { treeStructureToMarkdownPreview } from '@/lib/treeMarkdownSync'
import { safeGetItem, safeSetItem, safeRemoveItem } from '@/lib/utils'
// Throttle helper: captures first call immediately, then throttles subsequent calls
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -304,7 +305,7 @@ export const useTreeEditorStore = create<TreeEditorState>()(
// Check for existing draft on init
initNewTree: () => {
const hasDraft = localStorage.getItem(DRAFT_STORAGE_KEY) !== null
const hasDraft = safeGetItem(DRAFT_STORAGE_KEY) !== null
set((state) => {
state.treeId = null
state.name = ''
@@ -360,7 +361,7 @@ export const useTreeEditorStore = create<TreeEditorState>()(
},
loadDraft: () => {
const draftJson = localStorage.getItem(DRAFT_STORAGE_KEY)
const draftJson = safeGetItem(DRAFT_STORAGE_KEY)
if (!draftJson) return false
try {
@@ -380,13 +381,13 @@ export const useTreeEditorStore = create<TreeEditorState>()(
})
return true
} catch {
localStorage.removeItem(DRAFT_STORAGE_KEY)
safeRemoveItem(DRAFT_STORAGE_KEY)
return false
}
},
discardDraft: () => {
localStorage.removeItem(DRAFT_STORAGE_KEY)
safeRemoveItem(DRAFT_STORAGE_KEY)
set((state) => {
state.hasDraft = false
})
@@ -868,12 +869,12 @@ export const useTreeEditorStore = create<TreeEditorState>()(
treeStructure: state.treeStructure,
savedAt: new Date().toISOString()
}
localStorage.setItem(DRAFT_STORAGE_KEY, JSON.stringify(draft))
safeSetItem(DRAFT_STORAGE_KEY, JSON.stringify(draft))
set((s) => { s.draftSavedAt = new Date() })
},
markSaved: () => {
localStorage.removeItem(DRAFT_STORAGE_KEY)
safeRemoveItem(DRAFT_STORAGE_KEY)
set((state) => {
state.isDirty = false
state.lastSavedAt = new Date()