show only target number on todo tasks.

svelte-ui/src/components/TaskIcon.svelte

@@ -8,6 +8,7 @@ import type { IconName } from "../external/icons";
   export let iconName: IconName;
 
   let showNumbersAnyway;
+  let inactive;
 
   $: {
     switch (task.statusTag) {
@@ -20,16 +21,23 @@ import type { IconName } from "../external/icons";
   }
 
   $: showNumbersAnyway = ["to do", "on hold"].includes(task.statusTag) && task.itemAmount > 1;
+  $: inactive = !task.active || showNumbersAnyway;
 </script>
 
-<div class="icon sccsi" class:inactive={!task.active && !showNumbersAnyway}>
-  {#if !task.active && !showNumbersAnyway}
-    <span class="on"><Icon block name={iconName} /></span>
+<div class="icon sccsi" class:targetonly={showNumbersAnyway} class:inactive={inactive}>
+  {#if !task.active || showNumbersAnyway}
+    <span class="on">
+      {#if showNumbersAnyway}
+        {task.itemAmount}
+      {:else}
+        <Icon block name={iconName} />
+      {/if}
+    </span>
     <span class="off">
       {task.completedAmount}&nbsp;/&nbsp;{task.itemAmount}
     </span>
   {:else}
-    {task.completedAmount}&nbsp;/&nbsp;{task.itemAmount}
+    {task.completedAmount}&nbsp;&nbsp;{task.itemAmount}
   {/if}
 </div>
 
@@ -51,6 +59,15 @@ import type { IconName } from "../external/icons";
     background: #484;
     color: #78ff78;
   }
+  div.icon.targetonly {
+    min-width: 1.5ch;
+    text-align: center;
+    padding-top: 0.205em;
+    padding-bottom: 0.225em;
+  }
+  div.icon.targetonly span.on {
+    font-weight: 800;
+  }
   div.icon.inactive span.off {
     display: none;
   }