Add functionality to mark done topic as pending

components/roadmap/content-drawer.tsx

@@ -19,13 +19,25 @@ export function markTopicDone(groupId: string) {
   );
 }
 
+export function markTopicPending(groupId: string) {
+  localStorage.removeItem(groupId);
+
+  queryGroupElementsById(groupId).forEach((item) =>
+    item?.classList?.remove('done')
+  );
+}
+
+export function isTopicDone(groupId: string) {
+  return localStorage.getItem(groupId) === 'done';
+}
+
 export function ContentDrawer(props: ContentDrawerProps) {
   const { roadmap, groupId, onClose = () => null } = props;
   if (!groupId) {
     return null;
   }
 
-  const isDone = localStorage.getItem(groupId) === 'done';
+  const isDone = isTopicDone(groupId);
 
   return (
     <Box zIndex={99999} pos="relative">
@@ -80,10 +92,7 @@ export function ContentDrawer(props: ContentDrawerProps) {
             {isDone && (
               <Button
                 onClick={() => {
-                  localStorage.removeItem(groupId);
+                  markTopicPending(groupId);
-                  queryGroupElementsById(groupId).forEach((item) =>
-                    item?.classList?.remove('done')
-                  );
                   onClose();
                 }}
                 colorScheme="red"

pages/[roadmap]/interactive.tsx

@@ -8,7 +8,7 @@ import { Footer } from '../../components/footer';
 import { getAllRoadmaps, getRoadmapById, RoadmapType } from '../../lib/roadmap';
 import Helmet from '../../components/helmet';
 import { RoadmapPageHeader } from '../../components/roadmap/roadmap-page-header';
-import { ContentDrawer, markTopicDone } from '../../components/roadmap/content-drawer';
+import { ContentDrawer, isTopicDone, markTopicDone, markTopicPending } from '../../components/roadmap/content-drawer';
 import { RoadmapError } from '../../components/roadmap/roadmap-error';
 import { RoadmapLoader } from '../../components/roadmap/roadmap-loader';
 import { removeSortingInfo } from '../../lib/renderer';
@@ -81,7 +81,13 @@ export function InteractiveRoadmapRenderer(props: RoadmapProps) {
       }
 
       event.preventDefault();
-      markTopicDone(removeSortingInfo(groupId));
+      const normalizedGroupId = removeSortingInfo(groupId);
+
+      if (isTopicDone(normalizedGroupId)) {
+        markTopicPending(normalizedGroupId);
+      } else {
+        markTopicDone(normalizedGroupId);
+      }
     }
 
     window.addEventListener('keydown', keydownListener);