add biome

src/App.tsx

@@ -1,45 +1,45 @@
+import { TitleBar } from "./components/TitleBar";
 import { FolderPicker } from "./components/FolderPicker";
 import { listen } from "@tauri-apps/api/event";
 import { createEffect, createSignal } from "solid-js";
-import { TitleBar } from "./components/TitleBar";
 
 function App() {
-  const [latestImage, setLatestImage] = createSignal<string | null>(null);
+	const [latestImage, setLatestImage] = createSignal<string | null>(null);
 
-  createEffect(() => {
-    // Listen for PNG processing events
-    const unlisten = listen("png-processed", (event) => {
-      console.log("Received processed PNG");
-      const base64Data = event.payload as string;
-      setLatestImage(`data:image/png;base64,${base64Data}`);
-    });
+	createEffect(() => {
+		// Listen for PNG processing events
+		const unlisten = listen("png-processed", (event) => {
+			console.log("Received processed PNG");
+			const base64Data = event.payload as string;
+			setLatestImage(`data:image/png;base64,${base64Data}`);
+		});
 
-    return () => {
-      unlisten.then((fn) => fn()); // Cleanup listener
-    };
-  });
+		return () => {
+			unlisten.then((fn) => fn()); // Cleanup listener
+		};
+	});
 
-  return (
-    <>
-      <TitleBar />
-      <main class="container pt-8">
-        <h1>Pick screenshots folder</h1>
-        <FolderPicker />
+	return (
+		<>
+			<TitleBar />
+			<main class="container pt-8">
+				<h1>Pick screenshots folder</h1>
+				<FolderPicker />
 
-        {/* Display the latest processed image */}
-        {latestImage() && (
-          <div class="mt-4">
-            <h3>Latest Processed Image:</h3>
-            <img
-              src={latestImage() || undefined}
-              alt="Latest processed"
-              class="max-w-md"
-            />
-          </div>
-        )}
-      </main>
-    </>
-  );
+				{/* Display the latest processed image */}
+				{latestImage() && (
+					<div class="mt-4">
+						<h3>Latest Processed Image:</h3>
+						<img
+							src={latestImage() || undefined}
+							alt="Latest processed"
+							class="max-w-md"
+						/>
+					</div>
+				)}
+			</main>
+		</>
+	);
 }
 
 export default App;

src/components/FolderPicker.tsx

@@ -29,6 +29,7 @@ export function FolderPicker() {
   return (
     <div class="flex flex-col items-center gap-4">
       <button
+        type="button"
         onClick={handleFolderSelect}
         class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
       >

src/components/TitleBar.tsx

@@ -1,7 +1,7 @@
 export function TitleBar() {
-  return (
-    <div class="h-8 bg-[#1a1a1a] flex items-center px-4" data-tauri-drag-region>
-      <div class="text-white text-sm">Haystack</div>
-    </div>
-  );
+	return (
+		<div class="h-8 bg-[#1a1a1a] flex items-center px-4" data-tauri-drag-region>
+			<div class="text-white text-sm">Haystack</div>
+		</div>
+	);
 }