feat: integrate Sentry for error tracking and enhance user notifications

- Added Sentry integration for error tracking across various components, including error boundaries and user actions.
- Updated global error handling to capture exceptions and provide detailed feedback to users.
- Enhanced user notifications with toast messages for actions such as credit management, image generation, and canvas exports.
- Improved user experience by displaying relevant messages during interactions, ensuring better visibility of system states and errors.

components/dashboard/canvas-card.tsx

@@ -4,6 +4,7 @@ import { useState, useCallback, useRef } from "react";
 import { useMutation } from "convex/react";
 import { ArrowUpRight, MoreHorizontal, Pencil } from "lucide-react";
 import { toast } from "@/lib/toast";
+import { msg } from "@/lib/toast-messages";
 
 import { Button } from "@/components/ui/button";
 import {
@@ -46,7 +47,8 @@ export default function CanvasCard({ canvas, onNavigate }: CanvasCardProps) {
   const handleSave = useCallback(async () => {
     const trimmedName = editName.trim();
     if (!trimmedName) {
-      toast.error("Name darf nicht leer sein");
+      const { title, desc } = msg.dashboard.renameEmpty;
+      toast.error(title, desc);
       return;
     }
     if (trimmedName === canvas.name) {
@@ -59,10 +61,10 @@ export default function CanvasCard({ canvas, onNavigate }: CanvasCardProps) {
     setIsSaving(true);
     try {
       await updateCanvas({ canvasId: canvas._id, name: trimmedName });
-      toast.success("Arbeitsbereich umbenannt");
+      toast.success(msg.dashboard.renameSuccess.title);
       setIsEditing(false);
     } catch {
-      toast.error("Fehler beim Umbenennen");
+      toast.error(msg.dashboard.renameFailed.title);
     } finally {
       setIsSaving(false);
       saveInFlightRef.current = false;

components/dashboard/credit-overview.tsx

@@ -1,8 +1,10 @@
 "use client";
 
+import { useEffect } from "react";
 import { useQuery } from "convex/react";
 import { CreditCard } from "lucide-react";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
 
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -10,6 +12,8 @@ import { Progress } from "@/components/ui/progress";
 import { api } from "@/convex/_generated/api";
 import { formatEurFromCents } from "@/lib/utils";
 import { cn } from "@/lib/utils";
+import { toast } from "@/lib/toast";
+import { msg } from "@/lib/toast-messages";
 
 // ---------------------------------------------------------------------------
 // Tier-Config — monatliches Credit-Kontingent pro Tier (in Cent)
@@ -35,11 +39,32 @@ const TIER_BADGE_STYLES: Record<string, string> = {
 // Component
 // ---------------------------------------------------------------------------
 
+const LOW_CREDITS_THRESHOLD = 20;
+
 export function CreditOverview() {
+  const router = useRouter();
   const balance = useQuery(api.credits.getBalance);
   const subscription = useQuery(api.credits.getSubscription);
   const usageStats = useQuery(api.credits.getUsageStats);
 
+  useEffect(() => {
+    if (balance === undefined) return;
+    const available = balance.available;
+    if (available <= 0 || available >= LOW_CREDITS_THRESHOLD) return;
+
+    const key = "ls-low-credits-dashboard";
+    if (typeof window !== "undefined" && sessionStorage.getItem(key)) return;
+    sessionStorage.setItem(key, "1");
+
+    const { title, desc } = msg.billing.lowCredits(available);
+    toast.action(title, {
+      description: desc,
+      label: msg.billing.topUp,
+      onClick: () => router.push("/settings/billing"),
+      type: "warning",
+    });
+  }, [balance, router]);
+
   // ── Loading State ──────────────────────────────────────────────────────
   if (
     balance === undefined ||