Add functionality to mark as done on right click

components/roadmap/content-drawer.tsx

@@ -11,6 +11,14 @@ type ContentDrawerProps = {
   onClose?: () => void;
 };
 
+export function markTopicDone(groupId: string) {
+  localStorage.setItem(groupId, 'done');
+
+  queryGroupElementsById(groupId).forEach((item) =>
+    item?.classList?.add('done')
+  );
+}
+
 export function ContentDrawer(props: ContentDrawerProps) {
   const { roadmap, groupId, onClose = () => null } = props;
   if (!groupId) {
@@ -52,10 +60,7 @@ export function ContentDrawer(props: ContentDrawerProps) {
             {!isDone && (
               <Button
                 onClick={() => {
-                  localStorage.setItem(groupId, 'done');
+                  markTopicDone(groupId);
-                  queryGroupElementsById(groupId).forEach((item) =>
-                    item?.classList?.add('done')
-                  );
                   onClose();
                 }}
                 colorScheme="green"

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 } from '../../components/roadmap/content-drawer';
+import { ContentDrawer, markTopicDone } from '../../components/roadmap/content-drawer';
 import { RoadmapError } from '../../components/roadmap/roadmap-error';
 import { RoadmapLoader } from '../../components/roadmap/roadmap-loader';
 import { removeSortingInfo } from '../../lib/renderer';
@@ -53,10 +53,14 @@ export function InteractiveRoadmapRenderer(props: RoadmapProps) {
       }
     }
 
+    function getClosestGroupId(target: HTMLElement) {
+      const targetGroup = target?.closest('g');
+      return targetGroup?.dataset?.groupId;
+    }
+
     function clickListener(event: MouseEvent) {
-      const targetGroup = (event?.target as HTMLElement)?.closest('g');
+      const groupId = getClosestGroupId(event.target as HTMLElement);
-      const groupId = targetGroup?.dataset?.groupId;
+      if (!groupId) {
-      if (!targetGroup || !groupId) {
         return;
       }
 
@@ -70,8 +74,19 @@ export function InteractiveRoadmapRenderer(props: RoadmapProps) {
       setGroupId(removeSortingInfo(groupId));
     }
 
+    function rightClickListener(event: MouseEvent) {
+      const groupId = getClosestGroupId(event.target as HTMLElement);
+      if (!groupId) {
+        return;
+      }
+
+      event.preventDefault();
+      markTopicDone(removeSortingInfo(groupId));
+    }
+
     window.addEventListener('keydown', keydownListener);
     window.addEventListener('click', clickListener);
+    window.addEventListener('contextmenu', rightClickListener)
 
     return () => {
       window.removeEventListener('keydown', keydownListener);