From 5e735c2989624e65582d2832a4ae729c3efb61e8 Mon Sep 17 00:00:00 2001
From: Nik Afiq <nik.afiq98@ymail.com>
Date: Fri, 19 Dec 2025 22:28:40 +0900
Subject: [PATCH] Added delete button on frontend in Archive page

---
 frontend/src/index.css             | 23 +++++++++++++++++++++++
 frontend/src/pages/ArchivePage.tsx |  2 +-
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index f5b7997..f722582 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -543,9 +543,20 @@ kbd {
 .archive-row {
   background: rgba(255,255,255,0.03);
   border: 1px solid rgba(255,255,255,0.05);
+  cursor: pointer;
+  transition: background 120ms ease, border-color 120ms ease, box-shadow 160ms ease;
 }
 .archive-row:hover { background: rgba(255,255,255,0.05); }
 .archive-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.archive-row.selected {
+  border-color: rgba(121,192,255,0.7);
+  background: linear-gradient(135deg, rgba(121,192,255,0.10), rgba(121,192,255,0.04));
+  box-shadow: 0 10px 28px rgba(121,192,255,0.14);
+}
+.archive-row:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
 @media (max-width: 820px) {
   .archive-header,
   .archive-row {
@@ -558,6 +569,18 @@ kbd {
   .archive-row span:nth-child(4) { grid-column: span 2; }
   .archive-table { min-width: 100%; }
 }
+.archive-detail-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+.archive-detail-bar {
+  position: sticky;
+  bottom: 10px;
+  z-index: 5;
+}
 
 .scrape-card {
   padding: 14px;
diff --git a/frontend/src/pages/ArchivePage.tsx b/frontend/src/pages/ArchivePage.tsx
index b445125..7a93449 100644
--- a/frontend/src/pages/ArchivePage.tsx
+++ b/frontend/src/pages/ArchivePage.tsx
@@ -122,7 +122,7 @@ export default function ArchivePage() {
             await deleteArchiveShow(selectedItem.id, idToken);
             toastInfo("アーカイブを削除しました");
             setItems((prev) => prev.filter((it) => it.id !== selectedItem.id));
-            setSelectedId(null);
+            setSelectedId((prev) => (prev === selectedItem.id ? null : prev));
         } catch (e: unknown) {
             const msg = e instanceof Error ? e.message : "削除に失敗しました。";
             toastError("削除に失敗しました", msg);