From bfe06ae5c4dc5f863a5414631b2eee03d91e9816 Mon Sep 17 00:00:00 2001
From: lucaronin <luca.rossi.917@gmail.com>
Date: Sat, 4 Apr 2026 19:49:50 +0200
Subject: [PATCH] feat: add + button to TYPES header for creating new types

Matches the existing pattern in VIEWS and FOLDERS sections. The button
triggers onCreateNewType which opens the CreateTypeDialog.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/Sidebar.test.tsx | 25 +++++++++++++++++++++++++
 src/components/Sidebar.tsx      | 27 +++++++++++++++++++--------
 2 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/src/components/Sidebar.test.tsx b/src/components/Sidebar.test.tsx
index a5b4212c..57ada6f2 100644
--- a/src/components/Sidebar.test.tsx
+++ b/src/components/Sidebar.test.tsx
@@ -1009,4 +1009,29 @@ describe('Sidebar', () => {
       expect(onEditView).toHaveBeenCalledWith('active-projects.yml')
     })
   })
+
+  describe('create type button', () => {
+    it('renders + button in TYPES header when onCreateNewType is provided', () => {
+      render(
+        <Sidebar entries={mockEntries} selection={defaultSelection} onSelect={() => {}} onCreateNewType={() => {}} />
+      )
+      expect(screen.getByTestId('create-type-btn')).toBeInTheDocument()
+    })
+
+    it('does not render + button when onCreateNewType is not provided', () => {
+      render(
+        <Sidebar entries={mockEntries} selection={defaultSelection} onSelect={() => {}} />
+      )
+      expect(screen.queryByTestId('create-type-btn')).not.toBeInTheDocument()
+    })
+
+    it('calls onCreateNewType when + button is clicked', () => {
+      const onCreateNewType = vi.fn()
+      render(
+        <Sidebar entries={mockEntries} selection={defaultSelection} onSelect={() => {}} onCreateNewType={onCreateNewType} />
+      )
+      fireEvent.click(screen.getByTestId('create-type-btn'))
+      expect(onCreateNewType).toHaveBeenCalledOnce()
+    })
+  })
 })
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index d6ee9ab4..5ed47019 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -334,6 +334,7 @@ export const Sidebar = memo(function Sidebar({
   onToggleTypeVisibility, onSelectFavorite, onReorderFavorites,
   views = [], onCreateView, onEditView, onDeleteView,
   folders = [], onCreateFolder, inboxCount = 0, onCollapse,
+  onCreateNewType,
 }: SidebarProps) {
   const [customizeTarget, setCustomizeTarget] = useState<string | null>(null)
   const [contextMenuPos, setContextMenuPos] = useState<{ x: number; y: number } | null>(null)
@@ -499,14 +500,24 @@ export const Sidebar = memo(function Sidebar({
                 {groupCollapsed.sections ? <CaretRight size={12} /> : <CaretDown size={12} />}
                 <span className="text-[10px] font-semibold" style={{ letterSpacing: 0.5 }}>TYPES</span>
               </div>
-              <span
-                role="button"
-                title="Customize sections"
-                aria-label="Customize sections"
-                onClick={(e) => { e.stopPropagation(); setShowCustomize((v) => !v) }}
-              >
-                <SlidersHorizontal size={12} className="text-muted-foreground hover:text-foreground" />
-              </span>
+              <div className="flex items-center gap-1.5">
+                <span
+                  role="button"
+                  title="Customize sections"
+                  aria-label="Customize sections"
+                  onClick={(e) => { e.stopPropagation(); setShowCustomize((v) => !v) }}
+                >
+                  <SlidersHorizontal size={12} className="text-muted-foreground hover:text-foreground" />
+                </span>
+                {onCreateNewType && (
+                  <Plus
+                    size={12}
+                    className="text-muted-foreground hover:text-foreground"
+                    data-testid="create-type-btn"
+                    onClick={(e) => { e.stopPropagation(); onCreateNewType() }}
+                  />
+                )}
+              </div>
             </button>
             {showCustomize && <VisibilityPopover sections={allSectionGroups} isSectionVisible={isSectionVisible} onToggle={toggleVisibility} />}
           </div>