feat: improve move dialog with folder navigation

- Remove 'Root' option from move dialog (users move within their home folder)
- Show children of current folder instead of flat folder list
- Add breadcrumb navigation for folder browsing
- Add 'go to parent' navigation option
- Add 'select this folder' option to choose current location
- Add CSS styles for new navigation elements
- Add dark mode support for move dialog
- Add i18n translations for new strings (en, es)
This commit is contained in:
George Wu
2026-02-24 17:56:25 -08:00
parent 7786871d6c
commit ca4037da8f
5 changed files with 424 additions and 37 deletions
+180
View File
@@ -341,6 +341,45 @@
margin-bottom: 15px;
}
/* Move dialog breadcrumb navigation */
.move-dialog-breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
padding: 8px 12px;
background: #f8fafc;
border-radius: 8px;
margin-bottom: 12px;
font-size: 13px;
overflow-x: auto;
}
.move-breadcrumb-item {
color: #4a5568;
cursor: pointer;
padding: 2px 6px;
border-radius: 4px;
transition: all 0.15s ease;
white-space: nowrap;
}
.move-breadcrumb-item:hover {
background: #e2e8f0;
color: #1a202c;
}
.move-breadcrumb-item.current {
color: #ff5e3a;
font-weight: 600;
cursor: default;
}
.move-breadcrumb-separator {
color: #a0aec0;
margin: 0 2px;
}
/* Folder select items in move dialog */
.folder-select-item {
display: flex;
@@ -373,6 +412,70 @@
color: #ff5e3a;
}
/* "Select this folder" option */
.folder-select-item.folder-select-current {
background-color: rgba(72, 187, 120, 0.1);
color: #2f855a;
font-weight: 500;
}
.folder-select-item.folder-select-current:hover {
background-color: rgba(72, 187, 120, 0.15);
}
.folder-select-item.folder-select-current i {
color: #48bb78;
}
/* Navigate up option */
.folder-select-item.folder-navigate-up {
color: #718096;
font-style: italic;
}
.folder-select-item.folder-navigate-up:hover {
color: #4a5568;
}
.folder-select-item.folder-navigate-up i {
color: #a0aec0;
}
/* Folder navigation item (click to enter) */
.folder-select-item.folder-navigate {
justify-content: space-between;
}
.folder-select-item.folder-navigate .folder-name {
flex: 1;
}
.folder-select-item.folder-navigate .folder-navigate-icon {
color: #a0aec0;
font-size: 12px;
opacity: 0;
transition: opacity 0.15s ease;
}
.folder-select-item.folder-navigate:hover .folder-navigate-icon {
opacity: 1;
}
/* Empty folder message */
.folder-select-empty {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 24px;
color: #a0aec0;
font-size: 14px;
}
.folder-select-empty i {
font-size: 20px;
}
/* Custom confirm dialog */
.confirm-dialog {
position: fixed;
@@ -747,3 +850,80 @@
[data-theme="dark"] .share-item-info {
color: #e2e8f0;
}
/* Dark mode for move dialog breadcrumb */
[data-theme="dark"] .move-dialog-breadcrumb {
background: #0f172a;
}
[data-theme="dark"] .move-breadcrumb-item {
color: #94a3b8;
}
[data-theme="dark"] .move-breadcrumb-item:hover {
background: #334155;
color: #e2e8f0;
}
[data-theme="dark"] .move-breadcrumb-item.current {
color: #ff5e3a;
}
[data-theme="dark"] .move-breadcrumb-separator {
color: #475569;
}
/* Dark mode for folder select items */
[data-theme="dark"] .folder-select-item {
color: #cbd5e1;
}
[data-theme="dark"] .folder-select-item:hover {
background-color: #334155;
}
[data-theme="dark"] .folder-select-item.selected {
background-color: rgba(255,94,58,0.15);
color: #ff5e3a;
}
[data-theme="dark"] .folder-select-item i {
color: #fbbf24;
}
[data-theme="dark"] .folder-select-item.selected i {
color: #ff5e3a;
}
[data-theme="dark"] .folder-select-item.folder-select-current {
background-color: rgba(74, 222, 128, 0.1);
color: #86efac;
}
[data-theme="dark"] .folder-select-item.folder-select-current:hover {
background-color: rgba(74, 222, 128, 0.15);
}
[data-theme="dark"] .folder-select-item.folder-select-current i {
color: #4ade80;
}
[data-theme="dark"] .folder-select-item.folder-navigate-up {
color: #64748b;
}
[data-theme="dark"] .folder-select-item.folder-navigate-up:hover {
color: #94a3b8;
}
[data-theme="dark"] .folder-select-item.folder-navigate-up i {
color: #475569;
}
[data-theme="dark"] .folder-select-item.folder-navigate .folder-navigate-icon {
color: #475569;
}
[data-theme="dark"] .folder-select-empty {
color: #475569;
}