feat(soup): collapsible view tabs with dropdown fallback

[evanhutnik]

Summary

• Wrap SoupViewTabs in a CollapsibleHeaderItem so tabs automatically collapse into a compact dropdown when the header runs out of horizontal space
• Tabs collapse at priority: 1 (after the search bar at priority: 0)
• Also works on mobile

Old (Desktop):

New (Desktop):

Old (Mobile):

New (Mobile):

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: e87eaee1-2623-47a1-9228-4ad80b732c2b

📥 Commits

Reviewing files that changed from the base of the PR and between 5870e87 and 536ef20.

📒 Files selected for processing (1)

• js/app/packages/app/component/next-soup/soup-view/soup-view.tsx

---

Walkthrough

The changes consolidate per-view tab components into a shared VIEW_TAB_LISTS mapping and a single ViewTabs component that renders tabs dynamically per list view. applyTabPreset was updated to use the dynamic view. A new CollapsedSoupViewTabs component renders the active tab label and a dropdown of selectable tabs for constrained layouts. soup-view.tsx now uses CollapsibleHeaderItem to render SoupViewTabs when expanded and CollapsedSoupViewTabs when collapsed, preserving existing visibility conditions.

Poem

🐰 Tabs once scattered, now aligned,
One list guides each curious mind,
Collapsed I tuck a label near,
Expand — the full controls appear,
I nibble code and hop with cheer!

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: wrapping view tabs in a collapsible component with dropdown fallback for space constraints.
Description check	✅ Passed	The description is directly related to the changeset, explaining the purpose, implementation, and providing visual examples of the feature on desktop and mobile.
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

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch evan/collapsed-soup-view-tabs

---

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

[github-actions]

Preview: https://evan-collapsed-soup-view-tabs-ud0e6g.preview.macro.com/app (efe291d)

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

js/app/packages/app/component/next-soup/soup-view/soup-view-tabs.tsx (1)

225-229: 🧹 Nitpick | 🔵 Trivial

Redundant typeof checks - items are always objects.

Given list: { value: string; label: string }[], each item is always an object. The typeof item === 'object' ternary condition is always true, making the else branches dead code.

♻️ Simplify item accessors

-              const itemValue = () =>
-                typeof item === 'object' ? item.value : item;
-              const itemLabel = () =>
-                typeof item === 'object' ? item.label : item;
+              const itemValue = () => item.value;
+              const itemLabel = () => item.label;

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@js/app/packages/app/component/next-soup/soup-view/soup-view-tabs.tsx` around
lines 225 - 229, The itemValue and itemLabel accessors contain redundant typeof
checks because items are typed as { value: string; label: string } and thus
always objects; replace the ternary expressions in the itemValue and itemLabel
arrow functions to directly return item.value and item.label respectively
(update the anonymous render callback where itemValue and itemLabel are
declared) and remove the dead else branches so the accessors are simpler and
align with the list type.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In `@js/app/packages/app/component/next-soup/soup-view/soup-view-tabs.tsx`:
- Around line 225-229: The itemValue and itemLabel accessors contain redundant
typeof checks because items are typed as { value: string; label: string } and
thus always objects; replace the ternary expressions in the itemValue and
itemLabel arrow functions to directly return item.value and item.label
respectively (update the anonymous render callback where itemValue and itemLabel
are declared) and remove the dead else branches so the accessors are simpler and
align with the list type.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: eb2324c1-9b00-45f9-aab2-cd77b3324cbc

📥 Commits

Reviewing files that changed from the base of the PR and between a7aa488 and 5870e87.

📒 Files selected for processing (2)

• js/app/packages/app/component/next-soup/soup-view/soup-view-tabs.tsx
• js/app/packages/app/component/next-soup/soup-view/soup-view.tsx