diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 8daef22..f5b69ec 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -23,6 +23,7 @@ import { ImageStatus } from "./components/image-status/ImageStatus"; import { SearchImageContextProvider } from "./contexts/SearchImageContext"; import { type sendImage, sendImageFile } from "./network"; import { Image } from "./Image"; +import { WithEntityDialog } from "./WithEntityDialog"; const currentPlatform = platform(); console.log("Current Platform: ", currentPlatform); @@ -94,8 +95,10 @@ export const App = () => { - - + + + + diff --git a/frontend/src/Search.tsx b/frontend/src/Search.tsx index 39b14f6..3ddf00f 100644 --- a/frontend/src/Search.tsx +++ b/frontend/src/Search.tsx @@ -12,18 +12,16 @@ import { } from "solid-js"; import { SearchCard } from "./components/search-card/SearchCard"; import { invoke } from "@tauri-apps/api/core"; -import { ItemModal } from "./components/item-modal/ItemModal"; 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"; export const Search = () => { const [searchResults, setSearchResults] = createSignal([]); const [searchQuery, setSearchQuery] = createSignal(""); - const [selectedItem, setSelectedItem] = createSignal( - null, - ); + const setEntity = useSetEntity(); const { images, imagesWithProperties, onRefetchImages } = useSearchImageContext(); @@ -146,12 +144,10 @@ export const Search = () => { {(item) => (
- setSelectedItem(item) - } + onClick={() => setEntity(item)} onKeyDown={(e) => { if (e.key === "Enter") { - setSelectedItem(item); + setEntity(item); } }} class="h-[144px] border relative col-span-3 border-neutral-200 cursor-pointer overflow-hidden rounded-xl" @@ -191,12 +187,6 @@ export const Search = () => {

- {selectedItem() && ( - setSelectedItem(null)} - /> - )} ); }; diff --git a/frontend/src/WithEntityDialog.tsx b/frontend/src/WithEntityDialog.tsx new file mode 100644 index 0000000..ebc7026 --- /dev/null +++ b/frontend/src/WithEntityDialog.tsx @@ -0,0 +1,34 @@ +import { + type Component, + type ParentProps, + Show, + createContext, + createSignal, + useContext, +} from "solid-js"; +import { ItemModal } from "./components/item-modal/ItemModal"; +import type { UserImage } from "./network"; + +const EntityDialogContext = createContext< + (image: UserImage | undefined) => void +>(() => {}); + +export const useSetEntity = () => useContext(EntityDialogContext); + +export const WithEntityDialog: Component = (props) => { + const [selectedEntity, setSelectedEntity] = createSignal(); + + return ( + + + {(entity) => ( + setSelectedEntity(undefined)} + /> + )} + + {props.children} + + ); +}; diff --git a/frontend/src/components/item-modal/ItemModal.tsx b/frontend/src/components/item-modal/ItemModal.tsx index 8159ad5..42d70dd 100644 --- a/frontend/src/components/item-modal/ItemModal.tsx +++ b/frontend/src/components/item-modal/ItemModal.tsx @@ -8,7 +8,7 @@ type Props = { export const ItemModal = (props: Props) => { return ( -
+

{props.item.data.Name}