Add platform aware sheet component

web/src/components/filter/SearchFilterGroup.tsx

@@ -29,6 +29,7 @@ import SearchSourceIcon from "../icons/SearchSourceIcon";
 import PlatformAwareDialog from "../overlay/dialog/PlatformAwareDialog";
 import { FaArrowRight, FaClock } from "react-icons/fa";
 import { useFormattedHour } from "@/hooks/use-date-utils";
+import SearchFilterDialog from "../overlay/dialog/SearchFilterDialog";
 
 type SearchFilterGroupProps = {
   className: string;
@@ -159,6 +160,16 @@ export default function SearchFilterGroup({
           }}
         />
       )}
+      {filters.includes("general") && (
+        <GeneralFilterButton
+          allLabels={filterValues.labels}
+          selectedLabels={filter?.labels}
+          updateLabelFilter={(newLabels) => {
+            onUpdateFilter({ ...filter, labels: newLabels });
+          }}
+        />
+      )}
+      <SearchFilterDialog />
       {filters.includes("date") && (
         <CalendarRangeFilterButton
           range={
@@ -191,15 +202,6 @@ export default function SearchFilterGroup({
           }
         />
       )}
-      {filters.includes("general") && (
-        <GeneralFilterButton
-          allLabels={filterValues.labels}
-          selectedLabels={filter?.labels}
-          updateLabelFilter={(newLabels) => {
-            onUpdateFilter({ ...filter, labels: newLabels });
-          }}
-        />
-      )}
       {filters.includes("sub") && (
         <SubFilterButton
           allSubLabels={allSubLabels}

web/src/components/overlay/dialog/PlatformAwareDialog.tsx

@@ -1,9 +1,12 @@
+import { MobilePage, MobilePageContent } from "@/components/mobile/MobilePage";
+import { Button } from "@/components/ui/button";
 import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
 import { isMobile } from "react-device-detect";
 
 type PlatformAwareDialogProps = {
@@ -42,3 +45,42 @@ export default function PlatformAwareDialog({
     </Popover>
   );
 }
+
+type PlatformAwareSheetProps = {
+  trigger: JSX.Element;
+  content: JSX.Element;
+  triggerClassName?: string;
+  contentClassName?: string;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+};
+export function PlatformAwareSheet({
+  trigger,
+  content,
+  triggerClassName = "",
+  contentClassName = "",
+  open,
+  onOpenChange,
+}: PlatformAwareSheetProps) {
+  if (isMobile) {
+    return (
+      <MobilePage open={open} onOpenChange={onOpenChange}>
+        <Button asChild onClick={() => onOpenChange(!open)}>
+          {trigger}
+        </Button>
+        <MobilePageContent className="max-h-[75dvh] overflow-hidden px-4">
+          {content}
+        </MobilePageContent>
+      </MobilePage>
+    );
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetTrigger asChild className={triggerClassName}>
+        {trigger}
+      </SheetTrigger>
+      <SheetContent className={contentClassName}>{content}</SheetContent>
+    </Sheet>
+  );
+}

web/src/components/overlay/dialog/SearchFilterDialog.tsx

@@ -0,0 +1,28 @@
+import { FaCog } from "react-icons/fa";
+
+import { useState } from "react";
+import { PlatformAwareSheet } from "./PlatformAwareDialog";
+import { Button } from "@/components/ui/button";
+
+type SearchFilterDialogProps = {};
+export default function SearchFilterDialog({}: SearchFilterDialogProps) {
+  const [open, setOpen] = useState(false);
+
+  const trigger = (
+    <Button className="flex items-center gap-2" size="sm">
+      <FaCog className={"text-secondary-foreground"} />
+      More Filters
+    </Button>
+  );
+  const content = <></>;
+
+  return (
+    <PlatformAwareSheet
+      trigger={trigger}
+      content={content}
+      contentClassName="w-auto"
+      open={open}
+      onOpenChange={setOpen}
+    />
+  );
+}