tabby-tabbyspaces 0.0.1 → 0.2.0

package/src/components/splitPreview.component.ts

@@ -1,28 +1,41 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core'
+import { Component, Input, Output, EventEmitter, OnChanges, SimpleChanges, ChangeDetectorRef } from '@angular/core'
 import {
   WorkspaceSplit,
   WorkspacePane,
+  TabbyProfile,
   isWorkspaceSplit,
 } from '../models/workspace.model'
-import { WorkspaceEditorService } from '../services/workspaceEditor.service'
 
 @Component({
   selector: 'split-preview',
   template: require('./splitPreview.component.pug'),
   styles: [require('./splitPreview.component.scss')],
 })
-export class SplitPreviewComponent {
+export class SplitPreviewComponent implements OnChanges {
   @Input() split!: WorkspaceSplit
   @Input() depth = 0
-  @Output() paneClick = new EventEmitter<WorkspacePane>()
+  @Input() selectedPaneId: string | null = null
+  @Input() profiles: TabbyProfile[] = []
+  @Output() paneEdit = new EventEmitter<WorkspacePane>()
   @Output() splitHorizontal = new EventEmitter<WorkspacePane>()
   @Output() splitVertical = new EventEmitter<WorkspacePane>()
   @Output() removePane = new EventEmitter<WorkspacePane>()
+  @Output() addLeft = new EventEmitter<WorkspacePane>()
+  @Output() addRight = new EventEmitter<WorkspacePane>()
+  @Output() addTop = new EventEmitter<WorkspacePane>()
+  @Output() addBottom = new EventEmitter<WorkspacePane>()
 
   contextMenuPane: WorkspacePane | null = null
   contextMenuPosition = { x: 0, y: 0 }
 
-  constructor(private workspaceService: WorkspaceEditorService) {}
+  constructor(private cdr: ChangeDetectorRef) {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    // Clear context menu when split input changes to avoid stale state
+    if (changes['split']) {
+      this.closeContextMenu()
+    }
+  }
 
   isPane(child: WorkspacePane | WorkspaceSplit): boolean {
     return !isWorkspaceSplit(child)
@@ -45,7 +58,13 @@ export class SplitPreviewComponent {
   }
 
   onPaneClick(pane: WorkspacePane): void {
-    this.paneClick.emit(pane)
+    this.paneEdit.emit(pane)
+  }
+
+  truncate(text: string, maxLength: number): string {
+    return text.length > maxLength
+      ? text.substring(0, maxLength) + '...'
+      : text
   }
 
   onContextMenu(event: MouseEvent, pane: WorkspacePane): void {
@@ -56,6 +75,14 @@ export class SplitPreviewComponent {
 
   closeContextMenu(): void {
     this.contextMenuPane = null
+    this.cdr.detectChanges()
+  }
+
+  onEdit(): void {
+    if (this.contextMenuPane) {
+      this.paneEdit.emit(this.contextMenuPane)
+      this.closeContextMenu()
+    }
   }
 
   onSplitH(): void {
@@ -72,29 +99,51 @@ export class SplitPreviewComponent {
     }
   }
 
-  onRemove(): void {
+  onAddLeft(): void {
     if (this.contextMenuPane) {
-      this.removePane.emit(this.contextMenuPane)
+      this.addLeft.emit(this.contextMenuPane)
       this.closeContextMenu()
     }
   }
 
-  getProfileName(profileId: string): string {
-    return this.workspaceService.getProfileName(profileId) ?? 'Select profile'
+  onAddRight(): void {
+    if (this.contextMenuPane) {
+      this.addRight.emit(this.contextMenuPane)
+      this.closeContextMenu()
+    }
   }
 
-  getPaneLabel(pane: WorkspacePane): string {
-    if (pane.title) return pane.title
-    if (pane.startupCommand) {
-      const cmd = pane.startupCommand
-      return cmd.length > 20 ? cmd.substring(0, 17) + '...' : cmd
+  onAddTop(): void {
+    if (this.contextMenuPane) {
+      this.addTop.emit(this.contextMenuPane)
+      this.closeContextMenu()
     }
-    return this.getProfileName(pane.profileId)
+  }
+
+  onAddBottom(): void {
+    if (this.contextMenuPane) {
+      this.addBottom.emit(this.contextMenuPane)
+      this.closeContextMenu()
+    }
+  }
+
+  onRemove(): void {
+    if (this.contextMenuPane) {
+      this.removePane.emit(this.contextMenuPane)
+      this.closeContextMenu()
+    }
+  }
+
+  getPaneLabel(pane: WorkspacePane): string {
+    if (!pane.profileId) return 'Select profile'
+
+    const profile = this.profiles.find(p => p.id === pane.profileId)
+    return profile?.name || 'Select profile'
   }
 
   // Pass-through events from nested splits
-  onNestedPaneClick(pane: WorkspacePane): void {
-    this.paneClick.emit(pane)
+  onNestedPaneEdit(pane: WorkspacePane): void {
+    this.paneEdit.emit(pane)
   }
 
   onNestedSplitH(pane: WorkspacePane): void {
@@ -105,6 +154,22 @@ export class SplitPreviewComponent {
     this.splitVertical.emit(pane)
   }
 
+  onNestedAddLeft(pane: WorkspacePane): void {
+    this.addLeft.emit(pane)
+  }
+
+  onNestedAddRight(pane: WorkspacePane): void {
+    this.addRight.emit(pane)
+  }
+
+  onNestedAddTop(pane: WorkspacePane): void {
+    this.addTop.emit(pane)
+  }
+
+  onNestedAddBottom(pane: WorkspacePane): void {
+    this.addBottom.emit(pane)
+  }
+
   onNestedRemove(pane: WorkspacePane): void {
     this.removePane.emit(pane)
   }

package/src/components/workspaceEditor.component.pug

@@ -1,84 +1,172 @@
-.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
+//- Section 1: Workspace Settings
+.editor-section
+  .section-title
+    i.fas.fa-cog
+    |  Workspace Settings
 
-    .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 Name
+      input.form-control(
+        #nameInput,
+        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-group.auto-width
+      label Icon
+      .dropdown-trigger((click)='toggleIconDropdown()')
+        span.dropdown-icon([style.color]='workspace.color')
+          i.fas([class]='"fa-" + workspace.icon')
+        span.dropdown-chevron
+          i.fas.fa-chevron-down
+      .icon-dropdown(*ngIf='iconDropdownOpen')
+        button.icon-option(
+          *ngFor='let icon of availableIcons',
+          type='button',
+          [class.selected]='workspace.icon === icon',
+          [style.color]='workspace.icon === icon ? workspace.color : null',
+          (click)='selectIcon(icon)'
+        )
+          i.fas([class]='"fa-" + icon')
 
-      .form-row
-        .form-group
-          label
-            input(type='checkbox', [(ngModel)]='workspace.isDefault')
-            |  Launch on startup
+    .form-group.auto-width
+      label Color
+      .color-trigger
+        span.dropdown-color([style.background]='workspace.color')
+        input.color-input-hidden(
+          type='color',
+          [(ngModel)]='workspace.color'
+        )
+        span.dropdown-chevron
+          i.fas.fa-chevron-down
 
-      .form-section
-        .section-header
-          h5 Layout Preview
-          .orientation-toggle
-            button.btn.btn-sm(
+    .form-group.auto-width
+      label Background
+      .background-picker
+        .background-trigger((click)='toggleBackgroundDropdown()')
+          span.background-preview([style.background]='workspace.background?.value || "transparent"')
+            i.fas.fa-ban(*ngIf='!workspace.background?.value')
+          span.dropdown-chevron
+            i.fas.fa-chevron-down
+        .background-dropdown(*ngIf='backgroundDropdownOpen')
+          .preset-grid
+            button.preset-option(
+              *ngFor='let preset of backgroundPresets',
               type='button',
-              [class.btn-primary]='workspace.root.orientation === "horizontal"',
-              [class.btn-outline-secondary]='workspace.root.orientation !== "horizontal"',
-              (click)='setOrientation("horizontal")'
+              [class.selected]='isBackgroundSelected(preset)',
+              [style.background]='preset.value || "var(--theme-bg)"',
+              (click)='selectBackgroundPreset(preset)'
             )
-              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-ban(*ngIf='preset.type === "none"')
+          .custom-input-wrapper
+            input.form-control.custom-bg-input(
+              type='text',
+              [(ngModel)]='customBackgroundValue',
+              placeholder='Custom CSS gradient...',
+              (blur)='applyCustomBackground()'
             )
-              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)'
-        )
+//- Section 2: Split Layout
+.editor-section
+  .section-title
+    i.fas.fa-columns
+    |  Split Layout
+
+  .split-preview-container
+    //- Preview toolbar
+    .preview-toolbar
+      button.preview-btn(
+        type='button',
+        title='Split Horizontal',
+        [disabled]='!selectedPaneId',
+        (click)='splitSelectedPane("horizontal")'
+      )
+        i.fas.fa-grip-lines-vertical
+      button.preview-btn(
+        type='button',
+        title='Split Vertical',
+        [disabled]='!selectedPaneId',
+        (click)='splitSelectedPane("vertical")'
+      )
+        i.fas.fa-grip-lines
+      span.toolbar-separator
+      button.preview-btn(
+        type='button',
+        title='Add Left',
+        [disabled]='!selectedPaneId',
+        (click)='addPane("left")'
+      )
+        i.fas.fa-arrow-left
+      button.preview-btn(
+        type='button',
+        title='Add Right',
+        [disabled]='!selectedPaneId',
+        (click)='addPane("right")'
+      )
+        i.fas.fa-arrow-right
+      button.preview-btn(
+        type='button',
+        title='Add Top',
+        [disabled]='!selectedPaneId',
+        (click)='addPane("top")'
+      )
+        i.fas.fa-arrow-up
+      button.preview-btn(
+        type='button',
+        title='Add Bottom',
+        [disabled]='!selectedPaneId',
+        (click)='addPane("bottom")'
+      )
+        i.fas.fa-arrow-down
+      span.toolbar-separator
+      button.preview-btn.danger(
+        type='button',
+        title='Remove pane',
+        [disabled]='!selectedPaneId || !canRemovePane()',
+        (click)='removeSelectedPane()'
+      )
+        i.fas.fa-trash
+
+    //- Split preview
+    .layout-preview((click)='onPreviewBackgroundClick()')
+      split-preview(
+        [split]='workspace.root',
+        [selectedPaneId]='selectedPaneId',
+        [profiles]='profiles',
+        (paneEdit)='editPane($event)',
+        (splitHorizontal)='splitPane($event, "horizontal")',
+        (splitVertical)='splitPane($event, "vertical")',
+        (addLeft)='addPaneFromEvent($event, "left")',
+        (addRight)='addPaneFromEvent($event, "right")',
+        (addTop)='addPaneFromEvent($event, "top")',
+        (addBottom)='addPaneFromEvent($event, "bottom")',
+        (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
+    //- Inline pane editor
+    pane-editor(
+      *ngIf='showPaneEditor && editingPane',
+      [pane]='editingPane',
+      [profiles]='profiles',
+      (close)='closePaneEditor()'
+    )
 
-pane-editor(
-  *ngIf='showPaneEditor && selectedPane',
-  [pane]='selectedPane',
-  [profiles]='profiles',
-  (save)='onPaneSave($event)',
-  (cancel)='closePaneEditor()'
-)
+//- Action buttons
+.action-buttons
+  .checkbox-group
+    input(type='checkbox', [(ngModel)]='workspace.launchOnStartup', id='launchStartup')
+    label(for='launchStartup') Launch on startup
+  .action-buttons-right
+    button.btn.btn-ghost(type='button', (click)='onCancel()')
+      i.fas.fa-xmark
+      |  Cancel
+    button.btn.btn-success(
+      type='button',
+      (click)='onSave()',
+      [disabled]='!workspace.name?.trim() || !hasUnsavedChanges'
+    )
+      i.fas.fa-check
+      |  Save
+      span.unsaved-indicator(*ngIf='hasUnsavedChanges') *