tabby-tabbyspaces 0.0.1 → 0.2.0

package/src/components/workspaceEditor.component.ts

@@ -1,13 +1,22 @@
-import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core'
+import { Component, Input, Output, EventEmitter, OnInit, OnChanges, AfterViewInit, SimpleChanges, HostListener, ElementRef, ViewChild, ChangeDetectorRef } from '@angular/core'
 import {
   Workspace,
   WorkspacePane,
   WorkspaceSplit,
+  WorkspaceBackground,
   TabbyProfile,
   isWorkspaceSplit,
   createDefaultPane,
   generateUUID,
+  BACKGROUND_PRESETS,
 } from '../models/workspace.model'
+
+interface TreeContext {
+  node: WorkspaceSplit
+  index: number
+  parent: WorkspaceSplit | null
+  child: WorkspacePane | WorkspaceSplit
+}
 import { WorkspaceEditorService } from '../services/workspaceEditor.service'
 
 @Component({
@@ -15,12 +24,17 @@ import { WorkspaceEditorService } from '../services/workspaceEditor.service'
   template: require('./workspaceEditor.component.pug'),
   styles: [require('./workspaceEditor.component.scss')],
 })
-export class WorkspaceEditorComponent implements OnInit {
+export class WorkspaceEditorComponent implements OnInit, OnChanges, AfterViewInit {
   @Input() workspace!: Workspace
+  @Input() autoFocus = false
+  @Input() hasUnsavedChanges = false
   @Output() save = new EventEmitter<Workspace>()
   @Output() cancel = new EventEmitter<void>()
 
-  selectedPane: WorkspacePane | null = null
+  @ViewChild('nameInput') nameInput!: ElementRef<HTMLInputElement>
+
+  selectedPaneId: string | null = null
+  editingPane: WorkspacePane | null = null
   showPaneEditor = false
   profiles: TabbyProfile[] = []
   availableIcons = [
@@ -28,11 +42,141 @@ export class WorkspaceEditorComponent implements OnInit {
     'cog', 'database', 'server', 'cloud', 'rocket', 'flask',
     'bug', 'wrench', 'cube', 'layer-group', 'sitemap', 'project-diagram'
   ]
+  iconDropdownOpen = false
+  backgroundPresets = BACKGROUND_PRESETS
+  backgroundDropdownOpen = false
+  customBackgroundValue = ''
+
+  constructor(
+    private workspaceService: WorkspaceEditorService,
+    private elementRef: ElementRef,
+    private cdr: ChangeDetectorRef
+  ) {}
+
+  @HostListener('document:click', ['$event'])
+  onDocumentClick(event: MouseEvent): void {
+    // Check if click is outside the icon dropdown area (trigger + dropdown)
+    const dropdownTrigger = this.elementRef.nativeElement.querySelector('.dropdown-trigger')
+    const iconDropdown = this.elementRef.nativeElement.querySelector('.icon-dropdown')
+    const iconClickedInside = dropdownTrigger?.contains(event.target as Node) ||
+                          iconDropdown?.contains(event.target as Node)
+    if (this.iconDropdownOpen && !iconClickedInside) {
+      this.iconDropdownOpen = false
+    }
+
+    // Check if click is outside the background dropdown area
+    const bgTrigger = this.elementRef.nativeElement.querySelector('.background-trigger')
+    const bgDropdown = this.elementRef.nativeElement.querySelector('.background-dropdown')
+    const bgClickedInside = bgTrigger?.contains(event.target as Node) ||
+                            bgDropdown?.contains(event.target as Node)
+    if (this.backgroundDropdownOpen && !bgClickedInside) {
+      this.backgroundDropdownOpen = false
+    }
+  }
+
+  toggleIconDropdown(): void {
+    this.iconDropdownOpen = !this.iconDropdownOpen
+  }
+
+  selectIcon(icon: string): void {
+    this.workspace.icon = icon
+    this.iconDropdownOpen = false
+  }
+
+  toggleBackgroundDropdown(): void {
+    this.backgroundDropdownOpen = !this.backgroundDropdownOpen
+  }
+
+  selectBackgroundPreset(preset: WorkspaceBackground): void {
+    if (preset.type === 'none') {
+      this.workspace.background = undefined
+      this.customBackgroundValue = ''
+    } else {
+      this.workspace.background = { ...preset }
+      this.customBackgroundValue = preset.value
+    }
+    this.backgroundDropdownOpen = false
+  }
+
+  applyCustomBackground(): void {
+    const value = this.customBackgroundValue.trim()
+    if (value) {
+      this.workspace.background = {
+        type: 'gradient',
+        value
+      }
+    } else {
+      this.workspace.background = undefined
+    }
+  }
+
+  clearBackground(): void {
+    this.workspace.background = undefined
+    this.customBackgroundValue = ''
+  }
 
-  constructor(private workspaceService: WorkspaceEditorService) {}
+  isBackgroundSelected(preset: WorkspaceBackground): boolean {
+    if (preset.type === 'none') {
+      return !this.workspace.background || this.workspace.background.type === 'none'
+    }
+    return this.workspace.background?.value === preset.value
+  }
 
   async ngOnInit(): Promise<void> {
     this.profiles = await this.workspaceService.getAvailableProfiles()
+    this.initializeWorkspace()
+    this.cdr.detectChanges()
+  }
+
+  ngAfterViewInit(): void {
+    if (this.autoFocus) {
+      this.focusNameInput()
+    }
+  }
+
+  private focusNameInput(): void {
+    requestAnimationFrame(() => {
+      setTimeout(() => {
+        if (this.nameInput?.nativeElement) {
+          this.nameInput.nativeElement.focus()
+          this.nameInput.nativeElement.select()
+        }
+      }, 0)
+    })
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['workspace'] && !changes['workspace'].firstChange) {
+      const prevId = changes['workspace'].previousValue?.id
+      const currId = this.workspace.id
+
+      if (prevId !== currId) {
+        // Different workspace - reset everything and focus name input
+        this.selectedPaneId = null
+        this.editingPane = null
+        this.showPaneEditor = false
+        this.focusNameInput()
+      } else {
+        // Same workspace ID but different reference (after save/reload)
+        // Re-sync editingPane to point to pane in new object tree
+        if (this.selectedPaneId && this.showPaneEditor) {
+          this.editingPane = this.findPaneById(this.selectedPaneId)
+        }
+      }
+      // Always reset dropdowns and sync background value
+      this.iconDropdownOpen = false
+      this.backgroundDropdownOpen = false
+      this.customBackgroundValue = this.workspace.background?.value || ''
+      this.initializeWorkspace()
+    }
+
+    // Handle autoFocus change
+    if (changes['autoFocus']?.currentValue) {
+      this.focusNameInput()
+    }
+  }
+
+  private initializeWorkspace(): void {
     if (!this.workspace.root) {
       this.workspace.root = {
         orientation: 'horizontal',
@@ -53,69 +197,127 @@ export class WorkspaceEditorComponent implements OnInit {
     this.cancel.emit()
   }
 
-  selectPane(pane: WorkspacePane): void {
-    this.selectedPane = pane
+  deselectPane(): void {
+    this.selectedPaneId = null
+  }
+
+  onPreviewBackgroundClick(): void {
+    this.deselectPane()
+    this.closePaneEditor()
+  }
+
+  editPane(pane: WorkspacePane): void {
+    this.selectedPaneId = pane.id
+    this.editingPane = pane
     this.showPaneEditor = true
+    this.cdr.detectChanges()
   }
 
   closePaneEditor(): void {
     this.showPaneEditor = false
-    this.selectedPane = null
+    this.editingPane = null
+    this.cdr.detectChanges()
   }
 
-  onPaneSave(pane: WorkspacePane): void {
-    this.updatePaneInTree(this.workspace.root, pane)
-    this.closePaneEditor()
+  // Helper functions
+  private findPaneById(id: string): WorkspacePane | null {
+    return this.findPaneInNode(this.workspace.root, id)
+  }
+
+  private findPaneInNode(node: WorkspaceSplit, id: string): WorkspacePane | null {
+    for (const child of node.children) {
+      if (isWorkspaceSplit(child)) {
+        const found = this.findPaneInNode(child, id)
+        if (found) return found
+      } else if (child.id === id) {
+        return child
+      }
+    }
+    return null
   }
 
-  private updatePaneInTree(node: WorkspaceSplit, updatedPane: WorkspacePane): boolean {
+  canRemovePane(): boolean {
+    return this.countPanes(this.workspace.root) > 1
+  }
+
+  private countPanes(node: WorkspaceSplit): number {
+    return node.children.reduce((count, child) => {
+      return count + (isWorkspaceSplit(child) ? this.countPanes(child) : 1)
+    }, 0)
+  }
+
+  private walkTree(
+    node: WorkspaceSplit,
+    visitor: (ctx: TreeContext) => boolean,
+    parent: WorkspaceSplit | null = null
+  ): boolean {
     for (let i = 0; i < node.children.length; i++) {
       const child = node.children[i]
+      const ctx: TreeContext = { node, index: i, parent, child }
+
       if (isWorkspaceSplit(child)) {
-        if (this.updatePaneInTree(child, updatedPane)) {
-          return true
-        }
-      } else if (child.id === updatedPane.id) {
-        node.children[i] = updatedPane
+        if (this.walkTree(child, visitor, node)) return true
+      } else if (visitor(ctx)) {
         return true
       }
     }
     return false
   }
 
+  private updatePaneInTree(updatedPane: WorkspacePane): boolean {
+    return this.walkTree(this.workspace.root, (ctx) => {
+      if ((ctx.child as WorkspacePane).id === updatedPane.id) {
+        ctx.node.children[ctx.index] = updatedPane
+        return true
+      }
+      return false
+    })
+  }
+
   splitPane(pane: WorkspacePane, orientation: 'horizontal' | 'vertical'): void {
-    this.splitPaneInTree(this.workspace.root, pane, orientation)
+    this.splitPaneInTree(pane, orientation)
+    this.cdr.detectChanges()
+  }
+
+  splitSelectedPane(orientation: 'horizontal' | 'vertical'): void {
+    if (!this.selectedPaneId) return
+    const pane = this.findPaneById(this.selectedPaneId)
+    if (pane) this.splitPane(pane, orientation)
   }
 
   private splitPaneInTree(
-    node: WorkspaceSplit,
     targetPane: WorkspacePane,
     orientation: 'horizontal' | 'vertical'
   ): boolean {
-    for (let i = 0; i < node.children.length; i++) {
-      const child = node.children[i]
-      if (isWorkspaceSplit(child)) {
-        if (this.splitPaneInTree(child, targetPane, orientation)) {
-          return true
-        }
-      } else if (child.id === targetPane.id) {
+    return this.walkTree(this.workspace.root, (ctx) => {
+      if ((ctx.child as WorkspacePane).id === targetPane.id) {
         const newPane = createDefaultPane()
-        newPane.profileId = child.profileId // Copy profile from source pane
+        newPane.profileId = (ctx.child as WorkspacePane).profileId
         const newSplit: WorkspaceSplit = {
           orientation,
           ratios: [0.5, 0.5],
-          children: [child, newPane],
+          children: [ctx.child, newPane],
         }
-        node.children[i] = newSplit
-        this.recalculateRatios(node)
+        ctx.node.children[ctx.index] = newSplit
+        this.recalculateRatios(ctx.node)
         return true
       }
-    }
-    return false
+      return false
+    })
   }
 
   removePane(pane: WorkspacePane): void {
+    if (this.selectedPaneId === pane.id) {
+      this.selectedPaneId = null
+    }
     this.removePaneFromTree(this.workspace.root, pane)
+    this.cdr.detectChanges()
+  }
+
+  removeSelectedPane(): void {
+    if (!this.selectedPaneId || !this.canRemovePane()) return
+    const pane = this.findPaneById(this.selectedPaneId)
+    if (pane) this.removePane(pane)
   }
 
   private removePaneFromTree(node: WorkspaceSplit, targetPane: WorkspacePane): boolean {
@@ -156,6 +358,7 @@ export class WorkspaceEditorComponent implements OnInit {
 
   setOrientation(orientation: 'horizontal' | 'vertical'): void {
     this.workspace.root.orientation = orientation
+    this.cdr.detectChanges()
   }
 
   updateRatio(index: number, value: number): void {
@@ -176,6 +379,66 @@ export class WorkspaceEditorComponent implements OnInit {
     })
 
     this.workspace.root.ratios = ratios
+    this.cdr.detectChanges()
+  }
+
+  // Add pane operations
+  addPane(direction: 'left' | 'right' | 'top' | 'bottom'): void {
+    if (!this.selectedPaneId) return
+    const pane = this.findPaneById(this.selectedPaneId)
+    if (!pane) return
+    this.addPaneInTree(pane, direction)
+    this.cdr.detectChanges()
+  }
+
+  addPaneFromEvent(pane: WorkspacePane, direction: 'left' | 'right' | 'top' | 'bottom'): void {
+    this.addPaneInTree(pane, direction)
+    this.cdr.detectChanges()
+  }
+
+  private addPaneInTree(
+    targetPane: WorkspacePane,
+    direction: 'left' | 'right' | 'top' | 'bottom'
+  ): boolean {
+    const isHorizontalAdd = direction === 'left' || direction === 'right'
+    const isBefore = direction === 'left' || direction === 'top'
+    const targetOrientation = isHorizontalAdd ? 'horizontal' : 'vertical'
+
+    return this.walkTree(this.workspace.root, (ctx) => {
+      if ((ctx.child as WorkspacePane).id !== targetPane.id) return false
+
+      const newPane = createDefaultPane()
+      newPane.profileId = (ctx.child as WorkspacePane).profileId
+
+      if (ctx.node.orientation === targetOrientation) {
+        // Same orientation: add as sibling
+        const insertIndex = isBefore ? ctx.index : ctx.index + 1
+        ctx.node.children.splice(insertIndex, 0, newPane)
+        this.recalculateRatios(ctx.node)
+      } else {
+        // Different orientation: wrap entire node in new split
+        const nodeCopy: WorkspaceSplit = {
+          orientation: ctx.node.orientation,
+          ratios: [...ctx.node.ratios],
+          children: [...ctx.node.children]
+        }
+        const wrapper: WorkspaceSplit = {
+          orientation: targetOrientation,
+          ratios: [0.5, 0.5],
+          children: isBefore ? [newPane, nodeCopy] : [nodeCopy, newPane]
+        }
+
+        if (ctx.node === this.workspace.root) {
+          this.workspace.root = wrapper
+        } else if (ctx.parent) {
+          const nodeIndex = ctx.parent.children.indexOf(ctx.node)
+          if (nodeIndex !== -1) {
+            ctx.parent.children[nodeIndex] = wrapper
+          }
+        }
+      }
+      return true
+    })
   }
 
 }

package/src/components/workspaceList.component.pug

@@ -1,46 +1,37 @@
 .workspace-list-container
-  .workspace-list-header
-    h3 Workspace Editor
-    button.btn.btn-primary(type='button', (click)='createWorkspace()')
-      i.fas.fa-plus
-      |  New Workspace
+  //- Tab bar navigation
+  .tab-bar
+    .tab(
+      *ngFor='let tab of displayTabs; trackBy: trackByTab',
+      [class.active]='isTabSelected(tab)',
+      (click)='!tab.isNew && selectWorkspace(tab.workspace)'
+    )
+      span.tab-icon([style.color]='tab.workspace.color')
+        i.fas([class]='"fa-" + (tab.workspace.icon || "columns")')
+      span.tab-name {{ tab.workspace.name || 'New Workspace' }}
+      span.tab-close(
+        *ngIf='!tab.isNew',
+        (click)='deleteWorkspace($event, tab.workspace)',
+        title='Delete workspace'
+      )
+        i.fas.fa-xmark
 
-  .workspace-list(*ngIf='workspaces.length > 0')
-    .workspace-item(*ngFor='let workspace of workspaces')
-      .workspace-info
-        .workspace-icon([style.color]='workspace.color')
-          i.fas([class]='"fa-" + (workspace.icon || "columns")')
-        .workspace-details
-          .workspace-name {{ workspace.name }}
-          .workspace-meta
-            span {{ getPaneCount(workspace) }} panes
-            span.separator ·
-            span {{ getOrientationLabel(workspace) }}
-            span.separator(*ngIf='workspace.isDefault') ·
-            span.badge.badge-primary(*ngIf='workspace.isDefault') default
+    .tab-new((click)='createWorkspace()', title='New workspace')
+      i.fas.fa-plus
 
-      .workspace-actions
-        button.btn.btn-link(
-          type='button',
-          title='Set as default',
-          (click)='setAsDefault(workspace)',
-          [class.active]='workspace.isDefault'
-        )
-          i.fas.fa-star
-        button.btn.btn-link(type='button', title='Duplicate', (click)='duplicateWorkspace(workspace)')
-          i.fas.fa-copy
-        button.btn.btn-link(type='button', title='Edit', (click)='editWorkspace(workspace)')
-          i.fas.fa-edit
-        button.btn.btn-link.text-danger(type='button', title='Delete', (click)='deleteWorkspace(workspace)')
-          i.fas.fa-trash
+  //- Tab content (editor)
+  .tab-content(*ngIf='editingWorkspace')
+    workspace-editor(
+      [workspace]='editingWorkspace',
+      [autoFocus]='isCreatingNew',
+      [hasUnsavedChanges]='hasUnsavedChanges',
+      (save)='onEditorSave($event)',
+      (cancel)='onEditorCancel()'
+    )
 
-  .workspace-empty(*ngIf='workspaces.length === 0')
+  //- Empty state (when no workspaces)
+  .tab-content.empty-state(*ngIf='!editingWorkspace && workspaces.length === 0')
     p No workspaces configured yet.
-    p Click "New Workspace" to create your first split-layout workspace.
-
-workspace-editor(
-  *ngIf='showEditor',
-  [workspace]='editingWorkspace',
-  (save)='onEditorSave($event)',
-  (cancel)='closeEditor()'
-)
+    p Click
+      strong +
+      | to create your first workspace.

package/src/components/workspaceList.component.scss

@@ -1,112 +1,127 @@
+@use '../styles/index' as *;
+
 .workspace-list-container {
-  padding: 20px;
-  max-width: 800px;
+  padding: $spacing-2xl;
 }
 
-.workspace-list-header {
+// Tab bar
+.tab-bar {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20px;
+  background: var(--theme-bg-more);
+  border: 1px solid var(--theme-border, $fallback-border);
+  border-bottom: none;
+  overflow-y: hidden;
+  overflow-x: auto;
+
+  // Thin scrollbar
+  &::-webkit-scrollbar {
+    height: 6px;
+  }
 
-  h3 {
-    margin: 0;
-    font-size: 1.5rem;
+  &::-webkit-scrollbar-track {
+    background: var(--theme-bg-more);
   }
-}
 
-.workspace-list {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
+  &::-webkit-scrollbar-thumb {
+    background: var(--theme-border, $fallback-border);
+    border-radius: 3px;
+
+    &:hover {
+      background: var(--theme-fg-more);
+    }
+  }
 }
 
-.workspace-item {
+.tab {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  padding: 16px;
-  background: var(--theme-bg-more);
-  border-radius: 8px;
-  border: 1px solid var(--theme-border);
-  transition: background 0.2s;
+  gap: $spacing-md;
+  padding: $spacing-md $spacing-lg;
+  border-right: 1px solid var(--theme-border, $fallback-border);
+  color: var(--theme-fg-more);
+  cursor: pointer;
+  font-size: $font-sm;
+  min-width: 120px;
+  transition: background $transition-fast;
 
   &:hover {
     background: var(--theme-bg-more-more);
+
+    .tab-close {
+      opacity: 1;
+    }
+  }
+
+  &.active {
+    background: var(--theme-bg);
+    color: var(--theme-fg);
+    border-bottom: 2px solid var(--theme-primary);
+    margin-bottom: -1px;
   }
 }
 
-.workspace-info {
-  display: flex;
-  align-items: center;
-  gap: 16px;
+.tab-icon {
+  font-size: 12px;
 }
 
-.workspace-icon {
-  font-size: 24px;
-  width: 40px;
-  text-align: center;
+.tab-name {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.workspace-details {
+.tab-close {
+  width: 16px;
+  height: 16px;
   display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  font-size: 9px;
+  border-radius: $radius-xs;
+  transition: opacity $transition-fast, background $transition-fast;
 
-.workspace-name {
-  font-size: 1.1rem;
-  font-weight: 500;
+  &:hover {
+    background: var(--theme-danger);
+    color: white;
+  }
 }
 
-.workspace-meta {
-  font-size: 0.85rem;
+.tab-new {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
   color: var(--theme-fg-more);
+  cursor: pointer;
+  transition: color $transition-fast, background $transition-fast;
 
-  .separator {
-    margin: 0 6px;
-  }
-
-  .badge {
-    font-size: 0.75rem;
-    padding: 2px 6px;
-    border-radius: 4px;
-    background: var(--theme-primary);
-    color: white;
+  &:hover {
+    background: var(--theme-bg-more-more);
+    color: var(--theme-primary);
   }
 }
 
-.workspace-actions {
-  display: flex;
-  gap: 4px;
+// Tab content
+.tab-content {
+  background: var(--theme-bg);
+  border: 1px solid var(--theme-border, $fallback-border);
+  border-top: none;
+  padding: $spacing-xl;
 
-  .btn-link {
-    padding: 8px;
+  &.empty-state {
+    text-align: center;
+    padding: $spacing-2xl;
     color: var(--theme-fg-more);
-    opacity: 0.7;
-    transition: opacity 0.2s;
 
-    &:hover {
-      opacity: 1;
-    }
-
-    &.active {
-      color: gold;
-      opacity: 1;
+    p {
+      margin: $spacing-md 0;
     }
 
-    &.text-danger:hover {
-      color: var(--theme-danger);
+    strong {
+      color: var(--theme-primary);
+      padding: 0 $spacing-xs;
     }
   }
 }
-
-.workspace-empty {
-  text-align: center;
-  padding: 40px;
-  color: var(--theme-fg-more);
-
-  p {
-    margin: 8px 0;
-  }
-}