feat(admin): add box preview and password bypass for administrators

Introduce an `AdminViewBox` handler and route that allows administrators
to view any box directly. If the box is password-protected, the handler
bypasses the protection by setting an unlock cookie with an unlock token
and logs the bypass event.

Additionally, add CSS and JS foundations for a file context menu and
preview actions in the file browser UI.

backend/libs/handlers/admin.go

@@ -140,6 +140,33 @@ func (a *App) AdminDeleteBox(w http.ResponseWriter, r *http.Request) {
 	http.Redirect(w, r, "/admin/files", http.StatusSeeOther)
 }
 
+func (a *App) AdminViewBox(w http.ResponseWriter, r *http.Request) {
+	if !a.requireAdmin(w, r) {
+		return
+	}
+
+	box, err := a.uploadService.GetBox(r.PathValue("boxID"))
+	if err != nil {
+		http.NotFound(w, r)
+		return
+	}
+
+	if a.uploadService.IsProtected(box) {
+		http.SetCookie(w, &http.Cookie{
+			Name:     unlockCookieName(box.ID),
+			Value:    a.uploadService.UnlockToken(box),
+			Path:     "/d/" + box.ID,
+			HttpOnly: true,
+			SameSite: http.SameSiteLaxMode,
+			Secure:   r.TLS != nil,
+			Expires:  box.ExpiresAt,
+		})
+		a.logger.Info("admin bypassed box password", "source", "admin", "severity", "user_activity", "code", 2302, "box_id", box.ID)
+	}
+
+	http.Redirect(w, r, "/d/"+box.ID, http.StatusSeeOther)
+}
+
 func (a *App) renderAdminLogin(w http.ResponseWriter, status int, message string) {
 	a.renderer.Render(w, status, "admin_login.html", web.PageData{
 		Title:       "Admin login",

backend/libs/handlers/app.go

@@ -32,6 +32,7 @@ func (a *App) RegisterRoutes(mux *http.ServeMux) {
 	mux.HandleFunc("POST /admin/logout", a.AdminLogout)
 	mux.HandleFunc("GET /admin", a.AdminDashboard)
 	mux.HandleFunc("GET /admin/files", a.AdminFiles)
+	mux.HandleFunc("GET /admin/boxes/{boxID}/view", a.AdminViewBox)
 	mux.HandleFunc("POST /admin/boxes/{boxID}/delete", a.AdminDeleteBox)
 	mux.HandleFunc("GET /d/{boxID}", a.DownloadPage)
 	mux.HandleFunc("POST /d/{boxID}/unlock", a.UnlockBox)

backend/static/css/app.css

@@ -587,6 +587,16 @@ code {
   text-decoration: none;
 }
 
+.file-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.preview-action [hidden] {
+  display: none;
+}
+
 .file-browser.is-thumbs {
   grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
 }
@@ -606,10 +616,91 @@ code {
   width: 100%;
 }
 
+.file-browser.is-thumbs .file-actions {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
 .file-browser.images-only .file-card:not([data-kind="image"]) {
   display: none;
 }
 
+.context-menu {
+  position: fixed;
+  z-index: 30;
+  width: 10.75rem;
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-radius: calc(var(--radius) - 0.125rem);
+  background: color-mix(in srgb, var(--card) 96%, #000);
+  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.46);
+  padding: 0.4rem;
+}
+
+.context-menu[hidden] {
+  display: none;
+}
+
+.context-menu button {
+  width: 100%;
+  min-height: 2.05rem;
+  justify-content: flex-start;
+  border-radius: calc(var(--radius) - 0.25rem);
+  padding: 0.42rem 0.5rem;
+  color: var(--foreground);
+  font-size: 0.8rem;
+}
+
+.context-menu button:hover,
+.context-menu button:focus-visible,
+.context-menu button.is-copied {
+  background: var(--accent);
+}
+
+.context-menu-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.1rem 0.1rem 0.2rem 0.45rem;
+}
+
+.context-menu-top small {
+  color: color-mix(in srgb, var(--muted-foreground) 74%, transparent);
+  font-size: 0.72rem;
+  font-weight: 600;
+}
+
+.context-menu-icons {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.2rem;
+}
+
+.context-menu-icons button {
+  width: 1.9rem;
+  min-height: 1.9rem;
+  padding: 0;
+  justify-content: center;
+}
+
+.context-menu hr {
+  height: 1px;
+  margin: 0.35rem 0.2rem;
+  border: 0;
+  background: var(--border);
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+}
+
 .unlock-form {
   margin: 1rem auto 0;
   display: grid;

backend/static/js/app.js

@@ -15,6 +15,10 @@
   const fileBrowser = document.querySelector("[data-file-browser]");
   const viewButtons = document.querySelectorAll("[data-view-button]");
   const previewImages = document.querySelector("[data-preview-images]");
+  const previewActions = document.querySelectorAll("[data-preview-action]");
+  const fileContextMenu = document.querySelector("[data-file-context-menu]");
+  let ctrlCopyMode = false;
+  let contextFile = null;
 
   if (fileBrowser) {
     viewButtons.forEach((button) => {
@@ -34,6 +38,80 @@
     }
   }
 
+  if (fileBrowser && fileContextMenu) {
+    fileBrowser.addEventListener("contextmenu", (event) => {
+      const card = event.target.closest("[data-file-context]");
+      if (!card) {
+        return;
+      }
+
+      event.preventDefault();
+      contextFile = {
+        previewURL: card.dataset.previewUrl,
+        viewURL: card.dataset.viewUrl,
+        downloadURL: card.dataset.downloadUrl,
+        fileName: card.dataset.fileName,
+      };
+      showContextMenu(event.clientX, event.clientY);
+    });
+
+    fileContextMenu.addEventListener("click", async (event) => {
+      const button = event.target.closest("[data-context-action]");
+      if (!button || !contextFile) {
+        return;
+      }
+
+      const shouldHide = await runContextAction(button.dataset.contextAction, contextFile);
+      if (shouldHide !== false) {
+        hideContextMenu();
+      }
+    });
+
+    document.addEventListener("click", (event) => {
+      if (!fileContextMenu.contains(event.target)) {
+        hideContextMenu();
+      }
+    });
+
+    document.addEventListener("keydown", (event) => {
+      if (event.key === "Escape") {
+        hideContextMenu();
+      }
+    });
+
+    window.addEventListener("resize", hideContextMenu);
+    window.addEventListener("scroll", hideContextMenu, true);
+  }
+
+  if (previewActions.length > 0) {
+    previewActions.forEach((button) => {
+      button.addEventListener("click", async (event) => {
+        if (!event.ctrlKey && !ctrlCopyMode) {
+          return;
+        }
+
+        event.preventDefault();
+        await copyPreviewLink(button);
+      });
+    });
+
+    window.addEventListener("keydown", (event) => {
+      if (event.key === "Control") {
+        setPreviewCopyMode(true);
+      }
+    });
+
+    window.addEventListener("keyup", (event) => {
+      if (event.key === "Control") {
+        setPreviewCopyMode(false);
+      }
+    });
+
+    window.addEventListener("blur", () => {
+      setPreviewCopyMode(false);
+    });
+  }
+
   if (!form || !dropZone || !fileInput) {
     return;
   }
@@ -267,7 +345,7 @@
     if (!text) {
       return;
     }
-    await navigator.clipboard.writeText(text);
+    await writeClipboard(text);
     const previous = button.textContent;
     button.textContent = copiedLabel;
     setTimeout(() => {
@@ -275,6 +353,102 @@
     }, 1400);
   }
 
+  async function copyPreviewLink(button) {
+    await writeClipboard(button.href);
+    const label = button.querySelector("[data-preview-label]");
+    if (!label) {
+      return;
+    }
+
+    label.textContent = "Copied";
+    setTimeout(() => {
+      label.textContent = ctrlCopyMode ? button.dataset.copyLabel || "Copy link" : button.dataset.viewLabel || "View";
+    }, 1200);
+  }
+
+  function setPreviewCopyMode(enabled) {
+    ctrlCopyMode = enabled;
+    previewActions.forEach((button) => {
+      const label = button.querySelector("[data-preview-label]");
+      const viewIcon = button.querySelector("[data-preview-view-icon]");
+      const copyIcon = button.querySelector("[data-preview-copy-icon]");
+      if (label) {
+        label.textContent = enabled ? button.dataset.copyLabel || "Copy link" : button.dataset.viewLabel || "View";
+      }
+      if (viewIcon) {
+        viewIcon.hidden = enabled;
+      }
+      if (copyIcon) {
+        copyIcon.hidden = !enabled;
+      }
+    });
+  }
+
+  async function runContextAction(action, file) {
+    if (action === "preview") {
+      openInNewTab(file.previewURL);
+      return true;
+    }
+    if (action === "view") {
+      openInNewTab(file.viewURL);
+      return true;
+    }
+    if (action === "copy-preview") {
+      await writeClipboard(file.previewURL);
+      return true;
+    }
+    if (action === "copy-download") {
+      await writeClipboard(file.downloadURL);
+      return true;
+    }
+    if (action === "download") {
+      openInNewTab(file.downloadURL);
+    }
+    return true;
+  }
+
+  function showContextMenu(x, y) {
+    fileContextMenu.hidden = false;
+    fileContextMenu.style.left = "0px";
+    fileContextMenu.style.top = "0px";
+
+    const rect = fileContextMenu.getBoundingClientRect();
+    const margin = 8;
+    const left = Math.min(x, window.innerWidth - rect.width - margin);
+    const top = Math.min(y, window.innerHeight - rect.height - margin);
+    fileContextMenu.style.left = `${Math.max(margin, left)}px`;
+    fileContextMenu.style.top = `${Math.max(margin, top)}px`;
+  }
+
+  function hideContextMenu() {
+    if (!fileContextMenu || fileContextMenu.hidden) {
+      return;
+    }
+    fileContextMenu.hidden = true;
+    contextFile = null;
+  }
+
+  function openInNewTab(url) {
+    window.open(url, "_blank", "noopener,noreferrer");
+  }
+
+  async function writeClipboard(text) {
+    if (navigator.clipboard && window.isSecureContext) {
+      await navigator.clipboard.writeText(text);
+      return;
+    }
+
+    const textarea = document.createElement("textarea");
+    textarea.value = text;
+    textarea.setAttribute("readonly", "");
+    textarea.style.position = "fixed";
+    textarea.style.opacity = "0";
+    document.body.append(textarea);
+    textarea.select();
+    document.execCommand("copy");
+    textarea.remove();
+  }
+
   function formatDate(value) {
     const date = new Date(value);
     if (Number.isNaN(date.getTime())) {

backend/templates/pages/admin.html

@@ -77,7 +77,7 @@
                   {{if .Protected}}<span class="badge">protected</span>{{end}}
                 </td>
                 <td class="table-actions">
-                  <a class="button button-outline" href="/d/{{.ID}}">View</a>
+                  <a class="button button-outline" href="/admin/boxes/{{.ID}}/view">View</a>
                   <form action="/admin/boxes/{{.ID}}/delete" method="post">
                     <button class="button button-danger" type="submit">Delete</button>
                   </form>

backend/templates/pages/download.html

@@ -44,23 +44,69 @@
 
         <div class="download-list file-browser is-list" data-file-browser>
           {{range .Data.Files}}
-            <article class="download-item file-card" data-kind="{{.PreviewKind}}">
+            <article class="download-item file-card" data-kind="{{.PreviewKind}}" data-file-context data-preview-url="{{.URL}}" data-view-url="{{.DownloadURL}}?inline=1" data-download-url="{{.DownloadURL}}" data-file-name="{{.Name}}">
-              <a class="thumb-link" href="{{.URL}}" aria-label="Preview {{.Name}}">
+              <a class="thumb-link" href="{{.DownloadURL}}?inline=1" aria-label="View {{.Name}}">
                 <img src="{{.ThumbnailURL}}" alt="" loading="lazy">
               </a>
-              <a class="file-main" href="{{.URL}}">
+              <a class="file-main" href="{{.DownloadURL}}?inline=1">
                 <strong>{{.Name}}</strong>
                 <small>{{.Size}} · {{.ContentType}}</small>
               </a>
               {{if not $.Data.Locked}}
-                <a class="button button-outline" href="{{.DownloadURL}}">
+                <div class="file-actions">
-                  <svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M12 3v12m0 0 4-4m-4 4-4-4M5 21h14" /></svg>
+                  <a class="button button-outline preview-action" href="{{.DownloadURL}}?inline=1" target="_blank" rel="noopener noreferrer" data-preview-action data-view-label="View" data-copy-label="Copy link">
-                  Download
+                    <svg data-preview-view-icon viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6-10-6-10-6Z" /><circle cx="12" cy="12" r="3" /></svg>
-                </a>
+                    <svg data-preview-copy-icon viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true" hidden><rect width="14" height="14" x="8" y="8" rx="2" /><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" /></svg>
+                    <span data-preview-label>View</span>
+                  </a>
+                  <a class="button button-outline" href="{{.DownloadURL}}" download="{{.Name}}">
+                    <svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M12 3v12m0 0 4-4m-4 4-4-4M5 21h14" /></svg>
+                    Download
+                  </a>
+                </div>
               {{end}}
             </article>
           {{end}}
         </div>
+        {{if not .Data.Locked}}
+          <div class="context-menu" data-file-context-menu role="menu" aria-label="File actions" hidden>
+            <div class="context-menu-top">
+              <small>File actions</small>
+              <div class="context-menu-icons" aria-label="Quick actions">
+                <button type="button" role="menuitem" data-context-action="preview" title="Open preview" aria-label="Open preview">
+                  <svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M15 3h6v6" /><path d="M10 14 21 3" /><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /></svg>
+                </button>
+                <button type="button" role="menuitem" data-context-action="copy-preview" title="Copy preview URL" aria-label="Copy preview URL">
+                  <svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" /><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" /></svg>
+                  <span data-context-label class="sr-only">Copy</span>
+                </button>
+              </div>
+            </div>
+            <hr>
+            <button type="button" role="menuitem" data-context-action="preview">
+              <svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6-10-6-10-6Z" /><circle cx="12" cy="12" r="3" /></svg>
+              <span data-context-label>Preview</span>
+            </button>
+            <button type="button" role="menuitem" data-context-action="view">
+              <svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M15 3h6v6" /><path d="M10 14 21 3" /><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /></svg>
+              <span data-context-label>View raw file</span>
+            </button>
+            <hr>
+            <button type="button" role="menuitem" data-context-action="copy-preview">
+              <svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" /><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" /></svg>
+              <span data-context-label>Copy Preview</span>
+            </button>
+            <button type="button" role="menuitem" data-context-action="copy-download">
+              <svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" /><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" /></svg>
+              <span data-context-label>Copy Download</span>
+            </button>
+            <hr>
+            <button type="button" role="menuitem" data-context-action="download">
+              <svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M12 3v12m0 0 4-4m-4 4-4-4M5 21h14" /></svg>
+              <span data-context-label>Download</span>
+            </button>
+          </div>
+        {{end}}
       {{else if not .Data.Locked}}
         <p class="download-subtitle">{{.Data.ExpiresLabel}}</p>
       {{end}}