tabby-tabbyspaces 0.1.0 → 0.2.1

package/src/components/paneEditor.component.pug

@@ -1,46 +1,30 @@
-.pane-editor-overlay((click)='onOverlayClick($event)')
-  .pane-editor-modal(#modal)
-    .modal-header
-      h4 Edit Pane
-      button.btn.btn-link.close-btn(type='button', (click)='onCancel()')
-        i.fas.fa-times
+//- Inline pane editor panel (no modal overlay)
+.pane-details
+  .pane-details-header
+    span.pane-details-title
+      i.fas.fa-terminal
+      |  Pane Configuration
 
-    .modal-body
-      .form-group
-        label Base Profile
-        select.form-control([(ngModel)]='editedPane.profileId')
-          option(value='') -- Select Profile --
-          option(*ngFor='let profile of profiles', [value]='profile.id')
-            | {{ profile.name }}
+  .pane-form
+    .form-group
+      label Profile
+      select.form-control([(ngModel)]='pane.profileId')
+        option(value='') -- Select Profile --
+        option(*ngFor='let profile of profiles', [value]='profile.id')
+          | {{ profile.name }}
 
-      .form-group
-        label Working Directory
-        input.form-control(
-          type='text',
-          [(ngModel)]='editedPane.cwd',
-          placeholder='C:\\path\\to\\project'
-        )
+    .form-group
+      label Working Directory
+      input.form-control(
+        type='text',
+        [(ngModel)]='pane.cwd',
+        placeholder='C:\\path\\to\\project'
+      )
 
-      .form-group
-        label Startup Command
-        input.form-control(
-          type='text',
-          [(ngModel)]='editedPane.startupCommand',
-          placeholder='e.g., npm run dev'
-        )
-        small.help-text
-          | Command to execute when the pane opens. For Nushell, use commands like: uv run serve
-
-      .form-group
-        label Pane Title (optional)
-        input.form-control(
-          type='text',
-          [(ngModel)]='editedPane.title',
-          placeholder='Custom tab title'
-        )
-
-    .modal-footer
-      button.btn.btn-secondary(type='button', (click)='onCancel()') Cancel
-      button.btn.btn-primary(type='button', (click)='onSave()')
-        i.fas.fa-check
-        |  Apply
+    .form-group
+      label Startup Command
+      input.form-control(
+        type='text',
+        [(ngModel)]='pane.startupCommand',
+        placeholder='e.g., npm run dev'
+      )

package/src/components/paneEditor.component.scss

@@ -1,112 +1,64 @@
-.pane-editor-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.7);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1100;
+@use '../styles/index' as *;
+
+// Inline pane details panel
+.pane-details {
+  background: var(--theme-bg-more-more);
+  border-radius: $radius-sm;
+  padding: $spacing-lg;
+  padding-top: $spacing-lg;
+  margin-top: $spacing-xl;
+  border-left: 2px solid var(--theme-primary);
+  border-top: 1px solid var(--theme-border, $fallback-border);
 }
 
-.pane-editor-modal {
-  background: var(--theme-bg);
-  border-radius: 12px;
-  width: 90%;
-  max-width: 500px;
-  max-height: 80vh;
-  overflow: hidden;
+.pane-details-header {
   display: flex;
-  flex-direction: column;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: $spacing-lg;
 }
 
-.modal-header {
+.pane-details-title {
+  font-size: $font-sm;
+  color: var(--theme-fg);
+  font-weight: 500;
   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.15rem;
-  }
-
-  .close-btn {
-    font-size: 1.15rem;
-    color: var(--theme-fg-more);
-    padding: 4px 8px;
-
-    &:hover {
-      color: var(--theme-fg);
-    }
-  }
+  gap: $spacing-sm;
 }
 
-.modal-body {
-  padding: 20px;
-  overflow-y: auto;
-  flex: 1;
+// 2-column grid for pane form
+.pane-form {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: $spacing-lg;
 }
 
-.form-group {
-  margin-bottom: 16px;
-
-  &:last-child {
-    margin-bottom: 0;
+@media (max-width: 600px) {
+  .pane-form {
+    grid-template-columns: 1fr;
   }
+}
 
+.form-group {
   label {
-    display: block;
-    margin-bottom: 6px;
-    font-size: 0.9rem;
-    color: var(--theme-fg-more);
+    @include form-label;
   }
 }
 
 .form-control {
   width: 100%;
-  padding: 10px 12px;
-  border-radius: 6px;
-  border: 1px solid var(--theme-border);
-  background: var(--theme-bg-more);
-  color: var(--theme-fg);
-  font-size: 0.95rem;
+  @include form-input(var(--theme-bg));
+  font-size: $font-sm;
+  // Override Tabby's global border reset
+  border: 1px solid var(--theme-border, $fallback-border) !important;
 
   &:focus {
-    outline: none;
-    border-color: var(--theme-primary);
+    border-color: var(--theme-primary) !important;
   }
 }
 
 select.form-control {
   cursor: pointer;
-}
-
-.input-with-button {
-  display: flex;
-  gap: 8px;
-
-  input {
-    flex: 1;
-  }
-}
-
-.help-text {
-  display: block;
-  margin-top: 4px;
-  font-size: 0.8rem;
-  color: var(--theme-fg-more);
-  opacity: 0.8;
-}
-
-.modal-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-  padding: 16px 20px;
-  border-top: 1px solid var(--theme-border);
+  appearance: auto; // Show dropdown arrow
 }

package/src/components/paneEditor.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter, OnInit, HostListener, ElementRef, ViewChild } from '@angular/core'
+import { Component, Input, Output, EventEmitter, HostListener } from '@angular/core'
 import { WorkspacePane, TabbyProfile } from '../models/workspace.model'
 
 @Component({
@@ -6,42 +6,14 @@ import { WorkspacePane, TabbyProfile } from '../models/workspace.model'
   template: require('./paneEditor.component.pug'),
   styles: [require('./paneEditor.component.scss')],
 })
-export class PaneEditorComponent implements OnInit {
+export class PaneEditorComponent {
   @Input() pane!: WorkspacePane
   @Input() profiles: TabbyProfile[] = []
-  @Output() save = new EventEmitter<WorkspacePane>()
-  @Output() cancel = new EventEmitter<void>()
-  @ViewChild('modal', { static: true }) modalRef!: ElementRef<HTMLElement>
-
-  editedPane!: WorkspacePane
-  private pointerDownInsideModal = false
-
-  ngOnInit(): void {
-    this.editedPane = { ...this.pane }
-  }
+  @Output() close = new EventEmitter<void>()
 
   @HostListener('document:keydown.escape')
   onEscapeKey(): void {
-    this.cancel.emit()
-  }
-
-  @HostListener('document:pointerdown', ['$event'])
-  onDocumentPointerDown(event: PointerEvent): void {
-    this.pointerDownInsideModal = this.modalRef.nativeElement.contains(event.target as Node)
-  }
-
-  onOverlayClick(event: MouseEvent): void {
-    if (!this.pointerDownInsideModal && event.target === event.currentTarget) {
-      this.cancel.emit()
-    }
-  }
-
-  onSave(): void {
-    this.save.emit(this.editedPane)
-  }
-
-  onCancel(): void {
-    this.cancel.emit()
+    this.close.emit()
   }
 
   getProfileName(profileId: string): string {

package/src/components/splitPreview.component.pug

@@ -6,7 +6,6 @@
       [style.flex-basis]='getFlexStyle(i)',
       [class.selected]='asPane(child).id === selectedPaneId',
       (click)='onPaneClick(asPane(child)); $event.stopPropagation()',
-      (dblclick)='onEditClick($event, asPane(child))',
       (contextmenu)='onContextMenu($event, asPane(child))'
     )
       .pane-content
@@ -20,13 +19,6 @@
             i.fas.fa-terminal
             span {{ truncate(asPane(child).startupCommand, 20) }}
 
-      button.pane-edit-btn(
-        type='button',
-        (click)='onEditClick($event, asPane(child))',
-        title='Edit pane'
-      )
-        i.fas.fa-pen
-
     //- Nested split
     split-preview(
       *ngIf='isSplit(child)',
@@ -35,7 +27,6 @@
       [selectedPaneId]='selectedPaneId',
       [profiles]='profiles',
       [style.flex-basis]='getFlexStyle(i)',
-      (paneSelect)='onNestedPaneSelect($event)',
       (paneEdit)='onNestedPaneEdit($event)',
       (splitHorizontal)='onNestedSplitH($event)',
       (splitVertical)='onNestedSplitV($event)',

package/src/components/splitPreview.component.scss

@@ -1,12 +1,14 @@
+@use '../styles/index' as *;
+
 .split-preview {
   display: flex;
   width: 100%;
-  height: 140px;
-  gap: 4px;
-  border-radius: 6px;
+  height: $preview-height;
+  gap: $spacing-sm;
+  border-radius: $radius-md;
   overflow: hidden;
   background: var(--theme-bg);
-  border: 1px solid var(--theme-border);
+  border: 1px solid var(--theme-border, rgba(255, 255, 255, 0.1));
 
   &.horizontal {
     flex-direction: row;
@@ -19,62 +21,68 @@
   &.nested {
     height: auto;
     border: 1px dashed var(--theme-fg-more);
-    background: rgba(255, 255, 255, 0.02);
-    padding: 4px;
-    border-radius: 4px;
+    background: $nested-split-bg;
+    padding: $spacing-sm;
+    border-radius: $radius-sm;
   }
 }
 
 .preview-pane {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  @include flex-center;
   background: var(--theme-bg-more);
-  border-radius: 4px;
-  border: 2px solid transparent;
+  border-radius: $radius-sm;
+  border: 2px solid var(--theme-border, rgba(255, 255, 255, 0.1));
   cursor: pointer;
-  transition: all 0.15s;
+  transition: all $transition-fast;
   position: relative;
   min-height: 50px;
 
   &:hover {
     background: var(--theme-bg-more-more);
+    border-color: var(--theme-fg-more, rgba(255, 255, 255, 0.3));
   }
 
   &.selected {
     border-color: var(--theme-primary);
-    background: var(--theme-bg-more-more);
+    background: linear-gradient(
+      to bottom,
+      $selected-pane-gradient-start,
+      $selected-pane-gradient-end
+    );
   }
 }
 
 .pane-content {
   text-align: center;
-  padding: 8px;
+  padding: $spacing-md;
   color: var(--theme-fg);
   max-width: 100%;
   overflow: hidden;
 }
 
+.pane-label {
+  font-size: 0.85rem;
+  font-weight: 600;
+  margin-bottom: $spacing-sm;
+  @include text-ellipsis;
+}
+
 .pane-title,
 .pane-profile {
   font-size: 0.8rem;
   font-weight: 500;
-  margin-bottom: 2px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  margin-bottom: $spacing-xs;
+  @include text-ellipsis;
 }
 
 .pane-details {
   font-size: 0.7rem;
   opacity: 0.7;
-  margin-top: 4px;
+  margin-top: $spacing-sm;
 
   .pane-detail {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 4px;
+    @include flex-center;
+    gap: $spacing-sm;
 
     i {
       width: 12px;
@@ -83,83 +91,51 @@
     }
 
     span {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
+      @include text-ellipsis;
       max-width: 100px;
     }
   }
 }
 
-.pane-edit-btn {
-  position: absolute;
-  top: 4px;
-  right: 4px;
-  padding: 4px 6px;
-  background: var(--theme-bg);
-  border: 1px solid var(--theme-border);
-  border-radius: 4px;
-  color: var(--theme-fg);
-  cursor: pointer;
-  font-size: 0.7rem;
-  transition: all 0.15s;
-  opacity: 0;
-
-  &:hover {
-    background: var(--theme-primary);
-    color: white;
-    border-color: var(--theme-primary);
-  }
-}
-
-.preview-pane:hover .pane-edit-btn {
-  opacity: 1;
-}
-
 // Context menu
 .context-menu-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1200;
+  @include full-overlay($z-context-menu-overlay);
 }
 
 .context-menu {
   position: fixed;
   background: var(--theme-bg);
-  border: 1px solid var(--theme-border);
-  border-radius: 8px;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+  border: 1px solid var(--theme-border, $fallback-border);
+  border-radius: $radius-lg;
+  box-shadow: $shadow-context-menu;
   min-width: 160px;
-  padding: 4px;
-  z-index: 1201;
+  padding: $spacing-sm;
+  z-index: $z-context-menu;
 }
 
 .context-menu-item {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: $spacing-lg;
   width: 100%;
-  padding: 8px 12px;
+  padding: $spacing-md $spacing-lg;
   border: none;
   background: none;
   color: var(--theme-fg);
   font-size: 0.9rem;
   text-align: left;
   cursor: pointer;
-  border-radius: 4px;
+  border-radius: $radius-sm;
 
   &:hover {
     background: var(--theme-bg-more);
   }
 
   &.danger {
-    color: var(--theme-danger, #ef4444);
+    color: var(--theme-danger, $color-danger);
 
     &:hover {
-      background: rgba(239, 68, 68, 0.1);
+      background: rgba($color-danger, 0.1);
     }
   }
 
@@ -172,8 +148,8 @@
 
 .context-menu-divider {
   height: 1px;
-  background: var(--theme-border);
-  margin: 4px 0;
+  background: var(--theme-border, $fallback-border);
+  margin: $spacing-sm 0;
 }
 
 // Nested splits styling

package/src/components/splitPreview.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core'
+import { Component, Input, Output, EventEmitter, OnChanges, SimpleChanges, ChangeDetectorRef } from '@angular/core'
 import {
   WorkspaceSplit,
   WorkspacePane,
@@ -11,12 +11,11 @@ import {
   template: require('./splitPreview.component.pug'),
   styles: [require('./splitPreview.component.scss')],
 })
-export class SplitPreviewComponent {
+export class SplitPreviewComponent implements OnChanges {
   @Input() split!: WorkspaceSplit
   @Input() depth = 0
   @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>()
@@ -29,6 +28,15 @@ export class SplitPreviewComponent {
   contextMenuPane: WorkspacePane | null = null
   contextMenuPosition = { x: 0, y: 0 }
 
+  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)
   }
@@ -50,11 +58,6 @@ export class SplitPreviewComponent {
   }
 
   onPaneClick(pane: WorkspacePane): void {
-    this.paneSelect.emit(pane)
-  }
-
-  onEditClick(event: MouseEvent, pane: WorkspacePane): void {
-    event.stopPropagation()
     this.paneEdit.emit(pane)
   }
 
@@ -72,6 +75,7 @@ export class SplitPreviewComponent {
 
   closeContextMenu(): void {
     this.contextMenuPane = null
+    this.cdr.detectChanges()
   }
 
   onEdit(): void {
@@ -131,27 +135,13 @@ export class SplitPreviewComponent {
   }
 
   getPaneLabel(pane: WorkspacePane): string {
-    // 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'
+    if (!pane.profileId) return 'Select profile'
 
-    // Format: "Title - Profile" or just "Profile"
-    if (pane.title) {
-      return `${pane.title} - ${profileName}`
-    }
-    return profileName
+    const profile = this.profiles.find(p => p.id === pane.profileId)
+    return profile?.name || 'Select profile'
   }
 
   // Pass-through events from nested splits
-  onNestedPaneSelect(pane: WorkspacePane): void {
-    this.paneSelect.emit(pane)
-  }
-
   onNestedPaneEdit(pane: WorkspacePane): void {
     this.paneEdit.emit(pane)
   }