feat(hub): delete a photo from the Photos app

On a right-clicked tile and in the lightbox bar, after a confirmation, for
the node's operator or the photo's uploader, as in Files.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

1 files changed, 285 insertions, 0 deletions

diff --git a/packages/meshbay-hub/tests/harness/photo_delete_probe.py b/packages/meshbay-hub/tests/harness/photo_delete_probe.py
new file mode 100755
index 0000000..a99566d
--- /dev/null
+++ b/packages/meshbay-hub/tests/harness/photo_delete_probe.py
@@ -0,0 +1,285 @@
+#!/usr/bin/env python3
+"""
+Deleting a photo from the Photos app, in a real browser.
+
+Mounts the shipped `PhotosApp` on a made-up index, with a transport that
+records what it is asked to delete and an index that drops what was deleted,
+as a node's does. Right-clicks a tile, picks Delete, answers the page's own
+confirmation (ask.js) one way then the other, and does the same from the
+lightbox's bar.
+
+    photo_delete_probe.py
+
+Prints JSON: one entry per case.
+"""
+
+import http.server
+import json
+import socketserver
+import subprocess
+import sys
+import tempfile
+import threading
+import time
+from pathlib import Path
+
+STATIC = Path(__file__).resolve().parents[2] / "src" / "meshbay_hub" / "static"
+PORT = 8776
+RECORDS = []
+socketserver.TCPServer.allow_reuse_address = True
+
+FRAME = r"""<!doctype html><html><head><meta charset=utf-8>
+<link rel="stylesheet" href="/style.css"></head><body>
+<div id="photos"></div>
+<script type="module">
+import { html, render, useState } from '/vendor/htm-preact.js';
+import { initLocale, setLocale } from '/i18n.js';
+import { PhotosApp } from '/photos-app.js';
+
+const LOGS = [];
+addEventListener('error', (e) => LOGS.push('error: ' + (e.message || e)));
+addEventListener('unhandledrejection',
+  (e) => LOGS.push('rejection: ' + (e.reason && e.reason.message || e.reason)));
+const frame = () => new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r)));
+const wait = (ms) => new Promise((r) => setTimeout(r, ms));
+
+const PHOTOS = [
+  { id: 'p1', name: 'beach.jpg', path: 'Pics/Summer', size: 4, type: 'image', added_at: 1,
+    uploader_id: 'me' },
+  { id: 'p2', name: 'dunes.jpg', path: 'Pics/Summer', size: 4, type: 'image', added_at: 2,
+    uploader_id: 'me' },
+  { id: 'p3', name: 'theirs.jpg', path: 'Pics/Summer', size: 4, type: 'image', added_at: 3,
+    uploader_id: 'someone' },
+];
+const DELETED = [];
+let onNode = [];
+const ref = { current: null };
+const noop = () => {};
+
+function Host({ isNodeAdmin = false, readOnly = false }) {
+  const [entries, setEntries] = useState(onNode);
+  ref.current = {
+    connected: true,
+    signFn: 'sign-fn',
+    async deleteFile(id, signFn) {
+      DELETED.push([id, signFn]);
+      onNode = onNode.filter((e) => e.id !== id);
+      return { type: 'file_delete_ack' };
+    },
+    async fetchIndex() { return { entries: onNode }; },
+  };
+  return html`<${PhotosApp} groupId="g" transportRef=${ref} gekRef=${{ current: null }}
+    status="connected" entries=${entries} photoDirectories=${['Pics']}
+    setError=${noop} linkFor=${() => null} readOnly=${readOnly}
+    isNodeAdmin=${isNodeAdmin} userId="me"
+    applyIndex=${(idx) => setEntries(idx.entries)} />`;
+}
+
+const mount = async (props) => {
+  onNode = PHOTOS.map((p) => ({ ...p }));
+  DELETED.length = 0;
+  const root = document.getElementById('photos');
+  render(null, root);
+  render(html`<${Host} ...${props} />`, root);
+  await frame();
+  const album = document.querySelector('.photo-album-card');
+  if (album) { album.click(); await frame(); }
+};
+const tileNamed = (name) => [...document.querySelectorAll('.photo-tile')]
+  .find((t) => (t.querySelector('img') || {}).alt === name || t.textContent.includes(name));
+const tiles = () => document.querySelectorAll('.photo-tile').length;
+const labels = () => [...document.querySelectorAll('.ctx-menu .ctx-menu-label')]
+  .map((el) => el.textContent);
+const closeMenus = async () => {
+  document.body.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
+  await frame();
+};
+const rightClick = async (el) => {
+  await closeMenus();
+  const r = el.getBoundingClientRect();
+  el.dispatchEvent(new MouseEvent('contextmenu', { bubbles: true, cancelable: true,
+    clientX: r.left + 10, clientY: r.top + 5 }));
+  await frame();
+};
+const pick = async (label) => {
+  const item = [...document.querySelectorAll('.ctx-menu .ctx-menu-item')]
+    .find((b) => b.querySelector('.ctx-menu-label').textContent === label);
+  if (!item) return false;
+  item.click();
+  await wait(50);
+  return true;
+};
+// The page's own confirmation: what it says, whether it is the topmost thing
+// on screen, and an answer.
+const dialog = () => document.querySelector('[role="alertdialog"]');
+const onTop = () => {
+  const d = dialog();
+  if (!d) return false;
+  const r = d.getBoundingClientRect();
+  const hit = document.elementFromPoint(r.left + r.width / 2, r.top + r.height / 2);
+  return Boolean(hit && d.contains(hit));
+};
+const answer = async (yes) => {
+  const d = dialog();
+  const buttons = [...d.querySelectorAll('button')];
+  const b = yes ? buttons.find((x) => x.type === 'submit') || buttons.at(-1)
+                : buttons.find((x) => x.type !== 'submit') || buttons[0];
+  b.click();
+  await wait(100);
+  await frame();
+};
+
+(async () => {
+  const cases = [];
+  try {
+    setLocale('en');
+    await initLocale();
+
+    // -- one's own photo, from the tile: cancelled, then confirmed --
+    await mount({});
+    const tile = document.querySelectorAll('.photo-tile')[0];
+    await rightClick(tile);
+    const own = labels();
+    await pick('Delete');
+    const asked = dialog() ? dialog().textContent : null;
+    await answer(false);
+    const afterNo = { deleted: DELETED.length, tiles: tiles() };
+    await rightClick(document.querySelectorAll('.photo-tile')[0]);
+    await pick('Delete');
+    await answer(true);
+    await wait(100); await frame();
+    cases.push({ case: 'tile', labels: own, asked, after_no: afterNo,
+      deleted: DELETED.map((d) => d.slice()), tiles: tiles() });
+
+    // -- somebody else's photo: nothing to delete there --
+    const others = [...document.querySelectorAll('.photo-tile')];
+    let theirLabels = null;
+    for (const t of others) {
+      await rightClick(t);
+      const l = labels();
+      if (!l.includes('Delete')) { theirLabels = l; break; }
+    }
+    await closeMenus();
+    cases.push({ case: 'not mine', menu_without_delete: theirLabels });
+
+    // -- the node's operator may delete anyone's --
+    await mount({ isNodeAdmin: true });
+    const all = [];
+    for (const t of document.querySelectorAll('.photo-tile')) {
+      await rightClick(t);
+      all.push(labels().includes('Delete'));
+    }
+    await closeMenus();
+    cases.push({ case: 'operator', delete_offered: all });
+
+    // -- from the lightbox: the button, the dialog above it, the next photo --
+    await mount({});
+    document.querySelectorAll('.photo-tile')[0].click();
+    await frame();
+    const title = () => (document.querySelector('.photo-lightbox .video-title') || {}).textContent;
+    const before = title();
+    const btn = document.querySelector('.photo-lightbox button[aria-label="Delete"]');
+    if (btn) btn.click();
+    await wait(50);
+    const dialogOnTop = onTop();
+    if (dialog()) await answer(true);
+    await wait(100); await frame();
+    cases.push({ case: 'lightbox', button: Boolean(btn), dialog_on_top: dialogOnTop,
+      before, after: title() || null, open: Boolean(document.querySelector('.photo-lightbox')),
+      deleted: DELETED.map((d) => d[0]) });
+
+    // -- read-only (Search): never --
+    await mount({ readOnly: true, isNodeAdmin: true });
+    const ro = document.querySelectorAll('.photo-tile')[0];
+    await rightClick(ro);
+    const roLabels = labels();
+    await closeMenus();
+    ro.click(); await frame();
+    cases.push({ case: 'read only', labels: roLabels,
+      lightbox_button: Boolean(document.querySelector('.photo-lightbox button[aria-label="Delete"]')) });
+
+    parent.postMessage({ cases, logs: LOGS, origin: location.origin }, '*');
+  } catch (err) {
+    parent.postMessage({ error: String(err && (err.stack || err)), logs: LOGS }, '*');
+  }
+})();
+</script></body></html>"""
+
+PAGE = r"""<!doctype html><html><head><meta charset=utf-8></head>
+<body style="margin:0"><div id="frames"></div><script>
+addEventListener('message', (e) => {
+  fetch('/log', { method: 'POST', body: JSON.stringify(e.data) });
+});
+const f = document.createElement('iframe');
+f.src = '/case';
+f.style.cssText = 'width:1100px;height:800px;border:0;display:block';
+document.getElementById('frames').appendChild(f);
+</script></body></html>"""
+
+
+class H(http.server.BaseHTTPRequestHandler):
+    def log_message(self, *a):
+        pass
+
+    def do_POST(self):
+        length = int(self.headers.get("Content-Length") or 0)
+        if self.path == "/log":
+            RECORDS.append(json.loads(self.rfile.read(length).decode()))
+        else:
+            self.rfile.read(length)
+        self.send_response(204)
+        self.end_headers()
+
+    def _send(self, body: bytes, ctype: str) -> None:
+        self.send_response(200)
+        self.send_header("Content-Type", ctype)
+        self.send_header("Content-Length", str(len(body)))
+        self.end_headers()
+        self.wfile.write(body)
+
+    def do_GET(self):
+        path = self.path.split("?")[0]
+        if path == "/":
+            self._send(PAGE.encode(), "text/html; charset=utf-8")
+        elif path == "/case":
+            self._send(FRAME.encode(), "text/html; charset=utf-8")
+        else:
+            asset = (STATIC / path.lstrip("/")).resolve()
+            if not str(asset).startswith(str(STATIC)) or not asset.is_file():
+                self.send_response(404)
+                self.end_headers()
+                return
+            self._send(asset.read_bytes(),
+                       "text/css" if asset.suffix == ".css"
+                       else "text/javascript" if asset.suffix == ".js"
+                       else "application/octet-stream")
+
+
+def main() -> int:
+    with socketserver.TCPServer(("127.0.0.1", PORT), H) as srv:
+        threading.Thread(target=srv.serve_forever, daemon=True).start()
+        with tempfile.TemporaryDirectory(ignore_cleanup_errors=True) as profile:
+            proc = subprocess.Popen(
+                ["google-chrome", "--headless=new", "--disable-gpu", "--no-sandbox",
+                 f"--user-data-dir={profile}", "--window-size=1100,900",
+                 f"http://127.0.0.1:{PORT}/"],
+                stdout=subprocess.DEVNULL, stderr=subprocess.DEVNULL)
+            for _ in range(300):
+                if RECORDS:
+                    break
+                time.sleep(0.1)
+            proc.terminate()
+            try:
+                proc.wait(timeout=10)
+            except subprocess.TimeoutExpired:
+                proc.kill()
+                proc.wait()
+    if not RECORDS:
+        print(json.dumps({"error": "no measurement"}), file=sys.stderr)
+        return 1
+    print(json.dumps(RECORDS[0], indent=1))
+    return 0
+
+
+if __name__ == "__main__":
+    raise SystemExit(main())