From 42c8c85fd5eb1634439366053a19ed41e94f3ed8 Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Wed, 18 Feb 2026 12:13:59 -0500
Subject: [PATCH] feat: replace Show Drafts checkbox with Drafts tab in Flow
 Library

- 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>
---
 frontend/src/pages/TreeLibraryPage.tsx | 43 ++++++++++++++------------
 1 file changed, 24 insertions(+), 19 deletions(-)

diff --git a/frontend/src/pages/TreeLibraryPage.tsx b/frontend/src/pages/TreeLibraryPage.tsx
index ff73f9d9..3a2c1610 100644
--- a/frontend/src/pages/TreeLibraryPage.tsx
+++ b/frontend/src/pages/TreeLibraryPage.tsx
@@ -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>