Add show/hide hidden files toggle to file manager
Toolbar button (·) toggles visibility of dotfiles. Hidden by default, click to show. Active state highlighted with accent color. Filtering happens client-side so no backend changes needed. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
6a0c8757f8
commit
11c4817497
2 changed files with 22 additions and 1 deletions
|
|
@ -76,6 +76,11 @@
|
||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.files-action-btn.active {
|
||||||
|
background: var(--accent-hover);
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
/* File body — dual pane */
|
/* File body — dual pane */
|
||||||
.files-body {
|
.files-body {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,7 @@
|
||||||
let selectedFiles = new Set();
|
let selectedFiles = new Set();
|
||||||
let contextMenuEl = null;
|
let contextMenuEl = null;
|
||||||
let uploadInput = null;
|
let uploadInput = null;
|
||||||
|
let showHidden = false; // show dotfiles
|
||||||
|
|
||||||
const FILE_ICONS = {
|
const FILE_ICONS = {
|
||||||
dir: '📁',
|
dir: '📁',
|
||||||
|
|
@ -99,7 +100,9 @@
|
||||||
fileListEl.appendChild(parentRow);
|
fileListEl.appendChild(parentRow);
|
||||||
}
|
}
|
||||||
|
|
||||||
entries.forEach(entry => {
|
const visible = showHidden ? entries : entries.filter(e => !e.name.startsWith('.'));
|
||||||
|
|
||||||
|
visible.forEach(entry => {
|
||||||
const row = document.createElement('div');
|
const row = document.createElement('div');
|
||||||
row.className = 'file-row';
|
row.className = 'file-row';
|
||||||
row.dataset.path = entry.path;
|
row.dataset.path = entry.path;
|
||||||
|
|
@ -419,6 +422,19 @@
|
||||||
deleteBtn.addEventListener('click', deleteSelected);
|
deleteBtn.addEventListener('click', deleteSelected);
|
||||||
btnGroup.appendChild(deleteBtn);
|
btnGroup.appendChild(deleteBtn);
|
||||||
|
|
||||||
|
// Toggle hidden files
|
||||||
|
const hiddenBtn = document.createElement('button');
|
||||||
|
hiddenBtn.className = 'files-action-btn' + (showHidden ? ' active' : '');
|
||||||
|
hiddenBtn.textContent = '·';
|
||||||
|
hiddenBtn.title = 'Show Hidden Files';
|
||||||
|
hiddenBtn.addEventListener('click', () => {
|
||||||
|
showHidden = !showHidden;
|
||||||
|
hiddenBtn.classList.toggle('active', showHidden);
|
||||||
|
hiddenBtn.title = showHidden ? 'Hide Hidden Files' : 'Show Hidden Files';
|
||||||
|
loadDirectory(currentPath);
|
||||||
|
});
|
||||||
|
btnGroup.appendChild(hiddenBtn);
|
||||||
|
|
||||||
// Refresh
|
// Refresh
|
||||||
const refreshBtn = document.createElement('button');
|
const refreshBtn = document.createElement('button');
|
||||||
refreshBtn.className = 'files-action-btn';
|
refreshBtn.className = 'files-action-btn';
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue