From f0b4a190b9972e3a99cbdd52bcd48fe7c84c370f Mon Sep 17 00:00:00 2001
From: kyuketski <qt.ireuo@yandex.com>
Date: Sun, 31 Aug 2025 22:36:53 +0300
Subject: [PATCH] fix(ui): prevent duplicate link creation in head

- Replace manual creation of multiple `<link>` elements with `appendLinkOnce` function.
- Add a utility function `appendLinkOnce` to ensure stylesheets are not added multiple times.
- Use `appendLinkOnce` for Font Awesome, Google Fonts, and external CSS links.
- Pass additional attributes (e.g., `data-*`) as an optional parameter to `appendLinkOnce`.

Benefits:
- Prevents potential issues caused by duplicate stylesheets.
- Reduces code duplication for creating and appending `<link>` elements.
- Improves maintainability and readability of the code.

Note:
- All future `<link>` additions should use `appendLinkOnce` to avoid similar bugs.
---
 Auto-Image.js | 44 ++++++++++++++++++++++++++++----------------
 1 file changed, 28 insertions(+), 16 deletions(-)

diff --git a/Auto-Image.js b/Auto-Image.js
index aef4768..3e80dcd 100644
--- a/Auto-Image.js
+++ b/Auto-Image.js
@@ -3309,25 +3309,37 @@
     const theme = getCurrentTheme();
     applyTheme(); // <- new: set CSS vars and theme class before building UI
 
-    const fontAwesome = document.createElement('link');
-    fontAwesome.rel = 'stylesheet';
-    fontAwesome.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css';
-    document.head.appendChild(fontAwesome);
+    function appendLinkOnce(href, attributes = {}) {
+      // Check if a link with the same href already exists in the document head
+      const exists = Array.from(document.head.querySelectorAll('link')).some(
+        (link) => link.href === href
+      );
+      if (exists) return;
 
-    if (theme.fontFamily.includes('Press Start 2P')) {
-      const googleFonts = document.createElement('link');
-      googleFonts.rel = 'stylesheet';
-      googleFonts.href = 'https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap';
-      document.head.appendChild(googleFonts);
+      // Create a new link element
+      const link = document.createElement('link');
+      link.rel = 'stylesheet';
+      link.href = href;
+
+      // Add any additional attributes (e.g., data-* attributes)
+      for (const [key, value] of Object.entries(attributes)) {
+        link.setAttribute(key, value);
+      }
+
+      // Append the link element to the document head
+      document.head.appendChild(link);
     }
 
-    // Link external CSS files
-    const cssLink = document.createElement('link');
-    cssLink.rel = 'stylesheet';
-    cssLink.href =
-      'https://skalsech.github.io/WPlace-AutoBOT/feat-external-lang/auto-image-styles.css';
-    cssLink.setAttribute('data-wplace-theme', 'true');
-    document.head.appendChild(cssLink);
+    appendLinkOnce('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');
+
+    if (theme.fontFamily.includes('Press Start 2P')) {
+      appendLinkOnce('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
+    }
+
+    appendLinkOnce(
+      'https://skalsech.github.io/WPlace-AutoBOT/feat-external-lang/auto-image-styles.css',
+      { 'data-wplace-theme': 'true' }
+    );
 
     const container = document.createElement('div');
     container.id = 'wplace-image-bot-container';