...

static/css/file-tree.css

@@ -1,7 +1,12 @@
-/* File tree styles */
+/* Bootstrap-styled File Tree */
 .file-tree {
-    font-size: 14px;
+    font-size: 13px;
     user-select: none;
+    padding: 8px 0;
+}
+
+.tree-node-wrapper {
+    margin: 0;
 }
 
 .tree-node {
@@ -9,11 +14,14 @@
     cursor: pointer;
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: 6px;
     border-radius: 4px;
-    margin: 2px 0;
+    margin: 1px 4px;
     color: var(--text-primary);
-    transition: background-color 0.15s ease;
+    transition: all 0.15s ease;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .tree-node:hover {
@@ -21,20 +29,49 @@
 }
 
 .tree-node.active {
-    background-color: #0969da;
+    background-color: var(--link-color);
+    color: white;
+    font-weight: 500;
+}
+
+.tree-node.active:hover {
+    background-color: var(--link-color);
+    filter: brightness(1.1);
+}
+
+/* Toggle arrow */
+.tree-node-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    font-size: 10px;
+    color: var(--text-secondary);
+    flex-shrink: 0;
+    transition: transform 0.2s ease;
+}
+
+.tree-node-toggle.expanded {
+    transform: rotate(90deg);
+}
+
+/* Icon styling */
+.tree-node-icon {
+    width: 16px;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    color: var(--text-secondary);
+}
+
+.tree-node.active .tree-node-icon {
     color: white;
 }
 
-body.dark-mode .tree-node.active {
-    background-color: #1f6feb;
-}
-
-.tree-node-icon {
-    width: 16px;
-    text-align: center;
-    flex-shrink: 0;
-}
-
+/* Content wrapper */
 .tree-node-content {
     display: flex;
     align-items: center;
@@ -48,41 +85,89 @@ body.dark-mode .tree-node.active {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    font-size: 13px;
 }
 
-.tree-node-size {
-    font-size: 11px;
+.file-size-badge {
+    font-size: 10px;
     color: var(--text-secondary);
+    margin-left: auto;
     flex-shrink: 0;
+    padding: 2px 6px;
+    background-color: var(--bg-tertiary);
+    border-radius: 3px;
 }
 
+/* Children container */
 .tree-children {
-    margin-left: 16px;
+    margin-left: 8px;
+    border-left: 1px solid var(--border-light);
+    padding-left: 4px;
+    max-height: 100%;
+    overflow: visible;
 }
 
+.tree-children.collapsed {
+    display: none;
+}
+
+/* Drag and drop */
 .tree-node.dragging {
     opacity: 0.5;
 }
 
 .tree-node.drag-over {
-    background-color: var(--info-color);
-    color: white;
+    background-color: rgba(13, 110, 253, 0.2);
+    border: 1px dashed var(--link-color);
 }
 
-/* Collection selector */
+/* Collection selector - Bootstrap styled */
 .collection-selector {
-    margin-bottom: 10px;
-    padding: 8px;
+    margin: 12px 8px;
+    padding: 8px 12px;
     background-color: var(--bg-tertiary);
-    border-radius: 4px;
+    border-radius: 6px;
+    border: 1px solid var(--border-color);
 }
 
-.collection-selector select {
-    width: 100%;
-    padding: 6px;
+.collection-selector .form-label {
+    margin-bottom: 6px;
+    font-weight: 500;
+    font-size: 12px;
+    color: var(--text-secondary);
+}
+
+.collection-selector .form-select-sm {
+    padding: 4px 8px;
+    font-size: 13px;
     background-color: var(--bg-primary);
     color: var(--text-primary);
     border: 1px solid var(--border-color);
-    border-radius: 4px;
 }
 
+.collection-selector .form-select-sm:focus {
+    border-color: var(--link-color);
+    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
+}
+
+/* Dark mode adjustments */
+body.dark-mode .tree-node:hover {
+    background-color: var(--bg-tertiary);
+}
+
+body.dark-mode .tree-node.active {
+    background-color: var(--link-color);
+}
+
+body.dark-mode .tree-children {
+    border-left-color: var(--border-color);
+}
+
+/* Scrollbar in sidebar */
+.sidebar::-webkit-scrollbar-thumb {
+    background-color: var(--border-color);
+}
+
+.sidebar::-webkit-scrollbar-thumb:hover {
+    background-color: var(--text-secondary);
+}