fully migrated to svelte for settings page

build.sh

@@ -36,4 +36,3 @@ cp src/telegram-web/bio.css dist/telegram-web-bio.css
 
 # copy settings popup files
 cp src/settings/settings.html dist/nostrize-settings.html
-cp src/settings/settings.css dist/nostrize-settings.css

package.json

@@ -31,12 +31,14 @@
   "homepage": "https://github.com/nostrize/extension#readme",
   "devDependencies": {
     "@types/qrcode": "^1.5.5",
+    "css-loader": "^7.1.2",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-svelte": "^2.43.0",
     "nodemon": "^3.1.4",
     "prettier": "^3.2.5",
+    "style-loader": "^4.0.0",
     "svelte": "^4.2.19",
     "svelte-loader": "^3.2.3",
     "webpack": "5.92.1",

src/components/checkbox/custom-checkbox.svelte

@@ -3,7 +3,6 @@
   export let text;
   export let checked;
   export let onclick;
-  export let tooltip;
 
   function handleClick() {
     checked = !checked;
@@ -25,22 +24,16 @@
       }
     }}
   />
-  <label class="custom-checkbox" class:checked for={id}></label>
+  <button class="custom-checkbox" on:click={handleClick} class:checked for={id}
+  ></button>
   <button type="button" on:click={handleClick}>{text}</button>
-  {#if tooltip}
-    <label for={id}>
-      <span class="help-icon">❓</span>
-      <span class="tooltip">{tooltip}</span>
-    </label>
-  {/if}
 </div>
 
 <style>
   /* Container for the checkbox and label */
   .checkbox-container {
     display: flex;
     align-items: center;
-    margin-top: 10px;
   }
 
   /* Hide the default checkbox */
@@ -72,8 +65,8 @@
   /* Checkmark for the checked state */
   .checkbox-container .custom-checkbox.checked::before {
     content: "";
-    width: 12px;
-    height: 12px;
+    width: 10px;
+    height: 10px;
     background-color: #8250df;
     position: absolute;
     top: 50%;
@@ -82,9 +75,8 @@
   }
 
   /* Align the span to the left */
-  .checkbox-container label {
+  .checkbox-container button {
     display: flex;
     align-items: center;
-    cursor: pointer;
   }
 </style>

src/components/tooltip/tooltip.svelte

@@ -0,0 +1,81 @@
+<script>
+  export let text;
+  export let title;
+
+  function showTooltip(e) {
+    const tooltip = e.target.nextElementSibling;
+    tooltip.style.display = "block";
+
+    // Check if tooltip is going off the top of the screen
+    const rect = tooltip.getBoundingClientRect();
+
+    if (rect.top < 0) {
+      tooltip.classList.add("below");
+    } else {
+      tooltip.classList.remove("below");
+    }
+  }
+
+  function hideTooltip(e) {
+    const tooltip = e.target.nextElementSibling;
+    tooltip.style.display = "none";
+    tooltip.classList.remove("below");
+  }
+</script>
+
+<div class="tooltip-container">
+  <slot name="slotTitle"></slot>
+
+  {#if title}
+    {title}
+  {/if}
+
+  <span
+    class="help-icon"
+    role="button"
+    tabindex="0"
+    on:mouseenter={showTooltip}
+    on:mouseleave={hideTooltip}
+    on:keydown={(e) => e.key === "Enter" && showTooltip(e)}>❓</span
+  >
+  <span class="tooltip below">{text}</span>
+</div>
+
+<style>
+  .tooltip-container {
+    position: relative;
+  }
+
+  .help-icon {
+    cursor: help;
+    margin-left: 5px;
+    position: relative; /* Make help icon the positioning context for the tooltip */
+  }
+
+  .tooltip {
+    display: none;
+    position: absolute;
+    background-color: black;
+    color: white;
+    padding: 10px; /* Add padding for better readability */
+    border-radius: 5px;
+    bottom: 125%; /* Position the tooltip above the help icon */
+    left: 50%;
+    transform: translateX(-50%);
+    white-space: normal; /* Allow text to wrap */
+    z-index: 10;
+    min-width: 50vw; /* Allow the tooltip to expand based on its content */
+    max-width: 90vw; /* Maximum width to prevent it from being too wide */
+    text-align: center; /* Center align text inside the tooltip */
+    pointer-events: none; /* Prevent the tooltip from interfering with hover */
+  }
+
+  .tooltip.below {
+    bottom: auto;
+    top: 125%; /* Position the tooltip below the help icon */
+  }
+
+  .help-icon:hover + .tooltip {
+    display: block;
+  }
+</style>

src/settings/common.css

@@ -0,0 +1,42 @@
+fieldset {
+  border: 1px solid #8250df;
+  border-radius: 5px;
+  padding: 10px;
+  margin-bottom: 20px;
+}
+
+legend {
+  font-weight: bold;
+  color: #8250df;
+  padding: 0 5px;
+}
+
+button.settings-button {
+  background-color: rgba(130 80 223 / 75%);
+  color: floralwhite;
+  padding: 5px;
+  cursor: pointer;
+  font-weight: bold;
+  width: fit-content;
+}
+
+.input-container input {
+  width: 100%;
+  max-width: 100%;
+  padding: 5px;
+  margin-top: 5px;
+}
+
+.input-container input[type="checkbox"] {
+  width: fit-content;
+  margin-bottom: 5px;
+}
+
+.input-container input[type="text"],
+input[type="password"],
+select {
+  width: 100%;
+  padding: 5px 0 5px 5px;
+  margin-top: 5px;
+  max-width: 96%;
+}

src/settings/debug.svelte

@@ -1,5 +1,8 @@
 <script>
   import CustomCheckbox from "../components/checkbox/custom-checkbox.svelte";
+  import Tooltip from "../components/tooltip/tooltip.svelte";
+
+  import "./common.css";
 
   export let debugSettings;
 </script>
@@ -16,11 +19,11 @@
 
   <fieldset>
     <legend>Namespace</legend>
-    <label for="namespace"
-      >Namespace
-      <span class="help-icon">❓</span>
-      <span class="tooltip">This helps in identifying Nostrize logs.</span>
-    </label>
+    <Tooltip
+      text="This helps in identifying Nostrize logs."
+      title="Namespace"
+    />
+
     <input
       type="text"
       id="namespace"

src/settings/lightsats.svelte

@@ -1,28 +1,25 @@
 <script>
   import CustomCheckbox from "../components/checkbox/custom-checkbox.svelte";
+  import Tooltip from "../components/tooltip/tooltip.svelte";
 
   export let lightsatsSettings;
 </script>
 
 <div class="lightsats-settings">
   <fieldset>
     <legend>Registration</legend>
-    <label for="lightsats-registration">
-      <a href="https://lightsats.com" target="_blank">Create your first tip</a>
-      <span class="help-icon">❓</span>
-      <span class="tooltip"
-        >This link is for registering a new account on Lightsats.</span
+    <Tooltip text="This link is for registering a new account on Lightsats.">
+      <a href="https://lightsats.com" target="_blank" slot="slotTitle"
+        >Create your first tip</a
       >
-    </label>
+    </Tooltip>
   </fieldset>
 
   <fieldset>
     <legend>API Key</legend>
-    <label for="lightsats-api-key"
-      >API Key
-      <span class="help-icon">❓</span>
-      <span class="tooltip">Enter your Lightsats API key here.</span>
-    </label>
+
+    <Tooltip text="Enter your Lightsats API key here." title="API Key" />
+
     <input
       type="password"
       id="lightsats-api-key"
@@ -33,12 +30,18 @@
 
   <fieldset id="lightsats-integration">
     <legend>Integration</legend>
-    <CustomCheckbox
-      id="lightsats-enable"
-      bind:checked={lightsatsSettings.enabled}
-      text="Enable Lightsats Integration"
-      tooltip="When enabled, Nostrize extension will show a Lightsats button if the
+
+    <div style="display: flex; align-items: center;">
+      <CustomCheckbox
+        id="lightsats-enable"
+        bind:checked={lightsatsSettings.enabled}
+        text="Enable Lightsats Integration"
+      />
+
+      <Tooltip
+        text="When enabled, Nostrize extension will show a Lightsats button if the
         user has no Nostr integration."
-    />
+      />
+    </div>
   </fieldset>
 </div>

src/settings/nip65.svelte

@@ -11,6 +11,8 @@
   import { getPageUserRelays } from "../helpers/relays.js";
   import { generateRandomHexString } from "../helpers/utils.js";
 
+  import "../settings/common.css";
+
   export let state;
 
   let bunkerRelays = [];

src/settings/nostr.svelte

@@ -1,5 +1,6 @@
 <script>
   import CustomCheckbox from "../components/checkbox/custom-checkbox.svelte";
+  import Tooltip from "../components/tooltip/tooltip.svelte";
 
   export let nostrSettings;
 
@@ -15,16 +16,15 @@
 <div class="nostr-settings">
   <fieldset>
     <legend>Mode</legend>
-    <label for="mode"
-      >Mode
-      <span class="help-icon">❓</span>
-      <span class="tooltip"
-        >Choose the mode for Nostr. 'Anonymous' generates new keys everytime for
+
+    <Tooltip
+      text="Choose the mode for Nostr. 'Anonymous' generates new keys everytime for
         event signing, while 'NIP-07' gets your nostr public key and signs
         events using browser extensions like alby or nos2x. Use NostrConnect to
-        select providers</span
-      >
-    </label>
+        select providers"
+      title="Mode"
+    />
+
     <select id="mode" bind:value={nostrSettings.mode}>
       <option value="anon">Anonymous</option>
       <option value="nip07">NIP07</option>
@@ -44,11 +44,9 @@
 
   <fieldset>
     <legend>Open Nostr Links</legend>
-    <label for="open-nostr"
-      >URL
-      <span class="help-icon">❓</span>
-      <span class="tooltip">You can specify a URL to open nostr links in.</span>
-    </label>
+
+    <Tooltip text="You can specify a URL to open nostr links" title="URL" />
+
     <input type="text" id="open-nostr" bind:value={nostrSettings.openNostr} />
   </fieldset>
 
@@ -58,10 +56,33 @@
       {#each nostrSettings.relays as relay}
         <li class="relay-item">
           <input type="text" bind:value={relay} />
-          <button on:click={() => removeRelay(relay)}>Remove</button>
+          <button
+            class="remove-relay-button settings-button"
+            on:click={() => removeRelay(relay)}
+          >
+            Remove
+          </button>
         </li>
       {/each}
     </ul>
-    <button id="add-relay" on:click={addRelay}>Add Relay</button>
+    <button class="settings-button" on:click={addRelay}>Add Relay</button>
   </fieldset>
 </div>
+
+<style>
+  .relay-item {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+  }
+
+  .relay-item input[type="text"] {
+    flex-grow: 1;
+    min-width: 0;
+    margin-bottom: 4px;
+  }
+
+  .relay-item .remove-relay-button {
+    flex-shrink: 0;
+  }
+</style>