my-app/src/components/ParticipantsSelector.jsx

@@ -7,7 +7,11 @@ export function ParticipantsSelector() {
 	const booking = useBookingContext();
 	const [searchTerm, setSearchTerm] = useState('');
 	const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-	const [recentSearches, setRecentSearches] = useState([]);
+	const [recentSearches, setRecentSearches] = useState([
+		{ id: 1, name: 'Arjohn Emilsson', email: 'arjohn.emilsson@dsv.su.se' },
+		{ id: 3, name: 'Hedvig Engelmark', email: 'hedvig.engelmark@dsv.su.se' },
+		{ id: 5, name: 'Victor Magnusson', email: 'victor.magnusson@dsv.su.se' }
+	]);
 	const inputRef = useRef(null);
 	const dropdownRef = useRef(null);
 
@@ -17,8 +21,14 @@ export function ParticipantsSelector() {
 		person.email.toLowerCase().includes(searchTerm.toLowerCase())
 	);
 
-	// Show all people when empty search, filtered when typing
-	const displayPeople = searchTerm === '' ? PEOPLE : filteredPeople;
+	// Show recent searches only when input is empty (first click)
+	const showRecentSearches = searchTerm === '' && recentSearches.length > 0;
+	// Only show all people when user starts typing
+	const showAllPeople = searchTerm !== '';
+	const displayPeople = filteredPeople;
+	
+	// Helper function to check if person is already selected
+	const isPersonSelected = (personName) => booking.participants.includes(personName);
 
 	useEffect(() => {
 		const handleClickOutside = (event) => {
@@ -42,7 +52,22 @@ export function ParticipantsSelector() {
 
 	const handleSelectPerson = (person) => {
 		console.log('handleSelectPerson called with:', person);
+		
+		// Don't add if already selected
+		if (isPersonSelected(person.name)) {
+			setSearchTerm('');
+			setIsDropdownOpen(false);
+			inputRef.current?.blur();
+			return;
+		}
+		
 		booking.handleParticipantChange(person.id);
+		
+		// Add to recent searches if not already there
+		if (!recentSearches.find(p => p.id === person.id)) {
+			setRecentSearches(prev => [person, ...prev.slice(0, 4)]);
+		}
+		
 		setSearchTerm('');
 		setIsDropdownOpen(false);
 		inputRef.current?.blur();
@@ -71,25 +96,54 @@ export function ParticipantsSelector() {
 				{/* Dropdown */}
 				{isDropdownOpen && (
 					<div className={styles.dropdown}>
-						{displayPeople.length > 0 ? (
+						{/* Recent Searches */}
+						{showRecentSearches && (
 							<div className={styles.section}>
-								{displayPeople.map((person) => (
+								<div className={styles.sectionHeader}>Senaste sökningar</div>
+								{recentSearches.map((person) => (
 									<div 
-										key={person.id}
-										className={styles.dropdownItem}
+										key={`recent-${person.id}`}
+										className={`${styles.dropdownItem} ${isPersonSelected(person.name) ? styles.selectedItem : ''}`}
 										onClick={() => handleSelectPerson(person)}
 									>
 										<div className={styles.personInfo}>
-											<div className={styles.personName}>{person.name}</div>
+											<div className={styles.personName}>
+												{person.name}
+												{isPersonSelected(person.name) && <span className={styles.selectedIndicator}>✓</span>}
+											</div>
 											<div className={styles.personEmail}>{person.email}</div>
 										</div>
 									</div>
 								))}
 							</div>
-						) : (
-							<div className={styles.noResults}>
-								No participants found
-							</div>
+						)}
+						
+						{/* Search Results - Only when typing */}
+						{showAllPeople && (
+							displayPeople.length > 0 ? (
+								<div className={styles.section}>
+									<div className={styles.sectionHeader}>Sökresultat</div>
+									{displayPeople.map((person) => (
+										<div 
+											key={person.id}
+											className={`${styles.dropdownItem} ${isPersonSelected(person.name) ? styles.selectedItem : ''}`}
+											onClick={() => handleSelectPerson(person)}
+										>
+											<div className={styles.personInfo}>
+												<div className={styles.personName}>
+													{person.name}
+													{isPersonSelected(person.name) && <span className={styles.selectedIndicator}>✓</span>}
+												</div>
+												<div className={styles.personEmail}>{person.email}</div>
+											</div>
+										</div>
+									))}
+								</div>
+							) : (
+								<div className={styles.noResults}>
+									Inga deltagare hittades
+								</div>
+							)
 						)}
 					</div>
 				)}

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

@@ -155,6 +155,9 @@
 	font-weight: 500;
 	color: #202124;
 	font-size: 0.875rem;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
 }
 
 .personEmail {
@@ -173,6 +176,21 @@
 	background-color: transparent;
 }
 
+.selectedItem {
+	background-color: #F0F8FF;
+	opacity: 0.7;
+}
+
+.selectedItem:hover {
+	background-color: #E0F2FE;
+}
+
+.selectedIndicator {
+	color: #2563EB;
+	font-weight: bold;
+	margin-left: 0.5rem;
+}
+
 .noResults {
 	padding: 1rem;
 	text-align: center;

my-app/src/constants/bookingConstants.js

@@ -24,7 +24,16 @@ export const PEOPLE = [
 	{ id: 3, name: 'Hedvig Engelmark', email: 'hedvig.engelmark@dsv.su.se' },
 	{ id: 4, name: 'Elin Rudling', email: 'elin.rudling@dsv.su.se' },
 	{ id: 5, name: 'Victor Magnusson', email: 'victor.magnusson@dsv.su.se' },
-	{ id: 6, name: 'Ellen Britschgi', email: 'ellen.britschgi@dsv.su.se' }
+	{ id: 6, name: 'Ellen Britschgi', email: 'ellen.britschgi@dsv.su.se' },
+	{ id: 7, name: 'Anna Andersson', email: 'anna.andersson@dsv.su.se' },
+	{ id: 8, name: 'Erik Larsson', email: 'erik.larsson@dsv.su.se' },
+	{ id: 9, name: 'Sofia Karlsson', email: 'sofia.karlsson@dsv.su.se' },
+	{ id: 10, name: 'Magnus Nilsson', email: 'magnus.nilsson@dsv.su.se' },
+	{ id: 11, name: 'Emma Johansson', email: 'emma.johansson@dsv.su.se' },
+	{ id: 12, name: 'Oskar Pettersson', email: 'oskar.pettersson@dsv.su.se' },
+	{ id: 13, name: 'Linda Svensson', email: 'linda.svensson@dsv.su.se' },
+	{ id: 14, name: 'Jonas Gustafsson', email: 'jonas.gustafsson@dsv.su.se' },
+	{ id: 15, name: 'Maria Olsson', email: 'maria.olsson@dsv.su.se' }
 ];
 
 export const DEFAULT_DISABLED_OPTIONS = {