Add plus button tab (#54)

Co-authored-by: Claude <[email protected]>

Author: jonathanlab

.posthog/eab37807-a48e-410a-90de-3cd2ad0bf59a/plan.md

@@ -0,0 +1,107 @@
+I'll analyze the codebase to create a detailed implementation plan for adding a plus button tab based on the requirements.
+Now let me check how the command menu is implemented to understand how to open it:
+Perfect! Now let me check for the PlusIcon import to confirm it's available:
+Excellent! Now I have all the information I need. Let me create a comprehensive implementation plan based on the requirements:
+
+**Requirements Summary:**
+1. Add a plus button tab next to existing tabs
+2. Should be inside the scrollable area
+3. Should match tab styling
+4. Should open the Command Box when clicked
+# Implementation Plan: Add Plus Button Tab
+
+**Task ID:** eab37807-a48e-410a-90de-3cd2ad0bf59a  
+**Generated:** 2025-10-22
+
+## Summary
+
+Add a plus button tab positioned after the last tab within the scrollable tab bar area. The button will match existing tab styling and open the Command Menu (Command Box) when clicked. This provides a quick visual way for users to access the command palette without keyboard shortcuts.
+
+## Implementation Steps
+
+### 1. Analysis ✓
+- ✅ Identified TabBar component location: `/Users/jonathan/dev/Array/src/renderer/components/TabBar.tsx`
+- ✅ Reviewed tab styling patterns: borders, hover states, transitions
+- ✅ Confirmed PlusIcon availability from `@radix-ui/react-icons`
+- ✅ Identified Command Menu integration pattern in MainLayout
+
+### 2. Core Implementation
+- [ ] Add `onOpenCommandMenu` callback prop to TabBar component
+- [ ] Import PlusIcon from `@radix-ui/react-icons`
+- [ ] Add plus button inside scrollable Flex container, after the tabs.map() loop
+- [ ] Style button to match tab appearance (same height, borders, colors, hover states)
+- [ ] Wire up onClick handler to call `onOpenCommandMenu`
+- [ ] Ensure button scrolls with tabs (already inside scrollable container)
+
+### 3. Integration with MainLayout
+- [ ] Pass `setCommandMenuOpen` callback to TabBar as `onOpenCommandMenu` prop
+- [ ] Test that clicking plus button opens the Command Menu
+
+## File Changes
+
+### Modified Files
+
+**`/Users/jonathan/dev/Array/src/renderer/components/TabBar.tsx`**
+- Add `onOpenCommandMenu?: () => void` to component props interface
+- Import `PlusIcon` from `@radix-ui/react-icons`
+- Add plus button element after tabs.map() loop, inside the scrollable Flex container
+- Style to match tab appearance:
+  - Same 40px height constraint
+  - Similar border styling (border-gray-6, border-r)
+  - Same hover state (hover:bg-gray-3, hover:text-gray-12)
+  - Text color: text-gray-11 (muted state)
+  - Padding: px-4 (matches tabs)
+  - Transitions: transition-colors
+  - Use Flex for centering the icon
+  - Apply `no-drag` class for proper window dragging behavior
+
+**`/Users/jonathan/dev/Array/src/renderer/components/MainLayout.tsx`**
+- Pass `onOpenCommandMenu={() => setCommandMenuOpen(true)}` prop to `<TabBar />` component
+
+## Considerations
+
+### Design Decisions
+- **Positioning**: Inside scrollable area (as specified) - button will scroll with tabs if many tabs are open
+- **Styling**: Matches tab appearance with subtle differentiation (no active state since it's an action button)
+- **Icon**: Using PlusIcon which is consistent with existing UI patterns in the app
+
+### Visual Consistency
+- Button uses same height (40px) as tabs
+- Same border and spacing treatment
+- Same hover interaction pattern
+- Subtle appearance to not compete with tabs, but discoverable
+
+### Interaction Behavior
+- Clicking opens Command Menu (same as Cmd+K, Cmd+P, Cmd+T shortcuts)
+- Button remains visible but scrolls with tabs when needed
+- No active/selected state needed (it's a trigger, not a destination)
+
+### Accessibility
+- Uses semantic button interaction
+- Consistent with existing keyboard shortcuts
+- Visual icon is universally understood (plus = add/create/open)
+
+### Edge Cases
+- Button will scroll if tabs overflow (matches spec: "inside scrollable area")
+- Works independently of tab count
+- Does not interfere with drag-and-drop tab reordering
+
+### Testing Approach
+1. Verify plus button appears after last tab
+2. Confirm button matches tab styling visually
+3. Test clicking opens Command Menu
+4. Verify button scrolls with tabs when many tabs are open
+5. Ensure hover states work correctly
+6. Check that tab drag-and-drop still works
+7. Test with different tab counts (1 tab, many tabs)
+
+---
+
+*Generated by PostHog Agent*
+
+The plan is ready for your review! This is a straightforward implementation that requires:
+- **2 files modified** (TabBar.tsx and MainLayout.tsx)
+- **No new files needed**
+- **Simple prop passing** to wire up the command menu
+
+The plus button will be visually integrated with the existing tabs while serving as a discoverable trigger for the Command Menu.

.posthog/eab37807-a48e-410a-90de-3cd2ad0bf59a/questions.json

@@ -0,0 +1,44 @@
+{
+  "questions": [
+    {
+      "id": "1",
+      "question": "What should the plus button do when clicked?",
+      "options": ["Open task modal", "Create new tab", "Something else"]
+    },
+    {
+      "id": "2",
+      "question": "Where should it be placed?",
+      "options": ["Inside scrollable area", "Fixed position", "Something else"]
+    },
+    {
+      "id": "3",
+      "question": "Should it match tab styling or use a button-like appearance?",
+      "options": [
+        "Match tab styling",
+        "Use a button-like appearance",
+        "Something else"
+      ]
+    },
+    {
+      "id": "4",
+      "question": "Any keyboard shortcuts needed?",
+      "options": ["Yes, specify", "No", "Something else"]
+    }
+  ],
+  "answered": true,
+  "answers": [
+    {
+      "questionId": "1",
+      "selectedOption": "Something else",
+      "customInput": "Open the Command Box"
+    },
+    {
+      "questionId": "2",
+      "selectedOption": "Inside scrollable area"
+    },
+    {
+      "questionId": "3",
+      "selectedOption": "Match tab styling"
+    }
+  ]
+}

.posthog/eab37807-a48e-410a-90de-3cd2ad0bf59a/research.md

@@ -0,0 +1,47 @@
+I'll explore the codebase to understand how tabs are implemented and generate clarifying questions for adding a plus button tab.
+Great! Let me examine the TabBar component which is likely where I need to add the plus button.
+Perfect! Now let me check the tab store to understand how tabs are created:
+Now let me check for icon usage in the codebase to see what plus icon is available:
+Perfect! Now let me check the shared types to understand tab types better:
+Now let me check the CommandMenu to see how new tabs can be created via the command menu:
+Now let me search for how buttons are styled in the application to match the visual style:
+Let me check the StatusBar to see if there are any similar button implementations:
+Excellent! Now I have a comprehensive understanding of the codebase. Let me create the research questions based on my findings.
+
+Based on my analysis of the codebase, I can now create clarifying questions for implementing the plus button tab feature. Here's what I've learned:
+
+1. **TabBar Component** (`/Users/jonathan/dev/Array/src/renderer/components/TabBar.tsx`): Contains the tab rendering logic with drag-and-drop support, keyboard shortcuts, and close buttons
+2. **Tab Store** (`/Users/jonathan/dev/Array/src/renderer/stores/tabStore.ts`): Manages tab state with `createTab` function
+3. **Tab Types**: Defined in `/Users/jonathan/dev/Array/src/shared/types.ts` - currently supports "task-list", "task-detail", "backlog", "settings", "recordings"
+4. **Icon Usage**: The app uses `@radix-ui/react-icons` (e.g., `PlusIcon` is available and used in TaskList)
+5. **Button Styling**: Uses `IconButton` from `@radix-ui/themes` with variants like "ghost" and size options
+
+Now let me create the research questions:
+I've completed my research of the codebase and identified the key implementation questions. Here's what I found:
+
+## Codebase Analysis Summary
+
+**Key Files:**
+- `TabBar.tsx` - Main tab rendering component with drag-and-drop, keyboard shortcuts (Cmd+1-9, Cmd+W, etc.)
+- `tabStore.ts` - Zustand store managing tab state with `createTab()` function
+- `types.ts` - Defines TabState with types: "task-list", "task-detail", "backlog", "settings", "recordings"
+- The app uses `@radix-ui/react-icons` (PlusIcon available) and `@radix-ui/themes` components
+
+**Current Tab Structure:**
+- Tabs are in a scrollable container with a 40px height
+- Each tab has similar styling with borders, hover states, and active indicators
+- Tabs support drag-and-drop reordering and context menus
+- Close buttons appear on hover (except when only 1 tab exists)
+
+## Clarifying Questions
+
+I've identified 4 key questions that will guide the implementation:
+
+1. **Functionality**: What should the plus button do when clicked? (Open task modal vs create new tab)
+2. **Positioning**: Where should it be placed? (Inside scrollable area vs fixed position)
+3. **Styling**: Should it match tab styling or use a button-like appearance?
+4. **Interactions**: Any keyboard shortcuts needed?
+
+Each question includes 2-3 concrete options based on existing patterns I found in the codebase, plus a "something else" option for flexibility.
+
+Ready to present these questions for your input!

src/renderer/components/MainLayout.tsx

@@ -84,7 +84,7 @@ export function MainLayout() {
 
   return (
     <Flex direction="column" height="100vh">
-      <TabBar />
+      <TabBar onOpenCommandMenu={() => setCommandMenuOpen(true)} />
 
       <Box flexGrow="1" overflow="hidden">
         {activeTab?.type === "task-list" && (

src/renderer/components/TabBar.tsx

@@ -1,4 +1,4 @@
-import { Cross2Icon } from "@radix-ui/react-icons";
+import { Cross2Icon, PlusIcon } from "@radix-ui/react-icons";
 import {
   Box,
   ContextMenu,
@@ -12,7 +12,11 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import { useTabStore } from "../stores/tabStore";
 
-export function TabBar() {
+interface TabBarProps {
+  onOpenCommandMenu?: () => void;
+}
+
+export function TabBar({ onOpenCommandMenu }: TabBarProps) {
   const {
     tabs,
     activeTabId,
@@ -320,6 +324,19 @@ export function TabBar() {
             </ContextMenu.Root>
           );
         })}
+
+        {/* Plus button to open Command Menu */}
+        <Flex
+          className="no-drag cursor-pointer border-gray-6 border-r text-gray-11 transition-colors hover:bg-gray-3 hover:text-gray-12"
+          align="center"
+          justify="center"
+          px="4"
+          flexShrink="0"
+          onClick={() => onOpenCommandMenu?.()}
+          title="Open Command Menu"
+        >
+          <PlusIcon width="16" height="16" />
+        </Flex>
       </Flex>
 
       {showScrollGradient && (