feat: Add toggle functionality to admin flags dashboard

[taearls]

feat: Add toggle functionality to admin flags dashboard

Summary

Add the ability to toggle feature flags on/off directly from the admin dashboard (/admin/flags). This builds on the read-only dashboard implemented in #143.

Motivation

Currently, toggling feature flags requires either:

• Updating the Cloudflare KV store via CLI (wrangler kv)
• Accessing the Cloudflare dashboard directly

A toggle UI in the admin dashboard would enable:

• Quick flag changes during development/testing
• Faster iteration when debugging feature flag behavior
• Self-service flag management without CLI access

Proposed Implementation

1. Worker API Endpoint

Add a PUT /api/flags/:flagKey endpoint to the feature flags Worker:

// packages/feature-flags/src/index.ts
async function handlePutFlag(request: Request, env: Env, flagKey: string): Promise<Response> {
  // Validate auth
  const authHeader = request.headers.get('Authorization');
  if (!isValidAuth(authHeader, env)) {
    return new Response('Unauthorized', { status: 401 });
  }

  // Update flag in KV
  const body = await request.json();
  const currentFlags = await env.FEATURE_FLAGS.get('flags', 'json');
  const updatedFlags = { ...currentFlags, [flagKey]: body };
  await env.FEATURE_FLAGS.put('flags', JSON.stringify(updatedFlags));

  return new Response(JSON.stringify(updatedFlags), { status: 200 });
}

2. Authentication

Options (choose one):

• Simple API key: Store in Worker env, pass via header
• Development-only: Only allow mutations when import.meta.env.DEV (since dashboard is dev-only anyway)
• Future: Integrate with proper auth system

Recommended: Since the admin dashboard is already dev-only (tree-shaken from production), we could allow unauthenticated mutations in development mode only.

3. Toggle UI Component

Add a toggle switch to the FlagStatusBadge or create a new FlagToggle component:

// src/components/FlagToggle/FlagToggle.tsx
export function FlagToggle({ flagKey, enabled, onToggle }: FlagToggleProps) {
  const [isPending, setIsPending] = useState(false);
  
  const handleToggle = async () => {
    setIsPending(true);
    await onToggle(flagKey, !enabled);
    setIsPending(false);
  };

  return (
    <button 
      onClick={handleToggle}
      disabled={isPending}
      aria-pressed={enabled}
    >
      {enabled ? 'Enabled' : 'Disabled'}
    </button>
  );
}

4. Update AdminFlagsPage

• Add toggleFlag function that calls the Worker API
• Replace static badge with toggle component
• Add optimistic UI updates with error rollback
• Show success/error toast notifications

Acceptance Criteria

• Worker has PUT endpoint for updating individual flags
• Endpoint is protected (at minimum, dev-only)
• Toggle switch replaces static badge in admin dashboard
• Optimistic UI update with rollback on error
• Loading state shown during toggle
• Success/error feedback to user
• Flag changes persist in KV storage
• Unit tests for toggle component
• Integration tests for toggle flow

Security Considerations

• Since admin dashboard is already dev-only (feat: Add feature flags admin dashboard page #143), toggle mutations should also be dev-only
• Consider adding rate limiting to prevent abuse
• Log flag changes for audit trail (future enhancement)

Out of Scope

• Flag creation/deletion (manage via CLI)
• Bulk toggle operations
• Flag scheduling (enable at specific time)
• Environment-specific toggles from UI

Related

• feat: Add feature flags admin dashboard page #143 - feat: Add feature flags admin dashboard page (completed)
• Implement Feature Flag Infrastructure with Cloudflare Workers + KV #72 - Implement Feature Flag Infrastructure with Cloudflare Workers + KV (completed)