From eb9147c7ac1f54fd14e0b71e0bfff78f882d922d Mon Sep 17 00:00:00 2001
From: Kun Chen <3233006+atinylittleshell@users.noreply.github.com>
Date: Sat, 11 Oct 2025 22:40:27 -0700
Subject: [PATCH 1/3] Refine export naming without tagging

---
 .../src/components/ImageSelectorContext.tsx   |  2 ++
 apps/web/src/routes/index.tsx                 | 24 ++++++++++++++++++-
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/components/ImageSelectorContext.tsx b/apps/web/src/components/ImageSelectorContext.tsx
index 6824a8f..61589e8 100644
--- a/apps/web/src/components/ImageSelectorContext.tsx
+++ b/apps/web/src/components/ImageSelectorContext.tsx
@@ -18,6 +18,7 @@ type ImageSelectorContextData = {
   outputFormat: OutputFormat;
   outputSizingMode: OutputSizingMode;
   processing: boolean;
+  downloadNameTemplate: string;
 };
 
 export const ImageSelectorContext = createContextId<ImageSelectorContextData>('image-selector-context');
@@ -29,6 +30,7 @@ export const ImageSelectorContextProvider = component$(() => {
     outputFormat: 'png',
     outputSizingMode: 'fixed_size',
     processing: false,
+    downloadNameTemplate: 'Presize.io_{timestamp}',
   });
   useContextProvider(ImageSelectorContext, context);
 
diff --git a/apps/web/src/routes/index.tsx b/apps/web/src/routes/index.tsx
index d9384de..15583f4 100644
--- a/apps/web/src/routes/index.tsx
+++ b/apps/web/src/routes/index.tsx
@@ -93,6 +93,22 @@ export default component$(() => {
               </select>
             </div>
           </div>
+          <div class="flex lg:flex-col lg:w-64 gap-2">
+            <div class="form-control w-full">
+              <label class="label">
+                <span class="label-text">Zip file name</span>
+              </label>
+              <input
+                type="text"
+                class="input input-bordered w-full"
+                value={imageSelectorContext.downloadNameTemplate}
+                placeholder="Presize.io_{timestamp}"
+                onInput$={(e) => {
+                  imageSelectorContext.downloadNameTemplate = e.target.value;
+                }}
+              />
+            </div>
+          </div>
           <div class="flex lg:flex-col lg:w-64 gap-2 pt-2">
             <button
               class="btn btn-block btn-neutral"
@@ -130,7 +146,13 @@ export default component$(() => {
                 const hiddenLink = document.createElement('a');
                 hiddenLink.style.display = 'none';
                 hiddenLink.href = zipUrl;
-                hiddenLink.download = `Presize.io_${dayjs().format('YYYY-MM-DD_HH-mm-ss')}.zip`;
+                const formattedDate = dayjs().format('YYYY-MM-DD_HH-mm-ss');
+                const template = (imageSelectorContext.downloadNameTemplate || '').trim() || 'Presize.io_{timestamp}';
+                let downloadName = template.replaceAll('{timestamp}', formattedDate);
+                if (!downloadName.toLowerCase().endsWith('.zip')) {
+                  downloadName += '.zip';
+                }
+                hiddenLink.download = downloadName;
                 document.body.appendChild(hiddenLink);
 
                 hiddenLink.click();

From d9110e73b13927874e4a10cfa420805342f96b41 Mon Sep 17 00:00:00 2001
From: Kun Chen <3233006+atinylittleshell@users.noreply.github.com>
Date: Sat, 11 Oct 2025 22:47:29 -0700
Subject: [PATCH 2/3] Guard download template input target

---
 apps/web/src/routes/index.tsx | 35 ++++++++++++++++++++++++++++++-----
 1 file changed, 30 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/routes/index.tsx b/apps/web/src/routes/index.tsx
index 15583f4..0693de8 100644
--- a/apps/web/src/routes/index.tsx
+++ b/apps/web/src/routes/index.tsx
@@ -37,7 +37,12 @@ export default component$(() => {
               <select
                 class="select select-bordered"
                 onChange$={(e) => {
-                  imageSelectorContext.outputSizingMode = e.target.value as OutputSizingMode;
+                  const target = e.target as HTMLSelectElement | null;
+                  if (!target) {
+                    return;
+                  }
+
+                  imageSelectorContext.outputSizingMode = target.value as OutputSizingMode;
                 }}
               >
                 <option value="fixed_size">Fixed Size</option>
@@ -53,7 +58,12 @@ export default component$(() => {
                 class="input input-bordered w-full"
                 value={imageSelectorContext.outputSize.width}
                 onChange$={(e) => {
-                  const value = parseInt(e.target.value);
+                  const target = e.target as HTMLInputElement | null;
+                  if (!target) {
+                    return;
+                  }
+
+                  const value = parseInt(target.value);
                   if (!isNaN(value) && value > 0) {
                     imageSelectorContext.outputSize = { width: value, height: imageSelectorContext.outputSize.height };
                   }
@@ -69,7 +79,12 @@ export default component$(() => {
                 class="input input-bordered w-full"
                 value={imageSelectorContext.outputSize.height}
                 onChange$={(e) => {
-                  const value = parseInt(e.target.value);
+                  const target = e.target as HTMLInputElement | null;
+                  if (!target) {
+                    return;
+                  }
+
+                  const value = parseInt(target.value);
                   if (!isNaN(value) && value > 0) {
                     imageSelectorContext.outputSize = { width: imageSelectorContext.outputSize.width, height: value };
                   }
@@ -85,7 +100,12 @@ export default component$(() => {
               <select
                 class="select select-bordered"
                 onChange$={(e) => {
-                  imageSelectorContext.outputFormat = e.target.value as OutputFormat;
+                  const target = e.target as HTMLSelectElement | null;
+                  if (!target) {
+                    return;
+                  }
+
+                  imageSelectorContext.outputFormat = target.value as OutputFormat;
                 }}
               >
                 <option value="png">PNG</option>
@@ -104,7 +124,12 @@ export default component$(() => {
                 value={imageSelectorContext.downloadNameTemplate}
                 placeholder="Presize.io_{timestamp}"
                 onInput$={(e) => {
-                  imageSelectorContext.downloadNameTemplate = e.target.value;
+                  const target = e.target as HTMLInputElement | null;
+                  if (!target) {
+                    return;
+                  }
+
+                  imageSelectorContext.downloadNameTemplate = target.value;
                 }}
               />
             </div>

From f55b7c2f44998baf72b687f4c4c8ed04b63d693a Mon Sep 17 00:00:00 2001
From: Kun Chen <3233006+atinylittleshell@users.noreply.github.com>
Date: Sat, 11 Oct 2025 22:47:33 -0700
Subject: [PATCH 3/3] Use onChange handler for download name input

---
 apps/web/src/routes/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/routes/index.tsx b/apps/web/src/routes/index.tsx
index 0693de8..b8ca291 100644
--- a/apps/web/src/routes/index.tsx
+++ b/apps/web/src/routes/index.tsx
@@ -123,7 +123,7 @@ export default component$(() => {
                 class="input input-bordered w-full"
                 value={imageSelectorContext.downloadNameTemplate}
                 placeholder="Presize.io_{timestamp}"
-                onInput$={(e) => {
+                onChange$={(e) => {
                   const target = e.target as HTMLInputElement | null;
                   if (!target) {
                     return;