refactor: shifting lots of stuff around

frontend/src/components/notifications/LoadingCircle.tsx

@@ -0,0 +1,47 @@
+import { Component } from "solid-js";
+
+export const LoadingCircle: Component<{
+	status: "loading" | "complete";
+	class?: string;
+}> = (props) => {
+	switch (props.status) {
+		case "loading":
+			return (
+				<svg
+					class={props.class}
+					width="24"
+					height="24"
+					viewBox="0 0 24 24"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<circle
+						cx="12"
+						cy="12"
+						r="10"
+						fill="none"
+						stroke-width="3"
+						class="stroke-amber-400"
+					/>
+				</svg>
+			);
+		case "complete":
+			return (
+				<svg
+					class={props.class}
+					width="24"
+					height="24"
+					viewBox="0 0 24 24"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<circle
+						cx="12"
+						cy="12"
+						r="10"
+						fill="none"
+						stroke-width="3"
+						class="stroke-emerald-400"
+					/>
+				</svg>
+			);
+	}
+};

frontend/src/components/notifications/ProcessingImage.tsx

@@ -0,0 +1,62 @@
+import { Popover } from "@kobalte/core/popover";
+import { Component, For, Show } from "solid-js";
+import { LoadingCircle } from "./LoadingCircle";
+import { base } from "@network/index";
+import { useNotifications } from "@contexts/Notifications";
+
+export const ProcessingImages: Component = () => {
+	const notifications = useNotifications();
+
+	const processingNumber = () =>
+		Object.keys(notifications.state.ProcessingImages).length;
+
+	return (
+		<Show when={processingNumber() > 0}>
+			<Popover sameWidth gutter={4}>
+				<Popover.Trigger class="w-full flex justify-between rounded-xl bg-slate-800 text-gray-100 px-4 py-2">
+					<Show
+						when={processingNumber() > 0}
+						fallback={<p class="text-md">No images to process</p>}
+					>
+						<p class="text-md">
+							Processing {processingNumber()}{" "}
+							{processingNumber() === 1 ? "image" : "images"}
+						</p>
+					</Show>
+					<Show
+						when={processingNumber() === 0}
+						fallback={<LoadingCircle status="loading" />}
+					>
+						<LoadingCircle status="complete" />
+					</Show>
+				</Popover.Trigger>
+				<Popover.Portal>
+					<Popover.Content class="shadow-2xl flex flex-col gap-2 bg-slate-800 rounded-xl p-2">
+						<For each={Object.entries(notifications.state.ProcessingImages)}>
+							{([id, _image]) => (
+								<Show when={_image}>
+									{(image) => (
+										<div class="flex gap-2 w-full justify-center">
+											<img
+												class="w-16 h-16 aspect-square rounded"
+												alt="processing"
+												src={`${base}/image/${id}`}
+											/>
+											<div class="flex flex-col gap-1">
+												<p class="text-slate-100">{image().ImageName}</p>
+											</div>
+											<LoadingCircle
+												status="loading"
+												class="ml-auto self-center"
+											/>
+										</div>
+									)}
+								</Show>
+							)}
+						</For>
+					</Popover.Content>
+				</Popover.Portal>
+			</Popover>
+		</Show>
+	);
+};

frontend/src/components/protected-route/index.tsx

@@ -0,0 +1,46 @@
+import { Navigate } from "@solidjs/router";
+import { platform } from "@tauri-apps/plugin-os";
+import { jwtDecode } from "jwt-decode";
+import { Component, ParentProps, Show } from "solid-js";
+import { save_token } from "tauri-plugin-ios-shared-token-api";
+
+export const isTokenValid = (): boolean => {
+	const token = localStorage.getItem("access");
+
+	if (token == null) {
+		return false;
+	}
+
+	try {
+		jwtDecode(token);
+		return true;
+	} catch (err) {
+		return false;
+	}
+};
+
+export const ProtectedRoute: Component<ParentProps> = (props) => {
+	const isValid = isTokenValid();
+
+	if (isValid) {
+		const token = localStorage.getItem("access");
+		if (token == null) {
+			throw new Error("unreachable");
+		}
+
+		if (platform() === "ios") {
+			// iOS share extension is a seperate process to the App.
+			// Therefore, we need to share our access token somewhere both the App & Share Extension can access
+			// This involves App Groups.
+			save_token(token)
+				.then(() => console.log("Saved token!!!"))
+				.catch((e) => console.error(e));
+		}
+	}
+
+	return (
+		<Show when={isValid} fallback={<Navigate href="/login" />}>
+			{props.children}
+		</Show>
+	);
+};

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

@@ -1,28 +1,27 @@
-import { Separator } from "@kobalte/core/separator";
 import SolidjsMarkdown from "solidjs-markdown";
 
 import { IconNote } from "@tabler/icons-solidjs";
 import type { UserImage } from "../../network";
 
 type Props = {
-    item: Extract<UserImage, { type: "note" }>;
+	item: Extract<UserImage, { type: "note" }>;
 };
 
 export const SearchCardNote = ({ item }: Props) => {
-    const { data } = item;
+	const { data } = item;
 
-    return (
-        <div class="h-full inset-0 p-3 bg-green-50">
-            <div class="flex mb-1 items-center gap-1">
-                <IconNote size={14} class="text-neutral-500" />
-                <p class="text-xs text-neutral-500">Note</p>
-            </div>
-            <p class="text-sm text-neutral-900 font-bold mb-1">
-                {data.Name.length > 0 ? data.Name : "Unknown 🐞"}
-            </p>
-            <p class="text-xs text-neutral-700">
-                <SolidjsMarkdown>{data.Content}</SolidjsMarkdown>
-            </p>
-        </div>
-    );
+	return (
+		<div class="h-full inset-0 p-3 bg-green-50">
+			<div class="flex mb-1 items-center gap-1">
+				<IconNote size={14} class="text-neutral-500" />
+				<p class="text-xs text-neutral-500">Note</p>
+			</div>
+			<p class="text-sm text-neutral-900 font-bold mb-1">
+				{data.Name.length > 0 ? data.Name : "Unknown 🐞"}
+			</p>
+			<p class="text-xs text-neutral-700">
+				<SolidjsMarkdown>{data.Content}</SolidjsMarkdown>
+			</p>
+		</div>
+	);
 };