tabby-tabbyspaces 0.1.0 → 0.2.1

package/src/services/workspaceBackground.service.ts

@@ -0,0 +1,167 @@
+import { Injectable } from '@angular/core'
+import { AppService, SplitTabComponent } from 'tabby-core'
+import { WorkspaceEditorService } from './workspaceEditor.service'
+import { WorkspaceBackground } from '../models/workspace.model'
+import { CONFIG_KEY } from '../build-config'
+
+/**
+ * Service for applying custom backgrounds to workspace tabs.
+ * Injects CSS dynamically based on workspace configuration.
+ */
+@Injectable({ providedIn: 'root' })
+export class WorkspaceBackgroundService {
+  private styleElement: HTMLStyleElement | null = null
+  private appliedWorkspaces = new Map<string, string>() // workspaceId -> CSS
+
+  constructor(
+    private app: AppService,
+    private workspaceService: WorkspaceEditorService
+  ) {}
+
+  /**
+   * Initialize the service by setting up tab event listeners.
+   * Must be called once during app initialization.
+   */
+  initialize(): void {
+    this.setupTabListeners()
+  }
+
+  private setupTabListeners(): void {
+    // Listen for tab open
+    this.app.tabOpened$.subscribe(tab => this.onTabOpened(tab))
+
+    // Listen for tab close - cleanup
+    this.app.tabClosed$.subscribe(tab => this.onTabClosed(tab))
+  }
+
+  private onTabOpened(tab: unknown): void {
+    if (!(tab instanceof SplitTabComponent)) return
+
+    // Small delay to let Angular finish rendering
+    setTimeout(() => {
+      const workspaceId = this.extractWorkspaceId(tab)
+      if (!workspaceId) return
+
+      const workspace = this.workspaceService.getWorkspaces()
+        .find(w => w.id === workspaceId)
+
+      if (workspace?.background && workspace.background.type !== 'none') {
+        this.applyBackground(workspaceId, workspace.background)
+      }
+    }, 200)
+  }
+
+  private onTabClosed(tab: unknown): void {
+    if (!(tab instanceof SplitTabComponent)) return
+
+    const workspaceId = this.extractWorkspaceId(tab)
+    if (workspaceId) {
+      this.removeBackground(workspaceId)
+    }
+  }
+
+  /**
+   * Extract workspace ID from a SplitTabComponent.
+   * Tries multiple strategies: _recoveredState and child profile ID.
+   */
+  private extractWorkspaceId(tab: SplitTabComponent): string | undefined {
+    const tabAny = tab as any
+
+    // Strategy 1: Check _recoveredState.workspaceId (for restored tabs)
+    if (tabAny._recoveredState?.workspaceId) {
+      return tabAny._recoveredState.workspaceId
+    }
+
+    // Strategy 2: Extract from child profile ID (for freshly opened tabs)
+    const profilePrefix = `split-layout:${CONFIG_KEY}:`
+    for (const child of tab.getAllTabs()) {
+      const profileId = (child as any).profile?.id ?? ''
+      if (profileId.startsWith(profilePrefix)) {
+        // Profile ID format: split-layout:CONFIG_KEY:name:UUID
+        const parts = profileId.split(':')
+        return parts[parts.length - 1]
+      }
+    }
+
+    return undefined
+  }
+
+  private applyBackground(workspaceId: string, bg: WorkspaceBackground): void {
+    // Mark split-tab element with data attribute
+    this.markSplitTabElement(workspaceId)
+
+    // Generate and inject CSS
+    const css = this.generateCSS(workspaceId, bg)
+    this.injectCSS(workspaceId, css)
+  }
+
+  private markSplitTabElement(workspaceId: string): void {
+    // Find split-tab that doesn't have a workspace-id yet
+    const splitTabs = document.querySelectorAll('split-tab')
+    for (let i = splitTabs.length - 1; i >= 0; i--) {
+      const splitTab = splitTabs[i]
+      if (!splitTab.hasAttribute('data-workspace-id')) {
+        splitTab.setAttribute('data-workspace-id', workspaceId)
+        break
+      }
+    }
+  }
+
+  private generateCSS(workspaceId: string, bg: WorkspaceBackground): string {
+    if (bg.type === 'none' || !bg.value) return ''
+
+    return `
+      split-tab[data-workspace-id="${workspaceId}"] {
+        background: ${bg.value} !important;
+      }
+      split-tab[data-workspace-id="${workspaceId}"] .xterm-viewport,
+      split-tab[data-workspace-id="${workspaceId}"] .xterm-screen {
+        background: transparent !important;
+      }
+    `
+  }
+
+  private injectCSS(workspaceId: string, css: string): void {
+    if (!this.styleElement) {
+      this.styleElement = document.createElement('style')
+      this.styleElement.id = 'tabbyspaces-backgrounds'
+      document.head.appendChild(this.styleElement)
+    }
+
+    this.appliedWorkspaces.set(workspaceId, css)
+    this.updateStyleElement()
+  }
+
+  private removeBackground(workspaceId: string): void {
+    this.appliedWorkspaces.delete(workspaceId)
+    this.updateStyleElement()
+  }
+
+  private updateStyleElement(): void {
+    if (this.styleElement) {
+      this.styleElement.textContent = Array.from(this.appliedWorkspaces.values()).join('\n')
+    }
+  }
+
+  /**
+   * Refresh background for a specific workspace.
+   * Call this when workspace background is updated in settings.
+   */
+  refreshWorkspaceBackground(workspaceId: string): void {
+    const workspace = this.workspaceService.getWorkspaces()
+      .find(w => w.id === workspaceId)
+
+    if (!workspace) {
+      this.removeBackground(workspaceId)
+      return
+    }
+
+    if (workspace.background && workspace.background.type !== 'none') {
+      const css = this.generateCSS(workspaceId, workspace.background)
+      this.appliedWorkspaces.set(workspaceId, css)
+    } else {
+      this.appliedWorkspaces.delete(workspaceId)
+    }
+    this.updateStyleElement()
+  }
+}

package/src/services/workspaceEditor.service.ts

@@ -6,6 +6,7 @@ import {
   WorkspaceSplit,
   isWorkspaceSplit,
   generateUUID,
+  deepClone,
   TabbyProfile,
   TabbyRecoveryToken,
   TabbySplitLayoutProfile,
@@ -15,7 +16,9 @@ import { PendingCommand } from './startupCommand.service'
 
 @Injectable({ providedIn: 'root' })
 export class WorkspaceEditorService {
-  private cachedProfiles: TabbyProfile[] = []
+  private cachedProfiles: TabbyProfile[] | null = null
+  private cacheTimestamp: number = 0
+  private readonly CACHE_TTL = 30000 // 30 seconds
 
   constructor(
     private config: ConfigService,
@@ -23,49 +26,78 @@ export class WorkspaceEditorService {
     private profilesService: ProfilesService
   ) {}
 
-  private async cacheProfiles(): Promise<void> {
-    this.cachedProfiles = (await this.profilesService.getProfiles()) as TabbyProfile[]
+  private async getCachedProfiles(): Promise<TabbyProfile[]> {
+    const now = Date.now()
+    if (!this.cachedProfiles || now - this.cacheTimestamp > this.CACHE_TTL) {
+      this.cachedProfiles = (await this.profilesService.getProfiles()) as TabbyProfile[]
+      this.cacheTimestamp = now
+    }
+    return this.cachedProfiles
   }
 
+  /** Returns all saved workspaces from config. */
   getWorkspaces(): Workspace[] {
     return this.config.store?.[CONFIG_KEY]?.workspaces ?? []
   }
 
-  async saveWorkspaces(workspaces: Workspace[]): Promise<boolean> {
+  /**
+   * Saves the workspace list to config.
+   * @throws Error if config store is not initialized
+   */
+  async saveWorkspaces(workspaces: Workspace[]): Promise<void> {
     if (!this.config.store?.[CONFIG_KEY]) {
-      return false
+      throw new Error('Config store not initialized')
     }
     this.config.store[CONFIG_KEY].workspaces = workspaces
-    return await this.saveConfig()
+    await this.saveConfig()
   }
 
+  /** Adds a new workspace and shows notification. */
   async addWorkspace(workspace: Workspace): Promise<void> {
-    const workspaces = this.getWorkspaces()
-    workspaces.push(workspace)
-    await this.saveWorkspaces(workspaces)
-    this.notifications.info(`Workspace "${workspace.name}" created`)
+    try {
+      const workspaces = this.getWorkspaces()
+      workspaces.push(workspace)
+      await this.saveWorkspaces(workspaces)
+      this.notifications.info(`Workspace "${workspace.name}" created`)
+    } catch (error) {
+      this.notifications.error(`Failed to create workspace "${workspace.name}"`)
+      throw error
+    }
   }
 
+  /** Updates an existing workspace by ID and shows notification. */
   async updateWorkspace(workspace: Workspace): Promise<void> {
-    const workspaces = this.getWorkspaces()
-    const index = workspaces.findIndex((w) => w.id === workspace.id)
-    if (index !== -1) {
-      workspaces[index] = workspace
-      await this.saveWorkspaces(workspaces)
-      this.notifications.info(`Workspace "${workspace.name}" updated`)
+    try {
+      const workspaces = this.getWorkspaces()
+      const index = workspaces.findIndex((w) => w.id === workspace.id)
+      if (index !== -1) {
+        workspaces[index] = workspace
+        await this.saveWorkspaces(workspaces)
+        this.notifications.info(`Workspace "${workspace.name}" updated`)
+      }
+    } catch (error) {
+      this.notifications.error(`Failed to update workspace "${workspace.name}"`)
+      throw error
     }
   }
 
+  /** Deletes a workspace by ID and shows notification. */
   async deleteWorkspace(workspaceId: string): Promise<void> {
     const workspaces = this.getWorkspaces()
     const workspace = workspaces.find((w) => w.id === workspaceId)
-    const filtered = workspaces.filter((w) => w.id !== workspaceId)
-    await this.saveWorkspaces(filtered)
-    if (workspace) {
-      this.notifications.info(`Workspace "${workspace.name}" deleted`)
+    try {
+      const filtered = workspaces.filter((w) => w.id !== workspaceId)
+      await this.saveWorkspaces(filtered)
+      if (workspace) {
+        this.notifications.info(`Workspace "${workspace.name}" deleted`)
+      }
+    } catch (error) {
+      this.notifications.error(`Failed to delete workspace "${workspace?.name || workspaceId}"`)
+      throw error
     }
   }
 
+  /** Returns all local shell profiles available for use in workspaces. */
   async getAvailableProfiles(): Promise<TabbyProfile[]> {
     const allProfiles = await this.profilesService.getProfiles()
     return allProfiles.filter(
@@ -93,8 +125,9 @@ export class WorkspaceEditorService {
     }
   }
 
+  /** Generates a Tabby split-layout profile from a workspace for opening. */
   async generateTabbyProfile(workspace: Workspace): Promise<TabbySplitLayoutProfile> {
-    await this.cacheProfiles()
+    await this.getCachedProfiles()
     const safeName = this.sanitizeForProfileId(workspace.name)
     return {
       id: `split-layout:${CONFIG_KEY}:${safeName}:${workspace.id}`,
@@ -105,26 +138,27 @@ export class WorkspaceEditorService {
       color: workspace.color,
       isBuiltin: false,
       options: {
-        recoveryToken: this.generateRecoveryToken(workspace.root),
+        recoveryToken: this.generateRecoveryToken(workspace.root, workspace.name, workspace.id),
       },
     }
   }
 
-  private generateRecoveryToken(split: WorkspaceSplit): TabbyRecoveryToken {
+  private generateRecoveryToken(split: WorkspaceSplit, workspaceName: string, workspaceId: string): TabbyRecoveryToken {
     return {
       type: 'app:split-tab',
       orientation: split.orientation === 'horizontal' ? 'h' : 'v',
       ratios: split.ratios,
+      workspaceId,
       children: split.children.map((child) => {
         if (isWorkspaceSplit(child)) {
-          return this.generateRecoveryToken(child)
+          return this.generateRecoveryToken(child, workspaceName, workspaceId)
         }
-        return this.generatePaneToken(child)
+        return this.generatePaneToken(child, workspaceName, workspaceId)
       }),
     }
   }
 
-  private generatePaneToken(pane: WorkspacePane): TabbyRecoveryToken {
+  private generatePaneToken(pane: WorkspacePane, workspaceName: string, workspaceId: string): TabbyRecoveryToken {
     const baseProfile = this.getProfileById(pane.profileId)
 
     if (!baseProfile) {
@@ -162,7 +196,7 @@ export class WorkspaceEditorService {
       options,
       icon: baseProfile.icon || '',
       color: baseProfile.color || '',
-      disableDynamicTitle: false,
+      disableDynamicTitle: true,
       weight: 0,
       isBuiltin: false,
       isTemplate: false,
@@ -170,22 +204,25 @@ export class WorkspaceEditorService {
       behaviorOnSessionEnd: 'auto',
     }
 
-    // Use pane.id for matching in StartupCommandService
-    // Original title will be restored after command execution
+    // tabTitle: workspace name (what user sees)
+    // tabCustomTitle: pane.id (for matching in StartupCommandService)
+    // workspaceId: for duplicate detection after Tabby recovery
     const cwd = pane.cwd || baseProfile.options?.cwd || ''
     return {
       type: 'app:local-tab',
       profile,
       savedState: false,
-      tabTitle: pane.id,
+      tabTitle: workspaceName,
       tabCustomTitle: pane.id,
-      disableDynamicTitle: false,
+      workspaceId,
+      disableDynamicTitle: true,
       cwd,
     }
   }
 
+  /** Creates a deep copy of a workspace with new IDs. */
   duplicateWorkspace(workspace: Workspace): Workspace {
-    const clone = JSON.parse(JSON.stringify(workspace)) as Workspace
+    const clone = deepClone(workspace)
     clone.id = generateUUID()
     clone.name = `${workspace.name} (Copy)`
     clone.launchOnStartup = false
@@ -221,40 +258,40 @@ export class WorkspaceEditorService {
     if (found) return found
 
     // Fallback: check cached profiles (includes built-ins)
-    return this.cachedProfiles.find((p) => p.id === profileId && isLocalType(p.type))
+    return this.cachedProfiles?.find((p) => p.id === profileId && isLocalType(p.type))
   }
 
+  /** Collects all startup commands from panes in a workspace. */
   collectStartupCommands(workspace: Workspace): PendingCommand[] {
     const commands: PendingCommand[] = []
-    this.collectCommandsFromNode(workspace.root, commands)
+    this.collectCommandsFromNode(workspace.root, workspace.name, commands)
     return commands
   }
 
   private collectCommandsFromNode(
     node: WorkspacePane | WorkspaceSplit,
+    workspaceName: string,
     commands: PendingCommand[]
   ): void {
     if (isWorkspaceSplit(node)) {
       for (const child of node.children) {
-        this.collectCommandsFromNode(child, commands)
+        this.collectCommandsFromNode(child, workspaceName, commands)
       }
     } else if (node.startupCommand) {
       commands.push({
         paneId: node.id,
         command: node.startupCommand,
-        originalTitle: node.title || '',
+        originalTitle: workspaceName,
       })
     }
   }
 
-  private async saveConfig(): Promise<boolean> {
+  private async saveConfig(): Promise<void> {
     try {
       await this.config.save()
-      return true
     } catch (error) {
-      this.notifications.error('Failed to save configuration')
       console.error('TabbySpaces save error:', error)
-      return false
+      throw error
     }
   }
 }

package/src/styles/_index.scss

@@ -0,0 +1,3 @@
+// Main entry point for shared styles
+@forward 'variables';
+@forward 'mixins';

package/src/styles/_mixins.scss

@@ -0,0 +1,180 @@
+@use 'variables' as *;
+
+// ======================
+// LAYOUT MIXINS
+// ======================
+
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+// ======================
+// FORM INPUT MIXIN
+// ======================
+
+@mixin form-input($bg: var(--theme-bg)) {
+  padding: $spacing-sm $spacing-md;
+  border-radius: $radius-sm;
+  border: 1px solid var(--theme-border, $fallback-border);
+  background: $bg;
+  color: var(--theme-fg);
+  font-size: $font-md;
+
+  &:focus {
+    outline: none;
+    border-color: var(--theme-primary);
+  }
+
+  &::placeholder {
+    color: var(--theme-fg-more, $fallback-fg-more);
+  }
+}
+
+// ======================
+// FORM LABEL MIXIN (S1: Uppercase compact)
+// ======================
+
+@mixin form-label {
+  display: block;
+  font-size: $font-xs;
+  color: var(--theme-fg-less);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: $spacing-xs;
+}
+
+// ======================
+// BUTTON MIXINS
+// ======================
+
+@mixin toolbar-btn {
+  padding: $spacing-sm $spacing-md;
+  background: var(--theme-bg);
+  border: 1px solid var(--theme-border, $fallback-border);
+  border-radius: $radius-sm;
+  color: var(--theme-fg);
+  cursor: pointer;
+  transition: all $transition-fast;
+  font-size: 0.85rem;
+
+  &:hover:not(:disabled) {
+    background: var(--theme-bg-more-more);
+  }
+
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  &.danger {
+    color: var(--theme-danger, $color-danger);
+  }
+}
+
+@mixin btn-success {
+  background: $color-success;
+  border-color: $color-success;
+  color: white;
+
+  &:hover {
+    background: $color-success-hover;
+    border-color: $color-success-hover;
+  }
+}
+
+@mixin btn-base {
+  display: inline-flex;
+  align-items: center;
+  gap: $spacing-sm;
+  padding: $spacing-sm $spacing-lg;
+  font-size: $font-sm;
+  border-radius: $radius-sm;
+  cursor: pointer;
+  transition: all $transition-fast;
+}
+
+@mixin btn-ghost {
+  @include btn-base;
+  background: transparent;
+  border: 1px solid var(--theme-border, $fallback-border);
+  color: var(--theme-fg);
+
+  &:hover {
+    background: var(--theme-bg-more);
+  }
+}
+
+@mixin btn-primary {
+  @include btn-base;
+  background: var(--theme-primary);
+  border: 1px solid var(--theme-primary);
+  color: white;
+
+  &:hover {
+    filter: brightness(1.1);
+  }
+}
+
+@mixin icon-btn-sm($size: 24px) {
+  width: $size;
+  height: $size;
+  @include flex-center;
+  background: var(--theme-bg);
+  border: 1px solid var(--theme-border, $fallback-border);
+  border-radius: $radius-sm;
+  color: var(--theme-fg-more, $fallback-fg-more);
+  cursor: pointer;
+  font-size: 10px;
+  transition: all $transition-fast;
+
+  &:hover:not(:disabled) {
+    border-color: var(--theme-primary);
+    color: var(--theme-primary);
+  }
+
+  &.danger:hover:not(:disabled) {
+    border-color: var(--theme-danger);
+    color: var(--theme-danger);
+  }
+
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+}
+
+// ======================
+// OVERLAY/MODAL MIXINS
+// ======================
+
+@mixin full-overlay($z-index: $z-modal-overlay) {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: $z-index;
+}
+
+// ======================
+// TEXT UTILITIES
+// ======================
+
+@mixin text-ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+// ======================
+// DROPDOWN/POPUP
+// ======================
+
+@mixin dropdown-panel {
+  background: var(--theme-bg-more);
+  border: 1px solid var(--theme-border, $fallback-border);
+  border-radius: $radius-md;
+  box-shadow: $shadow-dropdown;
+}

package/src/styles/_variables.scss

@@ -0,0 +1,67 @@
+// ======================
+// SPACING SCALE (S1: Tight)
+// ======================
+$spacing-xs: 2px;   // toolbar group gap, tiny margins
+$spacing-sm: 4px;   // gaps, small padding
+$spacing-md: 6px;   // default gaps, button padding
+$spacing-lg: 10px;  // section gaps, form spacing
+$spacing-xl: 14px;  // container padding, large gaps
+$spacing-2xl: 18px; // modal padding, section margins
+
+// ======================
+// BORDER RADIUS SCALE (S1: Sharp)
+// ======================
+$radius-xs: 2px;    // tiny elements
+$radius-sm: 2px;    // buttons, small elements
+$radius-md: 3px;    // inputs, dropdowns
+$radius-lg: 4px;    // cards, containers, modals
+
+// ======================
+// CUSTOM COLORS
+// ======================
+// These extend Tabby's --theme-* variables
+$color-success: #10b981;
+$color-success-hover: #059669;
+$color-warning: #f59e0b;
+$color-danger: #ef4444;
+
+// Fallback values for Tabby theme variables that may not be defined
+$fallback-border: rgba(255, 255, 255, 0.1);
+$fallback-fg-more: rgba(255, 255, 255, 0.3);
+
+// ======================
+// SHADOWS (S1: Flat - no shadows)
+// ======================
+$shadow-dropdown: none;
+$shadow-context-menu: none;
+$shadow-modal: none;
+$overlay-bg: rgba(0, 0, 0, 0.7);
+
+// ======================
+// PREVIEW COMPONENT
+// ======================
+$preview-height: 140px;
+$nested-split-bg: rgba(255, 255, 255, 0.02);
+$selected-pane-gradient-start: rgba(59, 130, 246, 0.08);
+$selected-pane-gradient-end: rgba(59, 130, 246, 0.04);
+
+// ======================
+// FONT SIZES (S1: Compact)
+// ======================
+$font-xs: 0.7rem;   // 11px - sublabels, hints
+$font-sm: 0.8rem;   // 13px - labels, secondary text
+$font-md: 0.85rem;  // 14px - default body
+
+// ======================
+// Z-INDEX SCALE
+// ======================
+$z-dropdown: 100;
+$z-modal-overlay: 1100;
+$z-context-menu-overlay: 1200;
+$z-context-menu: 1201;
+
+// ======================
+// TRANSITIONS
+// ======================
+$transition-fast: 0.15s;
+$transition-normal: 0.2s;