From ab2fa10d89f72326995440a2af7e64a1b2bbc13f Mon Sep 17 00:00:00 2001
From: ppc <albie@ppc.moe>
Date: Thu, 8 Aug 2024 17:04:13 +0100
Subject: [PATCH] simplify server page

---
 aimenet-web/app/servers/[serverId]/page.tsx | 68 ++++++++++++---------
 1 file changed, 39 insertions(+), 29 deletions(-)

diff --git a/aimenet-web/app/servers/[serverId]/page.tsx b/aimenet-web/app/servers/[serverId]/page.tsx
index b028fd1..9abe855 100644
--- a/aimenet-web/app/servers/[serverId]/page.tsx
+++ b/aimenet-web/app/servers/[serverId]/page.tsx
@@ -3,7 +3,7 @@
 import {useLiveQuery} from "dexie-react-hooks";
 import React, {useEffect, useState} from "react";
 import {useParams, useRouter} from "next/navigation";
-import {ChevronRight, Circle, CircleCheckBig, Home, Plus, ServerOff} from "lucide-react";
+import {ChevronRight, Circle, CircleCheckBig, Home, Pencil, Plus, ServerOff, Wallet} from "lucide-react";
 import {AimeCard, AimeServer, db} from "@/lib/database";
 import {getServerInfo, serverCardIn} from "@/lib/aime-net";
 import {Button} from "@/components/ui/button";
@@ -19,13 +19,21 @@ import {Alert, AlertDescription, AlertTitle} from "@/components/ui/alert";
 import {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger} from "@/components/ui/tooltip";
 
 function CardList(props: { cards: ReadonlyArray<AimeCard> | null, cardSelected: (card: AimeCard) => void }) {
+    const router = useRouter();
+
     return (<>
         <h4 className="text-2xl font-bold">{props.cards?.length ? "Cards" : "Additional Cards"}</h4>
-        <CardCreationDialog>
-            <Button className="bg-blue-500">
-                <Plus className="mr-2 h-4 w-4"/> Add Card
+        <div className="flex gap-2">
+            <CardCreationDialog>
+                <Button className="bg-blue-500 flex-grow">
+                    <Plus className="mr-2 h-4 w-4"/> Add Card
+                </Button>
+            </CardCreationDialog>
+
+            <Button onClick={() => router.push('/cards')} variant="outline" size="icon">
+                <Wallet className="h-4 w-4"/>
             </Button>
-        </CardCreationDialog>
+        </div>
 
         {props.cards?.length ? props.cards.map(x => <AimeCardEntry card={x} key={x.id}>
             <TooltipProvider>
@@ -137,34 +145,36 @@ export default function ServerPage() {
                     </AlertDescription>
                 </Alert>)}
 
-                <div className="flex flex-col gap-4 w-full flex-grow">
-                    {selectedCard && (<>
-                        <h4 className="text-2xl font-bold">Selected Card</h4>
+                {server && (
+                    <div className="flex flex-col gap-4 w-full flex-grow">
+                        {selectedCard && (<>
+                            <h4 className="text-2xl font-bold">Selected Card</h4>
 
-                        <AimeCardEntry card={selectedCard}>
-                            <Button size="icon" variant="ghost" disabled>
-                                <CircleCheckBig className="w-5 h-5 text-green-500"/>
+                            <AimeCardEntry card={selectedCard}>
+                                <Button size="icon" variant="ghost" disabled>
+                                    <CircleCheckBig className="w-5 h-5 text-green-500"/>
+                                </Button>
+                            </AimeCardEntry>
+
+                            <Button className="flex-grow-0 bg-green-600 mb-5"
+                                    disabled={(cardInStatus || connectionError || !server)}
+                                    onClick={() => performCardInAction(selectedCard, server as AimeServer, setCardInStatus, toast)}>
+                                {cardInStatus ? "Carding in..." : <>Card In <ChevronRight className="ml-2 h-4 w-4"/></>}
                             </Button>
-                        </AimeCardEntry>
+                        </>)}
 
-                        <Button className="flex-grow-0 bg-green-600 mb-5"
-                                disabled={(cardInStatus || connectionError)}
-                                onClick={() => performCardInAction(selectedCard, server as AimeServer, setCardInStatus, toast)}>
-                            {cardInStatus ? "Carding in..." : <>Card In <ChevronRight className="ml-2 h-4 w-4"/></>}
-                        </Button>
-                    </>)}
+                        <CardList cards={cards?.filter(x => x !== selectedCard).sort(x => x.lastUsed) ?? null}
+                                  cardSelected={card => {
+                                      toast({
+                                          duration: 2500,
+                                          title: "Card Selected",
+                                          description: `${card.name} has been selected.`
+                                      });
 
-                    <CardList cards={cards?.filter(x => x !== selectedCard).sort(x => x.lastUsed) ?? null}
-                              cardSelected={card => {
-                                  toast({
-                                      duration: 2500,
-                                      title: "Card Selected",
-                                      description: `${card.name} has been selected.`
-                                  });
-
-                                  setSelectedCard(card);
-                              }}/>
-                </div>
+                                      setSelectedCard(card);
+                                  }}/>
+                    </div>
+                )}
                 <Footer/>
             </main>