Files
supabase/packages/dev-tools/utils.ts
Danny White fb4c3ec6d4 feat(studio): add dev toolbar launcher to account settings menu (#49285)
## What kind of change does this PR introduce?

Feature

## What is the current behavior?

The dev toolbar is only discoverable via `window.devToolbar()` in the
browser console, or by having your email on the `devToolbarDefaultOn`
ConfigCat flag. Once enabled, Studio shows a floating trigger button.

## What is the new behavior?

In local and staging Studio, the account/settings dropdown (avatar menu)
includes a **Local tools** section above **Theme** with a **Dev
toolbar** checkbox toggle.

- **On**: shows the floating orb (persists via localStorage, same as
`window.devToolbar()`)
- **Off**: hides the orb and dismisses the toolbar

Open the panel itself via the orb once it is visible. Production builds
are unchanged (`isAvailable` is false and the menu item is hidden).

| After |
| --- |
| <img width="226" height="204" alt="CleanShot 2026-08-20 at 12 46
38@2x"
src="https://github.com/user-attachments/assets/c846b119-626d-48f5-9a02-aef4d006326c"
/> |
| <img width="558" height="1024" alt="CleanShot 2026-08-20 at 12 47
04@2x"
src="https://github.com/user-attachments/assets/4b3dd22b-537b-4874-821d-c202033c4ad7"
/> |

## Manual testing

Run `pnpm dev:studio` and open http://localhost:8082.

1. **Find the entry point:** top-right avatar/settings menu → **Local
tools** → **Dev toolbar** (above **Theme**). Should not appear in
production builds.
2. **Turn it on:** check **Dev toolbar**. A green floating orb should
appear (default bottom-right).
3. **Open the panel:** click the orb. The **Dev Toolbar** sheet should
open with Events and Flags tabs.
4. **Event count:** navigate around Studio (e.g. open a project, switch
pages). The orb badge should increment and stay readable in light and
dark mode.
5. **Turn it off:** reopen the avatar menu and uncheck **Dev toolbar**.
The orb and panel should disappear.
6. **Close vs hide:** with the toolbar on, open the sheet and use
**Close** (X). The orb should remain; only the sheet closes.

Optional: confirm `window.devToolbar()` in the browser console still
enables the orb.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Added a Local tools option to enable the development toolbar when
available.
* Toolbar activation and dismissal preferences now persist between
sessions.
* Added clearer event-count badges with responsive sizing for larger
counts.

* **Improvements**
  * Simplified toolbar controls by removing the separate hide option.
* Improved toolbar availability handling across local and production
environments.

* **Tests**
* Expanded coverage for activation, persistence, visibility, and
event-count badges.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: Danny White <dnywh@users.noreply.github.com>
Co-authored-by: Sean Oliver <882952+seanoliver@users.noreply.github.com>
2026-08-21 10:53:50 +10:00

105 lines
3.2 KiB
TypeScript

export function getCookie(name: string): string | undefined {
if (typeof document === 'undefined') return undefined
const escapedName = name.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&')
const match = document.cookie.match(new RegExp(`(^| )${escapedName}=([^;]+)`))
return match ? decodeURIComponent(match[2]) : undefined
}
export function setCookie(name: string, value: string, path: string = '/') {
if (typeof document === 'undefined') return
document.cookie = `${name}=${encodeURIComponent(value)}; path=${path}`
}
export function deleteCookie(name: string) {
if (typeof document === 'undefined') return
document.cookie = `${name}=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT`
}
export function safeJsonParse<T>(value: string | undefined, fallback: T, context?: string): T {
if (!value) return fallback
try {
return JSON.parse(value) as T
} catch (error) {
if (process.env.NODE_ENV === 'development') {
console.warn(`[DevToolbar] Failed to parse JSON${context ? ` for ${context}` : ''}:`, error)
}
return fallback
}
}
export const PH_ORIGINALS_KEY = 'devToolbarFlagOriginals:posthog'
export const CC_ORIGINALS_KEY = 'devToolbarFlagOriginals:configcat'
export function readOriginals(
key: typeof PH_ORIGINALS_KEY | typeof CC_ORIGINALS_KEY
): Record<string, unknown> {
if (typeof window === 'undefined') return {}
try {
const stored = window.localStorage.getItem(key)
return stored ? JSON.parse(stored) : {}
} catch (error) {
if (process.env.NODE_ENV === 'development') {
console.warn(`[DevToolbar] Failed to read originals from ${key}:`, error)
}
return {}
}
}
export function writeOriginals(
key: typeof PH_ORIGINALS_KEY | typeof CC_ORIGINALS_KEY,
value: Record<string, unknown>
) {
if (typeof window === 'undefined') return
if (Object.keys(value).length === 0) {
window.localStorage.removeItem(key)
return
}
window.localStorage.setItem(key, JSON.stringify(value))
}
export function valuesAreEqual(a: unknown, b: unknown): boolean {
if (a === b) return true
if (a == null || b == null) return false
if (typeof a === 'number' || typeof b === 'number') {
const numA = Number(a)
const numB = Number(b)
if (Number.isNaN(numA) || Number.isNaN(numB)) return false
return numA === numB
}
if (typeof a === 'boolean' || typeof b === 'boolean') {
return a === b
}
return String(a) === String(b)
}
export function parseOverrideValue(value: unknown, original: unknown): unknown {
if (typeof original === 'number') {
const parsed = Number(value)
return Number.isNaN(parsed) ? original : parsed
}
if (typeof original === 'boolean') {
if (typeof value === 'string') {
return value.toLowerCase() === 'true'
}
return Boolean(value)
}
if (typeof original === 'string') {
return String(value)
}
return value
}
export function getEventCountBadge(count: number): { label: string; sizeClass: string } | null {
if (count <= 0) return null
if (count > 99) {
return { label: '99+', sizeClass: 'h-4 min-w-4 px-1' }
}
if (count < 10) {
return { label: String(count), sizeClass: 'size-3.5' }
}
return { label: String(count), sizeClass: 'size-4' }
}