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

feat: canvas UX fixes — scroll, fullscreen, InfoTip tooltips, answer stub system #80

Merged
chihlasm merged 28 commits from feature/tree-editor-canvas into main 2026-02-18 17:52:08 +00:00
Conversation 1 Commits 28 Files Changed 24 +24 -19
1 changed files with 24 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 42c8c85fd5 - Show all commits

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

@@ -326,35 +326,40 @@ export function TreeLibraryPage() {
{/* View Controls */}
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<div className="flex items-center gap-4">
<div className="flex rounded-lg border border-border p-0.5">
{(['all', 'troubleshooting', 'procedural', 'maintenance'] as const).map((t) => (
{/* Type filter tabs — includes Drafts as a first-class filter */}
<div className="flex rounded-lg border border-border p-0.5">
{(['all', 'troubleshooting', 'procedural', 'maintenance', 'drafts'] as const).map((t) => {
const isActive = t === 'drafts' ? showDrafts && typeFilter === 'all' : !showDrafts && typeFilter === t
return (
<button
key={t}
onClick={() => setTypeFilter(t)}
onClick={() => {
if (t === 'drafts') {
setShowDrafts(true)
setTypeFilter('all')
} else {
setShowDrafts(false)
setTypeFilter(t)
}
}}
className={cn(
'rounded-md px-3 py-1 text-xs font-medium transition-colors',
typeFilter === t
isActive
? 'bg-accent text-foreground'
: 'text-muted-foreground hover:text-foreground'
)}
>
{t === 'all' ? 'All' : t === 'troubleshooting' ? 'Troubleshooting' : t === 'procedural' ? 'Projects' : 'Maintenance'}
{t === 'all' ? 'All' : t === 'troubleshooting' ? 'Troubleshooting' : t === 'procedural' ? 'Projects' : t === 'maintenance' ? 'Maintenance' : 'Drafts'}
</button>
))}
</div>
<SortDropdown value={treeLibrarySortBy} onChange={setTreeLibrarySortBy} />
<label className="flex items-center gap-2 cursor-pointer">
<input
type="checkbox"
checked={showDrafts}
onChange={(e) => setShowDrafts(e.target.checked)}
className="h-4 w-4 rounded border-border text-primary focus:ring-2 focus:ring-primary/20 focus:ring-offset-2"
/>
<span className="text-sm text-muted-foreground">Show my drafts</span>
</label>
)
})}
</div>
{/* Right controls: sort + view toggle */}
<div className="flex items-center gap-2">
<SortDropdown value={treeLibrarySortBy} onChange={setTreeLibrarySortBy} />
<ViewToggle view={treeLibraryView} onChange={setTreeLibraryView} />
</div>
<ViewToggle view={treeLibraryView} onChange={setTreeLibraryView} />
</div>
</div>