From 0f278399e6229b3acc30934a141a5932d92d9815 Mon Sep 17 00:00:00 2001
From: Paul Spenke <paul@spenke-nordic.com>
Date: Sun, 15 Mar 2026 14:46:32 +0100
Subject: [PATCH] Refactor settings.js to replace shorthand DOM lookups with
 explicit element references for improved readability and maintainability.

---
 src/settings.js | 65 +++++++++++++++++++++++++++++--------------------
 1 file changed, 39 insertions(+), 26 deletions(-)

diff --git a/src/settings.js b/src/settings.js
index 900e10c..4dfcfe9 100644
--- a/src/settings.js
+++ b/src/settings.js
@@ -1,62 +1,75 @@
 // settings.js
-const $ = (id) => document.getElementById(id);
+
+// DOM refs
+const memosUrlInput    = document.getElementById("memos-url");
+const apiTokenInput     = document.getElementById("api-token");
+const visibilitySelect  = document.getElementById("visibility");
+const clipModeSelect    = document.getElementById("clip-mode");
+const includeImagesCheck = document.getElementById("include-images");
+const includeTagsCheck   = document.getElementById("include-tags");
+const saveBtn           = document.getElementById("save-btn");
+const saveDefaultsBtn   = document.getElementById("save-defaults-btn");
+const testBtn           = document.getElementById("test-btn");
+const statusEl          = document.getElementById("status");
+const defaultsStatusEl  = document.getElementById("defaults-status");
 
 async function load() {
   const s = await chrome.storage.sync.get([
     "memosUrl", "apiToken", "visibility", "clipMode", "includeImages", "includeTags"
   ]);
-  if (s.memosUrl)      $("memos-url").value       = s.memosUrl;
-  if (s.apiToken)      $("api-token").value        = s.apiToken;
-  if (s.visibility)    $("visibility").value       = s.visibility;
-  if (s.clipMode)      $("clip-mode").value        = s.clipMode;
-  if (s.includeImages !== undefined) $("include-images").checked = s.includeImages;
-  if (s.includeTags   !== undefined) $("include-tags").checked   = s.includeTags;
+  if (s.memosUrl)      memosUrlInput.value       = s.memosUrl;
+  if (s.apiToken)      apiTokenInput.value        = s.apiToken;
+  if (s.visibility)    visibilitySelect.value       = s.visibility;
+  if (s.clipMode)      clipModeSelect.value        = s.clipMode;
+  if (s.includeImages !== undefined) includeImagesCheck.checked = s.includeImages;
+  if (s.includeTags   !== undefined) includeTagsCheck.checked   = s.includeTags;
 }
 
 function showStatus(el, ok, msg) {
   el.textContent = msg;
   el.className = `status ${ok ? "ok" : "err"}`;
+  el.classList.remove("hidden");
 }
 
-$("save-btn").addEventListener("click", async () => {
-  const url   = $("memos-url").value.trim().replace(/\/$/, "");
-  const token = $("api-token").value.trim();
+saveBtn.addEventListener("click", async () => {
+  const url   = memosUrlInput.value.trim().replace(/\/$/, "");
+  const token = apiTokenInput.value.trim();
   if (!url || !token) {
-    showStatus($("status"), false, "URL and token are required.");
+    showStatus(statusEl, false, "URL and token are required.");
     return;
   }
   await chrome.storage.sync.set({ memosUrl: url, apiToken: token });
-  showStatus($("status"), true, "✓ Saved.");
+  showStatus(statusEl, true, "✓ Saved.");
 });
 
-$("save-defaults-btn").addEventListener("click", async () => {
+saveDefaultsBtn.addEventListener("click", async () => {
   await chrome.storage.sync.set({
-    visibility:    $("visibility").value,
-    clipMode:      $("clip-mode").value,
-    includeImages: $("include-images").checked,
-    includeTags:   $("include-tags").checked,
+    visibility:    visibilitySelect.value,
+    clipMode:      clipModeSelect.value,
+    includeImages: includeImagesCheck.checked,
+    includeTags:   includeTagsCheck.checked,
   });
-  showStatus($("defaults-status"), true, "✓ Defaults saved.");
+  showStatus(defaultsStatusEl, true, "✓ Defaults saved.");
 });
 
-$("test-btn").addEventListener("click", async () => {
-  const url   = $("memos-url").value.trim().replace(/\/$/, "");
-  const token = $("api-token").value.trim();
-  $("test-btn").textContent = "Testing…";
+testBtn.addEventListener("click", async () => {
+  const url   = memosUrlInput.value.trim().replace(/\/$/, "");
+  const token = apiTokenInput.value.trim();
+  testBtn.textContent = "Testing…";
   try {
     const res = await fetch(`${url}/api/v1/memos?pageSize=1`, {
       headers: { Authorization: `Bearer ${token}` }
     });
     if (res.ok) {
-      showStatus($("status"), true, `✓ Connected! (HTTP ${res.status})`);
+      showStatus(statusEl, true, `✓ Connected! (HTTP ${res.status})`);
     } else {
       const txt = await res.text();
-      showStatus($("status"), false, `✗ HTTP ${res.status}: ${txt.slice(0, 120)}`);
+      showStatus(statusEl, false, `✗ HTTP ${res.status}: ${txt.slice(0, 120)}`);
     }
   } catch (e) {
-    showStatus($("status"), false, `✗ ${e.message}`);
+    showStatus(statusEl, false, `✗ ${e.message}`);
   } finally {
-    $("test-btn").textContent = "Test Connection";
+    testBtn.textContent = "Test Connection";
   }
 });