From 45bd0a37872fd7f9726e8dc1a0703d19ee8cd39b Mon Sep 17 00:00:00 2001
From: Defelo <mail@defelo.de>
Date: Fri, 4 Sep 2026 01:12:06 +0200
Subject: [PATCH] Fix Markdown checkboxes

The checkbox icons were removed in fa85596ba1821d7e8da1b16ab05e4b0fb9a59fd7,
this adds checkboxes matching the new design system. Also removes the
line break between icon and text.
---
 src/components/Markdown.svelte | 34 +++++++++++++++++++++++-----------
 1 file changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/components/Markdown.svelte b/src/components/Markdown.svelte
index 486280e89..d343e34ba 100644
--- a/src/components/Markdown.svelte
+++ b/src/components/Markdown.svelte
@@ -207,18 +207,19 @@
       }
     }
 
-    // Replace standard HTML checkboxes with our custom radicle-icon-small element
+    // Replace standard HTML checkboxes with a custom styled box.
     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();
+      const box = document.createElement("span");
+      box.classList.add("task-box");
+      if (i.hasAttribute("checked")) {
+        box.classList.add("checked");
+        const icon = document.createElement("radicle-icon-small");
+        icon.setAttribute("name", "checkmark");
+        box.appendChild(icon);
+      }
+      i.replaceWith(box);
     }
 
     // Iterate over all images, and replace the source with a canonicalized URL
@@ -411,9 +412,20 @@
     list-style-type: none;
     color: var(--color-text-tertiary);
   }
-  .markdown :global(li.task-item radicle-icon-small) {
-    margin-right: 0.2rem;
+  .markdown :global(li.task-item .task-box) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.25rem;
+    height: 1.25rem;
+    margin-right: 0.5rem;
     vertical-align: middle;
+    border: 1px solid var(--color-border-mid);
+    border-radius: var(--border-radius-md);
+    background-color: var(--color-surface-base);
+  }
+  .markdown :global(li.task-item .task-box.checked) {
+    color: var(--color-text-brand);
   }
   .markdown :global(li.task-item:not(:last-child)) {
     margin-bottom: 0.25rem;