feat(core): Dock Improvements - Sorting, Categorizing, Overflow Menu & Context Menu

[adriandarian]

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:

Action	Description
🔄 Refresh	Reloads the iframe content
🔗 Open in new tab	Opens the URL in a new browser tab
📋 Copy URL	Copies the iframe URL to clipboard
👁️ Show/Hide address bar	Toggles the address bar visibility

For all docks:

Action	Description
🚫 Hide from dock	Placeholder for future server-side persistence

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

File	Type	Description
packages/kit/src/client/docks.ts	Modified	Added DockEntrySettings interface
packages/core/src/client/webcomponents/state/docks.ts	Modified	Initialize settings in entry state
packages/core/src/node/host-docks.ts	Modified	Sorting, categories for builtins
packages/core/src/client/webcomponents/components/DockEntries.vue	Modified	Categorizing, overflow, context menu
packages/core/src/client/webcomponents/components/DockEntry.vue	Modified	Context menu event emission
packages/core/src/client/webcomponents/components/ViewIframe.vue	Modified	Address bar UI
packages/core/src/client/webcomponents/components/Dock.vue	Modified	Pass context to DockEntries
packages/core/src/client/standalone/App.vue	Modified	Pass context to DockEntries
packages/core/src/client/webcomponents/components/DockContextMenu.vue	New	Context menu component
packages/core/src/client/webcomponents/components/DockOverflowMenu.vue	New	Overflow menu component

---

Testing

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

Linked Issues

Closes #9 (dock-related tasks)

Additional context

[antfu]

Appreciate the PR - but as you packed too many features into one PR I can't merge it as is - I will reimplement them piece by piece, but thems for your PR as the fundation