From b995eb898ef1d7293335baadded5dad218f6667a Mon Sep 17 00:00:00 2001
From: Jan-Henrik Bruhn <jan-henrik.bruhn@offis.de>
Date: Mon, 22 Dec 2025 11:11:47 +0100
Subject: [PATCH 1/4] fix: Update PatternInfoSkeleton to match actual
 PatternInfo layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace generic key-value skeleton with a proper representation that matches the actual PatternInfo component structure:
- Three-column grid for Size, Stitches, and Colors stats
- Separator line between sections
- Color swatches row with circular placeholders

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/components/SkeletonLoader.tsx | 34 ++++++++++++++++++++++++-------
 1 file changed, 27 insertions(+), 7 deletions(-)

diff --git a/src/components/SkeletonLoader.tsx b/src/components/SkeletonLoader.tsx
index 3da170d..491a362 100644
--- a/src/components/SkeletonLoader.tsx
+++ b/src/components/SkeletonLoader.tsx
@@ -65,16 +65,36 @@ export function PatternCanvasSkeleton() {
 
 export function PatternInfoSkeleton() {
   return (
-    <div className="mt-4">
-      <SkeletonLoader className="h-6 w-40 mb-4" variant="text" />
-      <div className="bg-gray-200 dark:bg-gray-900 p-4 rounded-lg space-y-3">
-        {[1, 2, 3, 4].map((i) => (
-          <div key={i} className="flex justify-between">
-            <SkeletonLoader className="h-4 w-24" variant="text" />
-            <SkeletonLoader className="h-4 w-32" variant="text" />
+    <div className="mb-3">
+      {/* Three column grid matching PatternInfo stats */}
+      <div className="grid grid-cols-3 gap-2 text-xs mb-2">
+        {[1, 2, 3].map((i) => (
+          <div
+            key={i}
+            className="bg-gray-200 dark:bg-gray-700/50 p-2 rounded"
+          >
+            <SkeletonLoader className="h-3 w-12 mb-1" variant="text" />
+            <SkeletonLoader className="h-4 w-16" variant="text" />
           </div>
         ))}
       </div>
+
+      {/* Separator */}
+      <div className="h-px bg-gray-200 dark:bg-gray-700 mb-3" />
+
+      {/* Color swatches row */}
+      <div className="flex items-center gap-2 mb-2">
+        <SkeletonLoader className="h-3 w-12" variant="text" />
+        <div className="flex gap-1">
+          {[1, 2, 3, 4, 5].map((i) => (
+            <SkeletonLoader
+              key={i}
+              className="w-3 h-3 rounded-full"
+              variant="circle"
+            />
+          ))}
+        </div>
+      </div>
     </div>
   );
 }

From 6e38ba855c1b9b4682c969a2c4a8fc015b3caa4e Mon Sep 17 00:00:00 2001
From: Jan-Henrik Bruhn <jan-henrik.bruhn@offis.de>
Date: Mon, 22 Dec 2025 11:52:18 +0100
Subject: [PATCH 2/4] fix: Prevent button activation during post-upload state
 synchronization
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix the Choose File button remaining clickable during the brief window between upload completion and pattern info retrieval. The issue was that labels don't support the disabled attribute, so when using asChild with a label, the disabled state was ignored.

Changes:
- Only use asChild when button is enabled (labels can't be disabled)
- Keep input and button disabled conditions synchronized
- Add uploadProgress check to prevent re-enabling before patternUploaded is true

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/components/FileUpload.tsx | 26 ++++++++++++++++++++++----
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx
index 5c05105..0c1ebc8 100644
--- a/src/components/FileUpload.tsx
+++ b/src/components/FileUpload.tsx
@@ -256,16 +256,34 @@ export function FileUpload() {
             onChange={handleFileChange}
             id="file-input"
             className="hidden"
-            disabled={isLoading || patternUploaded || isUploading}
+            disabled={
+              isLoading ||
+              patternUploaded ||
+              isUploading ||
+              (uploadProgress > 0 && !patternUploaded)
+            }
           />
           <Button
-            asChild={!fileService.hasNativeDialogs()}
+            asChild={
+              !fileService.hasNativeDialogs() &&
+              !(
+                isLoading ||
+                patternUploaded ||
+                isUploading ||
+                (uploadProgress > 0 && !patternUploaded)
+              )
+            }
             onClick={
               fileService.hasNativeDialogs()
                 ? () => handleFileChange()
                 : undefined
             }
-            disabled={isLoading || patternUploaded || isUploading}
+            disabled={
+              isLoading ||
+              patternUploaded ||
+              isUploading ||
+              (uploadProgress > 0 && !patternUploaded)
+            }
             variant="outline"
             className="flex-[2]"
           >
@@ -289,7 +307,7 @@ export function FileUpload() {
                 )}
               </>
             ) : (
-              <label htmlFor="file-input" className="flex items-center gap-2">
+              <label htmlFor="file-input" className="flex items-center gap-2 cursor-pointer">
                 {isLoading ? (
                   <>
                     <Loader2 className="w-3.5 h-3.5 animate-spin" />

From 469d9860dee1066c7d2a36ad10464f71653511f1 Mon Sep 17 00:00:00 2001
From: Jan-Henrik Bruhn <jan-henrik.bruhn@offis.de>
Date: Mon, 22 Dec 2025 11:54:30 +0100
Subject: [PATCH 3/4] fix: Apply chart/catalogNumber duplicate detection to all
 components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Extend the duplicate detection logic from PatternCanvas to ProgressMonitor and PatternInfo. Now all components only show the chart field when it differs from catalogNumber, preventing redundant information display.

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/components/PatternInfo.tsx     | 8 +++++++-
 src/components/ProgressMonitor.tsx | 6 +++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/PatternInfo.tsx b/src/components/PatternInfo.tsx
index a8fcc20..165ff75 100644
--- a/src/components/PatternInfo.tsx
+++ b/src/components/PatternInfo.tsx
@@ -117,7 +117,13 @@ export function PatternInfo({
                 .join(" ");
 
               // Secondary metadata: chart and description
-              const secondaryMetadata = [color.chart, color.description]
+              // Only show chart if it's different from catalogNumber
+              const secondaryMetadata = [
+                color.chart && color.chart !== color.catalogNumber
+                  ? color.chart
+                  : null,
+                color.description,
+              ]
                 .filter(Boolean)
                 .join(" ");
 
diff --git a/src/components/ProgressMonitor.tsx b/src/components/ProgressMonitor.tsx
index 87128a0..48b5dd7 100644
--- a/src/components/ProgressMonitor.tsx
+++ b/src/components/ProgressMonitor.tsx
@@ -281,8 +281,12 @@ export function ProgressMonitor() {
                                     .join(" ");
 
                                   // Secondary metadata: chart and description
+                                  // Only show chart if it's different from catalogNumber
                                   const secondaryMetadata = [
-                                    block.threadChart,
+                                    block.threadChart &&
+                                    block.threadChart !== block.threadCatalogNumber
+                                      ? block.threadChart
+                                      : null,
                                     block.threadDescription,
                                   ]
                                     .filter(Boolean)

From 943f1171919b39321fffda73375ef3da692fe845 Mon Sep 17 00:00:00 2001
From: Jan-Henrik Bruhn <jan-henrik.bruhn@offis.de>
Date: Mon, 22 Dec 2025 12:03:49 +0100
Subject: [PATCH 4/4] style: Apply linter auto-fixes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add missing semicolons and adjust line breaks per ESLint rules.

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/components/FileUpload.tsx      | 5 ++++-
 src/components/ProgressMonitor.tsx | 3 ++-
 src/components/SkeletonLoader.tsx  | 5 +----
 src/lib/utils.ts                   | 6 +++---
 4 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx
index 0c1ebc8..e38d3c0 100644
--- a/src/components/FileUpload.tsx
+++ b/src/components/FileUpload.tsx
@@ -307,7 +307,10 @@ export function FileUpload() {
                 )}
               </>
             ) : (
-              <label htmlFor="file-input" className="flex items-center gap-2 cursor-pointer">
+              <label
+                htmlFor="file-input"
+                className="flex items-center gap-2 cursor-pointer"
+              >
                 {isLoading ? (
                   <>
                     <Loader2 className="w-3.5 h-3.5 animate-spin" />
diff --git a/src/components/ProgressMonitor.tsx b/src/components/ProgressMonitor.tsx
index 48b5dd7..599312f 100644
--- a/src/components/ProgressMonitor.tsx
+++ b/src/components/ProgressMonitor.tsx
@@ -284,7 +284,8 @@ export function ProgressMonitor() {
                                   // Only show chart if it's different from catalogNumber
                                   const secondaryMetadata = [
                                     block.threadChart &&
-                                    block.threadChart !== block.threadCatalogNumber
+                                    block.threadChart !==
+                                      block.threadCatalogNumber
                                       ? block.threadChart
                                       : null,
                                     block.threadDescription,
diff --git a/src/components/SkeletonLoader.tsx b/src/components/SkeletonLoader.tsx
index 491a362..038e247 100644
--- a/src/components/SkeletonLoader.tsx
+++ b/src/components/SkeletonLoader.tsx
@@ -69,10 +69,7 @@ export function PatternInfoSkeleton() {
       {/* Three column grid matching PatternInfo stats */}
       <div className="grid grid-cols-3 gap-2 text-xs mb-2">
         {[1, 2, 3].map((i) => (
-          <div
-            key={i}
-            className="bg-gray-200 dark:bg-gray-700/50 p-2 rounded"
-          >
+          <div key={i} className="bg-gray-200 dark:bg-gray-700/50 p-2 rounded">
             <SkeletonLoader className="h-3 w-12 mb-1" variant="text" />
             <SkeletonLoader className="h-4 w-16" variant="text" />
           </div>
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index bd0c391..a5ef193 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,6 +1,6 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }