fix search not working properly

src/components/App.tsx

@@ -6,6 +6,7 @@ import {
 	createSignal,
 	lazy,
 	onCleanup,
+	onMount,
 } from "solid-js"
 import type { EmailBase } from "../email"
 import { EmailsList, EmailsListProps } from "./EmailRow"
@@ -53,34 +54,37 @@ function throttleFn(fn: () => Promise<void>): () => Promise<void> {
 			} catch (e) {
 				console.error(e)
 			}
+			await new Promise((res) => setTimeout(res, 500))
 		}
-		await new Promise((res) => setTimeout(res, 500))
 		running = false
 	}
 }
 
 export function App() {
 	const [emails, setEmails] = createSignal<Array<EmailBase>>()
 	const [selectedEmail, setSelectedEmail] = createSignal<EmailBase>()
-
 	const [searchValue, setSearchValue] = createSignal<string>("")
 
 	const fetchEmails = throttleFn(async () => {
-		const response = await fetch(`/api/emails?search=${searchValue()}`)
+		let url = "/api/emails"
+
+		if (searchValue()?.length) {
+			url += "?search=" + encodeURIComponent(searchValue())
+		}
+
+		const response = await fetch(url)
 		const data: Array<EmailBase> = await response.json()
 		setEmails(data)
 	})
 
 	const emailsWebsocket = new EmailEventsWebsocket(fetchEmails)
 
 	createEffect(() => {
-		if (!searchValue()?.length) return
-
+		searchValue()
 		fetchEmails()
 	})
 
-	createEffect(() => {
-		fetchEmails()
+	onMount(() => {
 		emailsWebsocket.start()
 	})
 

src/components/AttachmentModal.tsx

@@ -1,7 +1,7 @@
 import { Match, Portal, Switch } from "solid-js/web"
 import { Attachment } from "../email"
 import { isImage, isPdf } from "./AttachmentButton"
-import { Show, createEffect } from "solid-js"
+import { Show, createEffect, onCleanup, onMount } from "solid-js"
 import { createSignal } from "solid-js"
 import { AttachmentIcon } from "./AttachmentIcon"
 
@@ -34,6 +34,19 @@ export function AttachmentModal({
 		link.click()
 	}
 
+	const keyboardEvent = (e: KeyboardEvent) => {
+		if (e.key === "Escape") {
+			onClose()
+		}
+	}
+
+	onMount(() => {
+		document.addEventListener("keydown", keyboardEvent)
+	})
+	onCleanup(() => {
+		document.removeEventListener("keydown", keyboardEvent)
+	})
+
 	return (
 		<Portal mount={document.body}>
 			<div
@@ -59,25 +72,32 @@ export function AttachmentModal({
 					flex
 					flex-col
 				>
+					<div p-6 border-0 border-zinc-800 border-b border-b-solid>
+						<p m-0>{attachment().filename}</p>
+					</div>
+					<ShowAttachment
+						attachment={attachment}
+						attachmentUrl={attachmentUrl}
+					/>
 					<div
-						p-6
+						py-4
+						px-6
 						flex
-						justify-between
+						justify-end
+						gap-2
 						items-center
 						border-0
 						border-zinc-800
-						border-b
-						border-b-solid
+						border-t
+						border-t-solid
 					>
-						<p m-0>{attachment().filename}</p>
+						<button onClick={onClose} border-zinc-500>
+							Close
+						</button>
 						<button onClick={downloadAttachment} border-zinc-500>
 							Download
 						</button>
 					</div>
-					<ShowAttachment
-						attachment={attachment}
-						attachmentUrl={attachmentUrl}
-					/>
 				</div>
 			</div>
 		</Portal>