feat(files-overlay): filename click opens editor, actions align next to row

Replaces the dedicated edit button with a click target on the filename
itself (download stays as a separate ⬇ action). Drops margin-left:auto on
.files-row-actions so action buttons sit immediately after the row's name
instead of at the far right.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

l4d2web/l4d2web/static/css/components.css

@@ -254,6 +254,23 @@ dialog.modal::backdrop {
   padding-left: calc(1ch + var(--space-xs));
 }
 
+.file-tree-name-button {
+  background: none;
+  border: 0;
+  padding: 0;
+  font: inherit;
+  color: var(--color-link);
+  cursor: pointer;
+  text-align: left;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.file-tree-name-button:hover,
+.file-tree-name-button:focus-visible {
+  text-decoration-thickness: 2px;
+}
+
 .file-tree-toggle[aria-expanded="true"] .chevron {
   transform: rotate(90deg);
 }
@@ -583,8 +600,7 @@ button.danger-outline:hover {
   display: inline-flex;
   align-items: center;
   gap: var(--space-xs);
-  margin-left: auto;
+  padding-left: var(--space-s);
-  padding-left: var(--space-m);
   opacity: 0;
   pointer-events: none;
   transition: opacity 80ms ease;

l4d2web/l4d2web/static/js/files-overlay.js

@@ -3,7 +3,8 @@
 // overlay is type='files' and the user can edit). The script binds:
 //
 //   * Per-row hover actions: + new file, + new folder, ⬇ zip, ✕ on
-//     folders; edit, ✕ on files (download is a regular <a>).
+//     folders; ⬇ (download), ✕ on files. Clicking the filename opens
+//     the editor (binary fallback for non-editable files).
 //   * Drag-and-drop: dragging from the OS uploads (one POST per file,
 //     queue with concurrency 3); dragging a row inside the tree moves
 //     (rename/move via /files/move).
@@ -977,7 +978,9 @@
   // ---------- click delegation: action buttons ----------------------------
 
   document.addEventListener("click", (event) => {
-    const action = event.target?.closest?.(".files-row-action[data-action]");
+    const action = event.target?.closest?.(
+      ".files-row-action[data-action], .file-tree-name-button[data-action]"
+    );
     if (!action) return;
     if (!manager.contains(action)) return;
     const op = action.dataset.action;

l4d2web/l4d2web/templates/_overlay_file_node.html

@@ -24,7 +24,9 @@
     <span>{{ entry.name }}</span>
     <span class="file-tree-badge file-tree-badge-warn">broken link</span>
   {% else %}
-    {% if download_supported %}
+    {% if files_overlay %}
+    <button type="button" class="file-tree-name-button" data-action="edit" data-target-path="{{ entry.rel }}" data-editable="{{ '1' if entry.editable else '0' }}" title="Open in editor">{{ entry.name }}</button>
+    {% elif download_supported %}
     <a href="{{ files_base_url }}/files/download?path={{ entry.rel|urlencode }}">{{ entry.name }}</a>
     {% else %}
     <span>{{ entry.name }}</span>
@@ -34,7 +36,6 @@
   {% endif %}
   {% if files_overlay and not entry.broken %}
   <span class="files-row-actions" aria-label="File actions">
-    <button type="button" class="files-row-action" data-action="edit" data-target-path="{{ entry.rel }}" data-editable="{{ '1' if entry.editable else '0' }}" title="Edit">edit</button>
     <a class="files-row-action" href="{{ files_base_url }}/files/download?path={{ entry.rel|urlencode }}" title="Download">⬇</a>
     <button type="button" class="files-row-action files-row-danger" data-action="delete" data-target-path="{{ entry.rel }}" data-row-kind="file" data-row-name="{{ entry.name }}" title="Delete">✕</button>
   </span>