my-app/src/components/BookingLengthField.module.css

@@ -6,5 +6,4 @@
 	font-weight: 520;
 	line-height: normal;
 	margin-bottom: 0.2rem;
-	margin-top: 1.5rem;
 }

my-app/src/components/RoomSelectionField.module.css

@@ -6,5 +6,4 @@
 	font-weight: 520;
 	line-height: normal;
 	margin-bottom: 0.2rem;
-	margin-top: 1.5rem;
 }

my-app/src/pages/NewBooking.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import styles from './NewBooking.module.css';
 import { TimeCardContainer } from '../components/TimeCardContainer';
 import { BookingDatePicker } from '../components/BookingDatePicker';
@@ -13,6 +13,43 @@ import { useSettingsContext } from '../context/SettingsContext';
 export function NewBooking({ addBooking }) {
 	const { getEffectiveToday } = useSettingsContext();
 	const booking = useBookingState(addBooking, getEffectiveToday());
+	const [showFilters, setShowFilters] = useState(false);
+	
+	// Check if any filters are active
+	const hasActiveFilters = booking.selectedRoom !== "allRooms" || booking.selectedBookingLength > 0;
+	
+	// Generate filter display text
+	const getFilterText = () => {
+		const filters = [];
+		
+		if (booking.selectedRoom !== "allRooms") {
+			filters.push(booking.selectedRoom);
+		}
+		
+		if (booking.selectedBookingLength > 0) {
+			const bookingLengths = {
+				1: "30 min",
+				2: "1 h", 
+				3: "1.5 h",
+				4: "2 h",
+				5: "2.5 h",
+				6: "3 h",
+				7: "3.5 h",
+				8: "4 h"
+			};
+			filters.push(bookingLengths[booking.selectedBookingLength]);
+		}
+		
+		if (filters.length === 0) return "Filter";
+		return `Filter (${filters.join(", ")})`;
+	};
+	
+	// Reset all filters
+	const handleResetFilters = () => {
+		booking.handleRoomChange({ target: { value: "allRooms" } });
+		booking.handleLengthChange(0);
+		setShowFilters(false);
+	};
 
 	return (
 		<BookingProvider value={booking}>
@@ -25,9 +62,38 @@ export function NewBooking({ addBooking }) {
 						
 						<div className={styles.bookingTimesContainer}>
 							<BookingDatePicker />
-							<div style={{ display: "flex", flexDirection: "row", alignItems: "center", gap: "1rem" }}>
-								<RoomSelectionField />
-								<BookingLengthField />
+							
+							{/* Filter Button */}
+							<div className={styles.filtersSection}>
+								<button 
+									className={`${styles.filterButton} ${hasActiveFilters ? styles.activeFilter : ''}`}
+									onClick={() => setShowFilters(!showFilters)}
+								>
+									<span>{getFilterText()}</span>
+									<span className={`${styles.chevron} ${showFilters ? styles.chevronUp : styles.chevronDown}`}>
+										{showFilters ? '▲' : '▼'}
+									</span>
+								</button>
+								
+								{/* Collapsible Filter Content */}
+								{showFilters && (
+									<div className={styles.filtersContent}>
+										<div className={styles.filtersRow}>
+											<RoomSelectionField />
+											<BookingLengthField />
+										</div>
+										{hasActiveFilters && (
+											<div className={styles.resetSection}>
+												<button 
+													className={styles.resetButton}
+													onClick={handleResetFilters}
+												>
+													Rensa filter
+												</button>
+											</div>
+										)}
+									</div>
+								)}
 							</div>
 							
 							<h3 className={styles.elementHeading} style={{ padding: "0 0.5rem" }}>

my-app/src/pages/NewBooking.module.css

@@ -142,4 +142,129 @@
 	background-color: rgb(216, 216, 216);
 	width: 100%;
 	margin: 1rem 0;
+}
+
+/* Filter Section Styles */
+.filtersSection {
+	width: 100%;
+	margin-top: 1rem;
+	margin-bottom: 1.5rem;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 0.75rem;
+}
+
+.filterButton {
+	width: fit-content;
+	background: white;
+	border: 1px solid #D1D5DB;
+	border-radius: 0.375rem;
+	padding: 0.5rem 0.75rem;
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	cursor: pointer;
+	transition: all 0.2s ease;
+	font-size: 0.875rem;
+	font-weight: 500;
+	color: #374151;
+}
+
+.filterButton:hover {
+	background: #F9FAFB;
+	border-color: #9CA3AF;
+}
+
+.filterButton:active {
+	background: #F3F4F6;
+}
+
+.activeFilter {
+	background: #EBF8FF !important;
+	border-color: #3B82F6 !important;
+	color: #1E40AF !important;
+}
+
+.activeFilter:hover {
+	background: #DBEAFE !important;
+	border-color: #2563EB !important;
+}
+
+.filterIcon {
+	font-size: 1rem;
+}
+
+.chevron {
+	font-size: 0.75rem;
+	color: #6B7280;
+	transition: transform 0.2s ease;
+}
+
+.chevronUp {
+	transform: rotate(0deg);
+}
+
+.chevronDown {
+	transform: rotate(0deg);
+}
+
+.filtersContent {
+	width: fit-content;
+	max-width: 600px;
+	padding: 1rem;
+	background: #F9FAFB;
+	border: 1px solid #E5E7EB;
+	border-radius: 0.5rem;
+	animation: slideDown 0.2s ease-out;
+}
+
+.filtersRow {
+	display: flex;
+	gap: 1rem;
+	align-items: center;
+	justify-content: center;
+}
+
+.resetSection {
+	margin-top: 1rem;
+	padding-top: 1rem;
+	border-top: 1px solid #E5E7EB;
+	display: flex;
+	justify-content: center;
+}
+
+.resetButton {
+	background: white;
+	border: 1px solid #DC2626;
+	color: #DC2626;
+	border-radius: 0.375rem;
+	padding: 0.5rem 1rem;
+	font-size: 0.875rem;
+	font-weight: 500;
+	cursor: pointer;
+	transition: all 0.2s ease;
+}
+
+.resetButton:hover {
+	background: #FEF2F2;
+	border-color: #B91C1C;
+	color: #B91C1C;
+}
+
+.resetButton:active {
+	background: #FEE2E2;
+	transform: translateY(1px);
+}
+
+@keyframes slideDown {
+	from {
+		opacity: 0;
+		transform: translateY(-10px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
 }