A personal media tracker built on the AT Protocol opnshelf.xyz
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

refactor: update grid layout and calendar week start; adjust query limits

+17 -16
+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
··· 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
··· 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
··· 147 147 const { data: shelfData, isLoading } = useQuery({ 148 148 ...shelfControllerGetUserShelfOptions({ 149 149 path: { userDid: user.did }, 150 - query: { limit: 20 }, 150 + query: { limit: 6 }, 151 151 }), 152 152 enabled: !!user.did, 153 153 });
+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 &quot;{searchQuery}&quot; 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 &quot;{searchQuery}&quot; 327 327 </div> 328 328 )}