From b33eaec84cd7d5a294e59edfe8aec0bfd70845b8 Mon Sep 17 00:00:00 2001
From: moddroid94 <ilsecco94@gmail.com>
Date: Sun, 4 Jan 2026 01:46:53 +0100
Subject: [PATCH 1/3] fix(frontend): improvements to layout of sidebar and
 model list feat(frontend): added thumbnail preview fallback for unsupported
 3D files upon adding one feat(frontend): added thumbnail editing
 feat(api):added thumbnail replacement endpoint

---
 backend/app.py                          |  35 +++-
 frontend/App.tsx                        |   4 +-
 frontend/components/DetailPanel.tsx     | 233 ++++++++++++++++++------
 frontend/components/ModelList.tsx       |   8 +-
 frontend/components/Sidebar.tsx         |  32 ++--
 frontend/components/Viewer3D.tsx        |  30 +--
 frontend/services/api.ts                |  16 ++
 frontend/services/thumbnailGenerator.ts |  72 ++++----
 8 files changed, 307 insertions(+), 123 deletions(-)

diff --git a/backend/app.py b/backend/app.py
index b4a24ce..0ed3ae4 100644
--- a/backend/app.py
+++ b/backend/app.py
@@ -3,6 +3,7 @@
 import time
 import shutil
 import sqlite3
+import base64
 from fastapi import (
     FastAPI,
     UploadFile,
@@ -396,7 +397,7 @@ def replace_model_file(
                 pass
 
     filename_str = file.filename or ".stl"
-    ext = os.path.splitext(filename_str)[1] or ".stl"
+    ext = os.path.splitext(filename_str)[-1] or ".stl"
     filename = f"{model_id}{ext}"
     path = os.path.join(UPLOAD_DIR, filename)
     size = save_upload_file(file, path)
@@ -411,6 +412,38 @@ def replace_model_file(
     return row_to_model(row)
 
 
+@app.put("/api/models/{model_id}/thumbnail")
+def replace_model_thumbnail(
+    model_id: str, file: UploadFile = File(...)
+):
+    filename_str = file.filename
+    ext = os.path.splitext(filename_str)[-1]
+    if not ext:
+        raise HTTPException(status_code=429, detail="File not Valid, Extension not found")
+    
+    filebytes = file.file.read()
+    encoded_string = base64.b64encode(filebytes)
+    baseext = ext[1:]
+    thumbnail =  "data:image/" + baseext + ";base64," + encoded_string.decode()
+    
+    conn = get_db_conn()
+    cur = conn.cursor()
+    
+    m = cur.execute("SELECT * FROM models WHERE id=?", (model_id,)).fetchone()
+    if not m:
+        conn.close()
+        raise HTTPException(status_code=404, detail="Model not found")
+
+    cur.execute(
+        "UPDATE models SET thumbnail=? WHERE id=?",
+        (thumbnail, model_id),
+    )
+    conn.commit()
+    row = cur.execute("SELECT * FROM models WHERE id=?", (model_id,)).fetchone()
+    conn.close()
+    return row_to_model(row)
+
+
 @app.get("/api/storage-stats")
 def storage_stats():
     used = 0
diff --git a/frontend/App.tsx b/frontend/App.tsx
index 6a3823e..a318312 100644
--- a/frontend/App.tsx
+++ b/frontend/App.tsx
@@ -987,8 +987,8 @@ const App = () => {
                   {/* File List */}
                   <div
                     className={`static overflow-auto px-2 ${
-                  visualViewport.height > 900 ? "h-[700px]" : "h-[400px]"
-                }`}
+                      visualViewport.height > 900 ? "h-[700px]" : "h-[400px]"
+                    }`}
                   >
                     {Array.from(folderOptions).map((f) => (
                       <div>
diff --git a/frontend/components/DetailPanel.tsx b/frontend/components/DetailPanel.tsx
index 21545b1..611233d 100644
--- a/frontend/components/DetailPanel.tsx
+++ b/frontend/components/DetailPanel.tsx
@@ -1,11 +1,23 @@
+import React, { useState, useCallback, useRef } from "react";
+import { STLModel } from "../types";
+import Viewer3D from "./Viewer3D";
+import {
+  X,
+  Download,
+  Tag as TagIcon,
+  Sparkles,
+  Save,
+  Edit,
+  Trash2,
+  Calendar,
+  HardDrive,
+  FileUp,
+  RefreshCw,
+  AlertTriangle,
+} from "lucide-react";
 
-import React, { useState, useCallback, useRef } from 'react';
-import { STLModel } from '../types';
-import Viewer3D from './Viewer3D';
-import { X, Download, Tag as TagIcon, Sparkles, Save, Edit, Trash2, Calendar, HardDrive, FileUp, RefreshCw, AlertTriangle } from 'lucide-react';
-
-import { generateThumbnail } from '../services/thumbnailGenerator';
-import { api } from '../services/api';
+import { generateThumbnail } from "../services/thumbnailGenerator";
+import { api } from "../services/api";
 
 interface DetailPanelProps {
   model: STLModel | null;
@@ -14,14 +26,21 @@ interface DetailPanelProps {
   onDelete: (id: string) => void;
 }
 
-const DetailPanel: React.FC<DetailPanelProps> = ({ model, onClose, onUpdate, onDelete }) => {
-
+const DetailPanel: React.FC<DetailPanelProps> = ({
+  model,
+  onClose,
+  onUpdate,
+  onDelete,
+}) => {
   const [isReplacing, setIsReplacing] = useState(false);
   const [isEditing, setIsEditing] = useState(false);
-  const [editName, setEditName] = useState('');
-  const [editDesc, setEditDesc] = useState('');
-  const [editTags, setEditTags] = useState('');
-  const [errorState, setErrorState] = useState<{ show: boolean; message: string }>({ show: false, message: '' });
+  const [editName, setEditName] = useState("");
+  const [editDesc, setEditDesc] = useState("");
+  const [editTags, setEditTags] = useState("");
+  const [errorState, setErrorState] = useState<{
+    show: boolean;
+    message: string;
+  }>({ show: false, message: "" });
 
   const fileInputRef = useRef<HTMLInputElement>(null);
 
@@ -29,31 +48,32 @@ const DetailPanel: React.FC<DetailPanelProps> = ({ model, onClose, onUpdate, onD
   React.useEffect(() => {
     if (model) {
       setEditName(model.name);
-      setEditDesc(model.description || '');
-      setEditTags(model.tags.join(', '));
+      setEditDesc(model.description || "");
+      setEditTags(model.tags.join(", "));
       setIsEditing(false);
-      setErrorState({ show: false, message: '' });
+      setErrorState({ show: false, message: "" });
     }
   }, [model]);
 
-  const handleModelLoaded = useCallback((dimensions: { x: number; y: number; z: number }) => {
-    if (model && !model.dimensions) {
-      onUpdate(model.id, { dimensions });
-    }
-  }, [model, onUpdate]);
+  const handleModelLoaded = useCallback(
+    (dimensions: { x: number; y: number; z: number }) => {
+      if (model && !model.dimensions) {
+        onUpdate(model.id, { dimensions });
+      }
+    },
+    [model, onUpdate]
+  );
 
   if (!model) return null;
 
-
-
   const handleReplaceFile = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (!file || !model) return;
 
     // Extension check
     const getExtension = (filename: string) => {
-      const parts = filename.split('.');
-      return parts.length > 1 ? parts.pop()?.toLowerCase() : '';
+      const parts = filename.split(".");
+      return parts.length > 1 ? parts.pop()?.toLowerCase() : "";
     };
 
     const currentExt = getExtension(model.name);
@@ -62,9 +82,9 @@ const DetailPanel: React.FC<DetailPanelProps> = ({ model, onClose, onUpdate, onD
     if (currentExt && newExt && currentExt !== newExt) {
       setErrorState({
         show: true,
-        message: `You cannot replace a .${currentExt} file with a .${newExt} file.`
+        message: `You cannot replace a .${currentExt} file with a .${newExt} file.`,
       });
-      if (fileInputRef.current) fileInputRef.current.value = '';
+      if (fileInputRef.current) fileInputRef.current.value = "";
       return;
     }
 
@@ -82,7 +102,7 @@ const DetailPanel: React.FC<DetailPanelProps> = ({ model, onClose, onUpdate, onD
       onUpdate(model.id, {
         url: updated.url,
         size: updated.size,
-        thumbnail: updated.thumbnail
+        thumbnail: updated.thumbnail,
       });
       // Note: The name and other metadata are preserved unless the user explicitly changes them in the text fields
     } catch (e) {
@@ -90,16 +110,43 @@ const DetailPanel: React.FC<DetailPanelProps> = ({ model, onClose, onUpdate, onD
       alert("Failed to replace file");
     } finally {
       setIsReplacing(false);
-      if (fileInputRef.current) fileInputRef.current.value = '';
+      if (fileInputRef.current) fileInputRef.current.value = "";
+    }
+  };
+
+  const handleReplaceThumbnail = async (
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const file = e.target.files?.[0];
+    if (!file || !model) return;
+
+    setIsReplacing(true);
+    try {
+      const updated = await api.replaceModelThumbnail(model.id, file);
+      onUpdate(model.id, {
+        url: updated.url,
+        size: updated.size,
+        thumbnail: updated.thumbnail,
+      });
+      // Note: The name and other metadata are preserved unless the user explicitly changes them in the text fields
+    } catch (e) {
+      console.error("Failed to replace", e);
+      alert("Failed to replace file");
+    } finally {
+      setIsReplacing(false);
+      if (fileInputRef.current) fileInputRef.current.value = "";
     }
   };
 
   const handleSave = () => {
-    const newTags = editTags.split(',').map(t => t.trim()).filter(t => t.length > 0);
+    const newTags = editTags
+      .split(",")
+      .map((t) => t.trim())
+      .filter((t) => t.length > 0);
     onUpdate(model.id, {
       name: editName,
       description: editDesc,
-      tags: newTags
+      tags: newTags,
     });
     setIsEditing(false);
   };
@@ -109,7 +156,10 @@ const DetailPanel: React.FC<DetailPanelProps> = ({ model, onClose, onUpdate, onD
       {/* Header */}
       <div className="p-4 border-b border-vault-700 flex justify-between items-center">
         <h3 className="font-semibold text-white">Model Details</h3>
-        <button onClick={onClose} className="text-slate-400 hover:text-white p-1 rounded hover:bg-vault-800">
+        <button
+          onClick={onClose}
+          className="text-slate-400 hover:text-white p-1 rounded hover:bg-vault-800"
+        >
           <X className="w-5 h-5" />
         </button>
       </div>
@@ -117,7 +167,12 @@ const DetailPanel: React.FC<DetailPanelProps> = ({ model, onClose, onUpdate, onD
       <div className="flex-1 overflow-y-auto p-4 space-y-6">
         {/* Viewer */}
         <div className="aspect-square bg-black rounded-lg border border-vault-700 overflow-hidden shadow-inner">
-          <Viewer3D url={model.url} filename={model.name} onLoaded={handleModelLoaded} />
+          <Viewer3D
+            url={model.url}
+            filename={model.name}
+            thumbnail={model.thumbnail}
+            onLoaded={handleModelLoaded}
+          />
         </div>
 
         {/* Actions */}
@@ -142,9 +197,14 @@ const DetailPanel: React.FC<DetailPanelProps> = ({ model, onClose, onUpdate, onD
         {/* Info Form */}
         <div className="space-y-4">
           <div className="flex justify-between items-end">
-            <label className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Metadata</label>
+            <label className="text-xs font-semibold text-slate-500 uppercase tracking-wider">
+              Metadata
+            </label>
             {!isEditing && (
-              <button onClick={() => setIsEditing(true)} className="text-xs text-blue-400 hover:underline flex items-center gap-1">
+              <button
+                onClick={() => setIsEditing(true)}
+                className="text-xs text-blue-400 hover:underline flex items-center gap-1"
+              >
                 <Edit className="w-3 h-3" /> Edit
               </button>
             )}
@@ -176,14 +236,20 @@ const DetailPanel: React.FC<DetailPanelProps> = ({ model, onClose, onUpdate, onD
             {/* File Replacement Section (Edit Mode Only) */}
             {isEditing && (
               <div className="pb-3 border-b border-vault-700 mb-3">
-                <span className="text-xs text-slate-500 block mb-1">Source File</span>
+                <span className="text-xs text-slate-500 block mb-1">
+                  Source File
+                </span>
                 <div className="flex items-center gap-2">
                   <button
                     onClick={() => fileInputRef.current?.click()}
                     disabled={isReplacing}
                     className="flex items-center gap-2 bg-vault-800 border border-vault-600 hover:bg-vault-700 text-slate-300 px-3 py-2 rounded-md text-xs font-medium transition-colors w-full justify-center"
                   >
-                    {isReplacing ? <RefreshCw className="w-3 h-3 animate-spin" /> : <FileUp className="w-3 h-3" />}
+                    {isReplacing ? (
+                      <RefreshCw className="w-3 h-3 animate-spin" />
+                    ) : (
+                      <FileUp className="w-3 h-3" />
+                    )}
                     {isReplacing ? "Uploading..." : "Replace 3D Model File"}
                   </button>
                   <input
@@ -194,12 +260,51 @@ const DetailPanel: React.FC<DetailPanelProps> = ({ model, onClose, onUpdate, onD
                     onChange={handleReplaceFile}
                   />
                 </div>
-                <p className="text-[10px] text-slate-500 mt-1 text-center">Replaces geometry but keeps name/desc unless changed.</p>
+                <p className="text-[10px] text-slate-500 mt-1 text-center">
+                  Replaces geometry but keeps name/desc unless changed.
+                </p>
+
+                <span className="text-xs text-slate-500 block mb-1">
+                  Thumbnail
+                </span>
+                <div className="flex items-center gap-2">
+                  <div className="w-15 h-15">
+                    <img
+                      className="w-15 h-15"
+                      src={model.thumbnail}
+                      alt="thumbnail"
+                    />
+                  </div>
+                  <button
+                    onClick={() => fileInputRef.current?.click()}
+                    disabled={isReplacing}
+                    className="flex items-center gap-2 bg-vault-800 border border-vault-600 hover:bg-vault-700 text-slate-300 px-3 py-2 rounded-md text-xs font-medium transition-colors w-full justify-center"
+                  >
+                    {isReplacing ? (
+                      <RefreshCw className="w-3 h-3 animate-spin" />
+                    ) : (
+                      <FileUp className="w-3 h-3" />
+                    )}
+                    {isReplacing ? "Uploading..." : "Replace Thumbnail"}
+                  </button>
+                  <input
+                    type="file"
+                    ref={fileInputRef}
+                    className="hidden"
+                    accept=".jpeg,.png,.jpg"
+                    onChange={handleReplaceThumbnail}
+                  />
+                </div>
+                <p className="text-[10px] text-slate-500 mt-1 text-center">
+                  Replaces Thumbnail.
+                </p>
               </div>
             )}
 
             <div>
-              <span className="text-xs text-slate-500 block mb-1">Filename</span>
+              <span className="text-xs text-slate-500 block mb-1">
+                Filename
+              </span>
               {isEditing ? (
                 <input
                   className="w-full bg-vault-800 border border-vault-600 rounded px-2 py-1 text-sm text-white focus:border-blue-500 outline-none"
@@ -212,7 +317,9 @@ const DetailPanel: React.FC<DetailPanelProps> = ({ model, onClose, onUpdate, onD
             </div>
 
             <div>
-              <span className="text-xs text-slate-500 block mb-1">Description</span>
+              <span className="text-xs text-slate-500 block mb-1">
+                Description
+              </span>
               {isEditing ? (
                 <textarea
                   className="w-full bg-vault-800 border border-vault-600 rounded px-2 py-1 text-sm text-white focus:border-blue-500 outline-none min-h-[80px]"
@@ -222,7 +329,11 @@ const DetailPanel: React.FC<DetailPanelProps> = ({ model, onClose, onUpdate, onD
                 />
               ) : (
                 <p className="text-sm text-slate-300 leading-relaxed text-sm">
-                  {model.description || <span className="text-slate-600 italic">No description</span>}
+                  {model.description || (
+                    <span className="text-slate-600 italic">
+                      No description
+                    </span>
+                  )}
                 </p>
               )}
             </div>
@@ -238,22 +349,37 @@ const DetailPanel: React.FC<DetailPanelProps> = ({ model, onClose, onUpdate, onD
                 />
               ) : (
                 <div className="flex flex-wrap gap-2">
-                  {model.tags.length > 0 ? model.tags.map(tag => (
-                    <span key={tag} className="flex items-center gap-1 text-xs bg-vault-800 border border-vault-700 text-slate-300 px-2 py-1 rounded-full">
-                      <TagIcon className="w-3 h-3 opacity-50" />
-                      {tag}
+                  {model.tags.length > 0 ? (
+                    model.tags.map((tag) => (
+                      <span
+                        key={tag}
+                        className="flex items-center gap-1 text-xs bg-vault-800 border border-vault-700 text-slate-300 px-2 py-1 rounded-full"
+                      >
+                        <TagIcon className="w-3 h-3 opacity-50" />
+                        {tag}
+                      </span>
+                    ))
+                  ) : (
+                    <span className="text-slate-600 italic text-sm">
+                      No tags
                     </span>
-                  )) : <span className="text-slate-600 italic text-sm">No tags</span>}
+                  )}
                 </div>
               )}
             </div>
 
             {isEditing && (
               <div className="flex gap-2 pt-2">
-                <button onClick={handleSave} className="flex-1 bg-green-600 hover:bg-green-500 text-white py-1.5 rounded text-xs font-medium flex items-center justify-center gap-1">
+                <button
+                  onClick={handleSave}
+                  className="flex-1 bg-green-600 hover:bg-green-500 text-white py-1.5 rounded text-xs font-medium flex items-center justify-center gap-1"
+                >
                   <Save className="w-3 h-3" /> Save Changes
                 </button>
-                <button onClick={() => setIsEditing(false)} className="flex-1 bg-vault-700 hover:bg-vault-600 text-slate-200 py-1.5 rounded text-xs font-medium">
+                <button
+                  onClick={() => setIsEditing(false)}
+                  className="flex-1 bg-vault-700 hover:bg-vault-600 text-slate-200 py-1.5 rounded text-xs font-medium"
+                >
                   Cancel
                 </button>
               </div>
@@ -262,7 +388,10 @@ const DetailPanel: React.FC<DetailPanelProps> = ({ model, onClose, onUpdate, onD
         </div>
 
         <div className="pt-6 border-t border-vault-700 mt-auto">
-          <button onClick={() => onDelete(model.id)} className="w-full border border-red-900/50 text-red-500 hover:bg-red-900/20 py-2 rounded-md text-sm transition-colors flex items-center justify-center gap-2">
+          <button
+            onClick={() => onDelete(model.id)}
+            className="w-full border border-red-900/50 text-red-500 hover:bg-red-900/20 py-2 rounded-md text-sm transition-colors flex items-center justify-center gap-2"
+          >
             <Trash2 className="w-4 h-4" /> Delete Model
           </button>
         </div>
@@ -277,10 +406,12 @@ const DetailPanel: React.FC<DetailPanelProps> = ({ model, onClose, onUpdate, onD
                 </div>
                 <div>
                   <h3 className="font-bold text-white">File Mismatch</h3>
-                  <p className="text-sm text-slate-300 mt-2 leading-relaxed">{errorState.message}</p>
+                  <p className="text-sm text-slate-300 mt-2 leading-relaxed">
+                    {errorState.message}
+                  </p>
                 </div>
                 <button
-                  onClick={() => setErrorState({ show: false, message: '' })}
+                  onClick={() => setErrorState({ show: false, message: "" })}
                   className="w-full mt-2 py-2 bg-vault-700 hover:bg-vault-600 text-white rounded-lg text-sm font-medium transition-colors"
                 >
                   Okay, got it
diff --git a/frontend/components/ModelList.tsx b/frontend/components/ModelList.tsx
index 40a09f2..4210458 100644
--- a/frontend/components/ModelList.tsx
+++ b/frontend/components/ModelList.tsx
@@ -436,7 +436,7 @@ const ModelList: React.FC<ModelListProps> = ({
                       <img
                         src={model.thumbnail}
                         alt={model.name}
-                        className="w-full h-full object-contain p-2 opacity-80 group-hover:opacity-100 transition-opacity"
+                        className="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition-opacity"
                       />
                     ) : (
                       <>
@@ -450,13 +450,13 @@ const ModelList: React.FC<ModelListProps> = ({
                       {model.tags.slice(0, 2).map((tag) => (
                         <span
                           key={tag}
-                          className="text-[10px] bg-black/60 text-slate-300 px-2 py-0.5 rounded-full backdrop-blur-sm truncate max-w-full"
+                          className="text-sm bg-black/60 text-slate-300 px-2 pb-0.5 rounded-md backdrop-blur-sm truncate max-w-full"
                         >
                           {tag}
                         </span>
                       ))}
                       {model.tags.length > 2 && (
-                        <span className="text-[10px] bg-black/60 text-slate-300 px-2 py-0.5 rounded-full backdrop-blur-sm">
+                        <span className="text-xs bg-black/60 text-slate-300 px-2 pt-0.5 rounded-md backdrop-blur-sm">
                           +{model.tags.length - 2}
                         </span>
                       )}
@@ -464,7 +464,7 @@ const ModelList: React.FC<ModelListProps> = ({
 
                     {/* File Type Badge */}
                     <div className="absolute bottom-2 left-2">
-                      <span className="text-[10px] bg-blue-600/80 text-white px-1.5 py-0.5 rounded uppercase font-bold shadow-sm">
+                      <span className="text-sm bg-blue-600/80 text-white px-1.5 py-0.5 rounded uppercase font-medium shadow-sm">
                         {model.name.split(".").pop()}
                       </span>
                     </div>
diff --git a/frontend/components/Sidebar.tsx b/frontend/components/Sidebar.tsx
index f1eb30d..132bda4 100644
--- a/frontend/components/Sidebar.tsx
+++ b/frontend/components/Sidebar.tsx
@@ -9,8 +9,6 @@ import {
   Check,
   X,
   ChevronRight,
-  ChevronDown,
-  FolderOpen,
   Settings,
 } from "lucide-react";
 import { Folder, STLModel, StorageStats } from "../types";
@@ -119,7 +117,7 @@ const FolderNode: React.FC<FolderNodeProps> = ({
     <div>
       {/* Folder Row */}
       <div
-        className={`relative group flex items-center pr-2 min-h-[36px] transition-colors
+        className={`relative group flex items-center pr-2 min-h-[36px] transition-colors rounded-md
           ${
             isDropTarget
               ? "bg-blue-600/40 text-blue-200 ring-1 ring-blue-400"
@@ -128,25 +126,25 @@ const FolderNode: React.FC<FolderNodeProps> = ({
               : "text-slate-400 hover:bg-vault-800 hover:text-slate-200"
           }
         `}
-        style={{ paddingLeft: `${level * 16 + 12}px` }}
+        style={{ paddingLeft: `${level * 15 + 5}px` }}
         onDragOver={(e) => onDragOver(e, folder.id)}
         onDragLeave={onDragLeave}
         onDrop={(e) => onDrop(e, folder.id)}
       >
         {/* Expand Toggle */}
         <div
-          className="w-5 h-5 flex items-center justify-center shrink-0 cursor-pointer hover:text-white hover:bg-vault-600 rounded-md mr-1 "
+          className="w-5 h-5 flex items-center justify-center shrink-0 cursor-pointer hover:text-white hover:bg-vault-600 rounded-md mr-2 "
           onClick={(e) => {
             e.stopPropagation();
             onToggleExpand(folder.id);
           }}
         >
           {hasChildren ? (
-            isExpanded ? (
-              <ChevronDown className="w-4 h-4 bg-vault-700 rounded-md " />
-            ) : (
-              <ChevronRight className="w-4 h-4 bg-vault-700 rounded-md" />
-            )
+            <ChevronRight
+              className={`w-5 h-5 bg-vault-700 rounded-md transition ${
+                isExpanded ? `rotate-90` : ``
+              }`}
+            />
           ) : (
             // Placeholder to keep alignment
             <div className="w-4 h-4" />
@@ -188,18 +186,14 @@ const FolderNode: React.FC<FolderNodeProps> = ({
               className="flex-1 flex items-center gap-2 min-w-0 cursor-pointer py-1.5"
               onClick={() => onSelect(folder.id)}
             >
-              {isExpanded || isDropTarget ? (
-                <FolderOpen className="w-4 h-4 shrink-0" />
-              ) : (
-                <FolderIcon className="w-4 h-4 shrink-0" />
-              )}
+              <FolderIcon className="w-4 h-4 shrink-0" />
               <span className="text-sm font-medium truncate select-none">
                 {folder.name}
               </span>
             </div>
 
             {/* Hover Actions */}
-            <div className="absolute right-5 items-center opacity-0 group-hover:opacity-100 transition-opacity ml-2 bg-vault-900/50 backdrop-blur-sm rounded px-1">
+            <div className="absolute right-10 items-center opacity-0 group-hover:opacity-100 transition-opacity bg-vault-900/50 backdrop-blur-sm rounded p-1">
               <button
                 onClick={(e) => {
                   e.stopPropagation();
@@ -235,9 +229,9 @@ const FolderNode: React.FC<FolderNodeProps> = ({
 
             {/* Count Badge */}
             <span
-              className={`text-xs ml-2 ${
-                isSelected ? "text-blue-500" : "text-slate-600"
-              } min-w-[1.5rem] text-right`}
+              className={`text-xs px-2 py-1 rounded-md bg-vault-800 group-hover:bg-vault-700 transition ${
+                isSelected ? "text-blue-500" : "text-slate-400"
+              } `}
             >
               {count}
             </span>
diff --git a/frontend/components/Viewer3D.tsx b/frontend/components/Viewer3D.tsx
index 7f25f61..7fa1992 100644
--- a/frontend/components/Viewer3D.tsx
+++ b/frontend/components/Viewer3D.tsx
@@ -59,6 +59,7 @@ class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
 interface Viewer3DProps {
   url: string;
   filename: string;
+  thumbnail;
   color?: string;
   onLoaded?: (dimensions: { x: number; y: number; z: number }) => void;
 }
@@ -66,6 +67,7 @@ interface Viewer3DProps {
 const Model = ({
   url,
   filename,
+  thumbnail,
   color = "#3b82f6",
   onLoaded,
 }: Viewer3DProps) => {
@@ -149,16 +151,20 @@ const Model = ({
   );
 };
 
-const Viewer3D: React.FC<Viewer3DProps> = ({ url, filename, onLoaded }) => {
+const Viewer3D: React.FC<Viewer3DProps> = ({
+  url,
+  filename,
+  thumbnail,
+  onLoaded,
+}) => {
   const [error, setError] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
   const [isFullscreen, setIsFullscreen] = useState(false);
 
   const unsupportedFormat = useMemo(() => {
     const lower = filename.toLowerCase();
-    if (lower.endsWith(".step") || lower.endsWith(".stp")) return "STEP";
-    // 3MF is now supported
-    return null;
+    if (lower.endsWith(".stl") || lower.endsWith(".3mf")) return null;
+    return "UNSUPPORTED";
   }, [filename]);
 
   // Reset error when url changes
@@ -199,13 +205,8 @@ const Viewer3D: React.FC<Viewer3DProps> = ({ url, filename, onLoaded }) => {
 
   if (unsupportedFormat) {
     return (
-      <div className="flex flex-col items-center justify-center h-full bg-vault-800 text-slate-400 p-6 text-center">
-        <FileWarning className="w-12 h-12 mb-3 opacity-50" />
-        <p className="font-medium">Preview not available</p>
-        <p className="text-xs mt-1 opacity-70">
-          {unsupportedFormat} files cannot be previewed in the browser directly.
-          Please download to view.
-        </p>
+      <div className="flex flex-col items-center justify-center h-full bg-vault-800 text-slate-400 text-center">
+        <img className="object-cover h-full" src={thumbnail}></img>
       </div>
     );
   }
@@ -239,7 +240,12 @@ const Viewer3D: React.FC<Viewer3DProps> = ({ url, filename, onLoaded }) => {
           <Stage environment="city" intensity={1} adjustCamera>
             <Center>
               <ErrorBoundary onError={() => setError(true)}>
-                <Model url={url} filename={filename} onLoaded={onLoaded} />
+                <Model
+                  url={url}
+                  filename={filename}
+                  thumbnail={thumbnail}
+                  onLoaded={onLoaded}
+                />
               </ErrorBoundary>
             </Center>
           </Stage>
diff --git a/frontend/services/api.ts b/frontend/services/api.ts
index d4fcaf5..d9e1403 100644
--- a/frontend/services/api.ts
+++ b/frontend/services/api.ts
@@ -210,6 +210,22 @@ export const api = {
     return res.json();
   },
 
+  // 14a. REPLACE FILE
+  replaceModelThumbnail: async (
+    id: string,
+    file: File,
+  ): Promise<STLModel> => {
+    const formData = new FormData();
+    formData.append("file", file);
+
+    const res = await fetch(`${API_BASE_URL}/models/${id}/thumbnail`, {
+      method: "PUT",
+      body: formData,
+    });
+    if (!res.ok) throw new Error("File replacement failed");
+    return res.json();
+  },
+
   // 15. GET Storage Stats
   getStorageStats: async (): Promise<StorageStats> => {
     const res = await fetch(`${API_BASE_URL}/storage-stats`);
diff --git a/frontend/services/thumbnailGenerator.ts b/frontend/services/thumbnailGenerator.ts
index 0aeefcd..77d98fb 100644
--- a/frontend/services/thumbnailGenerator.ts
+++ b/frontend/services/thumbnailGenerator.ts
@@ -1,16 +1,16 @@
-import * as THREE from 'three';
-import { STLLoader } from 'three/examples/jsm/loaders/STLLoader.js';
-import { ThreeMFLoader } from 'three/examples/jsm/loaders/3MFLoader.js';
+import * as THREE from "three";
+import { STLLoader } from "three/examples/jsm/loaders/STLLoader.js";
+import { ThreeMFLoader } from "three/examples/jsm/loaders/3MFLoader.js";
 
 export const generateThumbnail = async (file: File): Promise<string> => {
   return new Promise((resolve, reject) => {
-    const is3MF = file.name.toLowerCase().endsWith('.3mf');
-    const isSTL = file.name.toLowerCase().endsWith('.stl');
+    const is3MF = file.name.toLowerCase().endsWith(".3mf");
+    const isSTL = file.name.toLowerCase().endsWith(".stl");
 
     if (!isSTL && !is3MF) {
-        // Skip unsupported
-        reject(new Error("Unsupported file type for thumbnail"));
-        return;
+      // Skip unsupported
+      reject(new Error("Unsupported file type for thumbnail"));
+      return;
     }
 
     const reader = new FileReader();
@@ -18,40 +18,40 @@ export const generateThumbnail = async (file: File): Promise<string> => {
     reader.onload = (event) => {
       try {
         if (!event.target?.result) {
-            reject(new Error("File read failed"));
-            return;
+          reject(new Error("File read failed"));
+          return;
         }
         const contents = event.target.result as ArrayBuffer;
-        
+
         let object: THREE.Object3D;
 
         if (is3MF) {
-            const loader = new ThreeMFLoader();
-            // 3MFLoader parse returns a Group
-            object = loader.parse(contents);
+          const loader = new ThreeMFLoader();
+          // 3MFLoader parse returns a Group
+          object = loader.parse(contents);
         } else {
-            const loader = new STLLoader();
-            const geometry = loader.parse(contents);
-            const material = new THREE.MeshStandardMaterial({ 
-                color: 0x3b82f6,
-                roughness: 0.5,
-                metalness: 0.2 
-            });
-            object = new THREE.Mesh(geometry, material);
+          const loader = new STLLoader();
+          const geometry = loader.parse(contents);
+          const material = new THREE.MeshStandardMaterial({
+            color: 0x3b82f6,
+            roughness: 0.5,
+            metalness: 0.2,
+          });
+          object = new THREE.Mesh(geometry, material);
         }
 
         // Setup scene for snapshot
         const scene = new THREE.Scene();
         // Transparent background
-        scene.background = null; 
+        scene.background = null;
 
         const camera = new THREE.PerspectiveCamera(45, 1, 0.1, 1000);
-        
+
         // Center and scale
         const box = new THREE.Box3().setFromObject(object);
         const center = box.getCenter(new THREE.Vector3());
         const size = box.getSize(new THREE.Vector3());
-        
+
         // Move object to center
         object.position.sub(center);
         scene.add(object);
@@ -65,11 +65,11 @@ export const generateThumbnail = async (file: File): Promise<string> => {
         camera.position.y = cameraZ * 0.4; // Slight angle
         camera.position.x = cameraZ * 0.4; // Slight angle
         camera.lookAt(0, 0, 0);
-        
+
         // Add lights
         const ambientLight = new THREE.AmbientLight(0xffffff, 0.7);
         scene.add(ambientLight);
-        
+
         const dirLight = new THREE.DirectionalLight(0xffffff, 1.0);
         dirLight.position.set(5, 10, 7);
         scene.add(dirLight);
@@ -79,17 +79,21 @@ export const generateThumbnail = async (file: File): Promise<string> => {
         scene.add(backLight);
 
         // Render
-        const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true, preserveDrawingBuffer: true });
+        const renderer = new THREE.WebGLRenderer({
+          alpha: true,
+          antialias: true,
+          preserveDrawingBuffer: true,
+        });
         renderer.setSize(300, 300);
         renderer.render(scene, camera);
 
-        const dataUrl = renderer.domElement.toDataURL('image/png');
-        
+        const dataUrl = renderer.domElement.toDataURL("image/png");
+
         // Clean up
         if (!is3MF) {
-             // Dispose geometry/material created manually for STL
-             (object as THREE.Mesh).geometry.dispose();
-             ((object as THREE.Mesh).material as THREE.Material).dispose();
+          // Dispose geometry/material created manually for STL
+          (object as THREE.Mesh).geometry.dispose();
+          ((object as THREE.Mesh).material as THREE.Material).dispose();
         }
         renderer.dispose();
 
@@ -103,4 +107,4 @@ export const generateThumbnail = async (file: File): Promise<string> => {
     reader.onerror = (e) => reject(e);
     reader.readAsArrayBuffer(file);
   });
-};
\ No newline at end of file
+};

From 56c03bbb5ca257e80d0a942527e5e9a97af65658 Mon Sep 17 00:00:00 2001
From: moddroid94 <ilsecco94@gmail.com>
Date: Mon, 5 Jan 2026 02:44:16 +0100
Subject: [PATCH 2/3] chore(git): updated readme

---
 README.md | 48 +++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 37 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index af030d9..0b69775 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,6 @@
 ![logo](https://github.com/moddroid94/STLVault/blob/main/frontend/assets/android-chrome-192x192.png)
-# STLVault 
+
+# STLVault
 
 ![Project Status](https://img.shields.io/badge/Status-Beta-orange?style=for-the-badge)
 ![GitHub Release](https://img.shields.io/github/v/release/moddroid94/STLVault?display_name=release&style=for-the-badge&logo=github)
@@ -11,8 +12,6 @@
 
 ![License](https://img.shields.io/badge/License-MIT-green?style=for-the-badge)
 
-
-
 **STLVault** is a containerized 3D Model library manager and organizer, designed specifically for 3D printing enthusiasts. It provides a clean, modern web interface to manage your growing collection of STL, STEP, and 3MF files.
 
 > **Note:** This project is currently in Beta. While the core functionality (importing, organizing, viewing) works, expect changes and improvements.
@@ -23,7 +22,7 @@
 
 - **📂 Nestable Folders:** Organize your models into a deep hierarchy that makes sense to you.
 - **🪄 Open in Slicer:** Let's you open the model direclty in your slicer.
-- **🔗 URL Import:** Import multiple files from Printables URL, with granular file selection. (Only models URL, not collections)
+- **🔗 URL Import:** Import multiple files from Printables URL, with granular file selection. (Only models URL)
 - **🖱️ Drag n' Drop:** Seamlessly import new models or move files between folders.
 - **📦 Bulk Actions:** Tag, move, delete, download, or upload multiple files at once.
 - **👁️ 3D Preview:** Integrated web-based 3D viewer for STL and 3MF files.
@@ -38,7 +37,7 @@
 - **Backend:** Python (FastAPI)
 - **Database:** SQLite
 - **Package Manager:** NPM, UV
-- **Containerization:** Docker & Docker Compose 
+- **Containerization:** Docker & Docker Compose
 
 ---
 
@@ -49,17 +48,44 @@
 ![Upload Modal Preview](https://github.com/user-attachments/assets/34f995d3-bc09-489f-92f3-1408bf0196a0)
 ![Model Viewer/Info Preview](https://github.com/user-attachments/assets/ac373cf5-3952-4336-8b56-e2864127c3aa)
 
-
-
 ---
 
 ## 🚀 Deployment
 
 The recommended way to deploy STLVault is using **Docker Compose** or via a container management tool like **Portainer**.
 
-**Images are available on docker-hub, just replace the build steps with the image tag in the docker-compose. (you will need to set the API Host in the app settings)**
-
-### Option 1: Docker Compose (CLI)
+## Docker Compose with Images
+
+```
+services:
+  stlvbackend:
+    image: moddroid94/stlvault-backend:latest
+    pull_policy: build
+    environment:
+      - FILE_STORAGE=/app/uploads
+      - DB_PATH=/app/data/data.db
+      - WEBUI_URL=http://192.168.178.21:8999
+    ports:
+      - '8998:8080'
+    volumes:
+      - YOUR_FOLDER_PATH:/app/uploads
+      - YOUR_FOLDER_PATH:/app/data
+    restart: always
+  stlvfrontend:
+    image: moddroid94/stlvault-frontend:latest
+    pull_policy: build
+    volumes:
+      - node_modules:/app/node_modules
+    ports:
+      - '8999:5173'
+    depends_on:
+      - stlvbackend
+    restart: always
+volumes:
+  node_modules: null
+```
+
+### Docker Compose (CLI)
 
 1.  **Clone the repository:**
 
@@ -88,7 +114,7 @@ The recommended way to deploy STLVault is using **Docker Compose** or via a cont
 4.  **Access the App:**
     Open your browser and navigate to `http://localhost:8989` (or the port you configured).
 
-### Option 2: Portainer or GitOps (Recommended)
+### Portainer
 
 You can deploy STLVault directly from Portainer using the repository as a stack source.
 

From 4749c24d849817d33b80af65d142f4b76ac1f0ce Mon Sep 17 00:00:00 2001
From: moddroid94 <ilsecco94@gmail.com>
Date: Fri, 9 Jan 2026 15:13:55 +0100
Subject: [PATCH 3/3] fix(api): fixed URL import file extension not passed to
 backend

---
 frontend/App.tsx         | 3 ++-
 frontend/services/api.ts | 5 +++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/App.tsx b/frontend/App.tsx
index a318312..0ffe3b6 100644
--- a/frontend/App.tsx
+++ b/frontend/App.tsx
@@ -342,7 +342,8 @@ const App = () => {
             model.name,
             model.parentId,
             model.previewPath,
-            importFolderId
+            importFolderId,
+            model.typeName
           );
           setUploadQueue((prev) => prev - 1);
           setModels((prev) => [newModel, ...prev]);
diff --git a/frontend/services/api.ts b/frontend/services/api.ts
index d9e1403..d64f1fd 100644
--- a/frontend/services/api.ts
+++ b/frontend/services/api.ts
@@ -181,12 +181,13 @@ export const api = {
     name: string,
     parentId: string,
     previewPath: string,
-    folderId: string
+    folderId: string,
+    typeName: string,
   ): Promise<STLModel> => {
     const res = await fetch(`${API_BASE_URL}/printables/importid`, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ id, name, parentId, previewPath, folderId }),
+      body: JSON.stringify({ id, name, parentId, previewPath, folderId, typeName }),
     });
     if (!res.ok) throw new Error("Import failed");
     return res.json();