A personal media tracker built on the AT Protocol
opnshelf.xyz
refactor: update grid layout and calendar week start; adjust query limits
+17
-16
+1
-1
apps/web/src/components/MovieGrid.tsx
+1
-1
apps/web/src/components/MovieGrid.tsx
···
45
45
46
46
export function MovieGridSkeleton({ count = 10 }: MovieGridSkeletonProps) {
47
47
return (
48
-
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
48
+
<div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
49
49
{Array.from({ length: count }, (_, i) => i).map((index) => (
50
50
<div key={`skeleton-${index}`}>
51
51
<Skeleton className="aspect-2/3 rounded-lg mb-2" />
+1
-1
apps/web/src/components/ui/calendar.tsx
+1
-1
apps/web/src/components/ui/calendar.tsx
···
86
86
return (
87
87
<DayPicker
88
88
showOutsideDays={showOutsideDays}
89
-
weekStartsOn={1}
89
+
weekStartsOn={0}
90
90
className={cn(
91
91
"bg-background group/calendar p-0 in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent font-normal",
92
92
String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+4
-3
apps/web/src/components/ui/material-date-picker.tsx
+4
-3
apps/web/src/components/ui/material-date-picker.tsx
···
54
54
// Generate calendar days
55
55
const monthStart = startOfMonth(currentMonth);
56
56
const monthEnd = endOfMonth(monthStart);
57
-
const calendarStart = startOfWeek(monthStart, { weekStartsOn: 0 });
58
-
const calendarEnd = endOfWeek(monthEnd, { weekStartsOn: 0 });
57
+
const calendarStart = startOfWeek(monthStart, { weekStartsOn: 1 });
58
+
const calendarEnd = endOfWeek(monthEnd, { weekStartsOn: 1 });
59
59
60
60
const days: Date[] = [];
61
61
let day = calendarStart;
···
65
65
}
66
66
67
67
const weekDays = [
68
-
{ label: "S", id: "sun" },
69
68
{ label: "M", id: "mon" },
70
69
{ label: "T", id: "tue" },
71
70
{ label: "W", id: "wed" },
72
71
{ label: "T", id: "thu" },
73
72
{ label: "F", id: "fri" },
74
73
{ label: "S", id: "sat" },
74
+
{ label: "S", id: "sun" },
75
75
];
76
76
77
77
// Generate years for year picker (100 years back, 50 years forward)
···
105
105
const newDate = new Date(currentMonth);
106
106
newDate.setMonth(monthIndex);
107
107
setCurrentMonth(newDate);
108
+
setSelectingYear(false);
108
109
};
109
110
110
111
return (
+1
-1
apps/web/src/routes/index.tsx
+1
-1
apps/web/src/routes/index.tsx
+10
-10
apps/web/src/routes/search.tsx
+10
-10
apps/web/src/routes/search.tsx
···
188
188
resetScroll: false,
189
189
});
190
190
}}
191
-
className="absolute right-3 top-1/2 -translate-y-1/2 p-1 rounded-full transition-colors hover:bg-[var(--md-sys-color-on-surface)]/10"
191
+
className="absolute right-3 top-1/2 -translate-y-1/2 p-1 rounded-full transition-colors hover:bg-(--md-sys-color-on-surface)/10"
192
192
style={{ color: "var(--md-sys-color-on-surface-variant)" }}
193
193
>
194
194
<X className="w-4 h-4" />
195
195
</button>
196
196
)}
197
197
</div>
198
-
<div className="mt-4 inline-flex rounded-full p-1 bg-[var(--md-sys-color-surface-container-high)]">
198
+
<div className="mt-4 inline-flex rounded-full p-1 bg-(--md-sys-color-surface-container-high)">
199
199
{(["all", "movies", "shows"] as const).map((tab) => (
200
200
<button
201
201
key={tab}
···
238
238
<section>
239
239
<div className="flex items-center justify-between mb-4">
240
240
<h2 className="md-title-large">Movies</h2>
241
-
<span className="text-sm text-[var(--md-sys-color-on-surface-variant)]">
241
+
<span className="text-sm text-(--md-sys-color-on-surface-variant)">
242
242
{movieTotal.toLocaleString()}
243
243
</span>
244
244
</div>
···
252
252
gridClassName="grid-cols-2 md:grid-cols-3"
253
253
/>
254
254
) : (
255
-
<p className="text-sm text-[var(--md-sys-color-on-surface-variant)] py-4">
255
+
<p className="text-sm text-(--md-sys-color-on-surface-variant) py-4">
256
256
No movie results.
257
257
</p>
258
258
)}
···
261
261
<section>
262
262
<div className="flex items-center justify-between mb-4">
263
263
<h2 className="md-title-large">Shows</h2>
264
-
<span className="text-sm text-[var(--md-sys-color-on-surface-variant)]">
264
+
<span className="text-sm text-(--md-sys-color-on-surface-variant)">
265
265
{showTotal.toLocaleString()}
266
266
</span>
267
267
</div>
···
273
273
gridClassName="grid-cols-2 md:grid-cols-3"
274
274
/>
275
275
) : (
276
-
<p className="text-sm text-[var(--md-sys-color-on-surface-variant)] py-4">
276
+
<p className="text-sm text-(--md-sys-color-on-surface-variant) py-4">
277
277
No show results.
278
278
</p>
279
279
)}
···
287
287
<h2 className="md-title-large">
288
288
{hasQuery ? "Movie Results" : "Popular Movies"}
289
289
</h2>
290
-
<span className="text-sm text-[var(--md-sys-color-on-surface-variant)]">
290
+
<span className="text-sm text-(--md-sys-color-on-surface-variant)">
291
291
{movieTotal.toLocaleString()}
292
292
</span>
293
293
</div>
···
300
300
watchedMovieIds={watchedMovieIds}
301
301
/>
302
302
) : (
303
-
<div className="text-center py-12 text-[var(--md-sys-color-on-surface-variant)]">
303
+
<div className="text-center py-12 text-(--md-sys-color-on-surface-variant)">
304
304
No movie results found for "{searchQuery}"
305
305
</div>
306
306
)}
···
313
313
<h2 className="md-title-large">
314
314
{hasQuery ? "Show Results" : "Popular Shows"}
315
315
</h2>
316
-
<span className="text-sm text-[var(--md-sys-color-on-surface-variant)]">
316
+
<span className="text-sm text-(--md-sys-color-on-surface-variant)">
317
317
{showTotal.toLocaleString()}
318
318
</span>
319
319
</div>
···
322
322
) : showResults.length > 0 ? (
323
323
<ShowGrid shows={showResults} />
324
324
) : (
325
-
<div className="text-center py-12 text-[var(--md-sys-color-on-surface-variant)]">
325
+
<div className="text-center py-12 text-(--md-sys-color-on-surface-variant)">
326
326
No show results found for "{searchQuery}"
327
327
</div>
328
328
)}