Add Tree Selector

assets/style.css

@@ -465,7 +465,7 @@ hr {
     inset: 0;
     background: rgba(0, 0, 0, 0.6);
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     justify-content: center;
     z-index: 1000;
     padding: 1rem;
@@ -478,6 +478,12 @@ hr {
     max-width: 500px;
     display: flex;
     flex-direction: column;
+    margin-top: 6rem;
+    position: relative;
+}
+
+.modal.is-dragged {
+    margin: 0;
 }
 
 .modal-header {
@@ -487,6 +493,8 @@ hr {
     text-transform: uppercase;
     letter-spacing: 0.05em;
     color: var(--text);
+    cursor: move;
+    user-select: none;
 }
 
 .modal-body {
@@ -516,6 +524,66 @@ hr {
     outline: none;
 }
 
+/* === Tree picker === */
+.tree-picker {
+    max-height: 60vh;
+    overflow-y: auto;
+    border: 1px solid var(--secondary);
+    background: var(--bg);
+}
+.tree-row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.4rem 0.5rem;
+    cursor: pointer;
+    min-height: 2rem;
+}
+.tree-row:hover {
+    background: var(--bg-panel-hover);
+}
+.tree-row.is-selected {
+    background: var(--bg-panel-hover);
+    border-left: 3px solid var(--primary);
+    padding-left: calc(0.5rem - 3px);
+}
+.tree-row.is-disabled {
+    color: var(--text-muted);
+    cursor: default;
+}
+.tree-row.is-disabled:hover {
+    background: none;
+}
+.tree-chevron {
+    width: 1.25rem;
+    text-align: center;
+    color: var(--secondary);
+    flex-shrink: 0;
+}
+.tree-chevron.is-leaf {
+    visibility: hidden;
+}
+.tree-marker {
+    width: 1rem;
+    text-align: center;
+    color: var(--text-muted);
+    flex-shrink: 0;
+}
+.tree-name {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.tree-children {
+    padding-left: 1.5rem;
+}
+.tree-selected-path {
+    font-size: 0.85rem;
+    padding: 0.25rem 0;
+    word-break: break-all;
+}
+
 /* === Diary Calendar === */
 .diary-cal {
     position: fixed;
@@ -661,4 +729,7 @@ hr {
         max-width: none;
         margin-top: 1rem;
     }
+    .modal-header {
+        cursor: default;
+    }
 }