tabby-tabbyspaces 0.0.1 → 0.1.0

package/src/components/splitPreview.component.ts

@@ -2,9 +2,9 @@ import { Component, Input, Output, EventEmitter } from '@angular/core'
 import {
   WorkspaceSplit,
   WorkspacePane,
+  TabbyProfile,
   isWorkspaceSplit,
 } from '../models/workspace.model'
-import { WorkspaceEditorService } from '../services/workspaceEditor.service'
 
 @Component({
   selector: 'split-preview',
@@ -14,16 +14,21 @@ import { WorkspaceEditorService } from '../services/workspaceEditor.service'
 export class SplitPreviewComponent {
   @Input() split!: WorkspaceSplit
   @Input() depth = 0
-  @Output() paneClick = new EventEmitter<WorkspacePane>()
+  @Input() selectedPaneId: string | null = null
+  @Input() profiles: TabbyProfile[] = []
+  @Output() paneSelect = new EventEmitter<WorkspacePane>()
+  @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) {}
-
   isPane(child: WorkspacePane | WorkspaceSplit): boolean {
     return !isWorkspaceSplit(child)
   }
@@ -45,7 +50,18 @@ export class SplitPreviewComponent {
   }
 
   onPaneClick(pane: WorkspacePane): void {
-    this.paneClick.emit(pane)
+    this.paneSelect.emit(pane)
+  }
+
+  onEditClick(event: MouseEvent, pane: WorkspacePane): void {
+    event.stopPropagation()
+    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 {
@@ -58,6 +74,13 @@ export class SplitPreviewComponent {
     this.contextMenuPane = null
   }
 
+  onEdit(): void {
+    if (this.contextMenuPane) {
+      this.paneEdit.emit(this.contextMenuPane)
+      this.closeContextMenu()
+    }
+  }
+
   onSplitH(): void {
     if (this.contextMenuPane) {
       this.splitHorizontal.emit(this.contextMenuPane)
@@ -72,29 +95,65 @@ 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()
+    }
+  }
+
+  onAddTop(): void {
+    if (this.contextMenuPane) {
+      this.addTop.emit(this.contextMenuPane)
+      this.closeContextMenu()
+    }
+  }
+
+  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.title) return pane.title
-    if (pane.startupCommand) {
-      const cmd = pane.startupCommand
-      return cmd.length > 20 ? cmd.substring(0, 17) + '...' : cmd
+    // Base label is always the profile name
+    let profileName = ''
+    if (pane.profileId) {
+      const profile = this.profiles.find(p => p.id === pane.profileId)
+      if (profile?.name) profileName = profile.name
+    }
+
+    if (!profileName) return 'Select profile'
+
+    // Format: "Title - Profile" or just "Profile"
+    if (pane.title) {
+      return `${pane.title} - ${profileName}`
     }
-    return this.getProfileName(pane.profileId)
+    return profileName
   }
 
   // Pass-through events from nested splits
-  onNestedPaneClick(pane: WorkspacePane): void {
-    this.paneClick.emit(pane)
+  onNestedPaneSelect(pane: WorkspacePane): void {
+    this.paneSelect.emit(pane)
+  }
+
+  onNestedPaneEdit(pane: WorkspacePane): void {
+    this.paneEdit.emit(pane)
   }
 
   onNestedSplitH(pane: WorkspacePane): void {
@@ -105,6 +164,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,83 +1,143 @@
-.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
+//- Inline workspace editor
+.workspace-editor-inline
+  .editor-body
+    ng-container(*ngTemplateOutlet='editorContent')
 
-    .modal-body
-      .form-row
-        .form-group.flex-grow
-          label Name
-          input.form-control(
-            type='text',
-            [(ngModel)]='workspace.name',
-            placeholder='Workspace name'
-          )
+  .editor-footer
+    label.startup-checkbox
+      input(type='checkbox', [(ngModel)]='workspace.launchOnStartup')
+      |  Launch on startup
+    .editor-actions
+      button.btn.btn-secondary.btn-sm(type='button', (click)='onCancel()') Cancel
+      button.btn.btn-primary.btn-sm(type='button', (click)='onSave()', [disabled]='!workspace.name?.trim() || !hasUnsavedChanges')
+        i.fas.fa-save
+        |  Save
+        span.unsaved-indicator(*ngIf='hasUnsavedChanges') *
+
+//- Shared editor content
+ng-template(#editorContent)
+  //- Top row: Color picker, Name input, Icon grid
+  .editor-top-row
+    .color-picker
+      input.color-input(
+        type='color',
+        [(ngModel)]='workspace.color',
+        title='Workspace color'
+      )
 
-      .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')
+    input.name-input(
+      #nameInput,
+      type='text',
+      [(ngModel)]='workspace.name',
+      placeholder='Name your workspace'
+    )
 
-        .form-group
-          label Color
-          input.form-control.color-input(
-            type='color',
-            [(ngModel)]='workspace.color'
-          )
+    .icon-picker
+      button.icon-trigger(
+        type='button',
+        [style.color]='workspace.color',
+        (click)='toggleIconDropdown()',
+        title='Select icon'
+      )
+        i.fas([class]='"fa-" + workspace.icon')
 
-      .form-row
-        .form-group
-          label
-            input(type='checkbox', [(ngModel)]='workspace.isDefault')
-            |  Launch on startup
+      .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-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
+  //- Layout section
+  .layout-section
+    .layout-header
+      span.layout-title Layout
 
-        split-preview(
-          [split]='workspace.root',
-          (paneClick)='selectPane($event)',
-          (splitHorizontal)='splitPane($event, "horizontal")',
-          (splitVertical)='splitPane($event, "vertical")',
-          (removePane)='removePane($event)'
+    .layout-toolbar
+      .toolbar-group.split-group
+        span.toolbar-label Split
+        button.toolbar-btn(
+          type='button',
+          [disabled]='!selectedPaneId',
+          (click)='splitSelectedPane("horizontal")',
+          title='Split Horizontal'
+        )
+          i.fas.fa-arrows-alt-h
+        button.toolbar-btn(
+          type='button',
+          [disabled]='!selectedPaneId',
+          (click)='splitSelectedPane("vertical")',
+          title='Split Vertical'
         )
+          i.fas.fa-arrows-alt-v
 
-    .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
+      .toolbar-divider
+
+      .toolbar-group.add-group
+        span.toolbar-label Add
+        button.toolbar-btn(
+          type='button',
+          [disabled]='!selectedPaneId',
+          (click)='addPane("left")',
+          title='Add Left'
+        )
+          i.fas.fa-caret-left
+        button.toolbar-btn(
+          type='button',
+          [disabled]='!selectedPaneId',
+          (click)='addPane("right")',
+          title='Add Right'
+        )
+          i.fas.fa-caret-right
+        button.toolbar-btn(
+          type='button',
+          [disabled]='!selectedPaneId',
+          (click)='addPane("top")',
+          title='Add Top'
+        )
+          i.fas.fa-caret-up
+        button.toolbar-btn(
+          type='button',
+          [disabled]='!selectedPaneId',
+          (click)='addPane("bottom")',
+          title='Add Bottom'
+        )
+          i.fas.fa-caret-down
+
+      .toolbar-spacer
+
+      .toolbar-group
+        button.toolbar-btn.danger(
+          type='button',
+          [disabled]='!selectedPaneId || !canRemovePane()',
+          (click)='removeSelectedPane()',
+          title='Remove pane'
+        )
+          i.fas.fa-trash
+
+    .layout-preview-container((click)='onPreviewBackgroundClick()')
+      split-preview(
+        [split]='workspace.root',
+        [selectedPaneId]='selectedPaneId',
+        [profiles]='profiles',
+        (paneSelect)='selectPane($event)',
+        (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)'
+      )
 
+//- Pane editor (always modal)
 pane-editor(
-  *ngIf='showPaneEditor && selectedPane',
-  [pane]='selectedPane',
+  *ngIf='showPaneEditor && editingPane',
+  [pane]='editingPane',
   [profiles]='profiles',
   (save)='onPaneSave($event)',
   (cancel)='closePaneEditor()'