feat(sidebar): implement display mode toggle and update sidebar actions for improved navigation. See #389

This commit is contained in:
Will Miao
2025-09-02 15:48:34 +08:00
parent 91801dff85
commit 1800afe31b
14 changed files with 272 additions and 37 deletions

View File

@@ -132,6 +132,11 @@
color: var(--lora-accent);
}
.sidebar-action-btn.disabled {
opacity: 0.3;
cursor: not-allowed;
}
/* Remove old close button styles */
.sidebar-toggle-close {
display: none;
@@ -365,6 +370,60 @@
font-weight: 500;
}
/* Folder List Mode Styles */
.sidebar-folder-item {
position: relative;
user-select: none;
}
.sidebar-node-content {
display: flex;
align-items: center;
padding: 8px 16px;
cursor: pointer;
transition: all 0.2s ease;
font-size: 0.85em;
border-left: 3px solid transparent;
color: var(--text-color);
}
.sidebar-node-content:hover {
background: var(--lora-surface);
color: var(--text-color);
}
.sidebar-folder-item.selected .sidebar-node-content {
background: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.1);
color: var(--lora-accent);
border-left-color: var(--lora-accent);
font-weight: 500;
}
.sidebar-folder-icon {
margin-right: 8px;
color: var(--text-muted);
opacity: 0.7;
width: 16px;
text-align: center;
}
.sidebar-folder-item.selected .sidebar-folder-icon {
color: var(--lora-accent);
opacity: 1;
}
.sidebar-node-content:hover .sidebar-folder-icon {
color: var(--text-color);
opacity: 0.9;
}
.sidebar-folder-name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Responsive Design */
@media (min-width: 2150px) {
.folder-sidebar {