Description

This PR implements all dock-related features from the TODO issue, significantly improving the dock UX with better organization, overflow handling, and contextual actions.

Features Implemented

1. 🔢 Dock Sorting

Dock entries are now sorted by defaultOrder property (higher values appear first). This allows plugins to control where their dock entries appear relative to others.

ctx.docks.register({
  id: 'my-dock',
  title: 'My Dock',
  defaultOrder: 100, // Higher = appears earlier
  // ...
})

Changes:

• packages/core/src/node/host-docks.ts - Added .sort() to values() method

2. 📁 Dock Categorizing

Dock entries are now visually grouped by category with subtle separators between groups. Categories appear in this order: app → framework → web → default → advanced

Category definitions (already existed in types):

• app - Application-specific tools
• framework - Framework integrations (Vue, React, etc.)
• web - Web-related tools (network, storage, etc.)
• default - General purpose (when no category specified)
• advanced - Power user tools (terminals, settings, etc.)

Changes:

• packages/core/src/client/webcomponents/components/DockEntries.vue - Groups entries by category with visual separators
• packages/core/src/node/host-docks.ts - Builtin entries (~terminals, ~logs, ~settings) now have category: 'advanced'

3. 📋 Dock Show More (Overflow Menu)

When dock entries exceed maxVisible (default: 8), excess entries collapse into a "..." overflow menu with a badge showing the count.

Features:

• Configurable via maxVisible prop (set to 0 to disable)
• Badge shows number of hidden entries
• Dropdown menu with icons and titles
• Click outside or select to close

New component:

• packages/core/src/client/webcomponents/components/DockOverflowMenu.vue

4. 🖱️ Context Menu for Dock Entries

Right-click on any dock entry to access contextual actions.

For iframe docks:

For all docks:

New component:

• packages/core/src/client/webcomponents/components/DockContextMenu.vue

Features:

• Positioned at cursor, auto-adjusts to stay in viewport
• Closes on click outside or Escape key
• Smooth enter/exit animations
• Shows entry title in header
• Disabled state for "Refresh" when iframe not yet mounted

5. 🔗 Address Bar for Iframe Panels

Iframe dock panels can now show an optional address bar at the top.

Features:

• Toggle via context menu ("Show/Hide address bar")
• Shows current URL (selectable for copying)
• Quick action buttons: Refresh, Open in new tab
• Smooth slide animation when toggling
• Per-entry setting (stored in DockEntryState.settings)

Changes:

• packages/kit/src/client/docks.ts - Added DockEntrySettings interface
• packages/core/src/client/webcomponents/state/docks.ts - Initialize settings in entry state
• packages/core/src/client/webcomponents/components/ViewIframe.vue - Render address bar UI

Type Changes

// New interface for per-entry user settings
export interface DockEntrySettings {
  showAddressBar: boolean
}

// Added to DockEntryState
export interface DockEntryState {
  // ... existing properties
  settings: DockEntrySettings
}

Files Changed

Testing

• pnpm typecheck passes
• pnpm lint passes
• pnpm vitest run - all 93 tests pass

Linked Issues

Closes #9 (dock-related tasks)

Additional context