A personal media tracker built on the AT Protocol
opnshelf.xyz
refactor: replace h-/w- icon classes with Tailwind size-* utility
+245
-236
+2
-2
apps/web/src/components/ConfirmRemoveDialog.tsx
+2
-2
apps/web/src/components/ConfirmRemoveDialog.tsx
···
29
29
<DialogContent>
30
30
<DialogHeader>
31
31
<DialogTitle className="flex items-center gap-2">
32
-
<AlertTriangle className="h-5 w-5 text-amber-500" />
32
+
<AlertTriangle className="size-5 text-amber-500" />
33
33
Remove all plays?
34
34
</DialogTitle>
35
35
<DialogDescription>
···
55
55
>
56
56
{isPending ? (
57
57
<>
58
-
<Loader2 className="h-4 w-4 animate-spin" />
58
+
<Loader2 className="size-4 animate-spin" />
59
59
Removing...
60
60
</>
61
61
) : (
+6
-6
apps/web/src/components/ErrorBoundary.tsx
+6
-6
apps/web/src/components/ErrorBoundary.tsx
···
21
21
<div className="container-app flex min-h-[60vh] flex-col items-center justify-center py-16 text-center">
22
22
{/* Error Icon */}
23
23
<div className="mb-6 flex h-20 w-20 items-center justify-center rounded-2xl bg-red-50 dark:bg-red-950/20">
24
-
<AlertTriangle className="h-10 w-10 text-red-500" />
24
+
<AlertTriangle className="size-10 text-red-500" />
25
25
</div>
26
26
27
27
{/* Error Title */}
···
54
54
onClick={handleRetry}
55
55
className="inline-flex items-center justify-center gap-2 rounded-md bg-(--accent) px-6 py-3 font-medium text-[#3f2e00] text-sm transition-colors hover:bg-(--accent-hover)"
56
56
>
57
-
<RefreshCw className="h-4 w-4" />
57
+
<RefreshCw className="size-4" />
58
58
Try Again
59
59
</button>
60
60
···
62
62
to="/"
63
63
className="inline-flex items-center justify-center gap-2 rounded-md border border-(--border) bg-(--background-elevated) px-6 py-3 font-medium text-(--foreground) text-sm transition-colors hover:border-(--border-strong) hover:bg-(--background-subtle)"
64
64
>
65
-
<Home className="h-4 w-4" />
65
+
<Home className="size-4" />
66
66
Go Home
67
67
</Link>
68
68
···
71
71
onClick={() => router.history.back()}
72
72
className="inline-flex items-center justify-center gap-2 rounded-md border border-transparent px-6 py-3 font-medium text-(--foreground-muted) text-sm transition-colors hover:bg-(--background-subtle) hover:text-(--foreground)"
73
73
>
74
-
<ArrowLeft className="h-4 w-4" />
74
+
<ArrowLeft className="size-4" />
75
75
Go Back
76
76
</button>
77
77
</div>
···
105
105
to="/"
106
106
className="inline-flex items-center justify-center gap-2 rounded-md bg-(--accent) px-6 py-3 font-medium text-[#3f2e00] text-sm transition-colors hover:bg-(--accent-hover)"
107
107
>
108
-
<Home className="h-4 w-4" />
108
+
<Home className="size-4" />
109
109
Go Home
110
110
</Link>
111
111
···
114
114
onClick={() => router.history.back()}
115
115
className="inline-flex items-center justify-center gap-2 rounded-md border border-(--border) bg-(--background-elevated) px-6 py-3 font-medium text-(--foreground) text-sm transition-colors hover:border-(--border-strong) hover:bg-(--background-subtle)"
116
116
>
117
-
<ArrowLeft className="h-4 w-4" />
117
+
<ArrowLeft className="size-4" />
118
118
Go Back
119
119
</button>
120
120
</div>
+5
-5
apps/web/src/components/FeedItemActions.tsx
+5
-5
apps/web/src/components/FeedItemActions.tsx
···
140
140
if (isShelfPending) {
141
141
return (
142
142
<>
143
-
<Loader2 className="h-3.5 w-3.5 animate-spin" />
143
+
<Loader2 className="size-3.5 animate-spin" />
144
144
Loading
145
145
</>
146
146
);
···
148
148
if (isInShelf) {
149
149
return (
150
150
<>
151
-
<BookmarkCheck className="h-3.5 w-3.5" />
151
+
<BookmarkCheck className="size-3.5" />
152
152
Remove from shelf
153
153
</>
154
154
);
155
155
}
156
156
return (
157
157
<>
158
-
<Bookmark className="h-3.5 w-3.5" />
158
+
<Bookmark className="size-3.5" />
159
159
Add to shelf
160
160
</>
161
161
);
···
170
170
className="btn btn-secondary btn-sm gap-1.5"
171
171
>
172
172
{isListsLoading ? (
173
-
<Loader2 className="h-3.5 w-3.5 animate-spin" />
173
+
<Loader2 className="size-3.5 animate-spin" />
174
174
) : (
175
-
<Library className="h-3.5 w-3.5" />
175
+
<Library className="size-3.5" />
176
176
)}
177
177
{otherLists.length > 0 ? "Manage lists" : "Add to list"}
178
178
</button>
+10
-10
apps/web/src/components/Header.tsx
+10
-10
apps/web/src/components/Header.tsx
···
59
59
<nav className="flex h-16 items-center justify-between">
60
60
<Link to="/" className="flex items-center gap-2">
61
61
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-(--accent) text-[#3f2e00]">
62
-
<Film className="h-4 w-4" />
62
+
<Film className="size-4" />
63
63
</div>
64
64
<span className="font-bold font-display text-lg tracking-tight">
65
65
OpnShelf
···
85
85
<div className="flex items-center gap-2">
86
86
<Link to="/" className="flex items-center gap-2">
87
87
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-(--accent) text-[#3f2e00]">
88
-
<Film className="h-4 w-4" />
88
+
<Film className="size-4" />
89
89
</div>
90
90
<span className="font-bold font-display text-lg tracking-tight">
91
91
OpnShelf
···
140
140
className="h-full w-full object-cover"
141
141
/>
142
142
) : (
143
-
<User className="h-4 w-4 text-(--foreground-muted)" />
143
+
<User className="size-4 text-(--foreground-muted)" />
144
144
)}
145
145
</button>
146
146
</DropdownMenuTrigger>
···
154
154
className="h-full w-full rounded-full object-cover"
155
155
/>
156
156
) : (
157
-
<User className="h-4 w-4 text-(--accent)" />
157
+
<User className="size-4 text-(--accent)" />
158
158
)}
159
159
</div>
160
160
<div className="flex flex-col">
···
173
173
params={{ handle: user.handle }}
174
174
className="cursor-pointer"
175
175
>
176
-
<User className="mr-2 h-4 w-4" />
176
+
<User />
177
177
Profile
178
178
</Link>
179
179
</DropdownMenuItem>
180
180
<DropdownMenuItem asChild>
181
181
<Link to="/settings" className="cursor-pointer">
182
-
<Settings className="mr-2 h-4 w-4" />
182
+
<Settings />
183
183
Settings
184
184
</Link>
185
185
</DropdownMenuItem>
···
188
188
onClick={logout}
189
189
className="cursor-pointer text-red-600 focus:text-red-600"
190
190
>
191
-
<LogOut className="mr-2 h-4 w-4" />
191
+
<LogOut />
192
192
Sign Out
193
193
</DropdownMenuItem>
194
194
</DropdownMenuContent>
···
211
211
aria-expanded={mobileMenuOpen}
212
212
>
213
213
{mobileMenuOpen ? (
214
-
<X className="h-5 w-5" />
214
+
<X className="size-5" />
215
215
) : (
216
216
<Menu className="h-5 w-5" />
217
217
)}
···
259
259
className="h-full w-full rounded-full object-cover"
260
260
/>
261
261
) : (
262
-
<User className="h-4 w-4 text-(--accent)" />
262
+
<User className="size-4 text-(--accent)" />
263
263
)}
264
264
</div>
265
265
<div className="flex flex-col">
···
276
276
onClick={logout}
277
277
className="flex items-center gap-3 rounded-md px-3 py-3 font-medium text-red-600 text-sm transition-colors hover:bg-red-50"
278
278
>
279
-
<LogOut className="h-5 w-5" />
279
+
<LogOut className="size-5" />
280
280
Sign Out
281
281
</button>
282
282
</>
+4
-4
apps/web/src/components/InYourLists.tsx
+4
-4
apps/web/src/components/InYourLists.tsx
···
61
61
className="flex h-8 w-8 items-center justify-center rounded-md text-(--foreground-muted) transition-colors hover:bg-red-500/10 hover:text-red-500"
62
62
aria-label={`Remove from ${list.listName}`}
63
63
>
64
-
<X className="h-4 w-4" />
64
+
<X className="size-4" />
65
65
</button>
66
66
<Link
67
67
to="/profile/$handle/lists/$listSlug"
···
71
71
}}
72
72
className="flex items-center p-2"
73
73
>
74
-
<ChevronRight className="h-4 w-4 text-(--foreground-muted)" />
74
+
<ChevronRight className="size-4 text-(--foreground-muted)" />
75
75
</Link>
76
76
</div>
77
77
))
···
86
86
params={{ handle: userHandle }}
87
87
className="btn btn-secondary w-full gap-2 text-sm"
88
88
>
89
-
<Plus className="h-4 w-4" />
89
+
<Plus className="size-4" />
90
90
Create your first list
91
91
</Link>
92
92
)}
···
104
104
onClick={() => setOpen(true)}
105
105
className="btn btn-secondary mt-3 w-full text-sm"
106
106
>
107
-
<Plus className="h-4 w-4" />
107
+
<Plus className="size-4" />
108
108
Add to list
109
109
</button>
110
110
+1
-1
apps/web/src/components/LoadingState.tsx
+1
-1
apps/web/src/components/LoadingState.tsx
+8
-8
apps/web/src/components/ManageListsDialog.tsx
+8
-8
apps/web/src/components/ManageListsDialog.tsx
···
64
64
65
65
{isLoading ? (
66
66
<div className="flex items-center justify-center py-8">
67
-
<Loader2 className="h-6 w-6 animate-spin text-(--accent)" />
67
+
<Loader2 className="size-6 animate-spin text-(--accent)" />
68
68
</div>
69
69
) : (
70
70
<div className="space-y-1 py-2">
···
77
77
>
78
78
<span>Watchlist</span>
79
79
{isWatchlist ? (
80
-
<Check className="h-4 w-4 text-green-500" />
80
+
<Check className="size-4 text-green-500" />
81
81
) : (
82
-
<Plus className="h-4 w-4 text-(--foreground-muted)" />
82
+
<Plus className="size-4 text-(--foreground-muted)" />
83
83
)}
84
84
</button>
85
85
···
92
92
>
93
93
<span>Favorites</span>
94
94
{isFavorites ? (
95
-
<Check className="h-4 w-4 text-green-500" />
95
+
<Check className="size-4 text-green-500" />
96
96
) : (
97
-
<Plus className="h-4 w-4 text-(--foreground-muted)" />
97
+
<Plus className="size-4 text-(--foreground-muted)" />
98
98
)}
99
99
</button>
100
100
···
113
113
>
114
114
<span>{list.name}</span>
115
115
{list.isInList ? (
116
-
<Check className="h-4 w-4 text-green-500" />
116
+
<Check className="size-4 text-green-500" />
117
117
) : (
118
-
<Plus className="h-4 w-4 text-(--foreground-muted)" />
118
+
<Plus className="size-4 text-(--foreground-muted)" />
119
119
)}
120
120
</button>
121
121
))}
···
128
128
onClick={() => onOpenChange(false)}
129
129
className="btn btn-secondary btn-sm gap-1.5"
130
130
>
131
-
<X className="h-3.5 w-3.5" />
131
+
<X className="size-3.5" />
132
132
Close
133
133
</button>
134
134
</div>
+7
-7
apps/web/src/components/MediaActionsBar.tsx
+7
-7
apps/web/src/components/MediaActionsBar.tsx
···
58
58
>
59
59
{activeListAction === "watchlist" ? (
60
60
<>
61
-
<Loader2 className="h-4 w-4 animate-spin" />
61
+
<Loader2 className="size-4 animate-spin" />
62
62
Loading
63
63
</>
64
64
) : isInWatchlist ? (
65
65
<>
66
-
<Bookmark className="h-4 w-4 fill-current" />
66
+
<Bookmark className="size-4 fill-current" />
67
67
In Watchlist
68
68
</>
69
69
) : (
70
70
<>
71
-
<Bookmark className="h-4 w-4" />
71
+
<Bookmark className="size-4" />
72
72
Add to Watchlist
73
73
</>
74
74
)}
···
89
89
}
90
90
>
91
91
{activeListAction === "favorites" ? (
92
-
<Loader2 className="h-5 w-5 animate-spin" />
92
+
<Loader2 className="size-5 animate-spin" />
93
93
) : (
94
-
<Heart className={`h-5 w-5 ${isInFavorites ? "fill-current" : ""}`} />
94
+
<Heart className={`size-5 ${isInFavorites ? "fill-current" : ""}`} />
95
95
)}
96
96
</button>
97
97
···
103
103
aria-label={shareSuccess ? "Copied to clipboard" : "Share"}
104
104
>
105
105
{shareSuccess ? (
106
-
<Check className="h-5 w-5 text-green-500" />
106
+
<Check className="size-5 text-green-500" />
107
107
) : (
108
-
<Share2 className="h-5 w-5" />
108
+
<Share2 className="size-5" />
109
109
)}
110
110
</button>
111
111
</>
+12
-12
apps/web/src/components/MediaCard.tsx
+12
-12
apps/web/src/components/MediaCard.tsx
···
146
146
<div className="text-center">
147
147
<div className="mx-auto mb-2 flex h-12 w-12 items-center justify-center rounded-full bg-(--background-strong)">
148
148
{type === "movie" ? (
149
-
<Play className="h-5 w-5 text-(--foreground-muted)" />
149
+
<Play className="size-5 text-(--foreground-muted)" />
150
150
) : (
151
-
<Clock className="h-5 w-5 text-(--foreground-muted)" />
151
+
<Clock className="size-5 text-(--foreground-muted)" />
152
152
)}
153
153
</div>
154
154
<p className="px-2 text-(--foreground-muted) text-xs">
···
201
201
title={isWatched ? "Remove from shelf" : "Add to shelf"}
202
202
>
203
203
{isMarkWatchedPending || isUnmarkWatchedPending ? (
204
-
<Loader2 className="h-3.5 w-3.5 animate-spin" />
204
+
<Loader2 className="size-3.5 animate-spin" />
205
205
) : (
206
-
<Check className="h-3.5 w-3.5" />
206
+
<Check className="size-3.5" />
207
207
)}
208
208
</button>
209
209
)}
···
218
218
aria-label="Manage lists"
219
219
title="Add to list"
220
220
>
221
-
<Library className="h-3.5 w-3.5" />
221
+
<Library className="size-3.5" />
222
222
</button>
223
223
)}
224
224
{onRemove && (
···
233
233
aria-label="Remove from list"
234
234
>
235
235
{isRemoving ? (
236
-
<Loader2 className="h-3.5 w-3.5 animate-spin" />
236
+
<Loader2 className="size-3.5 animate-spin" />
237
237
) : (
238
-
<BookmarkX className="h-3.5 w-3.5" />
238
+
<BookmarkX className="size-3.5" />
239
239
)}
240
240
</button>
241
241
)}
···
243
243
{/* Static watched indicator (no interactive callback) */}
244
244
{isWatched && !onMarkWatched && !onUnmarkWatched && (
245
245
<div className="flex h-6 w-6 items-center justify-center self-end rounded-full bg-green-500 text-white">
246
-
<Check className="h-3.5 w-3.5" />
246
+
<Check className="size-3.5" />
247
247
</div>
248
248
)}
249
249
</div>
···
271
271
className="flex h-10 w-10 items-center justify-center rounded-full bg-white text-black transition-transform hover:scale-110"
272
272
aria-label="Watch"
273
273
>
274
-
<Play className="h-5 w-5 fill-current" />
274
+
<Play className="size-5 fill-current" />
275
275
</button>
276
276
</div>
277
277
)}
···
287
287
)}
288
288
{watchedDate && (
289
289
<p className="mt-1 flex items-center gap-1 text-white/50 text-xs">
290
-
<Clock className="h-3 w-3" />
290
+
<Clock className="size-3" />
291
291
{watchedDate}
292
292
</p>
293
293
)}
···
329
329
<>
330
330
<span>•</span>
331
331
<span className="flex items-center gap-1">
332
-
<Star className="h-3 w-3 fill-current text-yellow-500" />
332
+
<Star className="size-3 fill-current text-yellow-500" />
333
333
{rating.toFixed(1)}
334
334
</span>
335
335
</>
···
343
343
</div>
344
344
{watchedDate && (
345
345
<p className="flex items-center gap-1 text-(--foreground-muted) text-xs">
346
-
<Clock className="h-3 w-3" />
346
+
<Clock className="size-3" />
347
347
{watchedDate}
348
348
</p>
349
349
)}
+2
-2
apps/web/src/components/MediaHero.tsx
+2
-2
apps/web/src/components/MediaHero.tsx
···
63
63
to={crumb.to}
64
64
className="inline-flex items-center gap-1 text-(--foreground-muted) transition-colors hover:text-(--foreground)"
65
65
>
66
-
{index === 0 && <ChevronLeft className="h-4 w-4" />}
66
+
{index === 0 && <ChevronLeft className="size-4" />}
67
67
{crumb.label}
68
68
</Link>
69
69
)}
···
72
72
</nav>
73
73
) : (
74
74
<Link to="/" className="btn btn-secondary mb-6 inline-flex gap-2">
75
-
<ChevronLeft className="h-4 w-4" />
75
+
<ChevronLeft className="size-4" />
76
76
Back to Dashboard
77
77
</Link>
78
78
)}
+4
-4
apps/web/src/components/ProgressCard.tsx
+4
-4
apps/web/src/components/ProgressCard.tsx
···
65
65
>
66
66
{isUnmarkPending || processing ? (
67
67
<>
68
-
<Loader2 className="h-4 w-4 animate-spin" />
68
+
<Loader2 className="size-4 animate-spin" />
69
69
Loading
70
70
</>
71
71
) : (
72
72
<>
73
-
<X className="h-4 w-4" />
73
+
<X className="size-4" />
74
74
{unmarkLabel}
75
75
</>
76
76
)}
···
84
84
>
85
85
{isMarkPending || processing ? (
86
86
<>
87
-
<Loader2 className="h-4 w-4 animate-spin" />
87
+
<Loader2 className="size-4 animate-spin" />
88
88
Loading
89
89
</>
90
90
) : (
91
91
<>
92
-
<Check className="h-4 w-4" />
92
+
<Check className="size-4" />
93
93
{markLabel}
94
94
</>
95
95
)}
+20
-20
apps/web/src/components/SearchCommand.tsx
+20
-20
apps/web/src/components/SearchCommand.tsx
···
239
239
className="group flex h-9 items-center gap-2 rounded-md border border-(--border) bg-(--background-elevated) px-3 text-(--foreground-muted) transition-colors hover:border-(--border-strong) hover:bg-(--background-subtle) hover:text-(--foreground)"
240
240
aria-label="Search"
241
241
>
242
-
<Search className="h-4 w-4" />
242
+
<Search className="size-4" />
243
243
<span className="hidden text-sm sm:inline">Search</span>
244
244
<kbd className="ml-1 hidden h-5 select-none items-center gap-0.5 rounded border border-(--border-strong) bg-(--background-subtle) px-1.5 font-medium font-mono text-(--foreground-muted) text-[10px] sm:flex">
245
245
<span>⌘</span>K
···
260
260
{/* Loading */}
261
261
{hasSearchQuery && isLoading && (
262
262
<div className="flex items-center justify-center py-8 text-(--foreground-muted)">
263
-
<Loader2 className="mr-2 h-5 w-5 animate-spin" />
263
+
<Loader2 className="mr-2 size-5 animate-spin" />
264
264
<span>Searching...</span>
265
265
</div>
266
266
)}
···
276
276
{/* Empty state */}
277
277
{hasSearchQuery && !isLoading && !hasError && !hasSearchResults && (
278
278
<div className="flex flex-col items-center gap-2 py-6 text-(--foreground-muted)">
279
-
<Search className="h-8 w-8 opacity-50" />
279
+
<Search className="size-8 opacity-50" />
280
280
<p>No results found for "{debouncedQuery}"</p>
281
281
<p className="text-sm">
282
282
Try searching for movies, TV shows, or people
···
300
300
value={`movie ${title} ${getYear(movie)}`}
301
301
onSelect={() => goTo(buildMovieUrl(movie.id, title))}
302
302
>
303
-
<Film className="h-4 w-4 shrink-0" />
303
+
<Film className="shrink-0" />
304
304
<span className="truncate">{title}</span>
305
305
{getYear(movie) && (
306
306
<span className="shrink-0 text-(--foreground-muted)">
···
309
309
)}
310
310
<CommandShortcut>
311
311
<span className="flex items-center gap-1">
312
-
<Star className="h-3 w-3" />
312
+
<Star />
313
313
{movie.vote_average?.toFixed(1) || "N/A"}
314
314
</span>
315
315
</CommandShortcut>
···
321
321
value="more movies"
322
322
onSelect={() => goToSearch("movies")}
323
323
>
324
-
<Search className="h-4 w-4" />
324
+
<Search />
325
325
<span>Show more results</span>
326
326
</CommandItem>
327
327
)}
···
341
341
value={`show ${title} ${getYear(show)}`}
342
342
onSelect={() => goTo(buildShowUrl(show.id, title))}
343
343
>
344
-
<Tv className="h-4 w-4 shrink-0" />
344
+
<Tv className="shrink-0" />
345
345
<span className="truncate">{title}</span>
346
346
{getYear(show) && (
347
347
<span className="shrink-0 text-(--foreground-muted)">
···
350
350
)}
351
351
<CommandShortcut>
352
352
<span className="flex items-center gap-1">
353
-
<Star className="h-3 w-3" />
353
+
<Star />
354
354
{show.vote_average?.toFixed(1) || "N/A"}
355
355
</span>
356
356
</CommandShortcut>
···
362
362
value="more shows"
363
363
onSelect={() => goToSearch("shows")}
364
364
>
365
-
<Search className="h-4 w-4" />
365
+
<Search />
366
366
<span>Show more results</span>
367
367
</CommandItem>
368
368
)}
···
390
390
})
391
391
}
392
392
>
393
-
<User className="h-4 w-4 shrink-0" />
393
+
<User className="shrink-0" />
394
394
<span className="truncate">{name}</span>
395
395
{person.handle && (
396
396
<span className="shrink-0 text-(--foreground-muted)">
···
405
405
value="more people"
406
406
onSelect={() => goToSearch("people")}
407
407
>
408
-
<Search className="h-4 w-4" />
408
+
<Search />
409
409
<span>Show more results</span>
410
410
</CommandItem>
411
411
)}
···
421
421
value="dashboard"
422
422
onSelect={() => goTo("/dashboard")}
423
423
>
424
-
<Home className="h-4 w-4" />
424
+
<Home />
425
425
<span>Dashboard</span>
426
426
</CommandItem>
427
427
<CommandItem value="calendar" onSelect={() => goTo("/calendar")}>
428
-
<Calendar className="h-4 w-4" />
428
+
<Calendar />
429
429
<span>Calendar</span>
430
430
</CommandItem>
431
431
<CommandItem
432
432
value="following"
433
433
onSelect={() => goTo("/following")}
434
434
>
435
-
<Users className="h-4 w-4" />
435
+
<Users />
436
436
<span>Following</span>
437
437
</CommandItem>
438
438
{currentUserHandle && (
···
444
444
})
445
445
}
446
446
>
447
-
<Clock className="h-4 w-4" />
447
+
<Clock />
448
448
<span>Up Next</span>
449
449
</CommandItem>
450
450
)}
···
457
457
})
458
458
}
459
459
>
460
-
<User className="h-4 w-4" />
460
+
<User />
461
461
<span>Profile</span>
462
462
</CommandItem>
463
463
)}
···
470
470
})
471
471
}
472
472
>
473
-
<List className="h-4 w-4" />
473
+
<List />
474
474
<span>Lists</span>
475
475
</CommandItem>
476
476
)}
···
495
495
})
496
496
}
497
497
>
498
-
<List className="h-4 w-4" />
498
+
<List />
499
499
<span>{list.name}</span>
500
500
<CommandShortcut>{list.itemCount} items</CommandShortcut>
501
501
</CommandItem>
···
508
508
<CommandSeparator />
509
509
<CommandGroup heading="Quick Actions">
510
510
<CommandItem value="settings" onSelect={() => goTo("/settings")}>
511
-
<Settings className="h-4 w-4" />
511
+
<Settings />
512
512
<span>Settings</span>
513
513
</CommandItem>
514
514
<CommandItem
···
528
528
logout();
529
529
}}
530
530
>
531
-
<LogOut className="h-4 w-4" />
531
+
<LogOut />
532
532
<span>Sign Out</span>
533
533
</CommandItem>
534
534
)}
+1
-1
apps/web/src/components/ThemeToggle.tsx
+1
-1
apps/web/src/components/ThemeToggle.tsx
···
54
54
className="flex h-9 w-9 items-center justify-center rounded-md border border-(--border) bg-(--background-elevated) text-(--foreground) transition-colors hover:border-(--border-strong) hover:bg-(--background-subtle)"
55
55
aria-label="Loading theme"
56
56
>
57
-
<Monitor className="h-4 w-4" />
57
+
<Monitor className="size-4" />
58
58
</button>
59
59
);
60
60
}
+2
-2
apps/web/src/components/TimezoneSelector.tsx
+2
-2
apps/web/src/components/TimezoneSelector.tsx
···
131
131
)}
132
132
>
133
133
<span className="truncate">{value ?? "Select timezone"}</span>
134
-
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
134
+
<ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
135
135
</button>
136
136
</PopoverTrigger>
137
137
<PopoverContent className="w-[320px] p-0" align="start">
···
153
153
<span className="truncate">{zone.label}</span>
154
154
<Check
155
155
className={cn(
156
-
"ml-auto h-4 w-4",
156
+
"ml-auto",
157
157
value === zone.value ? "opacity-100" : "opacity-0",
158
158
)}
159
159
/>
+5
-5
apps/web/src/components/YourActivity.tsx
+5
-5
apps/web/src/components/YourActivity.tsx
···
52
52
className="flex h-8 w-8 items-center justify-center rounded-md text-(--foreground-muted) transition-colors hover:bg-red-500/10 hover:text-red-500"
53
53
aria-label="Remove this play"
54
54
>
55
-
<X className="h-4 w-4" />
55
+
<X className="size-4" />
56
56
</button>
57
57
</div>
58
58
))}
···
64
64
>
65
65
{isAddPending ? (
66
66
<>
67
-
<Loader2 className="h-4 w-4 animate-spin" />
67
+
<Loader2 className="size-4 animate-spin" />
68
68
Loading
69
69
</>
70
70
) : (
71
71
<>
72
-
<Plus className="h-4 w-4" />
72
+
<Plus className="size-4" />
73
73
Add to shelf
74
74
</>
75
75
)}
···
88
88
>
89
89
{isAddPending ? (
90
90
<>
91
-
<Loader2 className="h-4 w-4 animate-spin" />
91
+
<Loader2 className="size-4 animate-spin" />
92
92
Loading
93
93
</>
94
94
) : (
95
95
<>
96
-
<Plus className="h-4 w-4" />
96
+
<Plus className="size-4" />
97
97
Add to shelf
98
98
</>
99
99
)}
+2
-2
apps/web/src/components/following/ActivityCard.tsx
+2
-2
apps/web/src/components/following/ActivityCard.tsx
···
107
107
)}
108
108
</div>
109
109
<div className="mt-0.5 flex items-center gap-1.5 text-(--foreground-muted) text-xs">
110
-
<Clock className="h-3 w-3" />
110
+
<Clock className="size-3" />
111
111
{new Date(activity.activityAt).toLocaleString("en-US", {
112
112
month: "short",
113
113
day: "numeric",
···
123
123
className="btn btn-ghost h-8 w-8 shrink-0 p-0 text-(--foreground-muted)"
124
124
aria-label="More options"
125
125
>
126
-
<MoreHorizontal className="h-4 w-4" />
126
+
<MoreHorizontal className="size-4" />
127
127
</button>
128
128
</div>
129
129
+4
-4
apps/web/src/components/following/ActivityFeed.tsx
+4
-4
apps/web/src/components/following/ActivityFeed.tsx
···
26
26
if (isLoading) {
27
27
return (
28
28
<div className="flex flex-col items-center justify-center py-12">
29
-
<Loader2 className="mb-4 h-8 w-8 animate-spin text-(--accent)" />
29
+
<Loader2 className="mb-4 size-8 animate-spin text-(--accent)" />
30
30
<p className="text-(--foreground-muted)">Loading activity...</p>
31
31
</div>
32
32
);
···
35
35
if (error) {
36
36
return (
37
37
<div className="flex flex-col items-center justify-center py-12 text-(--foreground-muted)">
38
-
<Activity className="mb-4 h-12 w-12 opacity-50" />
38
+
<Activity className="mb-4 size-12 opacity-50" />
39
39
<p>Failed to load activity feed</p>
40
40
<button
41
41
type="button"
···
55
55
if (activities.length === 0) {
56
56
return (
57
57
<div className="flex flex-col items-center justify-center py-12 text-(--foreground-muted)">
58
-
<Activity className="mb-4 h-12 w-12 opacity-50" />
58
+
<Activity className="mb-4 size-12 opacity-50" />
59
59
<p className="mb-2 font-medium text-lg">No activity yet</p>
60
60
<p className="text-sm">
61
61
Follow people to see what they're watching
62
62
</p>
63
63
{followingCount === 0 && (
64
64
<Link to={"/following" as const} className="btn btn-primary mt-4">
65
-
<UserPlus className="mr-2 h-4 w-4" />
65
+
<UserPlus className="mr-2 size-4" />
66
66
Find people to follow
67
67
</Link>
68
68
)}
+1
-1
apps/web/src/components/following/FollowingHeader.tsx
+1
-1
apps/web/src/components/following/FollowingHeader.tsx
···
5
5
<div className="mb-8">
6
6
<div className="mb-2 flex items-center gap-3">
7
7
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-(--accent-subtle) text-(--accent)">
8
-
<Users className="h-5 w-5" />
8
+
<Users className="size-5" />
9
9
</div>
10
10
<h1 className="text-display-2">Following</h1>
11
11
</div>
+4
-4
apps/web/src/components/following/FollowingList.tsx
+4
-4
apps/web/src/components/following/FollowingList.tsx
···
24
24
</h3>
25
25
{isLoading ? (
26
26
<div className="flex items-center justify-center py-4">
27
-
<Loader2 className="h-6 w-6 animate-spin text-(--accent)" />
27
+
<Loader2 className="size-6 animate-spin text-(--accent)" />
28
28
</div>
29
29
) : error ? (
30
30
<div className="py-4 text-center text-(--foreground-muted)">
···
32
32
</div>
33
33
) : following.length === 0 ? (
34
34
<div className="py-4 text-center text-(--foreground-muted)">
35
-
<UserX className="mx-auto mb-2 h-8 w-8 opacity-50" />
35
+
<UserX className="mx-auto mb-2 size-8 opacity-50" />
36
36
<p className="text-sm">You're not following anyone yet</p>
37
37
</div>
38
38
) : (
···
59
59
title="Unfollow"
60
60
>
61
61
{pendingUnfollowDid === friend.did ? (
62
-
<Loader2 className="h-3 w-3 animate-spin" />
62
+
<Loader2 className="size-3 animate-spin" />
63
63
) : (
64
-
<UserCheck className="h-3 w-3" />
64
+
<UserCheck className="size-3" />
65
65
)}
66
66
</button>
67
67
</div>
+3
-3
apps/web/src/components/following/FriendsActivitySection.tsx
+3
-3
apps/web/src/components/following/FriendsActivitySection.tsx
···
24
24
to="/following"
25
25
className="flex items-center gap-1 font-medium text-(--accent) text-sm hover:text-(--accent-hover)"
26
26
>
27
-
<Users className="h-4 w-4" />
27
+
<Users className="size-4" />
28
28
View all
29
29
</Link>
30
30
</div>
···
56
56
</div>
57
57
) : (
58
58
<div className="card p-8 text-center">
59
-
<MessageCircle className="mx-auto mb-3 h-12 w-12 text-(--foreground-muted)" />
59
+
<MessageCircle className="mx-auto mb-3 size-12 text-(--foreground-muted)" />
60
60
<p className="text-(--foreground-muted)">
61
61
Activity from people you follow will appear here.
62
62
</p>
63
63
<Link to="/following" className="btn btn-primary mt-4 inline-flex">
64
-
<Users className="mr-2 h-4 w-4" />
64
+
<Users className="mr-2 size-4" />
65
65
Find people to follow
66
66
</Link>
67
67
</div>
+1
-1
apps/web/src/components/following/MiniActivityCard.tsx
+1
-1
apps/web/src/components/following/MiniActivityCard.tsx
+5
-5
apps/web/src/components/following/PeopleSearch.tsx
+5
-5
apps/web/src/components/following/PeopleSearch.tsx
···
33
33
<div className="relative">
34
34
<div className="flex gap-3">
35
35
<div className="relative flex-1">
36
-
<Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-(--foreground-muted)" />
36
+
<Search className="absolute top-1/2 left-3 size-4 -translate-y-1/2 text-(--foreground-muted)" />
37
37
<input
38
38
type="text"
39
39
placeholder="Find people to follow..."
···
44
44
onBlur={onBlur}
45
45
/>
46
46
{isLoading && (
47
-
<Loader2 className="absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2 animate-spin text-(--foreground-muted)" />
47
+
<Loader2 className="absolute top-1/2 right-3 size-4 -translate-y-1/2 animate-spin text-(--foreground-muted)" />
48
48
)}
49
49
</div>
50
50
</div>
···
82
82
disabled={pendingUnfollowDid === person.did}
83
83
>
84
84
{pendingUnfollowDid === person.did ? (
85
-
<Loader2 className="h-3 w-3 animate-spin" />
85
+
<Loader2 className="size-3 animate-spin" />
86
86
) : (
87
87
"Unfollow"
88
88
)}
···
95
95
disabled={pendingFollowDid === person.did}
96
96
>
97
97
{pendingFollowDid === person.did ? (
98
-
<Loader2 className="h-3 w-3 animate-spin" />
98
+
<Loader2 className="size-3 animate-spin" />
99
99
) : (
100
100
<>
101
-
<UserPlus className="mr-1 h-3 w-3" />
101
+
<UserPlus className="mr-1 size-3" />
102
102
Follow
103
103
</>
104
104
)}
+18
-15
apps/web/src/components/profile/ProfileListsPage.tsx
+18
-15
apps/web/src/components/profile/ProfileListsPage.tsx
···
257
257
return (
258
258
<div className="py-8">
259
259
<div className="flex h-64 items-center justify-center">
260
-
<Loader2 className="h-8 w-8 animate-spin text-(--accent)" />
260
+
<Loader2 className="size-8 animate-spin text-(--accent)" />
261
261
<span className="ml-2 text-(--foreground-muted)">
262
262
Loading lists...
263
263
</span>
···
271
271
return (
272
272
<div className="py-8">
273
273
<div className="flex h-64 flex-col items-center justify-center gap-4">
274
-
<AlertCircle className="h-12 w-12 text-red-500" />
274
+
<AlertCircle className="size-12 text-red-500" />
275
275
<div className="text-center">
276
276
<h3 className="font-semibold text-(--foreground)">
277
277
Failed to load lists
···
297
297
<div className="mb-8 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
298
298
<div className="flex items-center gap-3">
299
299
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-(--accent-subtle) text-(--accent)">
300
-
<List className="h-5 w-5" />
300
+
<List className="size-5" />
301
301
</div>
302
302
<div>
303
303
<h1 className="text-display-2">Lists</h1>
···
310
310
311
311
<div className="flex h-96 flex-col items-center justify-center rounded-xl border-(--border) border-2 border-dashed">
312
312
<div className="flex h-16 w-16 items-center justify-center rounded-full bg-(--background-subtle)">
313
-
<List className="h-8 w-8 text-(--foreground-subtle)" />
313
+
<List className="size-8 text-(--foreground-subtle)" />
314
314
</div>
315
315
<h3 className="mt-4 font-display font-semibold text-lg">
316
316
No lists yet
···
329
329
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
330
330
<div className="flex items-center gap-3">
331
331
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-(--accent-subtle) text-(--accent)">
332
-
<List className="h-5 w-5" />
332
+
<List className="size-5" />
333
333
</div>
334
334
<div>
335
335
<h1 className="text-display-2">Lists</h1>
···
345
345
onClick={() => setShowCreateModal(true)}
346
346
className="btn btn-primary gap-2"
347
347
>
348
-
<Plus className="h-4 w-4" />
348
+
<Plus className="size-4" />
349
349
Create List
350
350
</button>
351
351
)}
···
426
426
<div className="flex items-center gap-2">
427
427
{/* Search */}
428
428
<div className="relative">
429
-
<Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-(--foreground-muted)" />
429
+
<Search className="absolute top-1/2 left-3 size-4 -translate-y-1/2 text-(--foreground-muted)" />
430
430
<input
431
431
type="text"
432
432
placeholder="Search list..."
···
469
469
{/* Loading State for List Items */}
470
470
{listLoading && (
471
471
<div className="flex h-64 items-center justify-center">
472
-
<Loader2 className="h-8 w-8 animate-spin text-(--accent)" />
472
+
<Loader2 className="size-8 animate-spin text-(--accent)" />
473
473
<span className="ml-2 text-(--foreground-muted)">
474
474
Loading items...
475
475
</span>
···
479
479
{/* Error State for List Items */}
480
480
{listError && !listLoading && (
481
481
<div className="flex h-64 flex-col items-center justify-center gap-4">
482
-
<AlertCircle className="h-12 w-12 text-red-500" />
482
+
<AlertCircle className="size-12 text-red-500" />
483
483
<div className="text-center">
484
484
<h3 className="font-semibold text-(--foreground)">
485
485
Failed to load list items
···
503
503
{!listLoading && !listError && filteredItems.length === 0 && (
504
504
<div className="flex h-64 flex-col items-center justify-center rounded-xl border-(--border) border-2 border-dashed">
505
505
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-(--background-subtle)">
506
-
<List className="h-6 w-6 text-(--foreground-subtle)" />
506
+
<List className="size-6 text-(--foreground-subtle)" />
507
507
</div>
508
508
<h3 className="mt-3 font-display font-semibold">
509
509
{searchQuery ? "No results found" : "List is empty"}
···
621
621
)}
622
622
{getRating(item.media) && (
623
623
<span className="flex items-center gap-1 text-(--foreground-subtle) text-sm">
624
-
<Star className="h-3 w-3 fill-current text-yellow-500" />
624
+
<Star className="size-3 fill-current text-yellow-500" />
625
625
{getRating(item.media)?.toFixed(1)}
626
626
</span>
627
627
)}
···
659
659
{removeItemMutation.isPending &&
660
660
removeItemMutation.variables?.path?.mediaId ===
661
661
item.mediaId ? (
662
-
<Loader2 className="h-4 w-4 animate-spin" />
662
+
<Loader2 className="size-4 animate-spin" />
663
663
) : (
664
-
<BookmarkX className="h-4 w-4" />
664
+
<BookmarkX className="size-4" />
665
665
)}
666
666
</button>
667
667
)}
···
673
673
) : (
674
674
<div className="flex h-96 flex-col items-center justify-center rounded-xl border-(--border) border-2 border-dashed">
675
675
<div className="flex h-16 w-16 items-center justify-center rounded-full bg-(--background-subtle)">
676
-
<List className="h-8 w-8 text-(--foreground-subtle)" />
676
+
<List className="size-8 text-(--foreground-subtle)" />
677
677
</div>
678
678
<h3 className="mt-4 font-display font-semibold text-lg">
679
679
Select a list
···
739
739
>
740
740
{createListMutation.isPending ? (
741
741
<>
742
-
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
742
+
<Loader2
743
+
data-icon="inline-start"
744
+
className="animate-spin"
745
+
/>
743
746
Creating...
744
747
</>
745
748
) : (
+1
-1
apps/web/src/components/shows/EpisodeList.tsx
+1
-1
apps/web/src/components/shows/EpisodeList.tsx
+4
-4
apps/web/src/components/shows/EpisodeRow.tsx
+4
-4
apps/web/src/components/shows/EpisodeRow.tsx
···
107
107
>
108
108
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-(--background-subtle) font-semibold text-sm">
109
109
{isWatched ? (
110
-
<Check className="h-5 w-5 text-green-500" />
110
+
<Check className="size-5 text-green-500" />
111
111
) : (
112
112
episode.episode_number
113
113
)}
···
133
133
>
134
134
{isUnmarking ? (
135
135
<>
136
-
<Loader2 className="h-3 w-3 animate-spin" />
136
+
<Loader2 className="size-3 animate-spin" />
137
137
Loading
138
138
</>
139
139
) : (
140
140
<>
141
-
<Check className="h-3.5 w-3.5" />
141
+
<Check className="size-3.5" />
142
142
On shelf
143
143
</>
144
144
)}
···
157
157
>
158
158
{isProcessing ? (
159
159
<>
160
-
<Loader2 className="h-3 w-3 animate-spin" />
160
+
<Loader2 className="size-3 animate-spin" />
161
161
Loading
162
162
</>
163
163
) : (
+4
-4
apps/web/src/components/shows/SeasonAccordion.tsx
+4
-4
apps/web/src/components/shows/SeasonAccordion.tsx
···
70
70
>
71
71
{isProcessingSeason ? (
72
72
<>
73
-
<Loader2 className="h-3.5 w-3.5 animate-spin" />
73
+
<Loader2 className="size-3.5 animate-spin" />
74
74
Loading
75
75
</>
76
76
) : (
77
77
<>
78
-
<Check className="h-3.5 w-3.5" />
78
+
<Check className="size-3.5" />
79
79
On shelf
80
80
</>
81
81
)}
···
93
93
>
94
94
{isProcessingSeason ? (
95
95
<>
96
-
<Loader2 className="h-3.5 w-3.5 animate-spin" />
96
+
<Loader2 className="size-3.5 animate-spin" />
97
97
Loading
98
98
</>
99
99
) : (
100
100
<>
101
-
<Eye className="h-3.5 w-3.5" />
101
+
<Eye className="size-3.5" />
102
102
Add to shelf
103
103
</>
104
104
)}
+3
-3
apps/web/src/routes/auth/complete.tsx
+3
-3
apps/web/src/routes/auth/complete.tsx
···
61
61
<div className="w-full max-w-md text-center">
62
62
{status === "loading" && (
63
63
<>
64
-
<Loader2 className="mx-auto h-16 w-16 animate-spin text-(--accent)" />
64
+
<Loader2 className="mx-auto size-16 animate-spin text-(--accent)" />
65
65
<h1 className="mt-6 text-display-3">Completing Sign In...</h1>
66
66
<p className="mt-2 text-(--foreground-muted)">
67
67
Please wait while we verify your account.
···
71
71
72
72
{status === "success" && (
73
73
<>
74
-
<CheckCircle className="mx-auto h-16 w-16 text-green-500" />
74
+
<CheckCircle className="mx-auto size-16 text-green-500" />
75
75
<h1 className="mt-6 text-display-3">Welcome!</h1>
76
76
<p className="mt-2 text-(--foreground-muted)">
77
77
You're signed in. Redirecting to your dashboard...
···
81
81
82
82
{status === "error" && (
83
83
<>
84
-
<XCircle className="mx-auto h-16 w-16 text-red-500" />
84
+
<XCircle className="mx-auto size-16 text-red-500" />
85
85
<h1 className="mt-6 text-display-3">Sign In Failed</h1>
86
86
<p className="mt-2 text-(--foreground-muted)">{errorMessage}</p>
87
87
<a href="/login" className="btn btn-primary mt-6 inline-flex">
+15
-15
apps/web/src/routes/calendar.tsx
+15
-15
apps/web/src/routes/calendar.tsx
···
346
346
</p>
347
347
</div>
348
348
<div className="flex items-center justify-center py-20">
349
-
<Loader2 className="h-8 w-8 animate-spin text-(--accent)" />
349
+
<Loader2 className="size-8 animate-spin text-(--accent)" />
350
350
<span className="ml-3 text-(--foreground-muted)">
351
351
Loading calendar...
352
352
</span>
···
368
368
{/* Desktop: Calendar Navigation */}
369
369
<div className="mb-6 hidden items-center justify-between lg:flex">
370
370
<button type="button" onClick={prevMonth} className="btn btn-secondary">
371
-
<ChevronLeft className="h-4 w-4" />
371
+
<ChevronLeft className="size-4" />
372
372
Previous
373
373
</button>
374
374
···
387
387
388
388
<button type="button" onClick={nextMonth} className="btn btn-secondary">
389
389
Next
390
-
<ChevronRight className="h-4 w-4" />
390
+
<ChevronRight className="size-4" />
391
391
</button>
392
392
</div>
393
393
···
399
399
className="btn btn-secondary h-12 w-12 p-0"
400
400
aria-label="Previous week"
401
401
>
402
-
<ChevronLeft className="h-6 w-6" />
402
+
<ChevronLeft className="size-6" />
403
403
</button>
404
404
405
405
<div className="flex flex-col items-center px-4">
···
421
421
className="btn btn-secondary h-12 w-12 p-0"
422
422
aria-label="Next week"
423
423
>
424
-
<ChevronRight className="h-6 w-6" />
424
+
<ChevronRight className="size-6" />
425
425
</button>
426
426
</div>
427
427
···
462
462
) : (
463
463
<div className="flex h-24 w-16 shrink-0 items-center justify-center rounded bg-(--background-subtle)">
464
464
{getReleaseType(release) === "movie" ? (
465
-
<Film className="h-10 w-10 text-(--foreground-muted)" />
465
+
<Film className="size-10 text-(--foreground-muted)" />
466
466
) : (
467
-
<Tv className="h-10 w-10 text-(--foreground-muted)" />
467
+
<Tv className="size-10 text-(--foreground-muted)" />
468
468
)}
469
469
</div>
470
470
)}
···
479
479
<span className="flex items-center gap-1">
480
480
{getReleaseType(release) === "movie" ? (
481
481
<>
482
-
<Film className="h-4 w-4" />
482
+
<Film className="size-4" />
483
483
Movie
484
484
</>
485
485
) : (
486
486
<>
487
-
<Tv className="h-4 w-4" />
487
+
<Tv className="size-4" />
488
488
TV
489
489
</>
490
490
)}
491
491
</span>
492
492
</div>
493
493
</div>
494
-
<ChevronRight className="h-6 w-6 shrink-0 text-(--foreground-muted)" />
494
+
<ChevronRight className="size-6 shrink-0 text-(--foreground-muted)" />
495
495
</Link>
496
496
))}
497
497
</div>
···
630
630
<div className="card p-6 text-center">
631
631
{selectedWeekStart ? (
632
632
<>
633
-
<Clock className="mx-auto mb-3 h-8 w-8 text-(--foreground-muted)" />
633
+
<Clock className="mx-auto mb-3 size-8 text-(--foreground-muted)" />
634
634
<p className="text-(--foreground-muted)">
635
635
No releases this week
636
636
</p>
···
661
661
) : (
662
662
<div className="flex h-16 w-12 items-center justify-center rounded bg-(--background-subtle)">
663
663
{getReleaseType(release) === "movie" ? (
664
-
<Film className="h-6 w-6 text-(--foreground-muted)" />
664
+
<Film className="size-6 text-(--foreground-muted)" />
665
665
) : (
666
-
<Tv className="h-6 w-6 text-(--foreground-muted)" />
666
+
<Tv className="size-6 text-(--foreground-muted)" />
667
667
)}
668
668
</div>
669
669
)}
···
677
677
<div className="mt-1 flex items-center gap-2 text-(--foreground-muted) text-xs">
678
678
<span className="flex items-center gap-1">
679
679
{getReleaseType(release) === "movie" ? (
680
-
<Film className="h-3 w-3" />
680
+
<Film className="size-3" />
681
681
) : (
682
-
<Tv className="h-3 w-3" />
682
+
<Tv className="size-3" />
683
683
)}
684
684
{new Date(release.date).toLocaleDateString(
685
685
"en-US",
+9
-9
apps/web/src/routes/dashboard.tsx
+9
-9
apps/web/src/routes/dashboard.tsx
···
364
364
className="flex items-center gap-1 font-medium text-(--accent) text-sm hover:text-(--accent-hover)"
365
365
>
366
366
View all
367
-
<ChevronRight className="h-4 w-4" />
367
+
<ChevronRight className="size-4" />
368
368
</Link>
369
369
)}
370
370
</div>
···
400
400
</div>
401
401
) : (
402
402
<div className="card p-8 text-center">
403
-
<Tv className="mx-auto mb-3 h-12 w-12 text-(--foreground-muted)" />
403
+
<Tv className="mx-auto mb-3 size-12 text-(--foreground-muted)" />
404
404
<p className="mb-2 text-(--foreground-muted)">
405
405
You're all caught up!
406
406
</p>
···
412
412
onClick={() => setSearchOpen(true)}
413
413
className="btn btn-primary inline-flex gap-2"
414
414
>
415
-
<Tv className="h-4 w-4" />
415
+
<Tv className="size-4" />
416
416
Discover Shows
417
417
</button>
418
418
</div>
···
430
430
className="flex items-center gap-1 font-medium text-(--accent) text-sm hover:text-(--accent-hover)"
431
431
>
432
432
View all
433
-
<ChevronRight className="h-4 w-4" />
433
+
<ChevronRight className="size-4" />
434
434
</Link>
435
435
)}
436
436
</div>
···
487
487
onClick={() => setSearchOpen(true)}
488
488
className="btn btn-primary inline-flex gap-2"
489
489
>
490
-
<Film className="h-4 w-4" />
490
+
<Film className="size-4" />
491
491
Discover Content
492
492
</button>
493
493
</div>
···
513
513
to="/calendar"
514
514
className="flex items-center gap-1 font-medium text-(--accent) text-sm hover:text-(--accent-hover)"
515
515
>
516
-
<Calendar className="h-4 w-4" />
516
+
<Calendar className="size-4" />
517
517
Calendar
518
518
</Link>
519
519
</div>
···
536
536
</div>
537
537
) : upcomingReleases.length === 0 ? (
538
538
<div className="card p-6 text-center">
539
-
<Clock className="mx-auto mb-3 h-8 w-8 text-(--foreground-muted)" />
539
+
<Clock className="mx-auto mb-3 size-8 text-(--foreground-muted)" />
540
540
<p className="text-(--foreground-muted) text-sm">
541
541
No upcoming releases
542
542
</p>
···
578
578
) : (
579
579
<div className="flex h-12 w-9 items-center justify-center rounded bg-(--background-subtle)">
580
580
{release.mediaType === "movie" ? (
581
-
<Film className="h-5 w-5 text-(--foreground-muted)" />
581
+
<Film className="size-5 text-(--foreground-muted)" />
582
582
) : (
583
-
<Tv className="h-5 w-5 text-(--foreground-muted)" />
583
+
<Tv className="size-5 text-(--foreground-muted)" />
584
584
)}
585
585
</div>
586
586
)}
+1
-1
apps/web/src/routes/following.tsx
+1
-1
apps/web/src/routes/following.tsx
+2
-2
apps/web/src/routes/index.tsx
+2
-2
apps/web/src/routes/index.tsx
···
98
98
className="btn btn-primary inline-flex items-center gap-2 px-8 py-3 text-lg"
99
99
>
100
100
Get Started
101
-
<ArrowRight className="h-5 w-5" />
101
+
<ArrowRight className="size-5" />
102
102
</Link>
103
103
<Link
104
104
to="/about"
···
164
164
className="btn btn-primary inline-flex items-center gap-2 px-8 py-3 text-lg"
165
165
>
166
166
Sign In
167
-
<ArrowRight className="h-5 w-5" />
167
+
<ArrowRight className="size-5" />
168
168
</Link>
169
169
</div>
170
170
</div>
+3
-3
apps/web/src/routes/login.tsx
+3
-3
apps/web/src/routes/login.tsx
···
45
45
<div className="mb-8 text-center">
46
46
<div className="mb-4 flex justify-center">
47
47
<div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-(--accent) text-[#3f2e00]">
48
-
<Film className="h-8 w-8" />
48
+
<Film className="size-8" />
49
49
</div>
50
50
</div>
51
51
<h1 className="text-display-2">Welcome to OpnShelf</h1>
···
92
92
>
93
93
{isLoading ? (
94
94
<>
95
-
<Loader2 className="h-4 w-4 animate-spin" />
95
+
<Loader2 className="size-4 animate-spin" />
96
96
Connecting...
97
97
</>
98
98
) : (
99
99
<>
100
100
Sign In
101
-
<ArrowRight className="h-4 w-4" />
101
+
<ArrowRight className="size-4" />
102
102
</>
103
103
)}
104
104
</button>
+7
-7
apps/web/src/routes/movies/$movieId/$movieName.tsx
+7
-7
apps/web/src/routes/movies/$movieId/$movieName.tsx
···
147
147
metaItems={
148
148
<>
149
149
<div className="flex items-center gap-1">
150
-
<Star className="h-4 w-4 fill-yellow-500 text-yellow-500" />
150
+
<Star className="size-4 fill-yellow-500 text-yellow-500" />
151
151
<span className="font-semibold">{movie.vote_average}</span>
152
152
<span className="text-(--foreground-muted)">/10</span>
153
153
</div>
···
192
192
>
193
193
{isUnmarkMoviePending ? (
194
194
<>
195
-
<Loader2 className="h-4 w-4 animate-spin" />
195
+
<Loader2 className="size-4 animate-spin" />
196
196
Loading
197
197
</>
198
198
) : (
199
199
<>
200
-
<X className="h-4 w-4" />
200
+
<X className="size-4" />
201
201
Remove from shelf
202
202
</>
203
203
)}
···
211
211
>
212
212
{isMarkMoviePending ? (
213
213
<>
214
-
<Loader2 className="h-4 w-4 animate-spin" />
214
+
<Loader2 className="size-4 animate-spin" />
215
215
Loading
216
216
</>
217
217
) : (
218
218
<>
219
-
<Plus className="h-4 w-4" />
219
+
<Plus className="size-4" />
220
220
Add to shelf
221
221
</>
222
222
)}
···
296
296
<DialogContent>
297
297
<DialogHeader>
298
298
<DialogTitle className="flex items-center gap-2">
299
-
<AlertTriangle className="h-5 w-5 text-amber-500" />
299
+
<AlertTriangle className="size-5 text-amber-500" />
300
300
Remove all plays?
301
301
</DialogTitle>
302
302
<DialogDescription>
···
324
324
>
325
325
{isUnmarkMoviePending ? (
326
326
<>
327
-
<Loader2 className="h-4 w-4 animate-spin" />
327
+
<Loader2 className="size-4 animate-spin" />
328
328
Removing...
329
329
</>
330
330
) : (
+1
-1
apps/web/src/routes/profile.$handle.tsx
+1
-1
apps/web/src/routes/profile.$handle.tsx
+3
-3
apps/web/src/routes/profile.$handle/connections.tsx
+3
-3
apps/web/src/routes/profile.$handle/connections.tsx
···
62
62
{/* Content */}
63
63
{activeQuery.isLoading ? (
64
64
<div className="flex h-64 items-center justify-center">
65
-
<Loader2 className="h-8 w-8 animate-spin text-(--accent)" />
65
+
<Loader2 className="size-8 animate-spin text-(--accent)" />
66
66
</div>
67
67
) : !activeQuery.data || activeQuery.data.items.length === 0 ? (
68
68
<div className="card p-8 text-center">
69
-
<Users className="mx-auto mb-3 h-12 w-12 text-(--foreground-muted)" />
69
+
<Users className="mx-auto mb-3 size-12 text-(--foreground-muted)" />
70
70
<p className="text-(--foreground-muted)">
71
71
{activeTab === "followers"
72
72
? "No followers yet."
···
90
90
className="h-full w-full object-cover"
91
91
/>
92
92
) : (
93
-
<Users className="h-5 w-5 text-(--foreground-muted)" />
93
+
<Users className="size-5 text-(--foreground-muted)" />
94
94
)}
95
95
</div>
96
96
<div className="min-w-0 flex-1">
+5
-5
apps/web/src/routes/profile.$handle/index.tsx
+5
-5
apps/web/src/routes/profile.$handle/index.tsx
···
103
103
<section>
104
104
<div className="mb-4 flex items-center justify-between">
105
105
<h2 className="flex items-center gap-2 text-display-3">
106
-
<Film className="h-5 w-5 text-(--accent)" />
106
+
<Film className="size-5 text-(--accent)" />
107
107
Recent Movies
108
108
</h2>
109
109
<Link
···
113
113
className="flex items-center gap-1 font-medium text-(--accent) text-sm hover:text-(--accent-hover)"
114
114
>
115
115
View all
116
-
<ChevronRight className="h-4 w-4" />
116
+
<ChevronRight className="size-4" />
117
117
</Link>
118
118
</div>
119
119
···
155
155
<section>
156
156
<div className="mb-4 flex items-center justify-between">
157
157
<h2 className="flex items-center gap-2 text-display-3">
158
-
<Tv className="h-5 w-5 text-(--accent)" />
158
+
<Tv className="size-5 text-(--accent)" />
159
159
Recent Episodes
160
160
</h2>
161
161
<Link
···
165
165
className="flex items-center gap-1 font-medium text-(--accent) text-sm hover:text-(--accent-hover)"
166
166
>
167
167
View all
168
-
<ChevronRight className="h-4 w-4" />
168
+
<ChevronRight className="size-4" />
169
169
</Link>
170
170
</div>
171
171
···
298
298
className="flex items-center gap-1 font-medium text-(--accent) text-sm hover:text-(--accent-hover)"
299
299
>
300
300
View all
301
-
<ChevronRight className="h-4 w-4" />
301
+
<ChevronRight className="size-4" />
302
302
</Link>
303
303
)}
304
304
</div>
+5
-5
apps/web/src/routes/profile.$handle/shelf.tsx
+5
-5
apps/web/src/routes/profile.$handle/shelf.tsx
···
113
113
<div className="flex items-center gap-3">
114
114
{/* Search */}
115
115
<div className="relative">
116
-
<Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-(--foreground-muted)" />
116
+
<Search className="absolute top-1/2 left-3 size-4 -translate-y-1/2 text-(--foreground-muted)" />
117
117
<input
118
118
type="text"
119
119
placeholder="Search shelf..."
···
340
340
) : (
341
341
<div className="flex h-full w-full items-center justify-center">
342
342
{isMovie ? (
343
-
<Film className="h-4 w-4 text-(--foreground-muted)" />
343
+
<Film className="size-4 text-(--foreground-muted)" />
344
344
) : (
345
-
<Tv className="h-4 w-4 text-(--foreground-muted)" />
345
+
<Tv className="size-4 text-(--foreground-muted)" />
346
346
)}
347
347
</div>
348
348
)}
···
374
374
aria-label="Remove from shelf"
375
375
>
376
376
{isRemoving ? (
377
-
<Loader2 className="h-4 w-4 animate-spin" />
377
+
<Loader2 className="size-4 animate-spin" />
378
378
) : (
379
-
<BookmarkX className="h-4 w-4" />
379
+
<BookmarkX className="size-4" />
380
380
)}
381
381
</button>
382
382
)}
+5
-5
apps/web/src/routes/profile.$handle/up-next.tsx
+5
-5
apps/web/src/routes/profile.$handle/up-next.tsx
···
91
91
</div>
92
92
) : items.length === 0 ? (
93
93
<div className="card p-8 text-center">
94
-
<Tv className="mx-auto mb-3 h-12 w-12 text-(--foreground-muted)" />
94
+
<Tv className="mx-auto mb-3 size-12 text-(--foreground-muted)" />
95
95
<p className="text-(--foreground-muted)">
96
96
{displayName} is all caught up!
97
97
</p>
···
133
133
/>
134
134
) : (
135
135
<div className="flex h-full w-full items-center justify-center">
136
-
<Tv className="h-8 w-8 text-(--foreground-muted)" />
136
+
<Tv className="size-8 text-(--foreground-muted)" />
137
137
</div>
138
138
)}
139
139
</div>
···
165
165
166
166
{nextEp.airDate && (
167
167
<div className="mt-2 flex items-center gap-2 text-(--foreground-muted) text-sm">
168
-
<Calendar className="h-4 w-4" />
168
+
<Calendar className="size-4" />
169
169
<span>{formatDate(nextEp.airDate)}</span>
170
170
<span className="text-(--accent)">
171
171
• {formatRelativeDate(nextEp.airDate)}
···
212
212
className="btn btn-primary gap-2 text-sm"
213
213
>
214
214
{markEpisodeMutation.isPending ? (
215
-
<Loader2 className="h-4 w-4 animate-spin" />
215
+
<Loader2 className="size-4 animate-spin" />
216
216
) : (
217
-
<Check className="h-4 w-4" />
217
+
<Check className="size-4" />
218
218
)}
219
219
Mark watched
220
220
</button>
+10
-10
apps/web/src/routes/search.tsx
+10
-10
apps/web/src/routes/search.tsx
···
212
212
<div className="mx-auto mb-8 max-w-2xl">
213
213
<h1 className="mb-4 text-center text-display-2">Search</h1>
214
214
<div className="relative">
215
-
<Search className="absolute top-1/2 left-4 h-5 w-5 -translate-y-1/2 text-(--foreground-muted)" />
215
+
<Search className="absolute top-1/2 left-4 size-5 -translate-y-1/2 text-(--foreground-muted)" />
216
216
<input
217
217
type="text"
218
218
placeholder="Search movies, shows, people..."
···
221
221
onChange={(e) => setQuery(e.target.value)}
222
222
/>
223
223
{isLoading && (
224
-
<Loader2 className="absolute top-1/2 right-4 h-5 w-5 -translate-y-1/2 animate-spin text-(--foreground-muted)" />
224
+
<Loader2 className="absolute top-1/2 right-4 size-5 -translate-y-1/2 animate-spin text-(--foreground-muted)" />
225
225
)}
226
226
</div>
227
227
</div>
···
253
253
{hasQuery ? (
254
254
isLoading ? (
255
255
<div className="flex flex-col items-center justify-center py-20 text-(--foreground-muted)">
256
-
<Loader2 className="mb-4 h-10 w-10 animate-spin" />
256
+
<Loader2 className="mb-4 size-10 animate-spin" />
257
257
<p>Searching...</p>
258
258
</div>
259
259
) : !hasResults ? (
260
260
<div className="flex flex-col items-center justify-center py-20 text-(--foreground-muted)">
261
-
<Search className="mb-4 h-12 w-12 opacity-40" />
261
+
<Search className="mb-4 size-12 opacity-40" />
262
262
<p className="text-lg">
263
263
No results found for "{debouncedQuery}"
264
264
</p>
···
348
348
349
349
{!isAuthenticated && activeTab === "people" ? (
350
350
<div className="card p-8 text-center">
351
-
<Users className="mx-auto mb-3 h-10 w-10 text-(--foreground-muted)" />
351
+
<Users className="mx-auto mb-3 size-10 text-(--foreground-muted)" />
352
352
<p className="mb-2 text-(--foreground-muted)">
353
353
Sign in to search people
354
354
</p>
···
418
418
>
419
419
{followMutation.variables?.path?.targetDid ===
420
420
person.did ? (
421
-
<Loader2 className="h-3 w-3 animate-spin" />
421
+
<Loader2 className="size-3 animate-spin" />
422
422
) : unfollowMutation.variables?.path
423
423
?.targetDid === person.did ? (
424
-
<Loader2 className="h-3 w-3 animate-spin" />
424
+
<Loader2 className="size-3 animate-spin" />
425
425
) : person.isFollowing ? (
426
426
<>
427
-
<UserMinus className="mr-1 h-3 w-3" />
427
+
<UserMinus className="mr-1 size-3" />
428
428
Unfollow
429
429
</>
430
430
) : (
431
431
<>
432
-
<UserPlus className="mr-1 h-3 w-3" />
432
+
<UserPlus className="mr-1 size-3" />
433
433
Follow
434
434
</>
435
435
)}
···
465
465
)
466
466
) : (
467
467
<div className="flex flex-col items-center justify-center py-20 text-(--foreground-muted)">
468
-
<Search className="mb-4 h-12 w-12 opacity-40" />
468
+
<Search className="mb-4 size-12 opacity-40" />
469
469
<p className="text-lg">What are you looking for?</p>
470
470
<p className="mt-1 text-sm">Search for movies, TV shows, or people</p>
471
471
</div>
+22
-16
apps/web/src/routes/settings.tsx
+22
-16
apps/web/src/routes/settings.tsx
···
255
255
if (authLoading) {
256
256
return (
257
257
<div className="container-app flex min-h-[50vh] items-center justify-center py-8">
258
-
<Loader2 className="h-8 w-8 animate-spin text-(--accent)" />
258
+
<Loader2 className="size-8 animate-spin text-(--accent)" />
259
259
</div>
260
260
);
261
261
}
···
269
269
{/* Page Header */}
270
270
<div className="mb-8 flex items-center gap-3">
271
271
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-(--accent-subtle) text-(--accent)">
272
-
<Settings className="h-5 w-5" />
272
+
<Settings className="size-5" />
273
273
</div>
274
274
<div>
275
275
<h1 className="text-display-2">Settings</h1>
···
349
349
className="h-full w-full object-cover"
350
350
/>
351
351
) : (
352
-
<User className="h-8 w-8 text-(--foreground-muted)" />
352
+
<User className="size-8 text-(--foreground-muted)" />
353
353
)}
354
354
<div className="absolute inset-0 flex items-center justify-center rounded-full bg-black/40 opacity-0 transition-opacity group-hover:opacity-100">
355
-
<Camera className="h-5 w-5 text-white" />
355
+
<Camera className="size-5 text-white" />
356
356
</div>
357
357
{uploadAvatarMutation.isPending && (
358
358
<div className="absolute inset-0 flex items-center justify-center rounded-full bg-black/40">
359
-
<Loader2 className="h-5 w-5 animate-spin text-white" />
359
+
<Loader2 className="size-5 animate-spin text-white" />
360
360
</div>
361
361
)}
362
362
</button>
···
417
417
}
418
418
>
419
419
{updateProfileMutation.isPending ? (
420
-
<Loader2 className="mr-1 h-4 w-4 animate-spin" />
420
+
<Loader2
421
+
data-icon="inline-start"
422
+
className="animate-spin"
423
+
/>
421
424
) : (
422
-
<Save className="mr-1 h-4 w-4" />
425
+
<Save data-icon="inline-start" />
423
426
)}
424
427
Save
425
428
</Button>
···
457
460
458
461
{isDeleting && deletionJob ? (
459
462
<div className="flex items-center gap-2 text-red-800 dark:text-red-200">
460
-
<Loader2 className="h-4 w-4 animate-spin" />
463
+
<Loader2 className="size-4 animate-spin" />
461
464
<span className="font-medium text-sm">
462
465
Account deletion in progress…
463
466
</span>
···
472
475
}}
473
476
className="btn inline-flex items-center gap-2 border-red-300 bg-red-100 text-red-700 hover:bg-red-200 dark:border-red-800 dark:bg-red-900/40 dark:text-red-300 dark:hover:bg-red-900/60"
474
477
>
475
-
<Trash2 className="h-4 w-4" />
478
+
<Trash2 className="size-4" />
476
479
Delete Account
477
480
</button>
478
481
)}
···
484
487
<DialogContent className="sm:max-w-[425px]">
485
488
<DialogHeader>
486
489
<DialogTitle className="flex items-center gap-2 text-red-700 dark:text-red-300">
487
-
<AlertTriangle className="h-5 w-5" />
490
+
<AlertTriangle className="size-5" />
488
491
Delete your account?
489
492
</DialogTitle>
490
493
<DialogDescription>
···
527
530
528
531
{deleteAccountMutation.isError && (
529
532
<div className="flex items-center gap-2 rounded-lg bg-red-50 p-3 text-red-700 text-sm dark:bg-red-950/50 dark:text-red-300">
530
-
<AlertTriangle className="h-4 w-4 shrink-0" />
533
+
<AlertTriangle className="size-4 shrink-0" />
531
534
<span>
532
535
{deleteAccountMutation.error instanceof Error
533
536
? deleteAccountMutation.error.message
···
551
554
className="bg-red-600 hover:bg-red-700"
552
555
>
553
556
{deleteAccountMutation.isPending ? (
554
-
<Loader2 className="mr-1 h-4 w-4 animate-spin" />
557
+
<Loader2 data-icon="inline-start" className="animate-spin" />
555
558
) : (
556
-
<Trash2 className="mr-1 h-4 w-4" />
559
+
<Trash2 data-icon="inline-start" />
557
560
)}
558
561
Permanently Delete Account
559
562
</Button>
···
571
574
>
572
575
<DialogHeader>
573
576
<DialogTitle className="flex items-center gap-2 text-red-700 dark:text-red-300">
574
-
<AlertTriangle className="h-5 w-5" />
577
+
<AlertTriangle className="size-5" />
575
578
Deleting your account
576
579
</DialogTitle>
577
580
<DialogDescription>
···
581
584
582
585
<div className="space-y-4 py-4">
583
586
<div className="flex items-center gap-2 text-red-800 dark:text-red-200">
584
-
<Loader2 className="h-4 w-4 animate-spin" />
587
+
<Loader2 className="size-4 animate-spin" />
585
588
<span className="font-medium text-sm">{deletionMessage}</span>
586
589
</div>
587
590
{deletionProgress !== null && (
···
604
607
className="border-red-300 text-red-700 hover:bg-red-100 dark:border-red-800 dark:text-red-300 dark:hover:bg-red-900"
605
608
>
606
609
{deleteAccountMutation.isPending ? (
607
-
<Loader2 className="mr-1 h-4 w-4 animate-spin" />
610
+
<Loader2
611
+
data-icon="inline-start"
612
+
className="animate-spin"
613
+
/>
608
614
) : null}
609
615
Retry
610
616
</Button>
+4
-4
apps/web/src/routes/shows/$showId/$showName/index.tsx
+4
-4
apps/web/src/routes/shows/$showId/$showName/index.tsx
···
250
250
metaItems={
251
251
<>
252
252
<div className="flex items-center gap-1">
253
-
<Star className="h-4 w-4 fill-yellow-500 text-yellow-500" />
253
+
<Star className="size-4 fill-yellow-500 text-yellow-500" />
254
254
<span className="font-semibold">
255
255
{
256
256
// @ts-expect-error - vote_average may exist on TMDB result
···
296
296
}}
297
297
className="btn btn-primary gap-2"
298
298
>
299
-
<Play className="h-4 w-4" />
299
+
<Play className="size-4" />
300
300
{getCurrentEpisodeText()}
301
301
</Link>
302
302
) : (
303
303
<button type="button" className="btn btn-primary gap-2">
304
-
<Play className="h-4 w-4" />
304
+
<Play className="size-4" />
305
305
{getCurrentEpisodeText()}
306
306
</button>
307
307
)}
···
391
391
>
392
392
<span className="flex items-center gap-2">
393
393
View Season Details
394
-
<ChevronRight className="h-4 w-4" />
394
+
<ChevronRight className="size-4" />
395
395
</span>
396
396
</Link>
397
397
</SeasonAccordion>
+9
-9
apps/web/src/routes/shows/$showId/$showName/seasons.$seasonNumber.episodes.$episodeNumber.tsx
+9
-9
apps/web/src/routes/shows/$showId/$showName/seasons.$seasonNumber.episodes.$episodeNumber.tsx
···
202
202
metaItems={
203
203
<>
204
204
<div className="flex items-center gap-1">
205
-
<Star className="h-4 w-4 fill-yellow-500 text-yellow-500" />
205
+
<Star className="size-4 fill-yellow-500 text-yellow-500" />
206
206
<span className="font-semibold">
207
207
{episode.vote_average?.toFixed(1) || "N/A"}
208
208
</span>
···
239
239
>
240
240
{isUnmarkEpisodePending ? (
241
241
<>
242
-
<Loader2 className="h-4 w-4 animate-spin" />
242
+
<Loader2 className="size-4 animate-spin" />
243
243
Loading
244
244
</>
245
245
) : (
246
246
<>
247
-
<X className="h-4 w-4" />
247
+
<X className="size-4" />
248
248
Remove from shelf
249
249
</>
250
250
)}
···
258
258
>
259
259
{isMarkEpisodePending ? (
260
260
<>
261
-
<Loader2 className="h-4 w-4 animate-spin" />
261
+
<Loader2 className="size-4 animate-spin" />
262
262
Loading
263
263
</>
264
264
) : (
265
265
<>
266
-
<Plus className="h-4 w-4" />
266
+
<Plus className="size-4" />
267
267
Add to shelf
268
268
</>
269
269
)}
···
291
291
}}
292
292
className="inline-flex items-center gap-1 text-(--foreground-muted) transition-colors hover:text-(--accent)"
293
293
>
294
-
<ChevronLeft className="h-4 w-4" />
294
+
<ChevronLeft className="size-4" />
295
295
Prev (S{prevEpisode.seasonNumber}E{prevEpisode.episodeNumber})
296
296
</Link>
297
297
)}
···
311
311
>
312
312
Next (S{nextEpisodeCtx.seasonNumber}E
313
313
{nextEpisodeCtx.episodeNumber})
314
-
<ChevronRight className="h-4 w-4" />
314
+
<ChevronRight className="size-4" />
315
315
</Link>
316
316
)}
317
317
</div>
···
414
414
<DialogContent>
415
415
<DialogHeader>
416
416
<DialogTitle className="flex items-center gap-2">
417
-
<AlertTriangle className="h-5 w-5 text-amber-500" />
417
+
<AlertTriangle className="size-5 text-amber-500" />
418
418
Remove all plays?
419
419
</DialogTitle>
420
420
<DialogDescription>
···
446
446
>
447
447
{isUnmarkEpisodePending ? (
448
448
<>
449
-
<Loader2 className="h-4 w-4 animate-spin" />
449
+
<Loader2 className="size-4 animate-spin" />
450
450
Removing...
451
451
</>
452
452
) : (
+4
-4
apps/web/src/routes/shows/$showId/$showName/seasons.$seasonNumber/index.tsx
+4
-4
apps/web/src/routes/shows/$showId/$showName/seasons.$seasonNumber/index.tsx
···
265
265
metaItems={
266
266
<>
267
267
<div className="flex items-center gap-1">
268
-
<Star className="h-4 w-4 fill-yellow-500 text-yellow-500" />
268
+
<Star className="size-4 fill-yellow-500 text-yellow-500" />
269
269
<span className="font-semibold">
270
270
{season.vote_average?.toFixed(1) || "N/A"}
271
271
</span>
···
294
294
params={continueLink.params}
295
295
className="btn btn-primary gap-2"
296
296
>
297
-
<Play className="h-4 w-4" />
297
+
<Play className="size-4" />
298
298
{getContinueButtonText()}
299
299
</Link>
300
300
<MediaActionsBar
···
316
316
}}
317
317
className="inline-flex items-center gap-1 text-(--foreground-muted) transition-colors hover:text-(--accent)"
318
318
>
319
-
<ChevronLeft className="h-4 w-4" />
319
+
<ChevronLeft className="size-4" />
320
320
Previous (S{previousSeason.season_number})
321
321
</Link>
322
322
)}
···
334
334
className="inline-flex items-center gap-1 text-(--foreground-muted) transition-colors hover:text-(--accent)"
335
335
>
336
336
Next (S{nextSeason.season_number})
337
-
<ChevronRight className="h-4 w-4" />
337
+
<ChevronRight className="size-4" />
338
338
</Link>
339
339
)}
340
340
</div>