diff --git a/CLAUDE.md b/CLAUDE.md index 49d65fb..ca1d4a1 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -56,10 +56,10 @@ src/ ## Styles -Modular DRY SCSS architecture. All components import `@import '../styles/index'`. +Modular DRY SCSS architecture. All components load shared styles via `@use '../styles/index' as *;`. - **Variables**: `$spacing-*`, `$radius-*`, `$color-*`, `$z-*`, `$transition-*` -- **Mixins**: `flex-row`, `form-input`, `interactive-card`, `toolbar-btn`, `btn-success`, etc. +- **Mixins**: Layout, form, card, and button patterns. See `src/styles/_mixins.scss` for the available mixins. - **Theming**: Uses Tabby's `--theme-*` CSS variables See `docs/DESIGN.md` for details. diff --git a/README.md b/README.md index a683b48..b8cfc57 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ Visual workspace editor for [Tabby](https://tabby.sh). Create split-layout termi - **Visual split editor** - Design layouts inline, not in modal dialogs. Split horizontally, vertically, nest to any depth - **Layout toolbar** - Select a pane, then split, add adjacent panes, or delete with toolbar buttons -- **Per-pane configuration** - Set profile, working directory, startup command, and custom title for each pane +- **Per-pane configuration** - Set profile, working directory, and startup command for each pane - **One-click launch** - Open workspaces instantly from the toolbar dropdown - **Launch on startup** - Auto-open multiple workspaces when Tabby starts - **Any shell** - Works with Bash, Zsh, PowerShell, Nushell, cmd, WSL, and any other shell Tabby supports @@ -47,7 +47,7 @@ Restart Tabby after installation. 1. **Open settings** - Settings > TabbySpaces 2. **Create workspace** - Click "New Workspace", name it 3. **Design layout** - Click a pane to select it, use toolbar to split (horizontal/vertical) -4. **Configure panes** - Hover over a pane, click the edit icon to set profile, cwd, startup command +4. **Configure panes** - Click a pane (or use its context menu) to set profile, cwd, startup command 5. **Save and launch** - Save changes, then click "Open" or use the toolbar dropdown ## Roadmap diff --git a/docs/DESIGN.md b/docs/DESIGN.md index c6a537f..a950771 100644 --- a/docs/DESIGN.md +++ b/docs/DESIGN.md @@ -16,12 +16,12 @@ src/styles/ All component SCSS files import shared styles: ```scss -@import '../styles/index'; +@use '../styles/index' as *; .my-component { padding: $spacing-md; border-radius: $radius-lg; - @include flex-row($spacing-sm); + @include flex-center; } ``` @@ -35,15 +35,15 @@ Key mixins available: | Mixin | Purpose | |-------|---------| -| `flex-row($gap)` | Horizontal flex with gap | -| `flex-col($gap)` | Vertical flex with gap | -| `flex-center` | Center content | -| `flex-between` | Space between | -| `form-input($bg)` | Styled input field | -| `interactive-card($radius)` | Clickable card with hover/selected states | -| `toolbar-btn` | Small toolbar button | +| `flex-center` | Center content with flexbox | +| `form-input($bg)` | Styled input field with focus state | +| `form-label` | Uppercase compact label (S1 design) | +| `toolbar-btn` | Small toolbar button with hover state | | `btn-success` | Green success button | -| `icon-btn-opacity` | Icon with hover opacity | +| `btn-base` | Base button styling with flex layout | +| `btn-ghost` | Ghost button with border | +| `btn-primary` | Primary button with theme color | +| `icon-btn-sm($size)` | Small icon button with border | | `full-overlay($z)` | Fixed fullscreen overlay | | `dropdown-panel` | Dropdown with border/shadow | | `text-ellipsis` | Truncate text with ellipsis | diff --git a/src/components/workspaceList.component.ts b/src/components/workspaceList.component.ts index 17a215d..072a816 100644 --- a/src/components/workspaceList.component.ts +++ b/src/components/workspaceList.component.ts @@ -98,16 +98,13 @@ export class WorkspaceListComponent implements OnInit, OnDestroy, AfterViewInit } createWorkspace(): void { - console.log('[L5 DEBUG] createWorkspace called, cachedProfiles:', this.cachedProfiles.length) const defaultProfileId = this.cachedProfiles[0]?.id || '' const workspace = createDefaultWorkspace() this.setProfileForAllPanes(workspace.root, defaultProfileId) this.selectedWorkspace = null this.editingWorkspace = workspace this.isCreatingNew = true - console.log('[L5 DEBUG] before updateDisplayTabs, isCreatingNew:', this.isCreatingNew, 'editingWorkspace:', !!this.editingWorkspace) this.updateDisplayTabs() - console.log('[L5 DEBUG] after updateDisplayTabs, displayTabs.length:', this.displayTabs.length) this.cdr.detectChanges() }