refactor: Modularize UI components and utilities

- Extract UI components into separate JS files
- Centralize configuration values in config.js
- Introduce a dedicated logger module
- Improve file tree drag-and-drop and undo functionality
- Refactor modal handling to a single manager
- Add URL routing support for SPA navigation
- Implement view mode for read-only access

static/css/file-tree.css

@@ -20,8 +20,9 @@
     color: var(--text-primary);
     transition: all 0.15s ease;
     white-space: nowrap;
-    overflow: hidden;
+    overflow: visible;
     text-overflow: ellipsis;
+    min-height: 28px;
 }
 
 .tree-node:hover {
@@ -29,14 +30,16 @@
 }
 
 .tree-node.active {
-    background-color: var(--link-color);
-    color: white;
+    color: var(--link-color);
     font-weight: 500;
 }
 
 .tree-node.active:hover {
-    background-color: var(--link-color);
-    filter: brightness(1.1);
+    filter: brightness(1.2);
+}
+
+.tree-node.active .tree-node-icon {
+    color: var(--link-color);
 }
 
 /* Toggle arrow */
@@ -46,16 +49,25 @@
     justify-content: center;
     width: 16px;
     height: 16px;
-    font-size: 10px;
+    min-width: 16px;
+    min-height: 16px;
     color: var(--text-secondary);
     flex-shrink: 0;
     transition: transform 0.2s ease;
+    position: relative;
+    z-index: 1;
+    overflow: visible;
+    cursor: pointer;
 }
 
 .tree-node-toggle.expanded {
     transform: rotate(90deg);
 }
 
+.tree-node-toggle:hover {
+    color: var(--link-color);
+}
+
 /* Icon styling */
 .tree-node-icon {
     width: 16px;
@@ -67,10 +79,6 @@
     color: var(--text-secondary);
 }
 
-.tree-node.active .tree-node-icon {
-    color: white;
-}
-
 /* Content wrapper */
 .tree-node-content {
     display: flex;
@@ -112,13 +120,54 @@
 }
 
 /* Drag and drop */
+/* Default cursor is pointer, not grab (only show grab after long-press) */
+.tree-node {
+    cursor: pointer;
+}
+
+/* Show grab cursor only when drag is ready (after long-press) */
+.tree-node.drag-ready {
+    cursor: grab !important;
+}
+
+.tree-node.drag-ready:active {
+    cursor: grabbing !important;
+}
+
 .tree-node.dragging {
-    opacity: 0.5;
+    opacity: 0.4;
+    background-color: var(--bg-tertiary);
+    cursor: grabbing !important;
 }
 
 .tree-node.drag-over {
-    background-color: rgba(13, 110, 253, 0.2);
-    border: 1px dashed var(--link-color);
+    background-color: rgba(13, 110, 253, 0.15) !important;
+    border: 2px dashed var(--link-color) !important;
+    box-shadow: 0 0 8px rgba(13, 110, 253, 0.3);
+}
+
+/* Root-level drop target highlighting */
+.file-tree.drag-over-root {
+    background-color: rgba(13, 110, 253, 0.08);
+    border: 2px dashed var(--link-color);
+    border-radius: 6px;
+    box-shadow: inset 0 0 12px rgba(13, 110, 253, 0.2);
+    margin: 4px;
+    padding: 4px;
+}
+
+/* Only show drag cursor on directories when dragging */
+body.dragging-active .tree-node[data-isdir="true"] {
+    cursor: copy;
+}
+
+body.dragging-active .tree-node[data-isdir="false"] {
+    cursor: no-drop;
+}
+
+/* Show move cursor when hovering over root-level empty space */
+body.dragging-active .file-tree.drag-over-root {
+    cursor: move;
 }
 
 /* Collection selector - Bootstrap styled */
@@ -156,13 +205,34 @@ body.dark-mode .tree-node:hover {
 }
 
 body.dark-mode .tree-node.active {
-    background-color: var(--link-color);
+    color: var(--link-color);
+}
+
+body.dark-mode .tree-node.active .tree-node-icon {
+    color: var(--link-color);
+}
+
+body.dark-mode .tree-node.active .tree-node-icon .tree-node-toggle {
+    color: var(--link-color);
 }
 
 body.dark-mode .tree-children {
     border-left-color: var(--border-color);
 }
 
+/* Empty directory message */
+.tree-empty-message {
+    padding: 8px 12px;
+    color: var(--text-secondary);
+    font-size: 12px;
+    font-style: italic;
+    user-select: none;
+}
+
+body.dark-mode .tree-empty-message {
+    color: var(--text-secondary);
+}
+
 /* Scrollbar in sidebar */
 .sidebar::-webkit-scrollbar-thumb {
     background-color: var(--border-color);