From 1181b1fe22c7f5a998f8954f9e02a184a3513cf8 Mon Sep 17 00:00:00 2001
From: SnapOtter <snapotter.hq@gmail.com>
Date: Sat, 13 Jun 2026 15:19:58 +0800
Subject: [PATCH] fix(web): restore preview panel rendering for all file types

The home-page preview panel always rendered ImageViewer regardless of the
uploaded file's modality, causing videos, audio, PDFs, and data files to
show "Preview not available". Root cause: the preview branching only
checked for a blob URL and assumed all files were images.

Fix: branch on currentEntry.previewKind so the existing MediaPlayerView,
DocumentView, and a file-info fallback are activated for their respective
modalities. Also widen the AppLayout dropzone from image-only to all file
types so non-image files can reach the home page in the first place.
---
 apps/web/src/components/layout/app-layout.tsx |  4 ++-
 apps/web/src/pages/home-page.tsx              | 36 +++++++++++++++++--
 2 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/layout/app-layout.tsx b/apps/web/src/components/layout/app-layout.tsx
index 8112f1f3..df1e780d 100644
--- a/apps/web/src/components/layout/app-layout.tsx
+++ b/apps/web/src/components/layout/app-layout.tsx
@@ -148,7 +148,9 @@ export function AppLayout({
         className={cn("flex-1 flex flex-col overflow-hidden", isMobile && "pt-12 pb-20")}
       >
         <div className="flex-1 overflow-y-auto p-6 flex items-center justify-center">
-          {children || <Dropzone onFiles={onFiles} onUrlImport={onUrlImport} accept="image/*" />}
+          {children || (
+            <Dropzone onFiles={onFiles} onUrlImport={onUrlImport} fileFilter={() => true} />
+          )}
         </div>
       </main>
 
diff --git a/apps/web/src/pages/home-page.tsx b/apps/web/src/pages/home-page.tsx
index 1975d015..12a14ef5 100644
--- a/apps/web/src/pages/home-page.tsx
+++ b/apps/web/src/pages/home-page.tsx
@@ -5,12 +5,14 @@ import {
   TOOL_BUNDLE_MAP,
   TOOLS,
 } from "@snapotter/shared";
-import { Clock, Download, Loader2 } from "lucide-react";
+import { Clock, Download, FileArchive, Loader2 } from "lucide-react";
 import { useCallback, useEffect, useMemo } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { ImageViewer } from "@/components/common/image-viewer";
 import { MultiImageViewer } from "@/components/common/multi-image-viewer";
 import { AppLayout } from "@/components/layout/app-layout";
+import { DocumentView } from "@/components/tools/document-view";
+import { MediaPlayerView } from "@/components/tools/media-player-view";
 import { useTranslation } from "@/contexts/i18n-context";
 import { useMobile } from "@/hooks/use-mobile";
 import { ICON_MAP } from "@/lib/icon-map";
@@ -173,7 +175,7 @@ export function HomePage() {
             })}
           </div>
 
-          {/* Full-width image preview */}
+          {/* Full-width file preview */}
           <div className="flex-1 flex items-center justify-center p-4 min-h-0">
             {files.length > 1 ? (
               <MultiImageViewer />
@@ -183,6 +185,20 @@ export function HomePage() {
                 <p className="text-sm text-muted-foreground">{t.homePage.generatingPreview}</p>
                 <p className="text-xs text-muted-foreground">{selectedFileName}</p>
               </div>
+            ) : currentEntry?.previewKind === "video" || currentEntry?.previewKind === "audio" ? (
+              <MediaPlayerView />
+            ) : currentEntry?.previewKind === "document" ? (
+              <DocumentView />
+            ) : currentEntry?.previewKind === "none" ? (
+              <div className="flex flex-col items-center justify-center h-full gap-3 text-center">
+                <FileArchive className="h-12 w-12 text-muted-foreground" />
+                <p className="text-sm font-medium text-foreground">
+                  {selectedFileName ?? files[0].name}
+                </p>
+                <p className="text-xs text-muted-foreground">
+                  {selectedFileSize ? `${(selectedFileSize / 1024).toFixed(1)} KB` : ""}
+                </p>
+              </div>
             ) : originalBlobUrl ? (
               <ImageViewer
                 src={originalBlobUrl}
@@ -390,7 +406,7 @@ export function HomePage() {
           </div>
         </div>
 
-        {/* Right panel: Image preview */}
+        {/* Right panel: File preview (modality-aware) */}
         <div className="flex-1 flex items-center justify-center p-6 min-h-0">
           {files.length > 1 ? (
             <MultiImageViewer />
@@ -400,6 +416,20 @@ export function HomePage() {
               <p className="text-sm text-muted-foreground">{t.homePage.generatingPreview}</p>
               <p className="text-xs text-muted-foreground">{selectedFileName}</p>
             </div>
+          ) : currentEntry?.previewKind === "video" || currentEntry?.previewKind === "audio" ? (
+            <MediaPlayerView />
+          ) : currentEntry?.previewKind === "document" ? (
+            <DocumentView />
+          ) : currentEntry?.previewKind === "none" ? (
+            <div className="flex flex-col items-center justify-center h-full gap-3 text-center">
+              <FileArchive className="h-12 w-12 text-muted-foreground" />
+              <p className="text-sm font-medium text-foreground">
+                {selectedFileName ?? files[0].name}
+              </p>
+              <p className="text-xs text-muted-foreground">
+                {selectedFileSize ? `${(selectedFileSize / 1024).toFixed(1)} KB` : ""}
+              </p>
+            </div>
           ) : originalBlobUrl ? (
             <ImageViewer
               src={originalBlobUrl}