Enh(viewer): Folder collapsed by default

klieret · klieret · commit bb1fdeb8fc53 · 2025-09-26T14:44:59.000-04:00
diff --git a/codeclash/viewer/static/css/picker.css b/codeclash/viewer/static/css/picker.css
@@ -23,28 +23,6 @@
   font-size: 1.1rem;
 }
 
-.base-dir-info {
-  background-color: var(--bg-secondary);
-  border: 1px solid var(--border-color);
-  border-radius: 0.5rem;
-  padding: 1rem;
-  margin-bottom: 2rem;
-}
-
-.base-dir-info h3 {
-  margin: 0 0 0.5rem 0;
-  color: var(--text-primary);
-}
-
-.base-dir-path {
-  background-color: var(--code-bg);
-  padding: 0.5rem;
-  border-radius: 0.25rem;
-  font-family: monospace;
-  font-size: 0.9rem;
-  word-break: break-all;
-}
-
 .games-table {
   background-color: var(--bg-secondary);
   border: 1px solid var(--border-color);
@@ -244,6 +222,36 @@
   flex-shrink: 0;
 }
 
+.collapse-icon {
+  color: var(--accent-color);
+  font-size: 0.8rem;
+  font-weight: bold;
+  cursor: pointer;
+  transition: transform 0.2s ease;
+  user-select: none;
+  min-width: 12px;
+  text-align: center;
+}
+
+/* Only show collapse icon for intermediate folders */
+.intermediate-folder .collapse-icon::before {
+  content: "▶";
+}
+
+.intermediate-folder:not(.collapsed) .collapse-icon::before {
+  content: "▼";
+}
+
+/* Hide collapse icon for game folders */
+.game-folder .collapse-icon {
+  display: none;
+}
+
+.collapse-icon:hover {
+  color: var(--accent-hover);
+  transform: scale(1.1);
+}
+
 .game-name {
   font-family: monospace;
   font-size: 0.9rem;
diff --git a/codeclash/viewer/static/js/picker.js b/codeclash/viewer/static/js/picker.js
@@ -135,48 +135,109 @@ function toggleFolder(folderPath) {
   const folderRow = document.querySelector(`[data-path="${folderPath}"]`);
   if (!folderRow) return;
 
-  const isCollapsed = folderRow.classList.contains("collapsed");
-  const collapseIcon = folderRow.querySelector(".collapse-icon");
+  const currentState = folderStates.get(folderPath) || "collapsed";
+  const newState = currentState === "collapsed" ? "expanded" : "collapsed";
+  folderStates.set(folderPath, newState);
 
-  if (isCollapsed) {
-    // Expand folder - show all children
+  if (newState === "expanded") {
+    // Expand folder - show only direct children
     folderRow.classList.remove("collapsed");
-    if (collapseIcon) collapseIcon.innerHTML = '<i class="bi bi-folder"></i>';
 
-    // Show all descendant rows
+    // Show only direct children (one level down) and restore their states
     const allRows = document.querySelectorAll(".game-row");
     allRows.forEach((row) => {
       const rowPath = row.getAttribute("data-path");
       if (rowPath && rowPath.startsWith(folderPath + "/")) {
-        row.style.display = "";
-        // If this child row is also a collapsed folder, don't show its children
-        const childFolderPath = rowPath;
-        const childRow = document.querySelector(
-          `[data-path="${childFolderPath}"]`,
-        );
-        if (childRow && childRow.classList.contains("collapsed")) {
-          // Hide this collapsed folder's children
-          hideChildrenOfFolder(childFolderPath);
+        // Check if this is a direct child (not a grandchild)
+        const relativePath = rowPath.substring(folderPath.length + 1);
+        if (!relativePath.includes("/")) {
+          // This is a direct child, show it
+          row.style.display = "";
+
+          // If this is a folder, restore its individual state
+          if (row.classList.contains("intermediate-folder")) {
+            const childState = folderStates.get(rowPath) || "collapsed";
+            if (childState === "expanded") {
+              // This child was expanded, so expand it and show its children
+              row.classList.remove("collapsed");
+              showChildrenOfFolder(rowPath);
+            } else {
+              // This child was collapsed, so collapse it and hide its children
+              row.classList.add("collapsed");
+              hideChildrenOfFolder(rowPath);
+            }
+          }
         }
       }
     });
   } else {
     // Collapse folder - hide all children
     folderRow.classList.add("collapsed");
-    if (collapseIcon)
-      collapseIcon.innerHTML = '<i class="bi bi-folder-open"></i>';
 
     hideChildrenOfFolder(folderPath);
   }
 }
 
 function hideChildrenOfFolder(folderPath) {
-  // Hide all descendant rows of a folder
+  // Hide all descendant rows of a folder, but respect their individual states
+  const allRows = document.querySelectorAll(".game-row");
+  allRows.forEach((row) => {
+    const rowPath = row.getAttribute("data-path");
+    if (rowPath && rowPath.startsWith(folderPath + "/")) {
+      // Check if this is a direct child or a descendant
+      const relativePath = rowPath.substring(folderPath.length + 1);
+
+      if (!relativePath.includes("/")) {
+        // This is a direct child - hide it
+        row.style.display = "none";
+      } else {
+        // This is a grandchild or deeper - check if its parent is visible
+        const parentPath = rowPath.substring(0, rowPath.lastIndexOf("/"));
+        const parentRow = document.querySelector(`[data-path="${parentPath}"]`);
+
+        if (parentRow && parentRow.style.display === "none") {
+          // Parent is hidden, so hide this child too
+          row.style.display = "none";
+        }
+        // If parent is visible, don't change this child's visibility
+        // (it will be handled by its own parent's state)
+      }
+    }
+  });
+}
+
+function showChildrenOfFolder(folderPath) {
+  // Show all descendant rows of a folder, respecting their individual states
   const allRows = document.querySelectorAll(".game-row");
   allRows.forEach((row) => {
     const rowPath = row.getAttribute("data-path");
     if (rowPath && rowPath.startsWith(folderPath + "/")) {
-      row.style.display = "none";
+      // Check if this is a direct child or a descendant
+      const relativePath = rowPath.substring(folderPath.length + 1);
+
+      if (!relativePath.includes("/")) {
+        // This is a direct child - show it
+        row.style.display = "";
+      } else {
+        // This is a grandchild or deeper - check if its parent is visible and expanded
+        const parentPath = rowPath.substring(0, rowPath.lastIndexOf("/"));
+        const parentRow = document.querySelector(`[data-path="${parentPath}"]`);
+
+        if (parentRow && parentRow.style.display !== "none") {
+          // Parent is visible, check if it's expanded
+          const parentState = folderStates.get(parentPath) || "collapsed";
+          if (parentState === "expanded") {
+            // Parent is expanded, so show this child
+            row.style.display = "";
+          } else {
+            // Parent is collapsed, so hide this child
+            row.style.display = "none";
+          }
+        } else {
+          // Parent is hidden, so hide this child too
+          row.style.display = "none";
+        }
+      }
     }
   });
 }
@@ -536,4 +597,30 @@ document.addEventListener("DOMContentLoaded", function () {
   console.log("Available keyboard shortcuts:");
   console.log("  Shift + Click: Range select checkboxes");
   console.log("  Escape: Close move dialog");
+
+  // Collapse all folders by default
+  collapseAllFolders();
 });
+
+// Track individual folder states
+const folderStates = new Map();
+
+function collapseAllFolders() {
+  // Find all intermediate folder rows and collapse them
+  const folderRows = document.querySelectorAll(".intermediate-folder");
+  folderRows.forEach((folderRow) => {
+    const folderPath = folderRow.getAttribute("data-path");
+    if (folderPath) {
+      // Set initial state to collapsed
+      folderStates.set(folderPath, "collapsed");
+
+      // Collapse the folder
+      folderRow.classList.add("collapsed");
+
+      // Hide all children of this folder
+      hideChildrenOfFolder(folderPath);
+    }
+  });
+
+  console.log(`Collapsed ${folderRows.length} folders on startup`);
+}
diff --git a/codeclash/viewer/templates/picker.html b/codeclash/viewer/templates/picker.html
@@ -20,10 +20,6 @@ <h1><i class="bi bi-controller"></i> Pick a Game</h1>
             <p>Select a game session to view its trajectory</p>
         </div>
 
-        <div class="base-dir-info">
-            <h3><i class="bi bi-folder"></i> Base Directory:</h3>
-            <div class="base-dir-path">{{ base_dir }}</div>
-        </div>
 
         {% if game_folders %}
         <div class="games-table">
@@ -55,8 +51,8 @@ <h3><i class="bi bi-folder"></i> Base Directory:</h3>
             {% endif %}
         </div>
         <div class="table-header">
-            <div><i class="bi bi-check-square"></i> Select</div>
-            <div><i class="bi bi-folder"></i> Game Session</div>
+            <div><i class="bi bi-check-square"></i></div>
+            <div>Game Session</div>
             <div><i class="bi bi-journal-text"></i> Note</div>
             <div><i class="bi bi-target"></i> Rounds</div>
             <div><i class="bi bi-robot"></i> Models</div>
@@ -84,15 +80,8 @@ <h3><i class="bi bi-folder"></i> Base Directory:</h3>
                         {% for i in range(depth) %}
                         <span class="folder-icon">&nbsp;&nbsp;</span>
                         {% endfor %}
-                        {% if depth > 0 %}
-                        <span class="folder-icon">└─</span>
-                        {% endif %}
                     </span>
-                    {% if game.is_game %}
-                    <span class="folder-icon"><i class="bi bi-controller"></i></span>
-                    {% else %}
-                    <span class="folder-icon collapse-icon"><i class="bi bi-folder"></i></span>
-                    {% endif %}
+                    <span class="folder-icon collapse-icon"></span>
                     <span class="game-name">{{ folder_name }}</span>
                 </div>
 
