added filter to don't show past events by default

client/src/components/DateEventsSince.tsx

@@ -0,0 +1,21 @@
+import { DatePicker, DateValue } from "@heroui/react";
+
+export default function DateEventsSince({
+	sinceDate,
+	setSinceDate,
+	className,
+}: {
+	sinceDate: DateValue | null;
+	setSinceDate: (value: DateValue | null) => void;
+	className?: string;
+}) {
+	return (
+		<DatePicker
+			className={className}
+			value={sinceDate}
+			hideTimeZone
+			onChange={setSinceDate}
+			label="Show events since"
+		/>
+	);
+}

client/src/components/Event/AvailabilitySelector.tsx

@@ -9,11 +9,13 @@ export default function AvailabilitySelector({
 	event,
 	className,
 	startSelection,
+	noHeader,
 	onRefresh,
 }: {
 	event: EventAvailability;
 	className?: string;
 	startSelection?: number;
+	noHeader?: boolean;
 	onRefresh?: () => void;
 }) {
 	const [value, setValue] = useState<Selection>(new Set([]));
@@ -55,8 +57,9 @@ export default function AvailabilitySelector({
 	return (
 		<div className={classNames(className, "w-full")}>
 			<Select
+				aria-label="Select availability"
 				items={availabilities.items}
-				label={<h4>Availability</h4>}
+				label={!noHeader ? <h4>Availability</h4> : null}
 				variant="bordered"
 				classNames={{ label: "text-base", trigger: "py-4" }}
 				labelPlacement="outside"

client/src/components/FilterPopover.tsx

@@ -0,0 +1,22 @@
+import { Filter } from "@carbon/icons-react";
+import { Button, Popover, PopoverContent, PopoverTrigger } from "@heroui/react";
+import React from "react";
+
+export default function FilterPopover({
+	children,
+	className,
+}: {
+	children: React.ReactNode;
+	className?: string;
+}) {
+	return (
+		<Popover placement="bottom-end">
+			<PopoverTrigger className={className}>
+				<Button isIconOnly>
+					<Filter className="cursor-pointer" />
+				</Button>
+			</PopoverTrigger>
+			<PopoverContent className="gap-2 p-2">{children}</PopoverContent>
+		</Popover>
+	);
+}