fix(tabs): consolidate isDirty marker and decouple URL sync from Tabs

[talissoncosta]

Thanks for submitting a PR! Please check the boxes below:

• I have read the Contributing Guide.
• I have added information to `docs/` if required so people know about the feature.
• I have filled in the "Changes" section below.
• I have filled in the "How did you test this code" section below.

Changes

Closes #6935. Contributes to #6606 (Design System Audit). Stacked on top of #7386.

This PR consolidates the unsaved-changes badge into Tabs, then takes the rest of the API down to its essentials by moving URL/router concerns out into a hook. `Tabs` is now a pure presentational component (`value` + `onChange`), and consumers compose state in via `useState` or the new `useTabUrlSync` hook.

Closes #6935 — `isDirty` on `TabItem`

The unsaved-changes badge was reimplemented at every call site (`

*

` etc.), and one of those reimplementations caused #6935: the badge overflowed below the active-tab underline and stayed visible on inactive tabs.

• Add `isDirty?: boolean` to `TabItem`. The `TabButton` wraps label + badge in an inline-flex `.btn-tab__label` container so they always stay on the same line and align vertically (port of the wrapper from fix(tabs): alignment issues with 'unsaved changes' badge in Tabs component #7038 — credit @Zaimwa9 for the original investigation).
• Migrate the seven badged sites in `CreateGroup`, `CreateSegment` (×2), `CreateFeature` (×3), and `create-experiment` to `isDirty`, dropping the local ``/`
  `/`unread` JSX in favour of plain string `tabLabel`s.
• New `WithDirtyMarker` story for Chromatic.

Decouple URL/router from Tabs

• New hook `common/hooks/useTabUrlSync.ts`. Reads/writes a URL search param, slugifies labels, falls back to `window.history.replaceState` when called outside a Router (modal portals via `openModal`).
• Migrate 16 function-component consumers from `urlParam` / `uncontrolled` to controlled ``:
  • URL-bound (10): AdminDashboardPage, ImportPage, UsersAndPermissionsPage, ChangeRequestsPage, FeatureHistoryDetailPage, EnvironmentSettingsPage, OrganisationSettingsPage, ProjectSettingsPage, CreateSegment, CreateFeature.
  • `useState` (6): AccountSettingsPage, CreateGroup, CreateSAML, EnvironmentDocumentCodeHelp, DiffSegmentOverrides.
• Convert ComparePage class → function component using the hook.
• Extract `OrganisationUsersTable`'s two `openModal` JSX trees into proper FCs (`EditUserPermissionsModal`, `InspectUserPermissionsModal`) so the Tabs inside can use `useState`.
• `PermissionsTabs` and `InspectPermissions` drop their own pass-through `uncontrolled` prop; `value` and `onChange` are now required, and consumers wire up local state.
• Drop `uncontrolled` from `Tabs` entirely. Tabs is purely controlled now. `urlParam`, `history`, `tabLabelString`, and `isRoles` remain on the type but are marked `@deprecated` with JSDoc pointing at the hook.
• New `WithUrlSync`, `Controlled`, and `HideNavOnSingleTab` stories.

Left for follow-up

• `create-experiment/index.js` is a class component, gated by the `experimental_flags` Flagsmith flag. Stays on the legacy `urlParam` path. To be migrated when that flag promotes or the modal is converted to a function component.
• Once that lands, the `@deprecated` props (`urlParam`, `history`, `tabLabelString`, `isRoles`) can be physically removed from Tabs.

Supersedes #7038

#7038 was the surgical fix for #6935 by @Zaimwa9. Most of its diff is now redundant after this stack (the `` wrappers are gone, badge wrapper lives in TabButton). Plan to close #7038 with a comment pointing here once this lands.

How did you test this code?

Manually verified:

• Badge behaviour: opened Edit Feature modal → toggled values on Value / Segment Overrides / Settings tabs → `*` aligns inline, doesn't overflow underline, doesn't persist on inactive tabs.
• URL sync: navigated each migrated page (Admin Dashboard, Environment Settings, Project Settings, Org Settings, Change Requests, Users & Permissions, Feature History, Import) → tab switching updates the URL param, deep-linking with `?tab=foo` opens the right tab, browser back/forward works.
• Modals: `openModal` flow for `OrganisationUsersTable`'s Edit Permissions / Inspect Permissions still works (Tabs render and switch).
• Stories: ran `npm run storybook` → `Default`, `PillTheme`, `WithDirtyMarker`, `HideNavOnSingleTab`, `WithUrlSync`, and `Controlled` all render correctly.
• Typecheck error count went down by ~13 over baseline (only known new errors are pre-existing tech debt in adjacent files).
• Lint passes on all modified files (lint-staged hook clean).

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
flagsmith-frontend-preview	Ready	Preview, Comment	Apr 30, 2026 9:49pm
flagsmith-frontend-staging	Ready	Preview, Comment	Apr 30, 2026 9:49pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Ignored		Apr 30, 2026 9:49pm