Preflight Checklist
Problem/Usecase Description
When using vertical/sidebar tabs on a smaller display (or when many tabs are open), the sidebar takes up significant horizontal space. There's currently no way to minimize it to just favicons — users must either switch to horizontal tabs or accept the width overhead.
Additionally, notebook tabs always display a generic "notebook" icon regardless of the notebook's own icon/emoji customization. This makes it harder to visually distinguish between multiple open notebooks at a glance, especially if collapsed to icon-only mode.
Proposed Solution
- Collapsible sidebar tabs (favicon-only mode)
Add a user setting and toggle that collapses the vertical tab sidebar to show only favicons (~48px wide), hiding tab titles and close buttons. This would:
Add a sidebar_tabs_collapsed boolean to UserSettings (persisted in user config)
Provide a toggle button in the sidebar (near the "+" new tab button area) or through the resize handle
Apply a smooth CSS width transition between collapsed (~48px) and expanded (200–400px) states
Show tab title as a tooltip on hover when collapsed
Hide the resize handle when collapsed
2. Custom notebook favicons in tabs
Notebooks already have an icon: IconData field in NotebookData that supports favicons, emojis, images, and custom icons, but the tab components currently hardcode for all notebook-type views. The proposal is to:
Thread the notebook's icon data into the tab rendering
Render the appropriate icon type (favicon, emoji, image, or named icon) instead of the hardcoded notebook icon
Fall back to the default notebook icon when no custom icon is set
This would apply to both vertical and horizontal tab variants
Files likely affected:
packages/types/src/config.types.ts — new setting type
app/src/main/config.ts — default + migration
packages/services/src/lib/tabs/tabsLayout.svelte.ts — collapsed state store
app/src/renderer/Core/components/Tabs/VerticalTabsList.svelte — collapse logic
app/src/renderer/Core/components/Tabs/VerticalBaseTabItem.svelte — collapsed UI + notebook icon
app/src/renderer/Core/components/Tabs/VerticalTabItem.svelte — collapsed UI + notebook icon
app/src/renderer/Core/components/Tabs/TabItem.svelte — notebook icon (horizontal tabs)
app/src/renderer/Core/Core.svelte — initialization
Feature Type
User interface improvement
Additional Context
The existing IconData type in @deta/icons already supports all the icon variants we'd need: colors, icon, image, emoji, favicon, and icon-file. The infrastructure is there, it just needs to be wired up to the tab rendering.
The collapsed sidebar concept is common in browsers like Arc and Vivaldi, and would pair well with Surf's existing vertical tab layout.
Happy to implement this if the team feels it aligns with Surf's direction. Would love any guidance on preferred UX patterns or design language before starting. Thank you for open-sourcing Surf!
Contribution
Preflight Checklist
Problem/Usecase Description
When using vertical/sidebar tabs on a smaller display (or when many tabs are open), the sidebar takes up significant horizontal space. There's currently no way to minimize it to just favicons — users must either switch to horizontal tabs or accept the width overhead.
Additionally, notebook tabs always display a generic "notebook" icon regardless of the notebook's own icon/emoji customization. This makes it harder to visually distinguish between multiple open notebooks at a glance, especially if collapsed to icon-only mode.
Proposed Solution
Add a user setting and toggle that collapses the vertical tab sidebar to show only favicons (~48px wide), hiding tab titles and close buttons. This would:
Add a sidebar_tabs_collapsed boolean to UserSettings (persisted in user config)
Provide a toggle button in the sidebar (near the "+" new tab button area) or through the resize handle
Apply a smooth CSS width transition between collapsed (~48px) and expanded (200–400px) states
Show tab title as a tooltip on hover when collapsed
Hide the resize handle when collapsed
2. Custom notebook favicons in tabs
Notebooks already have an icon: IconData field in NotebookData that supports favicons, emojis, images, and custom icons, but the tab components currently hardcode for all notebook-type views. The proposal is to:
Thread the notebook's icon data into the tab rendering
Render the appropriate icon type (favicon, emoji, image, or named icon) instead of the hardcoded notebook icon
Fall back to the default notebook icon when no custom icon is set
This would apply to both vertical and horizontal tab variants
Files likely affected:
packages/types/src/config.types.ts — new setting type
app/src/main/config.ts — default + migration
packages/services/src/lib/tabs/tabsLayout.svelte.ts — collapsed state store
app/src/renderer/Core/components/Tabs/VerticalTabsList.svelte — collapse logic
app/src/renderer/Core/components/Tabs/VerticalBaseTabItem.svelte — collapsed UI + notebook icon
app/src/renderer/Core/components/Tabs/VerticalTabItem.svelte — collapsed UI + notebook icon
app/src/renderer/Core/components/Tabs/TabItem.svelte — notebook icon (horizontal tabs)
app/src/renderer/Core/Core.svelte — initialization
Feature Type
User interface improvement
Additional Context
The existing IconData type in @deta/icons already supports all the icon variants we'd need: colors, icon, image, emoji, favicon, and icon-file. The infrastructure is there, it just needs to be wired up to the tab rendering.
The collapsed sidebar concept is common in browsers like Arc and Vivaldi, and would pair well with Surf's existing vertical tab layout.
Happy to implement this if the team feels it aligns with Surf's direction. Would love any guidance on preferred UX patterns or design language before starting. Thank you for open-sourcing Surf!
Contribution