fix: dashboard improvements and query speed improvements

apps/start/src/components/organization/supporter-prompt.tsx

@@ -1,7 +1,7 @@
-import { Button, LinkButton } from '@/components/ui/button';
+import { PromptCard } from '@/components/organization/prompt-card';
+import { LinkButton } from '@/components/ui/button';
 import { useAppContext } from '@/hooks/use-app-context';
 import { useCookieStore } from '@/hooks/use-cookie-store';
-import { AnimatePresence, motion } from 'framer-motion';
 import {
   AwardIcon,
   HeartIcon,
@@ -9,7 +9,6 @@ import {
   MessageCircleIcon,
   RocketIcon,
   SparklesIcon,
-  XIcon,
   ZapIcon,
 } from 'lucide-react';
 
@@ -78,70 +77,43 @@ export default function SupporterPrompt() {
   }
 
   return (
-    <AnimatePresence>
-      {!supporterPromptClosed && (
-        <motion.div
-          initial={{ opacity: 0, x: 100, scale: 0.95 }}
-          animate={{ opacity: 1, x: 0, scale: 1 }}
-          exit={{ opacity: 0, x: 100, scale: 0.95 }}
-          transition={{
-            type: 'spring',
-            stiffness: 300,
-            damping: 30,
-          }}
-          className="fixed bottom-0 right-0 z-50 p-4 max-w-md"
+    <PromptCard
+      title="Support OpenPanel"
+      subtitle="Help us build the future of open analytics"
+      onClose={() => setSupporterPromptClosed(true)}
+      show={!supporterPromptClosed}
+      gradientColor="rgb(16 185 129)"
+    >
+      <div className="col gap-3 px-6">
+        {PERKS.map((perk) => (
+          <PerkPoint
+            key={perk.text}
+            icon={perk.icon}
+            text={perk.text}
+            description={perk.description}
+          />
+        ))}
+      </div>
+
+      <div className="px-6">
+        <LinkButton
+          className="w-full"
+          href="https://buy.polar.sh/polar_cl_Az1CruNFzQB2bYdMOZmGHqTevW317knWqV44W1FqZmV"
         >
-          <div className="bg-card border p-6 rounded-lg shadow-lg col gap-4">
-            <div>
-              <div className="row items-center justify-between">
-                <h2 className="text-xl font-semibold">Support OpenPanel</h2>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="rounded-full"
-                  onClick={() => setSupporterPromptClosed(true)}
-                >
-                  <XIcon className="size-4" />
-                </Button>
-              </div>
-              <p className="text-sm text-muted-foreground">
-                Help us build the future of open analytics
-              </p>
-            </div>
-
-            <div className="col gap-3">
-              {PERKS.map((perk) => (
-                <PerkPoint
-                  key={perk.text}
-                  icon={perk.icon}
-                  text={perk.text}
-                  description={perk.description}
-                />
-              ))}
-            </div>
-
-            <div className="pt-2">
-              <LinkButton
-                className="w-full"
-                href="https://buy.polar.sh/polar_cl_Az1CruNFzQB2bYdMOZmGHqTevW317knWqV44W1FqZmV"
-              >
-                Become a Supporter
-              </LinkButton>
-              <p className="text-xs text-muted-foreground text-center mt-4">
-                Starting at $20/month • Cancel anytime •{' '}
-                <a
-                  href="https://openpanel.dev/supporter"
-                  target="_blank"
-                  rel="noreferrer"
-                  className="text-primary underline-offset-4 hover:underline"
-                >
-                  Learn more
-                </a>
-              </p>
-            </div>
-          </div>
-        </motion.div>
-      )}
-    </AnimatePresence>
+          Become a Supporter
+        </LinkButton>
+        <p className="text-xs text-muted-foreground text-center mt-4">
+          Starting at $20/month • Cancel anytime •{' '}
+          <a
+            href="https://openpanel.dev/supporter"
+            target="_blank"
+            rel="noreferrer"
+            className="text-primary underline-offset-4 hover:underline"
+          >
+            Learn more
+          </a>
+        </p>
+      </div>
+    </PromptCard>
   );
 }