tabby-tabbyspaces 0.0.1 → 0.2.0

package/src/components/workspaceList.component.ts

@@ -1,56 +1,111 @@
-import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core'
-import { ConfigService } from 'tabby-core'
+import { Component, OnInit, OnDestroy, AfterViewInit, ChangeDetectorRef, ElementRef, NgZone } from '@angular/core'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { ConfigService, ProfilesService } from 'tabby-core'
 import { Subscription } from 'rxjs'
+import { StartupCommandService } from '../services/startupCommand.service'
 import { WorkspaceEditorService } from '../services/workspaceEditor.service'
+import { DeleteConfirmModalComponent } from './deleteConfirmModal.component'
 import {
   Workspace,
   WorkspacePane,
   WorkspaceSplit,
+  TabbyProfile,
   countPanes,
   createDefaultWorkspace,
+  deepClone,
   isWorkspaceSplit,
 } from '../models/workspace.model'
 
+const SETTINGS_MAX_WIDTH = '876px'
+
 @Component({
   selector: 'workspace-list',
   template: require('./workspaceList.component.pug'),
   styles: [require('./workspaceList.component.scss')],
 })
-export class WorkspaceListComponent implements OnInit, OnDestroy {
+export class WorkspaceListComponent implements OnInit, OnDestroy, AfterViewInit {
   workspaces: Workspace[] = []
+  selectedWorkspace: Workspace | null = null
   editingWorkspace: Workspace | null = null
-  showEditor = false
+  isCreatingNew = false
+  openingWorkspaceId: string | null = null
+  displayTabs: Array<{ workspace: Workspace; isNew: boolean }> = []
+  private cachedProfiles: TabbyProfile[] = []
   private configSubscription: Subscription | null = null
 
   constructor(
     public config: ConfigService,
     private workspaceService: WorkspaceEditorService,
-    private cdr: ChangeDetectorRef
+    private profilesService: ProfilesService,
+    private startupService: StartupCommandService,
+    private modalService: NgbModal,
+    private cdr: ChangeDetectorRef,
+    private elementRef: ElementRef,
+    private zone: NgZone
   ) {}
 
-  ngOnInit(): void {
+  async ngOnInit(): Promise<void> {
     this.loadWorkspaces()
+    this.autoSelectFirst()
+    this.cachedProfiles = await this.workspaceService.getAvailableProfiles()
     this.configSubscription = this.config.changed$.subscribe(() => {
-      this.loadWorkspaces()
+      this.zone.run(() => this.loadWorkspaces())
     })
   }
 
+  ngAfterViewInit(): void {
+    // Hack: Override Tabby's settings-tab-body max-width restriction
+    setTimeout(() => {
+      const parent = this.elementRef.nativeElement.closest('settings-tab-body') as HTMLElement
+      if (parent) {
+        parent.style.maxWidth = SETTINGS_MAX_WIDTH
+      }
+    }, 0)
+  }
+
+  private autoSelectFirst(): void {
+    if (this.workspaces.length > 0 && !this.selectedWorkspace) {
+      this.selectWorkspace(this.workspaces[0])
+    }
+  }
+
+  selectWorkspace(workspace: Workspace): void {
+    this.isCreatingNew = false
+    this.selectedWorkspace = workspace
+    this.editingWorkspace = deepClone(workspace)
+    this.updateDisplayTabs()
+  }
+
+  isSelected(workspace: Workspace): boolean {
+    return this.selectedWorkspace?.id === workspace.id
+  }
+
   ngOnDestroy(): void {
     this.configSubscription?.unsubscribe()
   }
 
   loadWorkspaces(): void {
+    const previousSelectedId = this.selectedWorkspace?.id
     this.workspaces = this.workspaceService.getWorkspaces()
-    this.cdr.detectChanges()
+
+    // Re-sync selectedWorkspace to point to object in new array
+    // This prevents stale reference after delete/reload operations
+    if (previousSelectedId) {
+      this.selectedWorkspace = this.workspaces.find(w => w.id === previousSelectedId) || null
+    }
+
+    this.updateDisplayTabs()
   }
 
-  async createWorkspace(): Promise<void> {
-    const profiles = await this.workspaceService.getAvailableProfiles()
-    const defaultProfileId = profiles[0]?.id || ''
+  createWorkspace(): void {
+    const defaultProfileId = this.cachedProfiles[0]?.id || ''
     const workspace = createDefaultWorkspace()
     this.setProfileForAllPanes(workspace.root, defaultProfileId)
+    this.selectedWorkspace = null
     this.editingWorkspace = workspace
-    this.showEditor = true
+    this.isCreatingNew = true
+    this.updateDisplayTabs()
+    this.cdr.detectChanges()
   }
 
   private setProfileForAllPanes(node: WorkspacePane | WorkspaceSplit, profileId: string): void {
@@ -62,49 +117,93 @@ export class WorkspaceListComponent implements OnInit, OnDestroy {
   }
 
   editWorkspace(workspace: Workspace): void {
-    this.editingWorkspace = JSON.parse(JSON.stringify(workspace))
-    this.showEditor = true
+    this.selectWorkspace(workspace)
   }
 
-  async duplicateWorkspace(workspace: Workspace): Promise<void> {
+  async duplicateWorkspace(event: MouseEvent, workspace: Workspace): Promise<void> {
+    event.stopPropagation()
     const clone = this.workspaceService.duplicateWorkspace(workspace)
     await this.workspaceService.addWorkspace(clone)
-    this.loadWorkspaces()
+
+    this.zone.run(() => {
+      this.loadWorkspaces()
+      const duplicated = this.workspaces.find((w) => w.id === clone.id)
+      if (duplicated) {
+        this.selectWorkspace(duplicated)
+      }
+    })
   }
 
-  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')
+  async deleteWorkspace(event: MouseEvent, workspace: Workspace): Promise<void> {
+    event.stopPropagation()
+
+    const confirmed = await this.confirmDelete(workspace.name)
+    if (!confirmed) return
+
+    const wasSelected = this.selectedWorkspace?.id === workspace.id
+    const deletedIndex = this.workspaces.findIndex((w) => w.id === workspace.id)
+
+    await this.workspaceService.deleteWorkspace(workspace.id)
+
+    this.zone.run(() => {
       this.loadWorkspaces()
-      console.log('[TabbySpaces] loadWorkspaces done, workspaces:', this.workspaces.length)
+      if (this.workspaces.length === 0) {
+        this.selectedWorkspace = null
+        this.editingWorkspace = null
+        this.isCreatingNew = false
+      } else if (wasSelected) {
+        const nextIndex = Math.min(deletedIndex, this.workspaces.length - 1)
+        this.selectWorkspace(this.workspaces[nextIndex])
+      }
+    })
+  }
+
+  private async confirmDelete(name: string): Promise<boolean> {
+    const modalRef = this.modalService.open(DeleteConfirmModalComponent)
+    modalRef.componentInstance.workspaceName = name
+    try {
+      await modalRef.result
+      return true
+    } catch {
+      return false
     }
   }
 
   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 {
+    const isNew = !this.workspaces.find((w) => w.id === workspace.id)
+    if (isNew) {
       await this.workspaceService.addWorkspace(workspace)
+    } else {
+      await this.workspaceService.updateWorkspace(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)
+
+    // Wrap state changes in zone.run to ensure proper change detection
+    this.zone.run(() => {
+      this.loadWorkspaces()
+      this.isCreatingNew = false
+      const saved = this.workspaces.find((w) => w.id === workspace.id)
+      if (saved) {
+        this.selectWorkspace(saved)
+      }
+    })
   }
 
-  closeEditor(): void {
-    console.log('[TabbySpaces] closeEditor called, showEditor before:', this.showEditor)
-    this.showEditor = false
-    this.editingWorkspace = null
+  onEditorCancel(): void {
+    if (this.isCreatingNew) {
+      // Cancel new workspace creation - go back to first workspace or empty
+      this.isCreatingNew = false
+      if (this.workspaces.length > 0) {
+        this.selectWorkspace(this.workspaces[0])
+      } else {
+        this.selectedWorkspace = null
+        this.editingWorkspace = null
+        this.updateDisplayTabs()
+      }
+    } else if (this.selectedWorkspace) {
+      // Reset to original workspace data
+      this.editingWorkspace = deepClone(this.selectedWorkspace)
+    }
     this.cdr.detectChanges()
-    console.log('[TabbySpaces] closeEditor done, showEditor after:', this.showEditor)
   }
 
   getPaneCount(workspace: Workspace): number {
@@ -115,10 +214,48 @@ export class WorkspaceListComponent implements OnInit, OnDestroy {
     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()
+  get hasUnsavedChanges(): boolean {
+    if (!this.editingWorkspace || !this.selectedWorkspace) return this.isCreatingNew
+    return JSON.stringify(this.editingWorkspace) !== JSON.stringify(this.selectedWorkspace)
   }
+
+  // Update display tabs array (call after state changes)
+  private updateDisplayTabs(): void {
+    const tabs = this.workspaces.map(w => ({ workspace: w, isNew: false }))
+    if (this.isCreatingNew && this.editingWorkspace) {
+      tabs.push({ workspace: this.editingWorkspace, isNew: true })
+    }
+    this.displayTabs = tabs
+  }
+
+  isTabSelected(tab: { workspace: Workspace; isNew: boolean }): boolean {
+    if (tab.isNew) return true
+    return this.selectedWorkspace?.id === tab.workspace.id
+  }
+
+  trackByTab(index: number, tab: { workspace: Workspace; isNew: boolean }): string {
+    return tab.isNew ? '__new__' : tab.workspace.id
+  }
+
+  async openWorkspace(event: MouseEvent, workspace: Workspace): Promise<void> {
+    event.stopPropagation()
+    if (this.openingWorkspaceId) return
+    this.openingWorkspaceId = workspace.id
+
+    try {
+      const commands = this.workspaceService.collectStartupCommands(workspace)
+      if (commands.length > 0) {
+        this.startupService.registerCommands(commands)
+      }
+
+      const profile = await this.workspaceService.generateTabbyProfile(workspace)
+      this.zone.run(() => {
+        this.profilesService.openNewTabForProfile(profile)
+      })
+    } finally {
+      this.openingWorkspaceId = null
+      this.cdr.detectChanges()
+    }
+  }
+
 }

package/src/index.ts

@@ -8,11 +8,14 @@ import { WorkspaceEditorConfigProvider } from './providers/config.provider'
 import { WorkspaceEditorSettingsProvider } from './providers/settings.provider'
 import { WorkspaceToolbarProvider } from './providers/toolbar.provider'
 import { WorkspaceEditorService } from './services/workspaceEditor.service'
+import { StartupCommandService } from './services/startupCommand.service'
+import { WorkspaceBackgroundService } from './services/workspaceBackground.service'
 
 import { WorkspaceListComponent } from './components/workspaceList.component'
 import { WorkspaceEditorComponent } from './components/workspaceEditor.component'
 import { PaneEditorComponent } from './components/paneEditor.component'
 import { SplitPreviewComponent } from './components/splitPreview.component'
+import { DeleteConfirmModalComponent } from './components/deleteConfirmModal.component'
 
 @NgModule({
   imports: [CommonModule, FormsModule],
@@ -21,12 +24,15 @@ import { SplitPreviewComponent } from './components/splitPreview.component'
     { provide: SettingsTabProvider, useClass: WorkspaceEditorSettingsProvider, multi: true },
     { provide: ToolbarButtonProvider, useClass: WorkspaceToolbarProvider, multi: true },
     WorkspaceEditorService,
+    StartupCommandService,
+    WorkspaceBackgroundService,
   ],
   declarations: [
     WorkspaceListComponent,
     WorkspaceEditorComponent,
     PaneEditorComponent,
     SplitPreviewComponent,
+    DeleteConfirmModalComponent,
   ],
 })
 export default class WorkspaceEditorModule {}

package/src/models/workspace.model.ts

@@ -37,6 +37,9 @@ export interface TabbyRecoveryToken {
   tabTitle?: string
   tabCustomTitle?: string
   disableDynamicTitle?: boolean
+  cwd?: string
+  // Allow custom properties (matches Tabby's RecoveryToken interface)
+  [key: string]: any
 }
 
 export interface TabbySplitLayoutProfile {
@@ -58,7 +61,6 @@ export interface WorkspacePane {
   profileId: string
   cwd?: string
   startupCommand?: string
-  title?: string
 }
 
 export interface WorkspaceSplit {
@@ -67,30 +69,71 @@ export interface WorkspaceSplit {
   children: (WorkspacePane | WorkspaceSplit)[]
 }
 
+export interface WorkspaceBackground {
+  type: 'none' | 'solid' | 'gradient' | 'image'
+  value: string  // CSS value: hex, gradient string, or URL
+}
+
 export interface Workspace {
   id: string
   name: string
   icon?: string
   color?: string
+  background?: WorkspaceBackground
   root: WorkspaceSplit
-  isDefault?: boolean
-  hotkey?: string
+  launchOnStartup?: boolean
 }
 
+// Preset backgrounds for quick selection
+export const BACKGROUND_PRESETS: WorkspaceBackground[] = [
+  { type: 'none', value: '' },
+  // Existing presets
+  { type: 'gradient', value: 'linear-gradient(132deg, transparent 83%, rgba(6, 220, 249, 0.18) 100%), linear-gradient(210deg, transparent 85%, rgba(139, 92, 246, 0.2) 100%)' },
+  { type: 'gradient', value: 'linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, transparent 50%)' },
+  { type: 'gradient', value: 'linear-gradient(45deg, rgba(239, 68, 68, 0.1) 0%, transparent 50%)' },
+  { type: 'gradient', value: 'linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, transparent 50%)' },
+  { type: 'gradient', value: 'linear-gradient(225deg, transparent 70%, rgba(249, 115, 22, 0.15) 100%)' },
+  { type: 'gradient', value: 'linear-gradient(180deg, rgba(139, 92, 246, 0.1) 0%, transparent 40%)' },
+  // New presets
+  { type: 'gradient', value: 'linear-gradient(315deg, transparent 80%, rgba(236, 72, 153, 0.15) 100%)' }, // Pink bottom-right
+  { type: 'gradient', value: 'linear-gradient(0deg, rgba(6, 182, 212, 0.12) 0%, transparent 35%)' }, // Cyan bottom
+  { type: 'gradient', value: 'linear-gradient(45deg, transparent 85%, rgba(234, 179, 8, 0.18) 100%), linear-gradient(225deg, transparent 85%, rgba(249, 115, 22, 0.15) 100%)' }, // Gold corners
+  { type: 'gradient', value: 'linear-gradient(160deg, rgba(34, 197, 94, 0.12) 0%, transparent 40%)' }, // Green top-left
+  { type: 'gradient', value: 'linear-gradient(200deg, transparent 75%, rgba(99, 102, 241, 0.18) 100%)' }, // Indigo bottom-left
+  { type: 'gradient', value: 'linear-gradient(135deg, rgba(20, 184, 166, 0.1) 0%, transparent 50%), linear-gradient(315deg, rgba(139, 92, 246, 0.1) 0%, transparent 50%)' }, // Teal + Violet diagonal
+  { type: 'gradient', value: 'linear-gradient(90deg, rgba(239, 68, 68, 0.08) 0%, transparent 30%, transparent 70%, rgba(59, 130, 246, 0.08) 100%)' }, // Red-Blue sides
+  { type: 'gradient', value: 'linear-gradient(180deg, transparent 60%, rgba(16, 185, 129, 0.12) 100%)' }, // Emerald bottom fade
+  { type: 'gradient', value: 'linear-gradient(45deg, rgba(168, 85, 247, 0.1) 0%, transparent 40%), linear-gradient(225deg, rgba(6, 182, 212, 0.1) 0%, transparent 40%)' }, // Purple + Cyan corners
+  { type: 'gradient', value: 'linear-gradient(150deg, transparent 70%, rgba(251, 146, 60, 0.15) 100%), linear-gradient(30deg, transparent 70%, rgba(251, 146, 60, 0.1) 100%)' }, // Warm orange accents
+]
+
+/**
+ * Type guard to check if a node is a WorkspaceSplit.
+ * @param node - The node to check
+ * @returns True if the node is a WorkspaceSplit
+ */
 export function isWorkspaceSplit(node: WorkspacePane | WorkspaceSplit): node is WorkspaceSplit {
   return 'orientation' in node && 'children' in node
 }
 
+/**
+ * Creates a new pane with default configuration.
+ * @returns A new WorkspacePane with generated UUID and empty settings
+ */
 export function createDefaultPane(): WorkspacePane {
   return {
     id: generateUUID(),
     profileId: '',
     cwd: '',
     startupCommand: '',
-    title: '',
   }
 }
 
+/**
+ * Creates a new split with two default panes.
+ * @param orientation - Split direction ('horizontal' or 'vertical'), defaults to 'horizontal'
+ * @returns A new WorkspaceSplit with two panes at 50/50 ratio
+ */
 export function createDefaultSplit(orientation: 'horizontal' | 'vertical' = 'horizontal'): WorkspaceSplit {
   return {
     orientation,
@@ -99,17 +142,52 @@ export function createDefaultSplit(orientation: 'horizontal' | 'vertical' = 'hor
   }
 }
 
-export function createDefaultWorkspace(name: string = 'New Workspace'): Workspace {
+// Color palette for workspaces
+const WORKSPACE_COLORS = [
+  '#3b82f6', // blue
+  '#10b981', // emerald
+  '#f59e0b', // amber
+  '#ef4444', // red
+  '#8b5cf6', // violet
+  '#ec4899', // pink
+  '#06b6d4', // cyan
+  '#f97316', // orange
+]
+
+// Icon list for workspaces
+const WORKSPACE_ICONS = [
+  'columns', 'terminal', 'code', 'folder', 'home', 'briefcase',
+  'cog', 'database', 'server', 'cloud', 'rocket', 'flask',
+  'bug', 'wrench', 'cube', 'layer-group', 'sitemap', 'project-diagram'
+]
+
+/** Returns a random color from the workspace color palette. */
+export function getRandomColor(): string {
+  return WORKSPACE_COLORS[Math.floor(Math.random() * WORKSPACE_COLORS.length)]
+}
+
+/** Returns a random icon from the workspace icon set. */
+export function getRandomIcon(): string {
+  return WORKSPACE_ICONS[Math.floor(Math.random() * WORKSPACE_ICONS.length)]
+}
+
+/**
+ * Creates a new workspace with default configuration.
+ * @param name - Display name for the workspace (optional)
+ * @returns A new Workspace with generated UUID, random icon/color, and a default split
+ */
+export function createDefaultWorkspace(name: string = ''): Workspace {
   return {
     id: generateUUID(),
     name,
-    icon: 'columns',
-    color: '#3b82f6',
+    icon: getRandomIcon(),
+    color: getRandomColor(),
     root: createDefaultSplit(),
-    isDefault: false,
+    launchOnStartup: false,
   }
 }
 
+/** Generates a random UUID v4 string. */
 export function generateUUID(): string {
   return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
     const r = (Math.random() * 16) | 0
@@ -118,9 +196,36 @@ export function generateUUID(): string {
   })
 }
 
+/**
+ * Recursively counts the total number of panes in a split tree.
+ * @param node - The root node to count from
+ * @returns Total number of panes in the tree
+ */
 export function countPanes(node: WorkspacePane | WorkspaceSplit): number {
   if (isWorkspaceSplit(node)) {
     return node.children.reduce((sum, child) => sum + countPanes(child), 0)
   }
   return 1
 }
+
+/**
+ * Creates a deep clone of an object, preserving type information.
+ * More efficient than JSON.parse(JSON.stringify()) for simple objects.
+ * @param obj - The object to clone
+ * @returns A deep copy of the object
+ */
+export function deepClone<T>(obj: T): T {
+  if (obj === null || typeof obj !== 'object') {
+    return obj
+  }
+  if (Array.isArray(obj)) {
+    return obj.map(item => deepClone(item)) as T
+  }
+  const cloned = {} as T
+  for (const key in obj) {
+    if (Object.prototype.hasOwnProperty.call(obj, key)) {
+      cloned[key] = deepClone(obj[key])
+    }
+  }
+  return cloned
+}

package/src/providers/settings.provider.ts

@@ -1,12 +1,12 @@
 import { Injectable } from '@angular/core'
 import { SettingsTabProvider } from 'tabby-settings'
 import { WorkspaceListComponent } from '../components/workspaceList.component'
-import { CONFIG_KEY, DISPLAY_NAME } from '../build-config'
+import { CONFIG_KEY, DISPLAY_NAME, IS_DEV } from '../build-config'
 
 @Injectable()
 export class WorkspaceEditorSettingsProvider extends SettingsTabProvider {
   id = CONFIG_KEY
-  icon = 'columns'
+  icon = IS_DEV ? 'bolt' : 'th-large'
   title = DISPLAY_NAME
 
   getComponentType(): any {