46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
import { TitleBar } from "./components/TitleBar";
|
|
import { FolderPicker } from "./components/FolderPicker";
|
|
import { listen } from "@tauri-apps/api/event";
|
|
import { createEffect, createSignal } from "solid-js";
|
|
|
|
function App() {
|
|
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}`);
|
|
});
|
|
|
|
return () => {
|
|
unlisten.then((fn) => fn()); // Cleanup listener
|
|
};
|
|
});
|
|
|
|
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>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default App;
|