...

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);
+}

static/css/layout.css

@@ -9,31 +9,89 @@ html, body {
     transition: background-color 0.3s ease, color 0.3s ease;
 }
 
-.container-fluid {
-    height: calc(100% - 56px);
+/* Column Resizer */
+.column-resizer {
+    width: 4px;
+    background-color: var(--border-color);
+    cursor: col-resize;
+    transition: background-color 0.2s ease;
+    user-select: none;
+    flex-shrink: 0;
 }
 
+.column-resizer:hover {
+    background-color: var(--link-color);
+    width: 6px;
+    margin: 0 -1px;
+}
+
+.column-resizer.dragging {
+    background-color: var(--link-color);
+}
+
+/* Adjust container for flex layout */
+.container-fluid {
+    display: flex;
+    flex-direction: row;
+    height: calc(100% - 56px);
+    padding: 0;
+}
+
+.row {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    margin: 0;
+    height: 100%;
+}
+
+#sidebarPane {
+    flex: 0 0 20%;
+    min-width: 150px;
+    max-width: 40%;
+    padding: 0;
+}
+
+#editorPane {
+    flex: 1 1 40%;
+    min-width: 250px;
+    max-width: 70%;
+    padding: 0;
+}
+
+#previewPane {
+    flex: 1 1 40%;
+    min-width: 250px;
+    max-width: 70%;
+    padding: 0;
+}
+
+/* Sidebar - improved */
 .sidebar {
     background-color: var(--bg-secondary);
     border-right: 1px solid var(--border-color);
     overflow-y: auto;
+    overflow-x: hidden;
     height: 100%;
     transition: background-color 0.3s ease;
-}
-
-.editor-pane {
-    background-color: var(--bg-primary);
-    height: 100%;
     display: flex;
     flex-direction: column;
-    border-right: 1px solid var(--border-color);
 }
 
-.preview-pane {
-    background-color: var(--bg-primary);
-    height: 100%;
+.sidebar h6 {
+    margin: 12px 8px 6px;
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+#fileTree {
+    flex: 1;
     overflow-y: auto;
-    padding: 20px;
+    overflow-x: hidden;
+    padding: 4px 0;
 }
 
 /* Navbar */