sal/containerSite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add search bar to popup for filtering containers

Browse Source
This commit is contained in:
sal
2026-03-04 21:30:03 -06:00
parent d6dabb2646
commit 23759e34a4
3 changed files with 17 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
popup/popup.css
View File

@@ -1,7 +1,12 @@
* { margin: 0; padding: 0; box-sizing: border-box; } * { margin: 0; padding: 0; box-sizing: border-box; }
body { width: 300px; font: 13px/1.4 system-ui, sans-serif; color: #e0e0e0; background: #1e1e2e; } body { width: 300px; font: 13px/1.4 system-ui, sans-serif; color: #e0e0e0; background: #1e1e2e; }
h1 { padding: 10px 12px 6px; font-size: 15px; font-weight: 600; border-bottom: 1px solid #333; } h1 { padding: 10px 12px 6px; font-size: 15px; font-weight: 600; border-bottom: 1px solid #333; }
.search-wrap { padding: 6px 12px; border-bottom: 1px solid #2a2a3a; }
#search { width: 100%; padding: 5px 8px; background: #2a2a3a; border: 1px solid #444; border-radius: 4px; color: #e0e0e0; font-size: 12px; outline: none; }
#search:focus { border-color: #4a9eff; }
#search::placeholder { color: #666; }
#container-list { max-height: 320px; overflow-y: auto; } #container-list { max-height: 320px; overflow-y: auto; }
.row.hidden { display: none; }
.row { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid #2a2a3a; } .row { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid #2a2a3a; }
.row:hover { background: #2a2a3a; } .row:hover { background: #2a2a3a; }
.dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

3
popup/popup.html
View File

@@ -6,6 +6,9 @@
</head> </head>
<body> <body>
<h1>ContainSite</h1> <h1>ContainSite</h1>
<div class="search-wrap">
<input type="text" id="search" placeholder="Search containers..." spellcheck="false">
</div>
<div id="container-list"></div> <div id="container-list"></div>
<div class="actions"> <div class="actions">
<button id="regen-all">Regenerate All</button> <button id="regen-all">Regenerate All</button>

9
popup/popup.js
View File

@@ -85,4 +85,13 @@ document.getElementById("reset").addEventListener("click", async (e) => {
}, 1200); }, 1200);
}); });
document.getElementById("search").addEventListener("input", (e) => {
const q = e.target.value.toLowerCase();
const rows = document.querySelectorAll("#container-list .row");
for (const row of rows) {
const text = row.textContent.toLowerCase();
row.classList.toggle("hidden", q && !text.includes(q));
}
});
loadContainers(); loadContainers();