commit dfd8cbfa2764443d54f4acb7f4ac53bfd657a04e
parent 64817f9e40e7496fde07edd24d911b15ad41b685
Author: breadcat <breadcat@users.noreply.github.com>
Date: Tue, 19 May 2026 15:55:15 +0100
Add filter functionality
Diffstat:
2 files changed, 40 insertions(+), 1 deletion(-)
diff --git a/main.go b/main.go
@@ -112,6 +112,12 @@ header{border-bottom:1px solid #333;padding:10px 16px;display:flex;align-items:c
.view-toggle button:hover{background:#2e2e2e;color:#d4d4d4}
.view-toggle button{background:#2a2a2a;border:1px solid #333;color:#777;padding:4px 10px;cursor:pointer;font-size:12px;font-family:inherit}
.view-toggle{margin-left:auto}
+.filter-box{display:flex;align-items:center;gap:6px;margin-left:auto}
+.filter-box input{background:#2a2a2a;border:1px solid #333;color:#d4d4d4;font-family:inherit;font-size:12px;padding:4px 10px;width:180px;outline:none}
+.filter-box input::placeholder{color:#555}
+.filter-box input:focus{border-color:#5b9bd5}
+.filter-clear{background:none;border:none;color:#555;cursor:pointer;font-size:14px;padding:0 2px;line-height:1}
+.filter-clear:hover{color:#d4d4d4}
</style>
</head>
<body>
@@ -128,6 +134,10 @@ header{border-bottom:1px solid #333;padding:10px 16px;display:flex;align-items:c
{{ end }}
{{ end }}
</div>
+ <div class="filter-box">
+ <input type="text" id="filter-input" placeholder="Filter..." oninput="filterView(this.value)" autocomplete="off" spellcheck="false">
+ <button class="filter-clear" id="filter-clear" onclick="clearFilter()" title="Clear filter" style="display:none">✕</button>
+ </div>
<div class="view-toggle">
<button id="btn-list" class="{{ if eq .View "list" }}active{{ end }}" onclick="setView('list')">☰ List</button>
<button id="btn-thumb" class="{{ if eq .View "thumb" }}active{{ end }}" onclick="setView('thumb')">▦ Thumbs</button>
@@ -229,6 +239,34 @@ function setView(v) {
window.location.href = v === 'thumb' ? window.location.pathname + '?v=thumb' : window.location.pathname;
}
+function filterView(query) {
+ const q = query.trim().toLowerCase();
+ document.getElementById('filter-clear').style.display = q ? '' : 'none';
+
+ // Filter rows, skipping parent
+ document.querySelectorAll('#file-table tbody tr').forEach(row => {
+ const name = (row.dataset.name || '').toLowerCase();
+ if (!name) { row.style.display = ''; return; }
+ row.style.display = (!q || name.includes(q)) ? '' : 'none';
+ });
+
+ document.querySelectorAll('#view-thumb .thumb-item').forEach(item => {
+ const label = item.querySelector('.thumb-label');
+ if (!label) { item.style.display = ''; return; }
+ const name = label.textContent.trim().toLowerCase();
+ // The ../ item text is "../" — keep it always visible
+ if (name === '../') { item.style.display = ''; return; }
+ item.style.display = (!q || name.includes(q)) ? '' : 'none';
+ });
+}
+
+function clearFilter() {
+ const input = document.getElementById('filter-input');
+ input.value = '';
+ filterView('');
+ input.focus();
+}
+
function viewHref(path) {
return VIEW === 'thumb' ? path + '?v=thumb' : path;
}
diff --git a/readme.md b/readme.md
@@ -16,7 +16,8 @@ Then access the servers IP address via a web browser on port `8080`.
The application is also buildable via your usual `go build -o bruschetta .`.
## Features
-* List and thumbnail view
+* List and thumbnail views
+* Filter current directory
* Thumbnails generated on the fly and cached
* Dotfiles are hidden, but still accessible
* Collapsable folder tree
