Add venue visibility toggles with localStorage persistence

Each venue on /venues can be toggled on/off; state persists in
localStorage. Hidden venues are filtered out of the event list,
with a notice linking back to the venues page to manage the setting.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

1 files changed, 26 insertions, 1 deletions

diff --git a/app/routes/venues.tsx b/app/routes/venues.tsx
index f2a7d54..9b8093a 100644
--- a/app/routes/venues.tsx
+++ b/app/routes/venues.tsx
@@ -2,6 +2,7 @@ import { useLoaderData, Link } from "react-router";
 import type { Route } from "./+types/venues";
 import { getVenues, getLastScrapePerVenue, type ScrapeLog } from "~/lib/db.server";
 import ScrapeButton from "~/components/ScrapeButton";
+import { useVenueFilter } from "~/lib/venue-filter";
 
 export async function loader(_: Route.LoaderArgs) {
   const venues = getVenues();
@@ -12,6 +13,8 @@ export async function loader(_: Route.LoaderArgs) {
 export default function Venues() {
   const { venues, scrapeStatus } = useLoaderData<typeof loader>();
   const statusMap = new Map<string, ScrapeLog>(scrapeStatus.map((s) => [s.venue_id, s]));
+  const { hiddenIds, toggle } = useVenueFilter();
+  const hiddenCount = hiddenIds.size;
 
   return (
     <div className="min-h-screen bg-gray-950 text-gray-100">
@@ -32,6 +35,9 @@ export default function Venues() {
             <h1 className="text-2xl font-bold">会場一覧</h1>
             <p className="mt-1 text-sm text-gray-400">
               現在 {venues.length} 会場が登録されています。
+              {hiddenCount > 0 && (
+                <span className="ml-2 text-yellow-400">{hiddenCount} 会場が非表示</span>
+              )}
             </p>
           </div>
           <ScrapeButton />
@@ -43,10 +49,15 @@ export default function Venues() {
           <div className="grid gap-3">
             {venues.map((v) => {
               const log = statusMap.get(v.id);
+              const hidden = hiddenIds.has(v.id);
               return (
                 <div
                   key={v.id}
-                  className="flex items-center gap-4 rounded-xl bg-gray-800/60 border border-gray-700/40 p-4"
+                  className={`flex items-center gap-4 rounded-xl border p-4 transition-opacity ${
+                    hidden
+                      ? "bg-gray-900/40 border-gray-800/40 opacity-50"
+                      : "bg-gray-800/60 border-gray-700/40"
+                  }`}
                 >
                   {/* 会場名 + エリア */}
                   <div className="flex-1 min-w-0">
@@ -83,6 +94,20 @@ export default function Venues() {
                     <span className="text-xs text-gray-600 whitespace-nowrap">未実行</span>
                   )}
 
+                  {/* 表示トグル */}
+                  <button
+                    onClick={() => toggle(v.id)}
+                    aria-label={hidden ? `${v.name}を表示する` : `${v.name}を非表示にする`}
+                    className={`relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-900 ${
+                      hidden ? "bg-gray-700" : "bg-indigo-600"
+                    }`}
+                  >
+                    <span
+                      className={`inline-block h-4 w-4 rounded-full bg-white shadow transition-transform ${
+                        hidden ? "translate-x-1" : "translate-x-6"
+                      }`}
+                    />
+                  </button>
                 </div>
               );
             })}