+1 -1

apps/web/src/components/Header.tsx

reviewed

··· 22 22 import ThemeToggle from "./ThemeToggle"; 23 23 24 24 const navigation = [ 25 25 - { name: "Dashboard", href: "/", icon: Film }, 25 25 + { name: "Dashboard", href: "/dashboard", icon: Film }, 26 26 { name: "Calendar", href: "/calendar", icon: Calendar }, 27 27 { name: "Following", href: "/following", icon: Users }, 28 28 { name: "Lists", href: "/lists", icon: List },

+21

apps/web/src/routeTree.gen.ts

reviewed

··· 12 12 import { Route as LoginRouteImport } from './routes/login' 13 13 import { Route as ListsRouteImport } from './routes/lists' 14 14 import { Route as FollowingRouteImport } from './routes/following' 15 15 + import { Route as DashboardRouteImport } from './routes/dashboard' 15 16 import { Route as CalendarRouteImport } from './routes/calendar' 16 17 import { Route as AboutRouteImport } from './routes/about' 17 18 import { Route as IndexRouteImport } from './routes/index' ··· 32 33 const FollowingRoute = FollowingRouteImport.update({ 33 34 id: '/following', 34 35 path: '/following', 36 36 + getParentRoute: () => rootRouteImport, 37 37 + } as any) 38 38 + const DashboardRoute = DashboardRouteImport.update({ 39 39 + id: '/dashboard', 40 40 + path: '/dashboard', 35 41 getParentRoute: () => rootRouteImport, 36 42 } as any) 37 43 const CalendarRoute = CalendarRouteImport.update({ ··· 69 75 '/': typeof IndexRoute 70 76 '/about': typeof AboutRoute 71 77 '/calendar': typeof CalendarRoute 78 78 + '/dashboard': typeof DashboardRoute 72 79 '/following': typeof FollowingRoute 73 80 '/lists': typeof ListsRoute 74 81 '/login': typeof LoginRoute ··· 80 87 '/': typeof IndexRoute 81 88 '/about': typeof AboutRoute 82 89 '/calendar': typeof CalendarRoute 90 90 + '/dashboard': typeof DashboardRoute 83 91 '/following': typeof FollowingRoute 84 92 '/lists': typeof ListsRoute 85 93 '/login': typeof LoginRoute ··· 92 100 '/': typeof IndexRoute 93 101 '/about': typeof AboutRoute 94 102 '/calendar': typeof CalendarRoute 103 103 + '/dashboard': typeof DashboardRoute 95 104 '/following': typeof FollowingRoute 96 105 '/lists': typeof ListsRoute 97 106 '/login': typeof LoginRoute ··· 105 114 | '/' 106 115 | '/about' 107 116 | '/calendar' 117 117 + | '/dashboard' 108 118 | '/following' 109 119 | '/lists' 110 120 | '/login' ··· 116 126 | '/' 117 127 | '/about' 118 128 | '/calendar' 129 129 + | '/dashboard' 119 130 | '/following' 120 131 | '/lists' 121 132 | '/login' ··· 127 138 | '/' 128 139 | '/about' 129 140 | '/calendar' 141 141 + | '/dashboard' 130 142 | '/following' 131 143 | '/lists' 132 144 | '/login' ··· 139 151 IndexRoute: typeof IndexRoute 140 152 AboutRoute: typeof AboutRoute 141 153 CalendarRoute: typeof CalendarRoute 154 154 + DashboardRoute: typeof DashboardRoute 142 155 FollowingRoute: typeof FollowingRoute 143 156 ListsRoute: typeof ListsRoute 144 157 LoginRoute: typeof LoginRoute ··· 168 181 path: '/following' 169 182 fullPath: '/following' 170 183 preLoaderRoute: typeof FollowingRouteImport 184 184 + parentRoute: typeof rootRouteImport 185 185 + } 186 186 + '/dashboard': { 187 187 + id: '/dashboard' 188 188 + path: '/dashboard' 189 189 + fullPath: '/dashboard' 190 190 + preLoaderRoute: typeof DashboardRouteImport 171 191 parentRoute: typeof rootRouteImport 172 192 } 173 193 '/calendar': { ··· 219 239 IndexRoute: IndexRoute, 220 240 AboutRoute: AboutRoute, 221 241 CalendarRoute: CalendarRoute, 242 242 + DashboardRoute: DashboardRoute, 222 243 FollowingRoute: FollowingRoute, 223 244 ListsRoute: ListsRoute, 224 245 LoginRoute: LoginRoute,

+12 -3

apps/web/src/routes/calendar.tsx

reviewed

··· 1 1 import type { ReleaseCalendarItemDto } from "@opnshelf/api"; 2 2 import { showsControllerGetUserReleaseCalendarOptions } from "@opnshelf/api"; 3 3 import { useQuery } from "@tanstack/react-query"; 4 4 - import { createFileRoute, Link } from "@tanstack/react-router"; 4 4 + import { createFileRoute, Link, useNavigate } from "@tanstack/react-router"; 5 5 import { 6 6 Calendar as CalendarIcon, 7 7 ChevronLeft, ··· 12 12 Tv, 13 13 } from "lucide-react"; 14 14 import { useEffect, useMemo, useState } from "react"; 15 15 - import { useUser } from "../lib/auth-context"; 15 15 + import { useAuth } from "../lib/auth-context"; 16 16 17 17 export const Route = createFileRoute("/calendar")({ 18 18 component: CalendarPage, ··· 47 47 } 48 48 49 49 function CalendarPage() { 50 50 - const user = useUser(); 50 50 + const { user, isAuthenticated, isLoading: authLoading } = useAuth(); 51 51 + const navigate = useNavigate(); 52 52 + 53 53 + // Redirect to login if not authenticated 54 54 + useEffect(() => { 55 55 + if (!authLoading && !isAuthenticated) { 56 56 + navigate({ to: "/login" }); 57 57 + } 58 58 + }, [authLoading, isAuthenticated, navigate]); 59 59 + 51 60 const [currentDate, setCurrentDate] = useState(new Date()); 52 61 const [selectedWeekStart, setSelectedWeekStart] = useState<Date | null>(null); 53 62

+611

apps/web/src/routes/dashboard.tsx

reviewed

··· 1 1 + import type { 2 2 + FollowedActivityItemDto, 3 3 + ReleaseCalendarItemDto, 4 4 + } from "@opnshelf/api"; 5 5 + import { 6 6 + showsControllerGetUserReleaseCalendarOptions, 7 7 + socialControllerGetFeedOptions, 8 8 + } from "@opnshelf/api"; 9 9 + import { useQuery } from "@tanstack/react-query"; 10 10 + import { createFileRoute, Link, useNavigate } from "@tanstack/react-router"; 11 11 + import { 12 12 + Calendar, 13 13 + ChevronRight, 14 14 + Clock, 15 15 + Film, 16 16 + Heart, 17 17 + MessageCircle, 18 18 + TrendingUp, 19 19 + Tv, 20 20 + Users, 21 21 + } from "lucide-react"; 22 22 + import { useEffect } from "react"; 23 23 + import { setupApiClient } from "#/lib/api"; 24 24 + import { useAuth } from "#/lib/auth-context"; 25 25 + import { useDashboardStats, useUserShelf } from "#/lib/hooks"; 26 26 + import MediaCard from "../components/MediaCard"; 27 27 + 28 28 + // Initialize API client 29 29 + setupApiClient(); 30 30 + 31 31 + export const Route = createFileRoute("/dashboard")({ 32 32 + component: Dashboard, 33 33 + }); 34 34 + 35 35 + // Helper function to format relative time 36 36 + function formatRelativeDate(dateStr: string): string { 37 37 + const releaseDate = new Date(dateStr); 38 38 + const today = new Date(); 39 39 + today.setHours(0, 0, 0, 0); 40 40 + releaseDate.setHours(0, 0, 0, 0); 41 41 + 42 42 + const diffTime = releaseDate.getTime() - today.getTime(); 43 43 + const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); 44 44 + 45 45 + if (diffDays === 0) return "Today"; 46 46 + if (diffDays === 1) return "Tomorrow"; 47 47 + if (diffDays < 7) return `in ${diffDays} days`; 48 48 + if (diffDays < 30) return `in ${Math.ceil(diffDays / 7)} weeks`; 49 49 + return `in ${Math.ceil(diffDays / 30)} months`; 50 50 + } 51 51 + 52 52 + // Helper function to format date 53 53 + function formatDate(dateStr: string): string { 54 54 + const date = new Date(dateStr); 55 55 + return date.toLocaleDateString("en-US", { month: "short", day: "numeric" }); 56 56 + } 57 57 + 58 58 + // Helper function to format relative time for social feed 59 59 + function formatRelativeTime(dateString: string): string { 60 60 + const date = new Date(dateString); 61 61 + const now = new Date(); 62 62 + const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000); 63 63 + 64 64 + if (diffInSeconds < 60) return "Just now"; 65 65 + if (diffInSeconds < 3600) 66 66 + return `${Math.floor(diffInSeconds / 60)} minutes ago`; 67 67 + if (diffInSeconds < 86400) 68 68 + return `${Math.floor(diffInSeconds / 3600)} hours ago`; 69 69 + if (diffInSeconds < 604800) 70 70 + return `${Math.floor(diffInSeconds / 86400)} days ago`; 71 71 + return date.toLocaleDateString(); 72 72 + } 73 73 + 74 74 + // Helper function to get episode info 75 75 + function getEpisodeInfo(item: ReleaseCalendarItemDto): string | undefined { 76 76 + if (item.releaseKind === "episode" && item.seasonNumber !== undefined) { 77 77 + if (item.episodeNumber !== undefined) { 78 78 + return `S${item.seasonNumber}E${item.episodeNumber}`; 79 79 + } 80 80 + return `Season ${item.seasonNumber}`; 81 81 + } 82 82 + if (item.releaseKind === "show") { 83 83 + return "Season Premiere"; 84 84 + } 85 85 + return undefined; 86 86 + } 87 87 + 88 88 + // Helper function to format watched time (e.g. "Apr 9 at 2:30 PM", "Jan 15, 2024 at 2:30 PM") 89 89 + function formatWatchedDate(dateStr: string): string { 90 90 + const date = new Date(dateStr); 91 91 + const now = new Date(); 92 92 + const isThisYear = date.getFullYear() === now.getFullYear(); 93 93 + const timeString = date.toLocaleTimeString("en-US", { 94 94 + hour: "numeric", 95 95 + minute: "2-digit", 96 96 + }); 97 97 + 98 98 + if (isThisYear) { 99 99 + const formattedDate = date.toLocaleDateString("en-US", { 100 100 + month: "short", 101 101 + day: "numeric", 102 102 + }); 103 103 + return `${formattedDate} at ${timeString}`; 104 104 + } 105 105 + const formattedDate = date.toLocaleDateString("en-US", { 106 106 + month: "short", 107 107 + day: "numeric", 108 108 + year: "numeric", 109 109 + }); 110 110 + return `${formattedDate} at ${timeString}`; 111 111 + } 112 112 + 113 113 + function Dashboard() { 114 114 + const { user, isAuthenticated, isLoading: authLoading } = useAuth(); 115 115 + const navigate = useNavigate(); 116 116 + const userDid = user?.did; 117 117 + 118 118 + // Redirect to login if not authenticated 119 119 + useEffect(() => { 120 120 + if (!authLoading && !isAuthenticated) { 121 121 + navigate({ to: "/login" }); 122 122 + } 123 123 + }, [authLoading, isAuthenticated, navigate]); 124 124 + 125 125 + // Fetch user data from API 126 126 + const { data: shelfData, isLoading: shelfLoading } = useUserShelf( 127 127 + userDid || "", 128 128 + 12, 129 129 + ); 130 130 + const { data: statsData, isLoading: statsLoading } = useDashboardStats( 131 131 + userDid || "", 132 132 + ); 133 133 + 134 134 + // Fetch social activity feed 135 135 + const { data: feedData, isLoading: feedLoading } = useQuery({ 136 136 + ...socialControllerGetFeedOptions({ 137 137 + query: { pageSize: 10 }, 138 138 + }), 139 139 + }); 140 140 + 141 141 + // Fetch release calendar data 142 142 + const { data: calendarData, isLoading: calendarLoading } = useQuery({ 143 143 + ...showsControllerGetUserReleaseCalendarOptions({ 144 144 + path: { userDid: user?.did || "" }, 145 145 + }), 146 146 + }); 147 147 + 148 148 + // Get upcoming releases - filter to next two weeks, limit to 10 149 149 + const upcomingReleases = calendarData?.items 150 150 + ? calendarData.items 151 151 + .filter((item) => { 152 152 + const releaseDate = new Date(item.releaseDate); 153 153 + const today = new Date(); 154 154 + today.setHours(0, 0, 0, 0); 155 155 + const twoWeeksLater = new Date(today); 156 156 + twoWeeksLater.setDate(today.getDate() + 14); 157 157 + return releaseDate >= today && releaseDate <= twoWeeksLater; 158 158 + }) 159 159 + .sort( 160 160 + (a, b) => 161 161 + new Date(a.releaseDate).getTime() - 162 162 + new Date(b.releaseDate).getTime(), 163 163 + ) 164 164 + .slice(0, 10) 165 165 + : []; 166 166 + 167 167 + const isLoading = 168 168 + shelfLoading || 169 169 + statsLoading || 170 170 + feedLoading || 171 171 + authLoading || 172 172 + calendarLoading; 173 173 + 174 174 + // Calculate real stats from shelf data 175 175 + const movieCount = 176 176 + shelfData?.items?.filter((item) => item.type === "movie").length || 0; 177 177 + const showCount = 178 178 + shelfData?.items?.filter((item) => item.type === "episode").length || 0; 179 179 + 180 180 + const userStats = [ 181 181 + { 182 182 + label: "Movies", 183 183 + value: String(movieCount), 184 184 + icon: Film, 185 185 + change: statsData 186 186 + ? `+${statsData.recentMovies || 0} this month` 187 187 + : "Track your first movie", 188 188 + }, 189 189 + { 190 190 + label: "Shows", 191 191 + value: String(showCount), 192 192 + icon: Tv, 193 193 + change: statsData 194 194 + ? `+${statsData.recentShows || 0} this month` 195 195 + : "Track your first show", 196 196 + }, 197 197 + { 198 198 + label: "Hours", 199 199 + value: String(Math.round(statsData?.totalWatchTimeHours || 0)), 200 200 + icon: Clock, 201 201 + change: statsData?.weeklyWatchTimeHours 202 202 + ? `${statsData.weeklyWatchTimeHours}h this week` 203 203 + : "Start watching", 204 204 + }, 205 205 + { 206 206 + label: "Streak", 207 207 + value: String(statsData?.streakDays || 0), 208 208 + icon: TrendingUp, 209 209 + change: 210 210 + statsData?.streakDays && statsData.streakDays > 0 211 211 + ? "days" 212 212 + : "Start a streak", 213 213 + }, 214 214 + ]; 215 215 + 216 216 + // Transform user's tracked content for display from shelf data 217 217 + const userContent = 218 218 + shelfData?.items?.slice(0, 6).map((item) => { 219 219 + if (item.type === "movie") { 220 220 + return { 221 221 + id: item.movieId, 222 222 + title: item.title, 223 223 + type: "movie" as const, 224 224 + posterUrl: item.posterPath 225 225 + ? `https://image.tmdb.org/t/p/w500${item.posterPath}` 226 226 + : "", 227 227 + backdropUrl: item.backdropPath 228 228 + ? `https://image.tmdb.org/t/p/original${item.backdropPath}` 229 229 + : undefined, 230 230 + year: item.releaseYear, 231 231 + isWatched: !!item.watchedDate, 232 232 + watchedDate: item.watchedDate, 233 233 + }; 234 234 + } 235 235 + // Episode type 236 236 + return { 237 237 + id: item.id, // Use the unique tracked episode ID 238 238 + showId: item.showId, 239 239 + title: 240 240 + item.episodeTitle || 241 241 + `${item.showTitle} S${item.seasonNumber}E${item.episodeNumber}`, 242 242 + type: "show" as const, 243 243 + posterUrl: item.posterPath 244 244 + ? `https://image.tmdb.org/t/p/w500${item.posterPath}` 245 245 + : "", 246 246 + backdropUrl: item.backdropPath 247 247 + ? `https://image.tmdb.org/t/p/original${item.backdropPath}` 248 248 + : undefined, 249 249 + year: item.firstAirYear, 250 250 + episodeInfo: `${item.showTitle} • S${item.seasonNumber}E${item.episodeNumber}`, 251 251 + isWatched: !!item.watchedDate, 252 252 + watchedDate: item.watchedDate, 253 253 + }; 254 254 + }) || []; 255 255 + 256 256 + return ( 257 257 + <div className="container-app py-8"> 258 258 + {/* Welcome Section */} 259 259 + <div className="mb-8"> 260 260 + <h1 className="text-display-2 mb-2"> 261 261 + {`Welcome back, ${user?.displayName || user?.handle || ""}`} 262 262 + </h1> 263 263 + <p className="text-[var(--foreground-muted)]">@{user?.handle}</p> 264 264 + </div> 265 265 + 266 266 + {/* Stats Grid */} 267 267 + <div className="mb-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-4"> 268 268 + {isLoading 269 269 + ? // Skeleton stats 270 270 + [1, 2, 3, 4].map((i) => ( 271 271 + <div key={i} className="card p-5 animate-pulse"> 272 272 + <div className="flex items-center justify-between"> 273 273 + <div className="space-y-2"> 274 274 + <div className="h-4 w-16 rounded bg-[var(--background-subtle)]" /> 275 275 + <div className="h-8 w-12 rounded bg-[var(--background-subtle)]" /> 276 276 + <div className="h-3 w-20 rounded bg-[var(--background-subtle)]" /> 277 277 + </div> 278 278 + <div className="h-12 w-12 rounded-xl bg-[var(--background-subtle)]" /> 279 279 + </div> 280 280 + </div> 281 281 + )) 282 282 + : userStats.map((stat, index) => { 283 283 + const Icon = stat.icon; 284 284 + return ( 285 285 + <div 286 286 + key={stat.label} 287 287 + className="card p-5" 288 288 + style={{ animationDelay: `${index * 50}ms` }} 289 289 + > 290 290 + <div className="flex items-center justify-between"> 291 291 + <div> 292 292 + <p className="text-sm text-[var(--foreground-muted)]"> 293 293 + {stat.label} 294 294 + </p> 295 295 + <p className="text-display-3 mt-1">{stat.value}</p> 296 296 + <p className="mt-1 text-xs text-[var(--accent)]"> 297 297 + {stat.change} 298 298 + </p> 299 299 + </div> 300 300 + <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-[var(--accent-subtle)] text-[var(--accent)]"> 301 301 + <Icon className="h-6 w-6" /> 302 302 + </div> 303 303 + </div> 304 304 + </div> 305 305 + ); 306 306 + })} 307 307 + </div> 308 308 + 309 309 + <div className="grid gap-8 lg:grid-cols-3"> 310 310 + {/* Main Content - Continue Watching */} 311 311 + <div className="lg:col-span-2 space-y-8"> 312 312 + {/* Continue Watching */} 313 313 + <section> 314 314 + <div className="mb-4 flex items-center justify-between"> 315 315 + <h2 className="text-display-3">Your Shelf</h2> 316 316 + <Link 317 317 + to="/shelf" 318 318 + className="flex items-center gap-1 text-sm font-medium text-[var(--accent)] hover:text-[var(--accent-hover)]" 319 319 + > 320 320 + View all 321 321 + <ChevronRight className="h-4 w-4" /> 322 322 + </Link> 323 323 + </div> 324 324 + 325 325 + {isLoading ? ( 326 326 + <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3"> 327 327 + {[1, 2, 3, 4, 5, 6].map((i) => ( 328 328 + <div 329 329 + key={i} 330 330 + className="aspect-[16/9] animate-pulse rounded-lg bg-[var(--background-subtle)]" 331 331 + /> 332 332 + ))} 333 333 + </div> 334 334 + ) : userContent.length > 0 ? ( 335 335 + <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3"> 336 336 + {userContent.map((item) => ( 337 337 + <MediaCard 338 338 + key={item.id} 339 339 + id={item.id} 340 340 + title={item.title} 341 341 + posterUrl={item.posterUrl} 342 342 + backdropUrl={item.backdropUrl} 343 343 + type={item.type} 344 344 + year={item.year} 345 345 + episodeInfo={item.episodeInfo} 346 346 + watchedDate={ 347 347 + item.watchedDate 348 348 + ? formatWatchedDate(item.watchedDate) 349 349 + : undefined 350 350 + } 351 351 + layout="backdrop" 352 352 + size="md" 353 353 + /> 354 354 + ))} 355 355 + </div> 356 356 + ) : ( 357 357 + <div className="card p-8 text-center"> 358 358 + <p className="text-[var(--foreground-muted)] mb-2"> 359 359 + Your shelf is empty 360 360 + </p> 361 361 + <p className="text-sm text-[var(--foreground-muted)] mb-4"> 362 362 + Start tracking movies and shows to see them here! 363 363 + </p> 364 364 + <Link 365 365 + to="/search" 366 366 + className="btn btn-primary inline-flex gap-2" 367 367 + > 368 368 + <Film className="h-4 w-4" /> 369 369 + Discover Content 370 370 + </Link> 371 371 + </div> 372 372 + )} 373 373 + </section> 374 374 + 375 375 + {/* Social Feed - Activity from people you follow */} 376 376 + <section> 377 377 + <div className="mb-4 flex items-center justify-between"> 378 378 + <h2 className="text-display-3">Friend Activity</h2> 379 379 + <Link 380 380 + to="/following" 381 381 + className="flex items-center gap-1 text-sm font-medium text-[var(--accent)] hover:text-[var(--accent-hover)]" 382 382 + > 383 383 + <Users className="h-4 w-4" /> 384 384 + View all 385 385 + </Link> 386 386 + </div> 387 387 + {feedLoading ? ( 388 388 + <div className="card p-8"> 389 389 + <div className="space-y-3"> 390 390 + {[1, 2, 3].map((i) => ( 391 391 + <div 392 392 + key={i} 393 393 + className="flex items-center gap-3 animate-pulse" 394 394 + > 395 395 + <div className="h-10 w-10 rounded-full bg-[var(--background-subtle)]" /> 396 396 + <div className="flex-1 space-y-1"> 397 397 + <div className="h-4 w-1/2 rounded bg-[var(--background-subtle)]" /> 398 398 + <div className="h-3 w-1/3 rounded bg-[var(--background-subtle)]" /> 399 399 + </div> 400 400 + </div> 401 401 + ))} 402 402 + </div> 403 403 + </div> 404 404 + ) : feedData?.items && feedData.items.length > 0 ? ( 405 405 + <div className="card divide-y divide-[var(--border)]"> 406 406 + {feedData.items 407 407 + .filter( 408 408 + (item: FollowedActivityItemDto) => item.content != null, 409 409 + ) 410 410 + .map((item: FollowedActivityItemDto) => ( 411 411 + <div 412 412 + key={item.id} 413 413 + className="flex items-start gap-3 p-4 first:pt-5 last:pb-5" 414 414 + > 415 415 + {/* User Avatar */} 416 416 + <img 417 417 + src={ 418 418 + item.actor.avatar || 419 419 + `https://i.pravatar.cc/150?u=${item.actor.did}` 420 420 + } 421 421 + alt={item.actor.displayName || item.actor.handle} 422 422 + className="h-10 w-10 rounded-full object-cover" 423 423 + /> 424 424 + <div className="flex-1 min-w-0"> 425 425 + {/* Activity Header */} 426 426 + <p className="text-sm"> 427 427 + <Link 428 428 + to={`/profile/${item.actor.handle}`} 429 429 + className="font-medium hover:text-[var(--accent)]" 430 430 + > 431 431 + {item.actor.displayName || item.actor.handle} 432 432 + </Link>{" "} 433 433 + {item.verb === "watch" && ( 434 434 + <span className="text-[var(--foreground-muted)]"> 435 435 + watched 436 436 + </span> 437 437 + )} 438 438 + {item.verb === "follow" && ( 439 439 + <span className="text-[var(--foreground-muted)]"> 440 440 + followed 441 441 + </span> 442 442 + )} 443 443 + {item.verb === "list_add" && ( 444 444 + <span className="text-[var(--foreground-muted)]"> 445 445 + added to list 446 446 + </span> 447 447 + )} 448 448 + </p> 449 449 + {/* Content Title */} 450 450 + <p className="font-medium text-sm mt-0.5"> 451 451 + <Link 452 452 + to={`/${item.content.type}/${item.content.id}`} 453 453 + className="hover:text-[var(--accent)]" 454 454 + > 455 455 + {item.content.title} 456 456 + {item.content.type === "episode" && 457 457 + item.content.episodeTitle && ( 458 458 + <span className="text-[var(--foreground-muted)]"> 459 459 + {" "} 460 460 + (S{item.content.seasonNumber}E 461 461 + {item.content.episodeNumber}) 462 462 + </span> 463 463 + )} 464 464 + </Link> 465 465 + </p> 466 466 + {/* Timestamp & Actions */} 467 467 + <div className="flex items-center gap-3 mt-1.5 text-xs text-[var(--foreground-muted)]"> 468 468 + <span>{formatRelativeTime(item.createdAt)}</span> 469 469 + {item.verb === "watch" && ( 470 470 + <button 471 471 + type="button" 472 472 + className="flex items-center gap-1 hover:text-[var(--accent)]" 473 473 + > 474 474 + <Heart className="h-3 w-3" /> 475 475 + Like 476 476 + </button> 477 477 + )} 478 478 + </div> 479 479 + </div> 480 480 + {/* Content Type Badge */} 481 481 + <span 482 482 + className={`badge ${item.content.type === "movie" ? "badge-subtle" : "badge-accent"}`} 483 483 + > 484 484 + {item.content.type === "movie" ? "Movie" : "TV"} 485 485 + </span> 486 486 + </div> 487 487 + ))} 488 488 + </div> 489 489 + ) : ( 490 490 + <div className="card p-8 text-center"> 491 491 + <MessageCircle className="h-12 w-12 mx-auto mb-3 text-[var(--foreground-muted)]" /> 492 492 + <p className="text-[var(--foreground-muted)]"> 493 493 + Activity from people you follow will appear here. 494 494 + </p> 495 495 + <Link 496 496 + to="/following" 497 497 + className="btn btn-primary mt-4 inline-flex" 498 498 + > 499 499 + <Users className="h-4 w-4 mr-2" /> 500 500 + Find people to follow 501 501 + </Link> 502 502 + </div> 503 503 + )} 504 504 + </section> 505 505 + </div> 506 506 + 507 507 + {/* Sidebar */} 508 508 + <div className="space-y-8"> 509 509 + {/* Upcoming */} 510 510 + <section> 511 511 + <div className="mb-4 flex items-center justify-between"> 512 512 + <h2 className="text-display-3">Upcoming</h2> 513 513 + <Link 514 514 + to="/calendar" 515 515 + className="flex items-center gap-1 text-sm font-medium text-[var(--accent)] hover:text-[var(--accent-hover)]" 516 516 + > 517 517 + <Calendar className="h-4 w-4" /> 518 518 + Calendar 519 519 + </Link> 520 520 + </div> 521 521 + {isLoading ? ( 522 522 + <div className="card p-4"> 523 523 + <div className="space-y-3"> 524 524 + {[1, 2, 3].map((i) => ( 525 525 + <div 526 526 + key={i} 527 527 + className="flex items-center gap-3 animate-pulse" 528 528 + > 529 529 + <div className="h-12 w-9 rounded bg-[var(--background-subtle)]" /> 530 530 + <div className="flex-1 space-y-1"> 531 531 + <div className="h-4 w-3/4 rounded bg-[var(--background-subtle)]" /> 532 532 + <div className="h-3 w-1/2 rounded bg-[var(--background-subtle)]" /> 533 533 + </div> 534 534 + </div> 535 535 + ))} 536 536 + </div> 537 537 + </div> 538 538 + ) : upcomingReleases.length === 0 ? ( 539 539 + <div className="card p-6 text-center"> 540 540 + <Clock className="mx-auto mb-3 h-8 w-8 text-[var(--foreground-muted)]" /> 541 541 + <p className="text-sm text-[var(--foreground-muted)]"> 542 542 + No upcoming releases 543 543 + </p> 544 544 + <p className="mt-1 text-xs text-[var(--foreground-muted)]"> 545 545 + Track shows and movies to see their release dates here. 546 546 + </p> 547 547 + </div> 548 548 + ) : ( 549 549 + <div className="space-y-3"> 550 550 + {upcomingReleases.map((release) => ( 551 551 + <Link 552 552 + key={`${release.showId || release.movieId || release.title}-${release.releaseDate}`} 553 553 + to={ 554 554 + release.mediaType === "movie" && release.movieId 555 555 + ? `/movies/${release.movieId}` 556 556 + : release.showId 557 557 + ? `/shows/${release.showId}` 558 558 + : "#" 559 559 + } 560 560 + className="card card-interactive flex items-center gap-3 p-3" 561 561 + > 562 562 + {release.posterPath ? ( 563 563 + <img 564 564 + src={`https://image.tmdb.org/t/p/w200${release.posterPath}`} 565 565 + alt={release.title} 566 566 + className="h-12 w-9 rounded object-cover" 567 567 + /> 568 568 + ) : ( 569 569 + <div className="flex h-12 w-9 items-center justify-center rounded bg-[var(--background-subtle)]"> 570 570 + {release.mediaType === "movie" ? ( 571 571 + <Film className="h-5 w-5 text-[var(--foreground-muted)]" /> 572 572 + ) : ( 573 573 + <Tv className="h-5 w-5 text-[var(--foreground-muted)]" /> 574 574 + )} 575 575 + </div> 576 576 + )} 577 577 + <div className="flex-1 min-w-0"> 578 578 + <p className="font-medium text-sm truncate"> 579 579 + {release.title} 580 580 + </p> 581 581 + <div className="mt-0.5 flex items-center gap-2 text-xs text-[var(--foreground-muted)]"> 582 582 + <span>{formatDate(release.releaseDate)}</span> 583 583 + <span className="text-[var(--accent)]"> 584 584 + • {formatRelativeDate(release.releaseDate)} 585 585 + </span> 586 586 + </div> 587 587 + {getEpisodeInfo(release) && ( 588 588 + <p className="mt-0.5 text-xs text-[var(--foreground-muted)] truncate"> 589 589 + {getEpisodeInfo(release)} 590 590 + </p> 591 591 + )} 592 592 + </div> 593 593 + <span 594 594 + className={`badge ${ 595 595 + release.mediaType === "movie" 596 596 + ? "badge-subtle" 597 597 + : "badge-accent" 598 598 + }`} 599 599 + > 600 600 + {release.mediaType === "movie" ? "Movie" : "TV"} 601 601 + </span> 602 602 + </Link> 603 603 + ))} 604 604 + </div> 605 605 + )} 606 606 + </section> 607 607 + </div> 608 608 + </div> 609 609 + </div> 610 610 + ); 611 611 + }

+11 -3

apps/web/src/routes/following.tsx

reviewed

··· 8 8 socialControllerUnfollowMutation, 9 9 } from "@opnshelf/api"; 10 10 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; 11 11 - import { createFileRoute, Link } from "@tanstack/react-router"; 11 11 + import { createFileRoute, Link, useNavigate } from "@tanstack/react-router"; 12 12 import { 13 13 Activity, 14 14 Clock, ··· 26 26 } from "lucide-react"; 27 27 import { useCallback, useEffect, useState } from "react"; 28 28 import { setupApiClient } from "#/lib/api"; 29 29 - import { useUser } from "#/lib/auth-context"; 29 29 + import { useAuth } from "#/lib/auth-context"; 30 30 31 31 export const Route = createFileRoute("/following")({ 32 32 component: FollowingPage, ··· 64 64 } 65 65 66 66 function FollowingPage() { 67 67 - const user = useUser(); 67 67 + const { user, isAuthenticated, isLoading: authLoading } = useAuth(); 68 68 + const navigate = useNavigate(); 68 69 const queryClient = useQueryClient(); 69 70 const userHandle = user?.handle; 71 71 + 72 72 + // Redirect to login if not authenticated 73 73 + useEffect(() => { 74 74 + if (!authLoading && !isAuthenticated) { 75 75 + navigate({ to: "/login" }); 76 76 + } 77 77 + }, [authLoading, isAuthenticated, navigate]); 70 78 71 79 // Search state 72 80 const [searchQuery, setSearchQuery] = useState("");

+129 -626

apps/web/src/routes/index.tsx

reviewed

··· 1 1 - import type { 2 2 - FollowedActivityItemDto, 3 3 - ReleaseCalendarItemDto, 4 4 - } from "@opnshelf/api"; 5 5 - import { 6 6 - showsControllerGetUserReleaseCalendarOptions, 7 7 - socialControllerGetFeedOptions, 8 8 - } from "@opnshelf/api"; 9 9 - import { useQuery } from "@tanstack/react-query"; 10 10 - import { createFileRoute, Link } from "@tanstack/react-router"; 1 1 + import { createFileRoute, Link, useNavigate } from "@tanstack/react-router"; 11 2 import { 3 3 + ArrowRight, 12 4 Calendar, 13 13 - ChevronRight, 14 14 - Clock, 15 5 Film, 16 6 Heart, 17 17 - Loader2, 18 18 - MessageCircle, 19 19 - TrendingUp, 7 7 + List, 8 8 + Sparkles, 20 9 Tv, 21 10 Users, 22 11 } from "lucide-react"; 23 23 - import { setupApiClient } from "#/lib/api"; 12 12 + import { useEffect } from "react"; 24 13 import { useAuth } from "#/lib/auth-context"; 25 25 - import { 26 26 - useDashboardStats, 27 27 - useDiscoverMovies, 28 28 - useDiscoverShows, 29 29 - useUserShelf, 30 30 - } from "#/lib/hooks"; 31 31 - import MediaCard from "../components/MediaCard"; 32 14 33 15 export const Route = createFileRoute("/")({ 34 34 - component: Dashboard, 35 35 - beforeLoad: async () => { 36 36 - // Check if user is authenticated by fetching user data 37 37 - // If not authenticated, the API will return 401 and onUnauthorized handler will trigger 38 38 - // But we also want to redirect from client-side if we know user isn't logged in 39 39 - }, 16 16 + component: LandingPage, 40 17 }); 41 18 42 42 - // Initialize API client 43 43 - setupApiClient(); 19 19 + function LandingPage() { 20 20 + const { isAuthenticated, isLoading: authLoading } = useAuth(); 21 21 + const navigate = useNavigate(); 44 22 45 45 - // Demo stats - will be replaced with real user stats 46 46 - const demoStats = [ 47 47 - { label: "Movies", value: "0", icon: Film, change: "Track your first movie" }, 48 48 - { label: "Shows", value: "0", icon: Tv, change: "Track your first show" }, 49 49 - { label: "Hours", value: "0", icon: Clock, change: "Start watching" }, 50 50 - { label: "Streak", value: "0", icon: TrendingUp, change: "days" }, 51 51 - ]; 52 52 - 53 53 - // Helper function to format relative time 54 54 - function formatRelativeDate(dateStr: string): string { 55 55 - const releaseDate = new Date(dateStr); 56 56 - const today = new Date(); 57 57 - today.setHours(0, 0, 0, 0); 58 58 - releaseDate.setHours(0, 0, 0, 0); 59 59 - 60 60 - const diffTime = releaseDate.getTime() - today.getTime(); 61 61 - const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); 62 62 - 63 63 - if (diffDays === 0) return "Today"; 64 64 - if (diffDays === 1) return "Tomorrow"; 65 65 - if (diffDays < 7) return `in ${diffDays} days`; 66 66 - if (diffDays < 30) return `in ${Math.ceil(diffDays / 7)} weeks`; 67 67 - return `in ${Math.ceil(diffDays / 30)} months`; 68 68 - } 69 69 - 70 70 - // Helper function to format date 71 71 - function formatDate(dateStr: string): string { 72 72 - const date = new Date(dateStr); 73 73 - return date.toLocaleDateString("en-US", { month: "short", day: "numeric" }); 74 74 - } 75 75 - 76 76 - // Helper function to format relative time for social feed 77 77 - function formatRelativeTime(dateString: string): string { 78 78 - const date = new Date(dateString); 79 79 - const now = new Date(); 80 80 - const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000); 81 81 - 82 82 - if (diffInSeconds < 60) return "Just now"; 83 83 - if (diffInSeconds < 3600) 84 84 - return `${Math.floor(diffInSeconds / 60)} minutes ago`; 85 85 - if (diffInSeconds < 86400) 86 86 - return `${Math.floor(diffInSeconds / 3600)} hours ago`; 87 87 - if (diffInSeconds < 604800) 88 88 - return `${Math.floor(diffInSeconds / 86400)} days ago`; 89 89 - return date.toLocaleDateString(); 90 90 - } 91 91 - 92 92 - // Helper function to get episode info 93 93 - function getEpisodeInfo(item: ReleaseCalendarItemDto): string | undefined { 94 94 - if (item.releaseKind === "episode" && item.seasonNumber !== undefined) { 95 95 - if (item.episodeNumber !== undefined) { 96 96 - return `S${item.seasonNumber}E${item.episodeNumber}`; 23 23 + // Redirect to dashboard if already authenticated 24 24 + useEffect(() => { 25 25 + if (!authLoading && isAuthenticated) { 26 26 + navigate({ to: "/dashboard" }); 97 27 } 98 98 - return `Season ${item.seasonNumber}`; 99 99 - } 100 100 - if (item.releaseKind === "show") { 101 101 - return "Season Premiere"; 102 102 - } 103 103 - return undefined; 104 104 - } 105 105 - 106 106 - // Helper function to format watched time (e.g., "Apr 9 at 2:30 PM", "Jan 15, 2024 at 2:30 PM") 107 107 - function formatWatchedDate(dateStr: string): string { 108 108 - const date = new Date(dateStr); 109 109 - const now = new Date(); 110 110 - const isThisYear = date.getFullYear() === now.getFullYear(); 111 111 - const timeString = date.toLocaleTimeString("en-US", { 112 112 - hour: "numeric", 113 113 - minute: "2-digit", 114 114 - }); 115 115 - 116 116 - if (isThisYear) { 117 117 - const formattedDate = date.toLocaleDateString("en-US", { 118 118 - month: "short", 119 119 - day: "numeric", 120 120 - }); 121 121 - return `${formattedDate} at ${timeString}`; 122 122 - } 123 123 - const formattedDate = date.toLocaleDateString("en-US", { 124 124 - month: "short", 125 125 - day: "numeric", 126 126 - year: "numeric", 127 127 - }); 128 128 - return `${formattedDate} at ${timeString}`; 129 129 - } 130 130 - 131 131 - function Dashboard() { 132 132 - const { user, isAuthenticated, isLoading: authLoading } = useAuth(); 133 133 - const userDid = user?.did; 134 134 - 135 135 - // Fetch real user data from API 136 136 - const { 137 137 - data: moviesData, 138 138 - isLoading: moviesLoading, 139 139 - error: moviesError, 140 140 - } = useDiscoverMovies(1); 141 141 - const { 142 142 - data: showsData, 143 143 - isLoading: showsLoading, 144 144 - error: showsError, 145 145 - } = useDiscoverShows(1); 146 146 - const { data: shelfData, isLoading: shelfLoading } = useUserShelf( 147 147 - userDid || "", 148 148 - 12, 149 149 - ); 150 150 - const { data: statsData, isLoading: statsLoading } = useDashboardStats( 151 151 - userDid || "", 152 152 - ); 153 153 - 154 154 - // Fetch social activity feed 155 155 - const { data: feedData, isLoading: feedLoading } = useQuery({ 156 156 - ...socialControllerGetFeedOptions({ 157 157 - query: { pageSize: 10 }, 158 158 - }), 159 159 - enabled: !!userDid, 160 160 - }); 161 161 - 162 162 - // Fetch release calendar data 163 163 - const { data: calendarData, isLoading: calendarLoading } = useQuery({ 164 164 - ...showsControllerGetUserReleaseCalendarOptions({ 165 165 - path: { userDid: user?.did || "" }, 166 166 - }), 167 167 - enabled: !!user?.did, 168 168 - }); 169 169 - 170 170 - // Get upcoming releases - filter to next two weeks, limit to 10 171 171 - const upcomingReleases = calendarData?.items 172 172 - ? calendarData.items 173 173 - .filter((item) => { 174 174 - const releaseDate = new Date(item.releaseDate); 175 175 - const today = new Date(); 176 176 - today.setHours(0, 0, 0, 0); 177 177 - const twoWeeksLater = new Date(today); 178 178 - twoWeeksLater.setDate(today.getDate() + 14); 179 179 - return releaseDate >= today && releaseDate <= twoWeeksLater; 180 180 - }) 181 181 - .sort( 182 182 - (a, b) => 183 183 - new Date(a.releaseDate).getTime() - 184 184 - new Date(b.releaseDate).getTime(), 185 185 - ) 186 186 - .slice(0, 10) 187 187 - : []; 188 188 - 189 189 - const isLoading = 190 190 - moviesLoading || 191 191 - showsLoading || 192 192 - shelfLoading || 193 193 - statsLoading || 194 194 - feedLoading || 195 195 - authLoading || 196 196 - calendarLoading; 197 197 - const hasError = moviesError || showsError; 198 198 - 199 199 - // Calculate real stats from shelf data 200 200 - const movieCount = 201 201 - shelfData?.items?.filter((item) => item.type === "movie").length || 0; 202 202 - const showCount = 203 203 - shelfData?.items?.filter((item) => item.type === "episode").length || 0; 28 28 + }, [authLoading, isAuthenticated, navigate]); 204 29 205 205 - const userStats = [ 30 30 + const features = [ 206 31 { 207 207 - label: "Movies", 208 208 - value: String(movieCount), 209 32 icon: Film, 210 210 - change: statsData 211 211 - ? `+${statsData.recentMovies || 0} this month` 212 212 - : "Track your first movie", 33 33 + title: "Track Everything", 34 34 + description: 35 35 + "Log movies and TV shows you watch. Keep a complete history of your viewing journey.", 213 36 }, 214 37 { 215 215 - label: "Shows", 216 216 - value: String(showCount), 217 217 - icon: Tv, 218 218 - change: statsData 219 219 - ? `+${statsData.recentShows || 0} this month` 220 220 - : "Track your first show", 38 38 + icon: Heart, 39 39 + title: "Rate & Review", 40 40 + description: 41 41 + "Share your thoughts and ratings. Help others discover great content.", 221 42 }, 222 43 { 223 223 - label: "Hours", 224 224 - value: String(Math.round(statsData?.totalWatchTimeHours || 0)), 225 225 - icon: Clock, 226 226 - change: statsData?.weeklyWatchTimeHours 227 227 - ? `${statsData.weeklyWatchTimeHours}h this week` 228 228 - : "Start watching", 44 44 + icon: Calendar, 45 45 + title: "Release Calendar", 46 46 + description: 47 47 + "Never miss a premiere. Track upcoming releases for shows you follow.", 48 48 + }, 49 49 + { 50 50 + icon: Users, 51 51 + title: "Social Feed", 52 52 + description: 53 53 + "See what your friends are watching. Discover new favorites together.", 54 54 + }, 55 55 + { 56 56 + icon: List, 57 57 + title: "Curated Lists", 58 58 + description: 59 59 + "Create and share watchlists. Organize your must-watch content.", 229 60 }, 230 61 { 231 231 - label: "Streak", 232 232 - value: String(statsData?.streakDays || 0), 233 233 - icon: TrendingUp, 234 234 - change: 235 235 - statsData?.streakDays && statsData.streakDays > 0 236 236 - ? "days" 237 237 - : "Start a streak", 62 62 + icon: Tv, 63 63 + title: "Episode Tracking", 64 64 + description: 65 65 + "Track episodes and seasons. Pick up right where you left off.", 238 66 }, 239 67 ]; 240 68 241 241 - // Transform API data for MediaCard 242 242 - const featuredContent = [ 243 243 - ...(moviesData?.results?.slice(0, 4).map((movie) => ({ 244 244 - id: movie.id, 245 245 - title: movie.title, 246 246 - type: "movie" as const, 247 247 - posterUrl: movie.poster_path 248 248 - ? `https://image.tmdb.org/t/p/w500${movie.poster_path}` 249 249 - : "", 250 250 - backdropUrl: movie.backdrop_path 251 251 - ? `https://image.tmdb.org/t/p/original${movie.backdrop_path}` 252 252 - : undefined, 253 253 - year: movie.release_date 254 254 - ? new Date(movie.release_date).getFullYear() 255 255 - : undefined, 256 256 - })) || []), 257 257 - ...(showsData?.results?.slice(0, 2).map((show) => ({ 258 258 - id: show.id, 259 259 - title: show.name, 260 260 - type: "show" as const, 261 261 - posterUrl: show.poster_path 262 262 - ? `https://image.tmdb.org/t/p/w500${show.poster_path}` 263 263 - : "", 264 264 - backdropUrl: show.backdrop_path 265 265 - ? `https://image.tmdb.org/t/p/original${show.backdrop_path}` 266 266 - : undefined, 267 267 - year: show.first_air_date 268 268 - ? new Date(show.first_air_date).getFullYear() 269 269 - : undefined, 270 270 - })) || []), 271 271 - ].slice(0, 6); 272 272 - 273 273 - // Transform user's tracked content for display from shelf data 274 274 - const userContent = 275 275 - shelfData?.items?.slice(0, 6).map((item) => { 276 276 - if (item.type === "movie") { 277 277 - return { 278 278 - id: item.movieId, 279 279 - title: item.title, 280 280 - type: "movie" as const, 281 281 - posterUrl: item.posterPath 282 282 - ? `https://image.tmdb.org/t/p/w500${item.posterPath}` 283 283 - : "", 284 284 - backdropUrl: item.backdropPath 285 285 - ? `https://image.tmdb.org/t/p/original${item.backdropPath}` 286 286 - : undefined, 287 287 - year: item.releaseYear, 288 288 - isWatched: !!item.watchedDate, 289 289 - watchedDate: item.watchedDate, 290 290 - }; 291 291 - } 292 292 - // Episode type 293 293 - return { 294 294 - id: item.id, // Use the unique tracked episode ID 295 295 - showId: item.showId, 296 296 - title: 297 297 - item.episodeTitle || 298 298 - `${item.showTitle} S${item.seasonNumber}E${item.episodeNumber}`, 299 299 - type: "show" as const, 300 300 - posterUrl: item.posterPath 301 301 - ? `https://image.tmdb.org/t/p/w500${item.posterPath}` 302 302 - : "", 303 303 - backdropUrl: item.backdropPath 304 304 - ? `https://image.tmdb.org/t/p/original${item.backdropPath}` 305 305 - : undefined, 306 306 - year: item.firstAirYear, 307 307 - episodeInfo: `${item.showTitle} • S${item.seasonNumber}E${item.episodeNumber}`, 308 308 - isWatched: !!item.watchedDate, 309 309 - watchedDate: item.watchedDate, 310 310 - }; 311 311 - }) || []; 312 312 - 313 313 - // Use user content if available, otherwise fall back to featured content 314 314 - const displayContent = userContent.length > 0 ? userContent : featuredContent; 315 315 - 316 69 return ( 317 317 - <div className="container-app py-8"> 318 318 - {/* Welcome Section */} 319 319 - <div className="mb-8"> 320 320 - <h1 className="text-display-2 mb-2"> 321 321 - {user?.displayName 322 322 - ? `Welcome back, ${user.displayName}` 323 323 - : "Welcome back"} 324 324 - </h1> 325 325 - <p className="text-[var(--foreground-muted)]"> 326 326 - {user?.handle 327 327 - ? `@${user.handle}` 328 328 - : "Here's what's happening with your media tracking."} 329 329 - </p> 330 330 - </div> 331 331 - 332 332 - {/* Stats Grid */} 333 333 - <div className="mb-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-4"> 334 334 - {(statsLoading ? demoStats : userStats).map((stat, index) => { 335 335 - const Icon = stat.icon; 336 336 - return ( 337 337 - <div 338 338 - key={stat.label} 339 339 - className="card p-5" 340 340 - style={{ animationDelay: `${index * 50}ms` }} 341 341 - > 342 342 - <div className="flex items-center justify-between"> 343 343 - <div> 344 344 - <p className="text-sm text-[var(--foreground-muted)]"> 345 345 - {stat.label} 346 346 - </p> 347 347 - <p className="text-display-3 mt-1">{stat.value}</p> 348 348 - <p className="mt-1 text-xs text-[var(--accent)]"> 349 349 - {stat.change} 350 350 - </p> 351 351 - </div> 352 352 - <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-[var(--accent-subtle)] text-[var(--accent)]"> 353 353 - <Icon className="h-6 w-6" /> 354 354 - </div> 355 355 - </div> 70 70 + <div className="min-h-screen"> 71 71 + {/* Hero Section */} 72 72 + <section className="relative overflow-hidden pt-16 pb-24 lg:pt-32 lg:pb-40"> 73 73 + <div className="container-app"> 74 74 + <div className="mx-auto max-w-3xl text-center"> 75 75 + {/* Badge */} 76 76 + <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-[var(--border)] bg-[var(--background-elevated)] px-4 py-1.5 text-sm"> 77 77 + <Sparkles className="h-4 w-4 text-[var(--accent)]" /> 78 78 + <span>Powered by AT Protocol</span> 356 79 </div> 357 357 - ); 358 358 - })} 359 359 - </div> 360 80 361 361 - {hasError && ( 362 362 - <div className="mb-6 rounded-lg border border-red-200 bg-red-50 p-4 text-red-800"> 363 363 - <p className="font-medium">Failed to load content</p> 364 364 - <p className="text-sm">Please check your connection and try again.</p> 365 365 - </div> 366 366 - )} 81 81 + {/* Headline */} 82 82 + <h1 className="text-display-1 mb-6"> 83 83 + Track what you watch. 84 84 + <br /> 85 85 + Share with friends. 86 86 + </h1> 367 87 368 368 - {/* Show sign in prompt if not authenticated */} 369 369 - {!authLoading && !isAuthenticated && ( 370 370 - <div className="mb-8 rounded-xl border border-[var(--border)] bg-[var(--background-elevated)] p-8 text-center"> 371 371 - <h2 className="text-display-3 mb-2">Welcome to OpnShelf</h2> 372 372 - <p className="mb-6 text-[var(--foreground-muted)]"> 373 373 - Sign in with your AT Protocol account to track your movies and 374 374 - shows. 375 375 - </p> 376 376 - <Link to="/login" className="btn btn-primary inline-flex gap-2"> 377 377 - Sign In 378 378 - <ChevronRight className="h-4 w-4" /> 379 379 - </Link> 380 380 - </div> 381 381 - )} 88 88 + {/* Subheadline */} 89 89 + <p className="mx-auto mb-10 max-w-xl text-lg text-[var(--foreground-muted)]"> 90 90 + OpnShelf is your personal media tracker. Log movies and shows, see 91 91 + what friends are watching, and discover your next favorite. 92 92 + </p> 382 93 383 383 - <div className="grid gap-8 lg:grid-cols-3"> 384 384 - {/* Main Content - Continue Watching */} 385 385 - <div className="lg:col-span-2 space-y-8"> 386 386 - {/* Continue Watching */} 387 387 - <section> 388 388 - <div className="mb-4 flex items-center justify-between"> 389 389 - <h2 className="text-display-3"> 390 390 - {userContent.length > 0 ? "Your Shelf" : "Featured For You"} 391 391 - </h2> 94 94 + {/* CTA Buttons */} 95 95 + <div className="flex flex-col items-center justify-center gap-4 sm:flex-row"> 392 96 <Link 393 393 - to="/shelf" 394 394 - className="flex items-center gap-1 text-sm font-medium text-[var(--accent)] hover:text-[var(--accent-hover)]" 97 97 + to="/login" 98 98 + className="btn btn-primary inline-flex items-center gap-2 px-8 py-3 text-lg" 395 99 > 396 396 - View all 397 397 - <ChevronRight className="h-4 w-4" /> 100 100 + Get Started 101 101 + <ArrowRight className="h-5 w-5" /> 398 102 </Link> 399 399 - </div> 400 400 - 401 401 - {isLoading ? ( 402 402 - <div className="flex h-64 items-center justify-center"> 403 403 - <Loader2 className="h-8 w-8 animate-spin text-[var(--accent)]" /> 404 404 - </div> 405 405 - ) : displayContent.length > 0 ? ( 406 406 - <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3"> 407 407 - {displayContent.map((item) => ( 408 408 - <MediaCard 409 409 - key={item.id} 410 410 - id={item.id} 411 411 - title={item.title} 412 412 - posterUrl={item.posterUrl} 413 413 - backdropUrl={item.backdropUrl} 414 414 - type={item.type} 415 415 - year={item.year} 416 416 - episodeInfo={item.episodeInfo} 417 417 - watchedDate={ 418 418 - item.watchedDate 419 419 - ? formatWatchedDate(item.watchedDate) 420 420 - : undefined 421 421 - } 422 422 - layout="backdrop" 423 423 - size="md" 424 424 - /> 425 425 - ))} 426 426 - </div> 427 427 - ) : ( 428 428 - <div className="card p-8 text-center"> 429 429 - <p className="text-[var(--foreground-muted)]"> 430 430 - No content yet. Start tracking movies and shows! 431 431 - </p> 432 432 - <Link to="/search" className="btn btn-primary mt-4 inline-flex"> 433 433 - Discover Content 434 434 - </Link> 435 435 - </div> 436 436 - )} 437 437 - </section> 438 438 - 439 439 - {/* Social Feed - Activity from people you follow */} 440 440 - <section> 441 441 - <div className="mb-4 flex items-center justify-between"> 442 442 - <h2 className="text-display-3">Friend Activity</h2> 443 103 <Link 444 444 - to="/following" 445 445 - className="flex items-center gap-1 text-sm font-medium text-[var(--accent)] hover:text-[var(--accent-hover)]" 104 104 + to="/about" 105 105 + className="text-[var(--foreground-muted)] hover:text-[var(--foreground)] transition-colors" 446 106 > 447 447 - <Users className="h-4 w-4" /> 448 448 - View all 107 107 + Learn more 449 108 </Link> 450 109 </div> 451 451 - {feedLoading ? ( 452 452 - <div className="card p-8"> 453 453 - <div className="space-y-3"> 454 454 - {[1, 2, 3].map((i) => ( 455 455 - <div 456 456 - key={i} 457 457 - className="flex items-center gap-3 animate-pulse" 458 458 - > 459 459 - <div className="h-10 w-10 rounded-full bg-[var(--background-subtle)]" /> 460 460 - <div className="flex-1 space-y-1"> 461 461 - <div className="h-4 w-1/2 rounded bg-[var(--background-subtle)]" /> 462 462 - <div className="h-3 w-1/3 rounded bg-[var(--background-subtle)]" /> 463 463 - </div> 464 464 - </div> 465 465 - ))} 110 110 + </div> 111 111 + </div> 112 112 + 113 113 + {/* Background decoration */} 114 114 + <div className="absolute inset-0 -z-10 overflow-hidden"> 115 115 + <div className="absolute left-1/2 top-0 h-[600px] w-[800px] -translate-x-1/2 rounded-full bg-[var(--accent)] opacity-[0.03] blur-3xl" /> 116 116 + </div> 117 117 + </section> 118 118 + 119 119 + {/* Features Grid */} 120 120 + <section className="border-t border-[var(--border)] py-24"> 121 121 + <div className="container-app"> 122 122 + <div className="mb-16 text-center"> 123 123 + <h2 className="text-display-2 mb-4">Everything you need</h2> 124 124 + <p className="mx-auto max-w-xl text-[var(--foreground-muted)]"> 125 125 + A complete toolkit for media tracking and social discovery. 126 126 + </p> 127 127 + </div> 128 128 + 129 129 + <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3"> 130 130 + {features.map((feature) => { 131 131 + const Icon = feature.icon; 132 132 + return ( 133 133 + <div 134 134 + key={feature.title} 135 135 + className="card p-6 transition-colors hover:border-[var(--border-strong)]" 136 136 + > 137 137 + <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-[var(--accent-subtle)] text-[var(--accent)]"> 138 138 + <Icon className="h-6 w-6" /> 139 139 + </div> 140 140 + <h3 className="mb-2 text-lg font-semibold"> 141 141 + {feature.title} 142 142 + </h3> 143 143 + <p className="text-sm text-[var(--foreground-muted)]"> 144 144 + {feature.description} 145 145 + </p> 466 146 </div> 467 467 - </div> 468 468 - ) : feedData?.items && feedData.items.length > 0 ? ( 469 469 - <div className="card divide-y divide-[var(--border)]"> 470 470 - {feedData.items.map((item: FollowedActivityItemDto) => ( 471 471 - <div 472 472 - key={item.id} 473 473 - className="flex items-start gap-3 p-4 first:pt-5 last:pb-5" 474 474 - > 475 475 - {/* User Avatar */} 476 476 - <img 477 477 - src={ 478 478 - item.actor.avatar || 479 479 - `https://i.pravatar.cc/150?u=${item.actor.did}` 480 480 - } 481 481 - alt={item.actor.displayName || item.actor.handle} 482 482 - className="h-10 w-10 rounded-full object-cover" 483 483 - /> 484 484 - <div className="flex-1 min-w-0"> 485 485 - {/* Activity Header */} 486 486 - <p className="text-sm"> 487 487 - <Link 488 488 - to={`/profile/${item.actor.handle}`} 489 489 - className="font-medium hover:text-[var(--accent)]" 490 490 - > 491 491 - {item.actor.displayName || item.actor.handle} 492 492 - </Link>{" "} 493 493 - {item.verb === "watch" && ( 494 494 - <span className="text-[var(--foreground-muted)]"> 495 495 - watched 496 496 - </span> 497 497 - )} 498 498 - {item.verb === "follow" && ( 499 499 - <span className="text-[var(--foreground-muted)]"> 500 500 - followed 501 501 - </span> 502 502 - )} 503 503 - {item.verb === "list_add" && ( 504 504 - <span className="text-[var(--foreground-muted)]"> 505 505 - added to list 506 506 - </span> 507 507 - )} 508 508 - </p> 509 509 - {/* Content Title */} 510 510 - <p className="font-medium text-sm mt-0.5"> 511 511 - <Link 512 512 - to={`/${item.content.type}/${item.content.id}`} 513 513 - className="hover:text-[var(--accent)]" 514 514 - > 515 515 - {item.content.title} 516 516 - {item.content.type === "episode" && 517 517 - item.content.episodeTitle && ( 518 518 - <span className="text-[var(--foreground-muted)]"> 519 519 - {" "} 520 520 - (S{item.content.seasonNumber}E 521 521 - {item.content.episodeNumber}) 522 522 - </span> 523 523 - )} 524 524 - </Link> 525 525 - </p> 526 526 - {/* Timestamp & Actions */} 527 527 - <div className="flex items-center gap-3 mt-1.5 text-xs text-[var(--foreground-muted)]"> 528 528 - <span>{formatRelativeTime(item.createdAt)}</span> 529 529 - {item.verb === "watch" && ( 530 530 - <button 531 531 - type="button" 532 532 - className="flex items-center gap-1 hover:text-[var(--accent)]" 533 533 - > 534 534 - <Heart className="h-3 w-3" /> 535 535 - Like 536 536 - </button> 537 537 - )} 538 538 - </div> 539 539 - </div> 540 540 - {/* Content Type Badge */} 541 541 - <span 542 542 - className={`badge ${item.content.type === "movie" ? "badge-subtle" : "badge-accent"}`} 543 543 - > 544 544 - {item.content.type === "movie" ? "Movie" : "TV"} 545 545 - </span> 546 546 - </div> 547 547 - ))} 548 548 - </div> 549 549 - ) : ( 550 550 - <div className="card p-8 text-center"> 551 551 - <MessageCircle className="h-12 w-12 mx-auto mb-3 text-[var(--foreground-muted)]" /> 552 552 - <p className="text-[var(--foreground-muted)]"> 553 553 - Activity from people you follow will appear here. 554 554 - </p> 555 555 - <Link 556 556 - to="/following" 557 557 - className="btn btn-primary mt-4 inline-flex" 558 558 - > 559 559 - <Users className="h-4 w-4 mr-2" /> 560 560 - Find people to follow 561 561 - </Link> 562 562 - </div> 563 563 - )} 564 564 - </section> 147 147 + ); 148 148 + })} 149 149 + </div> 565 150 </div> 151 151 + </section> 566 152 567 567 - {/* Sidebar */} 568 568 - <div className="space-y-8"> 569 569 - {/* Upcoming */} 570 570 - <section> 571 571 - <div className="mb-4 flex items-center justify-between"> 572 572 - <h2 className="text-display-3">Upcoming</h2> 573 573 - <Link 574 574 - to="/calendar" 575 575 - className="flex items-center gap-1 text-sm font-medium text-[var(--accent)] hover:text-[var(--accent-hover)]" 576 576 - > 577 577 - <Calendar className="h-4 w-4" /> 578 578 - Calendar 579 579 - </Link> 580 580 - </div> 581 581 - {calendarLoading ? ( 582 582 - <div className="card p-4"> 583 583 - <div className="space-y-3"> 584 584 - {[1, 2, 3].map((i) => ( 585 585 - <div 586 586 - key={i} 587 587 - className="flex items-center gap-3 animate-pulse" 588 588 - > 589 589 - <div className="h-12 w-9 rounded bg-[var(--background-subtle)]" /> 590 590 - <div className="flex-1 space-y-1"> 591 591 - <div className="h-4 w-3/4 rounded bg-[var(--background-subtle)]" /> 592 592 - <div className="h-3 w-1/2 rounded bg-[var(--background-subtle)]" /> 593 593 - </div> 594 594 - </div> 595 595 - ))} 596 596 - </div> 597 597 - </div> 598 598 - ) : upcomingReleases.length === 0 ? ( 599 599 - <div className="card p-6 text-center"> 600 600 - <Clock className="mx-auto mb-3 h-8 w-8 text-[var(--foreground-muted)]" /> 601 601 - <p className="text-sm text-[var(--foreground-muted)]"> 602 602 - No upcoming releases 603 603 - </p> 604 604 - <p className="mt-1 text-xs text-[var(--foreground-muted)]"> 605 605 - Track shows and movies to see their release dates here. 606 606 - </p> 607 607 - </div> 608 608 - ) : ( 609 609 - <div className="space-y-3"> 610 610 - {upcomingReleases.map((release) => ( 611 611 - <Link 612 612 - key={`${release.showId || release.movieId || release.title}-${release.releaseDate}`} 613 613 - to={ 614 614 - release.mediaType === "movie" && release.movieId 615 615 - ? `/movies/${release.movieId}` 616 616 - : release.showId 617 617 - ? `/shows/${release.showId}` 618 618 - : "#" 619 619 - } 620 620 - className="card card-interactive flex items-center gap-3 p-3" 621 621 - > 622 622 - {release.posterPath ? ( 623 623 - <img 624 624 - src={`https://image.tmdb.org/t/p/w200${release.posterPath}`} 625 625 - alt={release.title} 626 626 - className="h-12 w-9 rounded object-cover" 627 627 - /> 628 628 - ) : ( 629 629 - <div className="flex h-12 w-9 items-center justify-center rounded bg-[var(--background-subtle)]"> 630 630 - {release.mediaType === "movie" ? ( 631 631 - <Film className="h-5 w-5 text-[var(--foreground-muted)]" /> 632 632 - ) : ( 633 633 - <Tv className="h-5 w-5 text-[var(--foreground-muted)]" /> 634 634 - )} 635 635 - </div> 636 636 - )} 637 637 - <div className="flex-1 min-w-0"> 638 638 - <p className="font-medium text-sm truncate"> 639 639 - {release.title} 640 640 - </p> 641 641 - <div className="mt-0.5 flex items-center gap-2 text-xs text-[var(--foreground-muted)]"> 642 642 - <span>{formatDate(release.releaseDate)}</span> 643 643 - <span className="text-[var(--accent)]"> 644 644 - • {formatRelativeDate(release.releaseDate)} 645 645 - </span> 646 646 - </div> 647 647 - {getEpisodeInfo(release) && ( 648 648 - <p className="mt-0.5 text-xs text-[var(--foreground-muted)] truncate"> 649 649 - {getEpisodeInfo(release)} 650 650 - </p> 651 651 - )} 652 652 - </div> 653 653 - <span 654 654 - className={`badge ${ 655 655 - release.mediaType === "movie" 656 656 - ? "badge-subtle" 657 657 - : "badge-accent" 658 658 - }`} 659 659 - > 660 660 - {release.mediaType === "movie" ? "Movie" : "TV"} 661 661 - </span> 662 662 - </Link> 663 663 - ))} 664 664 - </div> 665 665 - )} 666 666 - </section> 153 153 + {/* CTA Section */} 154 154 + <section className="border-t border-[var(--border)] py-24"> 155 155 + <div className="container-app"> 156 156 + <div className="mx-auto max-w-2xl text-center"> 157 157 + <h2 className="text-display-2 mb-4">Ready to start tracking?</h2> 158 158 + <p className="mb-8 text-[var(--foreground-muted)]"> 159 159 + Join thousands of users tracking their media journey with 160 160 + OpnShelf. Sign in with your AT Protocol account to get started. 161 161 + </p> 162 162 + <Link 163 163 + to="/login" 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 167 + <ArrowRight className="h-5 w-5" /> 168 168 + </Link> 169 169 + </div> 667 170 </div> 668 668 - </div> 171 171 + </section> 669 172 </div> 670 173 ); 671 174 }

+13 -4

apps/web/src/routes/lists.tsx

reviewed

··· 1 1 import type { MediaInListDto } from "@opnshelf/api"; 2 2 - import { createFileRoute } from "@tanstack/react-router"; 2 2 + import { createFileRoute, useNavigate } from "@tanstack/react-router"; 3 3 import { 4 4 AlertCircle, 5 5 Clock, ··· 16 16 Star, 17 17 Tv, 18 18 } from "lucide-react"; 19 19 - import { useMemo, useState } from "react"; 19 19 + import { useEffect, useMemo, useState } from "react"; 20 20 import { Button } from "#/components/ui/button"; 21 21 import { 22 22 Dialog, ··· 25 25 DialogHeader, 26 26 DialogTitle, 27 27 } from "#/components/ui/dialog"; 28 28 - import { useUser } from "#/lib/auth-context"; 28 28 + import { useAuth } from "#/lib/auth-context"; 29 29 import { useCreateList, useList, useUserLists } from "#/lib/hooks"; 30 30 import MediaCard from "../components/MediaCard"; 31 31 ··· 129 129 } 130 130 131 131 function ListsPage() { 132 132 - const _user = useUser(); 132 132 + const { isAuthenticated, isLoading: authLoading } = useAuth(); 133 133 + const navigate = useNavigate(); 134 134 + 135 135 + // Redirect to login if not authenticated 136 136 + useEffect(() => { 137 137 + if (!authLoading && !isAuthenticated) { 138 138 + navigate({ to: "/login" }); 139 139 + } 140 140 + }, [authLoading, isAuthenticated, navigate]); 141 141 + 133 142 const [selectedListSlug, setSelectedListSlug] = useState<string | null>(null); 134 143 const [viewMode, setViewMode] = useState<"grid" | "list">("grid"); 135 144 const [showCreateModal, setShowCreateModal] = useState(false);

+8 -9

apps/web/src/routes/login.tsx

reviewed

··· 1 1 - import { createFileRoute, redirect } from "@tanstack/react-router"; 1 1 + import { createFileRoute, useNavigate } from "@tanstack/react-router"; 2 2 import { ArrowRight, Film, Loader2 } from "lucide-react"; 3 3 - import { useState } from "react"; 3 3 + import { useEffect, useState } from "react"; 4 4 import { useAuth } from "#/lib/auth-context"; 5 5 6 6 export const Route = createFileRoute("/login")({ 7 7 component: LoginPage, 8 8 - beforeLoad: () => { 9 9 - // If user is already authenticated, redirect to home 10 10 - // Note: This is a simple check, the actual check happens in the component 11 11 - }, 12 8 }); 13 9 14 10 function LoginPage() { 15 11 const [handle, setHandle] = useState(""); 16 12 const [isLoading, setIsLoading] = useState(false); 17 13 const { login, signup, isAuthenticated } = useAuth(); 14 14 + const navigate = useNavigate(); 18 15 19 16 // Redirect if already authenticated 20 20 - if (isAuthenticated) { 21 21 - throw redirect({ to: "/" }); 22 22 - } 17 17 + useEffect(() => { 18 18 + if (isAuthenticated) { 19 19 + navigate({ to: "/dashboard" }); 20 20 + } 21 21 + }, [isAuthenticated, navigate]); 23 22 24 23 const handleLogin = (e: React.FormEvent) => { 25 24 e.preventDefault();