From 4428b8472c8aa309fbf9952cf270b33dbb1cfa0d Mon Sep 17 00:00:00 2001
From: Jan-Henrik Bruhn <hi@jhbruhn.de>
Date: Sat, 6 Dec 2025 23:42:47 +0100
Subject: [PATCH] Properly preserve pattern filename after deletion for
 re-upload
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Improve the previous fix by actually preserving the original filename
from the cache instead of using a generic fallback. This is a cleaner
solution that maintains the actual pattern name.

Changes:
- Add currentFileName state to App.tsx to track pattern filename
- When loading cached pattern, preserve resumeFileName in currentFileName
- When loading new pattern, pass fileName to handlePatternLoaded callback
- Pass currentFileName to FileUpload component as prop
- Use currentFileName in displayFileName logic (prioritized first)
- Remove generic 'pattern.pes' fallback

Now when you delete a cached pattern and re-upload it, the original
filename (e.g., "mypattern.pes") is preserved instead of using a
generic fallback name. This maintains better traceability.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/App.tsx                   |  9 ++++++++-
 src/components/FileUpload.tsx | 10 ++++++----
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 1d2eea4..532b1b4 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -19,6 +19,7 @@ function App() {
   const [pyodideError, setPyodideError] = useState<string | null>(null);
   const [patternOffset, setPatternOffset] = useState<{ x: number; y: number }>({ x: 0, y: 0 });
   const [patternUploaded, setPatternUploaded] = useState(false);
+  const [currentFileName, setCurrentFileName] = useState<string>(''); // Track current pattern filename
 
   // Initialize Pyodide on mount
   useEffect(() => {
@@ -43,11 +44,16 @@ function App() {
       if (machine.resumedPattern.patternOffset) {
         setPatternOffset(machine.resumedPattern.patternOffset);
       }
+      // Preserve the filename from cache
+      if (machine.resumeFileName) {
+        setCurrentFileName(machine.resumeFileName);
+      }
     }
   }, [machine.resumedPattern, pesData, machine.resumeFileName]);
 
-  const handlePatternLoaded = useCallback((data: PesPatternData) => {
+  const handlePatternLoaded = useCallback((data: PesPatternData, fileName: string) => {
     setPesData(data);
+    setCurrentFileName(fileName);
     // Reset pattern offset when new pattern is loaded
     setPatternOffset({ x: 0, y: 0 });
     setPatternUploaded(false);
@@ -185,6 +191,7 @@ function App() {
                 resumeAvailable={machine.resumeAvailable}
                 resumeFileName={machine.resumeFileName}
                 pesData={pesData}
+                currentFileName={currentFileName}
                 isUploading={machine.isUploading}
               />
             )}
diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx
index 4cf0031..4e8ce52 100644
--- a/src/components/FileUpload.tsx
+++ b/src/components/FileUpload.tsx
@@ -9,7 +9,7 @@ interface FileUploadProps {
   isConnected: boolean;
   machineStatus: MachineStatus;
   uploadProgress: number;
-  onPatternLoaded: (pesData: PesPatternData) => void;
+  onPatternLoaded: (pesData: PesPatternData, fileName: string) => void;
   onUpload: (penData: Uint8Array, pesData: PesPatternData, fileName: string, patternOffset?: { x: number; y: number }) => void;
   pyodideReady: boolean;
   patternOffset: { x: number; y: number };
@@ -17,6 +17,7 @@ interface FileUploadProps {
   resumeAvailable: boolean;
   resumeFileName: string | null;
   pesData: PesPatternData | null;
+  currentFileName: string;
   isUploading?: boolean;
 }
 
@@ -32,6 +33,7 @@ export function FileUpload({
   resumeAvailable,
   resumeFileName,
   pesData: pesDataProp,
+  currentFileName,
   isUploading = false,
 }: FileUploadProps) {
   const [localPesData, setLocalPesData] = useState<PesPatternData | null>(null);
@@ -39,8 +41,8 @@ export function FileUpload({
 
   // Use prop pesData if available (from cached pattern), otherwise use local state
   const pesData = pesDataProp || localPesData;
-  // When resumeFileName is cleared but we still have pesData, preserve the filename
-  const displayFileName = resumeFileName || fileName || (pesDataProp ? 'pattern.pes' : '');
+  // Use currentFileName from App state, or local fileName, or resumeFileName for display
+  const displayFileName = currentFileName || fileName || resumeFileName || '';
   const [isLoading, setIsLoading] = useState(false);
 
   const handleFileChange = useCallback(
@@ -58,7 +60,7 @@ export function FileUpload({
         const data = await convertPesToPen(file);
         setLocalPesData(data);
         setFileName(file.name);
-        onPatternLoaded(data);
+        onPatternLoaded(data, file.name);
       } catch (err) {
         alert(
           `Failed to load PES file: ${