Projets/homelab_automation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add enhanced terminal history panel UI with animations, keyboard navigation, advanced filtering, search highlighting, and improved storage metrics display with detailed filesystem tables and ZFS/LVM support
Tests / Backend Tests (Python) (3.10) (push) Has been cancelled
Details
Tests / Backend Tests (Python) (3.11) (push) Has been cancelled
Details
Tests / Backend Tests (Python) (3.12) (push) Has been cancelled
Details
Tests / Frontend Tests (JS) (push) Has been cancelled
Details
Tests / Integration Tests (push) Has been cancelled
Details
Tests / All Tests Passed (push) Has been cancelled
Details

Browse Source
This commit is contained in:
bruno
2025-12-21 12:31:08 -05:00
parent 5ff7017aaa
commit 6d8432169b
137 changed files with 30407 additions and 651 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/index.html
+135 -13
View File
@@ -3169,10 +3169,18 @@
.terminal-history-panel {
background: #1e1e2e;
border-bottom: 1px solid #374151;
max-height: 300px;
max-height: 350px;
overflow: hidden;
display: flex;
flex-direction: column;
opacity: 0;
transform: translateY(-10px);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.terminal-history-panel.open {
opacity: 1;
transform: translateY(0);
}
.terminal-history-header {
@@ -3180,12 +3188,14 @@
background: #1a1a2e;
display: flex;
align-items: center;
gap: 1rem;
gap: 0.75rem;
flex-shrink: 0;
flex-wrap: wrap;
}
.terminal-history-search {
flex: 1;
min-width: 180px;
display: flex;
align-items: center;
background: #0f0f1a;
@@ -3193,6 +3203,12 @@
border-radius: 0.5rem;
padding: 0 0.75rem;
gap: 0.5rem;
transition: border-color 0.15s, box-shadow 0.15s;
}
.terminal-history-search:focus-within {
border-color: #7c3aed;
box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2);
}
.terminal-history-search i {
@@ -3222,37 +3238,81 @@
display: flex;
align-items: center;
justify-content: center;
transition: color 0.15s;
}
.terminal-history-clear-search:hover {
color: #9ca3af;
color: #ef4444;
}
.terminal-history-actions {
.terminal-history-filters {
display: flex;
align-items: center;
gap: 0.5rem;
gap: 0.75rem;
flex-shrink: 0;
}
.terminal-history-filter-select {
background: #0f0f1a;
border: 1px solid #374151;
border-radius: 0.375rem;
color: #e5e7eb;
padding: 0.375rem 0.5rem;
font-size: 0.75rem;
cursor: pointer;
outline: none;
transition: border-color 0.15s;
}
.terminal-history-filter-select:hover,
.terminal-history-filter-select:focus {
border-color: #7c3aed;
}
.terminal-history-filter-select option {
background: #1a1a2e;
}
.terminal-history-scope {
display: flex;
align-items: center;
gap: 0.5rem;
gap: 0.375rem;
font-size: 0.75rem;
color: #9ca3af;
cursor: pointer;
white-space: nowrap;
}
.terminal-history-scope input {
width: 1rem;
height: 1rem;
width: 0.875rem;
height: 0.875rem;
accent-color: #7c3aed;
cursor: pointer;
}
.terminal-history-list {
flex: 1;
overflow-y: auto;
padding: 0.5rem;
scrollbar-width: thin;
scrollbar-color: #374151 transparent;
}
.terminal-history-list::-webkit-scrollbar {
width: 6px;
}
.terminal-history-list::-webkit-scrollbar-track {
background: transparent;
}
.terminal-history-list::-webkit-scrollbar-thumb {
background: #374151;
border-radius: 3px;
}
.terminal-history-list::-webkit-scrollbar-thumb:hover {
background: #4b5563;
}
.terminal-history-item {
@@ -3261,12 +3321,22 @@
padding: 0.5rem 0.75rem;
border-radius: 0.375rem;
cursor: pointer;
transition: background 0.15s;
transition: background 0.15s, transform 0.1s;
gap: 0.75rem;
border: 1px solid transparent;
}
.terminal-history-item:hover {
background: rgba(124, 58, 237, 0.15);
background: rgba(124, 58, 237, 0.1);
}
.terminal-history-item.selected {
background: rgba(124, 58, 237, 0.2);
border-color: rgba(124, 58, 237, 0.4);
}
.terminal-history-item:active {
transform: scale(0.99);
}
.terminal-history-cmd {
@@ -3275,7 +3345,7 @@
}
.terminal-history-cmd code {
font-family: 'JetBrains Mono', 'Fira Code', monospace;
font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
font-size: 0.8125rem;
color: #a5b4fc;
white-space: nowrap;
@@ -3284,6 +3354,13 @@
display: block;
}
.terminal-history-cmd code mark {
background: rgba(251, 191, 36, 0.3);
color: #fbbf24;
padding: 0 0.125rem;
border-radius: 2px;
}
.terminal-history-meta {
display: flex;
align-items: center;
@@ -3294,6 +3371,7 @@
.terminal-history-time {
font-size: 0.6875rem;
color: #6b7280;
cursor: help;
}
.terminal-history-count {
@@ -3302,6 +3380,7 @@
background: rgba(124, 58, 237, 0.2);
padding: 0.125rem 0.375rem;
border-radius: 9999px;
font-weight: 500;
}
.terminal-history-host {
@@ -3319,7 +3398,8 @@
transition: opacity 0.15s;
}
.terminal-history-item:hover .terminal-history-actions-inline {
.terminal-history-item:hover .terminal-history-actions-inline,
.terminal-history-item.selected .terminal-history-actions-inline {
opacity: 1;
}
@@ -3334,11 +3414,18 @@
align-items: center;
justify-content: center;
font-size: 0.75rem;
transition: background 0.15s, color 0.15s, transform 0.1s;
}
.terminal-history-action:hover {
background: rgba(124, 58, 237, 0.3);
color: #fff;
transform: scale(1.1);
}
.terminal-history-action-execute:hover {
background: rgba(34, 197, 94, 0.3);
color: #4ade80;
}
.terminal-history-empty {
@@ -3349,10 +3436,18 @@
padding: 2rem;
color: #6b7280;
gap: 0.5rem;
text-align: center;
}
.terminal-history-empty i {
font-size: 1.5rem;
font-size: 2rem;
opacity: 0.5;
}
.terminal-history-empty-hint {
font-size: 0.75rem;
color: #4b5563;
margin-top: 0.25rem;
}
.terminal-history-loading {
@@ -3364,6 +3459,33 @@
gap: 0.5rem;
}
.terminal-history-footer {
padding: 0.5rem 1rem;
background: #151520;
border-top: 1px solid #374151;
flex-shrink: 0;
}
.terminal-history-hint {
font-size: 0.6875rem;
color: #6b7280;
display: flex;
align-items: center;
gap: 0.25rem;
flex-wrap: wrap;
}
.terminal-history-hint kbd {
background: #374151;
color: #e5e7eb;
padding: 0.125rem 0.375rem;
border-radius: 0.25rem;
font-family: inherit;
font-size: 0.625rem;
border: 1px solid #4b5563;
box-shadow: 0 1px 0 #4b5563;
}
#terminalHistoryBtn.active {
background: #7c3aed;
color: #fff;