From cea5aeb614c23491d28165704a0d121c13cf8308 Mon Sep 17 00:00:00 2001
From: Sebastian Martinez <me@sebastinez.dev>
Date: Thu, 7 Dec 2023 13:55:27 +0100
Subject: [PATCH] Improve markdown checkbox design

Replaces `input type="checkbox"` elements in Markdown with our new custom
IconSmall webcomponent.

Doesn't support disabled checkboxes yet, since there is no way to define
them in markdown.
---
 src/components/IconSmall.svelte | 14 ++++++++++++++
 src/components/Markdown.svelte  | 25 +++++++++++++++++++++++++
 vite.config.ts                  |  9 +++++----
 3 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/src/components/IconSmall.svelte b/src/components/IconSmall.svelte
index d36d18206..8bfc1316e 100644
--- a/src/components/IconSmall.svelte
+++ b/src/components/IconSmall.svelte
@@ -1,3 +1,5 @@
+<svelte:options customElement="radicle-icon-small" />
+
 <script lang="ts">
   import { unreachable } from "@app/lib/utils";
   export let name:
@@ -8,6 +10,8 @@
     | "broadcasting"
     | "brush"
     | "chat"
+    | "checkbox-unchecked"
+    | "checkbox-checked"
     | "checkmark"
     | "chevron-down"
     | "chevron-left"
@@ -134,6 +138,16 @@
       d="M4 5.5a.5.5 0 01.5-.5h7a.5.5 0 010 1h-7a.5.5 0 01-.5-.5zm0 2a.5.5 0 01.5-.5h4.75a.5.5 0 010 1H4.5a.5.5 0 01-.5-.5z"
       clip-rule="evenodd">
     </path>
+  {:else if name === "checkbox-checked"}
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M0 2C0 0.895431 0.895431 0 2 0H14C15.1046 0 16 0.895431 16 2V14C16 15.1046 15.1046 16 14 16H2C0.895431 16 0 15.1046 0 14V2ZM13.8107 3.5855C14.134 3.13778 14.0332 2.51269 13.5855 2.18933C13.1378 1.86598 12.5127 1.9668 12.1893 2.41452L6.41921 10.4039L3.74742 7.39815C3.3805 6.98537 2.74843 6.94818 2.33565 7.3151C1.92286 7.68202 1.88568 8.31409 2.2526 8.72688L5.7526 12.6644C5.95412 12.8911 6.24764 13.0141 6.55057 12.9987C6.8535 12.9834 7.1331 12.8314 7.31069 12.5855L13.8107 3.5855Z" />
+  {:else if name === "checkbox-unchecked"}
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M14 1H2C1.44772 1 1 1.44772 1 2V14C1 14.5523 1.44772 15 2 15H14C14.5523 15 15 14.5523 15 14V2C15 1.44772 14.5523 1 14 1ZM2 0C0.895431 0 0 0.895431 0 2V14C0 15.1046 0.895431 16 2 16H14C15.1046 16 16 15.1046 16 14V2C16 0.895431 15.1046 0 14 0H2Z" />
   {:else if name === "checkmark"}
     <path
       fill-rule="evenodd"
diff --git a/src/components/Markdown.svelte b/src/components/Markdown.svelte
index 59ac49cfe..2f4e025c1 100644
--- a/src/components/Markdown.svelte
+++ b/src/components/Markdown.svelte
@@ -105,6 +105,20 @@
       }
     }
 
+    // Replace standard HTML checkboxes with our custom radicle-icon-small element
+    for (const i of container.querySelectorAll('input[type="checkbox"]')) {
+      i.parentElement?.classList.add("task-item");
+
+      const checkbox = document.createElement("radicle-icon-small");
+      const checked = i.getAttribute("checked");
+      checkbox.setAttribute(
+        "name",
+        checked === null ? "checkbox-unchecked" : "checkbox-checked",
+      );
+      i.insertAdjacentElement("beforebegin", checkbox);
+      i.remove();
+    }
+
     // Iterate over all images, and replace the source with a canonicalized URL
     // pointing at the projects /raw endpoint.
     for (const i of container.querySelectorAll("img")) {
@@ -277,6 +291,17 @@
     margin-bottom: 0;
   }
 
+  .markdown :global(li.task-item) {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-left: -1.2rem;
+    color: var(--color-foreground-dim);
+  }
+  .markdown :global(li.task-item:not(:last-child)) {
+    margin-bottom: 0.25rem;
+  }
+
   .markdown :global(blockquote) {
     color: var(--color-foreground-gray);
     border-left: 0.3rem solid var(--color-fill-ghost);
diff --git a/vite.config.ts b/vite.config.ts
index dab5f0176..bfbe6ca2d 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -12,10 +12,11 @@ export default defineConfig({
     svelte({
       // Reference: https://github.com/sveltejs/vite-plugin-svelte/issues/270#issuecomment-1033190138
       dynamicCompileOptions({ filename }) {
-        if (path.basename(filename) === "Clipboard.svelte") {
-          return {
-            customElement: true,
-          };
+        if (
+          path.basename(filename) === "Clipboard.svelte" ||
+          path.basename(filename) === "IconSmall.svelte"
+        ) {
+          return { customElement: true };
         }
       },
       compilerOptions: { dev: process.env.NODE_ENV !== "production" },