Fix the UI

shefing · Jan 8, 2025 · 0d0ef5f · 0d0ef5f
1 parent 10fb7c8
commit 0d0ef5f
Show file tree

Hide file tree

Showing 3 changed files with 143 additions and 7 deletions.
diff --git a/src/popup.html b/src/popup.html
@@ -43,8 +43,10 @@ <h3 class="text-base font-semibold">Manage Recordings</h3>
                 </div>
             </div>
             <div class="relative">
-                <input type="text" id="recordingSelect" list="recordingOptions" placeholder="Search or select a recording" class="w-full p-1 text-sm border rounded dark:bg-gray-700" title="Search or select a recording to replay">
-                <datalist id="recordingOptions"></datalist>
+                <div class="custom-select relative">
+                    <input type="text" id="recordingSelect" placeholder="Search or select a recording" class="w-full p-1 text-sm border rounded dark:bg-gray-700" title="Search or select a recording to replay">
+                    <div class="select-items select-hide"></div>
+                </div>
             </div>
         </div>
 

diff --git a/src/popup.js b/src/popup.js
@@ -299,14 +299,21 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
     function updateRecordingOptions(lastUsedRecord = '') {
-        recordingOptions.innerHTML = '';
+        const selectItems = document.querySelector('.select-items');
+        selectItems.innerHTML = '';
         allRecordings.forEach(recording => {
-            const option = document.createElement('option');
-            option.value = recording;
-            option.textContent = recording;
-            recordingOptions.appendChild(option);
+            const div = document.createElement('div');
+            div.textContent = recording;
+            div.addEventListener('click', function() {
+                document.getElementById('recordingSelect').value = this.textContent;
+                selectItems.classList.add('select-hide');
+                updateApiPreview();
+                chrome.storage.local.set({ 'lastUsedRecord': this.textContent });
+            });
+            selectItems.appendChild(div);
         });
 
+        const recordingSelect = document.getElementById('recordingSelect');
         if (lastUsedRecord && allRecordings.includes(lastUsedRecord)) {
             recordingSelect.value = lastUsedRecord;
         } else if (allRecordings.length > 0) {
@@ -316,6 +323,35 @@ document.addEventListener('DOMContentLoaded', () => {
         updateApiPreview();
     }
 
+    function initCustomSelect() {
+        const selectElement = document.getElementById('recordingSelect');
+        const selectItems = document.querySelector('.select-items');
+
+        selectElement.addEventListener('input', function() {
+            const filter = this.value.toUpperCase();
+            const options = selectItems.getElementsByTagName('div');
+            for (let i = 0; i < options.length; i++) {
+                const txtValue = options[i].textContent || options[i].innerText;
+                if (txtValue.toUpperCase().indexOf(filter) > -1) {
+                    options[i].style.display = '';
+                } else {
+                    options[i].style.display = 'none';
+                }
+            }
+            selectItems.classList.remove('select-hide');
+        });
+
+        selectElement.addEventListener('focus', function() {
+            selectItems.classList.remove('select-hide');
+        });
+
+        document.addEventListener('click', function(e) {
+            if (!selectElement.contains(e.target) && !selectItems.contains(e.target)) {
+                selectItems.classList.add('select-hide');
+            }
+        });
+    }
+
     recordingSelect.addEventListener('input', () => {
         updateApiPreview();
         chrome.storage.local.set({ 'lastUsedRecord': recordingSelect.value });
@@ -494,5 +530,7 @@ document.addEventListener('DOMContentLoaded', () => {
         document.body.classList.add('dark');
         document.getElementById('apiCallModal').classList.add('dark');
     }
+
+    initCustomSelect();
 });
 
diff --git a/src/styles.css b/src/styles.css
@@ -182,3 +182,99 @@ body.dark {
     background-color: #4a5568;
 }
 
+/* Dark mode button styles */
+.dark button.bg-blue-500,
+.dark button.bg-green-500,
+.dark button.bg-red-500,
+.dark button.bg-purple-500 {
+    color: #ffffff;
+}
+
+.dark button.bg-blue-500 {
+    background-color: #3b82f6;
+}
+
+.dark button.bg-green-500 {
+    background-color: #10b981;
+}
+
+.dark button.bg-red-500 {
+    background-color: #ef4444;
+}
+
+.dark button.bg-purple-500 {
+    background-color: #8b5cf6;
+}
+
+.dark button.bg-blue-500:hover,
+.dark button.bg-green-500:hover,
+.dark button.bg-red-500:hover,
+.dark button.bg-purple-500:hover {
+    opacity: 0.8;
+}
+
+/* Custom select styles */
+.custom-select {
+    position: relative;
+    width: 100%;
+}
+
+.custom-select select {
+    display: none;
+}
+
+.select-selected {
+    background-color: #f3f4f6;
+    color: #333333;
+    padding: 8px 16px;
+    border: 1px solid #d1d5db;
+    cursor: pointer;
+    user-select: none;
+    border-radius: 0.25rem;
+}
+
+.dark .select-selected {
+    background-color: #1a1a1a;
+    color: #e2e8f0;
+    border-color: #4a5568;
+}
+
+.select-items {
+    position: absolute;
+    background-color: #f3f4f6;
+    color: #333333;
+    top: 100%;
+    left: 0;
+    right: 0;
+    z-index: 99;
+    max-height: 200px;
+    overflow-y: auto;
+    border: 1px solid #d1d5db;
+    border-top: none;
+    border-radius: 0 0 0.25rem 0.25rem;
+}
+
+.dark .select-items {
+    background-color: #1a1a1a;
+    color: #e2e8f0;
+    border-color: #4a5568;
+}
+
+.select-hide {
+    display: none;
+}
+
+.select-items div {
+    padding: 8px 16px;
+    cursor: pointer;
+    user-select: none;
+}
+
+.select-items div:hover {
+    background-color: #e5e7eb;
+}
+
+.dark .select-items div:hover {
+    background-color: #2d3748;
+}
+