tabby-tabbyspaces 0.0.1

package/src/components/workspaceEditor.component.pug

@@ -0,0 +1,84 @@
+.workspace-editor-overlay((click)='onCancel()')
+  .workspace-editor-modal((click)='$event.stopPropagation()')
+    .modal-header
+      h4 {{ workspace.id ? 'Edit' : 'New' }} Workspace
+      button.btn.btn-link.close-btn(type='button', (click)='onCancel()')
+        i.fas.fa-times
+
+    .modal-body
+      .form-row
+        .form-group.flex-grow
+          label Name
+          input.form-control(
+            type='text',
+            [(ngModel)]='workspace.name',
+            placeholder='Workspace name'
+          )
+
+      .form-row
+        .form-group
+          label Icon
+          .icon-selector
+            button.icon-option(
+              *ngFor='let icon of availableIcons',
+              type='button',
+              [class.selected]='workspace.icon === icon',
+              (click)='workspace.icon = icon'
+            )
+              i.fas([class]='"fa-" + icon')
+
+        .form-group
+          label Color
+          input.form-control.color-input(
+            type='color',
+            [(ngModel)]='workspace.color'
+          )
+
+      .form-row
+        .form-group
+          label
+            input(type='checkbox', [(ngModel)]='workspace.isDefault')
+            |  Launch on startup
+
+      .form-section
+        .section-header
+          h5 Layout Preview
+          .orientation-toggle
+            button.btn.btn-sm(
+              type='button',
+              [class.btn-primary]='workspace.root.orientation === "horizontal"',
+              [class.btn-outline-secondary]='workspace.root.orientation !== "horizontal"',
+              (click)='setOrientation("horizontal")'
+            )
+              i.fas.fa-arrows-alt-h
+              |  Horizontal
+            button.btn.btn-sm(
+              type='button',
+              [class.btn-primary]='workspace.root.orientation === "vertical"',
+              [class.btn-outline-secondary]='workspace.root.orientation !== "vertical"',
+              (click)='setOrientation("vertical")'
+            )
+              i.fas.fa-arrows-alt-v
+              |  Vertical
+
+        split-preview(
+          [split]='workspace.root',
+          (paneClick)='selectPane($event)',
+          (splitHorizontal)='splitPane($event, "horizontal")',
+          (splitVertical)='splitPane($event, "vertical")',
+          (removePane)='removePane($event)'
+        )
+
+    .modal-footer
+      button.btn.btn-secondary(type='button', (click)='onCancel()') Cancel
+      button.btn.btn-primary(type='button', (click)='onSave()', [disabled]='!workspace.name?.trim()')
+        i.fas.fa-save
+        |  Save Workspace
+
+pane-editor(
+  *ngIf='showPaneEditor && selectedPane',
+  [pane]='selectedPane',
+  [profiles]='profiles',
+  (save)='onPaneSave($event)',
+  (cancel)='closePaneEditor()'
+)

package/src/components/workspaceEditor.component.scss

@@ -0,0 +1,169 @@
+.workspace-editor-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.workspace-editor-modal {
+  background: var(--theme-bg);
+  border-radius: 12px;
+  width: 90%;
+  max-width: 700px;
+  max-height: 90vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--theme-border);
+
+  h4 {
+    margin: 0;
+    font-size: 1.25rem;
+  }
+
+  .close-btn {
+    font-size: 1.25rem;
+    color: var(--theme-fg-more);
+    padding: 4px 8px;
+
+    &:hover {
+      color: var(--theme-fg);
+    }
+  }
+}
+
+.modal-body {
+  padding: 20px;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.form-row {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 16px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+
+  &.flex-grow {
+    flex: 1;
+  }
+
+  label {
+    font-size: 0.9rem;
+    color: var(--theme-fg-more);
+  }
+
+  input[type='checkbox'] {
+    margin-right: 8px;
+  }
+}
+
+.form-control {
+  padding: 8px 12px;
+  border-radius: 6px;
+  border: 1px solid var(--theme-border);
+  background: var(--theme-bg-more);
+  color: var(--theme-fg);
+  font-size: 0.95rem;
+
+  &:focus {
+    outline: none;
+    border-color: var(--theme-primary);
+  }
+}
+
+.color-input {
+  width: 60px;
+  height: 36px;
+  padding: 2px;
+  cursor: pointer;
+}
+
+.icon-selector {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.icon-option {
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--theme-border);
+  border-radius: 6px;
+  background: var(--theme-bg-more);
+  color: var(--theme-fg-more);
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover {
+    background: var(--theme-bg-more-more);
+    color: var(--theme-fg);
+  }
+
+  &.selected {
+    border-color: var(--theme-primary);
+    background: var(--theme-primary);
+    color: white;
+  }
+}
+
+.form-section {
+  margin-top: 20px;
+
+  .section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+
+    h5 {
+      margin: 0;
+      font-size: 1rem;
+    }
+  }
+}
+
+.orientation-toggle {
+  display: flex;
+  gap: 8px;
+
+  .btn {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 16px 20px;
+  border-top: 1px solid var(--theme-border);
+}

package/src/components/workspaceEditor.component.ts

@@ -0,0 +1,181 @@
+import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core'
+import {
+  Workspace,
+  WorkspacePane,
+  WorkspaceSplit,
+  TabbyProfile,
+  isWorkspaceSplit,
+  createDefaultPane,
+  generateUUID,
+} from '../models/workspace.model'
+import { WorkspaceEditorService } from '../services/workspaceEditor.service'
+
+@Component({
+  selector: 'workspace-editor',
+  template: require('./workspaceEditor.component.pug'),
+  styles: [require('./workspaceEditor.component.scss')],
+})
+export class WorkspaceEditorComponent implements OnInit {
+  @Input() workspace!: Workspace
+  @Output() save = new EventEmitter<Workspace>()
+  @Output() cancel = new EventEmitter<void>()
+
+  selectedPane: WorkspacePane | null = null
+  showPaneEditor = false
+  profiles: TabbyProfile[] = []
+  availableIcons = [
+    'columns', 'terminal', 'code', 'folder', 'home', 'briefcase',
+    'cog', 'database', 'server', 'cloud', 'rocket', 'flask',
+    'bug', 'wrench', 'cube', 'layer-group', 'sitemap', 'project-diagram'
+  ]
+
+  constructor(private workspaceService: WorkspaceEditorService) {}
+
+  async ngOnInit(): Promise<void> {
+    this.profiles = await this.workspaceService.getAvailableProfiles()
+    if (!this.workspace.root) {
+      this.workspace.root = {
+        orientation: 'horizontal',
+        ratios: [0.5, 0.5],
+        children: [createDefaultPane(), createDefaultPane()],
+      }
+    }
+  }
+
+  onSave(): void {
+    if (!this.workspace.name?.trim()) {
+      return
+    }
+    this.save.emit(this.workspace)
+  }
+
+  onCancel(): void {
+    this.cancel.emit()
+  }
+
+  selectPane(pane: WorkspacePane): void {
+    this.selectedPane = pane
+    this.showPaneEditor = true
+  }
+
+  closePaneEditor(): void {
+    this.showPaneEditor = false
+    this.selectedPane = null
+  }
+
+  onPaneSave(pane: WorkspacePane): void {
+    this.updatePaneInTree(this.workspace.root, pane)
+    this.closePaneEditor()
+  }
+
+  private updatePaneInTree(node: WorkspaceSplit, updatedPane: WorkspacePane): boolean {
+    for (let i = 0; i < node.children.length; i++) {
+      const child = node.children[i]
+      if (isWorkspaceSplit(child)) {
+        if (this.updatePaneInTree(child, updatedPane)) {
+          return true
+        }
+      } else if (child.id === updatedPane.id) {
+        node.children[i] = updatedPane
+        return true
+      }
+    }
+    return false
+  }
+
+  splitPane(pane: WorkspacePane, orientation: 'horizontal' | 'vertical'): void {
+    this.splitPaneInTree(this.workspace.root, 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) {
+        const newPane = createDefaultPane()
+        newPane.profileId = child.profileId // Copy profile from source pane
+        const newSplit: WorkspaceSplit = {
+          orientation,
+          ratios: [0.5, 0.5],
+          children: [child, newPane],
+        }
+        node.children[i] = newSplit
+        this.recalculateRatios(node)
+        return true
+      }
+    }
+    return false
+  }
+
+  removePane(pane: WorkspacePane): void {
+    this.removePaneFromTree(this.workspace.root, pane)
+  }
+
+  private removePaneFromTree(node: WorkspaceSplit, targetPane: WorkspacePane): boolean {
+    for (let i = 0; i < node.children.length; i++) {
+      const child = node.children[i]
+      if (isWorkspaceSplit(child)) {
+        // Check if the pane is directly in this split
+        const paneIndex = child.children.findIndex(
+          (c) => !isWorkspaceSplit(c) && (c as WorkspacePane).id === targetPane.id
+        )
+        if (paneIndex !== -1 && child.children.length > 1) {
+          child.children.splice(paneIndex, 1)
+          this.recalculateRatios(child)
+          // If only one child remains, flatten
+          if (child.children.length === 1) {
+            node.children[i] = child.children[0]
+          }
+          return true
+        }
+        if (this.removePaneFromTree(child, targetPane)) {
+          return true
+        }
+      } else if (child.id === targetPane.id) {
+        if (node.children.length > 1) {
+          node.children.splice(i, 1)
+          this.recalculateRatios(node)
+          return true
+        }
+      }
+    }
+    return false
+  }
+
+  private recalculateRatios(split: WorkspaceSplit): void {
+    const count = split.children.length
+    split.ratios = split.children.map(() => 1 / count)
+  }
+
+  setOrientation(orientation: 'horizontal' | 'vertical'): void {
+    this.workspace.root.orientation = orientation
+  }
+
+  updateRatio(index: number, value: number): void {
+    const ratios = [...this.workspace.root.ratios]
+    const diff = value - ratios[index]
+
+    if (index < ratios.length - 1) {
+      ratios[index] = value
+      ratios[index + 1] -= diff
+    } else {
+      ratios[index] = value
+      ratios[index - 1] -= diff
+    }
+
+    // Clamp values
+    ratios.forEach((r, i) => {
+      ratios[i] = Math.max(0.1, Math.min(0.9, r))
+    })
+
+    this.workspace.root.ratios = ratios
+  }
+
+}

package/src/components/workspaceList.component.pug

@@ -0,0 +1,46 @@
+.workspace-list-container
+  .workspace-list-header
+    h3 Workspace Editor
+    button.btn.btn-primary(type='button', (click)='createWorkspace()')
+      i.fas.fa-plus
+      |  New Workspace
+
+  .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
+
+      .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
+
+  .workspace-empty(*ngIf='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()'
+)

package/src/components/workspaceList.component.scss

@@ -0,0 +1,112 @@
+.workspace-list-container {
+  padding: 20px;
+  max-width: 800px;
+}
+
+.workspace-list-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+
+  h3 {
+    margin: 0;
+    font-size: 1.5rem;
+  }
+}
+
+.workspace-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.workspace-item {
+  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;
+
+  &:hover {
+    background: var(--theme-bg-more-more);
+  }
+}
+
+.workspace-info {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.workspace-icon {
+  font-size: 24px;
+  width: 40px;
+  text-align: center;
+}
+
+.workspace-details {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.workspace-name {
+  font-size: 1.1rem;
+  font-weight: 500;
+}
+
+.workspace-meta {
+  font-size: 0.85rem;
+  color: var(--theme-fg-more);
+
+  .separator {
+    margin: 0 6px;
+  }
+
+  .badge {
+    font-size: 0.75rem;
+    padding: 2px 6px;
+    border-radius: 4px;
+    background: var(--theme-primary);
+    color: white;
+  }
+}
+
+.workspace-actions {
+  display: flex;
+  gap: 4px;
+
+  .btn-link {
+    padding: 8px;
+    color: var(--theme-fg-more);
+    opacity: 0.7;
+    transition: opacity 0.2s;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    &.active {
+      color: gold;
+      opacity: 1;
+    }
+
+    &.text-danger:hover {
+      color: var(--theme-danger);
+    }
+  }
+}
+
+.workspace-empty {
+  text-align: center;
+  padding: 40px;
+  color: var(--theme-fg-more);
+
+  p {
+    margin: 8px 0;
+  }
+}

package/src/components/workspaceList.component.ts

@@ -0,0 +1,124 @@
+import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core'
+import { ConfigService } from 'tabby-core'
+import { Subscription } from 'rxjs'
+import { WorkspaceEditorService } from '../services/workspaceEditor.service'
+import {
+  Workspace,
+  WorkspacePane,
+  WorkspaceSplit,
+  countPanes,
+  createDefaultWorkspace,
+  isWorkspaceSplit,
+} from '../models/workspace.model'
+
+@Component({
+  selector: 'workspace-list',
+  template: require('./workspaceList.component.pug'),
+  styles: [require('./workspaceList.component.scss')],
+})
+export class WorkspaceListComponent implements OnInit, OnDestroy {
+  workspaces: Workspace[] = []
+  editingWorkspace: Workspace | null = null
+  showEditor = false
+  private configSubscription: Subscription | null = null
+
+  constructor(
+    public config: ConfigService,
+    private workspaceService: WorkspaceEditorService,
+    private cdr: ChangeDetectorRef
+  ) {}
+
+  ngOnInit(): void {
+    this.loadWorkspaces()
+    this.configSubscription = this.config.changed$.subscribe(() => {
+      this.loadWorkspaces()
+    })
+  }
+
+  ngOnDestroy(): void {
+    this.configSubscription?.unsubscribe()
+  }
+
+  loadWorkspaces(): void {
+    this.workspaces = this.workspaceService.getWorkspaces()
+    this.cdr.detectChanges()
+  }
+
+  async createWorkspace(): Promise<void> {
+    const profiles = await this.workspaceService.getAvailableProfiles()
+    const defaultProfileId = profiles[0]?.id || ''
+    const workspace = createDefaultWorkspace()
+    this.setProfileForAllPanes(workspace.root, defaultProfileId)
+    this.editingWorkspace = workspace
+    this.showEditor = true
+  }
+
+  private setProfileForAllPanes(node: WorkspacePane | WorkspaceSplit, profileId: string): void {
+    if (isWorkspaceSplit(node)) {
+      node.children.forEach((child) => this.setProfileForAllPanes(child, profileId))
+    } else {
+      node.profileId = profileId
+    }
+  }
+
+  editWorkspace(workspace: Workspace): void {
+    this.editingWorkspace = JSON.parse(JSON.stringify(workspace))
+    this.showEditor = true
+  }
+
+  async duplicateWorkspace(workspace: Workspace): Promise<void> {
+    const clone = this.workspaceService.duplicateWorkspace(workspace)
+    await this.workspaceService.addWorkspace(clone)
+    this.loadWorkspaces()
+  }
+
+  async deleteWorkspace(workspace: Workspace): Promise<void> {
+    console.log('[TabbySpaces] deleteWorkspace called', workspace.id)
+    if (confirm(`Delete workspace "${workspace.name}"?`)) {
+      console.log('[TabbySpaces] confirm = true, calling service.deleteWorkspace')
+      await this.workspaceService.deleteWorkspace(workspace.id)
+      console.log('[TabbySpaces] service.deleteWorkspace done, calling loadWorkspaces')
+      this.loadWorkspaces()
+      console.log('[TabbySpaces] loadWorkspaces done, workspaces:', this.workspaces.length)
+    }
+  }
+
+  async onEditorSave(workspace: Workspace): Promise<void> {
+    console.log('[TabbySpaces] onEditorSave called', workspace.id, workspace.name)
+    const existing = this.workspaces.find((w) => w.id === workspace.id)
+    console.log('[TabbySpaces] existing workspace?', !!existing)
+    if (existing) {
+      await this.workspaceService.updateWorkspace(workspace)
+    } else {
+      await this.workspaceService.addWorkspace(workspace)
+    }
+    console.log('[TabbySpaces] save done, calling loadWorkspaces')
+    this.loadWorkspaces()
+    console.log('[TabbySpaces] calling closeEditor')
+    this.closeEditor()
+    console.log('[TabbySpaces] closeEditor done, showEditor:', this.showEditor)
+  }
+
+  closeEditor(): void {
+    console.log('[TabbySpaces] closeEditor called, showEditor before:', this.showEditor)
+    this.showEditor = false
+    this.editingWorkspace = null
+    this.cdr.detectChanges()
+    console.log('[TabbySpaces] closeEditor done, showEditor after:', this.showEditor)
+  }
+
+  getPaneCount(workspace: Workspace): number {
+    return countPanes(workspace.root)
+  }
+
+  getOrientationLabel(workspace: Workspace): string {
+    return workspace.root.orientation === 'horizontal' ? 'horizontal' : 'vertical'
+  }
+
+  async setAsDefault(workspace: Workspace): Promise<void> {
+    this.workspaces.forEach((w) => (w.isDefault = false))
+    workspace.isDefault = true
+    await this.workspaceService.saveWorkspaces(this.workspaces)
+    this.loadWorkspaces()
+  }
+}