Update

3 files changed, 70 insertions, 6 deletions

diff --git a/biome.json b/biome.json
index 7463a70..4c34fa4 100644
--- a/biome.json
+++ b/biome.json
@@ -12,7 +12,7 @@
 	},
 	"files": {
 		"ignoreUnknown": true,
-		"includes": ["index.html", "style.css", "main.js", "biome.json"]
+		"includes": ["src/index.html", "src/style.css", "src/main.js", "biome.json"]
 	},
 	"formatter": {
 		"indentStyle": "tab",
diff --git a/src/index.html b/src/index.html
index 5573e60..30e843b 100644
--- a/src/index.html
+++ b/src/index.html
@@ -17,22 +17,26 @@
 			<div class="logo-large">SEARCH</div>
 			<div class="tagline">Universal Search Engine</div>
 
-			<div class="search-container">
+			<!-- Wrap in form for better URL handling -->
+			<form class="search-container" onsubmit="event.preventDefault(); search(searchInput.value);">
 				<div class="search-box">
 					<div class="search-prefix">→</div>
 					<input
 						type="text"
 						id="search-input"
+						name="q"<!-- Add name attribute -->
 						placeholder="SEARCH, $TICKER, !N NEWS..."
 						autofocus
 						spellcheck="false"
 					>
 					<div class="search-actions">
-						<button class="action-btn" id="voice-btn" title="VOICE">◉</button>
-						<button class="action-btn" id="clear-btn" title="CLEAR">×</button>
+						<button class="action-btn" id="voice-btn" title="VOICE" type="button">◉</button>
+						<button class="action-btn" id="clear-btn" title="CLEAR" type="button">×</button>
 					</div>
 				</div>
-			</div>
+				<!-- Hidden submit button for accessibility -->
+				<button type="submit" style="display: none;">Search</button>
+			</form>
 
 			<div class="shortcuts">
 				<span class="shortcut" onclick="insertBang('!n')">!N NEWS</span>
diff --git a/src/main.js b/src/main.js
index e9bc9f7..ab8b0b0 100644
--- a/src/main.js
+++ b/src/main.js
@@ -296,6 +296,7 @@ function init() {
 	setupCalc();
 	setupListeners();
 	setupWatchlistListeners();
+	handleUrlQueryOnLoad();
 }
 
 function renderSources() {
@@ -382,8 +383,38 @@ function setupWatchlistListeners() {
 // ═══════════════════════════════════════════════════════════
 // SEARCH
 // ═══════════════════════════════════════════════════════════
+function updateUrlWithQuery(query) {
+	const url = new URL(window.location);
+	if (query && query.trim()) {
+		url.searchParams.set("q", query);
+	} else {
+		url.searchParams.delete("q");
+	}
+	// Use replaceState to avoid adding to browser history
+	window.history.replaceState({}, "", url);
+}
+
+function getQueryFromUrl() {
+	const params = new URLSearchParams(window.location.search);
+	return params.get("q") || "";
+}
+
+function handleUrlQueryOnLoad() {
+	const query = getQueryFromUrl();
+	if (query.trim()) {
+		// Set the search input value
+		searchInput.value = query;
+		// Trigger search
+		search(query);
+	}
+}
+
 async function search(query) {
-	if (!query.trim()) return goHome();
+	if (!query.trim()) {
+		updateUrlWithQuery("");
+		return goHome();
+	}
+	updateUrlWithQuery(query);
 
 	// Show results view
 	if (!state.hasSearched) {
@@ -459,6 +490,7 @@ function goHome() {
 	mainEl.style.display = "none";
 	statsBar.classList.remove("visible");
 	searchInput.value = "";
+	updateUrlWithQuery("");
 }
 
 // ═══════════════════════════════════════════════════════════
@@ -870,6 +902,7 @@ function setupListeners() {
 		clearTimeout(debounce);
 		debounce = setTimeout(() => search(e.target.value), 300);
 	});
+
 	searchInput.addEventListener("keydown", (e) => {
 		if (e.key === "Enter") {
 			clearTimeout(debounce);
@@ -877,6 +910,7 @@ function setupListeners() {
 		}
 		if (e.key === "Escape") goHome();
 	});
+
 	document.addEventListener("keydown", (e) => {
 		if (
 			e.key === "/" &&
@@ -888,8 +922,15 @@ function setupListeners() {
 		}
 		if (e.key === "Escape") goHome();
 	});
+
 	$("clear-btn").onclick = goHome;
 	$("voice-btn").onclick = voiceSearch;
+
+	// Also update URL when clearing with clear button
+	$("clear-btn").onclick = () => {
+		goHome();
+		searchInput.focus();
+	};
 }
 
 function voiceSearch() {
@@ -969,4 +1010,23 @@ function insertBang(bang) {
 	searchInput.focus();
 }
 
+window.addEventListener("popstate", (event) => {
+	const query = getQueryFromUrl();
+	if (query !== state.query) {
+		if (query.trim()) {
+			searchInput.value = query;
+			search(query);
+		} else {
+			goHome();
+		}
+	}
+});
+
+// Also update the URL when using shortcuts
+window.insertBang = (bang) => {
+	searchInput.value = `${bang} `;
+	searchInput.focus();
+	updateUrlWithQuery(`${bang} `);
+};
+
 init();