tools / commit

adding `?name` support and a new first icon

78f9b326c11100961fdfd9c82a7f52c1e6403086 · Pavel Safronov · 2025-07-22 10:00:56 -0700 · parents bc1aeb4e0c36

adding `?name` support and a new first icon

 separator-page/icons/template-icon-0.png | Bin 0 -> 21584 bytes
 separator-page/index.html                |  30 +++++++++++++++++++++++-------
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/separator-page/icons/template-icon-0.png b/separator-page/icons/template-icon-0.png
new file mode 100644
index 0000000..0031c8d
Binary files /dev/null and b/separator-page/icons/template-icon-0.png differ
diff --git a/separator-page/index.html b/separator-page/index.html
index 2dc61d3..206d19a 100644
--- a/separator-page/index.html
+++ b/separator-page/index.html
@@ -16,7 +16,7 @@
             flex-direction: column;
             align-items: center;
             justify-content: center;
-            height: 100vh;
+            height: 100%;
             background-color: #f9f9f9;
         }
 
@@ -42,8 +42,9 @@
             height: 32px;
             border: 1px solid #ddd;
             border-radius: 4px;
-            overflow: hidden;
-            background-size: cover;
+            background-size: contain;
+            background-repeat: no-repeat;
+            background-position: center;
         }
 
         .title {
@@ -295,6 +296,7 @@ technically *some* scripts can get your local "default separator page" state
 
         // Default icons from the icons folder
         const defaultIcons = [
+            "./icons/template-icon-0.png",
             "./icons/template-icon-1.png",
             "./icons/template-icon-2.png",
             "./icons/template-icon-3.png",
@@ -313,11 +315,20 @@ technically *some* scripts can get your local "default separator page" state
         // Load saved data
         const savedData = JSON.parse(localStorage.getItem(localStorageKey) || "null");
 
-        if (!new URLSearchParams(window.location.search).has("tab")) {
+        const searchParams = new URLSearchParams(window.location.search);
+        if (!searchParams.has("tab")) {
             const newUrl = `${window.location.origin}${window.location.pathname}?tab=${tabId}`;
             history.replaceState(null, "", newUrl);
         }
 
+        if (searchParams.has("name")) {
+            const name = searchParams.get("name");
+            if (name) {
+                titleElement.innerText = name;
+                document.title = name;
+            }
+        }
+
         if (savedData) {
             renderAll(savedData);
             console.debug('Loaded saved data:', savedData);
@@ -394,14 +405,19 @@ technically *some* scripts can get your local "default separator page" state
             const previousIcons = JSON.parse(localStorage.getItem(previousIconsKey) || "[]");
             previousIconsContainer.innerHTML = "";
 
-            previousIcons.forEach(iconUrl => {
+            previousIcons.forEach((iconUrl, index) => {
                 const iconElement = document.createElement("div");
                 iconElement.className = "previous-icon";
                 iconElement.style.backgroundImage = `url('${iconUrl}')`;
-                iconElement.title = `Click to use • Shift+Click to remove`;
-                iconElement.addEventListener("click", (event) => {
+                iconElement.title = `Click to use • Shift+Click to remove • Ctrl+Click to download`;
+                iconElement.addEventListener("click", async (event) => {
                     if (event.shiftKey) {
                         removePreviousIcon(iconUrl);
+                    } else if (event.ctrlKey || event.metaKey) {
+                        // Download the individual icon
+                        event.preventDefault();
+                        const filename = `icon-${index + 1}.png`;
+                        await downloadImageAsFile(iconUrl, filename);
                     } else {
                         handleIconChange(iconUrl);
                     }