tabby-tabbyspaces 0.1.0 → 0.2.1

package/docs/SESSION-2026-01-14-S1-DESIGN.md

@@ -0,0 +1,134 @@
+# Session Summary: S1 Design Implementation
+**Date:** 2026-01-14
+**Branch:** design
+
+## Task
+Implement S1 "Tight & Sharp" design from `mockups/s1-tight-sharp.html` into TabbySpaces plugin.
+
+## Status: COMPLETED (Core Structure)
+
+### What Was Done
+
+#### 1. Tab Bar Navigation (workspaceList)
+- **Before:** Vertical card list with workspace items
+- **After:** Horizontal tab bar with colored icons, close buttons, and "+" button
+- **Files:** `workspaceList.component.pug`, `workspaceList.component.scss`
+
+#### 2. Editor Section Structure (workspaceEditor)
+- Added explicit sections with uppercase titles and icons:
+  - "WORKSPACE SETTINGS" (fa-cog)
+  - "SPLIT LAYOUT" (fa-columns)
+- **Files:** `workspaceEditor.component.pug`, `workspaceEditor.component.scss`
+
+#### 3. Dropdown Triggers
+- Icon picker: Styled as dropdown trigger with chevron
+- Color picker: Native input wrapped in dropdown-style trigger with chevron
+- **Files:** `workspaceEditor.component.pug`, `workspaceEditor.component.scss`
+
+#### 4. Inline Pane Editor (MAJOR CHANGE)
+- **Before:** Modal overlay with backdrop
+- **After:** Inline panel below split preview with:
+  - Header with title and close button
+  - 2-column grid form (Profile, CWD, Title, Command)
+  - Cancel/Apply buttons at bottom
+- **Files:** `paneEditor.component.pug`, `paneEditor.component.scss`, `paneEditor.component.ts`
+
+#### 5. Preview Toolbar
+- Reorganized toolbar above split preview:
+  - Edit (fa-pen)
+  - Split H (fa-grip-lines-vertical)
+  - Split V (fa-grip-lines)
+  - Separator
+  - Add Left/Right/Up/Down (fa-arrow-*)
+  - Separator
+  - Delete (fa-trash, danger style)
+- **Files:** `workspaceEditor.component.pug`, `workspaceEditor.component.scss`
+
+#### 6. Split Preview Container
+- Wrapped preview in bordered container with padding
+- **Files:** `workspaceEditor.component.scss`
+
+#### 7. Action Buttons
+- Footer with:
+  - Left: "Launch on startup" checkbox
+  - Right: Cancel (ghost), Save (success) buttons
+- **Files:** `workspaceEditor.component.pug`, `workspaceEditor.component.scss`
+
+### Files Modified
+
+```
+src/components/
+├── workspaceList.component.pug    # Tab bar structure
+├── workspaceList.component.scss   # Tab bar styles
+├── workspaceEditor.component.pug  # Sections, dropdowns, toolbar, inline pane editor
+├── workspaceEditor.component.scss # All new styles
+├── paneEditor.component.pug       # Inline panel (removed modal)
+├── paneEditor.component.scss      # Inline panel styles
+└── paneEditor.component.ts        # Removed modal-specific code
+```
+
+### Previously Done (before this session)
+- Variables (`_variables.scss`): S1 spacing, radius, shadows, fonts
+- Mixins (`_mixins.scss`): form-input, form-label, interactive-card
+- Color/icon picker size reduced to 28x28px
+
+### Build Status
+✅ Build successful (`npm run build:dev`)
+- Only Sass deprecation warnings (expected, @import rules)
+
+## What Might Need Attention
+
+### 1. Visual Testing Required
+- Restart Tabby and visually verify all changes
+- Test tab switching, pane selection, split/add operations
+- Check inline pane editor save/cancel flow
+
+### 2. Potential Issues to Watch
+- Tab close button might need adjustment (currently uses deleteWorkspace with confirm dialog)
+- Icon dropdown positioning (absolute, right-aligned)
+- Color picker trigger click area (hidden input overlay)
+
+### 3. Not Implemented (out of scope for this session)
+- Open/Duplicate buttons removed from UI (were on cards, not in tab bar)
+  - Could add to editor action buttons or tab context menu later
+- No mobile/responsive considerations
+
+## Reference: Mockup vs Implementation
+
+| Mockup Element | Implementation |
+|----------------|----------------|
+| `.tab-bar` | ✅ Implemented |
+| `.tab` with icon, name, close | ✅ Implemented |
+| `.tab-new` (+) | ✅ Implemented |
+| `.tab-content` | ✅ Implemented |
+| `.editor-section` | ✅ Implemented |
+| `.section-title` | ✅ Implemented |
+| `.form-row`, `.form-group` | ✅ Implemented |
+| `.dropdown-trigger` | ✅ Implemented |
+| `.color-trigger` | ✅ Implemented (native input wrapped) |
+| `.split-preview-container` | ✅ Implemented |
+| `.preview-toolbar` | ✅ Implemented |
+| `.preview-btn` | ✅ Implemented |
+| `.toolbar-separator` | ✅ Implemented |
+| `.pane-details` (inline panel) | ✅ Implemented |
+| `.pane-form` (2-col grid) | ✅ Implemented |
+| `.action-buttons` | ✅ Implemented |
+| `.checkbox-group` | ✅ Implemented |
+
+## Quick Start for Next Session
+
+```bash
+# Build and test
+cd C:\Users\halil\tabbyspaces
+npm run build:dev
+
+# Install if needed
+cd "$APPDATA/tabby/plugins" && npm install "C:/Users/halil/tabbyspaces/dist-dev"
+
+# Restart Tabby to see changes
+```
+
+## Key Files to Read
+- `mockups/s1-tight-sharp.html` - Target design
+- `src/styles/_variables.scss` - S1 spacing/radius values
+- `src/styles/_mixins.scss` - Reusable patterns

package/mockups/index.html

@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>TabbySpaces Design Mockups</title>
+  <link rel="stylesheet" href="shared/base.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  <style>
+    .mockup-container {
+      padding: var(--space-4xl);
+      max-width: 700px;
+      margin: 0 auto;
+    }
+
+    header {
+      text-align: center;
+      margin-bottom: var(--space-4xl);
+    }
+
+    header h1 {
+      font-size: var(--font-size-xl);
+      color: var(--theme-fg-more);
+      margin-bottom: var(--space-md);
+    }
+
+    header p {
+      color: var(--theme-fg-less);
+      font-size: var(--font-size-sm);
+    }
+
+    .variants-list {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-lg);
+    }
+
+    .variant-card {
+      display: block;
+      background: var(--theme-bg-more);
+      border: 1px solid var(--theme-border);
+      border-radius: var(--radius-lg);
+      padding: var(--space-xl);
+      text-decoration: none;
+      color: inherit;
+      transition: all var(--transition-normal);
+    }
+
+    .variant-card:hover {
+      border-color: var(--theme-primary);
+      transform: translateY(-2px);
+      box-shadow: var(--shadow-md);
+    }
+
+    .variant-badges {
+      display: flex;
+      gap: var(--space-sm);
+      margin-bottom: var(--space-md);
+    }
+
+    .variant-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--space-sm);
+      padding: var(--space-xs) var(--space-md);
+      border-radius: var(--radius-sm);
+      font-size: var(--font-size-xs);
+      font-weight: 600;
+    }
+
+    .variant-badge.selected {
+      background: var(--theme-success);
+      color: white;
+    }
+
+    .variant-badge.layout {
+      background: rgba(0,120,212,0.15);
+      color: var(--theme-primary);
+    }
+
+    .variant-badge.style {
+      background: rgba(16,185,129,0.15);
+      color: var(--theme-success);
+    }
+
+    .variant-card h3 {
+      font-size: var(--font-size-md);
+      color: var(--theme-fg-more);
+      margin-bottom: var(--space-sm);
+    }
+
+    .variant-card p {
+      font-size: var(--font-size-sm);
+      color: var(--theme-fg-less);
+      margin-bottom: var(--space-md);
+    }
+
+    .variant-specs {
+      display: flex;
+      gap: var(--space-lg);
+      flex-wrap: wrap;
+      font-size: var(--font-size-xs);
+      color: var(--theme-fg-less);
+    }
+
+    .variant-specs span {
+      display: flex;
+      align-items: center;
+      gap: var(--space-xs);
+    }
+
+    footer {
+      margin-top: var(--space-4xl);
+      text-align: center;
+      color: var(--theme-fg-less);
+      font-size: var(--font-size-xs);
+    }
+  </style>
+</head>
+<body>
+  <div class="mockup-container">
+    <header>
+      <h1><i class="fa-solid fa-palette"></i> TabbySpaces Design</h1>
+      <p>Selected layout and style for implementation</p>
+    </header>
+
+    <div class="variants-list">
+      <a href="v06-tabbed.html" class="variant-card">
+        <div class="variant-badges">
+          <span class="variant-badge selected"><i class="fa-solid fa-check"></i> Selected</span>
+          <span class="variant-badge layout">Layout</span>
+        </div>
+        <h3>V06 - Tabbed Interface</h3>
+        <p>Browser-tab metaphor for workspace switching. Tab bar with icons + names, "+" for new workspace. Full editor below with inline pane config and nested splits.</p>
+        <div class="variant-specs">
+          <span><i class="fa-solid fa-folder"></i> Tab-based nav</span>
+          <span><i class="fa-solid fa-columns"></i> Nested splits</span>
+          <span><i class="fa-solid fa-sliders"></i> Inline editing</span>
+        </div>
+      </a>
+
+      <a href="s1-tight-sharp.html" class="variant-card">
+        <div class="variant-badges">
+          <span class="variant-badge selected"><i class="fa-solid fa-check"></i> Selected</span>
+          <span class="variant-badge style">Style</span>
+        </div>
+        <h3>S1 - Tight & Sharp</h3>
+        <p>Compact spacing, sharp corners, flat aesthetic. IDE-like density that maximizes information without clutter.</p>
+        <div class="variant-specs">
+          <span><i class="fa-solid fa-compress"></i> Tight spacing</span>
+          <span><i class="fa-solid fa-square"></i> 2-4px radius</span>
+          <span><i class="fa-solid fa-minus"></i> Flat / no shadows</span>
+        </div>
+      </a>
+    </div>
+
+    <footer>
+      <p>Constraints: max-width 876px | Dark theme | Static HTML/CSS</p>
+    </footer>
+  </div>
+</body>
+</html>