Merge branch 'feature/perma-delete-button' into develop

backend/docs/docs.go

@@ -394,14 +394,14 @@ const docTemplate = `{
                 }
             },
             "delete": {
-                "description": "Delete a row from ` + "`" + `current` + "`" + ` by ID.",
+                "description": "Delete a row from ` + "`" + `current_archive` + "`" + ` by ID.",
                 "produces": [
                     "application/json"
                 ],
                 "tags": [
                     "shows"
                 ],
-                "summary": "Delete show",
+                "summary": "Delete archived show",
                 "parameters": [
                     {
                         "type": "integer",

backend/docs/swagger.json

@@ -392,14 +392,14 @@
                 }
             },
             "delete": {
-                "description": "Delete a row from `current` by ID.",
+                "description": "Delete a row from `current_archive` by ID.",
                 "produces": [
                     "application/json"
                 ],
                 "tags": [
                     "shows"
                 ],
-                "summary": "Delete show",
+                "summary": "Delete archived show",
                 "parameters": [
                     {
                         "type": "integer",

backend/docs/swagger.yaml

@@ -409,7 +409,7 @@ paths:
       - auth
   /api/v1/shows:
     delete:
-      description: Delete a row from `current` by ID.
+      description: Delete a row from `current_archive` by ID.
       parameters:
       - description: Show ID
         format: int64
@@ -434,7 +434,7 @@ paths:
           description: delete failed
           schema:
             $ref: '#/definitions/httpapi.HTTPError'
-      summary: Delete show
+      summary: Delete archived show
       tags:
       - shows
     get:

backend/internal/http/handlers.go

@@ -270,8 +270,8 @@ func listShowsHandler(svc episode.UseCases) gin.HandlerFunc {
 }
 
 // deleteShowHandler godoc
-// @Summary      Delete show
+// @Summary      Delete archived show
-// @Description  Delete a row from `current` by ID.
+// @Description  Delete a row from `current_archive` by ID.
 // @Tags         shows
 // @Produce      json
 // @Param        id  query     int64  true  "Show ID"

backend/internal/repo/episode_repo.go

@@ -290,7 +290,7 @@ func (r *pgxEpisodeRepo) MoveToArchive(ctx context.Context, ids []int64) (episod
 }
 
 func (r *pgxEpisodeRepo) Delete(ctx context.Context, id int64) error {
-	cmdTag, err := r.pool.Exec(ctx, `DELETE FROM current WHERE id = $1`, id)
+	cmdTag, err := r.pool.Exec(ctx, `DELETE FROM current_archive WHERE id = $1`, id)
 	if err != nil {
 		return err
 	}

backend/internal/repo/episode_repo_test.go

@@ -19,7 +19,7 @@ func TestPGXEpisodeRepo_Delete(t *testing.T) {
 	t.Run("not found", func(t *testing.T) {
 		fp := &fakePool{
 			execFn: func(ctx context.Context, sql string, args ...any) (pgconn.CommandTag, error) {
-				if sql != `DELETE FROM current WHERE id = $1` {
+				if sql != `DELETE FROM current_archive WHERE id = $1` {
 					t.Fatalf("unexpected sql: %s", sql)
 				}
 				return pgconn.NewCommandTag("DELETE 0"), nil
@@ -32,9 +32,13 @@ func TestPGXEpisodeRepo_Delete(t *testing.T) {
 	})
 
 	t.Run("ok", func(t *testing.T) {
-		var gotID int64
+		var (
+			gotSQL string
+			gotID  int64
+		)
 		fp := &fakePool{
 			execFn: func(ctx context.Context, sql string, args ...any) (pgconn.CommandTag, error) {
+				gotSQL = sql
 				gotID = args[0].(int64)
 				return pgconn.NewCommandTag("DELETE 1"), nil
 			},
@@ -43,6 +47,9 @@ func TestPGXEpisodeRepo_Delete(t *testing.T) {
 		if err := repo.Delete(context.Background(), 22); err != nil {
 			t.Fatalf("unexpected err: %v", err)
 		}
+		if gotSQL != `DELETE FROM current_archive WHERE id = $1` {
+			t.Fatalf("expected archive delete sql, got %s", gotSQL)
+		}
 		if gotID != 22 {
 			t.Fatalf("expected id 22, got %d", gotID)
 		}

frontend/package-lock.json

@@ -11,7 +11,8 @@
         "firebase": "^12.6.0",
         "react": "^19.1.1",
         "react-dom": "^19.1.1",
-        "react-router-dom": "^7.9.5"
+        "react-router-dom": "^7.9.5",
+        "react-snowfall": "^2.4.0"
       },
       "devDependencies": {
         "@eslint/js": "^9.36.0",
@@ -4215,6 +4216,12 @@
         "react": "^19.1.1"
       }
     },
+    "node_modules/react-fast-compare": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+      "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==",
+      "license": "MIT"
+    },
     "node_modules/react-refresh": {
       "version": "0.17.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
@@ -4263,6 +4270,19 @@
         "react-dom": ">=18"
       }
     },
+    "node_modules/react-snowfall": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/react-snowfall/-/react-snowfall-2.4.0.tgz",
+      "integrity": "sha512-KAPMiGnxt11PEgC2pTVrTQsvk5jt1kLUtG+ZamiKLphTZ7GiYT1Aa5kX6jp4jKWq1kqJHchnGT9CDm4g86A5Gg==",
+      "license": "MIT",
+      "dependencies": {
+        "react-fast-compare": "^3.2.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || 17.x || 18.x || 19.x",
+        "react-dom": "^16.8 || 17.x || 18.x || 19.x"
+      }
+    },
     "node_modules/require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",

frontend/package.json

@@ -15,7 +15,8 @@
     "firebase": "^12.6.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "react-router-dom": "^7.9.5"
+    "react-router-dom": "^7.9.5",
+    "react-snowfall": "^2.4.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.36.0",

frontend/src/App.tsx

@@ -9,6 +9,7 @@ import DebugOverlay from "./components/DebugOverlay";
 import AuthStatus from "./components/AuthStatus";
 import { useAuth } from "./auth/AuthProvider";
 import "./index.css";
+import Snowfall from "react-snowfall";
 
 const TIME_SYNC_OFF_THRESHOLD = 100;
 
@@ -29,6 +30,10 @@ export default function App() {
 
   return (
     <div className={`site ${open ? "sidebar-open" : ""}`}>
+      <Snowfall
+        snowflakeCount={140}
+        style={{ position: "fixed", width: "100vw", height: "100vh", pointerEvents: "none", zIndex: 2 }}
+      />
       {/* Top-left header (outside the card) */}
       <header className="site-header">
 

frontend/src/api/watchparty.ts

@@ -164,6 +164,22 @@ export async function createShow(payload: {
     });
 }
 
+export async function deleteArchiveShow(id: number, idToken: string) {
+    if (!idToken) {
+        throw new ApiError("Missing auth token for delete");
+    }
+    const url = `${API_ENDPOINT.v1.SHOWS}?id=${encodeURIComponent(id)}`;
+    await apiFetch<void>(url, {
+        method: "DELETE",
+        headers: {
+            "Authorization": `Bearer ${idToken}`,
+        },
+        timeoutMs: 10_000,
+        expect: "void",
+        logLabel: "delete archived show",
+    });
+}
+
 export async function archiveShow(id: number, idToken: string) {
     if (!idToken) {
         throw new ApiError("Missing auth token for archive");

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;

frontend/src/pages/ArchivePage.tsx

@@ -1,8 +1,8 @@
 import React from "react";
-import { fetchArchive } from "../api/watchparty";
+import { deleteArchiveShow, fetchArchive } from "../api/watchparty";
 import type { ArchiveItem } from "../api/types";
 import { useAuth } from "../auth/AuthProvider";
-import { toastError } from "../utils/toastBus";
+import { toastError, toastInfo } from "../utils/toastBus";
 import { logApiError } from "../utils/logger";
 
 type SortKey = "id" | "ep_num" | "ep_title" | "season_name" | "start_time" | "playback_length" | "date_created" | "date_archived";
@@ -16,11 +16,13 @@ function formatTimestamp(ts: string) {
 }
 
 export default function ArchivePage() {
-    const { enabled, idToken, isAdmin } = useAuth();
+    const { enabled, idToken, isAdmin, verifying } = useAuth();
     const [items, setItems] = React.useState<ArchiveItem[]>([]);
     const [loading, setLoading] = React.useState(true);
     const [error, setError] = React.useState<string | null>(null);
     const [sort, setSort] = React.useState<{ key: SortKey | null; dir: SortDir }>({ key: null, dir: null });
+    const [selectedId, setSelectedId] = React.useState<number | null>(null);
+    const [deletingId, setDeletingId] = React.useState<number | null>(null);
 
     const load = React.useCallback(async () => {
         if (!idToken) {
@@ -32,6 +34,7 @@ export default function ArchivePage() {
             setLoading(true);
             const data = await fetchArchive(idToken);
             setItems(data);
+            setSelectedId((prev) => (prev != null && data.some((it) => it.id === prev) ? prev : null));
         } catch (e: unknown) {
             const msg = e instanceof Error ? e.message : "アーカイブを取得できませんでした。";
             setError(msg);
@@ -95,6 +98,40 @@ export default function ArchivePage() {
         return "";
     };
 
+    const selectedItem = React.useMemo(
+        () => items.find((it) => it.id === selectedId) ?? null,
+        [items, selectedId],
+    );
+
+    const handleSelect = React.useCallback((id: number) => {
+        setSelectedId((prev) => (prev === id ? null : id));
+    }, []);
+
+    async function handleDeleteSelected() {
+        if (!selectedItem) return;
+        if (!enabled) {
+            toastError("認証が無効です", "管理者に確認してください");
+            return;
+        }
+        if (!idToken) {
+            toastError("サインインしてください", "削除には管理者サインインが必要です");
+            return;
+        }
+        try {
+            setDeletingId(selectedItem.id);
+            await deleteArchiveShow(selectedItem.id, idToken);
+            toastInfo("アーカイブを削除しました");
+            setItems((prev) => prev.filter((it) => it.id !== selectedItem.id));
+            setSelectedId((prev) => (prev === selectedItem.id ? null : prev));
+        } catch (e: unknown) {
+            const msg = e instanceof Error ? e.message : "削除に失敗しました。";
+            toastError("削除に失敗しました", msg);
+            logApiError("delete archived show", e);
+        } finally {
+            setDeletingId(null);
+        }
+    }
+
     if (!enabled) {
         return <div className="subtle">認証が無効です。</div>;
     }
@@ -152,7 +189,20 @@ export default function ArchivePage() {
                             </button>
                         </div>
                         {sortedItems.map((it) => (
-                            <div key={it.id} className="archive-row">
+                            <div
+                                key={it.id}
+                                className={`archive-row ${selectedId === it.id ? "selected" : ""}`}
+                                role="button"
+                                tabIndex={0}
+                                aria-pressed={selectedId === it.id}
+                                onClick={() => handleSelect(it.id)}
+                                onKeyDown={(e) => {
+                                    if (e.key === "Enter" || e.key === " ") {
+                                        e.preventDefault();
+                                        handleSelect(it.id);
+                                    }
+                                }}
+                            >
                                 <span>#{it.id}</span>
                                 <span>第{it.ep_num}話</span>
                                 <span>{it.ep_title}</span>
@@ -166,6 +216,40 @@ export default function ArchivePage() {
                     </div>
                 </div>
             )}
+
+            {selectedItem && (
+                <div className="selection-bar archive-detail-bar">
+                    <div className="selection-meta">
+                        <div className="selection-count">1件選択中</div>
+                        <div className="selection-title">
+                            第{selectedItem.ep_num}話：{selectedItem.ep_title}
+                        </div>
+                        <div className="selection-note">
+                            シーズン {selectedItem.season_name} ・ 開始 {selectedItem.start_time.slice(0, 5)} ・ 再生 {selectedItem.playback_length.slice(0, 5)} ・ ID #{selectedItem.id}
+                        </div>
+                        <div className="selection-note">
+                            アーカイブ日時 {formatTimestamp(selectedItem.date_archived)}
+                        </div>
+                        <div className="selection-note">
+                            {idToken
+                                ? (verifying ? "トークン確認中…" : "サインイン済み")
+                                : "削除には管理者サインインが必要です"}
+                        </div>
+                    </div>
+                    <div className="archive-detail-actions">
+                        <button className="link-btn" type="button" onClick={() => setSelectedId(null)}>
+                            選択をクリア
+                        </button>
+                        <button
+                            className="danger-btn"
+                            disabled={deletingId === selectedItem.id || verifying || !idToken}
+                            onClick={() => handleDeleteSelected().catch(() => { })}
+                        >
+                            {deletingId === selectedItem.id ? "削除中…" : "完全に削除"}
+                        </button>
+                    </div>
+                </div>
+            )}
         </div>
     );
 }