Skip to content

feat: domain trees (accordion grouping) and bottom tab search bar - #2459

Open
HASJ wants to merge 13 commits into
mbnuqw:v5from
HASJ:feat/custom-all
Open

HASJ wants to merge 13 commits into
mbnuqw:v5from
HASJ:feat/custom-all

Conversation

@HASJ

@HASJ HASJ commented Sep 18, 2026

Copy link
Copy Markdown

Overview

This pull request introduces two major features designed to streamline tab management and navigation in dense tab workflows:

  1. Domain Trees (Inline Accordion Grouping): Automatically organizes tabs sharing the same website domain or configured category into lightweight, collapsible tree branches directly inside the active panel.
  2. Bottom Tab Search Bar: Adds a dedicated, high-performance tab search bar docked at the bottom of the sidebar with an F8 keyboard shortcut and diacritics-insensitive, tokenized fuzzy search.

Both features are cleanly rebased onto the latest v5 branch, maintain complete architectural alignment with Sidebery's core services, and come with extensive unit test suites.


1. Domain Trees (Inline Accordion Grouping)

Managing dozens of open tabs across multiple projects often results in scattered tabs from the same websites. Domain Trees solves this by dynamically grouping related tabs into collapsible accordion hierarchies without requiring manual tab sorting or separate navbar panels.

Key Architectural Concepts

  • Inline Placeholder Architecture:

    • Rather than designating an arbitrary web tab as the branch parent, Domain Trees leverages Sidebery's existing lightweight group tab architecture (isGroup, group.html?dt=<domain>).
    • Placeholders act as dedicated accordion headers with clean domain titles and automatically fetched favicons.
  • Automatic 2+ Tab Threshold:

    • Solitary tabs from a domain remain ordinary top-level tabs to prevent single-tab organizational overhead.
    • As soon as a second tab matching the same domain opens or navigates, a domain placeholder is spawned and both tabs are seamlessly parented under it.
  • Category Meta-Roots & Daughter Sub-Trees:

    • Custom Rules: Users can define multi-domain category rules (e.g. Media: youtube.com | youtu.be | spotify.com | soundcloud.com).
    • Category meta-roots activate with a threshold of $\ge 1$ tab and remain persistent as long as child tabs exist.
    • Inside a meta-root, single tabs from distinct domains remain direct children. If 2 or more tabs from a sub-domain appear (e.g., multiple YouTube tabs inside Media), a daughter sub-tree is spawned underneath the meta-root.
    • If daughter tabs drop back to 1, the sub-tree cleanly dissolves and promotes the remaining tab back up to the meta-root.
  • Panel Rule Precedence:

    • Sidebery's Panel Tab Move Rules always take precedence. If a tab is routed to a specific panel by URL/container rules, Domain Trees respects that boundary and groups tabs within their assigned panel.
  • Accidental Closure Protection:

    • Closing a domain placeholder header that still contains living child tabs triggers a confirmation dialog to guard against accidental loss of the entire branch.
  • Automatic Garbage Collection & Circuit Breaker:

    • When all child tabs in a domain tree are closed or moved away, the placeholder tab automatically removes itself.
    • A built-in circuit breaker prevents creation storms or runaway recursion during rapid batch tab creation or snapshot restoration.

2. Bottom Tab Search Bar

Quickly locating tabs in a deep vertical hierarchy without taking hands off the keyboard is essential. The Bottom Tab Search bar provides a fast search interface positioned right at the base of the tabs panel.

Key Features & Design

  • Ergonomics & F8 Shortcut:

    • Docked conveniently at the bottom of the tab panel (bar.search.bottom.vue).
    • Pressing F8 immediately focuses the search bar; pressing Esc or clearing the input restores full tree view.
    • Configurable via the subPanelTabSearch setting in the Settings page.
  • Diacritics-Insensitive & Tokenized Search Engine:

    • Enhanced search logic in search.fg.tabs.ts normalizes Unicode diacritics / accents (normalizeDiacritics).
    • Queries are split into tokens, allowing out-of-order search terms matching tab titles, custom titles, URLs, and Firefox Container names.
  • WeakMap Query Caching:

    • Utilizes a WeakMap<Tab, { key: string, str: string }> to cache normalized search strings per tab, eliminating redundant string allocations during rapid typing strokes.

3. Testing & Verification

  • Unit Tests:
    • vitest run passes 100% across all 11 test suites (127 passed tests).
    • Dedicated test suite src/services/tabs.fg.domain-trees.test.ts (38 comprehensive unit tests covering creation, deduplication, meta-roots, dissolution, and cleanup).
    • Dedicated test suite src/services/search.fg.tabs.test.ts (5 unit tests covering tokenization, accent normalization, and container matching).
  • Type Checking:
    • npm run lint.types (vue-tsc --noemit) completes with 0 errors.
  • Build:
    • npm run build completes cleanly using Vite with no bundling issues.

Commits Included

  • feat(domain-trees): add types and default settings for domain trees
  • feat(domain-trees): implement domain trees service, test mocks, and design specs
  • feat(domain-trees): integrate domain trees with tab event handlers and lifecycle
  • feat(domain-trees): add UI interactions and styling for domain tree group tabs
  • feat(domain-trees): add domain trees configuration in settings page and form controls
  • test(domain-trees): add comprehensive unit test suite for domain trees
  • chore: rm internal docs and update .gitignore
  • feat(search): add normalizeDiacritics utility and unit tests
  • feat(search): add subPanelTabSearch setting and localization strings
  • feat(search): implement tokenized, diacritics-insensitive, cached tab search engine
  • feat(sidebar): add bottom search bar component with F8 shortcut integration
  • chore: add .thinktank to .gitignore
  • merge: integrate feat/domain-trees and feat/bottom-tab-search

@HASJ

HASJ commented Sep 18, 2026 •

Copy link
Copy Markdown
Author

I've grown weary of constantly changing panels because of some other extensions I have. I made this feature to keep it all in a single place.

For a more visual explanation this is the Social rule, which captures reddit.com, x.com and twitter.com domains
Social: reddit.com|x.com|twitter.com
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant