Tab Groups (Angular frontend)
Budget: $250 – $750 USD
Task Doc: https://docs.google.com/document/d/13kFcBwbAz5LZ_lpslMzE31BCM1ttLybRH_DjJPXZodA/edit?tab=t.0
Tab Groups Task Doc
Figma/Project Details: https://www.figma.com/design/XzUVhJ7HoZRhpwQ0o1nQ1e/Tab-Indicators-and-Groups-Dashboard?node-id=0-1&t=7U4nCuDfef6eodus-1
Some of these will need backend coordination. Please remember to read the code conventions and follow our policies.
Groups & Colors
Tabs can exist as standalone or inside a visual group container that can be expanded (shows all tabs) or collapsed (shows only a colored chip with count).
New groups get colors in this order: Red, Orange, Yellow, Green, Blue, Indigo, Violet, White, Black, then random; the color tints the group background.
When the last tab leaves a group, the empty group disappears immediately.
Menus & Actions
Group menu (on group container):
Reposition: temporarily allows dragging the whole group horizontally within the tab bar, then exits after drop.
Ungroup: removes the group and converts all tabs inside to standalone tabs in the same relative order, with no group color.
Tab menu (on a single tab):
Reposition: lets the tab be dragged to:
An existing group (joins that group at drop index and adopts its color).
Another standalone tab (forms a new group using the next color).
Empty space (becomes standalone at that position).
While dragging, valid targets show a strong border and dragging near edges scrolls the bar.
Global Grouping Modes
Group By Response:
Creates groups by ring color (White, Red, Green/Teal).
Inside each color group, sort by time remaining (soonest due at left).
New tabs automatically enter the correct color group in the correct position.
Group By Client:
Creates groups per client ID, sorted inside each group by time remaining.
New tabs join or create the correct client group.
Store & Restore
Store:
Saves current groups, tab order (grouped and ungrouped), and active global rule (Response, Client, or Manual/None).
Only one stored configuration exists and is overwritten on the next Store.
After a Store with Response/Client, new tabs keep following that rule and appear at the rightmost position in their group; with Manual/None, new standalone tabs default to the leftmost position.
Restore:
Restores the saved groups and positions exactly.
Tabs created after Store stay, but are placed according to the stored rule (end of relevant group for Response/Client; default leftmost standalone for Manual/None).
If no configuration has ever been stored, show a non-blocking warning and make no changes.
Auto-Sorting, New Tabs, and Constraints
When a tab’s ring color changes under Group By Response (or a stored Response rule), it moves to the correct color group and re-sorts by remaining time; under Group By Client, it stays in its client group but re-sorts there; in Manual/None, it does not auto-move.
Default new-tab behavior when no grouping rule is active: create as a standalone tab at the leftmost position.
System must remain smooth and responsive (drag, animation, and grouping) with at least 50–100 tabs, persist stored layout across sessions, and support keyboard and touch for all menu and reposition actions.
Tab Groups Task Doc
Figma/Project Details: https://www.figma.com/design/XzUVhJ7HoZRhpwQ0o1nQ1e/Tab-Indicators-and-Groups-Dashboard?node-id=0-1&t=7U4nCuDfef6eodus-1
Some of these will need backend coordination. Please remember to read the code conventions and follow our policies.
Groups & Colors
Tabs can exist as standalone or inside a visual group container that can be expanded (shows all tabs) or collapsed (shows only a colored chip with count).
New groups get colors in this order: Red, Orange, Yellow, Green, Blue, Indigo, Violet, White, Black, then random; the color tints the group background.
When the last tab leaves a group, the empty group disappears immediately.
Menus & Actions
Group menu (on group container):
Reposition: temporarily allows dragging the whole group horizontally within the tab bar, then exits after drop.
Ungroup: removes the group and converts all tabs inside to standalone tabs in the same relative order, with no group color.
Tab menu (on a single tab):
Reposition: lets the tab be dragged to:
An existing group (joins that group at drop index and adopts its color).
Another standalone tab (forms a new group using the next color).
Empty space (becomes standalone at that position).
While dragging, valid targets show a strong border and dragging near edges scrolls the bar.
Global Grouping Modes
Group By Response:
Creates groups by ring color (White, Red, Green/Teal).
Inside each color group, sort by time remaining (soonest due at left).
New tabs automatically enter the correct color group in the correct position.
Group By Client:
Creates groups per client ID, sorted inside each group by time remaining.
New tabs join or create the correct client group.
Store & Restore
Store:
Saves current groups, tab order (grouped and ungrouped), and active global rule (Response, Client, or Manual/None).
Only one stored configuration exists and is overwritten on the next Store.
After a Store with Response/Client, new tabs keep following that rule and appear at the rightmost position in their group; with Manual/None, new standalone tabs default to the leftmost position.
Restore:
Restores the saved groups and positions exactly.
Tabs created after Store stay, but are placed according to the stored rule (end of relevant group for Response/Client; default leftmost standalone for Manual/None).
If no configuration has ever been stored, show a non-blocking warning and make no changes.
Auto-Sorting, New Tabs, and Constraints
When a tab’s ring color changes under Group By Response (or a stored Response rule), it moves to the correct color group and re-sorts by remaining time; under Group By Client, it stays in its client group but re-sorts there; in Manual/None, it does not auto-move.
Default new-tab behavior when no grouping rule is active: create as a standalone tab at the leftmost position.
System must remain smooth and responsive (drag, animation, and grouping) with at least 50–100 tabs, persist stored layout across sessions, and support keyboard and touch for all menu and reposition actions.