From 3e6d494f672942385bac3a298de0ac4cda44ef97 Mon Sep 17 00:00:00 2001
From: Johannes Millan <johannes.millan@gmail.com>
Date: Fri, 15 May 2026 12:35:38 +0200
Subject: [PATCH] feat(ui): use rounded-square shape for task done-toggle

Replace the always-on background circle in the shared done-toggle
component with a slightly rounded square (rx/ry 5.5 on the 24-unit
viewBox). Rename the .done-circle SCSS selector to .done-shape;
stroke, opacity, hover and animation behavior are unchanged.

Applies everywhere the toggle is used (task list, planner).
---
 src/app/ui/done-toggle/done-toggle.component.html | 15 +++++++++------
 src/app/ui/done-toggle/done-toggle.component.scss | 10 +++++-----
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/app/ui/done-toggle/done-toggle.component.html b/src/app/ui/done-toggle/done-toggle.component.html
index 3e0c725a98..f95848ef14 100644
--- a/src/app/ui/done-toggle/done-toggle.component.html
+++ b/src/app/ui/done-toggle/done-toggle.component.html
@@ -3,12 +3,15 @@
   viewBox="0 0 24 24"
   fill="none"
 >
-  <!-- Background circle (always visible) -->
-  <circle
-    class="done-circle"
-    cx="12"
-    cy="12"
-    r="10"
+  <!-- Background shape (always visible) -->
+  <rect
+    class="done-shape"
+    x="2.5"
+    y="2.5"
+    width="19"
+    height="19"
+    rx="5.5"
+    ry="5.5"
   />
   @if (isCurrent() && !isDone() && !showDoneAnimation()) {
     <!-- Play triangle (only rendered for current task) -->
diff --git a/src/app/ui/done-toggle/done-toggle.component.scss b/src/app/ui/done-toggle/done-toggle.component.scss
index 0eb71d3d3d..693a630592 100644
--- a/src/app/ui/done-toggle/done-toggle.component.scss
+++ b/src/app/ui/done-toggle/done-toggle.component.scss
@@ -52,7 +52,7 @@ $check-len: 18;
     transform: scale(1.15);
   }
 
-  .done-circle {
+  .done-shape {
     stroke: currentColor;
     stroke-width: 2;
     fill: none;
@@ -80,7 +80,7 @@ $check-len: 18;
   }
 
   &.is-done {
-    .done-circle {
+    .done-shape {
       opacity: 0.5;
     }
 
@@ -92,7 +92,7 @@ $check-len: 18;
 
   &.is-current:not(.is-done) {
     &:hover {
-      .done-circle {
+      .done-shape {
         opacity: 0.6;
       }
 
@@ -103,7 +103,7 @@ $check-len: 18;
   }
 
   &:hover {
-    .done-circle {
+    .done-shape {
       opacity: 0.6;
     }
 
@@ -112,7 +112,7 @@ $check-len: 18;
     }
 
     &.is-done {
-      .done-circle {
+      .done-shape {
         opacity: 0.8;
       }