From 15b763e062e12607bad36e7cfa8e122e8adf5647 Mon Sep 17 00:00:00 2001
From: Falkan <falkan@openclaw.local>
Date: Tue, 17 Mar 2026 19:55:09 -0400
Subject: [PATCH] feat: unit descriptions with tooltip action and admin
 textarea

---
 src/components/ConversionResult.svelte |  3 +-
 src/lib/actions/tooltip.ts             | 40 ++++++++++++++++++++++++++
 src/routes/admin/+page.svelte          |  4 +++
 src/routes/admin/api/units/+server.ts  |  5 ++--
 4 files changed, 49 insertions(+), 3 deletions(-)
 create mode 100644 src/lib/actions/tooltip.ts

diff --git a/src/components/ConversionResult.svelte b/src/components/ConversionResult.svelte
index 8ee24b0..43ba4b8 100644
--- a/src/components/ConversionResult.svelte
+++ b/src/components/ConversionResult.svelte
@@ -2,6 +2,7 @@
   import type { Big } from 'big.js';
   import type { Unit } from '$lib/types';
   import { formatBig } from '$lib/format';
+  import { tooltip } from '$lib/actions/tooltip';
 
   /**
    * ConversionResult — displays one conversion result tile.
@@ -65,7 +66,7 @@
       {#if isYolo}<span class="yolo-tilde">~</span>{/if}{formattedValue}
     </span>
   {/if}
-  <span class="result-label">{unit.labelPlural} ({unit.symbol})</span>
+  <span class="result-label" use:tooltip={unit.description ?? ''}>{unit.labelPlural} ({unit.symbol})</span>
 </div>
 
 <style>
diff --git a/src/lib/actions/tooltip.ts b/src/lib/actions/tooltip.ts
new file mode 100644
index 0000000..2fb00d1
--- /dev/null
+++ b/src/lib/actions/tooltip.ts
@@ -0,0 +1,40 @@
+/**
+ * Svelte action: show a native `title` tooltip after a 500ms hover delay.
+ * If text is empty, does nothing.
+ */
+export function tooltip(node: HTMLElement, text: string) {
+  let timer: ReturnType<typeof setTimeout> | null = null;
+
+  function enter() {
+    if (!text) return;
+    timer = setTimeout(() => {
+      node.title = text;
+    }, 500);
+  }
+
+  function leave() {
+    if (timer !== null) {
+      clearTimeout(timer);
+      timer = null;
+    }
+    node.removeAttribute('title');
+  }
+
+  node.addEventListener('mouseenter', enter);
+  node.addEventListener('mouseleave', leave);
+
+  return {
+    update(newText: string) {
+      text = newText;
+      // If title is currently set, update it immediately
+      if (node.title) {
+        node.title = newText || '';
+      }
+    },
+    destroy() {
+      if (timer !== null) clearTimeout(timer);
+      node.removeEventListener('mouseenter', enter);
+      node.removeEventListener('mouseleave', leave);
+    }
+  };
+}
diff --git a/src/routes/admin/+page.svelte b/src/routes/admin/+page.svelte
index 7f42010..03fbed3 100644
--- a/src/routes/admin/+page.svelte
+++ b/src/routes/admin/+page.svelte
@@ -464,6 +464,10 @@
           <small class="tobase-hint">{toBaseHint}</small>
         {/if}
       </label>
+      <label>
+        Description <small class="muted">(optional — shown as tooltip in converter)</small>
+        <textarea bind:value={unitForm.description} placeholder="e.g. A unit based on…" rows="2"></textarea>
+      </label>
       <div class="form-actions">
         <button onclick={saveUnit}>{unitFormNew ? 'Create' : 'Save'}</button>
         {#if !unitFormNew}
diff --git a/src/routes/admin/api/units/+server.ts b/src/routes/admin/api/units/+server.ts
index cbfa806..da711b5 100644
--- a/src/routes/admin/api/units/+server.ts
+++ b/src/routes/admin/api/units/+server.ts
@@ -16,7 +16,7 @@ export const POST: RequestHandler = async ({ request }) => {
   const body = await request.json().catch(() => null);
   if (!body) return json({ error: 'Invalid JSON' }, { status: 400 });
 
-  const { id, label, labelPlural, symbol, group, toBase } = body as Partial<Unit>;
+  const { id, label, labelPlural, symbol, group, toBase, description } = body as Partial<Unit>;
 
   // Validation
   if (!id || !KEBAB_RE.test(id)) {
@@ -44,7 +44,8 @@ export const POST: RequestHandler = async ({ request }) => {
     labelPlural,
     symbol,
     group: group ?? null,
-    toBase
+    toBase,
+    ...(description ? { description } : {})
   };
   data.units.push(newUnit);
   saveData(data);