chore: removing dead code and cleaning up UI
This commit is contained in:
@ -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 { ProcessingImages } from "./notifications/ProcessingImages";
|
||||||
import { Categories } from "./front";
|
import { Categories } from "./front";
|
||||||
import { Recent } from "./Recent";
|
import { Recent } from "./Recent";
|
||||||
|
|
||||||
export const Search = () => {
|
export const Search = () => {
|
||||||
const [searchResults, setSearchResults] = createSignal<UserImage[]>([]);
|
|
||||||
const [searchQuery, setSearchQuery] = createSignal("");
|
|
||||||
const setEntity = useSetEntity();
|
|
||||||
|
|
||||||
const { images, imagesWithProperties, onRefetchImages } =
|
|
||||||
useSearchImageContext();
|
|
||||||
|
|
||||||
let fuze = new Fuse<UserImage>(images(), {
|
|
||||||
keys: [
|
|
||||||
{ name: "rawData", weight: 1 },
|
|
||||||
{ name: "title", weight: 1 },
|
|
||||||
],
|
|
||||||
threshold: 0.4,
|
|
||||||
});
|
|
||||||
|
|
||||||
createEffect(() => {
|
|
||||||
setSearchResults(images());
|
|
||||||
|
|
||||||
fuze = new Fuse<UserImage>(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<Shortcut>([]);
|
|
||||||
|
|
||||||
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 (
|
return (
|
||||||
<>
|
<main class="container pt-2">
|
||||||
<main class="container pt-2">
|
<ProcessingImages />
|
||||||
<ProcessingImages />
|
<Categories />
|
||||||
|
<Recent />
|
||||||
<Categories />
|
</main>
|
||||||
|
|
||||||
<Recent />
|
|
||||||
|
|
||||||
<div class="px-4 flex items-center">
|
|
||||||
<div class="inline-flex justify-between w-full rounded-xl text-base leading-none outline-none bg-white border border-neutral-200 text-neutral-900">
|
|
||||||
<div class="appearance-none inline-flex justify-center items-center w-auto outline-none rounded-md px-2.5 text-gray-900">
|
|
||||||
<IconSearch size={20} class="m-auto size-5 text-neutral-600" />
|
|
||||||
</div>
|
|
||||||
<input
|
|
||||||
ref={searchInputRef}
|
|
||||||
type="text"
|
|
||||||
value={searchQuery()}
|
|
||||||
onInput={onInputChange}
|
|
||||||
placeholder="Search for stuff..."
|
|
||||||
autofocus
|
|
||||||
class="appearance-none inline-flex w-full min-h-[40px] text-base bg-transparent rounded-l-md outline-none placeholder:text-gray-600"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
class="ml-2 p-2.5 bg-neutral-200 rounded-lg"
|
|
||||||
onClick={onRefetchImages}
|
|
||||||
>
|
|
||||||
<IconRefresh size={20} />
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
as="a"
|
|
||||||
href="/settings"
|
|
||||||
class="ml-2 p-2.5 bg-neutral-200 rounded-lg"
|
|
||||||
>
|
|
||||||
<IconSettings size={20} />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="px-4 mt-4 bg-white rounded-t-2xl">
|
|
||||||
<div class="mt-4 overflow-scroll scrollbar-hide">
|
|
||||||
<Show
|
|
||||||
when={searchResults().length > 0}
|
|
||||||
fallback={
|
|
||||||
<div class="text-center text-lg m-auto mt-6 text-neutral-700">
|
|
||||||
No results found
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<div class="w-full grid grid-cols-9 gap-2 grid-flow-row-dense py-4">
|
|
||||||
<For each={searchResults()}>
|
|
||||||
{(item) => (
|
|
||||||
<div
|
|
||||||
onClick={() => 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"
|
|
||||||
>
|
|
||||||
<span class="sr-only">{item.data.Name}</span>
|
|
||||||
<SearchCard item={item} />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</For>
|
|
||||||
</div>
|
|
||||||
</Show>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h2 class="text-xl">Images</h2>
|
|
||||||
|
|
||||||
<div class="w-full grid grid-cols-9 gap-2 grid-flow-row-dense py-4">
|
|
||||||
<For each={Object.keys(imagesWithProperties())}>
|
|
||||||
{(imageId) => (
|
|
||||||
<A href={`/image/${imageId}`}>
|
|
||||||
<img
|
|
||||||
alt="One of the users images"
|
|
||||||
src={`${base}/image/${imageId}`}
|
|
||||||
/>
|
|
||||||
</A>
|
|
||||||
)}
|
|
||||||
</For>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="w-full border-t h-10 bg-white px-4 flex items-center border-neutral-100">
|
|
||||||
<p class="text-sm text-neutral-700">
|
|
||||||
Use {shortcut().length > 0 ? shortcut().join("+") : "shortcut"}{" "}
|
|
||||||
globally to toggle and reload this window
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,33 +1,28 @@
|
|||||||
import { Button } from "@kobalte/core/button";
|
import { Button } from "@kobalte/core/button";
|
||||||
import { FolderPicker } from "./components/folder-picker/FolderPicker";
|
|
||||||
import { Shortcuts } from "./components/shortcuts/Shortcuts";
|
import { Shortcuts } from "./components/shortcuts/Shortcuts";
|
||||||
|
|
||||||
export const Settings = () => {
|
export const Settings = () => {
|
||||||
const logout = () => {
|
const logout = () => {
|
||||||
localStorage.removeItem("access");
|
localStorage.removeItem("access");
|
||||||
localStorage.removeItem("refresh");
|
localStorage.removeItem("refresh");
|
||||||
window.location.href = "/login";
|
window.location.href = "/login";
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<main class="container pt-2">
|
<main class="container pt-2">
|
||||||
<div class="flex flex-col px-4 gap-2">
|
<div class="flex flex-col px-4 gap-2">
|
||||||
<Button as="a" href="/">
|
<h1 class="text-3xl font-bold">Settings</h1>
|
||||||
Back to home
|
|
||||||
</Button>
|
|
||||||
<h1 class="text-3xl font-bold">Settings</h1>
|
|
||||||
|
|
||||||
<FolderPicker />
|
<Shortcuts />
|
||||||
<Shortcuts />
|
<Button
|
||||||
<Button
|
class="p-2 bg-neutral-100 border mt-4 border-neutral-300"
|
||||||
class="p-2 bg-neutral-100 border mt-4 border-neutral-300"
|
onClick={logout}
|
||||||
onClick={logout}
|
>
|
||||||
>
|
Logout
|
||||||
Logout
|
</Button>
|
||||||
</Button>
|
</div>
|
||||||
</div>
|
</main>
|
||||||
</main>
|
</>
|
||||||
</>
|
);
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|||||||
@ -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<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,
|
|
||||||
});
|
|
||||||
|
|
||||||
console.log("DBG: ", response);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error("DBG: ", error);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div class="flex flex-col items-start gap-2">
|
|
||||||
<p class="text-sm text-neutral-700">
|
|
||||||
Select the folder where your screenshots are stored. We'll watch
|
|
||||||
this folder for any changes and process any new screenshots.
|
|
||||||
</p>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={handleFolderSelect}
|
|
||||||
class="bg-neutral-100 border border-neutral-300 rounded-md px-2 py-1"
|
|
||||||
>
|
|
||||||
Select folder
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{selectedPath() && (
|
|
||||||
<div class="text-left max-w-md">
|
|
||||||
<p class="text-sm break-all">{selectedPath()}</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -2,7 +2,7 @@ import { Component } from "solid-js";
|
|||||||
import { base } from "../../network";
|
import { base } from "../../network";
|
||||||
import { A } from "@solidjs/router";
|
import { A } from "@solidjs/router";
|
||||||
|
|
||||||
export const Image: Component<{ ID: string }> = (props) => {
|
export const ImageComponent: Component<{ ID: string }> = (props) => {
|
||||||
return (
|
return (
|
||||||
<A href={`/image/${props.ID}`}>
|
<A href={`/image/${props.ID}`}>
|
||||||
<img src={`${base}/image/${props.ID}`} />
|
<img src={`${base}/image/${props.ID}`} />
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
import { Component, For } from "solid-js";
|
import { Component, For } from "solid-js";
|
||||||
import { useSearchImageContext } from "./contexts/SearchImageContext";
|
import { useSearchImageContext } from "../contexts/SearchImageContext";
|
||||||
import { Image } from "./components/image";
|
import { ImageComponent } from "../components/image";
|
||||||
|
|
||||||
export const Recent: Component = () => {
|
export const Recent: Component = () => {
|
||||||
const { userImages } = useSearchImageContext();
|
const { userImages } = useSearchImageContext();
|
||||||
@ -16,7 +16,9 @@ export const Recent: Component = () => {
|
|||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<h2>Recent</h2>
|
<h2>Recent</h2>
|
||||||
<For each={latestImages()}>{(image) => <Image ID={image.ImageID} />}</For>
|
<For each={latestImages()}>
|
||||||
|
{(image) => <ImageComponent ID={image.ImageID} />}
|
||||||
|
</For>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
43
frontend/src/front/gallery.tsx
Normal file
43
frontend/src/front/gallery.tsx
Normal file
@ -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<SearchImageStore["categories"]>,
|
||||||
|
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 (
|
||||||
|
<div class="w-full grid grid-cols-4 auto-rows-[minmax(100px,1fr)] gap-4 rounded-xl bg-white p-4">
|
||||||
|
<For each={Object.entries(categories())}>
|
||||||
|
{([category, group]) => (
|
||||||
|
<A
|
||||||
|
href={`/gallery/${category}`}
|
||||||
|
class={
|
||||||
|
"col-span-2 flex flex-col justify-center items-center rounded-lg p-4 border border-neutral-200 " +
|
||||||
|
"capitalize " +
|
||||||
|
CategoryColor[category as keyof typeof CategoryColor] +
|
||||||
|
" " +
|
||||||
|
(group.length === 0 ? "row-span-1 order-10" : "row-span-2")
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<p class="text-xl font-bold">{category}s</p>
|
||||||
|
<p class="text-lg">{group.length}</p>
|
||||||
|
</A>
|
||||||
|
)}
|
||||||
|
</For>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@ -1,43 +1 @@
|
|||||||
import { Component, For } from "solid-js";
|
export * from "./page";
|
||||||
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<SearchImageStore["categories"]>,
|
|
||||||
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 (
|
|
||||||
<div class="w-full grid grid-cols-4 auto-rows-[minmax(100px,1fr)] gap-4 rounded-xl bg-white p-4">
|
|
||||||
<For each={Object.entries(categories())}>
|
|
||||||
{([category, group]) => (
|
|
||||||
<A
|
|
||||||
href={`/gallery/${category}`}
|
|
||||||
class={
|
|
||||||
"col-span-2 flex flex-col justify-center items-center rounded-lg p-4 border border-neutral-200 " +
|
|
||||||
"capitalize " +
|
|
||||||
CategoryColor[category as keyof typeof CategoryColor] +
|
|
||||||
" " +
|
|
||||||
(group.length === 0 ? "row-span-1 order-10" : "row-span-2")
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<p class="text-xl font-bold">{category}s</p>
|
|
||||||
<p class="text-lg">{group.length}</p>
|
|
||||||
</A>
|
|
||||||
)}
|
|
||||||
</For>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|||||||
11
frontend/src/front/page.tsx
Normal file
11
frontend/src/front/page.tsx
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import { Categories } from "./gallery";
|
||||||
|
import { Recent } from "./Recent";
|
||||||
|
|
||||||
|
export const Search = () => {
|
||||||
|
return (
|
||||||
|
<main class="container pt-2">
|
||||||
|
<Categories />
|
||||||
|
<Recent />
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user