diff --git a/frontend/src/Search.tsx b/frontend/src/Search.tsx index dad74c7..c33899c 100644 --- a/frontend/src/Search.tsx +++ b/frontend/src/Search.tsx @@ -1,195 +1,13 @@ -import { Button } from "@kobalte/core/button"; -import { IconRefresh, IconSearch, IconSettings } from "@tabler/icons-solidjs"; -import { listen } from "@tauri-apps/api/event"; -import Fuse from "fuse.js"; -import { - For, - Show, - createEffect, - createSignal, - onCleanup, - onMount, -} from "solid-js"; -import { SearchCard } from "./components/search-card/SearchCard"; -import { invoke } from "@tauri-apps/api/core"; -import type { Shortcut } from "./components/shortcuts/hooks/useShortcutEditor"; -import { base, type UserImage } from "./network"; -import { useSearchImageContext } from "./contexts/SearchImageContext"; -import { A } from "@solidjs/router"; -import { useSetEntity } from "./WithEntityDialog"; import { ProcessingImages } from "./notifications/ProcessingImages"; import { Categories } from "./front"; import { Recent } from "./Recent"; export const Search = () => { - const [searchResults, setSearchResults] = createSignal([]); - const [searchQuery, setSearchQuery] = createSignal(""); - const setEntity = useSetEntity(); - - const { images, imagesWithProperties, onRefetchImages } = - useSearchImageContext(); - - let fuze = new Fuse(images(), { - keys: [ - { name: "rawData", weight: 1 }, - { name: "title", weight: 1 }, - ], - threshold: 0.4, - }); - - createEffect(() => { - setSearchResults(images()); - - fuze = new Fuse(images(), { - keys: [ - { name: "data.Name", weight: 2 }, - { name: "rawData", weight: 1 }, - ], - threshold: 0.6, - }); - }); - - const onInputChange = (event: InputEvent) => { - const query = (event.target as HTMLInputElement).value; - - if (query.length === 0) { - setSearchResults(images()); - } else { - setSearchQuery(query); - setSearchResults(fuze.search(query).map((s) => s.item)); - } - }; - - let searchInputRef: HTMLInputElement | undefined; - - onMount(() => { - if (searchInputRef) { - searchInputRef.focus(); - } - }); - - createEffect(() => { - // Listen for the focus-search event from Tauri - const unlisten = listen("focus-search", () => { - if (searchInputRef) { - searchInputRef.focus(); - } - }); - - onCleanup(() => { - unlisten.then((fn) => fn()); - }); - }); - - const [shortcut, setShortcut] = createSignal([]); - - async function getCurrentShortcut() { - try { - const res: string = await invoke("get_current_shortcut"); - console.log("DBG: ", res); - setShortcut(res?.split("+")); - } catch (err) { - console.error("Failed to fetch shortcut:", err); - } - } - - onMount(() => { - getCurrentShortcut(); - }); - return ( - <> -
- - - - - - -
-
-
- -
- -
- - -
- -
-
- 0} - fallback={ -
- No results found -
- } - > -
- - {(item) => ( -
setEntity(item)} - onKeyDown={(e) => { - if (e.key === "Enter") { - setEntity(item); - } - }} - class="h-[144px] border relative col-span-3 border-neutral-200 cursor-pointer overflow-hidden rounded-xl" - > - {item.data.Name} - -
- )} - -
- -
-
- -

Images

- -
- - {(imageId) => ( - - One of the users images - - )} - -
- -
-

- Use {shortcut().length > 0 ? shortcut().join("+") : "shortcut"}{" "} - globally to toggle and reload this window -

-
-
- +
+ + + +
); }; diff --git a/frontend/src/Settings.tsx b/frontend/src/Settings.tsx index 995779b..2dc3391 100644 --- a/frontend/src/Settings.tsx +++ b/frontend/src/Settings.tsx @@ -1,33 +1,28 @@ import { Button } from "@kobalte/core/button"; -import { FolderPicker } from "./components/folder-picker/FolderPicker"; import { Shortcuts } from "./components/shortcuts/Shortcuts"; export const Settings = () => { - const logout = () => { - localStorage.removeItem("access"); - localStorage.removeItem("refresh"); - window.location.href = "/login"; - }; + const logout = () => { + localStorage.removeItem("access"); + localStorage.removeItem("refresh"); + window.location.href = "/login"; + }; - return ( - <> -
-
- -

Settings

+ return ( + <> +
+
+

Settings

- - - -
-
- - ); + + +
+
+ + ); }; diff --git a/frontend/src/components/folder-picker/FolderPicker.tsx b/frontend/src/components/folder-picker/FolderPicker.tsx deleted file mode 100644 index 926bf07..0000000 --- a/frontend/src/components/folder-picker/FolderPicker.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import { invoke } from "@tauri-apps/api/core"; -import { open } from "@tauri-apps/plugin-dialog"; -import { createSignal } from "solid-js"; - -export function FolderPicker() { - const [selectedPath, setSelectedPath] = createSignal(""); - - 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, - }); - - console.log("DBG: ", response); - } - } catch (error) { - console.error("DBG: ", error); - } - }; - - return ( -
-

- Select the folder where your screenshots are stored. We'll watch - this folder for any changes and process any new screenshots. -

-
- - - {selectedPath() && ( -
-

{selectedPath()}

-
- )} -
-
- ); -} diff --git a/frontend/src/components/image/index.tsx b/frontend/src/components/image/index.tsx index 9b9f8ab..9d6a036 100644 --- a/frontend/src/components/image/index.tsx +++ b/frontend/src/components/image/index.tsx @@ -2,7 +2,7 @@ import { Component } from "solid-js"; import { base } from "../../network"; import { A } from "@solidjs/router"; -export const Image: Component<{ ID: string }> = (props) => { +export const ImageComponent: Component<{ ID: string }> = (props) => { return ( diff --git a/frontend/src/Recent.tsx b/frontend/src/front/Recent.tsx similarity index 61% rename from frontend/src/Recent.tsx rename to frontend/src/front/Recent.tsx index b9daacb..386a2c0 100644 --- a/frontend/src/Recent.tsx +++ b/frontend/src/front/Recent.tsx @@ -1,6 +1,6 @@ import { Component, For } from "solid-js"; -import { useSearchImageContext } from "./contexts/SearchImageContext"; -import { Image } from "./components/image"; +import { useSearchImageContext } from "../contexts/SearchImageContext"; +import { ImageComponent } from "../components/image"; export const Recent: Component = () => { const { userImages } = useSearchImageContext(); @@ -16,7 +16,9 @@ export const Recent: Component = () => { return (

Recent

- {(image) => } + + {(image) => } +
); }; diff --git a/frontend/src/front/gallery.tsx b/frontend/src/front/gallery.tsx new file mode 100644 index 0000000..da070cc --- /dev/null +++ b/frontend/src/front/gallery.tsx @@ -0,0 +1,43 @@ +import { Component, For } from "solid-js"; +import { + SearchImageStore, + useSearchImageContext, +} from "../contexts/SearchImageContext"; +import { A } from "@solidjs/router"; + +// TODO: lots of stuff to do with Entities, this could be seperated into a centralized place. +const CategoryColor: Record< + keyof ReturnType, + string +> = { + contact: "bg-orange-50", + location: "bg-red-50", + event: "bg-purple-50", + note: "bg-green-50", +}; + +export const Categories: Component = () => { + const { categories } = useSearchImageContext(); + + return ( +
+ + {([category, group]) => ( + +

{category}s

+

{group.length}

+ + )} + +
+ ); +}; diff --git a/frontend/src/front/index.tsx b/frontend/src/front/index.tsx index da070cc..4962a1f 100644 --- a/frontend/src/front/index.tsx +++ b/frontend/src/front/index.tsx @@ -1,43 +1 @@ -import { Component, For } from "solid-js"; -import { - SearchImageStore, - useSearchImageContext, -} from "../contexts/SearchImageContext"; -import { A } from "@solidjs/router"; - -// TODO: lots of stuff to do with Entities, this could be seperated into a centralized place. -const CategoryColor: Record< - keyof ReturnType, - string -> = { - contact: "bg-orange-50", - location: "bg-red-50", - event: "bg-purple-50", - note: "bg-green-50", -}; - -export const Categories: Component = () => { - const { categories } = useSearchImageContext(); - - return ( -
- - {([category, group]) => ( - -

{category}s

-

{group.length}

- - )} - -
- ); -}; +export * from "./page"; diff --git a/frontend/src/front/page.tsx b/frontend/src/front/page.tsx new file mode 100644 index 0000000..bcba27e --- /dev/null +++ b/frontend/src/front/page.tsx @@ -0,0 +1,11 @@ +import { Categories } from "./gallery"; +import { Recent } from "./Recent"; + +export const Search = () => { + return ( +
+ + +
+ ); +};