theme tooltip

src/features/settings/hooks/use-theme-discovery.ts

@@ -0,0 +1,18 @@
+import { useCallback } from "react";
+import { useAuth } from "@/contexts/auth-context";
+import { updateUserSeenThemesHint } from "@/features/settings/server";
+
+/** Drives the one-time "new themes" tooltip on the profile settings gear.
+ *  markSeen persists the flag, so each account sees the hint only once. */
+export const useThemeDiscovery = () => {
+  const { metadata, user, set } = useAuth();
+  const showHint = !!user && !metadata.seenThemesHint;
+
+  const markSeen = useCallback(() => {
+    if (!user || metadata.seenThemesHint) return;
+    set({ metadata: { ...metadata, seenThemesHint: true } });
+    void updateUserSeenThemesHint();
+  }, [user, metadata, set]);
+
+  return { showHint, markSeen };
+};

src/features/settings/server.ts

@@ -95,6 +95,28 @@ export const updateUserTheme = createServerFn({ method: "POST" })
     };
   });
 
+export const updateUserSeenThemesHint = createServerFn({ method: "POST" })
+  .middleware([superTokensFunctionMiddleware, serverFnLoggingMiddleware])
+  .handler(async ({ context }) => {
+    const { userAuthId, metadata } = context;
+    if (!userAuthId) return;
+
+    const { updateUserMetadataFields } = await import(
+      "@/utils/supertokens-core.server"
+    );
+
+    await updateUserMetadataFields(userAuthId, {
+      seenThemesHint: true,
+    });
+
+    return {
+      metadata: {
+        ...metadata,
+        seenThemesHint: true,
+      },
+    };
+  });
+
 export const updateUserAccentColor = createServerFn({ method: "POST" })
   .validator((data: string) => data)
   .middleware([superTokensFunctionMiddleware, serverFnLoggingMiddleware])