feat(webapp): admins always get the theme switcher

The team can dogfood the new themes on production before the
hasThemeSwitcher flag flips for everyone.

Author: kathiekiwi

apps/webapp/app/root.tsx

@@ -80,10 +80,11 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
 
   const user = await getUser(request);
   // Theme switching is feature-flagged; while off, everyone stays on the
-  // classic theme even if a preference was saved earlier. Cached: the root
-  // loader runs on every document request and client navigation.
+  // classic theme even if a preference was saved earlier. Admins always get
+  // the switcher so the team can dogfood before the flag flips. Cached: the
+  // root loader runs on every document request and client navigation.
   const showThemeSwitcher = user
-    ? await cachedFlag({ key: "hasThemeSwitcher", defaultValue: false })
+    ? user.admin || (await cachedFlag({ key: "hasThemeSwitcher", defaultValue: false }))
     : false;
   // Logged-out pages (login, invites) always render the branded Classic look.
   const themePreference: ThemePreference = showThemeSwitcher

apps/webapp/app/routes/account._index/route.tsx

@@ -121,8 +121,9 @@ function createSchema(
 }
 
 export async function loader({ request }: LoaderFunctionArgs) {
-  await requireUserId(request);
-  const showThemeSwitcher = await flag({ key: "hasThemeSwitcher", defaultValue: false });
+  const user = await requireUser(request);
+  const showThemeSwitcher =
+    user.admin || (await flag({ key: "hasThemeSwitcher", defaultValue: false }));
   return json({ showThemeSwitcher });
 }
 
@@ -132,22 +133,24 @@ export const action: ActionFunction = async ({ request }) => {
   const formData = await request.formData();
 
   if (formData.get("action") === "update-theme") {
-    const showThemeSwitcher = await flag({ key: "hasThemeSwitcher", defaultValue: false });
+    const user = await requireUser(request);
+    const showThemeSwitcher =
+      user.admin || (await flag({ key: "hasThemeSwitcher", defaultValue: false }));
     if (!showThemeSwitcher) {
       return json({ error: "Not available" }, { status: 404 });
     }
-    const user = await requireUser(request);
     const theme = normalizeThemePreference(formData.get("theme"));
     await updateThemePreference({ user, theme });
     return json({ success: true });
   }
 
   if (formData.get("action") === "update-contrast") {
-    const showThemeSwitcher = await flag({ key: "hasThemeSwitcher", defaultValue: false });
+    const user = await requireUser(request);
+    const showThemeSwitcher =
+      user.admin || (await flag({ key: "hasThemeSwitcher", defaultValue: false }));
     if (!showThemeSwitcher) {
       return json({ error: "Not available" }, { status: 404 });
     }
-    const user = await requireUser(request);
     const contrast = normalizeThemeContrast(formData.get("contrast"));
     await updateContrastPreference({ user, contrast });
     return json({ success: true });