👁️
show card preview in lists
+47
-22
+9
-6
src/components/SetSymbol.tsx
+9
-6
src/components/SetSymbol.tsx
···
8
8
9
9
interface SetSymbolProps {
10
10
setCode: string;
11
-
rarity?: "common" | "uncommon" | "rare" | "mythic" | "timeshifted";
11
+
rarity?: string;
12
12
size?: "small" | "medium" | "large";
13
13
className?: string;
14
14
}
···
19
19
large: "text-2xl",
20
20
};
21
21
22
-
const RARITY_CLASSES = {
22
+
const RARITY_CLASSES: Record<string, string> = {
23
23
common: "text-rarity-common dark:text-gray-400",
24
24
uncommon: "text-rarity-uncommon",
25
25
rare: "text-rarity-rare",
···
29
29
30
30
export function SetSymbol({
31
31
setCode,
32
-
rarity = "common",
32
+
rarity,
33
33
size = "medium",
34
34
className,
35
35
}: SetSymbolProps) {
···
39
39
return null;
40
40
}
41
41
42
+
const rarityClass =
43
+
RARITY_CLASSES[rarity ?? "common"] ?? RARITY_CLASSES.common;
44
+
42
45
return (
43
46
<span
44
47
role="img"
45
-
className={`font-['Keyrune'] ${SIZE_CLASSES[size]} ${RARITY_CLASSES[rarity]} ${className ?? ""}`}
46
-
title={`${setCode.toUpperCase()} (${rarity})`}
47
-
aria-label={`Set: ${setCode.toUpperCase()}, Rarity: ${rarity}`}
48
+
className={`font-['Keyrune'] ${SIZE_CLASSES[size]} ${rarityClass} ${className ?? ""}`}
49
+
title={`${setCode.toUpperCase()}${rarity ? ` (${rarity})` : ""}`}
50
+
aria-label={`Set: ${setCode.toUpperCase()}${rarity ? `, Rarity: ${rarity}` : ""}`}
48
51
>
49
52
{symbol}
50
53
</span>
+38
-16
src/routes/profile/$did/list/$rkey/index.tsx
+38
-16
src/routes/profile/$did/list/$rkey/index.tsx
···
8
8
import { ClientDate } from "@/components/ClientDate";
9
9
import { DeckPreview } from "@/components/DeckPreview";
10
10
import { ListActionsMenu } from "@/components/list/ListActionsMenu";
11
+
import { ManaCost } from "@/components/ManaCost";
12
+
import { OracleText } from "@/components/OracleText";
11
13
import { RichtextSection } from "@/components/richtext/RichtextSection";
14
+
import { SetSymbol } from "@/components/SetSymbol";
12
15
import { asRkey, type Rkey } from "@/lib/atproto-client";
16
+
import { getPrimaryFace } from "@/lib/card-faces";
13
17
import {
14
18
getCollectionListQueryOptions,
15
19
useToggleListItemMutation,
···
281
285
}
282
286
283
287
return (
284
-
<div className="flex items-center gap-4 p-4 bg-gray-50 dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-lg">
285
-
<Link to="/card/$id" params={{ id: item.scryfallId }}>
288
+
<div className="flex items-center gap-4">
289
+
<Link
290
+
to="/card/$id"
291
+
params={{ id: item.scryfallId }}
292
+
className="group flex-1 flex items-start gap-4 p-4 bg-gray-50 dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-lg hover:border-cyan-500 dark:hover:border-cyan-500 motion-safe:hover:shadow-lg transition-colors motion-safe:transition-shadow"
293
+
>
286
294
<CardImage
287
295
card={{ id: item.scryfallId, name: card.name }}
288
296
size="small"
289
297
className="w-16 h-auto rounded"
290
298
/>
291
-
</Link>
292
299
293
-
<div className="flex-1 min-w-0">
294
-
<Link
295
-
to="/card/$id"
296
-
params={{ id: item.scryfallId }}
297
-
className="font-bold text-gray-900 dark:text-white hover:text-cyan-600 dark:hover:text-cyan-400 truncate block"
298
-
>
299
-
{card.name}
300
-
</Link>
301
-
<p className="text-sm text-gray-600 dark:text-gray-400 truncate">
302
-
{card.type_line}
303
-
</p>
304
-
</div>
305
-
300
+
<div className="flex-1 min-w-0">
301
+
<div className="flex items-center justify-between gap-3">
302
+
<span className="font-bold text-gray-900 dark:text-white truncate">
303
+
{card.name}
304
+
</span>
305
+
{getPrimaryFace(card).mana_cost && (
306
+
<ManaCost
307
+
cost={getPrimaryFace(card).mana_cost ?? ""}
308
+
size="small"
309
+
/>
310
+
)}
311
+
</div>
312
+
<div className="flex items-center justify-between gap-3 text-xs text-gray-600 dark:text-gray-300">
313
+
<span className="truncate">{card.type_line}</span>
314
+
{card.set && (
315
+
<SetSymbol setCode={card.set} rarity={card.rarity} size="small" />
316
+
)}
317
+
</div>
318
+
{getPrimaryFace(card).oracle_text && (
319
+
<p className="text-xs text-gray-500 dark:text-gray-400 line-clamp-3 leading-tight">
320
+
<OracleText
321
+
text={getPrimaryFace(card).oracle_text ?? ""}
322
+
symbolSize="text"
323
+
/>
324
+
</p>
325
+
)}
326
+
</div>
327
+
</Link>
306
328
{onRemove && (
307
329
<button
308
330
type="button"