From 00e530df4b9a490ff22693fc87d7479f0b91cb80 Mon Sep 17 00:00:00 2001 From: John Costa Date: Fri, 18 Jul 2025 13:48:06 +0100 Subject: [PATCH] feat: navigation for image and entities instead of a modal --- frontend/src/App.tsx | 17 +- frontend/src/Entity.tsx | 28 ++++ .../src/components/item-modal/ItemModal.tsx | 149 +++++++++--------- .../src/components/search-card/SearchCard.tsx | 8 +- 4 files changed, 122 insertions(+), 80 deletions(-) create mode 100644 frontend/src/Entity.tsx diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 8e29e40..0a88f49 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,4 +1,4 @@ -import { A, Navigate, Route, Router } from "@solidjs/router"; +import { A, Navigate, Route, Router, useNavigate } from "@solidjs/router"; import type { PluginListener } from "@tauri-apps/api/core"; import { listen } from "@tauri-apps/api/event"; import { readFile } from "@tauri-apps/plugin-fs"; @@ -23,7 +23,13 @@ import { sendImageFile } from "./network"; import { Image } from "./Image"; import { WithEntityDialog } from "./WithEntityDialog"; import { Gallery } from "./gallery"; -import { IconHome, IconPhoto, IconSearch } from "@tabler/icons-solidjs"; +import { + IconArrowLeft, + IconHome, + IconPhoto, + IconSearch, +} from "@tabler/icons-solidjs"; +import { Entity } from "./Entity"; const currentPlatform = platform(); console.log("Current Platform: ", currentPlatform); @@ -35,8 +41,14 @@ const AppWrapper: Component = (props) => { }; const WithDock: Component = (props) => { + const nav = useNavigate(); + return (
+ {/* TODO: this should only show up when NOT on the home page. */} +
nav(-1)}> + +
{props.children}
@@ -110,6 +122,7 @@ export const App = () => { + diff --git a/frontend/src/Entity.tsx b/frontend/src/Entity.tsx new file mode 100644 index 0000000..ef03bd5 --- /dev/null +++ b/frontend/src/Entity.tsx @@ -0,0 +1,28 @@ +import { useParams } from "@solidjs/router"; +import { Component, For, Show } from "solid-js"; +import { ConcreteItemModal } from "./components/item-modal/ItemModal"; +import { useSearchImageContext } from "./contexts/SearchImageContext"; + +export const Entity: Component = () => { + const params = useParams<{ entityId: string }>(); + + const { images } = useSearchImageContext(); + + const entity = () => images().find((i) => i.data.ID === params.entityId); + + return ( +
+ Sorry, this entity could not be found} + > + {(e) => ( +
+ + {(imageId) =>

{imageId}

} +
+ )} + +
+ ); +}; diff --git a/frontend/src/components/item-modal/ItemModal.tsx b/frontend/src/components/item-modal/ItemModal.tsx index fb188f0..a25ec6d 100644 --- a/frontend/src/components/item-modal/ItemModal.tsx +++ b/frontend/src/components/item-modal/ItemModal.tsx @@ -4,92 +4,89 @@ import { Show, type Component } from "solid-js"; import SolidjsMarkdown from "solidjs-markdown"; type Props = { - item: UserImage; - onClose: () => void; + item: UserImage; + onClose: () => void; }; const NullableParagraph: Component<{ - item: string | null; - itemTitle: string; + item: string | null; + itemTitle: string; }> = (props) => { - return ( - - {(item) => ( - <> -

{props.itemTitle}

-

{item()}

- - )} - - ); + return ( + + {(item) => ( + <> +

{props.itemTitle}

+

{item()}

+ + )} + + ); }; -const ConcreteItemModal: Component> = (props) => { - switch (props.item.type) { - case "note": - return ( - - {props.item.data.Content.slice( - "```markdown".length, - props.item.data.Content.length - "```".length, - )} - - ); - case "location": - return ( -
-

Address

-

{props.item.data.Address}

-
- ); - case "event": - return ( -
-

Event

-

{props.item.data.Name}

+export const ConcreteItemModal: Component> = (props) => { + switch (props.item.type) { + case "note": + return ( + + {props.item.data.Content.slice( + "```markdown".length, + props.item.data.Content.length - "```".length, + )} + + ); + case "location": + return ( +
+

Address

+

{props.item.data.Address}

+
+ ); + case "event": + return ( +
+

Event

+

{props.item.data.Name}

- - -
- ); - case "contact": - return ( -
-

Contact

-

{props.item.data.Name}

+ + +
+ ); + case "contact": + return ( +
+

Contact

+

{props.item.data.Name}

- + - -
- ); - } + +
+ ); + } }; export const ItemModal: Component = (props) => { - return ( -
-
-

{props.item.data.Name}

- -
-
- -
-
- ); + return ( +
+
+

{props.item.data.Name}

+ +
+
+ +
+
+ ); }; diff --git a/frontend/src/components/search-card/SearchCard.tsx b/frontend/src/components/search-card/SearchCard.tsx index 1c4b2da..4f93ba8 100644 --- a/frontend/src/components/search-card/SearchCard.tsx +++ b/frontend/src/components/search-card/SearchCard.tsx @@ -1,3 +1,4 @@ +import { A } from "@solidjs/router"; import type { UserImage } from "../../network"; import { SearchCardContact } from "./SearchCardContact"; import { SearchCardEvent } from "./SearchCardEvent"; @@ -23,8 +24,11 @@ const UnwrappedSearchCard = (props: { item: UserImage }) => { export const SearchCard = (props: { item: UserImage }) => { return ( -
+ -
+ ); };