pandorga 1.3.11 → 1.4.2

data/studio-app/src/media/browser.js

@@ -203,11 +203,6 @@ export function renderMediaPane(opts) {
     fileInput,
   ]);
 
-  const hint = el("p", {
-    className: "media-hint",
-    text: "Click an image, video, or HTML file to preview it. Copy the public path into includes (e.g. /media/images/…). Deletes stay in GitHub/IDE.",
-  });
-
   let body;
   if (state.mediaLoading) {
     body = el("p", { className: "loading-msg", text: "Loading media…" });
@@ -218,14 +213,13 @@ export function renderMediaPane(opts) {
     });
   } else {
     const rows = items.map((item) => renderMediaRow(item, opts));
-    body = el("div", { className: "media-grid", role: "list" }, rows);
+    body = el("div", { className: "media-grid" }, rows);
   }
 
   return el("div", { className: "pane media-pane" }, [
     el("header", { className: "media-header" }, [
       el("h1", { className: "media-title", text: "Media" }),
       breadcrumb,
-      hint,
     ]),
     toolbar,
     body,
@@ -293,17 +287,35 @@ function renderMediaRow(item, opts) {
       ? `Preview ${item.name}`
       : `Copy ${publicPath}`;
 
-  return el("div", {
-    className: "media-row" + (isDir ? " media-row--dir" : ""),
-    role: "listitem",
-  }, [
-    el("button", {
-      className: "media-row-main" + (kind ? " media-row-main--preview" : ""),
-      type: "button",
+  const ops = !isDir && publicPath
+    ? renderMediaOps(item, publicPath, opts)
+    : null;
+
+  return el(
+    "div",
+    {
+      className:
+        "media-row" +
+        (isDir ? " media-row--dir" : "") +
+        (kind ? " media-row--preview" : ""),
+      role: "button",
+      tabindex: state.mediaBusy ? "-1" : "0",
       title: rowTitle,
-      disabled: !!state.mediaBusy,
-      onClick: openOrCopy,
-    }, [
+      "aria-disabled": state.mediaBusy ? "true" : "false",
+      onClick: (e) => {
+        if (state.mediaBusy) return;
+        if (e.target.closest(".media-ops")) return;
+        openOrCopy(e);
+      },
+      onKeydown: (e) => {
+        if (state.mediaBusy) return;
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          openOrCopy(e);
+        }
+      },
+    },
+    [
       preview,
       el("span", { className: "media-row-body" }, [
         el("span", { className: "media-row-name", text: item.name }),
@@ -312,18 +324,48 @@ function renderMediaRow(item, opts) {
           text: metaParts.join(" · ") || (isDir ? "Folder" : ""),
         }),
       ]),
-    ]),
-    !isDir && publicPath
-      ? el("button", {
-          className: "btn media-copy-btn",
-          type: "button",
-          text: "Copy path",
-          title: publicPath,
-          disabled: !!state.mediaBusy,
-          onClick: () => void copyPath(publicPath, opts),
-        })
-      : null,
-  ].filter(Boolean));
+      ops,
+    ].filter(Boolean)
+  );
+}
+
+function renderMediaOps(item, publicPath, opts) {
+  const { el, materialIcon, state } = opts;
+  const busy = !!state.mediaBusy;
+  const copyBtn = el(
+    "button",
+    {
+      className: "btn btn-icon media-op-btn media-copy-btn",
+      type: "button",
+      title: `Copy ${publicPath}`,
+      "aria-label": `Copy path ${publicPath}`,
+      disabled: busy,
+      onClick: (e) => {
+        e.stopPropagation();
+        void copyPath(publicPath, opts);
+      },
+    },
+    [materialIcon("content_copy")]
+  );
+  const deleteBtn = el(
+    "button",
+    {
+      className: "btn btn-icon media-op-btn media-delete-btn",
+      type: "button",
+      title: `Delete ${item.name}`,
+      "aria-label": `Delete ${item.name}`,
+      disabled: busy,
+      onClick: (e) => {
+        e.stopPropagation();
+        void deleteMediaFile(item, opts);
+      },
+    },
+    [materialIcon("delete")]
+  );
+  return el("div", { className: "media-ops", role: "group", "aria-label": "Operations" }, [
+    copyBtn,
+    deleteBtn,
+  ]);
 }
 
 /** One overlay for the page, same chrome as the public figure lightbox. */
@@ -480,6 +522,43 @@ async function copyPath(publicPath, opts) {
   render();
 }
 
+async function deleteMediaFile(item, opts) {
+  const { api, state, render, captureError, clearError } = opts;
+  const path = item?.path;
+  if (!path || item.type === "dir") return;
+  const name = item.name || String(path).split("/").pop() || path;
+  if (
+    !window.confirm(
+      `Delete ${name}?\n\nThis commits a deletion to main and cannot be undone from Studio.`
+    )
+  ) {
+    return;
+  }
+  clearError();
+  state.mediaBusy = true;
+  state.status = `Deleting ${path}…`;
+  render();
+  try {
+    let sha = item.sha || null;
+    if (!sha) {
+      const data = await api.getFile(path);
+      sha = data.sha;
+    }
+    await api.deleteFile({
+      path,
+      sha,
+      message: `studio: delete ${path}`,
+    });
+    state.mediaBusy = false;
+    state.status = `Deleted ${path}`;
+    await openMediaDir(state.mediaPath, opts);
+  } catch (err) {
+    state.mediaBusy = false;
+    captureError(err);
+    render();
+  }
+}
+
 export async function openMediaDir(dirPath, opts) {
   const { api, state, render, captureError, clearError } = opts;
   clearError();