From 12cae32e33ee972626d6074c4701456e7fed044e Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Sat, 1 Aug 2026 15:11:02 +0100
Subject: [PATCH] Enhance Thumbnail and ApiServerContext components for
 improved functionality

- Removed the default border style from the Thumbnail component to streamline its appearance.
- Updated the Thumbnail component to dynamically set the width in the card styles, enhancing layout flexibility.
- Modified the fetchFileThumbnail function in ApiServerContext to include an optional parameter for handling 404 errors, improving error management during thumbnail fetching.
- Added a thumbnail property to the GCodeFile model, enabling thumbnail support for GCode files.
---
 src/components/Dashboard/common/Thumbnail.jsx         | 3 +--
 src/components/Dashboard/context/ApiServerContext.jsx | 5 ++++-
 src/database/models/GCodeFile.js                      | 1 +
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/Dashboard/common/Thumbnail.jsx b/src/components/Dashboard/common/Thumbnail.jsx
index b2f34b5..89bf0cf 100644
--- a/src/components/Dashboard/common/Thumbnail.jsx
+++ b/src/components/Dashboard/common/Thumbnail.jsx
@@ -42,7 +42,6 @@ const Thumbnail = function Thumbnail({
     borderRadius: '5px',
     width: size,
     height: size,
-    border: 'none',
     ...style
   }
 
@@ -151,7 +150,7 @@ const Thumbnail = function Thumbnail({
     <Card
       className={className}
       style={cardStyle}
-      styles={{ body: { padding: 0, height: '100%' } }}
+      styles={{ body: { padding: 0, height: '100%', width: style?.width } }}
     >
       <Flex justify='center' align='center' style={{ height: '100%' }}>
         {fallback || (
diff --git a/src/components/Dashboard/context/ApiServerContext.jsx b/src/components/Dashboard/context/ApiServerContext.jsx
index 84d10cf..83d457c 100644
--- a/src/components/Dashboard/context/ApiServerContext.jsx
+++ b/src/components/Dashboard/context/ApiServerContext.jsx
@@ -1510,7 +1510,7 @@ const ApiServerProvider = ({ children }) => {
     }
   }
 
-  const fetchFileThumbnail = async (file, size) => {
+  const fetchFileThumbnail = async (file, size, show404Error = false) => {
     try {
       const response = await axios.get(
         `${config.backendUrl}/files/${file._id}/thumbnail`,
@@ -1528,6 +1528,9 @@ const ApiServerProvider = ({ children }) => {
       })
       return window.URL.createObjectURL(blob)
     } catch (err) {
+      if (err.response.status === 404 && show404Error == false) {
+        return null
+      }
       console.error(err)
       showError(err, () => {
         fetchFileThumbnail(file, size)
diff --git a/src/database/models/GCodeFile.js b/src/database/models/GCodeFile.js
index 824a066..a338150 100644
--- a/src/database/models/GCodeFile.js
+++ b/src/database/models/GCodeFile.js
@@ -164,6 +164,7 @@ export const GCodeFile = {
       showPreview: false,
       showHyperlink: true,
       masterFilter: ['.gcode', '.g'],
+      thumbnail: true,
       columnWidth: 200
     },
     {