feat: showing limits error on frontend

frontend/src/App.tsx

@@ -1,13 +1,13 @@
 import { Navigate, Route, Router } from "@solidjs/router";
 import { onAndroidMount } from "./mobile";
 import {
-	FrontPage,
-	ImagePage,
-	Login,
-	Settings,
-	SearchPage,
-	AllImages,
-	List,
+    FrontPage,
+    ImagePage,
+    Login,
+    Settings,
+    SearchPage,
+    AllImages,
+    List,
 } from "./pages";
 import { SearchImageContextProvider } from "@contexts/SearchImageContext";
 import { WithNotifications } from "@contexts/Notifications";
@@ -15,32 +15,46 @@ import { ProtectedRoute } from "@components/protected-route";
 import { AppWrapper } from "@components/app-wrapper";
 import { WithTopbarAndDock } from "@components/app-wrapper/with-topbar-and-dock";
 import { onSendImage } from "@contexts/send-image";
+import { Toast } from "@kobalte/core/toast";
+import { Portal } from "solid-js/web";
 
 export const App = () => {
-	onAndroidMount();
-	onSendImage();
+    onAndroidMount();
+    onSendImage();
 
-	return (
-		<SearchImageContextProvider>
-			<Router>
-				<Route path="/" component={AppWrapper}>
-					<Route path="/login" component={Login} />
+    return (
+        <SearchImageContextProvider>
+            <Router>
+                <Route path="/" component={AppWrapper}>
+                    <Route path="/login" component={Login} />
 
-					<Route path="/" component={ProtectedRoute}>
-						<Route path="/" component={WithNotifications}>
-							<Route path="/" component={WithTopbarAndDock}>
-								<Route path="/" component={FrontPage} />
-								<Route path="/search" component={SearchPage} />
-								<Route path="/all-images" component={AllImages} />
-								<Route path="/image/:imageId" component={ImagePage} />
-								<Route path="/list/:listId" component={List} />
-								<Route path="/settings" component={Settings} />
-							</Route>
-						</Route>
-					</Route>
-				</Route>
-				<Route path="*" component={() => <Navigate href="/" />} />
-			</Router>
-		</SearchImageContextProvider>
-	);
+                    <Route path="/" component={ProtectedRoute}>
+                        <Route path="/" component={WithNotifications}>
+                            <Route path="/" component={WithTopbarAndDock}>
+                                <Route path="/" component={FrontPage} />
+                                <Route path="/search" component={SearchPage} />
+                                <Route
+                                    path="/all-images"
+                                    component={AllImages}
+                                />
+                                <Route
+                                    path="/image/:imageId"
+                                    component={ImagePage}
+                                />
+                                <Route path="/list/:listId" component={List} />
+                                <Route path="/settings" component={Settings} />
+                            </Route>
+                        </Route>
+                    </Route>
+                </Route>
+                <Route path="*" component={() => <Navigate href="/" />} />
+            </Router>
+
+            <Portal>
+                <Toast.Region class="fixed w-72 top-4 right-4 z-50 flex flex-col space-y-2">
+                    <Toast.List />
+                </Toast.Region>
+            </Portal>
+        </SearchImageContextProvider>
+    );
 };

frontend/src/contexts/send-image.ts

@@ -1,32 +1,42 @@
 import { createEffect } from "solid-js";
 import { listen } from "@tauri-apps/api/event";
 import { getCurrentWindow } from "@tauri-apps/api/window";
-import { sendImage } from "@network/index";
+import { ImageLimitReached, sendImage } from "@network/index";
+import { createToast } from "../utils/show-toast";
 
 export const onSendImage = () => {
-	let sentImage = "";
+    let sentImage = "";
 
-	createEffect(async () => {
-		// Listen for PNG processing events
-		const unlisten = listen("png-processed", async (event) => {
-			const base64Data = event.payload as string;
+    createEffect(async () => {
+        // Listen for PNG processing events
+        const unlisten = listen("png-processed", async (event) => {
+            const base64Data = event.payload as string;
 
-			if (base64Data === sentImage) {
-				return;
-			}
+            if (base64Data === sentImage) {
+                return;
+            }
 
-			sentImage = base64Data;
+            sentImage = base64Data;
 
-			const appWindow = getCurrentWindow();
+            const appWindow = getCurrentWindow();
 
-			appWindow.show();
-			appWindow.setFocus();
+            appWindow.show();
+            appWindow.setFocus();
 
-			await sendImage("test-image.png", base64Data);
-		});
+            try {
+                await sendImage("test-image.png", base64Data);
+            } catch (e) {
+                if (e instanceof ImageLimitReached) {
+                    createToast("Limits reached!", "You've reached your image limit")
+                    console.log("Reached image limits!");
+                } else {
+                    throw e
+                }
+            }
+        });
 
-		return () => {
-			unlisten.then((fn) => fn()); // Cleanup listener
-		};
-	});
+        return () => {
+            unlisten.then((fn) => fn()); // Cleanup listener
+        };
+    });
 };

frontend/src/network/index.ts

@@ -68,6 +68,12 @@ export const sendImageFile = async (
     return parse(sendImageResponseValidator, res);
 };
 
+export class ImageLimitReached extends Error {
+    constructor() {
+        super();
+    }
+}
+
 export const sendImage = async (
     imageName: string,
     base64Image: string,
@@ -80,7 +86,12 @@ export const sendImage = async (
 
     request.headers.set("Content-Type", "application/base64");
 
-    const res = await fetch(request).then((res) => res.json());
+    const rawRes = await fetch(request);
+    if (!rawRes.ok && rawRes.status == 429) {
+        throw new ImageLimitReached()
+    }
+
+    const res = await rawRes.json();
 
     return parse(sendImageResponseValidator, res);
 };

frontend/src/utils/show-toast.tsx

@@ -0,0 +1,37 @@
+import { Toast, toaster } from "@kobalte/core/toast";
+import { IconCircleDashedX } from "@tabler/icons-solidjs";
+
+export const createToast = (title: string, text: string) => {
+    console.log("creating toast")
+    toaster.show((props) => (
+        <Toast
+            toastId={props.toastId}
+            class="max-w-lg w-full bg-white shadow-lg rounded-lg pointer-events-auto flex ring-1 ring-black ring-opacity-5"
+        >
+            <div class="flex-1 w-0 p-4">
+                <div class="flex items-start">
+                    <div class="flex-shrink-0 pt-0.5">
+                        <IconCircleDashedX class="h-6 w-6 text-red-600" />
+                    </div>
+                    <div class="ml-3 flex-1">
+                        <Toast.Title class="text-sm font-medium text-gray-900">
+                            {title}
+                        </Toast.Title>
+                        <Toast.Description class="mt-1 text-sm text-gray-500">
+                            {text}
+                        </Toast.Description>
+                    </div>
+                </div>
+            </div>
+            <div class="flex border-l border-gray-200">
+                <Toast.CloseButton class="w-full border border-transparent rounded-none rounded-r-lg p-4 flex items-center justify-center text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500">
+                    <span class="sr-only">Close</span>
+                    <IconCircleDashedX class="h-5 w-5" aria-hidden="true" />
+                </Toast.CloseButton>
+            </div>
+            <Toast.ProgressTrack class="absolute bottom-0 left-0 right-0 h-1 bg-gray-200 rounded-b-lg overflow-hidden">
+                <Toast.ProgressFill class="h-full bg-indigo-600 transition-all duration-300" />
+            </Toast.ProgressTrack>
+        </Toast>
+    ));
+};