wip: different UI
fix
This commit is contained in:
@ -3,12 +3,12 @@ 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,
|
||||
For,
|
||||
Show,
|
||||
createEffect,
|
||||
createSignal,
|
||||
onCleanup,
|
||||
onMount,
|
||||
} from "solid-js";
|
||||
import { SearchCard } from "./components/search-card/SearchCard";
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
@ -18,180 +18,175 @@ import { useSearchImageContext } from "./contexts/SearchImageContext";
|
||||
import { A } from "@solidjs/router";
|
||||
import { useSetEntity } from "./WithEntityDialog";
|
||||
import { ProcessingImages } from "./notifications/ProcessingImages";
|
||||
import { Categories } from "./front";
|
||||
|
||||
export const Search = () => {
|
||||
const [searchResults, setSearchResults] = createSignal<UserImage[]>([]);
|
||||
const [searchQuery, setSearchQuery] = createSignal("");
|
||||
const setEntity = useSetEntity();
|
||||
const [searchResults, setSearchResults] = createSignal<UserImage[]>([]);
|
||||
const [searchQuery, setSearchQuery] = createSignal("");
|
||||
const setEntity = useSetEntity();
|
||||
|
||||
const { images, imagesWithProperties, onRefetchImages } =
|
||||
useSearchImageContext();
|
||||
const { images, imagesWithProperties, onRefetchImages } =
|
||||
useSearchImageContext();
|
||||
|
||||
let fuze = new Fuse<UserImage>(images(), {
|
||||
keys: [
|
||||
{ name: "rawData", weight: 1 },
|
||||
{ name: "title", weight: 1 },
|
||||
],
|
||||
threshold: 0.4,
|
||||
});
|
||||
let fuze = new Fuse<UserImage>(images(), {
|
||||
keys: [
|
||||
{ name: "rawData", weight: 1 },
|
||||
{ name: "title", weight: 1 },
|
||||
],
|
||||
threshold: 0.4,
|
||||
});
|
||||
|
||||
createEffect(() => {
|
||||
setSearchResults(images());
|
||||
createEffect(() => {
|
||||
setSearchResults(images());
|
||||
|
||||
fuze = new Fuse<UserImage>(images(), {
|
||||
keys: [
|
||||
{ name: "data.Name", weight: 2 },
|
||||
{ name: "rawData", weight: 1 },
|
||||
],
|
||||
threshold: 0.6,
|
||||
});
|
||||
});
|
||||
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;
|
||||
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));
|
||||
}
|
||||
};
|
||||
if (query.length === 0) {
|
||||
setSearchResults(images());
|
||||
} else {
|
||||
setSearchQuery(query);
|
||||
setSearchResults(fuze.search(query).map((s) => s.item));
|
||||
}
|
||||
};
|
||||
|
||||
let searchInputRef: HTMLInputElement | undefined;
|
||||
let searchInputRef: HTMLInputElement | undefined;
|
||||
|
||||
onMount(() => {
|
||||
if (searchInputRef) {
|
||||
searchInputRef.focus();
|
||||
}
|
||||
});
|
||||
onMount(() => {
|
||||
if (searchInputRef) {
|
||||
searchInputRef.focus();
|
||||
}
|
||||
});
|
||||
|
||||
createEffect(() => {
|
||||
// Listen for the focus-search event from Tauri
|
||||
const unlisten = listen("focus-search", () => {
|
||||
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());
|
||||
});
|
||||
});
|
||||
onCleanup(() => {
|
||||
unlisten.then((fn) => fn());
|
||||
});
|
||||
});
|
||||
|
||||
const [shortcut, setShortcut] = createSignal<Shortcut>([]);
|
||||
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);
|
||||
}
|
||||
}
|
||||
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();
|
||||
});
|
||||
onMount(() => {
|
||||
getCurrentShortcut();
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<main class="container pt-2">
|
||||
<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>
|
||||
return (
|
||||
<>
|
||||
<main class="container pt-2">
|
||||
<ProcessingImages />
|
||||
|
||||
<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>
|
||||
<Categories />
|
||||
|
||||
<ProcessingImages />
|
||||
<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>
|
||||
|
||||
<h2 class="text-xl">Images</h2>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<h2 class="text-xl">Images</h2>
|
||||
|
||||
<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>
|
||||
</>
|
||||
);
|
||||
<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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -7,7 +7,7 @@ import {
|
||||
createResource,
|
||||
useContext,
|
||||
} from "solid-js";
|
||||
import { getUserImages } from "../network";
|
||||
import { CategoryUnion, getUserImages } from "../network";
|
||||
import { groupPropertiesWithImage } from "../utils/groupPropertiesWithImage";
|
||||
|
||||
export type ImageWithRawData = Awaited<
|
||||
@ -16,7 +16,16 @@ export type ImageWithRawData = Awaited<
|
||||
rawData: string[];
|
||||
};
|
||||
|
||||
type SearchImageStore = {
|
||||
type TaggedCategory<T extends CategoryUnion["type"]> = Extract<
|
||||
CategoryUnion,
|
||||
{ type: T }
|
||||
>["data"];
|
||||
|
||||
type CategoriesSpecificData = {
|
||||
[K in CategoryUnion["type"]]: Array<TaggedCategory<K>>;
|
||||
};
|
||||
|
||||
export type SearchImageStore = {
|
||||
images: Accessor<ImageWithRawData[]>;
|
||||
|
||||
imagesWithProperties: Accessor<ReturnType<typeof groupPropertiesWithImage>>;
|
||||
@ -24,6 +33,8 @@ type SearchImageStore = {
|
||||
Awaited<ReturnType<typeof getUserImages>>["ProcessingImages"] | undefined
|
||||
>;
|
||||
|
||||
categories: Accessor<CategoriesSpecificData>;
|
||||
|
||||
onRefetchImages: () => void;
|
||||
};
|
||||
|
||||
@ -87,6 +98,25 @@ export const SearchImageContextProvider: Component<ParentProps> = (props) => {
|
||||
return groupPropertiesWithImage(d);
|
||||
});
|
||||
|
||||
const categories = createMemo(() => {
|
||||
const c: ReturnType<SearchImageStore["categories"]> = {
|
||||
contact: [],
|
||||
event: [],
|
||||
location: [],
|
||||
note: [],
|
||||
};
|
||||
|
||||
for (const category of data()?.ImageProperties ?? []) {
|
||||
if (category.type === "location" || category.type === "contact") {
|
||||
continue;
|
||||
}
|
||||
|
||||
c[category.type].push(category.data as any);
|
||||
}
|
||||
|
||||
return c;
|
||||
});
|
||||
|
||||
return (
|
||||
<SearchImageContext.Provider
|
||||
value={{
|
||||
@ -94,6 +124,7 @@ export const SearchImageContextProvider: Component<ParentProps> = (props) => {
|
||||
imagesWithProperties: imagesWithProperties,
|
||||
processingImages,
|
||||
onRefetchImages: refetch,
|
||||
categories,
|
||||
}}
|
||||
>
|
||||
{props.children}
|
||||
|
||||
44
frontend/src/front/index.tsx
Normal file
44
frontend/src/front/index.tsx
Normal file
@ -0,0 +1,44 @@
|
||||
import { Component, createEffect, For } from "solid-js";
|
||||
import {
|
||||
SearchImageStore,
|
||||
useSearchImageContext,
|
||||
} from "../contexts/SearchImageContext";
|
||||
|
||||
const CategoryColor: Record<
|
||||
keyof ReturnType<SearchImageStore["categories"]>,
|
||||
string
|
||||
> = {
|
||||
contact: "bg-red-500",
|
||||
location: "bg-green-500",
|
||||
event: "bg-blue-500",
|
||||
note: "bg-purple-500",
|
||||
};
|
||||
|
||||
export const Categories: Component = () => {
|
||||
const { categories } = useSearchImageContext();
|
||||
|
||||
createEffect(() => {
|
||||
console.log(categories());
|
||||
});
|
||||
|
||||
return (
|
||||
<div class="w-full grid grid-cols-4 auto-rows-[minmax(100px,1fr)] gap-2">
|
||||
<For each={Object.entries(categories())}>
|
||||
{([category, group]) => (
|
||||
<div
|
||||
class={
|
||||
"col-span-2 flex flex-col " +
|
||||
CategoryColor[category as keyof typeof CategoryColor] +
|
||||
" " +
|
||||
(group.length === 0 ? "row-span-1 order-10" : "row-span-2")
|
||||
}
|
||||
>
|
||||
<p class="uppercase">
|
||||
{category}: {group.length}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -154,6 +154,8 @@ const dataTypeValidator = variant("type", [
|
||||
contactDataType,
|
||||
]);
|
||||
|
||||
export type CategoryUnion = InferOutput<typeof dataTypeValidator>;
|
||||
|
||||
const userImageValidator = strictObject({
|
||||
ID: pipe(string(), uuid()),
|
||||
CreatedAt: pipe(string()),
|
||||
|
||||
Reference in New Issue
Block a user