2835d08418
- Replace EnvironmentSelector "All Envs" dropdown with Button+Modal (DS Modal, forced on first-use). - Add 8-swatch preset color picker in the Environment settings "Appearance" section; commits via useUpdateEnvironment. - Render a 3px fixed top bar in the current env's color across every page (z-index 900, below DS modals). - New env-colors tokens (--env-color-*, light + dark) and envColorVar() helper with slate fallback. - Vitest coverage for button, modal, and color helpers (13 new specs). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
31 lines
1021 B
TypeScript
31 lines
1021 B
TypeScript
import { ChevronDown } from 'lucide-react';
|
|
import type { Environment } from '../api/queries/admin/environments';
|
|
import { envColorVar } from './env-colors';
|
|
import styles from './EnvironmentSwitcherButton.module.css';
|
|
|
|
interface EnvironmentSwitcherButtonProps {
|
|
envs: Environment[];
|
|
value: string | undefined;
|
|
onClick: () => void;
|
|
}
|
|
|
|
export function EnvironmentSwitcherButton({ envs, value, onClick }: EnvironmentSwitcherButtonProps) {
|
|
const current = envs.find((e) => e.slug === value);
|
|
const displayName = current?.displayName ?? value ?? 'Select environment';
|
|
const color = envColorVar(current?.color);
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
className={styles.button}
|
|
onClick={onClick}
|
|
aria-label="Switch environment"
|
|
aria-haspopup="dialog"
|
|
>
|
|
<span className={styles.dot} style={{ background: color }} aria-hidden />
|
|
<span className={styles.name}>{displayName}</span>
|
|
<ChevronDown size={14} className={styles.chevron} aria-hidden />
|
|
</button>
|
|
);
|
|
}
|