Display pinned tabs in a group-like section

[dnlvgl]

Pinned tabs are now separated from regular tabs and displayed in their
own collapsible group at the top of the list, with a group checkbox for
bulk select/deselect. This makes pinned tabs visually distinct and
easier to manage, consistent with how tab groups are displayed.

Fixes #2

Summary by CodeRabbit

• New Features
  • Pinned tabs now display in a separate section with a visual indicator
  • Improved tab layout organization with pinned items prioritized in the display order

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request adds visual separation for pinned tabs by introducing a CSS indicator class and modifying the rendering flow in JavaScript to display pinned tabs as a distinct group, separate from grouped and ungrouped tabs, with new helper functions to manage their display.

Changes

Cohort / File(s)	Summary
Pinned Indicator Styling popup/popup.css	Introduces new .pinned-indicator CSS class (10px × 10px circular indicator with secondary text color and flex-shrink property).
Pinned Tab Rendering Logic popup/popup.js	Adds createPinnedHeader() function for rendering pinned section header; extends createTabItem() with optional overrideGroupId parameter; modifies render flow to handle pinned tabs first with distinct group treatment; adjusts ungrouped tab visibility logic to account for pinned tab presence.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• Support tab groups and partially selected state #1: Introduces grouped tab rendering with createTabItem signature modifications; this PR builds upon that foundation by adding pinned-as-group handling to the same rendering pipeline.

Poem

🐰 Pinned tabs hop to the front of the line,
With indicators so round and divine,
Grouped and sorted, no more mixed-up views,
The rendering flow gets a fresh set of clues! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main change: displaying pinned tabs in a group-like section, which matches the core functionality introduced in the PR.
Linked Issues check	✅ Passed	The PR implements the desired behavior from issue #2: pinned tabs now appear visually distinct in their own collapsible group at the top, making them easier to select and deselect like a tab group.
Out of Scope Changes check	✅ Passed	All changes are directly related to the objective of displaying pinned tabs in a group-like section; no unrelated modifications are present.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch claude/fix-tablist-issue-2-jRnwn

Important

Action Needed: IP Allowlist Update

If your organization protects your Git platform with IP whitelisting, please add the new CodeRabbit IP address to your allowlist:

• ✨ 136.113.208.247/32 (new)
• 34.170.211.100/32
• 35.222.179.152/32

Reviews will stop working after February 8, 2026 if the new IP is not added to your allowlist.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@popup/popup.css`:
- Around line 264-270: The .pinned-indicator rule uses hardcoded 10px for
width/height; define a CSS variable --indicator-size in :root (or reuse an
appropriate existing size var) and replace the hardcoded values in
.pinned-indicator with that variable (use var(--indicator-size)) so the
indicator follows the project's size tokens and can be adjusted centrally.

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

Use a size variable for the pinned indicator.

Hardcoded 10px bypasses the size variables used elsewhere; consider defining a dedicated --indicator-size in :root and reuse it here.

♻️ Suggested change

:root {
  /* sizes */
  --popup-width: 320px;
  --popup-max-height: 500px;
  --icon-size: 16px;
  --border-radius: 4px;
+  --indicator-size: 10px;
}

.pinned-indicator {
-  width: 10px;
-  height: 10px;
+  width: var(--indicator-size);
+  height: var(--indicator-size);
  border-radius: 50%;
  flex-shrink: 0;
  background-color: var(--text-secondary);
}

As per coding guidelines: Use CSS variables defined in :root for colors, spacing, and sizes in CSS files.

🤖 Prompt for AI Agents

In `@popup/popup.css` around lines 264 - 270, The .pinned-indicator rule uses
hardcoded 10px for width/height; define a CSS variable --indicator-size in :root
(or reuse an appropriate existing size var) and replace the hardcoded values in
.pinned-indicator with that variable (use var(--indicator-size)) so the
indicator follows the project's size tokens and can be adjusted centrally.