From b787ce4fc18987a887bbac1a65deb07c6dde64e1 Mon Sep 17 00:00:00 2001
From: Mark Malstrom <mark@malstrom.me>
Date: Wed, 4 Jun 2025 00:16:17 -0500
Subject: [PATCH 1/2] Add mobile filter dialog

---
 app/components/filters/Filters.tsx       |  8 ++++++--
 app/components/filters/MobileFilters.tsx | 20 ++++++++++++++++++++
 app/routes/_index/route.tsx              |  4 ++++
 3 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 app/components/filters/MobileFilters.tsx

diff --git a/app/components/filters/Filters.tsx b/app/components/filters/Filters.tsx
index fce34c3..b5b3dd4 100644
--- a/app/components/filters/Filters.tsx
+++ b/app/components/filters/Filters.tsx
@@ -1,9 +1,13 @@
 import { DisclosureGroup } from "react-aria-components";
 import * as Stars from "./Stars";
 
-export function Filters() {
+import type { ClassProps } from "~/lib/props";
+
+export function Filters(
+    { className = "sticky top-0 mx-20 hidden h-screen pt-10 lg:block" }: ClassProps = {},
+) {
     return (
-        <DisclosureGroup className="sticky top-0 mx-20 hidden h-screen pt-10 lg:block">
+        <DisclosureGroup className={className}>
             {/* TODO: Search */}
             {/* TODO: Tags */}
             <Stars.Filter />
diff --git a/app/components/filters/MobileFilters.tsx b/app/components/filters/MobileFilters.tsx
new file mode 100644
index 0000000..f59af77
--- /dev/null
+++ b/app/components/filters/MobileFilters.tsx
@@ -0,0 +1,20 @@
+import { Button, Dialog, DialogTrigger, Modal } from "react-aria-components";
+import { Filters } from "./Filters";
+
+export function MobileFilters() {
+    return (
+        <DialogTrigger>
+            <Button
+                className="font-serif-text rounded-lg border-2 border-black bg-amber-500 px-3 py-2 shadow-hard dark:bg-purple-600 lg:hidden"
+                slot="trigger"
+            >
+                Filters
+            </Button>
+            <Modal className="lg:hidden">
+                <Dialog className="fixed left-0 right-0 top-0 z-30 flex max-h-screen flex-col overflow-y-auto border-b-2 border-black bg-[#f9ecdf] p-6 shadow-hard-lg dark:bg-[#17191e] dark:border-white/50">
+                    <Filters className="pt-0" />
+                </Dialog>
+            </Modal>
+        </DialogTrigger>
+    );
+}
diff --git a/app/routes/_index/route.tsx b/app/routes/_index/route.tsx
index 075699d..4c8b2da 100644
--- a/app/routes/_index/route.tsx
+++ b/app/routes/_index/route.tsx
@@ -3,6 +3,7 @@ import { AnimatePresence, motion } from "motion/react";
 import { isRouteErrorResponse, useNavigate } from "react-router";
 import { Recommendation } from "~/components/Recommendation";
 import { Filters } from "~/components/filters/Filters";
+import { MobileFilters } from "~/components/filters/MobileFilters";
 import { getCollection } from "~/lib/content";
 import { stores } from "~/lib/stores.client";
 import { filterRecs, Stars } from "./utilities";
@@ -72,6 +73,9 @@ export default function Component({ loaderData }: Route.ComponentProps) {
             <div className="noise" />
             <div className="noise-underlay" />
             <h1 className="font-serif-display text-5xl font-bold sm:text-6xl">Recommendations</h1>
+            <div className="py-4 lg:hidden">
+                <MobileFilters />
+            </div>
             <div className="block sm:grid-cols-[3fr_2fr] lg:grid">
                 <div className="flex flex-col items-start gap-7 py-10">
                     <AnimatePresence>

From ce14f9baea01a1f92fbadbb508adc68ddac4fd78 Mon Sep 17 00:00:00 2001
From: Mark Malstrom <mark@malstrom.me>
Date: Wed, 4 Jun 2025 00:28:55 -0500
Subject: [PATCH 2/2] Refine mobile filter controls

---
 app/components/filters/MobileFilters.tsx | 34 ++++++++++++++----------
 app/routes/_index/route.tsx              | 12 +++++----
 2 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/app/components/filters/MobileFilters.tsx b/app/components/filters/MobileFilters.tsx
index f59af77..fc9104e 100644
--- a/app/components/filters/MobileFilters.tsx
+++ b/app/components/filters/MobileFilters.tsx
@@ -1,20 +1,26 @@
-import { Button, Dialog, DialogTrigger, Modal } from "react-aria-components";
+import { Button, Disclosure, DisclosurePanel } from "react-aria-components";
+import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/solid";
 import { Filters } from "./Filters";
 
 export function MobileFilters() {
     return (
-        <DialogTrigger>
-            <Button
-                className="font-serif-text rounded-lg border-2 border-black bg-amber-500 px-3 py-2 shadow-hard dark:bg-purple-600 lg:hidden"
-                slot="trigger"
-            >
-                Filters
-            </Button>
-            <Modal className="lg:hidden">
-                <Dialog className="fixed left-0 right-0 top-0 z-30 flex max-h-screen flex-col overflow-y-auto border-b-2 border-black bg-[#f9ecdf] p-6 shadow-hard-lg dark:bg-[#17191e] dark:border-white/50">
-                    <Filters className="pt-0" />
-                </Dialog>
-            </Modal>
-        </DialogTrigger>
+        <Disclosure className="relative lg:hidden">
+            {({ open }) => (
+                <>
+                    <Button
+                        aria-label={open ? "Hide filters" : "Show filters"}
+                        className="rounded-md p-1 text-black focus-visible:outline-0 dark:text-white"
+                        slot="trigger"
+                    >
+                        {open
+                            ? <XMarkIcon className="h-8 w-8" />
+                            : <Bars3Icon className="h-8 w-8" />}
+                    </Button>
+                    <DisclosurePanel className="absolute left-0 right-0 top-full z-10 border-b-2 border-black bg-[#f9ecdf] p-6 shadow-hard-lg dark:border-white/50 dark:bg-[#17191e]">
+                        <Filters className="pt-0" />
+                    </DisclosurePanel>
+                </>
+            )}
+        </Disclosure>
     );
 }
diff --git a/app/routes/_index/route.tsx b/app/routes/_index/route.tsx
index 4c8b2da..200d4b3 100644
--- a/app/routes/_index/route.tsx
+++ b/app/routes/_index/route.tsx
@@ -69,14 +69,16 @@ export async function clientLoader({ request, serverLoader }: Route.ClientLoader
 
 export default function Component({ loaderData }: Route.ComponentProps) {
     return (
-        <div className="noise-container p-6">
+        <div className="noise-container">
             <div className="noise" />
             <div className="noise-underlay" />
-            <h1 className="font-serif-display text-5xl font-bold sm:text-6xl">Recommendations</h1>
-            <div className="py-4 lg:hidden">
+            <header className="sticky top-0 z-20 flex items-center justify-between bg-[#f9ecdf] p-6 dark:bg-[#17191e]">
+                <h1 className="font-serif-display text-5xl font-bold sm:text-6xl">
+                    Recommendations
+                </h1>
                 <MobileFilters />
-            </div>
-            <div className="block sm:grid-cols-[3fr_2fr] lg:grid">
+            </header>
+            <div className="block p-6 sm:grid-cols-[3fr_2fr] lg:grid">
                 <div className="flex flex-col items-start gap-7 py-10">
                     <AnimatePresence>
                         {loaderData.filteredRecs.map((rec) => (