Roadmap personalization

.astro/settings.json

@@ -3,6 +3,6 @@
 		"enabled": false
 	},
 	"_variables": {
-		"lastUpdateCheck": 1750679157111
+		"lastUpdateCheck": 1753810743067
 	}
 }

src/components/PersonalizedRoadmap/PersonalizedRoadmap.tsx

@@ -1,11 +1,12 @@
 import { Loader2Icon, PersonStandingIcon } from 'lucide-react';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { usePersonalizedRoadmap } from '../../hooks/use-personalized-roadmap';
 import {
   refreshProgressCounters,
   renderTopicProgress,
 } from '../../lib/resource-progress';
 import { PersonalizedRoadmapModal } from './PersonalizedRoadmapModal';
+import { PersonalizedRoadmapSwitcher } from './PersonalizedRoadmapSwitcher';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { httpPost } from '../../lib/query-http';
 import { useToast } from '../../hooks/use-toast';
@@ -14,13 +15,6 @@ import { userResourceProgressOptions } from '../../queries/resource-progress';
 import { useAuth } from '../../hooks/use-auth';
 import { roadmapJSONOptions } from '../../queries/roadmap';
 
-type BulkUpdateResourceProgressBody = {
-  done: string[];
-  learning: string[];
-  skipped: string[];
-  pending: string[];
-};
-
 type PersonalizedRoadmapProps = {
   roadmapId: string;
 };
@@ -31,6 +25,7 @@ export function PersonalizedRoadmap(props: PersonalizedRoadmapProps) {
   const toast = useToast();
   const currentUser = useAuth();
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isPersonalized, setIsPersonalized] = useState(false);
 
   const { data: roadmap } = useQuery(
     roadmapJSONOptions(roadmapId),
@@ -42,6 +37,12 @@ export function PersonalizedRoadmap(props: PersonalizedRoadmapProps) {
     queryClient,
   );
 
+  useEffect(() => {
+    if (userProgress?.personalized) {
+      setIsPersonalized(true);
+    }
+  }, [userProgress]);
+
   const alreadyInProgressNodeIds = useMemo(() => {
     return new Set([
       ...(userProgress?.learning ?? []),
@@ -68,28 +69,33 @@ export function PersonalizedRoadmap(props: PersonalizedRoadmapProps) {
     localStorage.removeItem(`roadmap-${roadmapId}-${currentUser?.id}-favorite`);
   }, [roadmapId, currentUser]);
 
-  const {
+  const { mutate: savePersonalization, isPending: isSavingPersonalization } =
-    mutate: bulkUpdateResourceProgress,
+    useMutation(
-    isPending: isBulkUpdating,
+      {
-    mutateAsync: bulkUpdateResourceProgressAsync,
+        mutationFn: (data: { topicIds: string[]; information: string }) => {
-  } = useMutation(
+          const remainingTopicIds = allPendingNodeIds.filter(
-    {
+            (nodeId) => !data.topicIds.includes(nodeId),
-      mutationFn: (body: BulkUpdateResourceProgressBody) => {
+          );
-        return httpPost(`/v1-bulk-update-resource-progress/${roadmapId}`, body);
+
+          return httpPost(`/v1-save-personalization/${roadmapId}`, {
+            personalized: {
+              ...data,
+              topicIds: remainingTopicIds,
+            },
+          });
+        },
+        onError: (error) => {
+          toast.error(error?.message ?? 'Failed to save personalization');
+        },
+        onSuccess: () => {
+          clearResourceProgressLocalStorage();
+          refetchUserProgress();
+          refreshProgressCounters();
+          toast.success('Personalization saved successfully');
+        },
       },
-      onError: (error) => {
+      queryClient,
-        toast.error(
+    );
-          error?.message ?? 'Something went wrong, please try again.',
-        );
-      },
-      onSuccess: () => {
-        clearResourceProgressLocalStorage();
-        refetchUserProgress();
-        refreshProgressCounters();
-      },
-    },
-    queryClient,
-  );
 
   const { generatePersonalizedRoadmap, status } = usePersonalizedRoadmap({
     roadmapId,
@@ -107,55 +113,67 @@ export function PersonalizedRoadmap(props: PersonalizedRoadmapProps) {
       });
     },
     onFinish: (data) => {
-      const { topicIds } = data;
+      const { topicIds, information } = data;
-      const remainingTopicIds = allPendingNodeIds.filter(
+      savePersonalization({ topicIds, information });
-        (nodeId) => !topicIds.includes(nodeId),
-      );
-
-      bulkUpdateResourceProgress({
-        skipped: remainingTopicIds,
-        learning: [],
-        done: [],
-        pending: [],
-      });
     },
   });
 
-  const { mutate: clearResourceProgress, isPending: isClearing } = useMutation(
+  const { mutate: clearPersonalization, isPending: isClearing } = useMutation(
     {
-      mutationFn: (pendingTopicIds: string[]) => {
+      mutationFn: () => {
-        return bulkUpdateResourceProgressAsync({
+        return httpPost(`/v1-clear-roadmap-personalization/${roadmapId}`, {});
-          skipped: [],
-          learning: [],
-          done: [],
-          pending: pendingTopicIds,
-        });
       },
       onError: (error) => {
-        toast.error(
+        toast.error(error?.message ?? 'Failed to clear personalization');
-          error?.message ?? 'Something went wrong, please try again.',
-        );
       },
-      onSuccess: (_, pendingTopicIds) => {
+      onSuccess: () => {
-        for (const topicId of pendingTopicIds) {
+        // Reset all topics to pending state
+        allPendingNodeIds.forEach((topicId) => {
           renderTopicProgress(topicId, 'pending');
-        }
+        });
 
-        toast.success('Progress cleared successfully.');
+        setIsPersonalized(false);
-        clearResourceProgressLocalStorage();
+        toast.success('Personalization cleared successfully.');
-        refreshProgressCounters();
         refetchUserProgress();
       },
     },
     queryClient,
   );
 
-  const isGenerating = status !== 'idle' || isBulkUpdating || isClearing;
+  const isGenerating =
+    status !== 'idle' || isClearing || isSavingPersonalization;
+
+  const handleTogglePersonalization = (showPersonalized: boolean) => {
+    setIsPersonalized(showPersonalized);
+
+    if (!showPersonalized) {
+      const allTopicIds = allPendingNodeIds;
+      allTopicIds.forEach((topicId) => {
+        renderTopicProgress(topicId, 'pending');
+      });
+    } else if (userProgress?.personalized) {
+      const { topicIds } = userProgress.personalized;
+      const remainingTopicIds = allPendingNodeIds.filter(
+        (nodeId) => !topicIds.includes(nodeId),
+      );
+
+      remainingTopicIds.forEach((topicId) => {
+        renderTopicProgress(topicId, 'skipped');
+      });
+
+      topicIds.forEach((topicId) => {
+        if (!alreadyInProgressNodeIds.has(topicId)) {
+          renderTopicProgress(topicId, 'pending');
+        }
+      });
+    }
+  };
 
   return (
     <>
       {isModalOpen && (
         <PersonalizedRoadmapModal
+          info={userProgress?.personalized?.information ?? ''}
           onClose={() => setIsModalOpen(false)}
           onSubmit={(information) => {
             for (const nodeId of allPendingNodeIds) {
@@ -166,29 +184,41 @@ export function PersonalizedRoadmap(props: PersonalizedRoadmapProps) {
           }}
           onClearProgress={() => {
             setIsModalOpen(false);
-            const prevSkipped = userProgress?.skipped ?? [];
+            clearPersonalization();
-            clearResourceProgress(prevSkipped);
           }}
         />
       )}
 
-      <button
+      {userProgress?.personalized?.information ? (
-        className="group inline-flex items-center gap-1.5 border-b-2 border-b-transparent px-2 pb-2.5 text-sm font-normal text-gray-400 transition-colors hover:text-gray-700"
+        <PersonalizedRoadmapSwitcher
-        onClick={() => setIsModalOpen(true)}
+          isPersonalized={isPersonalized}
-        disabled={isGenerating}
+          onToggle={handleTogglePersonalization}
-      >
+          onEdit={() => setIsModalOpen(true)}
-        {isGenerating ? (
+          onRemove={() => {
-          <>
+            if (confirm('Are you sure you want to remove personalization?')) {
-            <Loader2Icon className="h-4 w-4 shrink-0 animate-spin" />
+              clearPersonalization();
-            <span>Personalizing...</span>
+            }
-          </>
+          }}
-        ) : (
+        />
-          <>
+      ) : (
-            <PersonStandingIcon className="h-4 w-4 shrink-0" />
+        <button
-            <span>Personalize</span>
+          className="group inline-flex items-center gap-1.5 border-b-2 border-b-transparent px-2 pb-2.5 text-sm font-normal text-gray-400 transition-colors hover:text-gray-700"
-          </>
+          onClick={() => setIsModalOpen(true)}
-        )}
+          disabled={isGenerating}
-      </button>
+        >
+          {isGenerating ? (
+            <>
+              <Loader2Icon className="h-4 w-4 shrink-0 animate-spin" />
+              <span>Personalizing...</span>
+            </>
+          ) : (
+            <>
+              <PersonStandingIcon className="h-4 w-4 shrink-0" />
+              <span>Personalize</span>
+            </>
+          )}
+        </button>
+      )}
     </>
   );
 }

src/components/PersonalizedRoadmap/PersonalizedRoadmapForm.tsx

@@ -1,58 +0,0 @@
-import { PersonStandingIcon, XIcon } from 'lucide-react';
-import { useId, useState, type FormEvent } from 'react';
-
-type PersonalizedRoadmapFormProps = {
-  info?: string;
-  onSubmit: (info: string) => void;
-  onClearProgress: () => void;
-};
-
-export function PersonalizedRoadmapForm(props: PersonalizedRoadmapFormProps) {
-  const { info: defaultInfo, onSubmit, onClearProgress } = props;
-
-  const [info, setInfo] = useState(defaultInfo || '');
-  const infoFieldId = useId();
-
-  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    onSubmit(info);
-  };
-
-  return (
-    <form onSubmit={handleSubmit} className="p-4">
-      <h2 className="text-lg font-semibold">Personalize Roadmap</h2>
-      <div className="mt-0.5 flex flex-col gap-2">
-        <label htmlFor={infoFieldId} className="text-balance text-gray-600">
-          Tell us about yourself to personlize this roadmap as per your goals
-          and experience
-        </label>
-        <textarea
-          id={infoFieldId}
-          className="h-[150px] w-full resize-none rounded-xl border border-gray-200 p-3 focus:border-gray-500 focus:outline-none"
-          placeholder="I already know about HTML, CSS, and JavaScript..."
-          value={info}
-          onChange={(e) => setInfo(e.target.value)}
-          autoFocus
-        />
-      </div>
-
-      <div className="mt-2 grid grid-cols-2 gap-2">
-        <button
-          type="button"
-          className="flex items-center justify-center gap-2 rounded-xl border border-gray-200 p-2 px-2 text-gray-600 hover:bg-gray-100 focus:outline-none"
-          onClick={onClearProgress}
-        >
-          <XIcon className="h-4 w-4" />
-          Clear Personalized
-        </button>
-        <button
-          type="submit"
-          className="flex items-center justify-center gap-2 rounded-xl bg-black p-2 px-2 text-white hover:opacity-90 focus:outline-none"
-        >
-          <PersonStandingIcon className="h-4 w-4" />
-          Personalize
-        </button>
-      </div>
-    </form>
-  );
-}

src/components/PersonalizedRoadmap/PersonalizedRoadmapModal.tsx

@@ -1,23 +1,62 @@
-import { usePersonalizedRoadmap } from '../../hooks/use-personalized-roadmap';
+import { PersonStandingIcon, XIcon } from 'lucide-react';
-import { renderTopicProgress } from '../../lib/resource-progress';
+import { useId, useState, type FormEvent } from 'react';
 import { Modal } from '../Modal';
-import { PersonalizedRoadmapForm } from './PersonalizedRoadmapForm';
 
 type PersonalizedRoadmapModalProps = {
   onClose: () => void;
+  info: string;
   onSubmit: (information: string) => void;
   onClearProgress: () => void;
 };
 
 export function PersonalizedRoadmapModal(props: PersonalizedRoadmapModalProps) {
-  const { onClose, onSubmit, onClearProgress } = props;
+  const { onClose, info: infoProp, onSubmit: onSubmitProp, onClearProgress } = props;
+
+  const [info, setInfo] = useState(infoProp);
+  const infoFieldId = useId();
+
+  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    onSubmitProp(info);
+  };
 
   return (
     <Modal onClose={onClose} bodyClassName="rounded-2xl">
-      <PersonalizedRoadmapForm
+      <form onSubmit={handleSubmit} className="p-4">
-        onSubmit={onSubmit}
+        <h2 className="text-lg font-semibold">Personalize Roadmap</h2>
-        onClearProgress={onClearProgress}
+        <div className="mt-0.5 flex flex-col gap-2">
-      />
+          <label htmlFor={infoFieldId} className="text-balance text-gray-600">
+            Tell us about yourself to personlize this roadmap as per your goals
+            and experience
+          </label>
+          <textarea
+            id={infoFieldId}
+            className="h-[150px] w-full resize-none rounded-xl border border-gray-200 p-3 focus:border-gray-500 focus:outline-none"
+            placeholder="I already know about HTML, CSS, and JavaScript..."
+            value={info}
+            onChange={(e) => setInfo(e.target.value)}
+            autoFocus
+          />
+        </div>
+
+        <div className="mt-2 grid grid-cols-2 gap-2">
+          <button
+            type="button"
+            className="flex items-center justify-center gap-2 rounded-xl border border-gray-200 p-2 px-2 text-gray-600 hover:bg-gray-100 focus:outline-none"
+            onClick={onClearProgress}
+          >
+            <XIcon className="h-4 w-4" />
+            Clear Personalized
+          </button>
+          <button
+            type="submit"
+            className="flex items-center justify-center gap-2 rounded-xl bg-black p-2 px-2 text-white hover:opacity-90 focus:outline-none"
+          >
+            <PersonStandingIcon className="h-4 w-4" />
+            Personalize
+          </button>
+        </div>
+      </form>
     </Modal>
   );
 }

src/components/PersonalizedRoadmap/PersonalizedRoadmapSwitcher.tsx

@@ -0,0 +1,99 @@
+import { PencilIcon, XIcon, MoreVertical } from 'lucide-react';
+import { cn } from '../../lib/classname';
+import { useState, useRef, useEffect } from 'react';
+
+type PersonalizedRoadmapSwitcherProps = {
+  isPersonalized: boolean;
+  onToggle: (isPersonalized: boolean) => void;
+  onEdit: () => void;
+  onRemove: () => void;
+  className?: string;
+};
+
+export function PersonalizedRoadmapSwitcher(
+  props: PersonalizedRoadmapSwitcherProps,
+) {
+  const { isPersonalized, onToggle, onEdit, onRemove, className } = props;
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsDropdownOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <div className={cn('mb-2 flex items-center gap-2', className)}>
+      <div className="relative flex items-center">
+        <div className="relative" ref={dropdownRef}>
+          <button
+            onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+            className="mr-0.5 p-1 text-gray-400 hover:text-gray-600"
+            title="More options"
+          >
+            <MoreVertical className="h-3.5 w-3.5" />
+          </button>
+          {isDropdownOpen && (
+            <div className="absolute top-full left-0 z-20 mt-1 rounded-md border border-gray-200 bg-white shadow-lg">
+              <button
+                onClick={() => {
+                  onEdit();
+                  setIsDropdownOpen(false);
+                }}
+                className="flex w-full items-center gap-2 px-3 py-2 text-sm text-gray-700 hover:bg-gray-100"
+              >
+                <PencilIcon className="h-3.5 w-3.5" />
+                Edit
+              </button>
+              <button
+                onClick={() => {
+                  onRemove();
+                  setIsDropdownOpen(false);
+                }}
+                className="flex w-full items-center gap-2 px-3 py-2 text-sm text-red-600 hover:bg-red-50"
+              >
+                <XIcon className="h-3.5 w-3.5" />
+                Delete
+              </button>
+            </div>
+          )}
+        </div>
+        <div className="flex">
+          <button
+            className={cn(
+              'rounded-full px-2.5 py-1 text-xs font-medium transition-all',
+              isPersonalized
+                ? 'bg-gray-900 text-white'
+                : 'text-gray-500 hover:text-gray-700',
+            )}
+            onClick={() => onToggle(true)}
+          >
+            Personalized
+          </button>
+          <button
+            className={cn(
+              'rounded-full px-2.5 py-1 text-xs font-medium transition-all',
+              !isPersonalized
+                ? 'bg-gray-900 text-white'
+                : 'text-gray-500 hover:text-gray-700',
+            )}
+            onClick={() => onToggle(false)}
+          >
+            Original
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/hooks/use-personalized-roadmap.ts

@@ -5,6 +5,7 @@ import { flushSync } from 'react-dom';
 
 type PersonalizedRoadmapResponse = {
   topicIds: string[];
+  information: string;
 };
 
 type UsePersonalizedRoadmapOptions = {
@@ -26,8 +27,11 @@ export function usePersonalizedRoadmap(options: UsePersonalizedRoadmapOptions) {
     'idle' | 'streaming' | 'loading' | 'ready' | 'error'
   >('idle');
 
+  const informationRef = useRef<string>('');
+
   const generatePersonalizedRoadmap = async (information: string) => {
     try {
+      informationRef.current = information;
       onStart?.();
       setStatus('loading');
       abortControllerRef.current?.abort();
@@ -70,7 +74,11 @@ export function usePersonalizedRoadmap(options: UsePersonalizedRoadmapOptions) {
         onMessage: async (content) => {
           flushSync(() => {
             setStatus('streaming');
-            contentRef.current = parsePersonalizedRoadmapResponse(content);
+            const parsed = parsePersonalizedRoadmapResponse(content);
+            contentRef.current = {
+              ...parsed,
+              information: informationRef.current
+            };
             onData?.(contentRef.current);
           });
         },
@@ -120,7 +128,7 @@ export function usePersonalizedRoadmap(options: UsePersonalizedRoadmapOptions) {
 
 export function parsePersonalizedRoadmapResponse(
   response: string,
-): PersonalizedRoadmapResponse {
+): Omit<PersonalizedRoadmapResponse, 'information'> {
   const topicIds: Set<string> = new Set();
   const lines = response.split('\n');
   for (const line of lines) {

src/lib/resource-progress.ts

@@ -2,10 +2,10 @@ import Cookies from 'js-cookie';
 import { httpGet, httpPost } from './http';
 import { TOKEN_COOKIE_NAME, getUser } from './jwt';
 import { roadmapProgress, totalRoadmapNodes } from '../stores/roadmap.ts';
-// @ts-ignore
-import Element = astroHTML.JSX.Element;
 import { queryClient } from '../stores/query-client.ts';
 import { userResourceProgressOptions } from '../queries/resource-progress.ts';
+// @ts-ignore
+import Element = astroHTML.JSX.Element;
 
 export type ResourceType = 'roadmap' | 'best-practice';
 export type ResourceProgressType =
@@ -61,6 +61,7 @@ export async function updateResourceProgress(
     learning: string[];
     skipped: string[];
     isFavorite: boolean;
+    personalized: { topicIds: string[]; information: string };
   }>(`${import.meta.env.PUBLIC_API_URL}/v1-update-resource-progress`, {
     topicId,
     resourceType,
@@ -72,13 +73,12 @@ export async function updateResourceProgress(
     throw new Error(error?.message || 'Something went wrong');
   }
 
-  setResourceProgress(
+  roadmapProgress.set({
-    resourceType,
+    done: response.done,
-    resourceId,
+    learning: response.learning,
-    response.done,
+    skipped: response.skipped,
-    response.learning,
+    personalized: response.personalized,
-    response.skipped,
+  });
-  );
 
   queryClient.setQueryData(
     userResourceProgressOptions(resourceType, resourceId).queryKey,
@@ -174,65 +174,31 @@ export function clearMigratedRoadmapProgress(
 export async function getResourceProgress(
   resourceType: 'roadmap' | 'best-practice',
   resourceId: string,
-): Promise<{ done: string[]; learning: string[]; skipped: string[] }> {
+): Promise<{
+  done: string[];
+  learning: string[];
+  skipped: string[];
+  personalized: { topicIds: string[]; information: string };
+}> {
   // No need to load progress if user is not logged in
   if (!Cookies.get(TOKEN_COOKIE_NAME)) {
     return {
       done: [],
       learning: [],
       skipped: [],
+      personalized: {
+        topicIds: [],
+        information: '',
+      },
     };
   }
 
-  const userId = getUser()?.id;
-  const progressKey = `${resourceType}-${resourceId}-${userId}-progress`;
-  const isFavoriteKey = `${resourceType}-${resourceId}-favorite`;
-
-  const rawIsFavorite = localStorage.getItem(isFavoriteKey);
-  const isFavorite = JSON.parse(rawIsFavorite || '0') === 1;
-
-  const rawProgress = localStorage.getItem(progressKey);
-  const progress = JSON.parse(rawProgress || 'null');
-
-  const progressTimestamp = progress?.timestamp;
-  const diff = new Date().getTime() - parseInt(progressTimestamp || '0', 10);
-  const isProgressExpired = diff > 15 * 60 * 1000; // 15 minutes
-
-  if (!progress || isProgressExpired) {
-    return loadFreshProgress(resourceType, resourceId);
-  } else {
-    setResourceProgress(
-      resourceType,
-      resourceId,
-      progress?.done || [],
-      progress?.learning || [],
-      progress?.skipped || [],
-    );
-  }
-
-  // Dispatch event to update favorite status in the MarkFavorite component
-  window.dispatchEvent(
-    new CustomEvent('mark-favorite', {
-      detail: {
-        resourceType,
-        resourceId,
-        isFavorite,
-      },
-    }),
-  );
-
-  return progress;
-}
-
-export async function loadFreshProgress(
-  resourceType: ResourceType,
-  resourceId: string,
-) {
   const { response, error } = await httpGet<{
     done: string[];
     learning: string[];
     skipped: string[];
     isFavorite: boolean;
+    personalized: { topicIds: string[]; information: string };
   }>(`${import.meta.env.PUBLIC_API_URL}/v1-get-user-resource-progress`, {
     resourceType,
     resourceId,
@@ -244,16 +210,19 @@ export async function loadFreshProgress(
       done: [],
       learning: [],
       skipped: [],
+      personalized: {
+        topicIds: [],
+        information: '',
+      },
     };
   }
 
-  setResourceProgress(
+  roadmapProgress.set({
-    resourceType,
+    done: response.done,
-    resourceId,
+    learning: response.learning,
-    response?.done || [],
+    skipped: response.skipped,
-    response?.learning || [],
+    personalized: response.personalized,
-    response?.skipped || [],
+  });
-  );
 
   // Dispatch event to update favorite status in the MarkFavorite component
   window.dispatchEvent(
@@ -269,31 +238,6 @@ export async function loadFreshProgress(
   return response;
 }
 
-export function setResourceProgress(
-  resourceType: 'roadmap' | 'best-practice',
-  resourceId: string,
-  done: string[],
-  learning: string[],
-  skipped: string[],
-): void {
-  roadmapProgress.set({
-    done,
-    learning,
-    skipped,
-  });
-
-  const userId = getUser()?.id;
-  localStorage.setItem(
-    `${resourceType}-${resourceId}-${userId}-progress`,
-    JSON.stringify({
-      done,
-      learning,
-      skipped,
-      timestamp: new Date().getTime(),
-    }),
-  );
-}
-
 export function topicSelectorAll(
   topicId: string,
   parentElement: Document | SVGElement | HTMLDivElement = document,
@@ -381,6 +325,10 @@ export async function renderResourceProgress(
     done = [],
     learning = [],
     skipped = [],
+    personalized = {
+      topicIds: [],
+      information: '',
+    },
   } = (await getResourceProgress(resourceType, resourceId)) || {};
 
   done.forEach((topicId) => {
@@ -395,6 +343,10 @@ export async function renderResourceProgress(
     renderTopicProgress(topicId, 'skipped');
   });
 
+  personalized.topicIds.forEach((topicId: string) => {
+    renderTopicProgress(topicId, 'skipped');
+  });
+
   refreshProgressCounters();
 }
 

src/pages/[roadmapId]/index.astro

@@ -99,7 +99,6 @@ const courses = roadmapData.courses || [];
   />
 
   <TopicDetail
-    resourceTitle={roadmapData.title}
     resourceId={roadmapId}
     resourceType='roadmap'
     renderer={roadmapData.renderer}
@@ -139,7 +138,7 @@ const courses = roadmapData.courses || [];
       </div>
     </div>
 
-    <div class='container relative max-w-[1000px]!'>
+    <div class='relative container max-w-[1000px]!'>
       <ShareIcons
         resourceId={roadmapId}
         resourceType='roadmap'

src/queries/resource-progress.ts

@@ -8,6 +8,10 @@ export type GetUserResourceProgressResponse = {
   learning: string[];
   skipped: string[];
   isFavorite: boolean;
+  personalized?: {
+    topicIds: string[];
+    information: string;
+  };
 };
 
 export function userResourceProgressOptions(

src/stores/roadmap.ts

@@ -12,7 +12,12 @@ export const canManageCurrentRoadmap = computed(
 );
 
 export const roadmapProgress = atom<
-  { done: string[]; learning: string[]; skipped: string[] } | undefined
+  | {
+      done: string[];
+      learning: string[];
+      skipped: string[];
+      personalized: { topicIds: string[]; information: string };
+    }
+  | undefined
 >();
 export const totalRoadmapNodes = atom<number | undefined>();
-