fix(onboarding): source topic list from DB to stop selections being silently dropped (#599)

nicholasjjlim · claude · web-flow · commit 0eb6d4e2e5ba · 2026-06-25T14:48:06.000+08:00
Co-authored-by: Claude Opus 4.8 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/src/lib/components/OnboardingView/OnboardingView.svelte b/src/lib/components/OnboardingView/OnboardingView.svelte
@@ -8,6 +8,17 @@
   import { Modal } from '$lib/components/Modal/index.js';
   import { IsWithinViewport } from '$lib/helpers/index.js';
 
+  export interface Topic {
+    id: string;
+    title: string;
+    description: string;
+    /**
+     * The associated tag code (e.g. `AI`, `BOB`), used to select the topic
+     * icon. Null when the collection has no tag.
+     */
+    code: string | null;
+  }
+
   export interface Props {
     /**
      * Indicates whether the view is open.
@@ -17,9 +28,37 @@
      * A callback invoked when the view is closed.
      */
     onclose: () => void;
+    /**
+     * The selectable topic collections, sourced from the database.
+     */
+    topics: Topic[];
   }
 
-  const { isopen, onclose }: Props = $props();
+  const { isopen, onclose, topics }: Props = $props();
+
+  /**
+   * Tag codes that have a topic icon. Keep in sync with the `enhanced:img`
+   * mapping in the topic-selection markup below; a topic whose code is not
+   * here has no icon and is not shown.
+   */
+  const TOPIC_ICON_CODES = new Set([
+    'AI',
+    'CAREER',
+    'EDU_VOICES',
+    'EMP_ENGAGEMENT',
+    'NEWS',
+    'INFRA',
+    'INNOV',
+    'BOB',
+    'PROD',
+    'STU_DEV',
+    'STU_WELL',
+    'WELLBEING',
+  ]);
+
+  const displayedTopics = $derived(
+    topics.filter((topic) => topic.code !== null && TOPIC_ICON_CODES.has(topic.code)),
+  );
 
   let target = $state<HTMLElement | null>(null);
   let isStartPage = $state(true);
@@ -64,7 +103,7 @@
 
   const handleConfirm = async () => {
     const payload = {
-      topics: selectedTopics,
+      collectionIds: selectedTopics,
       frequency: selectedFrequency,
       csrfToken: page.data.csrfToken,
     };
@@ -127,68 +166,13 @@
     await handleClose();
   };
 
-  const handleTopicChange = (title: string, checked: boolean) => {
+  const handleTopicChange = (id: string, checked: boolean) => {
     if (checked) {
-      selectedTopics = [...selectedTopics, title];
+      selectedTopics = [...selectedTopics, id];
     } else {
-      selectedTopics = selectedTopics.filter((topic) => topic !== title);
+      selectedTopics = selectedTopics.filter((topic) => topic !== id);
     }
   };
-
-  const collectionsList = {
-    'artificial-intelligence': {
-      title: 'Artificial Intelligence',
-      description: 'AI news, use cases and tools to master the changing landscape.',
-    },
-    'career-growth': {
-      title: 'Career Growth',
-      description: 'Tips to help you set career goals and transform potential into performance.',
-    },
-    'educator-voices': {
-      title: 'Educator Voices',
-      description: 'Inspiring stories from fellow educators.',
-    },
-    'employee-engagement': {
-      title: 'Employee Engagement',
-      description:
-        'Analyze EES results and get practical tips to maintain workplace staff engagement.',
-    },
-    'in-the-news': {
-      title: 'In the News',
-      description: 'Education news and survey highlights for ground insights.',
-    },
-    infrastructure: {
-      title: 'Infrastructure',
-      description: 'Learn about device setups, connectivity, and digital tools for efficient work.',
-    },
-    innovation: {
-      title: 'Innovation',
-      description: 'Strategies to empower new ideas, innovation, and creative thinking.',
-    },
-    'learn-with-bob': {
-      title: 'Learn with Bob',
-      description: 'SPACES framework for purposeful work and a sustainable pace.',
-    },
-    productivity: {
-      title: 'Productivity',
-      description:
-        'Master time management and workflows to minimize distractions and reach goals faster.',
-    },
-    'student-development': {
-      title: 'Student Development',
-      description:
-        "Learn ways to develop students' cognitive, affective, physical and aesthetic abilities.",
-    },
-    'student-wellbeing': {
-      title: 'Student Wellbeing',
-      description: 'Learn ways to support students emotional and physical health.',
-    },
-    wellbeing: {
-      title: 'Wellbeing',
-      description:
-        'Identify workplace stress, monitor peer distress, conduct check-ins, and provide support resources.',
-    },
-  };
 </script>
 
 <!-- Modal -->
@@ -277,7 +261,7 @@
 
           <div class="overflow-y-auto pt-6">
             <div class="flex w-full flex-col gap-y-2" role="group" aria-labelledby="topic">
-              {#each Object.entries(collectionsList) as [key, { title, description }] (key)}
+              {#each displayedTopics as { id, title, description, code } (id)}
                 <label
                   class={[
                     'group flex cursor-pointer items-center rounded-3xl border border-slate-200 bg-white',
@@ -291,79 +275,79 @@
                     <input
                       type="checkbox"
                       name="topics"
-                      value={title}
+                      value={id}
                       class="sr-only"
-                      onchange={(e) => handleTopicChange(title, e.currentTarget.checked)}
+                      onchange={(e) => handleTopicChange(id, e.currentTarget.checked)}
                     />
 
                     <div class="flex h-24 w-20 shrink-0 items-center justify-center">
-                      {#if key === 'artificial-intelligence'}
+                      {#if code === 'AI'}
                         <enhanced:img
                           src="$lib/assets/collections/artificial-intelligence.png"
                           alt={title}
                           class="max-h-full max-w-full object-contain"
                         />
-                      {:else if key === 'career-growth'}
+                      {:else if code === 'CAREER'}
                         <enhanced:img
                           src="$lib/assets/collections/career-growth.png"
                           alt={title}
                           class="max-h-full max-w-full object-contain"
                         />
-                      {:else if key === 'educator-voices'}
+                      {:else if code === 'EDU_VOICES'}
                         <enhanced:img
                           src="$lib/assets/collections/educator-voices.png"
                           alt={title}
                           class="max-h-full max-w-full object-contain"
                         />
-                      {:else if key === 'employee-engagement'}
+                      {:else if code === 'EMP_ENGAGEMENT'}
                         <enhanced:img
                           src="$lib/assets/collections/employee-engagement.png"
                           alt={title}
                           class="max-h-full max-w-full object-contain"
                         />
-                      {:else if key === 'in-the-news'}
+                      {:else if code === 'NEWS'}
                         <enhanced:img
                           src="$lib/assets/collections/in-the-news.png"
                           alt={title}
                           class="max-h-full max-w-full object-contain"
                         />
-                      {:else if key === 'infrastructure'}
+                      {:else if code === 'INFRA'}
                         <enhanced:img
                           src="$lib/assets/collections/infrastructure.png"
                           alt={title}
                           class="max-h-full max-w-full object-contain"
                         />
-                      {:else if key === 'innovation'}
+                      {:else if code === 'INNOV'}
                         <enhanced:img
                           src="$lib/assets/collections/innovation.png"
                           alt={title}
                           class="max-h-full max-w-full object-contain"
                         />
-                      {:else if key === 'learn-with-bob'}
+                      {:else if code === 'BOB'}
                         <enhanced:img
                           src="$lib/assets/collections/learn-with-bob.png"
                           alt={title}
                           class="max-h-full max-w-full object-contain"
                         />
-                      {:else if key === 'productivity'}
+                      {:else if code === 'PROD'}
                         <enhanced:img
                           src="$lib/assets/collections/productivity.png"
                           alt={title}
                           class="max-h-full max-w-full object-contain"
                         />
-                      {:else if key === 'student-development'}
+                      {:else if code === 'STU_DEV'}
                         <enhanced:img
                           src="$lib/assets/collections/student-development.png"
                           alt={title}
                           class="max-h-full max-w-full object-contain"
                         />
-                      {:else if key === 'student-wellbeing'}
+                      {:else if code === 'STU_WELL'}
                         <enhanced:img
                           src="$lib/assets/collections/student-wellbeing.png"
                           alt={title}
                           class="max-h-full max-w-full object-contain"
                         />
-                      {:else if key === 'wellbeing'}
+                      {:else if code === 'WELLBEING'}
                         <enhanced:img
                           src="$lib/assets/collections/wellbeing.png"
                           alt={title}
diff --git a/src/routes/(main)/(protected)/+layout.server.ts b/src/routes/(main)/(protected)/+layout.server.ts
@@ -1,6 +1,12 @@
 import { error, redirect } from '@sveltejs/kit';
 
-import { db, type UserFindUniqueArgs, type UserGetPayload } from '$lib/server/db';
+import {
+  type CollectionFindManyArgs,
+  type CollectionGetPayload,
+  db,
+  type UserFindUniqueArgs,
+  type UserGetPayload,
+} from '$lib/server/db';
 
 import type { LayoutServerLoad } from './$types';
 
@@ -35,9 +41,45 @@ export const load: LayoutServerLoad = async (event) => {
 
   const onboarded = userData?.userProfile;
 
+  const topicArgs = {
+    select: {
+      id: true,
+      title: true,
+      description: true,
+      tag: {
+        select: {
+          code: true,
+        },
+      },
+    },
+    where: {
+      isTopic: true,
+    },
+    orderBy: {
+      title: 'asc',
+    },
+  } satisfies CollectionFindManyArgs;
+
+  let topics: CollectionGetPayload<typeof topicArgs>[];
+  try {
+    topics = await db.collection.findMany(topicArgs);
+  } catch (err) {
+    logger.error({ err }, 'Failed to retrieve topic collections');
+    throw error(500);
+  }
+
   return {
     username: user.name,
     csrfToken: event.locals.session.csrfToken(),
     onboarded,
+    // Keyed distinctly from the home page's own `topics` (different shape):
+    // page data overrides layout data on key collision, so a shared `topics`
+    // key would let the home page shadow these and break the onboarding picker.
+    onboardingTopics: topics.map((topic) => ({
+      id: topic.id,
+      title: topic.title,
+      description: topic.description,
+      code: topic.tag?.code ?? null,
+    })),
   };
 };
diff --git a/src/routes/(main)/(protected)/+layout.svelte b/src/routes/(main)/(protected)/+layout.svelte
@@ -329,4 +329,8 @@
 
 <ChatView isopen={isChatViewOpen} onclose={handleChatViewClose} />
 
-<OnboardingView isopen={isOnboardingViewOpen} onclose={handleOnboardingViewClose} />
+<OnboardingView
+  isopen={isOnboardingViewOpen}
+  onclose={handleOnboardingViewClose}
+  topics={page.data.onboardingTopics ?? []}
+/>
diff --git a/src/routes/(main)/api/onboarding/+server.ts b/src/routes/(main)/api/onboarding/+server.ts
@@ -1,6 +1,11 @@
 import { json } from '@sveltejs/kit';
 
-import { db, type UserProfileCreateArgs } from '$lib/server/db';
+import {
+  type CollectionFindManyArgs,
+  type CollectionGetPayload,
+  db,
+  type UserProfileCreateArgs,
+} from '$lib/server/db';
 
 import type { RequestHandler } from './$types';
 
@@ -25,9 +30,10 @@ export const POST: RequestHandler = async (event) => {
     if (
       !params ||
       typeof params !== 'object' ||
-      !('topics' in params) ||
-      !Array.isArray(params['topics']) ||
-      params['topics'].length < 3 ||
+      !('collectionIds' in params) ||
+      !Array.isArray(params['collectionIds']) ||
+      params['collectionIds'].length < 3 ||
+      !params['collectionIds'].every((id: unknown) => typeof id === 'string') ||
       !('frequency' in params) ||
       typeof params['frequency'] !== 'string' ||
       !('csrfToken' in params) ||
@@ -40,24 +46,34 @@ export const POST: RequestHandler = async (event) => {
     return json(null, { status: 400 });
   }
 
-  const { topics, frequency } = params;
+  const { collectionIds, frequency } = params;
+
+  const uniqueCollectionIds = [...new Set<string>(collectionIds)];
 
   try {
-    const collections = await db.collection.findMany({
+    const collectionArgs = {
       select: {
         id: true,
       },
       where: {
-        title: {
-          in: topics,
+        id: {
+          in: uniqueCollectionIds,
         },
         isTopic: true,
       },
-    });
+    } satisfies CollectionFindManyArgs;
+
+    const collections: CollectionGetPayload<typeof collectionArgs>[] =
+      await db.collection.findMany(collectionArgs);
 
-    if (collections.length === 0) {
-      logger.warn({ topics }, 'No valid collections found');
-      return json(null, { status: 400 });
+    if (collections.length !== uniqueCollectionIds.length) {
+      const resolvedIds = new Set(collections.map((collection) => collection.id));
+      const unresolvedIds = uniqueCollectionIds.filter((id) => !resolvedIds.has(id));
+      logger.warn(
+        { userId: user.id, submittedIds: uniqueCollectionIds, unresolvedIds },
+        'One or more collectionIds did not resolve to a topic collection',
+      );
+      return json(null, { status: 422 });
     }
 
     const userProfileArgs = {
diff --git a/src/routes/(main)/api/onboarding/server.test.ts b/src/routes/(main)/api/onboarding/server.test.ts
