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

feat: replace Show Drafts checkbox with Drafts tab in Flow Library

Browse Source 
- Remove the out-of-place checkbox; add 'Drafts' as a tab alongside
  All | Troubleshooting | Projects | Maintenance
- Drafts tab sets showDrafts=true + typeFilter='all' so the API filter
  still works correctly via include_drafts
- Move SortDropdown to the right side next to ViewToggle, so both
  secondary controls are grouped together

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-02-18 12:13:59 -05:00
parent 66a0fb01a2
commit 42c8c85fd5
1 changed files with 24 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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>