nik/watch-party
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Nik Afiq 2025-12-19 22:34:45 +09:00
commit 5c088974d8
12 changed files with 173 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
backend/docs/docs.go
View File

@ -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",

4
backend/docs/swagger.json
View File

@ -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",

4
backend/docs/swagger.yaml
View File

@ -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:

4
backend/internal/http/handlers.go
View File

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

2
backend/internal/repo/episode_repo.go
View File

@ -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
}

11
backend/internal/repo/episode_repo_test.go
View File

@ -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)
}

22
frontend/package-lock.json generated
View File

@ -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",

3
frontend/package.json
View File

@ -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",

5
frontend/src/App.tsx
View File

@ -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">

16
frontend/src/api/watchparty.ts
View File

@ -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");

23
frontend/src/index.css
View File

@ -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;

92
frontend/src/pages/ArchivePage.tsx
View File

@ -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>
);
}