dropdown menu and comment side panel

apps/server/internal/httpserver/static/mobile.js

@@ -74,4 +74,13 @@
   document.addEventListener('keydown', (e) => {
     if (e.key === 'Escape') closeAllDrawers();
   });
+
+  // Close action dropdowns when clicking outside
+  document.addEventListener('click', (e) => {
+    document.querySelectorAll('.document-actions-dropdown[open]').forEach((details) => {
+      if (!details.contains(e.target)) {
+        details.removeAttribute('open');
+      }
+    });
+  });
 })();

apps/server/internal/httpserver/static/site.css

@@ -1675,46 +1675,6 @@ code {
   line-height: 1.1;
 }
 
-.document-meta-panel {
-  margin-top: 0.9rem;
-  border: 1px solid var(--border);
-  background: rgba(255, 255, 255, 0.45);
-}
-
-.document-meta-panel summary {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  padding: 0.7rem 0.85rem;
-  cursor: pointer;
-  list-style: none;
-  color: var(--muted);
-  font: 700 0.78rem/1.2 ui-monospace, SFMono-Regular, monospace;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.document-meta-panel summary::-webkit-details-marker {
-  display: none;
-}
-
-.document-meta-panel summary::after {
-  content: "+";
-  margin-left: auto;
-  color: var(--text);
-  font-size: 1rem;
-  letter-spacing: 0;
-}
-
-.document-meta-panel[open] summary::after {
-  content: "-";
-}
-
-.document-meta-panel .meta-grid {
-  padding: 0 0.85rem 0.85rem;
-}
-
 .meta-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
@@ -1959,47 +1919,150 @@ code {
   align-items: end;
 }
 
-.document-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-  align-items: center;
+/* Document actions dropdown */
+.document-actions-dropdown {
+  position: relative;
+  display: inline-block;
 }
 
-.document-edit-link {
+.document-actions-dropdown > summary {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-height: 2.4rem;
-  padding: 0 0.9rem;
+  width: 2.25rem;
+  height: 2.25rem;
+  padding: 0;
   border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--panel-strong);
+  color: var(--text);
+  cursor: pointer;
+  list-style: none;
+  transition: background 0.15s, border-color 0.15s, color 0.15s;
+}
+
+.document-actions-dropdown > summary::-webkit-details-marker {
+  display: none;
+}
+
+.document-actions-dropdown > summary:hover {
+  background: color-mix(in srgb, var(--accent) 8%, var(--panel-strong));
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+.document-actions-dropdown > summary svg {
+  width: 1.1rem;
+  height: 1.1rem;
+}
+
+.document-actions-dropdown__menu {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 0.4rem);
+  z-index: 50;
+  min-width: 14rem;
+  padding: 0.35rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--panel-strong);
+  box-shadow: 0 8px 32px rgba(24, 32, 42, 0.12);
+}
+
+.document-actions-dropdown:not([open]) .document-actions-dropdown__menu {
+  display: none;
+}
+
+.document-actions-dropdown__item {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  width: 100%;
+  padding: 0.55rem 0.7rem;
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: transparent;
   color: var(--text);
   font: inherit;
-  text-decoration: none;
-  background: var(--panel);
-}
-
-.document-edit-link:hover {
-  background: color-mix(in srgb, var(--accent) 8%, transparent);
-}
-
-.document-archive-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 2.4rem;
-  padding: 0 0.9rem;
-  border: 1px solid color-mix(in srgb, #b42318 40%, var(--border));
-  background: transparent;
-  color: #b42318;
-  font: inherit;
   font-size: 0.9rem;
+  text-decoration: none;
   cursor: pointer;
-  transition: background 0.15s ease, color 0.15s ease;
+  transition: background 0.15s;
+  white-space: nowrap;
 }
 
-.document-archive-btn:hover {
-  background: color-mix(in srgb, #b42318 8%, transparent);
+.document-actions-dropdown__item:hover {
+  background: var(--accent-soft);
+}
+
+.document-actions-dropdown__item svg {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}
+
+.document-actions-dropdown__item--danger {
+  color: #b42318;
+}
+
+.document-actions-dropdown__item--danger:hover {
+  background: color-mix(in srgb, #b42318 10%, var(--panel-strong));
+}
+
+.document-actions-dropdown__divider {
+  margin: 0.35rem 0;
+  border: 0;
+  border-top: 1px solid var(--border);
+}
+
+.document-actions-dropdown__meta {
+  padding: 0.35rem 0.7rem;
+  font-size: 0.85rem;
+}
+
+.document-actions-dropdown__meta-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  padding: 0.3rem 0;
+}
+
+.document-actions-dropdown__meta-label {
+  flex-shrink: 0;
+  width: 3rem;
+  color: var(--muted);
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}
+
+.document-actions-dropdown__meta-value {
+  font-size: 0.8rem;
+  word-break: break-all;
+}
+
+.document-actions-dropdown__tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.3rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.document-actions-dropdown__tag-list a {
+  display: inline-block;
+  padding: 0.15rem 0.4rem;
+  border-radius: var(--radius-sm);
+  background: var(--accent-soft);
+  color: var(--accent);
+  font-size: 0.8rem;
+  text-decoration: none;
+  transition: background 0.15s;
+}
+
+.document-actions-dropdown__tag-list a:hover {
+  background: color-mix(in srgb, var(--accent) 16%, transparent);
 }
 
 .document-shell--editor {
@@ -2517,45 +2580,32 @@ code {
 
   .document-meta__header {
     align-items: flex-start;
-    flex-direction: column;
+    flex-direction: row;
+    justify-content: space-between;
     gap: 0.75rem;
   }
 
-  .document-actions {
-    width: 100%;
+  .document-actions-dropdown__menu {
+    position: static;
+    box-shadow: none;
+    border: 0;
+    border-radius: var(--radius-sm);
+    background: var(--panel-strong);
+    margin-top: 0.5rem;
   }
 
-  .document-actions .document-edit-link,
-  .document-actions .document-archive-btn {
-    flex: 1 1 auto;
-    justify-content: center;
-    min-height: 2.2rem;
-    font-size: 0.9rem;
+  .document-actions-dropdown__item {
+    padding: 0.65rem 0.8rem;
+  }
+
+  .document-actions-dropdown__meta {
+    padding: 0.5rem 0.8rem;
   }
 
   .meta-grid {
     grid-template-columns: 1fr;
   }
 
-  .document-meta-panel summary,
-  .document-meta-panel summary::after {
-    display: none;
-  }
-
-  .document-meta-panel {
-    display: block;
-    margin-top: 0.75rem;
-    padding: 0.75rem;
-    border: 1px solid var(--border);
-    border-radius: var(--radius-sm);
-    background: var(--panel-strong);
-  }
-
-  .document-meta-panel .meta-grid {
-    display: grid;
-    gap: 0.5rem;
-  }
-
   /* Document body padding */
   .document-shell .markdown-body {
     padding: 1rem;
@@ -2726,10 +2776,6 @@ code {
     background: oklch(0.705 0.165 55 / 0.07);
   }
 
-  .document-meta-panel {
-    background: oklch(0.20 0.015 55 / 0.5);
-  }
-
   .editor-form textarea {
     background: oklch(0.15 0.012 55);
     color: var(--text);

apps/server/internal/httpserver/templates/document.gohtml

@@ -34,43 +34,55 @@
       </button>
       <div class="document-meta__header">
         <h1>{{ .Title }}</h1>
-        <div class="document-actions">
-          {{ if .CanWrite }}
-            <a class="document-edit-link" href="/docs/{{ trimMd .Path }}/edit">Edit</a>
-            {{ if .CanAdmin }}
-              <a class="document-edit-link" href="/permissions?resourceType=document&resourceId={{ .Path }}">Permissions</a>
+        <details class="document-actions-dropdown">
+          <summary aria-haspopup="true" aria-label="Document actions">
+            <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="12" cy="5" r="1"></circle>
+              <circle cx="12" cy="12" r="1"></circle>
+              <circle cx="12" cy="19" r="1"></circle>
+            </svg>
+          </summary>
+          <div class="document-actions-dropdown__menu">
+            {{ if .CanWrite }}
+              <a class="document-actions-dropdown__item" href="/docs/{{ trimMd .Path }}/edit">
+                <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg>
+                <span>Edit</span>
+              </a>
+              {{ if .CanAdmin }}
+                <a class="document-actions-dropdown__item" href="/permissions?resourceType=document&resourceId={{ .Path }}">
+                  <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
+                  <span>Permissions</span>
+                </a>
+              {{ end }}
+              <button class="document-actions-dropdown__item document-actions-dropdown__item--danger" type="button" data-archive-path="{{ .Path }}" aria-label="Archive document">
+                <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="21 8 21 21 3 21 3 8"></polyline><rect x="1" y="3" width="22" height="5"></rect><line x1="10" y1="12" x2="14" y2="12"></line></svg>
+                <span>Archive</span>
+              </button>
             {{ end }}
-            <button class="document-archive-btn" type="button" data-archive-path="{{ .Path }}" aria-label="Archive document">Archive</button>
-          {{ end }}
-        </div>
-      </div>
-      <details class="document-meta-panel">
-        <summary>
-          <span>Document details</span>
-        </summary>
-        <dl class="meta-grid">
-          <div>
-            <dt>File</dt>
-            <dd><code>{{ .Path }}</code></dd>
-          </div>
-          <div>
-            <dt>Hash</dt>
-            <dd><code>{{ .Hash }}</code></dd>
-          </div>
-          {{ if .Tags }}
-            <div>
-              <dt>Tags</dt>
-              <dd>
-                <ul class="tag-list">
-                  {{ range .Tags }}
-                    <li><a href="/?tag={{ . }}">#{{ . }}</a></li>
-                  {{ end }}
-                </ul>
-              </dd>
+            <hr class="document-actions-dropdown__divider">
+            <div class="document-actions-dropdown__meta">
+              <div class="document-actions-dropdown__meta-row">
+                <span class="document-actions-dropdown__meta-label">File</span>
+                <code class="document-actions-dropdown__meta-value">{{ .Path }}</code>
+              </div>
+              <div class="document-actions-dropdown__meta-row">
+                <span class="document-actions-dropdown__meta-label">Hash</span>
+                <code class="document-actions-dropdown__meta-value">{{ .Hash }}</code>
+              </div>
+              {{ if .Tags }}
+                <div class="document-actions-dropdown__meta-row">
+                  <span class="document-actions-dropdown__meta-label">Tags</span>
+                  <ul class="document-actions-dropdown__tag-list">
+                    {{ range .Tags }}
+                      <li><a href="/?tag={{ . }}">#{{ . }}</a></li>
+                    {{ end }}
+                  </ul>
+                </div>
+              {{ end }}
             </div>
-          {{ end }}
-        </dl>
-      </details>
+          </div>
+        </details>
+      </div>
     </div>
 
     <div class="markdown-body">