переделка в tree view

script.js

@@ -394,8 +394,10 @@ function renderNavigationTree() {
 
     const sectionSummary = document.createElement("summary");
     sectionSummary.innerHTML = `
-      <span>${section.title}</span>
-      <button type="button" data-focus-target="${getSectionId(section)}">Фокус</button>
+      <span class="tree-caret" aria-hidden="true"></span>
+      <button class="tree-node tree-folder" type="button" data-focus-target="${getSectionId(section)}">
+        <span>${section.title}</span>
+      </button>
     `;
     sectionNode.append(sectionSummary);
 
@@ -406,8 +408,10 @@ function renderNavigationTree() {
 
       const groupSummary = document.createElement("summary");
       groupSummary.innerHTML = `
-        <span>${group.title}</span>
-        <button type="button" data-focus-target="${getGroupId(group)}">Фокус</button>
+        <span class="tree-caret" aria-hidden="true"></span>
+        <button class="tree-node tree-folder" type="button" data-focus-target="${getGroupId(group)}">
+          <span>${group.title}</span>
+        </button>
       `;
       groupNode.append(groupSummary);
 
@@ -417,6 +421,7 @@ function renderNavigationTree() {
       group.items.forEach((item) => {
         const itemButton = document.createElement("button");
         itemButton.type = "button";
+        itemButton.className = "tree-node tree-file";
         itemButton.dataset.focusTarget = getItemId(item);
         itemButton.innerHTML = `<span>${item.title}</span><small>${serviceMeta[item.type]?.label || item.type}</small>`;
         itemList.append(itemButton);

styles.css

@@ -526,33 +526,38 @@ html:not([data-show-numbers="true"]) .item-number {
 
 .nav-tree {
   display: grid;
-  gap: 8px;
+  gap: 2px;
   min-height: 0;
-  padding-top: 4px;
+  padding: 4px 2px 0;
+  font-size: 0.86rem;
 }
 
 .tree-section,
 .tree-group {
-  border: 1px solid var(--border);
-  border-radius: 16px;
-  background: rgba(255, 255, 255, 0.035);
-  overflow: hidden;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  overflow: visible;
 }
 
 .tree-group {
-  margin: 6px 8px 8px;
-  border-radius: 14px;
+  position: relative;
+  margin: 1px 0 1px 18px;
+  padding-left: 10px;
+  border-left: 1px solid var(--border);
 }
 
 .tree-section > summary,
 .tree-group > summary {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: 8px;
+  grid-template-columns: 16px minmax(0, 1fr);
+  gap: 3px;
   align-items: center;
   list-style: none;
   cursor: pointer;
-  padding: 9px 10px;
+  min-height: 28px;
+  padding: 1px 2px;
+  border-radius: 9px;
 }
 
 .tree-section > summary::-webkit-details-marker,
@@ -560,75 +565,91 @@ html:not([data-show-numbers="true"]) .item-number {
   display: none;
 }
 
-.tree-section summary span,
-.tree-group summary span {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--text);
-  font-size: 0.88rem;
-  font-weight: 850;
-}
-
-.tree-group summary span {
-  font-size: 0.82rem;
+.tree-caret {
+  width: 16px;
+  height: 24px;
+  display: grid;
+  place-items: center;
   color: var(--muted);
 }
 
-.tree-section summary button,
-.tree-group summary button,
-.tree-items button {
-  border: 1px solid var(--border);
-  border-radius: 999px;
-  cursor: pointer;
-  color: var(--accent);
-  background: rgba(var(--accent-rgb), 0.1);
-  font: inherit;
+.tree-caret::before {
+  content: "▾";
   font-size: 0.72rem;
-  font-weight: 850;
+  transition: transform 140ms ease;
 }
 
-.tree-section summary button,
-.tree-group summary button {
-  padding: 4px 7px;
+.tree-section:not([open]) > summary .tree-caret::before,
+.tree-group:not([open]) > summary .tree-caret::before {
+  transform: rotate(-90deg);
 }
 
-.tree-items {
-  display: grid;
-  gap: 4px;
-  padding: 0 8px 8px;
-}
-
-.tree-items button {
+.tree-node {
+  min-width: 0;
+  width: 100%;
+  min-height: 26px;
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   gap: 8px;
   align-items: center;
-  width: 100%;
-  padding: 7px 9px;
-  border-radius: 12px;
-  text-align: left;
+  border: 0;
+  border-radius: 8px;
+  cursor: pointer;
+  color: var(--text);
   background: transparent;
+  text-align: left;
+  font: inherit;
+  font-weight: 760;
 }
 
-.tree-items button:hover,
-.tree-section summary button:hover,
-.tree-group summary button:hover {
-  border-color: rgba(var(--accent-rgb), 0.5);
-  background: rgba(var(--accent-rgb), 0.14);
-}
-
-.tree-items span {
+.tree-node span {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: var(--text);
 }
 
-.tree-items small {
+.tree-node::before {
+  color: var(--accent);
+  opacity: 0.92;
+}
+
+.tree-folder {
+  grid-template-columns: 18px minmax(0, 1fr);
+}
+
+.tree-folder::before {
+  content: "📁";
+  font-size: 0.9rem;
+}
+
+.tree-file {
+  grid-template-columns: 18px minmax(0, 1fr) auto;
+}
+
+.tree-file::before {
+  content: "📄";
+  font-size: 0.86rem;
+}
+
+.tree-items {
+  position: relative;
+  display: grid;
+  gap: 1px;
+  margin-left: 18px;
+  padding-left: 10px;
+  border-left: 1px solid var(--border);
+}
+
+.tree-node:hover,
+.tree-section > summary:hover,
+.tree-group > summary:hover {
+  background: rgba(var(--accent-rgb), 0.14);
+}
+
+.tree-node small {
   color: var(--muted);
+  font-size: 0.68rem;
   font-weight: 800;
 }