From 32b50c40aa98e597ef7196715258ff570cd2f8a2 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Mon, 16 Mar 2026 12:38:27 +0000
Subject: [PATCH 1/2] [#156] Replace text asterisks with SVG star icons in
 rating UI
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- New StarRating.tsx with StarDisplay (fractional fill via clip-path)
  and StarInput (hover + click interactive stars)
- RatingWidget: star icons for input (24px), average (18px), and
  recent ratings (12px) — replaces number buttons and text asterisks
- RatingSummary: star icons (14px) with fractional fill support

Fixes #156

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/RatingSummary.tsx |  16 ++---
 src/components/RatingWidget.tsx  |  42 +++---------
 src/components/StarRating.tsx    | 107 +++++++++++++++++++++++++++++++
 3 files changed, 122 insertions(+), 43 deletions(-)
 create mode 100644 src/components/StarRating.tsx

diff --git a/src/components/RatingSummary.tsx b/src/components/RatingSummary.tsx
index 4bfdf35e..f5e451ee 100644
--- a/src/components/RatingSummary.tsx
+++ b/src/components/RatingSummary.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useQuery } from "@tanstack/react-query";
+import { StarDisplay } from "./StarRating";
 
 interface RatingsResponse {
   average: number;
@@ -20,16 +21,11 @@ export function RatingSummary({ storylineId }: { storylineId: number }) {
   if (!data || data.count === 0) return null;
 
   return (
-    <span>
-      {[1, 2, 3, 4, 5].map((star) => (
-        <span
-          key={star}
-          className={star <= Math.round(data.average) ? "text-accent" : "text-muted"}
-        >
-          *
-        </span>
-      ))}{" "}
-      {data.average.toFixed(1)} ({data.count})
+    <span className="inline-flex items-center gap-1">
+      <StarDisplay rating={data.average} size={14} />
+      <span className="text-muted text-xs">
+        {data.average.toFixed(1)} ({data.count})
+      </span>
     </span>
   );
 }
diff --git a/src/components/RatingWidget.tsx b/src/components/RatingWidget.tsx
index 4d1e3f48..af3da679 100644
--- a/src/components/RatingWidget.tsx
+++ b/src/components/RatingWidget.tsx
@@ -7,6 +7,7 @@ import { publicClient } from "../../lib/rpc";
 import { erc20Abi } from "../../lib/price";
 import type { Address } from "viem";
 import { truncateAddress } from "../../lib/utils";
+import { StarDisplay, StarInput } from "./StarRating";
 
 interface RatingData {
   id: number;
@@ -30,22 +31,6 @@ interface RatingWidgetProps {
   tokenAddress: string;
 }
 
-function StarDisplay({ rating, size = "sm" }: { rating: number; size?: "sm" | "lg" }) {
-  const sizeClass = size === "lg" ? "text-base" : "text-xs";
-  return (
-    <span className={sizeClass}>
-      {[1, 2, 3, 4, 5].map((star) => (
-        <span
-          key={star}
-          className={star <= Math.round(rating) ? "text-accent" : "text-muted"}
-        >
-          *
-        </span>
-      ))}
-    </span>
-  );
-}
-
 export function RatingWidget({ storylineId, tokenAddress }: RatingWidgetProps) {
   const { address, isConnected } = useAccount();
   const { signMessageAsync } = useSignMessage();
@@ -149,7 +134,7 @@ export function RatingWidget({ storylineId, tokenAddress }: RatingWidgetProps) {
         <h2 className="text-foreground text-sm font-medium">Ratings</h2>
         {count > 0 && (
           <div className="flex items-center gap-2 text-xs">
-            <StarDisplay rating={average} />
+            <StarDisplay rating={average} size={18} />
             <span className="text-muted">
               {average.toFixed(1)} ({count})
             </span>
@@ -163,21 +148,12 @@ export function RatingWidget({ storylineId, tokenAddress }: RatingWidgetProps) {
           <label className="text-muted block text-[10px] uppercase tracking-wider">
             Your rating
           </label>
-          <div className="mt-1 flex gap-1">
-            {[1, 2, 3, 4, 5].map((star) => (
-              <button
-                key={star}
-                onClick={() => setSelectedRating(star)}
-                disabled={submitting}
-                className={`rounded border px-2 py-1 text-xs transition-colors ${
-                  star <= selectedRating
-                    ? "border-accent text-accent"
-                    : "border-border text-muted hover:border-accent-dim"
-                } disabled:opacity-50`}
-              >
-                {star}
-              </button>
-            ))}
+          <div className="mt-1">
+            <StarInput
+              value={selectedRating}
+              onChange={setSelectedRating}
+              disabled={submitting}
+            />
           </div>
 
           <textarea
@@ -219,7 +195,7 @@ export function RatingWidget({ storylineId, tokenAddress }: RatingWidgetProps) {
                   <span className="text-foreground">
                     {truncateAddress(r.rater_address)}
                   </span>
-                  <StarDisplay rating={r.rating} />
+                  <StarDisplay rating={r.rating} size={12} />
                 </div>
                 {r.comment && (
                   <p className="text-muted mt-0.5 pl-0.5">{r.comment}</p>
diff --git a/src/components/StarRating.tsx b/src/components/StarRating.tsx
new file mode 100644
index 00000000..e232260e
--- /dev/null
+++ b/src/components/StarRating.tsx
@@ -0,0 +1,107 @@
+"use client";
+
+import { useState } from "react";
+
+interface StarIconProps {
+  /** 0 = empty, 1 = full, 0-1 = partial fill */
+  fill: number;
+  size: number;
+  className?: string;
+}
+
+function StarIcon({ fill, size, className = "" }: StarIconProps) {
+  const id = `star-clip-${Math.random().toString(36).slice(2, 8)}`;
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      className={className}
+      aria-hidden="true"
+    >
+      {fill > 0 && fill < 1 && (
+        <defs>
+          <clipPath id={id}>
+            <rect x="0" y="0" width={24 * fill} height="24" />
+          </clipPath>
+        </defs>
+      )}
+      {/* Empty star outline */}
+      <path
+        d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        className="text-muted"
+      />
+      {/* Filled star (full or partial) */}
+      {fill > 0 && (
+        <path
+          d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
+          fill="currentColor"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          className="text-accent"
+          clipPath={fill < 1 ? `url(#${id})` : undefined}
+        />
+      )}
+    </svg>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Display-only star rating (supports fractional values)
+// ---------------------------------------------------------------------------
+
+interface StarDisplayProps {
+  rating: number;
+  size?: number;
+}
+
+export function StarDisplay({ rating, size = 16 }: StarDisplayProps) {
+  return (
+    <span className="inline-flex items-center gap-0.5">
+      {[1, 2, 3, 4, 5].map((star) => {
+        const fill = Math.min(1, Math.max(0, rating - (star - 1)));
+        return <StarIcon key={star} fill={fill} size={size} />;
+      })}
+    </span>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Interactive star rating input
+// ---------------------------------------------------------------------------
+
+interface StarInputProps {
+  value: number;
+  onChange: (rating: number) => void;
+  disabled?: boolean;
+  size?: number;
+}
+
+export function StarInput({ value, onChange, disabled = false, size = 24 }: StarInputProps) {
+  const [hovered, setHovered] = useState(0);
+  const display = hovered || value;
+
+  return (
+    <span
+      className="inline-flex items-center gap-0.5"
+      onMouseLeave={() => setHovered(0)}
+    >
+      {[1, 2, 3, 4, 5].map((star) => (
+        <button
+          key={star}
+          type="button"
+          onClick={() => !disabled && onChange(star)}
+          onMouseEnter={() => !disabled && setHovered(star)}
+          disabled={disabled}
+          className="cursor-pointer p-0.5 transition-transform hover:scale-110 disabled:cursor-default disabled:opacity-50"
+          aria-label={`Rate ${star} star${star > 1 ? "s" : ""}`}
+        >
+          <StarIcon fill={star <= display ? 1 : 0} size={size} />
+        </button>
+      ))}
+    </span>
+  );
+}

From 13ee003035300b1f6657d12673b2610d7004c890 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Mon, 16 Mar 2026 13:23:20 +0000
Subject: [PATCH 2/2] [#156] Use useId() for SSR-stable clip-path IDs in
 StarRating

Replace Math.random() with React useId() for deterministic SVG
clipPath IDs, preventing hydration mismatches.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/StarRating.tsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/StarRating.tsx b/src/components/StarRating.tsx
index e232260e..98afa12e 100644
--- a/src/components/StarRating.tsx
+++ b/src/components/StarRating.tsx
@@ -1,16 +1,16 @@
 "use client";
 
-import { useState } from "react";
+import { useId, useState } from "react";
 
 interface StarIconProps {
   /** 0 = empty, 1 = full, 0-1 = partial fill */
   fill: number;
   size: number;
+  clipId: string;
   className?: string;
 }
 
-function StarIcon({ fill, size, className = "" }: StarIconProps) {
-  const id = `star-clip-${Math.random().toString(36).slice(2, 8)}`;
+function StarIcon({ fill, size, clipId, className = "" }: StarIconProps) {
   return (
     <svg
       width={size}
@@ -21,7 +21,7 @@ function StarIcon({ fill, size, className = "" }: StarIconProps) {
     >
       {fill > 0 && fill < 1 && (
         <defs>
-          <clipPath id={id}>
+          <clipPath id={clipId}>
             <rect x="0" y="0" width={24 * fill} height="24" />
           </clipPath>
         </defs>
@@ -42,7 +42,7 @@ function StarIcon({ fill, size, className = "" }: StarIconProps) {
           stroke="currentColor"
           strokeWidth="1.5"
           className="text-accent"
-          clipPath={fill < 1 ? `url(#${id})` : undefined}
+          clipPath={fill < 1 ? `url(#${clipId})` : undefined}
         />
       )}
     </svg>
@@ -59,11 +59,12 @@ interface StarDisplayProps {
 }
 
 export function StarDisplay({ rating, size = 16 }: StarDisplayProps) {
+  const baseId = useId();
   return (
     <span className="inline-flex items-center gap-0.5">
       {[1, 2, 3, 4, 5].map((star) => {
         const fill = Math.min(1, Math.max(0, rating - (star - 1)));
-        return <StarIcon key={star} fill={fill} size={size} />;
+        return <StarIcon key={star} fill={fill} size={size} clipId={`${baseId}-${star}`} />;
       })}
     </span>
   );
@@ -81,6 +82,7 @@ interface StarInputProps {
 }
 
 export function StarInput({ value, onChange, disabled = false, size = 24 }: StarInputProps) {
+  const baseId = useId();
   const [hovered, setHovered] = useState(0);
   const display = hovered || value;
 
@@ -99,7 +101,7 @@ export function StarInput({ value, onChange, disabled = false, size = 24 }: Star
           className="cursor-pointer p-0.5 transition-transform hover:scale-110 disabled:cursor-default disabled:opacity-50"
           aria-label={`Rate ${star} star${star > 1 ? "s" : ""}`}
         >
-          <StarIcon fill={star <= display ? 1 : 0} size={size} />
+          <StarIcon fill={star <= display ? 1 : 0} size={size} clipId={`${baseId}-${star}`} />
         </button>
       ))}
     </span>