Allow deleting issue screenshots

src/main.ts

@@ -307,6 +307,7 @@ function renderScreenshotList(screenshots: ScreenshotAttachment[]): string {
             <figure class="screenshot-item">
               <img src="${screenshot.dataUrl}" alt="${escapeHtml(screenshot.name)}" />
               <figcaption>${escapeHtml(screenshot.name)}</figcaption>
+              <button class="danger-button compact-button" type="button" data-delete-screenshot="${screenshot.id}">Delete</button>
             </figure>
           `
         )
@@ -454,6 +455,15 @@ function bindViewActions(): void {
     void appStore.getState().captureScreenshot();
   });
 
+  viewContent?.querySelectorAll<HTMLButtonElement>("[data-delete-screenshot]").forEach((button) => {
+    button.addEventListener("click", () => {
+      const id = button.dataset.deleteScreenshot;
+      if (id) {
+        appStore.getState().deleteIssueScreenshot(id);
+      }
+    });
+  });
+
   viewContent?.querySelector<HTMLButtonElement>("#create-issue")?.addEventListener("click", () => {
     void appStore.getState().createIssue();
   });

src/store.ts

@@ -62,6 +62,7 @@ interface AppState {
   setAddUrlDraft: (draft: Partial<AddUrlDraft>) => void;
   setIssueDraft: (draft: Partial<Omit<IssueDraft, "screenshots" | "files">>) => void;
   setIssueFiles: (files: File[]) => void;
+  deleteIssueScreenshot: (id: string) => void;
   captureScreenshot: () => Promise<void>;
   createIssue: () => Promise<void>;
   refreshActiveTab: () => Promise<void>;
@@ -371,6 +372,13 @@ export const appStore = createStore<AppState>()((set, get) => ({
         files
       }
     })),
+  deleteIssueScreenshot: (id) =>
+    set((state) => ({
+      issueDraft: {
+        ...state.issueDraft,
+        screenshots: state.issueDraft.screenshots.filter((screenshot) => screenshot.id !== id)
+      }
+    })),
   captureScreenshot: async () => {
     set({ isCapturingScreenshot: true });
     setStatus(set, "Capturing screenshot...", "neutral", { autoClear: false });

src/styles.css

@@ -344,6 +344,11 @@ a.item-title:hover,
   color: #9f1d14;
 }
 
+.compact-button {
+  padding: 3px 6px;
+  font-size: 10px;
+}
+
 .secondary-button {
   border: 1px solid #9fb3c8;
   background: #eef4f9;
@@ -490,7 +495,7 @@ input[readonly] {
 
 .screenshot-item {
   display: grid;
-  grid-template-columns: 64px minmax(0, 1fr);
+  grid-template-columns: 64px minmax(0, 1fr) auto;
   align-items: center;
   gap: 7px;
   min-width: 0;
@@ -519,14 +524,22 @@ input[readonly] {
   white-space: nowrap;
 }
 
-.checkbox-row {
+.form-stack .checkbox-row {
   display: flex;
   align-items: center;
+  justify-content: flex-start;
   gap: 7px;
   color: #243b53;
   font-size: 12px;
 }
 
+.form-stack .checkbox-row input {
+  flex: 0 0 auto;
+  width: auto;
+  min-height: 0;
+  margin: 0;
+}
+
 .statusbar {
   display: flex;
   align-items: center;