fix(webapp): review round two - flag caching and invite icon theming

- the root loader reads hasThemeSwitcher through a short process-level TTL
  cache instead of a per-request database query
- the invite envelope icon follows the System-theme grayscale treatment

Author: kathiekiwi

apps/webapp/app/root.tsx

@@ -28,7 +28,7 @@ import {
   normalizeThemePreference,
   type ThemePreference,
 } from "~/utils/themePreference";
-import { flag } from "~/v3/featureFlags.server";
+import { cachedFlag } from "~/v3/featureFlags.server";
 import { getTimezonePreference } from "./services/preferences/uiPreferences.server";
 import { appEnvTitleTag } from "./utils";
 
@@ -80,9 +80,10 @@ 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.
+  // classic theme even if a preference was saved earlier. Cached: the root
+  // loader runs on every document request and client navigation.
   const showThemeSwitcher = user
-    ? await flag({ key: "hasThemeSwitcher", defaultValue: false })
+    ? 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/invites.tsx

@@ -140,7 +140,9 @@ export default function Page() {
         >
           <div>
             <FormTitle
-              LeadingIcon={<EnvelopeIcon className="size-6 text-cyan-500" />}
+              LeadingIcon={
+                <EnvelopeIcon className="size-6 text-cyan-500 system:text-text-bright" />
+              }
               className="mb-0 text-sky-500 system:text-text-bright"
               title={simplur`You have ${invites.length} new invitation[|s]`}
             />

apps/webapp/app/v3/featureFlags.server.ts

@@ -55,6 +55,28 @@ export function makeFlag(_prisma: PrismaClientOrTransaction = prisma) {
   return flag;
 }
 
+const cachedFlagStore = new Map<string, { value: unknown; expiresAt: number }>();
+
+/**
+ * flag() behind a short process-level TTL cache, for global flags read on hot
+ * paths (e.g. the root loader) where a database round-trip per request is too
+ * expensive. Flips propagate within ttlMs per process. Not for org- or
+ * user-scoped decisions.
+ */
+export async function cachedFlag<T extends FeatureFlagKey>(
+  opts: FlagsOptions<T> & { defaultValue: z.infer<(typeof FeatureFlagCatalog)[T]> },
+  ttlMs = 30_000
+): Promise<z.infer<(typeof FeatureFlagCatalog)[T]>> {
+  const hit = cachedFlagStore.get(opts.key);
+  if (hit && hit.expiresAt > Date.now()) {
+    return hit.value as z.infer<(typeof FeatureFlagCatalog)[T]>;
+  }
+
+  const value = await flag(opts);
+  cachedFlagStore.set(opts.key, { value, expiresAt: Date.now() + ttlMs });
+  return value;
+}
+
 export function makeSetFlag(_prisma: PrismaClientOrTransaction = prisma) {
   return async function setFlag<T extends FeatureFlagKey>(
     opts: FlagsOptions<T> & { value: z.infer<(typeof FeatureFlagCatalog)[T]> }