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

[adriandarian]

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

would you like me to break it down into smaller PRs then you can just review since I did the work already?

if so what do you consider too big of a PR so I can keep it under the threshold? Also are specifics or changes you would make to the current PR to carry forward into the smaller PRs?

[antfu]

Apparently, your agents already listed 5 bullet points that are implemented, which to me should all be separated into 5 different PRs. There are so many tiny details I have opinions on, where it would be very hard to move all of them together in this PR. I already reimplemented some of them on the main branch by hand, where you can refer to .