add biome

.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+	"editor.defaultFormatter": "biomejs.biome",
+	"[typescript]": {
+		"editor.defaultFormatter": "biomejs.biome"
+	},
+	"[typescriptreact]": {
+		"editor.defaultFormatter": "biomejs.biome"
+	},
+	"editor.formatOnSave": true
+}

biome.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.5.3/schema.json",
+  "organizeImports": {
+    "enabled": true
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true
+    }
+  }
+}

package.json

@@ -8,7 +8,9 @@
     "dev": "vite",
     "build": "vite build",
     "serve": "vite preview",
-    "tauri": "tauri"
+    "tauri": "tauri",
+    "lint": "bunx @biomejs/biome lint .",
+    "format": "bunx @biomejs/biome format . --write"
   },
   "license": "MIT",
   "dependencies": {
@@ -18,6 +20,7 @@
     "solid-js": "^1.9.3"
   },
   "devDependencies": {
+    "@biomejs/biome": "^1.9.4",
     "@tauri-apps/cli": "^2",
     "autoprefixer": "^10.4.20",
     "postcss": "^8.5.3",

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>
+	);
 }