add card limit

aimenet-web/src/components/card-creation-form.tsx

@@ -1,12 +1,12 @@
 import {z} from "zod";
 import React from "react";
-import {Check, X} from "lucide-react";
+import {Check, Plus, X} from "lucide-react";
 import {FormProvider, useForm} from "react-hook-form";
 
 import {useMediaQuery} from "@/hooks/use-media-query";
 import {zodResolver} from "@hookform/resolvers/zod";
 
-import {AimeCard, db} from "@/lib/database";
+import {AimeCard, CARD_LIMIT, db} from "@/lib/database";
 import {generateAimeCardId, validateAimeCardId} from "@/lib/aime-card";
 
 import {Button} from "@/components/ui/button";
@@ -36,6 +36,8 @@ import {
     DrawerTitle,
     DrawerTrigger
 } from "@/components/ui/drawer";
+import {useLiveQuery} from "dexie-react-hooks";
+import {cn} from "@/lib/utils.ts";
 
 const schema = z.object({
     name: z.string().min(1, {
@@ -115,15 +117,24 @@ function AimeCardCreationForm(props: { callback?: () => void }) {
     );
 }
 
-export function CardCreationDialog(props: { children: Readonly<React.ReactNode> }) {
+export function CardCreationDialog(props: { className?: string }) {
     const [open, setOpen] = React.useState(false);
+    
+    const cardCount = useLiveQuery(() => db.cards.count());
     const isDesktop = useMediaQuery("(min-width: 768px)");
 
+    const disableCreation = (cardCount !== undefined && cardCount >= CARD_LIMIT) ?? false;
+    const creationComponent = (
+        <Button className={cn('bg-blue-500', props.className)}>
+            <Plus className="mr-2 h-4 w-4"/> <span>{disableCreation ? "Card limit reached" : "Add Card"}</span>
+        </Button>
+    );
+
     if (isDesktop) {
         return (
             <Dialog open={open} onOpenChange={setOpen}>
-                <DialogTrigger asChild>
-                    {props.children}
+                <DialogTrigger asChild disabled={disableCreation}>
+                    {creationComponent}
                 </DialogTrigger>
                 <DialogContent className="sm:max-w-[425px]">
                     <DialogHeader>
@@ -137,8 +148,8 @@ export function CardCreationDialog(props: { children: Readonly<React.ReactNode>
 
     return (
         <Drawer open={open} onOpenChange={setOpen}>
-            <DrawerTrigger asChild>
-                {props.children}
+            <DrawerTrigger asChild disabled={disableCreation}>
+                {creationComponent}
             </DrawerTrigger>
             <DrawerContent>
                 <DrawerHeader className="text-left">

aimenet-web/src/lib/database.ts

@@ -2,6 +2,8 @@ import Dexie, { type EntityTable } from 'dexie';
 
 import {AimeServerInfo} from "@/lib/aime-net.ts";
 
+export const CARD_LIMIT = 15;
+
 interface AimeServer extends AimeServerInfo {
     id: number;
     address: string;