JohnCosta27/Haystack
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

refactor: moving dock and topbar together with app wrapper

Browse Source
This commit is contained in:
John Costa
2025-07-18 15:36:20 +01:00
parent 5130691ab9
commit 6e2c6acd9d
5 changed files with 49 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/App.tsx
View File

@ -12,7 +12,6 @@ import { SearchImageContextProvider } from "@contexts/SearchImageContext";
import { WithNotifications } from "@contexts/Notifications";
import { ProtectedRoute } from "@components/protected-route";
import { AppWrapper } from "@components/app-wrapper";
import { WithDock } from "@components/dock";
export const App = () => {
onAndroidMount();
@ -25,14 +24,12 @@ export const App = () => {
<Route path="/" component={ProtectedRoute}>
<Route path="/" component={WithNotifications}>
<Route path="/" component={WithDock}>
<Route path="/" component={FrontPage} />
<Route path="/image/:imageId" component={ImagePage} />
<Route path="/entity/:entityId" component={Entity} />
<Route path="/gallery/:entity" component={Gallery} />
</Route>
<Route path="/settings" component={Settings} />
<Route path="/" component={FrontPage} />
<Route path="/image/:imageId" component={ImagePage} />
<Route path="/entity/:entityId" component={Entity} />
<Route path="/gallery/:entity" component={Gallery} />
</Route>
<Route path="/settings" component={Settings} />
</Route>
</Route>
<Route path="*" component={() => <Navigate href="/" />} />

19
frontend/src/components/app-wrapper/dock.tsx Normal file
View File

@ -0,0 +1,19 @@
import { A } from "@solidjs/router";
import { IconHome, IconPhoto, IconSearch } from "@tabler/icons-solidjs";
import { Component } from "solid-js";
export const Dock: Component = () => {
return (
<div class="w-full mt-auto h-16 bg-white flex justify-between m-4 rounded-xl">
<A href="/" class="w-full flex justify-center items-center">
<IconHome />
</A>
<A href="/" class="w-full flex justify-center items-center">
<IconSearch />
</A>
<A href="/" class="w-full flex justify-center items-center">
<IconPhoto />
</A>
</div>
);
};

10
frontend/src/components/app-wrapper/index.tsx
View File

@ -1,7 +1,15 @@
import { Component, ParentProps } from "solid-js";
import { Topbar } from "./topbar";
import { Dock } from "./dock";
export const AppWrapper: Component<ParentProps> = (props) => {
return (
<div class="flex w-full justify-center h-screen">{props.children}</div>
<div class="w-full flex flex-col items-center h-screen">
<div class="container flex flex-col w-full h-full">
<Topbar />
{props.children}
<Dock />
</div>
</div>
);
};

16
frontend/src/components/app-wrapper/topbar.tsx Normal file
View File

@ -0,0 +1,16 @@
import { useNavigate } from "@solidjs/router";
import { IconArrowLeft } from "@tabler/icons-solidjs";
import { Component } from "solid-js";
export const Topbar: Component = () => {
const nav = useNavigate();
return (
<div class="w-full flex items-center bg-white rounded-xl h-16">
<div class="cursor-pointer" onClick={() => nav(-1)}>
<IconArrowLeft />
</div>
<h1 class="font-bold text-2xl">Haystack</h1>
</div>
);
};

33
frontend/src/components/dock/index.tsx
View File

@ -1,33 +0,0 @@
import { A, useNavigate } from "@solidjs/router";
import {
IconArrowLeft,
IconHome,
IconPhoto,
IconSearch,
} from "@tabler/icons-solidjs";
import { Component, ParentProps } from "solid-js";
export const WithDock: Component<ParentProps> = (props) => {
const nav = useNavigate();
return (
<div class="w-full flex flex-col items-center">
{/* TODO: this should only show up when NOT on the home page. */}
<div class="cursor-pointer" onClick={() => nav(-1)}>
<IconArrowLeft />
</div>
{props.children}
<div class="w-full mt-auto h-16 bg-white flex justify-between m-4 rounded-xl">
<A href="/" class="w-full flex justify-center items-center">
<IconHome />
</A>
<A href="/" class="w-full flex justify-center items-center">
<IconSearch />
</A>
<A href="/" class="w-full flex justify-center items-center">
<IconPhoto />
</A>
</div>
</div>
);
};