removed db from gitignore + made it so that the app cards render dynamically + delete dialog + add actually works + no crashing

app/dashboard/page.tsx

@@ -1,5 +1,7 @@
-import AppCard from "@/components/app-card";
+import AppGrid from "@/components/app-grid";
 import PlusButton from "@/components/plus-button";
+import AppGridFallback from "@/components/suspence/app-grid";
+import { Suspense } from "react";
 
 export default function Dashboard() {
   const mockService = {
@@ -18,10 +20,9 @@ export default function Dashboard() {
   return (
     <main>
       <PlusButton />
-      <div className="grid xs:grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 m-4">
-        <AppCard app={mockService} />
-        <AppCard app={mockServiceDesc} />
-      </div>
+      <Suspense fallback={<AppGridFallback />}>
+        <AppGrid />
+      </Suspense>
       <hr />
     </main>
   );

app/hold-confirm.css

@@ -0,0 +1,63 @@
+:root {
+  font-size: 16px; /* => 1rem */
+}
+
+.PressToConfirm {
+  --bg-color: #dd3b38;
+  --fill-color: #ffffff33;
+  --bg-color-hover: #d42e2c;
+  --border-color: #c33532;
+  --shadow-color: #580c0ca6;
+  --text-color: white;
+
+  box-sizing: border-box;
+  white-space: nowrap;
+  font-weight: 500;
+  font-family: inherit;
+  font-size: 0.875rem;
+  text-align: center;
+  cursor: pointer;
+  transition: 0.1s ease-in-out;
+  background-color: var(--bg-color);
+  border: 1px solid var(--border-color);
+  border-radius: 5rem;
+  color: var(--text-color);
+  line-height: 1.25rem;
+  padding: 0.35rem 1rem;
+  box-shadow: 0 1px 2px 0 var(--shadow-color);
+  position: relative;
+  overflow: hidden;
+  min-width: 75px;
+
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: none;
+}
+
+.PressToConfirm:hover:not(.active) {
+  background-color: var(--bg-color-hover);
+}
+
+.PressToConfirm:focus {
+  outline-offset: 6px;
+}
+
+.PressToConfirm:focus-visible {
+  box-shadow: none;
+}
+
+.PressToConfirm .filler {
+  background-color: var(--fill-color);
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 100%;
+  pointer-events: none;
+}
+
+.text {
+  user-select: none;
+  -webkit-user-select: none;
+  pointer-events: none;
+}

app/layout.tsx

@@ -4,6 +4,8 @@ import { Inter } from "next/font/google";
 import "./globals.css";
 import { cn } from "@/lib/utils";
 import Sidebar from "@/components/sidebar";
+import { Toaster } from "@/components/ui/sonner";
+import QueryProvider from "@/components/query-provider";
 
 const inter = Inter({ subsets: ["latin"], variable: "--font-sans" });
 
@@ -12,8 +14,15 @@ export const metadata: Metadata = {
   description: "A homelab managment and blogging platform",
 };
 
-function Providers({ children }: { children: React.ReactNode }) {
-  return <TooltipProvider>{children}</TooltipProvider>;
+async function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <QueryProvider>
+      <TooltipProvider>
+        <Toaster />
+        {children}
+      </TooltipProvider>
+    </QueryProvider>
+  );
 }
 
 export default function RootLayout({