diff --git a/frontend/src/index.css b/frontend/src/index.css index d375809..20b2512 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -458,6 +458,39 @@ kbd { } .show-card .title { font-weight:800; } .show-card.selected { outline: 2px solid var(--accent); background: rgba(121,192,255,0.10); } +.selection-bar { + position: sticky; + bottom: 0; + margin-top: 12px; + padding: 12px 14px; + border-radius: 12px; + background: rgba(12,16,24,0.96); + border: 1px solid rgba(255,255,255,0.14); + box-shadow: 0 -8px 24px rgba(0,0,0,0.3); + display: flex; + align-items: center; + gap: 12px; + justify-content: space-between; +} +.selection-meta { display: grid; gap: 4px; min-width: 0; } +.selection-count { font-size: 12px; color: var(--subtle); font-weight: 700; } +.selection-title { font-weight: 800; } +.selection-note { font-size: 12px; color: var(--subtle); } +.danger-btn { + padding: 10px 16px; + border-radius: 10px; + border: 1px solid rgba(255,107,107,0.55); + background: linear-gradient(135deg, rgba(255,107,107,0.15), rgba(255,107,107,0.28)); + color: var(--text); + font-weight: 800; + cursor: pointer; + white-space: nowrap; +} +.danger-btn:hover { background: linear-gradient(135deg, rgba(255,107,107,0.25), rgba(255,107,107,0.35)); } +.danger-btn:disabled { + opacity: 0.5; + cursor: not-allowed; +} .form-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:center; } .input { diff --git a/frontend/src/pages/ShowsPage.tsx b/frontend/src/pages/ShowsPage.tsx index 25a3f53..9c1f82a 100644 --- a/frontend/src/pages/ShowsPage.tsx +++ b/frontend/src/pages/ShowsPage.tsx @@ -126,7 +126,7 @@ export default function ShowsPage() { }; }, []); - const current = useMemo(() => shows.find(s => s.id === selectedId) || null, [shows, selectedId]); + const selectedShow = useMemo(() => shows.find(s => s.id === selectedId) || null, [shows, selectedId]); async function submit() { setError(null); @@ -239,6 +239,7 @@ export default function ShowsPage() { toastInfo("エピソードを削除しました"); if (selectedId === showId) { setSelectedId(null); + setStartTime(""); } await loadShows(); } catch (e: unknown) { @@ -342,20 +343,18 @@ export default function ShowsPage() { key={s.id} className={`show-card ${selectedId === s.id ? "selected" : ""}`} onClick={() => { - setSelectedId(s.id); - setStartTime(s.start_time.slice(0, 5)); + setSelectedId((prev) => { + if (prev === s.id) { + setStartTime(""); + return null; + } + setStartTime(s.start_time.slice(0, 5)); + return s.id; + }); }} >