revamp chromium extension settings

2026-03-07 14:23:18 +00:00 · 2025-09-05 16:19:48 +02:00
parent 191680940b
commit f46528471b
4 changed files with 106 additions and 22 deletions
--- a/chrome-extension/live_transcription.js
+++ b/chrome-extension/live_transcription.js
@@ -33,6 +33,8 @@ const linesTranscriptDiv = document.getElementById("linesTranscript");
 const timerElement = document.querySelector(".timer");
 const themeRadios = document.querySelectorAll('input[name="theme"]');
 const microphoneSelect = document.getElementById("microphoneSelect");
+const settingsToggle = document.getElementById("settingsToggle");
+const settingsDiv = document.querySelector(".settings");



@@ -614,6 +616,13 @@ recordButton.addEventListener("click", toggleRecording);
 if (microphoneSelect) {
  microphoneSelect.addEventListener("change", handleMicrophoneChange);
 }
+
+// Settings toggle functionality
+settingsToggle.addEventListener("click", () => {
+  settingsDiv.classList.toggle("visible");
+  settingsToggle.classList.toggle("active");
+});
+
 document.addEventListener('DOMContentLoaded', async () => {
  try {
    await enumerateMicrophones();
--- a/chrome-extension/popup.html
+++ b/chrome-extension/popup.html
@@ -9,7 +9,6 @@
 </head>

 <body>
-     <div id="audioPermission"></div>
    <div class="settings-container">
        <button id="recordButton">
            <div class="shape-container">
@@ -23,6 +22,10 @@
            </div>
        </button>

+        <button id="settingsToggle" class="settings-toggle" title="Show/hide settings">
+            <img src="/web/src/settings.svg" alt="Settings" />
+        </button>
+
        <div class="settings">
            <div class="field">
                <label for="websocketInput">Websocket URL</label>
@@ -34,6 +37,8 @@
                <select id="microphoneSelect">
                    <option value="">Default Microphone</option>
                </select>
+                        <div id="audioPermission"></div>
+
            </div>

            <div class="theme-selector-container">
@@ -41,26 +46,25 @@
                    <input type="radio" id="theme-system" name="theme" value="system" />
                    <label for="theme-system" title="System">
                        <img src="/web/src/system_mode.svg" alt="" />
-                        <span>System</span>
+                        <!-- <span>System</span> -->
                    </label>

                    <input type="radio" id="theme-light" name="theme" value="light" />
                    <label for="theme-light" title="Light">
                        <img src="/web/src/light_mode.svg" alt="" />
-                        <span>Light</span>
+                        <!-- <span>Light</span> -->
                    </label>

                    <input type="radio" id="theme-dark" name="theme" value="dark" />
                    <label for="theme-dark" title="Dark">
                        <img src="/web/src/dark_mode.svg" alt="" />
-                        <span>Dark</span>
+                        <!-- <span>Dark</span> -->
                    </label>
                </div>
            </div>

        </div>
    </div>
-    </div>



@@ -71,4 +75,4 @@
    <script src="live_transcription.js"></script>
 </body>

-</html>
+</html>
--- a/chrome-extension/web/live_transcription.css
+++ b/chrome-extension/web/live_transcription.css
@@ -80,6 +80,41 @@ body {
  color: var(--text);
 }

+.settings-toggle {
+  margin-top: 4px;
+  width: 40px;
+  height: 40px;
+  border: none;
+  border-radius: 50%;
+  background-color: var(--button-bg);
+  cursor: pointer;
+  transition: all 0.3s ease;
+  /* border: 1px solid var(--button-border); */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.settings-toggle:hover {
+  background-color: var(--chip-bg);
+}
+
+.settings-toggle img {
+  width: 24px;
+  height: 24px;
+  opacity: 0.7;
+  transition: opacity 0.2s ease, transform 0.3s ease;
+}
+
+.settings-toggle:hover img {
+  opacity: 1;
+}
+
+.settings-toggle.active img {
+  transform: rotate(80deg);
+}
+
 /* Record button */
 #recordButton {
  width: 50px;
@@ -177,16 +212,22 @@ body {
 .settings-container {
  display: flex;
  justify-content: center;
-  align-items: center;
+  align-items: flex-start;
  gap: 15px;
  margin-top: 20px;
+  flex-wrap: wrap;
 }

 .settings {
-  display: flex;
+  display: none;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
+  transition: opacity 0.3s ease;
+}
+
+.settings.visible {
+  display: flex;
 }

 .field {
@@ -406,58 +447,87 @@ label {
 }

 /* for smaller screens */
-@media (max-width: 768px) {
+/* @media (max-width: 450px) {
  .settings-container {
    flex-direction: column;
    gap: 10px;
+    align-items: center;
  }
-  
+
  .settings {
    justify-content: center;
    gap: 8px;
+    width: 100%;
  }
-  
+
  .field {
    align-items: center;
+    width: 100%;
  }
-  
+
  #websocketInput,
  #microphoneSelect {
    min-width: 200px;
-    max-width: 400px;
+    max-width: 100%;
  }
-  
+
  .theme-selector-container {
    margin-top: 10px;
  }
-}
+} */

-@media (max-width: 480px) {
+/* @media (max-width: 768px) and (min-width: 451px) {
+  .settings-container {
+    gap: 10px;
+  }
+
+  .settings {
+    gap: 8px;
+  }
+
+  #websocketInput,
+  #microphoneSelect {
+    min-width: 150px;
+    max-width: 300px;
+  }
+} */
+
+/* @media (max-width: 480px) {
  body {
    margin: 10px;
  }
-  
+
+  .settings-toggle {
+    width: 35px;
+    height: 35px;
+  }
+
+  .settings-toggle img {
+    width: 20px;
+    height: 20px;
+  }
+
  .settings {
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
-  
+
  #websocketInput,
  #microphoneSelect {
    max-width: 400px;
  }
-  
+
  .segmented label {
    padding: 4px 8px;
    font-size: 12px;
  }
-  
+
  .segmented img {
    width: 14px;
    height: 14px;
  }
-}
+} */


 html
@@ -466,4 +536,4 @@ html
    height: 600px; /* max: 600px */
    border-radius: 10px;

-}
+}
--- a/chrome-extension/web/src/settings.svg
+++ b/chrome-extension/web/src/settings.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M433-80q-27 0-46.5-18T363-142l-9-66q-13-5-24.5-12T307-235l-62 26q-25 11-50 2t-39-32l-47-82q-14-23-8-49t27-43l53-40q-1-7-1-13.5v-27q0-6.5 1-13.5l-53-40q-21-17-27-43t8-49l47-82q14-23 39-32t50 2l62 26q11-8 23-15t24-12l9-66q4-26 23.5-44t46.5-18h94q27 0 46.5 18t23.5 44l9 66q13 5 24.5 12t22.5 15l62-26q25-11 50-2t39 32l47 82q14 23 8 49t-27 43l-53 40q1 7 1 13.5v27q0 6.5-2 13.5l53 40q21 17 27 43t-8 49l-48 82q-14 23-39 32t-50-2l-60-26q-11 8-23 15t-24 12l-9 66q-4 26-23.5 44T527-80h-94Zm7-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z"/></svg>
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M433-80q-27 0-46.5-18T363-142l-9-66q-13-5-24.5-12T307-235l-62 26q-25 11-50 2t-39-32l-47-82q-14-23-8-49t27-43l53-40q-1-7-1-13.5v-27q0-6.5 1-13.5l-53-40q-21-17-27-43t8-49l47-82q14-23 39-32t50 2l62 26q11-8 23-15t24-12l9-66q4-26 23.5-44t46.5-18h94q27 0 46.5 18t23.5 44l9 66q13 5 24.5 12t22.5 15l62-26q25-11 50-2t39 32l47 82q14 23 8 49t-27 43l-53 40q1 7 1 13.5v27q0 6.5-2 13.5l53 40q21 17 27 43t-8 49l-48 82q-14 23-39 32t-50-2l-60-26q-11 8-23 15t-24 12l-9 66q-4 26-23.5 44T527-80h-94Zm7-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z"/></svg>