Add URL deletion and improve snapshots

src/main.ts

@@ -5,7 +5,8 @@ import {
   CHROME_PROFILE_NAME,
   findKnownUrlForBase,
   type AddUrlMode,
-  type AppView
+  type AppView,
+  type ScreenshotAttachment
 } from "./store";
 import type { GiteaRepoSummary } from "./api";
 import type { KnownUrl, LocalContext, LocalWorkspace } from "./localContext";
@@ -61,7 +62,26 @@ function formatSha(value: string): string {
 
 function allUrls(): KnownUrl[] {
   const state = appStore.getState();
-  return [...(state.localContext?.knownUrls ?? []), ...state.userUrls];
+  const deletedBases = new Set(state.deletedUrlBases);
+  const urls = [...(state.localContext?.knownUrls ?? []), ...state.userUrls].filter(
+    (knownUrl) => !deletedBases.has(baseUrlFor(knownUrl.url))
+  );
+
+  return urls.filter(
+    (knownUrl, index) => urls.findIndex((item) => baseUrlFor(item.url) === baseUrlFor(knownUrl.url)) === index
+  );
+}
+
+function baseUrlFor(value: string): string {
+  try {
+    const url = new URL(value);
+    if (url.protocol !== "http:" && url.protocol !== "https:") {
+      return "";
+    }
+    return `${url.origin}/`;
+  } catch {
+    return "";
+  }
 }
 
 function isActiveBaseUrlKnown(): boolean {
@@ -167,7 +187,10 @@ function renderUrls(urls: KnownUrl[]): string {
                     : `<span class="muted">No Gitea repo link established</span>`
                 }
               </div>
-              <button class="visit-button" type="button" data-open-url="${knownUrl.url}">Quick visit</button>
+              <div class="url-actions">
+                <button class="visit-button" type="button" data-open-url="${knownUrl.url}">Quick visit</button>
+                <button class="danger-button" type="button" data-delete-url="${knownUrl.url}">Delete</button>
+              </div>
             </article>
           `
         )
@@ -271,6 +294,27 @@ function renderAttachmentList(items: string[], emptyText: string): string {
   `;
 }
 
+function renderScreenshotList(screenshots: ScreenshotAttachment[]): string {
+  if (!screenshots.length) {
+    return `<span class="muted">No screenshots captured.</span>`;
+  }
+
+  return `
+    <div class="screenshot-list">
+      ${screenshots
+        .map(
+          (screenshot) => `
+            <figure class="screenshot-item">
+              <img src="${screenshot.dataUrl}" alt="${escapeHtml(screenshot.name)}" />
+              <figcaption>${escapeHtml(screenshot.name)}</figcaption>
+            </figure>
+          `
+        )
+        .join("")}
+    </div>
+  `;
+}
+
 function renderAddIssue(): string {
   const state = appStore.getState();
   const knownUrl = getActiveKnownUrl();
@@ -308,12 +352,11 @@ function renderAddIssue(): string {
         <section class="attachment-section">
           <div class="attachment-heading">
             <span>Screenshots</span>
-            <button id="capture-screenshot" class="secondary-button" type="button">Take snapshot</button>
+            <button id="capture-screenshot" class="secondary-button" type="button" ${state.isCapturingScreenshot ? "disabled" : ""}>
+              ${state.isCapturingScreenshot ? "Taking..." : "Take snapshot"}
+            </button>
           </div>
-          ${renderAttachmentList(
-            draft.screenshots.map((screenshot) => screenshot.name),
-            "No screenshots captured."
-          )}
+          ${renderScreenshotList(draft.screenshots)}
         </section>
 
         <label>
@@ -357,6 +400,15 @@ function bindViewActions(): void {
     });
   });
 
+  viewContent?.querySelectorAll<HTMLButtonElement>("[data-delete-url]").forEach((button) => {
+    button.addEventListener("click", () => {
+      const url = button.dataset.deleteUrl;
+      if (url) {
+        void appStore.getState().deleteUrlLink(url);
+      }
+    });
+  });
+
   viewContent?.querySelectorAll<HTMLInputElement>("input[name='add-url-mode']").forEach((input) => {
     input.addEventListener("change", () => {
       appStore.getState().setAddUrlDraft({