From f63563ce16458c9a6f78448847d0de594c1a9abe Mon Sep 17 00:00:00 2001
From: John O'Keefe <git@linuxhg.com>
Date: Wed, 16 Sep 2026 14:00:44 -0400
Subject: [PATCH] fix(frontend): star rating hover via StarInput, retire
 overlay slider

The vendored overlay-slider Stars.svelte never responded under
Svelte 5 - a runes port plus an explicit value/oninput rewrite both
left it inert, which convicted the mechanism rather than its
syntax. Replace it with StarInput.svelte: per-star hover zones with
fractional math (preserves the full 0-10 granularity),
snapshot-and-revert on mouseleave, commit on click, arrow-key
nudging, disabled mode. It reuses the Star SVG leaf so output is
pixel-identical, stays dumb (value in/out, no stores) for the
planned inline-grid editing, and Rating.svelte keeps owning the
words/score math locally. Legacy on:change forwarding and the
slider CSS go with the old file.
---
 frontend/src/helperComponents/Rating.svelte |  37 +-----
 frontend/src/star-rating/StarInput.svelte   | 134 ++++++++++++++++++++
 frontend/src/star-rating/Stars.svelte       |  63 ---------
 3 files changed, 140 insertions(+), 94 deletions(-)
 create mode 100644 frontend/src/star-rating/StarInput.svelte
 delete mode 100644 frontend/src/star-rating/Stars.svelte

diff --git a/frontend/src/helperComponents/Rating.svelte b/frontend/src/helperComponents/Rating.svelte
index 26f89fd..64cc1ea 100644
--- a/frontend/src/helperComponents/Rating.svelte
+++ b/frontend/src/helperComponents/Rating.svelte
@@ -1,30 +1,9 @@
 <script lang="ts">
-    import StarRatting from "../star-rating/Stars.svelte";
+    import StarInput from "../star-rating/StarInput.svelte";
 
-    export let score
+    let { score = $bindable(0) }: { score: number } = $props();
 
-    let config = {
-        readOnly: false,
-        countStars: 5,
-        range: {
-            min: 0,
-            max: 5,
-            step: 0.5
-        },
-        score: score / 2,
-        showScore: false,
-        name: "rating",
-        scoreFormat: function(){ return `(${this.score.toFixed(0)}/${this.countStars})` },
-        starConfig: {
-            size: 32,
-            fillColor: '#F9ED4F',
-            strokeColor: "#e2c714",
-            unfilledColor: '#FFF',
-            strokeUnfilledColor: '#000'
-        }
-    }
-
-    const ratingInWords = {
+    const ratingInWords: Record<number, string> = {
         0: "Not Reviewed",
         1: "Appalling",
         2: "Horrible",
@@ -37,14 +16,10 @@
         9: "Great",
         10: "Masterpiece",
     }
-
-    const changeRating = (e: any) => {
-        score = e.target.valueAsNumber * 2
-    }
 </script>
 
 <div>
-    <StarRatting bind:config on:change={changeRating}/>
-    <p>Rating:  {config.score * 2}</p>
-    <p>{ratingInWords[config.score * 2]}</p>
+    <StarInput bind:value={score} min={0} max={10} step={1} />
+    <p>Rating:  {score}</p>
+    <p>{ratingInWords[score]}</p>
 </div>
diff --git a/frontend/src/star-rating/StarInput.svelte b/frontend/src/star-rating/StarInput.svelte
new file mode 100644
index 0000000..95afa20
--- /dev/null
+++ b/frontend/src/star-rating/StarInput.svelte
@@ -0,0 +1,134 @@
+<!-- Dumb reusable star-rating input. No stores, no backend knowledge:
+     `value` is written live on hover (reverted on leave unless committed)
+     and set on click/keyboard; the parent owns what the value means
+     (words, persistence). Reuses the Star leaf, so output is pixel-identical
+     to the old overlay-slider version without the overlay. -->
+<script lang="ts">
+    import Star from './components/Star.svelte';
+
+    type StarColors = {
+        size: number;
+        fillColor: string;
+        strokeColor: string;
+        unfilledColor: string;
+        strokeUnfilledColor: string;
+    };
+
+    let {
+        value = $bindable(0),
+        min = 0,
+        max = 5,
+        step = 0.5,
+        count = 5,
+        disabled = false,
+        starConfig = {
+            size: 32,
+            fillColor: '#F9ED4F',
+            strokeColor: '#BB8511',
+            unfilledColor: '#FFF',
+            strokeUnfilledColor: '#000'
+        },
+        onchange,
+    }: {
+        value?: number;
+        min?: number;
+        max?: number;
+        step?: number;
+        count?: number;
+        disabled?: boolean;
+        starConfig?: StarColors;
+        onchange?: (value: number) => void;
+    } = $props();
+
+    // Value at hover entry; restored on leave unless committed. Null = idle.
+    let baseline: number | null = $state(null);
+
+    function clamp(v: number): number {
+        return Math.min(max, Math.max(min, v));
+    }
+
+    function snap(v: number): number {
+        const snapped = min + Math.round((v - min) / step) * step;
+        return clamp(Math.round(snapped * 1e6) / 1e6);
+    }
+
+    // Continuous value for cursor position within star `index`.
+    function valueAt(index: number, fraction: number): number {
+        if (index === 0 && fraction < 0.2) return min;
+        const f = fraction >= 0.5 ? 1 : 0.5;
+        return snap(min + ((index + f) / count) * (max - min));
+    }
+
+    function fractionOf(e: MouseEvent, el: HTMLElement): number {
+        const rect = el.getBoundingClientRect();
+        if (rect.width <= 0) return 1;
+        return Math.min(1, Math.max(0, (e.clientX - rect.left) / rect.width));
+    }
+
+    function fillOf(index: number): number {
+        const per = (max - min) / count;
+        return Math.min(1, Math.max(0, (value - min - index * per) / per));
+    }
+
+    function onHoverMove(e: MouseEvent, el: HTMLElement, index: number) {
+        if (disabled) return;
+        if (baseline === null) baseline = value;
+        value = valueAt(index, fractionOf(e, el));
+    }
+
+    function onHoverLeave() {
+        if (disabled) return;
+        if (baseline !== null) {
+            value = baseline;
+            baseline = null;
+        }
+    }
+
+    function commit(v: number) {
+        if (disabled) return;
+        value = clamp(v);
+        baseline = value;
+        onchange?.(value);
+    }
+</script>
+
+<div
+    class="stars-container"
+    role="group"
+    aria-label="Star rating"
+    onmouseleave={onHoverLeave}
+>
+    <div class="stars">
+        {#each Array(count) as _, i}
+            <button
+                type="button"
+                class="flex items-center justify-center p-0 border-0 bg-transparent"
+                disabled={disabled}
+                aria-label={`Rate ${i + 1} out of ${count}`}
+                onmousemove={(e) => onHoverMove(e, e.currentTarget, i)}
+                onclick={() => commit(value)}
+                onkeydown={(e) => {
+                    if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {
+                        e.preventDefault();
+                        commit(value + step);
+                    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {
+                        e.preventDefault();
+                        commit(value - step);
+                    }
+                }}
+            >
+                <Star
+                    id={`star-${i}`}
+                    readOnly={disabled}
+                    starConfig={starConfig}
+                    fillPercentage={fillOf(i)}
+                />
+            </button>
+        {/each}
+    </div>
+</div>
+
+<style>
+    .stars-container{ position: relative; display: flex; align-items: center; justify-content: center; gap: .5rem; }
+    .stars{ display: flex; align-items: center; justify-content: center; gap: .5rem; }
+</style>
diff --git a/frontend/src/star-rating/Stars.svelte b/frontend/src/star-rating/Stars.svelte
deleted file mode 100644
index 1f68b3d..0000000
--- a/frontend/src/star-rating/Stars.svelte
+++ /dev/null
@@ -1,63 +0,0 @@
-<!-- Originally from @ernane/svelte-star-rating. Wanted to give credit but could not use from the library without causing program crash. -->
-
-<script>
-    import Star from './components/Star.svelte';
-    export let config = {
-        readOnly: false,
-        countStars: 5,
-        range: { min: 0, max: 5, step: 0.001 },
-        score: 0.0,
-        showScore: true,
-        name: "stars",
-        scoreFormat: function(){ return `(${this.score.toFixed(0)}/${this.countStars})` },
-        starConfig: {
-            size: 30,
-            fillColor: '#F9ED4F',
-            strokeColor: "#BB8511",
-            unfilledColor: '#FFF',
-            strokeUnfilledColor: '#000'
-        }
-    }
-</script>
-
-<section class="stars-container">
-    <div class="range-stars">
-        <div class="stars">
-            {#each Array(config.countStars) as star, id}
-                {#if Math.floor(config.score) === id}
-                    <Star id={config.name + id} readOnly={config.readOnly} starConfig={config.starConfig} fillPercentage={config.score - Math.floor(config.score)}/>
-                {:else if Math.floor(config.score) > id}
-                    <Star id={config.name + id} readOnly={config.readOnly} starConfig={config.starConfig} fillPercentage={1}/>
-                {:else}
-                    <Star id={config.name + id} readOnly={config.readOnly} starConfig={config.starConfig} fillPercentage={0}/>
-                {/if}
-            {/each}
-        </div>
-        <input  name={config.name}
-                class="slider"
-                type="range"
-                min={config.readOnly ? config.score : config.range.min}
-                max={config.readOnly ? config.score : config.range.max}
-                step="{config.range.step}" bind:value={config.score}
-                on:change
-                on:click
-        >
-    </div>
-    {#if config.showScore}
-    <span class="show-score" style="font-size: {config.starConfig.size/2}px;">
-      {#if config.scoreFormat}
-        {config.scoreFormat()}
-      {:else}
-        ({((config.score/config.countStars)*100).toFixed(2)}%)
-      {/if}
-    </span>
-    {/if}
-</section>
-
-<style>
-    .stars-container{ position: relative; display: flex; align-items: center; justify-content: center; gap: .5rem; }
-    .range-stars{ position: relative; }
-    .stars{ display: flex; align-items: center; justify-content: center; gap: .5rem; }
-    .slider{ opacity: 0; cursor: pointer; position: absolute; top: 0; left: 0; right: 0; height: 100%; }
-    .show-score{ user-select: none; color: #888 }
-</style>
\ No newline at end of file