feat (ui): compacte IDE-sidebar tree view voor Files tabblad

- Vervang kaart-stijl folder-rijen door compacte, platte rijen (2px padding, geen border)
- Verwijder badge-tellers (📁 N, 📄 N) uit folder-rijen
- Voeg .btn.tiny toe voor kleine actieknoppen (+/✕) in boom
- Alle mappen standaard ingeklapt; localStorage behoudt uitgeklapte staat
- file-entry hover highlight; verwijder bottom-border per rij

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-23 18:19:04 +01:00
parent 5f6719464d
commit 2dfe53895b
2 changed files with 58 additions and 73 deletions
+19 -17
View File
@@ -250,6 +250,7 @@ header{
.btn:hover{background: var(--btn2)}
.btn:active{transform: translateY(1px)}
.btn.small{padding:7px 9px; border-radius: 10px}
.btn.tiny{padding:1px 5px; border-radius: 4px; font-size:11px; line-height:16px;}
.btn.ghost{background: transparent}
.btn.ok{border-color: rgba(45,212,191,.6)}
.btn.bad{border-color: rgba(251,113,133,.6)}
@@ -643,29 +644,30 @@ pre{
.sidebar .navLabel { display: none; }
.sidebar .tab { justify-content: center; }
}
/* Files tree (Portainer-ish) */
/* Files tree (IDE sidebar stijl) */
.file-folder-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
gap:6px;
cursor:pointer;
user-select:none;
padding: 10px 12px;
border: 1px solid var(--card-border);
border-radius: 12px;
background: var(--folder-bg);
transition: background .12s ease, border-color .12s ease, transform .06s ease;
padding: 2px 6px;
border: none;
border-radius: 4px;
background: transparent;
transition: background .1s ease;
line-height: 22px;
font-weight: 600;
}
.file-folder-row:hover{
background: var(--folder-hover);
border-color: rgba(96,165,250,.35);
}
.file-folder-row:active{
transform: translateY(1px);
.file-entry:hover{
background: var(--folder-hover);
}
.file-folder-left{
@@ -697,19 +699,19 @@ pre{
.file-folder-files{
margin-left: 0;
margin-top: 6px;
padding-left: 12px;
border-left: 1px dashed var(--soft-line);
margin-top: 0;
padding-left: 0;
border-left: none;
}
.file-entry{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:4px 0;
border-bottom:1px dashed var(--soft-line);
border-radius: 8px;
gap:6px;
padding: 2px 6px;
border-radius: 4px;
line-height: 22px;
}
.file-entry-name{
cursor:pointer;