feat: showing limits for list creation

frontend/src/network/index.ts

@@ -229,6 +229,12 @@ export const postCode = async (
     return parse(codeValidator, res);
 };
 
+export class ReachedListLimit extends Error {
+    constructor() {
+        super();
+    }
+}
+
 export const createList = async (
     title: string,
     description: string,
@@ -241,5 +247,8 @@ export const createList = async (
 
     request.headers.set("Content-Type", "application/json");
 
-    await fetch(request);
+    const res = await fetch(request);
+    if (!res.ok && res.status == 429) {
+        throw new ReachedListLimit();
+    }
 };

frontend/src/pages/front/gallery.tsx

@@ -3,7 +3,8 @@ import { useSearchImageContext } from "@contexts/SearchImageContext";
 import { ListCard } from "@components/list-card";
 import { Button } from "@kobalte/core/button";
 import { Dialog } from "@kobalte/core/dialog";
-import { createList } from "../../network";
+import { createList, ReachedListLimit } from "../../network";
+import { createToast } from "../../utils/show-toast";
 
 export const Categories: Component = () => {
     const { lists, onRefetchImages } = useSearchImageContext();
@@ -27,6 +28,9 @@ export const Categories: Component = () => {
             onRefetchImages(); // Refresh the lists
         } catch (error) {
             console.error("Failed to create list:", error);
+            if (error instanceof ReachedListLimit) {
+                createToast("Reached limit!", "You've reached your limit for new lists");
+            }
         } finally {
             setIsCreating(false);
         }