Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 | 5x 5x 5x 6x 6x 6x 6x 34x 34x 34x 34x 1x 1x 34x 34x 34x 34x 34x 34x 34x 34x 22x 22x 7x 7x 22x 14x 9x 7x 6x 6x 18x 6x 6x 6x 6x 6x 6x 6x 6x 5x 1x 1x 1x 1x 6x 6x 3x 3x 3x 3x 3x 3x 3x 2x 2x 2x 1x 3x 3x 380x 190x 34x 98x 1x 1x 1x 1x 3x 190x 2x 190x 4x | "use client";
import { useEffect, useRef, useState } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { CardImage } from "@/components/ui";
import type { UsageAnswer } from "@/lib/derive-usage";
import { usageChipLabel } from "@/features/items/usage-chip-copy";
export interface RankingRow {
itemId: string;
href: string;
name: string;
coverUrl?: string;
initial: string;
tier: "Love" | "Like" | "Maybe";
pinned: boolean;
usage?: UsageAnswer;
}
const GENTLE_FAIL = "That didn't hold just now — nothing was lost. Try again whenever you like.";
const control =
"flex h-11 w-11 shrink-0 items-center justify-center rounded-control text-ink hover:bg-content-soft focus:outline-hidden focus-visible:ring-2 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-40";
type Direction = "up" | "down";
function move<T>(list: readonly T[], from: number, to: number): T[] {
const next = [...list];
const [moved] = next.splice(from, 1);
next.splice(to, 0, moved);
return next;
}
/**
* The live ranking's ordered list (spec §4 "Adjusting"). Drag or the up/down
* buttons move ONE piece and pin it there; later pair answers flow around it.
* Unpin hands it back to the derived order. Each change is one small request;
* a failure puts the list back as it was.
*/
export function RankingList({ collectionId, rows }: { collectionId: string; rows: RankingRow[] }) {
const router = useRouter();
const [order, setOrder] = useState(rows);
// A refresh brings the server's order: take it.
const [seen, setSeen] = useState(rows);
if (rows !== seen) {
setSeen(rows);
setOrder(rows);
}
const [busy, setBusy] = useState(false);
const [dragging, setDragging] = useState<number | null>(null);
const [announce, setAnnounce] = useState("");
// Shown on screen as well as spoken: a list that silently snaps back reads as a glitch.
const [notice, setNotice] = useState("");
// The move and Unpin buttons stay enabled while a request is out (disabling the focused
// button drops focus to <body>); this ref is the double-tap guard instead.
const inFlight = useRef(false);
const buttons = useRef(new Map<string, HTMLButtonElement>());
const refocus = useRef<{ itemId: string; dir: Direction } | null>(null);
// Reordering moves <li> nodes, which drops focus; put it back on the same
// piece's button (or its other one, once it has reached an end).
useEffect(() => {
const target = refocus.current;
if (!target) return;
refocus.current = null;
const other: Direction = target.dir === "up" ? "down" : "up";
[target.dir, other]
.map((dir) => buttons.current.get(`${target.itemId}:${dir}`))
.find((button) => button && !button.disabled)
?.focus();
}, [order]);
async function place(from: number, to: number, focusDir?: Direction) {
if (inFlight.current || from === to || to < 0 || to >= order.length) return;
inFlight.current = true;
const previous = order;
const next = move(order, from, to).map((r, i) => (i === to ? { ...r, pinned: true } : r));
if (focusDir) refocus.current = { itemId: next[to].itemId, dir: focusDir };
setOrder(next);
setBusy(true);
setNotice("");
setAnnounce(`Moved ${next[to].name} to position ${to + 1} of ${next.length}.`);
try {
const res = await fetch(`/api/collections/${collectionId}/ranking/pins/${next[to].itemId}`, {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ position: to + 1 }),
});
if (!res.ok) throw new Error("pin");
router.refresh();
} catch {
Eif (focusDir) refocus.current = { itemId: next[to].itemId, dir: focusDir };
setOrder(previous);
setAnnounce("");
setNotice(GENTLE_FAIL);
} finally {
inFlight.current = false;
setBusy(false);
}
}
async function unpin(row: RankingRow) {
Iif (inFlight.current) return;
inFlight.current = true;
setBusy(true);
setNotice("");
try {
const res = await fetch(`/api/collections/${collectionId}/ranking/pins/${row.itemId}`, { method: "DELETE" });
if (!res.ok) throw new Error("unpin");
setAnnounce(`${row.name} is back in its suggested place.`);
// The Unpin button leaves with the refresh; land on the piece's move button.
refocus.current = { itemId: row.itemId, dir: "up" };
router.refresh();
} catch {
setNotice(GENTLE_FAIL);
} finally {
inFlight.current = false;
setBusy(false);
}
}
function track(key: string, el: HTMLButtonElement | null) {
if (el) buttons.current.set(key, el);
else buttons.current.delete(key);
}
return (
<section aria-labelledby="ranking-order-heading" className="space-y-3">
<h2 id="ranking-order-heading" className="font-display text-2xl text-ink">
Your order
</h2>
<p role="status" aria-live="polite" className="sr-only">
{announce}
</p>
{/* Always mounted (empty when idle) so the text is announced when it lands. */}
<p role="status" aria-live="polite" className="text-sm text-ink-soft">
{notice}
</p>
<ol className="space-y-2">
{order.map((row, i) => (
<li
key={row.itemId}
draggable={!busy}
onDragStart={() => setDragging(i)}
onDragOver={(e) => e.preventDefault()}
onDrop={() => {
const from = dragging;
setDragging(null);
Eif (from !== null) void place(from, i);
}}
onDragEnd={() => setDragging(null)}
className={`flex items-center gap-2 rounded-card border border-rim bg-glass p-2 sm:gap-3${dragging === i ? " opacity-60" : ""}`}
>
{/* Phone: the grip gives way (drag is a tablet nicety); a small ordinal stays. */}
<span aria-hidden className="hidden h-11 w-6 shrink-0 cursor-grab items-center justify-center text-lg text-ink-soft sm:flex">
⠿
</span>
<span className="w-5 shrink-0 text-center text-xs text-ink-soft sm:w-6 sm:text-sm">{i + 1}</span>
<span className="relative flex h-11 w-11 shrink-0 items-center justify-center overflow-hidden rounded-control bg-content-soft sm:h-14 sm:w-14">
<CardImage
src={row.coverUrl}
alt=""
fallback={
<span aria-hidden className="font-display text-lg text-ink-soft">
{row.initial}
</span>
}
/>
</span>
<span className="min-w-0 flex-1">
<Link href={row.href} className="block break-words text-ink sm:line-clamp-2 underline-offset-2 hover:underline">
{row.name}
</Link>
<span className="block text-xs text-ink-soft">
{row.tier}
{row.usage ? ` · ${usageChipLabel(row.usage)}` : ""}
</span>
</span>
{row.pinned && (
<button
type="button"
onClick={() => void unpin(row)}
aria-label={`Unpin ${row.name}`}
className="flex h-11 min-w-11 shrink-0 items-center justify-center rounded-pill px-2 text-sm text-ink-soft hover:text-ink focus:outline-hidden focus-visible:ring-2 focus-visible:ring-primary sm:px-3"
>
Unpin
</button>
)}
<button
type="button"
ref={(el) => track(`${row.itemId}:up`, el)}
aria-label={`Move ${row.name} up`}
disabled={i === 0}
onClick={() => void place(i, i - 1, "up")}
className={control}
>
<span aria-hidden>↑</span>
</button>
<button
type="button"
ref={(el) => track(`${row.itemId}:down`, el)}
aria-label={`Move ${row.name} down`}
disabled={i === order.length - 1}
onClick={() => void place(i, i + 1, "down")}
className={control}
>
<span aria-hidden>↓</span>
</button>
</li>
))}
</ol>
</section>
);
}
|