2457: pinned tabs in one line setting, scrollable pinned tabs in all display modes

[the-nelsonator]

Closes #2457

Summary

1. Adds a Keep pinned tabs on a single line setting that, when in panel - top or in panel - global is selected for Pinned tabs position, keeps the pinned tabs bar on one line instead of wrapping, with scroll support so every pin stays reachable regardless of sidebar width.

2. Adds scrolling to left/right pinned tabs position instead of overflowing.

3. Adds an optional (none, 1, 2, ... , 10, default 5) sub-setting of Show titles of pinned tabs called Visible rows before scrolling which controls how many pinned tabs with titles to show before overflowing and adds scrolling.

Settings:

Keep pinned tabs on a single line:

Disabled when pinned tabs position is right/left:

Disabled when Show titles of pinned tabs is enabled:

Visible rows before scrolling:

Videos

Pinned tabs on top in scrollable single line:

top.mp4

Pinned tabs on top with show titles turned on now scrollable vertically:

titles.mp4

Scrolling with pinned tabs on left:

left.mp4

Scrolling with pinned tabs on right:

right.mp4

Changes

• src/types/settings.ts / src/defaults/settings.ts

  • New pinnedTabsSingleLine: boolean (default false)
  • New pinnedTabsListMaxRows option (1,2,3,4,5,6,8,10,'none', default 5)

• src/services/settings.ts

  • New precalc flag pinnedTabsListCapped (panel/top position + titles on + a numeric row limit)
  • New precalc pinnedTabsListMaxRows (coerced to a number, 0 when disabled)
  • New precalc pinnedTabsBarVertical — single shared "is this bar's scroll axis vertical" flag, used by both the component and the scroll service so they can't drift out of sync

• src/sidebar/components/bar.pinned-tabs.vue

  • Template ref + data-overflow attribute
  • recalcOverflow() via ResizeObserver + a watcher on pin count
  • onWheel scrolls the bar while it overflows, else falls back to the existing tab-switch debouncer
  • onDragOver edge-autoscroll, edge size clamped to the bar's own dimensions
  • onMounted scrolls the active pin into view

• src/styles/sidebar/bar.pinned-tabs.styl

  • nowrap + horizontal scroll for single-line mode
  • Always-on vertical scroll for left/right positions
  • New row-capped max-height rule for titled lists: calc(rows * (min-height + margin))
  • Edge-fade mask-image affordance on whichever side overflows
  • Old separator line suppressed in capped mode
  • flex-shrink: 0 fixes on both single-line and capped rules (border-box sizing made them shrinkable flex children, coming out a few px short)

• src/styles/sidebar/tab.styl

  • Hoisted --tabs-min-height / --tabs-title-padding-vert from .Tab to #root, since titled pinned tabs need that var too

• src/services/tabs.fg.scroll.ts

  • New scrollToPinnedTab(), resolving the bar from the DOM (#tab<id> → .tab-wrapper → .PinnedTabsBar)
  • scrollToTab() now delegates to it for pinned ids, fixing several call sites that silently no-op'd before

• src/services/tabs.fg.handlers.ts

  • Relaxed two !tab.pinned guards (autoScrollToNewTab, scrollPanelAfterSwitchingTab)

• src/services/tabs.fg.edit-title.ts

  • Scrolls a pin into view when inline title-editing starts on it
  • focus() → focus({ preventScroll: true }) so that scroll isn't cut off

• src/sidebar/sidebar.vue

  • New root attributes: data-pinned-tabs-single-line, data-pinned-tabs-list-capped
  • Added --pinned-list-max-rows to the existing :style binding

• src/page.setup/components/settings.tabs.vue

  • New ToggleField for single-line
  • New SelectField for the row cap, nested under "Show titles of pinned tabs"

• src/_locales/dict.setup-page.ts

  • Full 9-language translations for both new setting labels
  • English-only numeric option labels (matches existing tabsTreeLimit convention)
  • Full-language none option