From d22885b708010c3dbf6f3ae52db5a363239896fc Mon Sep 17 00:00:00 2001
From: Falkan <falkan@openclaw.local>
Date: Mon, 16 Mar 2026 22:03:01 -0400
Subject: [PATCH] Fix: card text contrast, stable grid order, independent
 highlight/input states, highlight dismiss
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Explicit dark colors on .result-value, .result-label, .result-symbol, .highlighted-value, .highlighted-label
- Include from-unit in results grid (stable definition-order); from-unit tile shows Big(inputValue) and gets is-input-unit dashed-border class
- Shift+click no longer clears highlightedUnitId — fromUnitId and highlightedUnitId are now fully independent states
- Add × dismiss button (aria-label="Remove highlight") to .highlighted-result banner; .highlighted-result gains position:relative

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/app.css                            | 37 +++++++++++++++++++++++---
 src/components/ConversionResult.svelte |  3 +++
 src/components/ConverterCard.svelte    |  1 +
 src/routes/+page.svelte                | 27 ++++++++++++-------
 4 files changed, 55 insertions(+), 13 deletions(-)

diff --git a/src/app.css b/src/app.css
index 91870f8..606d08a 100644
--- a/src/app.css
+++ b/src/app.css
@@ -68,16 +68,17 @@
   font-weight: 600;
   font-variant-numeric: tabular-nums;
   word-break: break-all;
+  color: #2C2C2C; /* explicit dark charcoal, do not rely on inheritance */
 }
 
 .result-label {
   font-size: 0.85rem;
-  color: var(--pico-muted-color, #666);
+  color: #555550;
 }
 
 .result-symbol {
   font-size: 0.75rem;
-  color: var(--pico-muted-color, #666);
+  color: #888880;
   font-style: italic;
 }
 
@@ -94,6 +95,7 @@
   flex-direction: column;
   align-items: center;
   gap: 0.4rem;
+  position: relative;
 }
 
 .highlighted-value {
@@ -102,11 +104,12 @@
   font-variant-numeric: tabular-nums;
   line-height: 1.1;
   word-break: break-all;
+  color: #2C2C2C;
 }
 
 .highlighted-label {
   font-size: 1.25rem;
-  color: var(--pico-color, inherit);
+  color: #2C2C2C;
 }
 
 .highlighted-symbol {
@@ -133,6 +136,34 @@
   min-width: 160px;
 }
 
+/* ── Input unit tile indicator ─────────────────────────────────────────────── */
+.result-tile.is-input-unit {
+  border-style: dashed;
+  border-color: var(--pico-primary);
+  opacity: 0.85;
+}
+
+/* ── Highlight dismiss button ──────────────────────────────────────────────── */
+.highlight-dismiss {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.75rem;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 1rem;
+  line-height: 1;
+  color: var(--pico-muted-color, #888);
+  padding: 0.15rem 0.3rem;
+  border-radius: 0.2rem;
+  transition: color 0.15s ease, background-color 0.15s ease;
+}
+
+.highlight-dismiss:hover {
+  color: #2C2C2C;
+  background-color: rgba(0, 0, 0, 0.06);
+}
+
 /* ── Hotkey hint ───────────────────────────────────────────────────────────── */
 .hotkey-hint {
   margin-top: 1rem;
diff --git a/src/components/ConversionResult.svelte b/src/components/ConversionResult.svelte
index f73683a..6286085 100644
--- a/src/components/ConversionResult.svelte
+++ b/src/components/ConversionResult.svelte
@@ -12,12 +12,14 @@
     value,
     unit,
     highlighted,
+    isInputUnit = false,
     onclick,
     onshiftclick
   }: {
     value: Big;
     unit: Unit;
     highlighted: boolean;
+    isInputUnit?: boolean;
     onclick: () => void;
     onshiftclick: () => void;
   } = $props();
@@ -39,6 +41,7 @@
 <div
   class="result-tile"
   class:highlighted
+  class:is-input-unit={isInputUnit}
   onclick={handleClick}
   role="button"
   tabindex="0"
diff --git a/src/components/ConverterCard.svelte b/src/components/ConverterCard.svelte
index 64608d5..93ddfbb 100644
--- a/src/components/ConverterCard.svelte
+++ b/src/components/ConverterCard.svelte
@@ -47,6 +47,7 @@
         value={item.convertedValue}
         unit={item.unit}
         highlighted={item.unit.id === highlightedUnitId}
+        isInputUnit={item.unit.id === fromUnitId}
         onclick={() => onhighlight(item.unit.id)}
         onshiftclick={() => onsetinput(item.unit.id)}
       />
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 2ca28a3..fcc2f96 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -2,6 +2,7 @@
   import { browser } from '$app/environment';
   import { goto } from '$app/navigation';
   import { page } from '$app/state';
+  import { Big } from 'big.js';
   import { florpUnits } from '$lib/units/definitions';
   import { convertById } from '$lib/convert';
   import { FRACTIONAL_DIGITS } from '$lib/config';
@@ -41,18 +42,19 @@
     }
   }
 
-  // ── Derived: results for all units except fromUnit ─────────────────────────
+  // ── Derived: results for ALL units in definition order ─────────────────────
   let results = $derived<ResultItem[]>(
-    units
-      .filter((u) => u.id !== fromUnitId)
-      .map((u) => ({
-        unit: u,
-        convertedValue: convertById(inputValue, fromUnitId, u.id, units)
-      }))
+    units.map((u) => ({
+      unit: u,
+      convertedValue:
+        u.id === fromUnitId
+          ? Big(inputValue) // from-unit always equals inputValue
+          : convertById(inputValue, fromUnitId, u.id, units)
+    }))
   );
 
-  // ── Derived: highlighted result (unit + value) sourced from results array ──
-  // The highlighted unit is always a non-from unit, so it's always in results.
+  // ── Derived: highlighted result (unit + value) sourced from full results ────
+  // Results now includes all units, so from-unit can be highlighted too.
   let highlightedResult = $derived(
     highlightedUnitId !== null
       ? (results.find((r) => r.unit.id === highlightedUnitId) ?? null)
@@ -90,10 +92,10 @@
   function handleSetInput(id: string) {
     // Shift+click: promote result unit to from-unit.
     // Re-express the current value in terms of the new from-unit.
+    // highlightedUnitId is NOT cleared — the two states are independent.
     const convertedValue = convertById(inputValue, fromUnitId, id, units);
     inputValue = parseFloat(convertedValue.toFixed(FRACTIONAL_DIGITS));
     fromUnitId = id;
-    highlightedUnitId = null;
   }
 </script>
 
@@ -103,6 +105,11 @@
 
 {#if highlightedResult !== null}
   <div class="highlighted-result">
+    <button
+      class="highlight-dismiss"
+      aria-label="Remove highlight"
+      onclick={() => (highlightedUnitId = null)}
+    >×</button>
     <span class="highlighted-value">{formatBig(highlightedResult.convertedValue)}</span>
     <span class="highlighted-label">{highlightedResult.unit.labelPlural}</span>
     <span class="highlighted-symbol">{highlightedResult.unit.symbol}</span>