Add progress nudge on roadmap

src/components/CustomRoadmap/FlowRoadmapRenderer.tsx

@@ -13,6 +13,7 @@ import type { Node } from 'reactflow';
 import { useCallback, type MouseEvent, useMemo, useState, useRef } from 'react';
 import { EmptyRoadmap } from './EmptyRoadmap';
 import { cn } from '../../lib/classname';
+import { totalRoadmapNodes } from '../../stores/roadmap.ts';
 
 type FlowRoadmapRendererProps = {
   roadmap: RoadmapDocument;
@@ -138,6 +139,12 @@ export function FlowRoadmapRenderer(props: FlowRoadmapRendererProps) {
         )}
         onRendered={() => {
           renderResourceProgress('roadmap', roadmapId).then(() => {
+            totalRoadmapNodes.set(
+              roadmap?.nodes?.filter((node) => {
+                return ['topic', 'subtopic'].includes(node.type);
+              }).length || 0,
+            );
+
             if (roadmap?.nodes?.length === 0) {
               setHideRenderer(true);
               editorWrapperRef?.current?.classList.add('hidden');

src/components/FrameRenderer/FrameRenderer.astro

@@ -1,6 +1,7 @@
 ---
 import Loader from '../Loader.astro';
 import './FrameRenderer.css';
+import { ProgressNudge } from "./ProgressNudge";
 
 export interface Props {
   resourceType: 'roadmap' | 'best-practice';
@@ -27,4 +28,6 @@ const { resourceId, resourceType, dimensions = null } = Astro.props;
   </div>
 </div>
 
+<ProgressNudge resourceId={resourceId} resourceType={resourceType} client:only="react" />
+
 <script src='./renderer.ts'></script>

src/components/FrameRenderer/ProgressNudge.tsx

@@ -0,0 +1,83 @@
+import { Spinner } from '../ReactIcons/Spinner.tsx';
+import { useEffect, useState } from 'react';
+import { cn } from '../../lib/classname.ts';
+import { getUser } from '../../lib/jwt.ts';
+import { roadmapProgress, totalRoadmapNodes } from '../../stores/roadmap.ts';
+import { useStore } from '@nanostores/react';
+import {HelpCircle} from "lucide-react";
+
+type ProgressNudgeProps = {
+  resourceType: 'roadmap' | 'best-practice';
+  resourceId: string;
+};
+
+export function ProgressNudge(props: ProgressNudgeProps) {
+  const { resourceId, resourceType } = props;
+
+  const $totalRoadmapNodes = useStore(totalRoadmapNodes);
+  const $roadmapProgress = useStore(roadmapProgress);
+
+  const done = $roadmapProgress?.done?.length || 0;
+
+  const [isLoading, setIsLoading] = useState(true);
+  const { id: userId } = getUser() || {};
+
+  const hasProgress = done > 0;
+
+  useEffect(() => {
+    setTimeout(() => {
+      setIsLoading(false);
+    }, 500);
+  }, []);
+
+  if (!$totalRoadmapNodes) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn(
+        'fixed hidden sm:block -bottom-full left-1/2 z-30 -translate-x-1/2 transform overflow-hidden rounded-full bg-stone-900 px-4 py-2 text-center text-white shadow-2xl transition-all ',
+        {
+          'bottom-5 opacity-100': !isLoading,
+        },
+      )}
+    >
+      <span
+        className={cn('block', {
+          hidden: hasProgress,
+        })}
+      >
+        <span className="mr-2 text-sm font-semibold uppercase text-yellow-400">
+          Tip
+        </span>
+        <span className="text-sm text-gray-200">
+          Right-click on a topic to mark it as done.{' '}
+          <button
+            data-popup="progress-help"
+            className="cursor-pointer font-semibold text-yellow-500 underline"
+          >
+            Learn more.
+          </button>
+        </span>
+      </span>
+      <span
+        className={cn('relative z-20 block text-sm', {
+          hidden: !hasProgress,
+        })}
+      >
+        <span className="relative -top-[0.45px] mr-2 text-xs font-medium uppercase text-yellow-400">
+          Progress
+        </span>
+        <span>{done}</span> of <span>{$totalRoadmapNodes}</span> Done
+      </span>
+
+      <span
+        className="absolute bottom-0 left-0 top-0 z-10 bg-stone-700"
+        style={{
+          width: `${(done / $totalRoadmapNodes) * 100}%`,
+        }}
+      ></span>
+    </div>
+  );
+}

src/components/FrameRenderer/renderer.ts

@@ -218,6 +218,11 @@ export class Renderer {
 
     const isCurrentStatusDone = targetGroup.classList.contains('done');
     const normalizedGroupId = groupId.replace(/^\d+-/, '');
+
+    if (normalizedGroupId.startsWith('ext_link:')) {
+      return;
+    }
+
     this.updateTopicStatus(
       normalizedGroupId,
       !isCurrentStatusDone ? 'done' : 'pending',