feat: wrap tree item text in span elements and improve text overflow handling with flexbox

- Wrap vault, directory, and file names in span.tree-item-text elements
- Add flex: 1 to tree-item-text to enable proper text truncation
- Set min-width: 0 on tree-item and tree-item-text to allow flex shrinking
- Move overflow and text-overflow styles from tree-item to tree-item-text
- Update icon colors: use text-secondary for default, accent for active/vault items

frontend/style.css

@@ -830,8 +830,15 @@ select {
     background 120ms ease,
     color 120ms ease;
   white-space: nowrap;
+  min-width: 0; /* Allow flex item to shrink */
+}
+
+.tree-item > .tree-item-text {
+  flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
 }
 .tree-item:hover {
   background: var(--bg-hover);
@@ -874,13 +881,13 @@ select {
   width: 16px;
   height: 16px;
   flex-shrink: 0;
-  color: var(--text-muted);
+  color: var(--text-secondary);
 }
 .tree-item.active .icon {
   color: var(--accent);
 }
 .tree-item.vault-item .icon {
-  color: var(--accent-green);
+  color: var(--accent);
 }
 
 .tree-item-action-btn {