Minor appearance changes, sharing live preview

backend/handlers/sharing.go

@@ -2,6 +2,7 @@ package handlers
 
 import (
 	"fmt"
+	"mime"
 	"os"
 	"path/filepath"
 	"time"
@@ -203,10 +204,16 @@ func (h *ShareHandler) GetPublicShare(c *fiber.Ctx) error {
 	// For simplicity, we'll return a short-lived download token JWT.
 	// Actually, easier: the frontend calls GET /api/public/download/:id?pwd=xxx
 	
+	mimeType := mime.TypeByExtension(filepath.Ext(info.Name()))
+	if mimeType == "" {
+		mimeType = "application/octet-stream"
+	}
+
 	return c.JSON(fiber.Map{
 		"name": filepath.Base(path),
 		"size": info.Size(),
 		"is_dir": info.IsDir(),
+		"mime_type": mimeType,
 	})
 }
 

frontend/src/app/share/[id]/page.tsx

@@ -11,7 +11,7 @@ export default function PublicSharePage({ params }: { params: Promise<{ id: stri
   const [error, setError] = useState<string | null>(null);
   const [requirePassword, setRequirePassword] = useState(false);
   const [password, setPassword] = useState('');
-  const [fileInfo, setFileInfo] = useState<{ name: string; size: number; is_dir: boolean } | null>(null);
+  const [fileInfo, setFileInfo] = useState<{ name: string; size: number; is_dir: boolean; mime_type?: string } | null>(null);
 
   useEffect(() => {
     fetchShareInfo();
@@ -112,6 +112,11 @@ export default function PublicSharePage({ params }: { params: Promise<{ id: stri
       </div>
     );
   }
+  const isImage = fileInfo?.mime_type?.startsWith('image/');
+  const isVideo = fileInfo?.mime_type?.startsWith('video/');
+  const isAudio = fileInfo?.mime_type?.startsWith('audio/');
+  const isPdf = fileInfo?.mime_type === 'application/pdf';
+  const downloadUrl = fileInfo ? api.getPublicDownloadUrl(id, password) : '';
 
   return (
     <div className="min-h-screen flex items-center justify-center p-4" style={{ backgroundColor: 'var(--color-bg-primary)' }}>
@@ -121,6 +126,14 @@ export default function PublicSharePage({ params }: { params: Promise<{ id: stri
             <div className="w-24 h-24 rounded-2xl flex items-center justify-center" style={{ backgroundColor: 'var(--color-accent-subtle)' }}>
               <Folder className="w-12 h-12" style={{ color: 'var(--color-accent)' }} />
             </div>
+          ) : isImage ? (
+            <img src={downloadUrl} alt={fileInfo?.name} className="w-full max-h-48 object-contain rounded-xl" />
+          ) : isVideo ? (
+            <video src={downloadUrl} controls className="w-full max-h-48 rounded-xl" />
+          ) : isAudio ? (
+            <audio src={downloadUrl} controls className="w-full mt-4" />
+          ) : isPdf ? (
+            <iframe src={downloadUrl} className="w-full h-64 rounded-xl border-none" />
           ) : (
             <div className="w-24 h-24 rounded-2xl flex items-center justify-center" style={{ backgroundColor: 'var(--color-accent-subtle)' }}>
               <File className="w-12 h-12" style={{ color: 'var(--color-accent)' }} />

frontend/src/components/FileExplorer.tsx

@@ -762,10 +762,13 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
                             handlePinnedDragEnd(source, file.path);
                           }
                         }}
-                        className="group flex items-center justify-between px-10 py-2 text-sm font-medium cursor-pointer rounded-lg transition-colors hover:bg-white/5"
+                        className="group flex items-center justify-between px-10 py-2 text-sm font-medium cursor-pointer rounded-lg transition-colors hover:bg-white/5 gap-3"
                         style={{ color: 'var(--color-text-secondary)' }}
                         onClick={() => navigateTo(file.path)}
                       >
+                        <div className="w-4 h-4 flex items-center justify-center flex-shrink-0 [&>svg]:w-4 [&>svg]:h-4">
+                          {getFileIcon(file)}
+                        </div>
                         <span className="truncate flex-1">{file.name}</span>
                       </div>
                     ))