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, 20 insertions, 3 deletions

diff --git a/app/routes/events._index.tsx b/app/routes/events._index.tsx
index 890e0fd..33568df 100644
--- a/app/routes/events._index.tsx
+++ b/app/routes/events._index.tsx
@@ -5,6 +5,7 @@ import EventCard from "~/components/EventCard";
 import EventListRow from "~/components/EventListRow";
 import FilterBar from "~/components/FilterBar";
 import ScrapeButton from "~/components/ScrapeButton";
+import { useVenueFilter } from "~/lib/venue-filter";
 
 function defaultWindow() {
   const today = new Date();
@@ -41,6 +42,13 @@ export default function EventsIndex() {
   const { events, venues, areas, page, hasMore, date_from, date_to } = useLoaderData<typeof loader>();
   const [searchParams, setSearchParams] = useSearchParams();
   const view = (searchParams.get("view") ?? "card") as "card" | "list";
+  const { hiddenIds } = useVenueFilter();
+
+  const venueFiltered = searchParams.get("venue_id");
+  const visibleEvents = venueFiltered
+    ? events
+    : events.filter((e) => !hiddenIds.has(e.venue_id));
+  const hiddenEventCount = events.length - visibleEvents.length;
 
   function switchView(next: "card" | "list") {
     const next_params = new URLSearchParams(searchParams);
@@ -88,20 +96,29 @@ export default function EventsIndex() {
 
         <FilterBar venues={venues} areas={areas} defaultDateFrom={date_from} defaultDateTo={date_to} />
 
-        {events.length === 0 ? (
+        {hiddenEventCount > 0 && (
+          <p className="mt-3 text-xs text-gray-500">
+            {hiddenIds.size} 会場が非表示のため {hiddenEventCount} 件を除外中 —{" "}
+            <Link to="/venues" className="text-indigo-400 hover:text-indigo-300 underline">
+              会場一覧で変更
+            </Link>
+          </p>
+        )}
+
+        {visibleEvents.length === 0 ? (
           <div className="mt-16 text-center text-gray-500">
             <p className="text-lg">イベントが見つかりません</p>
             <p className="mt-2 text-sm">スクレイパーを実行してデータを取得してください: <code>npm run scrape</code></p>
           </div>
         ) : view === "list" ? (
           <div className="mt-6 flex flex-col gap-1.5">
-            {events.map((event) => (
+            {visibleEvents.map((event) => (
               <EventListRow key={event.id} event={event} />
             ))}
           </div>
         ) : (
           <div className="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-            {events.map((event) => (
+            {visibleEvents.map((event) => (
               <EventCard key={event.id} event={event} />
             ))}
           </div>