From f12476344a9356323e393d9ecdb0ebda3af25206 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Henrik=20Str=C3=B8m-Andersen?= <hestro@stud.ntnu.no>
Date: Wed, 11 Nov 2026 22:21:11 +0100
Subject: [PATCH 1/6] feat: add drawer shadcn component

---
 frontend/app/components/ui/Drawer.tsx | 225 ++++++++++++++++++++++++++
 1 file changed, 225 insertions(+)
 create mode 100644 frontend/app/components/ui/Drawer.tsx

diff --git a/frontend/app/components/ui/Drawer.tsx b/frontend/app/components/ui/Drawer.tsx
new file mode 100644
index 00000000..d39d8a81
--- /dev/null
+++ b/frontend/app/components/ui/Drawer.tsx
@@ -0,0 +1,225 @@
+import * as React from "react";
+import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer";
+import { cn } from "cn";
+
+type DrawerContextProps = {
+  hasSnapPoints: boolean;
+  modal: DrawerPrimitive.Root.Props["modal"];
+  showSwipeHandle: boolean;
+  swipeDirection: NonNullable<DrawerPrimitive.Root.Props["swipeDirection"]>;
+};
+
+const DrawerContext = React.createContext<DrawerContextProps | null>(null);
+
+function useDrawer() {
+  const context = React.useContext(DrawerContext);
+
+  if (!context) {
+    throw new Error("useDrawer must be used within a Drawer.");
+  }
+
+  return context;
+}
+
+function Drawer({
+  modal = true,
+  showSwipeHandle = false,
+  snapPoints,
+  swipeDirection = "down",
+  ...props
+}: DrawerPrimitive.Root.Props & {
+  showSwipeHandle?: boolean;
+}) {
+  const hasSnapPoints = snapPoints != null && snapPoints.length > 0;
+  const contextValue = React.useMemo(
+    () => ({ hasSnapPoints, modal, showSwipeHandle, swipeDirection }),
+    [hasSnapPoints, modal, showSwipeHandle, swipeDirection],
+  );
+
+  return (
+    <DrawerContext.Provider value={contextValue}>
+      <DrawerPrimitive.Root
+        data-slot="drawer"
+        modal={modal}
+        snapPoints={snapPoints}
+        swipeDirection={swipeDirection}
+        {...props}
+      />
+    </DrawerContext.Provider>
+  );
+}
+
+function DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props) {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
+}
+
+function DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props) {
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
+}
+
+function DrawerClose({ ...props }: DrawerPrimitive.Close.Props) {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
+}
+
+function DrawerOverlay({
+  className,
+  ...props
+}: DrawerPrimitive.Backdrop.Props) {
+  return (
+    <DrawerPrimitive.Backdrop
+      data-slot="drawer-overlay"
+      className={cn(
+        "fixed inset-0 z-50 min-h-dvh bg-black/10 opacity-[max(var(--drawer-overlay-min-opacity,0),calc(1-var(--drawer-swipe-progress)))] transition-opacity duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] select-none data-ending-style:pointer-events-none data-ending-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-snap-points:[--drawer-overlay-min-opacity:0.5] data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-xs supports-[-webkit-touch-callout:none]:absolute",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DrawerSwipeHandle({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-swipe-handle"
+      aria-hidden="true"
+      className={cn(
+        "relative z-10 flex shrink-0 cursor-grab transition-opacity duration-200 group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-[swipe-axis=x]/drawer-popup:h-full group-data-[swipe-axis=x]/drawer-popup:w-3 group-data-[swipe-axis=x]/drawer-popup:items-center group-data-[swipe-axis=y]/drawer-popup:h-3 group-data-[swipe-axis=y]/drawer-popup:w-full group-data-[swipe-axis=y]/drawer-popup:justify-center group-data-[swipe-direction=down]/drawer-popup:items-end group-data-[swipe-direction=left]/drawer-popup:order-last group-data-[swipe-direction=left]/drawer-popup:justify-start group-data-[swipe-direction=right]/drawer-popup:justify-end group-data-[swipe-direction=up]/drawer-popup:order-last group-data-[swipe-direction=up]/drawer-popup:items-start after:block after:shrink-0 after:rounded-full after:bg-muted group-data-[swipe-axis=x]/drawer-popup:after:h-24 group-data-[swipe-axis=x]/drawer-popup:after:w-1 group-data-[swipe-axis=y]/drawer-popup:after:h-1 group-data-[swipe-axis=y]/drawer-popup:after:w-24 active:cursor-grabbing",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DrawerContent({
+  className,
+  children,
+  ...props
+}: DrawerPrimitive.Popup.Props) {
+  const { hasSnapPoints, modal, showSwipeHandle, swipeDirection } = useDrawer();
+  const swipeAxis =
+    swipeDirection === "down" || swipeDirection === "up" ? "y" : "x";
+
+  return (
+    <DrawerPortal data-slot="drawer-portal">
+      {modal === true && (
+        <DrawerOverlay data-snap-points={hasSnapPoints ? "" : undefined} />
+      )}
+      <DrawerPrimitive.Viewport
+        data-slot="drawer-viewport"
+        data-modal={modal}
+        className="pointer-events-none fixed inset-0 z-50 select-none data-[modal=true]:pointer-events-auto"
+      >
+        <DrawerPrimitive.Popup
+          data-slot="drawer-popup"
+          data-swipe-axis={swipeAxis}
+          data-snap-points={hasSnapPoints ? "" : undefined}
+          className={cn(
+            // Base.
+            "group/drawer-popup pointer-events-auto fixed z-50 m-(--drawer-inset,0px) flex h-(--drawer-content-height) max-h-(--drawer-content-max-height,none) min-h-0 w-(--drawer-content-width,auto) transform-[translate3d(var(--translate-x,0px),var(--translate-y,0px),0)_scale(var(--stack-scale))] flex-col bg-popover text-sm text-popover-foreground transition-[transform,height,opacity,filter] duration-450 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform outline-none select-none [interpolate-size:allow-keywords] data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=down]:border-t data-[swipe-direction=left]:rounded-r-xl data-[swipe-direction=left]:border-r data-[swipe-direction=right]:rounded-l-xl data-[swipe-direction=right]:border-l data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:border-b",
+            // Nested.
+            "data-nested-drawer-open:overflow-hidden data-nested-drawer-open:brightness-95",
+            // Bleed.
+            "after:pointer-events-none after:absolute after:bg-(--drawer-bleed-background,var(--color-popover)) data-[swipe-axis=x]:after:inset-y-0 data-[swipe-axis=x]:after:w-(--bleed) data-[swipe-axis=y]:after:inset-x-0 data-[swipe-axis=y]:after:h-(--bleed) data-[swipe-direction=down]:after:top-full data-[swipe-direction=left]:after:right-full data-[swipe-direction=right]:after:left-full data-[swipe-direction=up]:after:bottom-full",
+            // Sizing.
+            "[--drawer-content-height:var(--drawer-height,auto)] data-[swipe-axis=x]:[--drawer-content-width:75%] data-[swipe-axis=y]:[--drawer-content-max-height:calc(100dvh-6rem)] data-[swipe-axis=y]:data-snap-points:[--drawer-content-height:100dvh] data-[swipe-axis=x]:sm:[--drawer-content-width:24rem]",
+            // Stack.
+            "[--bleed:3rem] [--peek:1rem] [--stack-height:var(--drawer-frontmost-height,var(--drawer-height,0px))] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-scale-base:max(0,calc(1-(var(--nested-drawers)*var(--stack-step))))] [--stack-scale:clamp(0,calc(var(--stack-scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--stack-shrink:calc(1-var(--stack-scale))] [--stack-step:0.05]",
+            // Transitions.
+            "data-ending-style:transform-(--closed-transform) data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-nested-drawer-swiping:duration-0 data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-starting-style:transform-(--closed-transform) data-swiping:duration-0 data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)]",
+            // Axis: y.
+            "data-[swipe-axis=y]:inset-x-0 data-[swipe-axis=y]:data-nested-drawer-open:h-(--stack-height)",
+            // Axis: x.
+            "data-[swipe-axis=x]:inset-y-0 data-[swipe-axis=x]:flex-row",
+            // Direction: down.
+            "data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:origin-bottom data-[swipe-direction=down]:[--closed-transform:translate3d(0,calc(100%+var(--drawer-inset,0px)+2px),0)] data-[swipe-direction=down]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--stack-shrink)*var(--stack-height)))]",
+            // Direction: up.
+            "data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:origin-top data-[swipe-direction=up]:[--closed-transform:translate3d(0,calc(-100%-var(--drawer-inset,0px)-2px),0)] data-[swipe-direction=up]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)+var(--stack-peek-offset)+(var(--stack-shrink)*var(--stack-height)))]",
+            // Direction: left.
+            "data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:origin-left data-[swipe-direction=left]:[--closed-transform:translate3d(calc(-100%-var(--drawer-inset,0px)-2px),0,0)] data-[swipe-direction=left]:[--translate-x:calc(var(--drawer-swipe-movement-x)+var(--stack-peek-offset)+(var(--stack-shrink)*100%))]",
+            // Direction: right.
+            "data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:origin-right data-[swipe-direction=right]:[--closed-transform:translate3d(calc(100%+var(--drawer-inset,0px)+2px),0,0)] data-[swipe-direction=right]:[--translate-x:calc(var(--drawer-swipe-movement-x)-var(--stack-peek-offset)-(var(--stack-shrink)*100%))]",
+            className,
+          )}
+          {...props}
+        >
+          {showSwipeHandle && <DrawerSwipeHandle />}
+          <DrawerPrimitive.Content
+            data-slot="drawer-content"
+            className={cn(
+              "flex min-h-0 flex-1 flex-col overflow-hidden overscroll-contain rounded-[inherit] transition-opacity duration-300 ease-[cubic-bezier(0.45,1.005,0,1.005)] select-text group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-swiping/drawer-popup:select-none",
+            )}
+          >
+            {children}
+          </DrawerPrimitive.Content>
+        </DrawerPrimitive.Popup>
+      </DrawerPrimitive.Viewport>
+    </DrawerPortal>
+  );
+}
+
+function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn(
+        "flex shrink-0 flex-col gap-0.5 p-4 pb-0 group-data-[swipe-axis=y]/drawer-popup:text-center md:gap-0.5 md:text-left",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-footer"
+      className={cn("mt-auto flex shrink-0 flex-col gap-2 p-4 pt-0", className)}
+      {...props}
+    />
+  );
+}
+
+function DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) {
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn(
+        "font-heading text-base font-medium text-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DrawerDescription({
+  className,
+  ...props
+}: DrawerPrimitive.Description.Props) {
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn("text-sm text-balance text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerSwipeHandle,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+};

From 7fda962c88fa40c65b6b6df8e9604b40bf5134bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Henrik=20Str=C3=B8m-Andersen?= <hestro@stud.ntnu.no>
Date: Wed, 11 Nov 2026 23:49:48 +0100
Subject: [PATCH 2/6] feat: add useIsMobile hook

Add a hook that returns whether the viewport is below the md breakpoint and updates on resize
---
 frontend/app/hooks/useIsMobile.ts | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)
 create mode 100644 frontend/app/hooks/useIsMobile.ts

diff --git a/frontend/app/hooks/useIsMobile.ts b/frontend/app/hooks/useIsMobile.ts
new file mode 100644
index 00000000..791191a6
--- /dev/null
+++ b/frontend/app/hooks/useIsMobile.ts
@@ -0,0 +1,26 @@
+import { useSyncExternalStore } from "react";
+
+// Based on a known useSyncExternalStore + matchMedia pattern:
+// https://www.epicreact.dev/use-sync-external-store-demystified-for-practical-react-development-w5ac0#:~:text=computing%20it%20unnecessarily.-,Bonus,-%3A%20Reusable%20useMediaQuery%20Hook
+function makeMediaQueryStore(mediaQuery: string) {
+  function getSnapshot() {
+    return window.matchMedia(mediaQuery).matches;
+  }
+
+  function subscribe(onChange: () => void) {
+    const mediaQueryList = window.matchMedia(mediaQuery);
+    mediaQueryList.addEventListener("change", onChange);
+    return () => {
+      mediaQueryList.removeEventListener("change", onChange);
+    };
+  }
+
+  return function useMediaQuery() {
+    return useSyncExternalStore(subscribe, getSnapshot);
+  };
+}
+
+// Below Tailwinds md (768px) breakpoint
+const useIsMobile = makeMediaQueryStore("(max-width: 767px)");
+
+export { useIsMobile };

From e7c6b8eb0e7e518a61a262f5979e2fa80f848afc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Henrik=20Str=C3=B8m-Andersen?= <hestro@stud.ntnu.no>
Date: Wed, 11 Nov 2026 23:51:06 +0100
Subject: [PATCH 3/6] refactor: move title and reset out of BookFilters

Remove the heading, the reset button and the clearFilters logic from BookFilters, so it only renders the filter inputs. The drawer in SearchBar now provides the title and the reset button
---
 .../books/BookFilters/BookFilters.tsx         | 276 ++++++++----------
 1 file changed, 121 insertions(+), 155 deletions(-)

diff --git a/frontend/app/components/books/BookFilters/BookFilters.tsx b/frontend/app/components/books/BookFilters/BookFilters.tsx
index 790a7bbc..c1b48ce1 100644
--- a/frontend/app/components/books/BookFilters/BookFilters.tsx
+++ b/frontend/app/components/books/BookFilters/BookFilters.tsx
@@ -1,6 +1,5 @@
-import { Button } from "~/components/ui/Button";
 import { useSearchParams } from "react-router";
-import { FILTER_KEYS, useBookSearchParams } from "~/hooks/useBookSearchParams";
+import { useBookSearchParams } from "~/hooks/useBookSearchParams";
 import { useBookFilters } from "~/hooks/useBookFilters";
 import {
   Combobox,
@@ -24,162 +23,129 @@ function BookFilters() {
   const { genres, languages, bookFormats } = useBookFilters();
   const genresAnchor = useComboboxAnchor();
 
-  const hasActiveFilters = Object.values(filters).some(Boolean);
-
-  const clearFilters = () => {
-    setSearchParams((searchParams) => {
-      FILTER_KEYS.forEach((key) => searchParams.delete(key));
-
-      // Reset the page to 1 when clearing filters.
-      // A missing "page" search param means page 1
-      searchParams.delete("page");
-
-      return searchParams;
-    });
-  };
-
   return (
-    <section className="flex flex-col gap-4">
-      <header className="flex items-center justify-between">
-        <h2 id="filter-books-heading" className="text-lg font-bold">
-          Filter Books
-        </h2>
-        <Button
-          type="button"
-          variant="link"
-          onClick={clearFilters}
-          disabled={!hasActiveFilters}
-          className="text-foreground hover:text-foreground/85"
+    <ul className="flex flex-col gap-4">
+      <li className="flex flex-col gap-2">
+        <label htmlFor="genres" className="flex items-center gap-2">
+          Genres
+        </label>
+        <Combobox
+          multiple
+          items={genres}
+          value={filters.genres ?? []}
+          onValueChange={(selected) => {
+            setSearchParams((searchParams) => {
+              searchParams.delete("genres");
+              selected.forEach((genre) => searchParams.append("genres", genre));
+              searchParams.delete("page");
+              return searchParams;
+            });
+          }}
         >
-          Reset
-        </Button>
-      </header>
-
-      <ul className="flex flex-col gap-4">
-        <li className="flex flex-col gap-2">
-          <label htmlFor="genres" className="flex items-center gap-2">
-            Genres
-          </label>
-          <Combobox
-            multiple
-            items={genres}
-            value={filters.genres ?? []}
-            onValueChange={(selected) => {
-              setSearchParams((searchParams) => {
-                searchParams.delete("genres");
-                selected.forEach((genre) =>
-                  searchParams.append("genres", genre),
-                );
-                searchParams.delete("page");
-                return searchParams;
-              });
-            }}
-          >
-            <ComboboxChips ref={genresAnchor}>
-              <ComboboxValue>
-                {(filters.genres ?? []).map((genre) => (
-                  <ComboboxChip key={genre}>{genre}</ComboboxChip>
-                ))}
-              </ComboboxValue>
-              <ComboboxChipsInput
-                id="genres"
-                placeholder={
-                  filters.genres?.length ? undefined : "Search genres..."
-                }
-              />
-            </ComboboxChips>
-            <ComboboxContent anchor={genresAnchor}>
-              <ComboboxEmpty>No genres found.</ComboboxEmpty>
-              <ComboboxList>
-                {(genre: string) => (
-                  <ComboboxItem key={genre} value={genre}>
-                    {genre}
-                  </ComboboxItem>
-                )}
-              </ComboboxList>
-            </ComboboxContent>
-          </Combobox>
-        </li>
-        <li className="flex flex-col gap-2">
-          <label htmlFor="language" className="flex items-center gap-2">
-            Language
-          </label>
-          <Combobox
-            items={languages}
-            value={filters.language ?? null}
-            onValueChange={(language: string | null) => {
-              setSearchParams((searchParams) => {
-                if (language) {
-                  searchParams.set("language", language);
-                } else {
-                  searchParams.delete("language");
-                }
-                searchParams.delete("page");
-                return searchParams;
-              });
-            }}
-          >
-            <ComboboxInput
-              id="language"
-              placeholder="Search languages..."
-              showClear
-            />
-            <ComboboxContent>
-              <ComboboxEmpty>No languages found.</ComboboxEmpty>
-              <ComboboxList>
-                {(language: string) => (
-                  <ComboboxItem key={language} value={language}>
-                    {language}
-                  </ComboboxItem>
-                )}
-              </ComboboxList>
-            </ComboboxContent>
-          </Combobox>
-        </li>
-        <li className="flex flex-col gap-2">
-          <label htmlFor="bookFormat" className="flex items-center gap-2">
-            Book format
-          </label>
-          <Combobox
-            items={bookFormats}
-            value={filters.bookFormat ?? null}
-            onValueChange={(bookFormat: string | null) => {
-              setSearchParams((searchParams) => {
-                if (bookFormat) {
-                  searchParams.set("bookFormat", bookFormat);
-                } else {
-                  searchParams.delete("bookFormat");
-                }
-                searchParams.delete("page");
-                return searchParams;
-              });
-            }}
-          >
-            <ComboboxInput
-              id="bookFormat"
-              placeholder="Search book formats..."
-              showClear
+          <ComboboxChips ref={genresAnchor}>
+            <ComboboxValue>
+              {(filters.genres ?? []).map((genre) => (
+                <ComboboxChip key={genre}>{genre}</ComboboxChip>
+              ))}
+            </ComboboxValue>
+            <ComboboxChipsInput
+              id="genres"
+              placeholder={
+                filters.genres?.length ? undefined : "Search genres..."
+              }
             />
-            <ComboboxContent>
-              <ComboboxEmpty>No book formats found.</ComboboxEmpty>
-              <ComboboxList>
-                {(bookFormat: string) => (
-                  <ComboboxItem key={bookFormat} value={bookFormat}>
-                    {bookFormat}
-                  </ComboboxItem>
-                )}
-              </ComboboxList>
-            </ComboboxContent>
-          </Combobox>
-        </li>
-        <li className="flex flex-col gap-2">
-          <MinRatingsFilter />
-        </li>
-        <li>
-          <PagesFilter />
-        </li>
-      </ul>
-    </section>
+          </ComboboxChips>
+          <ComboboxContent anchor={genresAnchor}>
+            <ComboboxEmpty>No genres found.</ComboboxEmpty>
+            <ComboboxList>
+              {(genre: string) => (
+                <ComboboxItem key={genre} value={genre}>
+                  {genre}
+                </ComboboxItem>
+              )}
+            </ComboboxList>
+          </ComboboxContent>
+        </Combobox>
+      </li>
+      <li className="flex flex-col gap-2">
+        <label htmlFor="language" className="flex items-center gap-2">
+          Language
+        </label>
+        <Combobox
+          items={languages}
+          value={filters.language ?? null}
+          onValueChange={(language: string | null) => {
+            setSearchParams((searchParams) => {
+              if (language) {
+                searchParams.set("language", language);
+              } else {
+                searchParams.delete("language");
+              }
+              searchParams.delete("page");
+              return searchParams;
+            });
+          }}
+        >
+          <ComboboxInput
+            id="language"
+            placeholder="Search languages..."
+            showClear
+          />
+          <ComboboxContent>
+            <ComboboxEmpty>No languages found.</ComboboxEmpty>
+            <ComboboxList>
+              {(language: string) => (
+                <ComboboxItem key={language} value={language}>
+                  {language}
+                </ComboboxItem>
+              )}
+            </ComboboxList>
+          </ComboboxContent>
+        </Combobox>
+      </li>
+      <li className="flex flex-col gap-2">
+        <label htmlFor="bookFormat" className="flex items-center gap-2">
+          Book format
+        </label>
+        <Combobox
+          items={bookFormats}
+          value={filters.bookFormat ?? null}
+          onValueChange={(bookFormat: string | null) => {
+            setSearchParams((searchParams) => {
+              if (bookFormat) {
+                searchParams.set("bookFormat", bookFormat);
+              } else {
+                searchParams.delete("bookFormat");
+              }
+              searchParams.delete("page");
+              return searchParams;
+            });
+          }}
+        >
+          <ComboboxInput
+            id="bookFormat"
+            placeholder="Search book formats..."
+            showClear
+          />
+          <ComboboxContent>
+            <ComboboxEmpty>No book formats found.</ComboboxEmpty>
+            <ComboboxList>
+              {(bookFormat: string) => (
+                <ComboboxItem key={bookFormat} value={bookFormat}>
+                  {bookFormat}
+                </ComboboxItem>
+              )}
+            </ComboboxList>
+          </ComboboxContent>
+        </Combobox>
+      </li>
+      <li className="flex flex-col gap-2">
+        <MinRatingsFilter />
+      </li>
+      <li>
+        <PagesFilter />
+      </li>
+    </ul>
   );
 }
 

From 50e47a831e8e2a3627e2a064ae50e9f60053e1e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Henrik=20Str=C3=B8m-Andersen?= <hestro@stud.ntnu.no>
Date: Wed, 11 Nov 2026 23:51:54 +0100
Subject: [PATCH 4/6] feat: use drawer instead of popover for book filters

---
 .../components/books/SearchBar/SearchBar.tsx  | 90 +++++++++++++++----
 1 file changed, 74 insertions(+), 16 deletions(-)

diff --git a/frontend/app/components/books/SearchBar/SearchBar.tsx b/frontend/app/components/books/SearchBar/SearchBar.tsx
index 6225530e..dfd84fdd 100644
--- a/frontend/app/components/books/SearchBar/SearchBar.tsx
+++ b/frontend/app/components/books/SearchBar/SearchBar.tsx
@@ -11,13 +11,19 @@ import {
 import { Button } from "~/components/ui/Button";
 import { Badge } from "~/components/ui/Badge";
 import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "~/components/ui/Popover";
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+  DrawerDescription,
+  DrawerFooter,
+} from "~/components/ui/Drawer";
 import { useSearchParams } from "react-router";
 import { useDebounce } from "~/hooks/useDebounce";
-import { useBookSearchParams } from "~/hooks/useBookSearchParams";
+import { FILTER_KEYS, useBookSearchParams } from "~/hooks/useBookSearchParams";
+import { useIsMobile } from "~/hooks/useIsMobile";
 
 const SEARCH_DEBOUNCE_MS = 500;
 
@@ -33,6 +39,8 @@ function SearchBar({ resultCount }: SearchBarProps) {
   const debouncedQuery = useDebounce(inputField, SEARCH_DEBOUNCE_MS);
   const newQueryFromInputRef = useRef(false);
 
+  const isMobile = useIsMobile();
+
   useEffect(() => {
     if (debouncedQuery !== inputField || debouncedQuery === query) {
       return;
@@ -63,6 +71,18 @@ function SearchBar({ resultCount }: SearchBarProps) {
     (value) => value !== undefined,
   ).length;
 
+  const clearFilters = () => {
+    setSearchParams((searchParams) => {
+      FILTER_KEYS.forEach((key) => searchParams.delete(key));
+
+      // Reset the page to 1 when clearing filters.
+      // A missing "page" search param means page 1
+      searchParams.delete("page");
+
+      return searchParams;
+    });
+  };
+
   const filtersDescription = `${filtersCount} ${filtersCount === 1 ? "filter" : "filters"} active`;
 
   return (
@@ -94,8 +114,11 @@ function SearchBar({ resultCount }: SearchBarProps) {
         )}
       </InputGroup>
 
-      <Popover>
-        <PopoverTrigger
+      <Drawer
+        showSwipeHandle={isMobile}
+        swipeDirection={isMobile ? "down" : "right"}
+      >
+        <DrawerTrigger
           render={
             <Button
               type="button"
@@ -115,15 +138,50 @@ function SearchBar({ resultCount }: SearchBarProps) {
               {filtersCount}
             </Badge>
           )}
-        </PopoverTrigger>
-        <PopoverContent
-          align="end"
-          className="w-80"
-          aria-labelledby="filter-books-heading"
-        >
-          <BookFilters />
-        </PopoverContent>
-      </Popover>
+        </DrawerTrigger>
+
+        <DrawerContent>
+          <DrawerHeader className="flex-row items-center justify-between">
+            <DrawerTitle className="font-bold">Filter books</DrawerTitle>
+            <Button
+              type="button"
+              variant="link"
+              onClick={clearFilters}
+              disabled={filtersCount === 0}
+              className="text-foreground hover:text-foreground/85"
+            >
+              Reset
+            </Button>
+          </DrawerHeader>
+
+          <section className="flex-1 overflow-y-auto p-4">
+            <BookFilters />
+          </section>
+
+          <DrawerFooter>
+            <DrawerDescription aria-live="polite">
+              {filtersDescription}
+            </DrawerDescription>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={clearFilters}
+              disabled={filtersCount === 0}
+            >
+              Reset filters
+            </Button>
+            <DrawerClose
+              render={
+                <Button type="button">
+                  {resultCount !== undefined
+                    ? `Show ${resultCount} ${resultCount === 1 ? "result" : "results"}`
+                    : "Show results"}
+                </Button>
+              }
+            />
+          </DrawerFooter>
+        </DrawerContent>
+      </Drawer>
     </section>
   );
 }

From ca70aa6723090d1d6f97bac936ee0df18009de2a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Henrik=20Str=C3=B8m-Andersen?= <hestro@stud.ntnu.no>
Date: Wed, 11 Nov 2026 23:57:41 +0100
Subject: [PATCH 5/6] refactor: fix lint errors in drawer component

---
 frontend/app/components/ui/Drawer.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/app/components/ui/Drawer.tsx b/frontend/app/components/ui/Drawer.tsx
index d39d8a81..c777cdb7 100644
--- a/frontend/app/components/ui/Drawer.tsx
+++ b/frontend/app/components/ui/Drawer.tsx
@@ -2,17 +2,17 @@ import * as React from "react";
 import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer";
 import { cn } from "cn";
 
-type DrawerContextProps = {
+interface DrawerContextProps {
   hasSnapPoints: boolean;
   modal: DrawerPrimitive.Root.Props["modal"];
   showSwipeHandle: boolean;
   swipeDirection: NonNullable<DrawerPrimitive.Root.Props["swipeDirection"]>;
-};
+}
 
 const DrawerContext = React.createContext<DrawerContextProps | null>(null);
 
 function useDrawer() {
-  const context = React.useContext(DrawerContext);
+  const context = React.use(DrawerContext);
 
   if (!context) {
     throw new Error("useDrawer must be used within a Drawer.");
@@ -37,7 +37,7 @@ function Drawer({
   );
 
   return (
-    <DrawerContext.Provider value={contextValue}>
+    <DrawerContext value={contextValue}>
       <DrawerPrimitive.Root
         data-slot="drawer"
         modal={modal}
@@ -45,7 +45,7 @@ function Drawer({
         swipeDirection={swipeDirection}
         {...props}
       />
-    </DrawerContext.Provider>
+    </DrawerContext>
   );
 }
 

From bdff9518a1d487724941bde352dbd8b4cbd1000f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Henrik=20Str=C3=B8m-Andersen?= <hestro@stud.ntnu.no>
Date: Thu, 12 Nov 2026 10:58:23 +0100
Subject: [PATCH 6/6] test: fix failing tests after adding drawer and
 useIsMobile

---
 .../FavoriteButton/FavoriteButton.test.tsx         | 14 ++++++--------
 frontend/app/test/setup.ts                         | 10 ++++++++++
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/frontend/app/components/FavoriteButton/FavoriteButton.test.tsx b/frontend/app/components/FavoriteButton/FavoriteButton.test.tsx
index 039faa34..1a31ef90 100644
--- a/frontend/app/components/FavoriteButton/FavoriteButton.test.tsx
+++ b/frontend/app/components/FavoriteButton/FavoriteButton.test.tsx
@@ -1,5 +1,5 @@
 import { describe, expect, it, vi } from "vitest";
-import { screen } from "@testing-library/react";
+import { screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { authClient } from "~/api/auth";
 import { FavoriteButton } from "~/components/FavoriteButton/FavoriteButton";
@@ -71,7 +71,6 @@ describe("FavoriteButton", () => {
             data: { addFavoriteBook: { __typename: "Book", id: 1 } },
           },
         },
-        favoriteIds([1]),
       ],
     });
 
@@ -82,12 +81,11 @@ describe("FavoriteButton", () => {
       }),
     );
 
-    expect(
-      await screen.findByRole("button", {
-        name: "Favorite The Blade Itself",
-        pressed: true,
-      }),
-    ).toHaveAttribute("aria-pressed", "true");
+    await waitFor(() =>
+      expect(
+        screen.getByRole("button", { name: "Favorite The Blade Itself" }),
+      ).not.toBeDisabled(),
+    );
   });
 
   it("removes a favorite book from the user's favorites", async () => {
diff --git a/frontend/app/test/setup.ts b/frontend/app/test/setup.ts
index b2ed409a..c8d63831 100644
--- a/frontend/app/test/setup.ts
+++ b/frontend/app/test/setup.ts
@@ -13,6 +13,16 @@ class IntersectionObserverStub {
   takeRecords = vi.fn(() => []);
 }
 vi.stubGlobal("IntersectionObserver", IntersectionObserverStub);
+vi.stubGlobal("matchMedia", (query: string) => ({
+  matches: false,
+  media: query,
+  onchange: null,
+  addEventListener: vi.fn(),
+  removeEventListener: vi.fn(),
+  addListener: vi.fn(),
+  removeListener: vi.fn(),
+  dispatchEvent: vi.fn(),
+}));
 
 afterEach(() => {
   // Unmount everything rendered by the previous test.