❇: Added progress system

components/CourseCard.tsx

@@ -1,7 +1,6 @@
 import { Course } from "../utils/types.ts";
 
-import IconCircle from "https://deno.land/x/tabler_icons_tsx@0.0.5/tsx/circle.tsx";
-// import IconcircleCheck from "https://deno.land/x/tabler_icons_tsx@0.0.5/tsx/circle-check.tsx";
+import ProgressCheck from "../islands/ProgressCheck.tsx";
 
 export default function CourseCard(props: { course: Course }) {
   const { course } = props;
@@ -13,7 +12,7 @@ export default function CourseCard(props: { course: Course }) {
       style={{ order: course.order }}
     >
       <h3 class="text-gray-500 font-bold flex gap-1 items-center">
-        <IconCircle aria-hidden="true" class="h-4 w-4" />
+        <ProgressCheck slug={course.slug} />
         {course.title}
       </h3>
     </a>

fresh.gen.ts

@@ -11,6 +11,8 @@ import * as $group_slug_ from "./routes/group/[slug].tsx";
 import * as $index from "./routes/index.tsx";
 import * as $DoTest from "./islands/DoTest.ts";
 import * as $Editor from "./islands/Editor.tsx";
+import * as $ProgressCheck from "./islands/ProgressCheck.tsx";
+import * as $ProgressTrack from "./islands/ProgressTrack.tsx";
 import * as $ThemeToggle from "./islands/ThemeToggle.tsx";
 import * as $Toast from "./islands/Toast.tsx";
 import * as $signals_store from "./islands/signals/store.ts";
@@ -30,6 +32,8 @@ const manifest = {
   islands: {
     "./islands/DoTest.ts": $DoTest,
     "./islands/Editor.tsx": $Editor,
+    "./islands/ProgressCheck.tsx": $ProgressCheck,
+    "./islands/ProgressTrack.tsx": $ProgressTrack,
     "./islands/ThemeToggle.tsx": $ThemeToggle,
     "./islands/Toast.tsx": $Toast,
     "./islands/signals/store.ts": $signals_store,

islands/ProgressCheck.tsx

@@ -0,0 +1,17 @@
+import { useState } from "preact/hooks";
+
+import IconCircle from "https://deno.land/x/tabler_icons_tsx@0.0.5/tsx/circle.tsx";
+import IconCircleCheckFilled from "https://deno.land/x/tabler_icons_tsx@0.0.5/tsx/circle-check-filled.tsx";
+
+interface ProgressTrackProps {
+  slug: string;
+}
+
+export default function ProgressCheck(props: ProgressTrackProps) {
+  const [isDone, setIsDone] = useState(
+    localStorage.getItem(props.slug.replace(/\\/g, "/")) === "done",
+  );
+  return isDone
+    ? <IconCircleCheckFilled aria-hidden="true" class="h-4 w-4" />
+    : <IconCircle aria-hidden="true" class="h-4 w-4" />;
+}

islands/ProgressTrack.tsx

@@ -0,0 +1,19 @@
+import { useEffect } from "preact/hooks";
+
+interface ProgressTrackProps {
+  slug: string;
+}
+
+export default function ProgressTrack(props: ProgressTrackProps) {
+  useEffect(() => {
+    const initializeEditor = () => {
+      localStorage.setItem(props.slug, "done");
+    };
+    window.onload = initializeEditor;
+    return () => {
+      window.onload = null;
+    };
+  }, []);
+
+  return <></>;
+}

routes/[...slug].tsx

@@ -10,6 +10,7 @@ import EditorSplit from "../components/EditorSplit.tsx";
 import MarkdownSplit from "../components/MarkdownSplit.tsx";
 import { getTestCase } from "../utils/testcase.ts";
 
+import ProgressTrack from "../islands/ProgressTrack.tsx";
 import IconAppWindow from "https://deno.land/x/tabler_icons_tsx@0.0.5/tsx/app-window.tsx";
 
 export const handler: Handlers<
@@ -89,6 +90,7 @@ export default function CoursePage(
           </div>
         </div>
       </main>
+      <ProgressTrack slug={course.slug} />
     </>
   );
 }

static/styles.css

@@ -18,7 +18,7 @@ body, .markdown-body {
 
 /* Monaco Editor */
 .monaco-editor, .overflow-guard {
-  border-radius: 0.2rem;
+  border-radius: 0.3rem;
 }
 
 .iPadShowKeyboard{