From b564f016b929e013ee84b12fb623e154cdbdd52b Mon Sep 17 00:00:00 2001
From: Xoconoch <github@cordovault.com>
Date: Wed, 20 Aug 2025 20:47:18 -0600
Subject: [PATCH] feat: Add track number padding width to the frontend

---
 requirements.txt                              |  2 +-
 .../src/components/config/FormattingTab.tsx   | 27 ++++++++++++++++++-
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/requirements.txt b/requirements.txt
index 1d9e200..eb1861e 100755
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,7 +1,7 @@
 fastapi==0.116.1
 uvicorn[standard]==0.35.0
 celery==5.5.3
-deezspot-spotizerr==2.7.2
+deezspot-spotizerr==2.7.3
 httpx==0.28.1
 bcrypt==4.2.1
 PyJWT==2.10.1
diff --git a/spotizerr-ui/src/components/config/FormattingTab.tsx b/spotizerr-ui/src/components/config/FormattingTab.tsx
index 57ea7a7..46b365e 100644
--- a/spotizerr-ui/src/components/config/FormattingTab.tsx
+++ b/spotizerr-ui/src/components/config/FormattingTab.tsx
@@ -16,6 +16,7 @@ interface FormattingSettings {
   compilation: string;
   artistSeparator: string;
   spotifyMetadata: boolean;
+  padNumberWidth?: number | "auto";
 }
 
 interface FormattingTabProps {
@@ -97,7 +98,10 @@ export function FormattingTab({ config, isLoading }: FormattingTabProps) {
   });
 
   const { register, handleSubmit, setValue } = useForm<FormattingSettings>({
-    values: config,
+    values: {
+      ...config,
+      padNumberWidth: config.padNumberWidth ?? 3,
+    },
   });
 
   // Correctly register the refs for react-hook-form while also holding a local ref.
@@ -188,6 +192,27 @@ export function FormattingTab({ config, isLoading }: FormattingTabProps) {
             className="h-6 w-6 rounded"
           />
         </div>
+        <div className="flex items-center justify-between gap-4">
+          <label htmlFor="padNumberWidth" className="text-content-primary dark:text-content-primary-dark">Track Number Padding Width</label>
+          <input
+            id="padNumberWidth"
+            type="text"
+            placeholder="3 or auto"
+            {...register("padNumberWidth", {
+              setValueAs: (v) => {
+                if (typeof v !== "string") return v;
+                const trimmed = v.trim().toLowerCase();
+                if (trimmed === "auto") return "auto" as const;
+                const parsed = parseInt(trimmed, 10);
+                return Number.isNaN(parsed) ? 3 : parsed;
+              },
+            })}
+            className="block w-40 p-2 border bg-input-background dark:bg-input-background-dark border-input-border dark:border-input-border-dark rounded-md focus:outline-none focus:ring-2 focus:ring-input-focus text-sm"
+          />
+        </div>
+        <p className="text-xs text-content-muted dark:text-content-muted-dark">
+          "01. Track" if set to 2, "001. Track" if set to 3...
+        </p>
         <div className="flex items-center justify-between">
           <label htmlFor="artistSeparator" className="text-content-primary dark:text-content-primary-dark">Artist Separator</label>
           <input