From 1b3cf6ab39748971111326463176ebde7fd7e9e4 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Tue, 21 Jan 2025 19:17:51 -0500
Subject: [PATCH] feat: add keyboard shortcut to focus search input in Navbar
 and clean up dashboard animations

---
 frontend/src/lib/components/Navbar.svelte  | 50 +++++++++++++---------
 frontend/src/routes/dashboard/+page.svelte | 10 -----
 2 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/frontend/src/lib/components/Navbar.svelte b/frontend/src/lib/components/Navbar.svelte
index 13a2e85..5e0d475 100644
--- a/frontend/src/lib/components/Navbar.svelte
+++ b/frontend/src/lib/components/Navbar.svelte
@@ -12,6 +12,28 @@
 	import { page } from '$app/stores';
 	import { t, locale, locales } from 'svelte-i18n';
 	import { themes } from '$lib';
+	import { onMount } from 'svelte';
+	let inputElement: HTMLInputElement | null = null;
+
+	// Event listener for focusing input
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === '/' && document.activeElement !== inputElement) {
+			event.preventDefault(); // Prevent browser's search shortcut
+			if (inputElement) {
+				inputElement.focus();
+			}
+		}
+	}
+
+	onMount(() => {
+		// Attach event listener on component mount
+		document.addEventListener('keydown', handleKeydown);
+
+		// Cleanup event listener on component destruction
+		return () => {
+			document.removeEventListener('keydown', handleKeydown);
+		};
+	});
 
 	let languages: { [key: string]: string } = {
 		en: 'English',
@@ -123,12 +145,7 @@
 				{#if data.user}
 					<form class="flex gap-2">
 						<label class="input input-bordered flex items-center gap-2">
-							<input
-								type="text"
-								bind:value={query}
-								class="grow"
-								placeholder={$t('navbar.search')}
-							/>
+							<input type="text" bind:value={query} placeholder={$t('navbar.search')} />
 
 							<svg
 								xmlns="http://www.w3.org/2000/svg"
@@ -200,20 +217,13 @@
 			{#if data.user}
 				<form class="flex gap-2">
 					<label class="input input-bordered flex items-center gap-2">
-						<input type="text" bind:value={query} class="grow" placeholder={$t('navbar.search')} />
-
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							viewBox="0 0 16 16"
-							fill="currentColor"
-							class="h-4 w-4 opacity-70"
-						>
-							<path
-								fill-rule="evenodd"
-								d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"
-								clip-rule="evenodd"
-							/>
-						</svg>
+						<input
+							type="text"
+							bind:value={query}
+							class="grow"
+							placeholder={$t('navbar.search')}
+							bind:this={inputElement}
+						/><kbd class="kbd">/</kbd>
 					</label>
 					<button on:click={searchGo} type="submit" class="btn btn-neutral"
 						>{$t('navbar.search')}</button
diff --git a/frontend/src/routes/dashboard/+page.svelte b/frontend/src/routes/dashboard/+page.svelte
index 76c77bb..905493d 100644
--- a/frontend/src/routes/dashboard/+page.svelte
+++ b/frontend/src/routes/dashboard/+page.svelte
@@ -43,17 +43,7 @@
 			ease: 'power2.out',
 			delay: 0 // Shorter delay for quicker appearance
 		});
-
-		// Inspiration section with faster bounce effect
-		gsap.from('.inspiration', {
-			opacity: 0,
-			scale: 0.7, // Less scale for snappier effect
-			duration: 1, // Slightly quicker duration
-			ease: 'elastic.out(0.75, 0.5)', // Snappier bounce
-			delay: 0 // Reduced delay for quicker animation
-		});
 	});
-
 	export let data: PageData;
 
 	import FlagCheckeredVariantIcon from '~icons/mdi/flag-checkered-variant';