feat: entity dialog extract out

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 = () => {
                     <Route path="/login" component={Login} />
 
                     <Route path="/" component={ProtectedRoute}>
-                        <Route path="/" component={Search} />
-                        <Route path="/image/:imageId" component={Image} />
+                        <Route path="/" component={WithEntityDialog}>
+                            <Route path="/" component={Search} />
+                            <Route path="/image/imageId" component={Image} />
+                        </Route>
                         <Route path="/settings" component={Settings} />
                     </Route>
                 </Route>

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<UserImage[]>([]);
     const [searchQuery, setSearchQuery] = createSignal("");
-    const [selectedItem, setSelectedItem] = createSignal<UserImage | null>(
-        null,
-    );
+    const setEntity = useSetEntity();
 
     const { images, imagesWithProperties, onRefetchImages } =
         useSearchImageContext();
@@ -146,12 +144,10 @@ export const Search = () => {
                                 <For each={searchResults()}>
                                     {(item) => (
                                         <div
-                                            onClick={() =>
-                                                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 = () => {
                     </p>
                 </div>
             </main>
-            {selectedItem() && (
-                <ItemModal
-                    item={selectedItem() as UserImage}
-                    onClose={() => setSelectedItem(null)}
-                />
-            )}
         </>
     );
 };

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<ParentProps> = (props) => {
+    const [selectedEntity, setSelectedEntity] = createSignal<UserImage>();
+
+    return (
+        <EntityDialogContext.Provider value={setSelectedEntity}>
+            <Show when={selectedEntity()}>
+                {(entity) => (
+                    <ItemModal
+                        item={entity()}
+                        onClose={() => setSelectedEntity(undefined)}
+                    />
+                )}
+            </Show>
+            {props.children}
+        </EntityDialogContext.Provider>
+    );
+};

frontend/src/components/item-modal/ItemModal.tsx

@@ -8,7 +8,7 @@ type Props = {
 
 export const ItemModal = (props: Props) => {
     return (
-        <div class="fixed inset-2 rounded-2xl p-4 bg-white border border-neutral-300">
+        <div class="fixed z-10 inset-2 rounded-2xl p-4 bg-white border border-neutral-300">
             <div class="flex justify-between">
                 <h1 class="text-2xl font-bold">{props.item.data.Name}</h1>
                 <button type="button" onClick={props.onClose}>

frontend/src/components/search-card/SearchCardEvent.tsx

@@ -18,7 +18,7 @@ export const SearchCardEvent = ({ item }: Props) => {
                 {data.Name.length > 0 ? data.Name : "Unknown 🐞"}
             </p>
             <p class="text-xs text-neutral-700">
-                Organized by {data.Organizer?.Name ?? "unknown"} on{" "}
+                On{" "}
                 {data.StartDateTime
                     ? new Date(data.StartDateTime).toLocaleDateString("en-US", {
                           month: "long",