tabby-tabbyspaces 0.0.1 → 0.2.0

package/scripts/build-prod.js

@@ -0,0 +1,40 @@
+const { execSync } = require('child_process')
+const fs = require('fs')
+const path = require('path')
+
+const rootDir = path.resolve(__dirname, '..')
+const distDir = path.join(rootDir, 'dist')
+
+// 1. Clean dist
+if (fs.existsSync(distDir)) {
+  fs.rmSync(distDir, { recursive: true })
+}
+
+// 2. Run webpack
+console.log('Building production version...')
+const webpackCli = path.join(rootDir, 'node_modules', 'webpack-cli', 'bin', 'cli.js')
+execSync(`node "${webpackCli}" --mode production`, {
+  cwd: rootDir,
+  stdio: 'inherit'
+})
+
+// 3. Create package.json
+const pkg = require(path.join(rootDir, 'package.json'))
+const prodPkg = {
+  name: pkg.name,
+  version: pkg.version,
+  description: pkg.description,
+  main: 'index.js',
+  keywords: pkg.keywords,
+  peerDependencies: pkg.peerDependencies,
+  author: pkg.author,
+  license: pkg.license,
+  tabbyPlugin: pkg.tabbyPlugin
+}
+
+fs.writeFileSync(
+  path.join(distDir, 'package.json'),
+  JSON.stringify(prodPkg, null, 2)
+)
+
+console.log('Production build complete: dist/')

package/src/components/deleteConfirmModal.component.ts

@@ -0,0 +1,23 @@
+import { Component, Input } from '@angular/core'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+
+@Component({
+  selector: 'delete-confirm-modal',
+  template: `
+    <div class="modal-header">
+      <h5 class="modal-title">Delete Workspace</h5>
+    </div>
+    <div class="modal-body">
+      <p>Delete workspace "{{ workspaceName }}"?</p>
+      <p class="text-muted">This action cannot be undone.</p>
+    </div>
+    <div class="modal-footer">
+      <button class="btn btn-secondary" (click)="modal.dismiss()">Cancel</button>
+      <button class="btn btn-danger" (click)="modal.close()" ngbAutofocus>Delete</button>
+    </div>
+  `,
+})
+export class DeleteConfirmModalComponent {
+  @Input() workspaceName = ''
+  constructor(public modal: NgbActiveModal) {}
+}

package/src/components/paneEditor.component.pug

@@ -1,46 +1,30 @@
-.pane-editor-overlay((click)='onCancel()')
-  .pane-editor-modal((click)='$event.stopPropagation()')
-    .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 } from '@angular/core'
+import { Component, Input, Output, EventEmitter, HostListener } from '@angular/core'
 import { WorkspacePane, TabbyProfile } from '../models/workspace.model'
 
 @Component({
@@ -6,24 +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>()
+  @Output() close = new EventEmitter<void>()
 
-  editedPane!: WorkspacePane
-
-  ngOnInit(): void {
-    this.editedPane = { ...this.pane }
-  }
-
-  onSave(): void {
-    this.save.emit(this.editedPane)
-  }
-
-  onCancel(): void {
-    this.cancel.emit()
+  @HostListener('document:keydown.escape')
+  onEscapeKey(): void {
+    this.close.emit()
   }
 
   getProfileName(profileId: string): string {

package/src/components/splitPreview.component.pug

@@ -1,25 +1,39 @@
-.split-preview([class.horizontal]='split.orientation === "horizontal"', [class.vertical]='split.orientation === "vertical"')
+.split-preview([class.horizontal]='split.orientation === "horizontal"', [class.vertical]='split.orientation === "vertical"', [class.nested]='depth > 0')
   ng-container(*ngFor='let child of split.children; let i = index')
     //- Pane
     .preview-pane(
       *ngIf='isPane(child)',
       [style.flex-basis]='getFlexStyle(i)',
-      (click)='onPaneClick(asPane(child))',
+      [class.selected]='asPane(child).id === selectedPaneId',
+      (click)='onPaneClick(asPane(child)); $event.stopPropagation()',
       (contextmenu)='onContextMenu($event, asPane(child))'
     )
       .pane-content
-        .pane-label {{ getPaneLabel(asPane(child)) }}
-        .pane-hint Click to edit
+        .pane-label
+          | {{ getPaneLabel(asPane(child)) }}
+        .pane-details
+          .pane-detail(*ngIf='asPane(child).cwd', [title]='asPane(child).cwd')
+            i.fas.fa-folder
+            span {{ truncate(asPane(child).cwd, 20) }}
+          .pane-detail(*ngIf='asPane(child).startupCommand', [title]='asPane(child).startupCommand')
+            i.fas.fa-terminal
+            span {{ truncate(asPane(child).startupCommand, 20) }}
 
     //- Nested split
     split-preview(
       *ngIf='isSplit(child)',
       [split]='asSplit(child)',
       [depth]='depth + 1',
+      [selectedPaneId]='selectedPaneId',
+      [profiles]='profiles',
       [style.flex-basis]='getFlexStyle(i)',
-      (paneClick)='onNestedPaneClick($event)',
+      (paneEdit)='onNestedPaneEdit($event)',
       (splitHorizontal)='onNestedSplitH($event)',
       (splitVertical)='onNestedSplitV($event)',
+      (addLeft)='onNestedAddLeft($event)',
+      (addRight)='onNestedAddRight($event)',
+      (addTop)='onNestedAddTop($event)',
+      (addBottom)='onNestedAddBottom($event)',
       (removePane)='onNestedRemove($event)'
     )
 
@@ -33,6 +47,10 @@
     [style.top.px]='contextMenuPosition.y',
     (click)='$event.stopPropagation()'
   )
+    button.context-menu-item(type='button', (click)='onEdit()')
+      i.fas.fa-pen
+      |  Edit
+    .context-menu-divider
     button.context-menu-item(type='button', (click)='onSplitH()')
       i.fas.fa-arrows-alt-h
       |  Split Horizontal
@@ -40,6 +58,19 @@
       i.fas.fa-arrows-alt-v
       |  Split Vertical
     .context-menu-divider
+    button.context-menu-item(type='button', (click)='onAddLeft()')
+      i.fas.fa-caret-left
+      |  Add Left
+    button.context-menu-item(type='button', (click)='onAddRight()')
+      i.fas.fa-caret-right
+      |  Add Right
+    button.context-menu-item(type='button', (click)='onAddTop()')
+      i.fas.fa-caret-up
+      |  Add Top
+    button.context-menu-item(type='button', (click)='onAddBottom()')
+      i.fas.fa-caret-down
+      |  Add Bottom
+    .context-menu-divider
     button.context-menu-item.danger(type='button', (click)='onRemove()')
       i.fas.fa-trash
       |  Remove Pane

package/src/components/splitPreview.component.scss

@@ -1,12 +1,14 @@
+@use '../styles/index' as *;
+
 .split-preview {
   display: flex;
   width: 100%;
-  min-height: 200px;
-  gap: 4px;
-  border-radius: 8px;
+  height: $preview-height;
+  gap: $spacing-sm;
+  border-radius: $radius-md;
   overflow: hidden;
-  background: var(--theme-bg-more);
-  border: 1px solid var(--theme-border);
+  background: var(--theme-bg);
+  border: 1px solid var(--theme-border, rgba(255, 255, 255, 0.1));
 
   &.horizontal {
     flex-direction: row;
@@ -15,94 +17,125 @@
   &.vertical {
     flex-direction: column;
   }
+
+  &.nested {
+    height: auto;
+    border: 1px dashed var(--theme-fg-more);
+    background: $nested-split-bg;
+    padding: $spacing-sm;
+    border-radius: $radius-sm;
+  }
 }
 
 .preview-pane {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--theme-bg-more-more);
-  border-radius: 4px;
+  @include flex-center;
+  background: var(--theme-bg-more);
+  border-radius: $radius-sm;
+  border: 2px solid var(--theme-border, rgba(255, 255, 255, 0.1));
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all $transition-fast;
   position: relative;
-  min-height: 80px;
+  min-height: 50px;
 
   &:hover {
-    background: var(--theme-primary);
-
-    .pane-content {
-      color: white;
-    }
+    background: var(--theme-bg-more-more);
+    border-color: var(--theme-fg-more, rgba(255, 255, 255, 0.3));
+  }
 
-    .pane-hint {
-      opacity: 1;
-    }
+  &.selected {
+    border-color: var(--theme-primary);
+    background: linear-gradient(
+      to bottom,
+      $selected-pane-gradient-start,
+      $selected-pane-gradient-end
+    );
   }
 }
 
 .pane-content {
   text-align: center;
-  padding: 12px;
+  padding: $spacing-md;
   color: var(--theme-fg);
+  max-width: 100%;
+  overflow: hidden;
 }
 
 .pane-label {
-  font-size: 0.9rem;
+  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: 4px;
+  margin-bottom: $spacing-xs;
+  @include text-ellipsis;
 }
 
-.pane-hint {
-  font-size: 0.75rem;
-  opacity: 0.5;
-  transition: opacity 0.2s;
+.pane-details {
+  font-size: 0.7rem;
+  opacity: 0.7;
+  margin-top: $spacing-sm;
+
+  .pane-detail {
+    @include flex-center;
+    gap: $spacing-sm;
+
+    i {
+      width: 12px;
+      text-align: center;
+      font-size: 0.65rem;
+    }
+
+    span {
+      @include text-ellipsis;
+      max-width: 100px;
+    }
+  }
 }
 
 // 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);
     }
   }
 
@@ -115,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