ppc_amnet/aimenet-web/app/cards/page.tsx

"use client";

import React from "react";
import {Separator} from "@/components/ui/separator";
import {Footer} from "@/components/footer";
import {Button} from "@/components/ui/button";
import {Plus, Server, Trash} from "lucide-react";
import {useRouter} from "next/navigation";
import {useLiveQuery} from "dexie-react-hooks";
import {AimeCard, db} from "@/lib/database";
import {LoadingIndicator} from "@/components/loading-indicator";
import {CardCreationDialog} from "@/components/card-creation-form";
import {
    ContextMenu,
    ContextMenuContent,
    ContextMenuItem,
    ContextMenuTrigger
} from "@/components/ui/context-menu";
import {AimeCardEntry} from "@/components/aime-card";
import {IncognitoStorageWarning} from "@/components/incognito-warning";
import {NoCardsNotification} from "@/components/no-cards-notification";

function CardAddButton() {
    return (<>
        <IncognitoStorageWarning/>
        <CardCreationDialog>
            <Button className="bg-blue-500">
                <Plus className="mr-2 h-4 w-4"/> Add Card
            </Button>
        </CardCreationDialog>
    </>);
}

function CardList(props: { cards: AimeCard[] | undefined }) {
    if (!props.cards?.length) {
        return (<>
            <CardAddButton/>
            <NoCardsNotification/>
        </>);
    }

    return (<>
        <CardAddButton/>

        {props.cards.map(s =>
            <ContextMenu key={s.id}>
                <ContextMenuTrigger>
                    <AimeCardEntry card={s}/>
                </ContextMenuTrigger>
                <ContextMenuContent>
                    <ContextMenuItem className="text-red-500" onClick={() => db.cards.delete(s.id)}>
                        <Trash className="mr-2 h-4 w-4"/> Remove
                    </ContextMenuItem>
                </ContextMenuContent>
            </ContextMenu>)}
    </>);
}

export default function CardManagerPage() {
    const router = useRouter();
    const cards = useLiveQuery(() => db.cards.toArray());

    return (
        <main className="flex flex-col gap-5 container min-h-screen py-10">
            <div className="flex items-center gap-1">
                <h2 className="text-4xl font-bold select-none flex-grow">Cards</h2>
                <Button variant="ghost" size={"default"} onClick={() => router.push('/')}>
                    <Server className="h-4 w-4 sm:mr-2"/>
                    <span className="hidden sm:block">Manage Servers</span>
                </Button>
            </div>
            <Separator/>

            <div className="flex flex-col gap-4 w-full flex-grow">
                {cards ? <CardList cards={cards}/> : <LoadingIndicator/>}
            </div>

            <Footer/>
        </main>
    );
}