add card management button

aimenet-web/app/page.tsx

@@ -8,7 +8,7 @@ import {useForm} from "react-hook-form";
 import {useRouter} from "next/navigation";
 import {AppRouterInstance} from "next/dist/shared/lib/app-router-context.shared-runtime";
 import {
-    ChevronRight,
+    ChevronRight, CreditCard,
     Earth,
     History,
     Loader,
@@ -35,6 +35,7 @@ import {
 } from "@/components/ui/context-menu";
 import {Alert, AlertDescription, AlertTitle} from "@/components/ui/alert";
 import {Form, FormControl, FormField, FormItem, FormMessage} from "@/components/ui/form";
+import {useMediaQuery} from "@/hooks/use-media-query";
 
 const serverAdditionSchema = z.object({
     address: z.string().startsWith("http")
@@ -220,10 +221,17 @@ function ServerAddForm() {
 
 export default function ServerListingPage() {
     const servers = useLiveQuery(() => db.servers.toArray());
+    const router = useRouter();
 
     return (
         <main className="flex flex-col gap-5 container min-h-screen py-10">
-            <h2 className="text-4xl font-bold select-none">Servers</h2>
+            <div className="flex items-center gap-1">
+                <h2 className="text-4xl font-bold select-none flex-grow">Servers</h2>
+                <Button variant="ghost" size={"default"} onClick={() => router.push('/cards')}>
+                    <CreditCard className="h-4 w-4 sm:mr-2"/>
+                    <span className="hidden sm:block">Manage Cards</span>
+                </Button>
+            </div>
             <Separator/>
 
             <div className="flex flex-col gap-4 w-full flex-grow">