refactor: implement project package segment lazy select

src/app/(modules)/results/[videoId]/page.tsx

@@ -1,16 +1,11 @@
 'use client';
 
-import { useState, useEffect, useMemo } from 'react';
-import { useRouter, useParams } from 'next/navigation';
-import { Button } from '@/components/ui/button';
+import { useMemo } from 'react';
+import { useParams } from 'next/navigation';
 import { Loader2, TrendingUp } from 'lucide-react';
 import VideoPlayerSection from '@/components/videoPlayerSection';
 import { PageHeader } from '@/components/page-header';
-import { sessionService } from '@/services/api';
-import { SessionContext, CompletedVideoResult, DetectionType } from '@/types';
-import { clearVideoFile } from '@/lib/video-storage';
-import { ROUTES } from '@/utils/routes';
-import { Card } from '@/components/ui/card';
+import { CompletedVideoResult, DetectionType } from '@/types';
 import { getDetectionModeConfig } from '@/constants/detectionModeConfig';
 import { useVideoResultsQuery } from '../hooks/useVideoResults';
 
@@ -26,9 +21,7 @@ const inferDetectionType = (data: CompletedVideoResult): DetectionType => {
 };
 
 export default function VideoResultsPage() {
-  const router = useRouter();
   const { videoId } = useParams() as { videoId: string };
-  const [session, setSession] = useState<SessionContext | null>(null);
 
   const {
     data: detectionData,
@@ -48,22 +41,6 @@ export default function VideoResultsPage() {
       : 'Failed to load results'
     : null;
 
-  useEffect(() => {
-    setSession(sessionService.loadSession());
-  }, []);
-
-  const handleNewAnalysis = async () => {
-    if (videoId) {
-      try {
-        await clearVideoFile(videoId);
-      } catch (err) {
-        console.error('Failed to clear video file:', err);
-      }
-    }
-    sessionService.clearSession();
-    router.push(ROUTES.UPLOAD);
-  };
-
   const getTitle = () => {
     const config = getDetectionModeConfig(detectionType);
     return `${config.label} Results`;
@@ -71,55 +48,29 @@ export default function VideoResultsPage() {
 
   if (isLoading) {
     return (
-      <div className="min-h-screen flex items-center justify-center">
-        <Card className="flex flex-col items-center gap-4 p-8">
-          <Loader2 className="h-8 w-8 animate-spin text-primary" />
-          <p className="text-sm text-muted-foreground">
-            Loading detection results...
-          </p>
-        </Card>
+      <div className="min-h-[60vh] flex items-center justify-center">
+        <Loader2 className="h-8 w-8 animate-spin text-primary" />
       </div>
     );
   }
 
   if (error) {
     return (
-      <div className="min-h-screen flex items-center justify-center">
-        <Card className="flex flex-col items-center gap-6 p-8 text-center max-w-md">
-          <p className="text-destructive font-medium">{error}</p>
-          <div className="flex gap-4">
-            <Button
-              onClick={() => router.push(ROUTES.UPLOAD)}
-              variant="outline"
-            >
-              Back to Upload
-            </Button>
-            <Button onClick={handleNewAnalysis}>New Analysis</Button>
-          </div>
-        </Card>
+      <div className="min-h-[60vh] flex items-center justify-center">
+        <p className="text-sm text-destructive">{error}</p>
       </div>
     );
   }
 
   return (
-    <div className="min-h-screen">
-      <main className="min-h-screen">
-        <div className="container mx-auto px-6 py-10 max-w-[1600px]">
-          <div className="mb-8">
-            <PageHeader
-              title={getTitle()}
-              description={`Video ID: ${videoId}`}
-              icon={TrendingUp}
-            />
-          </div>
+    <div className="space-y-8">
+      <PageHeader
+        title={getTitle()}
+        description={`Video ID: ${videoId}`}
+        icon={TrendingUp}
+      />
 
-          {detectionData && (
-            <VideoPlayerSection
-              data={detectionData}
-            />
-          )}
-        </div>
-      </main>
+      {detectionData && <VideoPlayerSection data={detectionData} />}
     </div>
   );
 }

src/app/(modules)/results/page.tsx

@@ -1,33 +0,0 @@
-'use client';
-
-import { useEffect } from 'react';
-import { useRouter } from 'next/navigation';
-import { Loader2 } from 'lucide-react';
-import { Card } from '@/components/ui/card';
-import { sessionService } from '@/services/api';
-import { ROUTES } from '@/utils/routes';
-
-export default function ResultsPage() {
-  const router = useRouter();
-
-  useEffect(() => {
-    const storedSession = sessionService.loadSession();
-    const videoData = sessionService.loadVideoData();
-
-    if (!sessionService.isSessionValid(storedSession) || !videoData?.videoId) {
-      router.replace(ROUTES.UPLOAD);
-      return;
-    }
-
-    router.replace(`${ROUTES.RESULTS}/${videoData.videoId}`);
-  }, [router]);
-
-  return (
-    <div className="min-h-screen flex items-center justify-center">
-      <Card className="flex flex-col items-center gap-4 p-8">
-        <Loader2 className="h-8 w-8 animate-spin text-primary" />
-        <p className="text-sm text-muted-foreground">Loading results...</p>
-      </Card>
-    </div>
-  );
-}