...

static/css/file-tree.css

@@ -0,0 +1,88 @@
+/* File tree styles */
+.file-tree {
+    font-size: 14px;
+    user-select: none;
+}
+
+.tree-node {
+    padding: 6px 8px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    border-radius: 4px;
+    margin: 2px 0;
+    color: var(--text-primary);
+    transition: background-color 0.15s ease;
+}
+
+.tree-node:hover {
+    background-color: var(--bg-tertiary);
+}
+
+.tree-node.active {
+    background-color: #0969da;
+    color: white;
+}
+
+body.dark-mode .tree-node.active {
+    background-color: #1f6feb;
+}
+
+.tree-node-icon {
+    width: 16px;
+    text-align: center;
+    flex-shrink: 0;
+}
+
+.tree-node-content {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex: 1;
+    min-width: 0;
+}
+
+.tree-node-name {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.tree-node-size {
+    font-size: 11px;
+    color: var(--text-secondary);
+    flex-shrink: 0;
+}
+
+.tree-children {
+    margin-left: 16px;
+}
+
+.tree-node.dragging {
+    opacity: 0.5;
+}
+
+.tree-node.drag-over {
+    background-color: var(--info-color);
+    color: white;
+}
+
+/* Collection selector */
+.collection-selector {
+    margin-bottom: 10px;
+    padding: 8px;
+    background-color: var(--bg-tertiary);
+    border-radius: 4px;
+}
+
+.collection-selector select {
+    width: 100%;
+    padding: 6px;
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+}
+