chore: running format
This commit is contained in:
@ -1,12 +1,12 @@
|
|||||||
{
|
{
|
||||||
"$schema": "https://biomejs.dev/schemas/1.5.3/schema.json",
|
"$schema": "https://biomejs.dev/schemas/1.5.3/schema.json",
|
||||||
"organizeImports": {
|
"organizeImports": {
|
||||||
"enabled": true
|
"enabled": true
|
||||||
},
|
},
|
||||||
"linter": {
|
"linter": {
|
||||||
"enabled": true,
|
"enabled": true,
|
||||||
"rules": {
|
"rules": {
|
||||||
"recommended": true
|
"recommended": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Binary file not shown.
@ -1,38 +1,39 @@
|
|||||||
{
|
{
|
||||||
"name": "haystack",
|
"name": "haystack",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"description": "",
|
"description": "",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "vite",
|
"start": "vite",
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
"build": "vite build",
|
"build": "vite build",
|
||||||
"serve": "vite preview",
|
"serve": "vite preview",
|
||||||
"tauri": "tauri",
|
"tauri": "tauri",
|
||||||
"lint": "bunx @biomejs/biome lint .",
|
"lint": "bunx @biomejs/biome lint .",
|
||||||
"format": "bunx @biomejs/biome format . --write"
|
"format": "bunx @biomejs/biome format . --write"
|
||||||
},
|
},
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@kobalte/core": "^0.13.9",
|
"@kobalte/core": "^0.13.9",
|
||||||
"@kobalte/tailwindcss": "^0.9.0",
|
"@kobalte/tailwindcss": "^0.9.0",
|
||||||
"@tabler/icons-solidjs": "^3.30.0",
|
"@tabler/icons-solidjs": "^3.30.0",
|
||||||
"@tauri-apps/api": "^2",
|
"@tauri-apps/api": "^2",
|
||||||
"@tauri-apps/plugin-dialog": "~2",
|
"@tauri-apps/plugin-dialog": "~2",
|
||||||
"@tauri-apps/plugin-opener": "^2",
|
"@tauri-apps/plugin-opener": "^2",
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
"solid-js": "^1.9.3",
|
"solid-js": "^1.9.3",
|
||||||
"tailwind-scrollbar-hide": "^2.0.0"
|
"tailwind-scrollbar-hide": "^2.0.0",
|
||||||
},
|
"valibot": "^1.0.0-rc.2"
|
||||||
"devDependencies": {
|
},
|
||||||
"@biomejs/biome": "^1.9.4",
|
"devDependencies": {
|
||||||
"@tauri-apps/cli": "^2",
|
"@biomejs/biome": "^1.9.4",
|
||||||
"autoprefixer": "^10.4.20",
|
"@tauri-apps/cli": "^2",
|
||||||
"postcss": "^8.5.3",
|
"autoprefixer": "^10.4.20",
|
||||||
"postcss-cli": "^11.0.0",
|
"postcss": "^8.5.3",
|
||||||
"tailwindcss": "3.4.0",
|
"postcss-cli": "^11.0.0",
|
||||||
"typescript": "~5.6.2",
|
"tailwindcss": "3.4.0",
|
||||||
"vite": "^6.0.3",
|
"typescript": "~5.6.2",
|
||||||
"vite-plugin-solid": "^2.11.0"
|
"vite": "^6.0.3",
|
||||||
}
|
"vite-plugin-solid": "^2.11.0"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
export default {
|
export default {
|
||||||
plugins: {
|
plugins: {
|
||||||
tailwindcss: {},
|
tailwindcss: {},
|
||||||
autoprefixer: {},
|
autoprefixer: {},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,12 +1,12 @@
|
|||||||
{
|
{
|
||||||
"$schema": "../gen/schemas/desktop-schema.json",
|
"$schema": "../gen/schemas/desktop-schema.json",
|
||||||
"identifier": "default",
|
"identifier": "default",
|
||||||
"description": "Capability for the main window",
|
"description": "Capability for the main window",
|
||||||
"windows": ["main"],
|
"windows": ["main"],
|
||||||
"permissions": [
|
"permissions": [
|
||||||
"core:default",
|
"core:default",
|
||||||
"opener:default",
|
"opener:default",
|
||||||
"dialog:default",
|
"dialog:default",
|
||||||
"core:window:allow-start-dragging"
|
"core:window:allow-start-dragging"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,14 +1,13 @@
|
|||||||
use std::path::PathBuf;
|
use base64::{engine::general_purpose::STANDARD as BASE64, Engine as _};
|
||||||
use notify::{Config, RecommendedWatcher, RecursiveMode, Watcher};
|
use notify::{Config, RecommendedWatcher, RecursiveMode, Watcher};
|
||||||
use tauri::Emitter;
|
|
||||||
use std::sync::mpsc::channel;
|
|
||||||
use std::fs;
|
use std::fs;
|
||||||
use base64::{Engine as _, engine::general_purpose::STANDARD as BASE64};
|
use std::path::PathBuf;
|
||||||
use std::sync::Mutex;
|
use std::sync::mpsc::channel;
|
||||||
use std::sync::Arc;
|
use std::sync::Arc;
|
||||||
|
use std::sync::Mutex;
|
||||||
use tauri::AppHandle;
|
use tauri::AppHandle;
|
||||||
use tauri::{TitleBarStyle, WebviewUrl, WebviewWindowBuilder};
|
use tauri::Emitter;
|
||||||
|
use tauri::{WebviewUrl, WebviewWindowBuilder};
|
||||||
|
|
||||||
struct WatcherState {
|
struct WatcherState {
|
||||||
watcher: Option<RecommendedWatcher>,
|
watcher: Option<RecommendedWatcher>,
|
||||||
@ -25,8 +24,7 @@ fn process_png_file(path: &PathBuf, app: AppHandle) -> Result<(), String> {
|
|||||||
println!("Processing PNG file: {}", path.display());
|
println!("Processing PNG file: {}", path.display());
|
||||||
|
|
||||||
// Read the file
|
// Read the file
|
||||||
let contents = fs::read(path)
|
let contents = fs::read(path).map_err(|e| format!("Failed to read file: {}", e))?;
|
||||||
.map_err(|e| format!("Failed to read file: {}", e))?;
|
|
||||||
|
|
||||||
// Convert to base64
|
// Convert to base64
|
||||||
let base64_string = BASE64.encode(&contents);
|
let base64_string = BASE64.encode(&contents);
|
||||||
@ -53,20 +51,21 @@ async fn handle_selected_folder(
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Stop existing watcher if any
|
// Stop existing watcher if any
|
||||||
let mut state = state.lock().map_err(|_| "Failed to lock state".to_string())?;
|
let mut state = state
|
||||||
|
.lock()
|
||||||
|
.map_err(|_| "Failed to lock state".to_string())?;
|
||||||
state.watcher = None;
|
state.watcher = None;
|
||||||
|
|
||||||
// Create a channel to receive file system events
|
// Create a channel to receive file system events
|
||||||
let (tx, rx) = channel();
|
let (tx, rx) = channel();
|
||||||
|
|
||||||
// Create a new watcher
|
// Create a new watcher
|
||||||
let mut watcher = RecommendedWatcher::new(
|
let mut watcher = RecommendedWatcher::new(tx, Config::default())
|
||||||
tx,
|
.map_err(|e| format!("Failed to create watcher: {}", e))?;
|
||||||
Config::default(),
|
|
||||||
).map_err(|e| format!("Failed to create watcher: {}", e))?;
|
|
||||||
|
|
||||||
// Start watching the directory
|
// Start watching the directory
|
||||||
watcher.watch(path_buf.as_ref(), RecursiveMode::Recursive)
|
watcher
|
||||||
|
.watch(path_buf.as_ref(), RecursiveMode::Recursive)
|
||||||
.map_err(|e| format!("Failed to watch directory: {}", e))?;
|
.map_err(|e| format!("Failed to watch directory: {}", e))?;
|
||||||
|
|
||||||
// Store the watcher in state
|
// Store the watcher in state
|
||||||
@ -114,9 +113,7 @@ pub fn run() {
|
|||||||
.manage(watcher_state)
|
.manage(watcher_state)
|
||||||
.invoke_handler(tauri::generate_handler![handle_selected_folder])
|
.invoke_handler(tauri::generate_handler![handle_selected_folder])
|
||||||
.setup(|app| {
|
.setup(|app| {
|
||||||
let win_builder =
|
let win_builder = WebviewWindowBuilder::new(app, "main", WebviewUrl::default())
|
||||||
WebviewWindowBuilder::new(app, "main", WebviewUrl::default())
|
|
||||||
.hidden_title(true)
|
|
||||||
.inner_size(480.0, 360.0)
|
.inner_size(480.0, 360.0)
|
||||||
.resizable(false);
|
.resizable(false);
|
||||||
// set transparent title bar only when building for macOS
|
// set transparent title bar only when building for macOS
|
||||||
@ -128,24 +125,24 @@ pub fn run() {
|
|||||||
// set background color only when building for macOS
|
// set background color only when building for macOS
|
||||||
#[cfg(target_os = "macos")]
|
#[cfg(target_os = "macos")]
|
||||||
{
|
{
|
||||||
use cocoa::appkit::{NSColor, NSWindow};
|
use cocoa::appkit::{NSColor, NSWindow};
|
||||||
use cocoa::base::{id, nil};
|
use cocoa::base::{id, nil};
|
||||||
|
|
||||||
let ns_window = window.ns_window().unwrap() as id;
|
let ns_window = window.ns_window().unwrap() as id;
|
||||||
unsafe {
|
unsafe {
|
||||||
let bg_color = NSColor::colorWithRed_green_blue_alpha_(
|
let bg_color = NSColor::colorWithRed_green_blue_alpha_(
|
||||||
nil,
|
nil,
|
||||||
245.0 / 255.0,
|
245.0 / 255.0,
|
||||||
245.0 / 255.0,
|
245.0 / 255.0,
|
||||||
245.0 / 255.0,
|
245.0 / 255.0,
|
||||||
1.0,
|
1.0,
|
||||||
);
|
);
|
||||||
ns_window.setBackgroundColor_(bg_color);
|
ns_window.setBackgroundColor_(bg_color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Ok(())
|
Ok(())
|
||||||
})
|
})
|
||||||
.run(tauri::generate_context!())
|
.run(tauri::generate_context!())
|
||||||
.expect("error while running tauri application");
|
.expect("error while running tauri application");
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,30 +1,30 @@
|
|||||||
{
|
{
|
||||||
"$schema": "https://schema.tauri.app/config/2",
|
"$schema": "https://schema.tauri.app/config/2",
|
||||||
"productName": "haystack",
|
"productName": "haystack",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"identifier": "com.haystack.app",
|
"identifier": "com.haystack.app",
|
||||||
"build": {
|
"build": {
|
||||||
"beforeDevCommand": "bun run dev",
|
"beforeDevCommand": "bun run dev",
|
||||||
"devUrl": "http://localhost:1420",
|
"devUrl": "http://localhost:1420",
|
||||||
"beforeBuildCommand": "bun run build",
|
"beforeBuildCommand": "bun run build",
|
||||||
"frontendDist": "../dist"
|
"frontendDist": "../dist"
|
||||||
},
|
},
|
||||||
"app": {
|
"app": {
|
||||||
"windows": [],
|
"windows": [],
|
||||||
"macOSPrivateApi": true,
|
"macOSPrivateApi": true,
|
||||||
"security": {
|
"security": {
|
||||||
"csp": null
|
"csp": null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"bundle": {
|
"bundle": {
|
||||||
"active": true,
|
"active": true,
|
||||||
"targets": "all",
|
"targets": "all",
|
||||||
"icon": [
|
"icon": [
|
||||||
"icons/32x32.png",
|
"icons/32x32.png",
|
||||||
"icons/128x128.png",
|
"icons/128x128.png",
|
||||||
"icons/128x128@2x.png",
|
"icons/128x128@2x.png",
|
||||||
"icons/icon.icns",
|
"icons/icon.icns",
|
||||||
"icons/icon.ico"
|
"icons/icon.ico"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -4,105 +4,105 @@ import { IconSearch, IconRefresh } from "@tabler/icons-solidjs";
|
|||||||
import clsx from "clsx";
|
import clsx from "clsx";
|
||||||
|
|
||||||
type Emoji = {
|
type Emoji = {
|
||||||
emoji: string;
|
emoji: string;
|
||||||
name: string;
|
name: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const [options, setOptions] = createSignal<Emoji[]>([]);
|
const [options, setOptions] = createSignal<Emoji[]>([]);
|
||||||
const [emoji, setEmoji] = createSignal<Emoji | null>(null);
|
const [emoji, setEmoji] = createSignal<Emoji | null>(null);
|
||||||
|
|
||||||
const emojiData: Emoji[] = [
|
const emojiData: Emoji[] = [
|
||||||
{ emoji: "😀", name: "Grinning Face" },
|
{ emoji: "😀", name: "Grinning Face" },
|
||||||
{ emoji: "😃", name: "Grinning Face with Big Eyes" },
|
{ emoji: "😃", name: "Grinning Face with Big Eyes" },
|
||||||
{ emoji: "😄", name: "Grinning Face with Smiling Eyes" },
|
{ emoji: "😄", name: "Grinning Face with Smiling Eyes" },
|
||||||
{ emoji: "😁", name: "Beaming Face with Smiling Eyes" },
|
{ emoji: "😁", name: "Beaming Face with Smiling Eyes" },
|
||||||
{ emoji: "😆", name: "Grinning Squinting Face" },
|
{ emoji: "😆", name: "Grinning Squinting Face" },
|
||||||
];
|
];
|
||||||
|
|
||||||
const queryEmojiData = (query: string) => {
|
const queryEmojiData = (query: string) => {
|
||||||
return emojiData.filter((emoji) =>
|
return emojiData.filter((emoji) =>
|
||||||
emoji.name.toLowerCase().includes(query.toLowerCase())
|
emoji.name.toLowerCase().includes(query.toLowerCase()),
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<main class="container pt-2">
|
<main class="container pt-2">
|
||||||
<div class="px-4">
|
<div class="px-4">
|
||||||
<Search
|
<Search
|
||||||
triggerMode="focus"
|
triggerMode="focus"
|
||||||
options={options()}
|
options={options()}
|
||||||
onInputChange={(query) => setOptions(queryEmojiData(query))}
|
onInputChange={(query) => setOptions(queryEmojiData(query))}
|
||||||
onChange={(result) => setEmoji(result)}
|
onChange={(result) => setEmoji(result)}
|
||||||
optionValue="name"
|
optionValue="name"
|
||||||
optionLabel="name"
|
optionLabel="name"
|
||||||
placeholder="Search for stuff..."
|
placeholder="Search for stuff..."
|
||||||
itemComponent={(props) => (
|
itemComponent={(props) => (
|
||||||
<Search.Item
|
<Search.Item
|
||||||
item={props.item}
|
item={props.item}
|
||||||
class={clsx(
|
class={clsx(
|
||||||
"text-2xl leading-none text-gray-900 rounded-md p-2 select-none outline-none grid justify-items-center w-[calc(20%-5px)] box-border",
|
"text-2xl leading-none text-gray-900 rounded-md p-2 select-none outline-none grid justify-items-center w-[calc(20%-5px)] box-border",
|
||||||
"hover:bg-gray-100 ui-highlighted:bg-gray-100 ui-highlighted:shadow-[inset_0_0_0_2px_rgb(2,132,199)] ui-disabled:text-gray-400 ui-disabled:opacity-50 ui-disabled:pointer-events-none"
|
"hover:bg-gray-100 ui-highlighted:bg-gray-100 ui-highlighted:shadow-[inset_0_0_0_2px_rgb(2,132,199)] ui-disabled:text-gray-400 ui-disabled:opacity-50 ui-disabled:pointer-events-none",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<Search.ItemLabel class="mx-[-100px]">
|
<Search.ItemLabel class="mx-[-100px]">
|
||||||
{props.item.rawValue.emoji}
|
{props.item.rawValue.emoji}
|
||||||
</Search.ItemLabel>
|
</Search.ItemLabel>
|
||||||
</Search.Item>
|
</Search.Item>
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<Search.Control
|
<Search.Control
|
||||||
class="inline-flex justify-between w-full rounded-xl text-base leading-none outline-none bg-white border border-gray-200 text-gray-900 transition-colors duration-250 ui-invalid:border-red-500 ui-invalid:text-red-500"
|
class="inline-flex justify-between w-full rounded-xl text-base leading-none outline-none bg-white border border-gray-200 text-gray-900 transition-colors duration-250 ui-invalid:border-red-500 ui-invalid:text-red-500"
|
||||||
aria-label="Emoji"
|
aria-label="Emoji"
|
||||||
>
|
>
|
||||||
<Search.Indicator
|
<Search.Indicator
|
||||||
class="appearance-none inline-flex justify-center items-center w-auto outline-none rounded-l-md px-2.5 text-gray-900 text-base leading-none transition-colors duration-250"
|
class="appearance-none inline-flex justify-center items-center w-auto outline-none rounded-l-md px-2.5 text-gray-900 text-base leading-none transition-colors duration-250"
|
||||||
loadingComponent={
|
loadingComponent={
|
||||||
<Search.Icon class="h-5 w-5 grid justify-items-center flex-none">
|
<Search.Icon class="h-5 w-5 grid justify-items-center flex-none">
|
||||||
<IconRefresh size={20} class="m-auto animate-spin" />
|
<IconRefresh size={20} class="m-auto animate-spin" />
|
||||||
</Search.Icon>
|
</Search.Icon>
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<Search.Icon class="h-5 w-5 grid justify-items-center flex-none">
|
<Search.Icon class="h-5 w-5 grid justify-items-center flex-none">
|
||||||
<IconSearch class="m-auto size-5 text-gray-600" />
|
<IconSearch class="m-auto size-5 text-gray-600" />
|
||||||
</Search.Icon>
|
</Search.Icon>
|
||||||
</Search.Indicator>
|
</Search.Indicator>
|
||||||
<Search.Input class="appearance-none inline-flex w-full min-h-[40px] text-base bg-transparent rounded-l-md outline-none placeholder:text-gray-600" />
|
<Search.Input class="appearance-none inline-flex w-full min-h-[40px] text-base bg-transparent rounded-l-md outline-none placeholder:text-gray-600" />
|
||||||
</Search.Control>
|
</Search.Control>
|
||||||
<Search.Portal>
|
<Search.Portal>
|
||||||
<Search.Content
|
<Search.Content
|
||||||
class="bg-white rounded-md border border-gray-200 shadow-md origin-[var(--kb-search-content-transform-origin)] w-[var(--kb-popper-anchor-width)] data-[expanded]:animate-contentShow"
|
class="bg-white rounded-md border border-gray-200 shadow-md origin-[var(--kb-search-content-transform-origin)] w-[var(--kb-popper-anchor-width)] data-[expanded]:animate-contentShow"
|
||||||
onCloseAutoFocus={(e) => e.preventDefault()}
|
onCloseAutoFocus={(e) => e.preventDefault()}
|
||||||
>
|
>
|
||||||
<Search.Listbox class="overflow-y-auto max-h-[360px] p-2 flex flex-row justify-start flex-wrap gap-1.5 leading-none focus:outline-none" />
|
<Search.Listbox class="overflow-y-auto max-h-[360px] p-2 flex flex-row justify-start flex-wrap gap-1.5 leading-none focus:outline-none" />
|
||||||
<Search.NoResult class="text-center p-2 pb-6 m-auto text-gray-600">
|
<Search.NoResult class="text-center p-2 pb-6 m-auto text-gray-600">
|
||||||
😬 No emoji found
|
😬 No emoji found
|
||||||
</Search.NoResult>
|
</Search.NoResult>
|
||||||
</Search.Content>
|
</Search.Content>
|
||||||
</Search.Portal>
|
</Search.Portal>
|
||||||
</Search>
|
</Search>
|
||||||
</div>
|
</div>
|
||||||
{/* <div class="mt-4 text-base leading-none">
|
{/* <div class="mt-4 text-base leading-none">
|
||||||
Emoji selected: {emoji()?.emoji} {emoji()?.name}
|
Emoji selected: {emoji()?.emoji} {emoji()?.name}
|
||||||
</div> */}
|
</div> */}
|
||||||
<div class="px-4 mt-4 bg-white rounded-t-2xl">
|
<div class="px-4 mt-4 bg-white rounded-t-2xl">
|
||||||
<div class="h-[254px] overflow-scroll scrollbar-hide">
|
<div class="h-[254px] overflow-scroll scrollbar-hide">
|
||||||
<div class="w-full grid grid-cols-9 grid-rows-9 gap-2 h-[480px] grid-flow-row-dense py-4">
|
<div class="w-full grid grid-cols-9 grid-rows-9 gap-2 h-[480px] grid-flow-row-dense py-4">
|
||||||
<div class="col-span-3 row-span-3 bg-red-200 rounded-xl" />
|
<div class="col-span-3 row-span-3 bg-red-200 rounded-xl" />
|
||||||
<div class="col-span-3 row-span-3 bg-green-200 rounded-xl" />
|
<div class="col-span-3 row-span-3 bg-green-200 rounded-xl" />
|
||||||
<div class="col-span-6 row-span-3 bg-yellow-200 rounded-xl" />
|
<div class="col-span-6 row-span-3 bg-yellow-200 rounded-xl" />
|
||||||
<div class="col-span-3 row-span-3 bg-green-200 rounded-xl" />
|
<div class="col-span-3 row-span-3 bg-green-200 rounded-xl" />
|
||||||
<div class="col-span-3 row-span-3 bg-blue-200 rounded-xl" />
|
<div class="col-span-3 row-span-3 bg-blue-200 rounded-xl" />
|
||||||
<div class="col-span-3 row-span-3 bg-green-200 rounded-xl" />
|
<div class="col-span-3 row-span-3 bg-green-200 rounded-xl" />
|
||||||
<div class="col-span-6 row-span-3 bg-yellow-200 rounded-xl" />
|
<div class="col-span-6 row-span-3 bg-yellow-200 rounded-xl" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-full border-t h-10 bg-white px-4 border-neutral-100">
|
<div class="w-full border-t h-10 bg-white px-4 border-neutral-100">
|
||||||
footer
|
footer
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default App;
|
export default App;
|
||||||
|
|||||||
@ -3,47 +3,47 @@ import { open } from "@tauri-apps/plugin-dialog";
|
|||||||
import { invoke } from "@tauri-apps/api/core";
|
import { invoke } from "@tauri-apps/api/core";
|
||||||
|
|
||||||
export function FolderPicker() {
|
export function FolderPicker() {
|
||||||
const [selectedPath, setSelectedPath] = createSignal<string>("");
|
const [selectedPath, setSelectedPath] = createSignal<string>("");
|
||||||
const [status, setStatus] = createSignal<string>("");
|
const [status, setStatus] = createSignal<string>("");
|
||||||
|
|
||||||
const handleFolderSelect = async () => {
|
const handleFolderSelect = async () => {
|
||||||
try {
|
try {
|
||||||
const selected = await open({
|
const selected = await open({
|
||||||
directory: true,
|
directory: true,
|
||||||
multiple: false,
|
multiple: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
if (selected) {
|
if (selected) {
|
||||||
setSelectedPath(selected as string);
|
setSelectedPath(selected as string);
|
||||||
// Send the path to Rust
|
// Send the path to Rust
|
||||||
const response = await invoke("handle_selected_folder", {
|
const response = await invoke("handle_selected_folder", {
|
||||||
path: selected,
|
path: selected,
|
||||||
});
|
});
|
||||||
setStatus(`Folder processed: ${response}`);
|
setStatus(`Folder processed: ${response}`);
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
setStatus(`Error: ${error}`);
|
setStatus(`Error: ${error}`);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div class="flex flex-col items-center gap-4">
|
<div class="flex flex-col items-center gap-4">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={handleFolderSelect}
|
onClick={handleFolderSelect}
|
||||||
class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
|
class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
|
||||||
>
|
>
|
||||||
Select Folder
|
Select Folder
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
{selectedPath() && (
|
{selectedPath() && (
|
||||||
<div class="text-left max-w-md">
|
<div class="text-left max-w-md">
|
||||||
<p class="font-semibold">Selected folder:</p>
|
<p class="font-semibold">Selected folder:</p>
|
||||||
<p class="text-sm break-all">{selectedPath()}</p>
|
<p class="text-sm break-all">{selectedPath()}</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{status() && <p class="text-sm text-gray-600">{status()}</p>}
|
{status() && <p class="text-sm text-gray-600">{status()}</p>}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -3,35 +3,35 @@ import { listen } from "@tauri-apps/api/event";
|
|||||||
import { FolderPicker } from "./FolderPicker";
|
import { FolderPicker } from "./FolderPicker";
|
||||||
|
|
||||||
export function ImageViewer() {
|
export function ImageViewer() {
|
||||||
const [latestImage, setLatestImage] = createSignal<string | null>(null);
|
const [latestImage, setLatestImage] = createSignal<string | null>(null);
|
||||||
|
|
||||||
createEffect(() => {
|
createEffect(() => {
|
||||||
// Listen for PNG processing events
|
// Listen for PNG processing events
|
||||||
const unlisten = listen("png-processed", (event) => {
|
const unlisten = listen("png-processed", (event) => {
|
||||||
console.log("Received processed PNG");
|
console.log("Received processed PNG");
|
||||||
const base64Data = event.payload as string;
|
const base64Data = event.payload as string;
|
||||||
setLatestImage(`data:image/png;base64,${base64Data}`);
|
setLatestImage(`data:image/png;base64,${base64Data}`);
|
||||||
});
|
});
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
unlisten.then((fn) => fn()); // Cleanup listener
|
unlisten.then((fn) => fn()); // Cleanup listener
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<FolderPicker />
|
<FolderPicker />
|
||||||
|
|
||||||
{latestImage() && (
|
{latestImage() && (
|
||||||
<div class="mt-4">
|
<div class="mt-4">
|
||||||
<h3>Latest Processed Image:</h3>
|
<h3>Latest Processed Image:</h3>
|
||||||
<img
|
<img
|
||||||
src={latestImage() || undefined}
|
src={latestImage() || undefined}
|
||||||
alt="Latest processed"
|
alt="Latest processed"
|
||||||
class="max-w-md"
|
class="max-w-md"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -3,21 +3,21 @@
|
|||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Manrope";
|
font-family: "Manrope";
|
||||||
src: url("./assets/fonts/Manrope-VariableFont_wght.ttf") format("truetype");
|
src: url("./assets/fonts/Manrope-VariableFont_wght.ttf") format("truetype");
|
||||||
font-weight: 100 900;
|
font-weight: 100 900;
|
||||||
font-display: swap;
|
font-display: swap;
|
||||||
}
|
}
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
@apply bg-neutral-100 text-black rounded-xl;
|
@apply bg-neutral-100 text-black rounded-xl;
|
||||||
font-family: Manrope, sans-serif;
|
font-family: Manrope, sans-serif;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-synthesis: none;
|
font-synthesis: none;
|
||||||
text-rendering: optimizeLegibility;
|
text-rendering: optimizeLegibility;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
-webkit-text-size-adjust: 100%;
|
-webkit-text-size-adjust: 100%;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,15 +1,15 @@
|
|||||||
/** @type {import('tailwindcss').Config} */
|
/** @type {import('tailwindcss').Config} */
|
||||||
export default {
|
export default {
|
||||||
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
|
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
|
||||||
theme: {
|
theme: {
|
||||||
extend: {
|
extend: {
|
||||||
fontFamily: {
|
fontFamily: {
|
||||||
sans: ["Manrope", "sans-serif"],
|
sans: ["Manrope", "sans-serif"],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
require("@kobalte/tailwindcss"),
|
require("@kobalte/tailwindcss"),
|
||||||
require("tailwind-scrollbar-hide"),
|
require("tailwind-scrollbar-hide"),
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,26 +1,26 @@
|
|||||||
{
|
{
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"target": "ES2020",
|
"target": "ES2020",
|
||||||
"useDefineForClassFields": true,
|
"useDefineForClassFields": true,
|
||||||
"module": "ESNext",
|
"module": "ESNext",
|
||||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||||
"skipLibCheck": true,
|
"skipLibCheck": true,
|
||||||
|
|
||||||
/* Bundler mode */
|
/* Bundler mode */
|
||||||
"moduleResolution": "bundler",
|
"moduleResolution": "bundler",
|
||||||
"allowImportingTsExtensions": true,
|
"allowImportingTsExtensions": true,
|
||||||
"resolveJsonModule": true,
|
"resolveJsonModule": true,
|
||||||
"isolatedModules": true,
|
"isolatedModules": true,
|
||||||
"noEmit": true,
|
"noEmit": true,
|
||||||
"jsx": "preserve",
|
"jsx": "preserve",
|
||||||
"jsxImportSource": "solid-js",
|
"jsxImportSource": "solid-js",
|
||||||
|
|
||||||
/* Linting */
|
/* Linting */
|
||||||
"strict": true,
|
"strict": true,
|
||||||
"noUnusedLocals": true,
|
"noUnusedLocals": true,
|
||||||
"noUnusedParameters": true,
|
"noUnusedParameters": true,
|
||||||
"noFallthroughCasesInSwitch": true
|
"noFallthroughCasesInSwitch": true
|
||||||
},
|
},
|
||||||
"include": ["src"],
|
"include": ["src"],
|
||||||
"references": [{ "path": "./tsconfig.node.json" }]
|
"references": [{ "path": "./tsconfig.node.json" }]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,10 +1,10 @@
|
|||||||
{
|
{
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"composite": true,
|
"composite": true,
|
||||||
"skipLibCheck": true,
|
"skipLibCheck": true,
|
||||||
"module": "ESNext",
|
"module": "ESNext",
|
||||||
"moduleResolution": "bundler",
|
"moduleResolution": "bundler",
|
||||||
"allowSyntheticDefaultImports": true
|
"allowSyntheticDefaultImports": true
|
||||||
},
|
},
|
||||||
"include": ["vite.config.ts"]
|
"include": ["vite.config.ts"]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -8,31 +8,31 @@ const host = process.env.TAURI_DEV_HOST;
|
|||||||
|
|
||||||
// https://vitejs.dev/config/
|
// https://vitejs.dev/config/
|
||||||
export default defineConfig(async () => ({
|
export default defineConfig(async () => ({
|
||||||
plugins: [solid()],
|
plugins: [solid()],
|
||||||
css: {
|
css: {
|
||||||
postcss: {
|
postcss: {
|
||||||
plugins: [tailwindcss, autoprefixer],
|
plugins: [tailwindcss, autoprefixer],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
// Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
|
// Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
|
||||||
//
|
//
|
||||||
// 1. prevent vite from obscuring rust errors
|
// 1. prevent vite from obscuring rust errors
|
||||||
clearScreen: false,
|
clearScreen: false,
|
||||||
// 2. tauri expects a fixed port, fail if that port is not available
|
// 2. tauri expects a fixed port, fail if that port is not available
|
||||||
server: {
|
server: {
|
||||||
port: 1420,
|
port: 1420,
|
||||||
strictPort: true,
|
strictPort: true,
|
||||||
host: host || false,
|
host: host || false,
|
||||||
hmr: host
|
hmr: host
|
||||||
? {
|
? {
|
||||||
protocol: "ws",
|
protocol: "ws",
|
||||||
host,
|
host,
|
||||||
port: 1421,
|
port: 1421,
|
||||||
}
|
}
|
||||||
: undefined,
|
: undefined,
|
||||||
watch: {
|
watch: {
|
||||||
// 3. tell vite to ignore watching `src-tauri`
|
// 3. tell vite to ignore watching `src-tauri`
|
||||||
ignored: ["**/src-tauri/**"],
|
ignored: ["**/src-tauri/**"],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}));
|
}));
|
||||||
|
|||||||
Reference in New Issue
Block a user