Merge pull request #19 from thavelick/alternating-row-colors

Add alternating row colors to settings dialog

Author: thavelick

public_html/search.js

@@ -1,27 +1,90 @@
 const DEFAULT_BANG = "d";
 
 const bangs = {
-  al: "https://kiwix.tristanhavelick.com/search?content=archlinux_en_all_nopic_2022-05&pattern={{{s}}}",
-  cl: "https://denver.craigslist.org/search/?query={{{s}}}",
-  d: "https://lite.duckduckgo.com/lite?q={{{s}}}&kl=us-en",
-  e: "https://www.ebay.com/sch/i.html?_nkw={{{s}}}&rt=nc&LH_ItemCondition=4",
-  jw: "https://www.justwatch.com/us/search?q={{{s}}}",
-  k: "https://kiwix.tristanhavelick.com/search?pattern={{{s}}}",
-  m: "https://search.marginalia.nu/search?query={{{s}}}",
-  py: "https://kiwix.tristanhavelick.com/search?content=python-3.10.2&pattern={{{s}}}",
-  sg: "https://app.thestorygraph.com/browse?search_term={{{s}}}",
-  ytt: "https://youtranscript.tristanhavelick.com/search?search_term={{{s}}}",
-  x: "https://searxng.tristanhavelick.com/search?q={{{s}}}",
-  gh: "https://github.com/search?q={{{s}}}",
-  ghr: "https://github.com/{{{s}}}",
-  wb: "https://web.archive.org/web/{{{s}}}",
-  g: "https://www.google.com/search?q={{{s}}}",
-  ddg: "https://duckduckgo.com/?q={{{s}}}",
-  a: "https://www.amazon.com/s?k={{{s}}}",
-  pypi: "https://pypi.org/search/?q={{{s}}}",
-  w: "https://en.wikipedia.org/wiki/Special:Search?search={{{s}}}",
-  i: "https://duckduckgo.com/?q={{{s}}}&iax=images&ia=images",
-  yt: "https://www.youtube.com/results?search_query={{{s}}}",
+  al: {
+    url: "https://kiwix.tristanhavelick.com/search?content=archlinux_en_all_nopic_2022-05&pattern={{{s}}}",
+    description: "ArchLinux Wiki",
+  },
+  cl: {
+    url: "https://denver.craigslist.org/search/?query={{{s}}}",
+    description: "Denver Craigslist",
+  },
+  d: {
+    url: "https://lite.duckduckgo.com/lite?q={{{s}}}&kl=us-en",
+    description: "DuckDuckGo Lite",
+  },
+  e: {
+    url: "https://www.ebay.com/sch/i.html?_nkw={{{s}}}&rt=nc&LH_ItemCondition=4",
+    description: "eBay (used items)",
+  },
+  jw: {
+    url: "https://www.justwatch.com/us/search?q={{{s}}}",
+    description: "JustWatch (streaming search)",
+  },
+  k: {
+    url: "https://kiwix.tristanhavelick.com/search?pattern={{{s}}}",
+    description: "Kiwix Offline Content",
+  },
+  m: {
+    url: "https://search.marginalia.nu/search?query={{{s}}}",
+    description: "Marginalia Search",
+  },
+  py: {
+    url: "https://kiwix.tristanhavelick.com/search?content=python-3.10.2&pattern={{{s}}}",
+    description: "Python Documentation",
+  },
+  sg: {
+    url: "https://app.thestorygraph.com/browse?search_term={{{s}}}",
+    description: "The StoryGraph (books)",
+  },
+  ytt: {
+    url: "https://youtranscript.tristanhavelick.com/search?search_term={{{s}}}",
+    description: "YouTube Transcript Search",
+  },
+  x: {
+    url: "https://searxng.tristanhavelick.com/search?q={{{s}}}",
+    description: "SearXNG",
+  },
+  gh: {
+    url: "https://github.com/search?q={{{s}}}",
+    description: "GitHub Search",
+  },
+  ghr: {
+    url: "https://github.com/{{{s}}}",
+    description: "GitHub Repository",
+  },
+  wb: {
+    url: "https://web.archive.org/web/{{{s}}}",
+    description: "Wayback Machine",
+  },
+  g: {
+    url: "https://www.google.com/search?q={{{s}}}",
+    description: "Google Search",
+  },
+  ddg: {
+    url: "https://duckduckgo.com/?q={{{s}}}",
+    description: "DuckDuckGo",
+  },
+  a: {
+    url: "https://www.amazon.com/s?k={{{s}}}",
+    description: "Amazon",
+  },
+  pypi: {
+    url: "https://pypi.org/search/?q={{{s}}}",
+    description: "Python Package Index",
+  },
+  w: {
+    url: "https://en.wikipedia.org/wiki/Special:Search?search={{{s}}}",
+    description: "Wikipedia",
+  },
+  i: {
+    url: "https://duckduckgo.com/?q={{{s}}}&iax=images&ia=images",
+    description: "DuckDuckGo Images",
+  },
+  yt: {
+    url: "https://www.youtube.com/results?search_query={{{s}}}",
+    description: "YouTube",
+  },
 };
 
 function buildSearchUrl(urlTemplate, searchTerm) {
@@ -39,7 +102,7 @@ function getDefaultBang(windowObj = window) {
 
 function buildFallbackUrl(searchTerm, windowObj = window) {
   const defaultBang = getDefaultBang(windowObj);
-  const bangUrl = bangs[defaultBang];
+  const bangUrl = bangs[defaultBang].url;
   return buildSearchUrl(bangUrl, searchTerm);
 }
 
@@ -59,19 +122,19 @@ function processBang(query, windowObj = window) {
     const bangTag = trimmed.substring(1, spaceIndex);
     const searchTerm = trimmed.substring(spaceIndex + 1).trim();
 
-    const bangUrl = bangs[bangTag];
-    if (bangUrl) {
-      return buildSearchUrl(bangUrl, searchTerm);
+    const bang = bangs[bangTag];
+    if (bang) {
+      return buildSearchUrl(bang.url, searchTerm);
     }
   }
   const bangMatch = trimmed.match(/^(.+)\s+(\w+)!$/);
   if (bangMatch) {
     const searchTerm = bangMatch[1].trim();
     const bangTag = bangMatch[2];
 
-    const bangUrl = bangs[bangTag];
-    if (bangUrl) {
-      return buildSearchUrl(bangUrl, searchTerm);
+    const bang = bangs[bangTag];
+    if (bang) {
+      return buildSearchUrl(bang.url, searchTerm);
     }
   }
   return buildFallbackUrl(trimmed, windowObj);
@@ -300,9 +363,9 @@ class SettingsDialog extends SettingsDialogBase {
         <div class="bang-list">
     `;
 
-    for (const [bangKey, bangUrl] of sortedBangs) {
+    for (const [bangKey, bangData] of sortedBangs) {
       const isSelected = bangKey === currentDefault;
-      html += `<setting-option bang-key="${bangKey}" bang-url="${bangUrl}"${isSelected ? " selected" : ""}></setting-option>`;
+      html += `<setting-option bang-key="${bangKey}" bang-url="${bangData.url}" bang-description="${bangData.description}"${isSelected ? " selected" : ""}></setting-option>`;
     }
 
     html += `
@@ -358,12 +421,15 @@ class SettingOption extends SettingOptionBase {
   render() {
     const bangKey = this.getAttribute("bang-key");
     const bangUrl = this.getAttribute("bang-url");
+    const bangDescription = this.getAttribute("bang-description");
     const isSelected = this.hasAttribute("selected");
 
     this.innerHTML = `
-      <div class="bang-trigger">${bangKey}!</div>
-      <div class="bang-url">${bangUrl}</div>
-      <input type="radio" name="default-bang" value="${bangKey}" class="bang-radio"${isSelected ? " checked" : ""}>
+      <div class="setting-row">
+        <div class="bang-trigger">${bangKey}!</div>
+        <div class="bang-description" title="${bangUrl}">${bangDescription}</div>
+        <input type="radio" name="default-bang" value="${bangKey}" class="bang-radio"${isSelected ? " checked" : ""}>
+      </div>
     `;
   }
 

public_html/service-worker-lib.js

@@ -1,4 +1,4 @@
-const STATIC_CACHE_NAME = "just-bangs-static-v10";
+const STATIC_CACHE_NAME = "just-bangs-static-v11";
 
 const STATIC_ASSETS = [
   "./",

public_html/style.css

@@ -79,28 +79,28 @@ input[type="button"] {
 /* Force dark mode with class */
 html.dark-mode,
 html.dark-mode input[type="text"] {
-  background-color: #2d4f8e !important;
+  background-color: #2d4f8e;
 }
 
 html.dark-mode,
 html.dark-mode h1,
 html.dark-mode input[type="text"] {
-  color: white !important;
+  color: white;
 }
 
 /* Force light mode with class */
 html.light-mode {
-  background: white !important;
-  color: black !important;
+  background: white;
+  color: black;
 }
 
 html.light-mode h1 {
-  color: #2d4f8e !important;
+  color: #2d4f8e;
 }
 
 html.light-mode input[type="text"] {
-  background-color: white !important;
-  color: black !important;
+  background-color: white;
+  color: black;
 }
 
 /* Dark mode toggle button */
@@ -211,7 +211,7 @@ html.dark-mode .hamburger-menu:hover {
   max-width: 600px;
   height: 100%;
   max-height: calc(100vh - 40px);
-  overflow: hidden;
+  overflow: scroll;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
   display: flex;
   flex-direction: column;
@@ -278,20 +278,29 @@ html.dark-mode .close-button:hover {
 }
 
 .save-message {
-  color: #64bb45;
+  color: #2d5016;
   font-size: 14px;
   margin: 0;
-  display: none;
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  padding: 8px 12px;
+  background-color: #d4edda;
+  border: 1px solid #c3e6cb;
+  border-radius: 6px;
+  opacity: 0;
   transition: opacity 0.3s ease;
+  pointer-events: none;
 }
 
 .save-message.visible {
-  display: block;
   opacity: 1;
 }
 
 html.dark-mode .save-message {
-  color: #7fd95f;
+  color: #a3d977;
+  background-color: #2d4f1a;
+  border-color: #4a6b3a;
 }
 
 /* Settings body */
@@ -303,16 +312,33 @@ html.dark-mode .save-message {
 
 /* Bang list grid */
 .bang-list {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  gap: 12px 16px;
-  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
   margin: 16px 0;
 }
 
 setting-option,
 save-message {
-  display: contents;
+  display: block;
+}
+
+.setting-row {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  gap: 12px 16px;
+  align-items: start;
+  padding: 8px;
+  border-radius: 4px;
+}
+
+/* Alternating row backgrounds */
+setting-option:nth-child(even) .setting-row {
+  background-color: #f0f0f0;
+}
+
+html.dark-mode setting-option:nth-child(even) .setting-row {
+  background-color: #3a5f9e;
 }
 
 .bang-trigger {
@@ -329,12 +355,25 @@ html.dark-mode .bang-trigger {
   font-size: 14px;
   color: #666;
   word-break: break-all;
+  line-height: 1.3;
+  overflow-wrap: break-word;
+  hyphens: auto;
+}
+
+.bang-description {
+  font-size: 14px;
+  color: #555;
+  cursor: help;
 }
 
 html.dark-mode .bang-url {
   color: #ccc;
 }
 
+html.dark-mode .bang-description {
+  color: #ddd;
+}
+
 .bang-radio {
   margin: 0;
 }

tests/integration/settings-modal.spec.js

@@ -19,11 +19,21 @@ test.describe("Settings Modal", () => {
     await expect(settingsPanel).toHaveAttribute("aria-hidden", "true");
   });
 
-  test("should save default search engine selection", async ({ page }) => {
+  test("should save default search engine selection and show URL tooltip on hover", async ({
+    page,
+  }) => {
     const hamburgerButton = page.locator(".hamburger-menu");
 
     await hamburgerButton.click();
 
+    // Test hover tooltip functionality
+    const githubDescription = page
+      .locator(".bang-description")
+      .filter({ hasText: "GitHub Search" });
+    await githubDescription.hover();
+    const titleAttribute = await githubDescription.getAttribute("title");
+    expect(titleAttribute).toContain("https://github.com/search?q={{{s}}}");
+
     const githubRadio = page.locator('input[name="default-bang"][value="gh"]');
     await githubRadio.click();