added a bunch of frontend things

frontend/src/App.css

@@ -0,0 +1 @@
+

frontend/src/App.tsx

@@ -0,0 +1,108 @@
+import { FolderPicker } from "./components/FolderPicker";
+import { listen } from "@tauri-apps/api/event";
+import { createEffect, createSignal } from "solid-js";
+import { Search } from "@kobalte/core/search";
+import { IconSearch, IconRefresh } from "@tabler/icons-solidjs";
+
+type Emoji = {
+  emoji: string;
+  name: string;
+};
+
+function App() {
+  const [latestImage, setLatestImage] = createSignal<string | null>(null);
+  const [options, setOptions] = createSignal<Emoji[]>([]);
+  const [emoji, setEmoji] = createSignal<Emoji | null>(null);
+
+  const emojiData: Emoji[] = [
+    { emoji: "😀", name: "Grinning Face" },
+    { emoji: "😃", name: "Grinning Face with Big Eyes" },
+    { emoji: "😄", name: "Grinning Face with Smiling Eyes" },
+    { emoji: "😁", name: "Beaming Face with Smiling Eyes" },
+    { emoji: "😆", name: "Grinning Squinting Face" },
+  ];
+
+  const queryEmojiData = (query: string) => {
+    return emojiData.filter((emoji) =>
+      emoji.name.toLowerCase().includes(query.toLowerCase())
+    );
+  };
+
+  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 (
+    <main class="container pt-8">
+      <h1>hello???</h1>
+      <FolderPicker />
+
+      {latestImage() && (
+        <div class="mt-4">
+          <h3>Latest Processed Image:</h3>
+          <img
+            src={latestImage() || undefined}
+            alt="Latest processed"
+            class="max-w-md"
+          />
+        </div>
+      )}
+
+      <Search
+        triggerMode="focus"
+        options={options()}
+        onInputChange={(query) => setOptions(queryEmojiData(query))}
+        onChange={(result) => setEmoji(result)}
+        optionValue="name"
+        optionLabel="name"
+        placeholder="Search an emoji…"
+        itemComponent={(props) => (
+          <Search.Item item={props.item} class="search__item">
+            <Search.ItemLabel>{props.item.rawValue.emoji}</Search.ItemLabel>
+          </Search.Item>
+        )}
+      >
+        <Search.Control class="search__control" aria-label="Emoji">
+          <Search.Indicator
+            class="search__indicator"
+            loadingComponent={
+              <Search.Icon class="load__icon">
+                <IconRefresh class="spin__icon" />
+              </Search.Icon>
+            }
+          >
+            <Search.Icon class="search__icon">
+              <IconSearch class="center__icon" />
+            </Search.Icon>
+          </Search.Indicator>
+          <Search.Input class="search__input" />
+        </Search.Control>
+        <Search.Portal>
+          <Search.Content
+            class="search__content"
+            onCloseAutoFocus={(e) => e.preventDefault()}
+          >
+            <Search.Listbox class="search__listbox" />
+            <Search.NoResult class="search__no_result">
+              😬 No emoji found
+            </Search.NoResult>
+          </Search.Content>
+        </Search.Portal>
+      </Search>
+      <div class="result__content">
+        Emoji selected: {emoji()?.emoji} {emoji()?.name}
+      </div>
+    </main>
+  );
+}
+
+export default App;

frontend/src/assets/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 155.3"><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" fill="#76b3e1"/><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="27.5" y1="3" x2="152" y2="63.5"><stop offset=".1" stop-color="#76b3e1"/><stop offset=".3" stop-color="#dcf2fd"/><stop offset="1" stop-color="#76b3e1"/></linearGradient><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" opacity=".3" fill="url(#a)"/><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" fill="#518ac8"/><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="95.8" y1="32.6" x2="74" y2="105.2"><stop offset="0" stop-color="#76b3e1"/><stop offset=".5" stop-color="#4377bb"/><stop offset="1" stop-color="#1f3b77"/></linearGradient><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" opacity=".3" fill="url(#b)"/><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="18.4" y1="64.2" x2="144.3" y2="149.8"><stop offset="0" stop-color="#315aa9"/><stop offset=".5" stop-color="#518ac8"/><stop offset="1" stop-color="#315aa9"/></linearGradient><path d="M134 80a45 45 0 00-48-15L24 85 4 120l112 19 20-36c4-7 3-15-2-23z" fill="url(#c)"/><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="75.2" y1="74.5" x2="24.4" y2="260.8"><stop offset="0" stop-color="#4377bb"/><stop offset=".5" stop-color="#1a336b"/><stop offset="1" stop-color="#1a336b"/></linearGradient><path d="M114 115a45 45 0 00-48-15L4 120s53 40 94 30l3-1c17-5 23-21 13-34z" fill="url(#d)"/></svg>

frontend/src/components/FolderPicker.tsx

@@ -0,0 +1,49 @@
+import { createSignal } from "solid-js";
+import { open } from "@tauri-apps/plugin-dialog";
+import { invoke } from "@tauri-apps/api/core";
+
+export function FolderPicker() {
+  const [selectedPath, setSelectedPath] = createSignal<string>("");
+  const [status, setStatus] = createSignal<string>("");
+
+  const handleFolderSelect = async () => {
+    try {
+      const selected = await open({
+        directory: true,
+        multiple: false,
+      });
+
+      if (selected) {
+        setSelectedPath(selected as string);
+        // Send the path to Rust
+        const response = await invoke("handle_selected_folder", {
+          path: selected,
+        });
+        setStatus(`Folder processed: ${response}`);
+      }
+    } catch (error) {
+      setStatus(`Error: ${error}`);
+    }
+  };
+
+  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"
+      >
+        Select Folder
+      </button>
+
+      {selectedPath() && (
+        <div class="text-left max-w-md">
+          <p class="font-semibold">Selected folder:</p>
+          <p class="text-sm break-all">{selectedPath()}</p>
+        </div>
+      )}
+
+      {status() && <p class="text-sm text-gray-600">{status()}</p>}
+    </div>
+  );
+}

frontend/src/index.css

@@ -0,0 +1,17 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  @apply bg-neutral-50 text-black rounded-xl;
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}

frontend/src/index.tsx

@@ -0,0 +1,6 @@
+/* @refresh reload */
+import { render } from "solid-js/web";
+import App from "./App";
+import "./index.css";
+
+render(() => <App />, document.getElementById("root") as HTMLElement);

frontend/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />