Feat/notifications alerts (#52)

* feat: notifications backend & creation

* feat: assign notification to backup schedule

* refactor: status dot one component

* chore(notification-details): remove refetchInterval

app/client/components/app-sidebar.tsx

@@ -1,4 +1,4 @@
-import { CalendarClock, Database, HardDrive, Settings } from "lucide-react";
+import { Bell, CalendarClock, Database, HardDrive, Settings } from "lucide-react";
 import { Link, NavLink } from "react-router";
 import {
 	Sidebar,
@@ -32,6 +32,11 @@ const items = [
 		url: "/backups",
 		icon: CalendarClock,
 	},
+	{
+		title: "Notifications",
+		url: "/notifications",
+		icon: Bell,
+	},
 	{
 		title: "Settings",
 		url: "/settings",
@@ -46,11 +51,7 @@ export function AppSidebar() {
 		<Sidebar variant="inset" collapsible="icon" className="p-0">
 			<SidebarHeader className="bg-card-header border-b border-border/50 hidden md:flex h-[65px] flex-row items-center p-4">
 				<Link to="/volumes" className="flex items-center gap-3 font-semibold pl-2">
-					<img
-						src="/images/zerobyte.png"
-						alt="Zerobyte Logo"
-						className={cn("h-8 w-8 flex-shrink-0 object-contain -ml-2")}
-					/>
+					<img src="/images/zerobyte.png" alt="Zerobyte Logo" className={cn("h-8 w-8 shrink-0 object-contain -ml-2")} />
 					<span
 						className={cn("text-base transition-all duration-200 -ml-1", {
 							"opacity-0 w-0 overflow-hidden ": state === "collapsed",

app/client/components/status-dot.tsx

@@ -1,30 +1,42 @@
-import type { VolumeStatus } from "~/client/lib/types";
 import { cn } from "~/client/lib/utils";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
 
-export const StatusDot = ({ status }: { status: VolumeStatus }) => {
+type StatusVariant = "success" | "neutral" | "error" | "warning" | "info";
+
+interface StatusDotProps {
+	variant: StatusVariant;
+	label: string;
+	animated?: boolean;
+}
+
+export const StatusDot = ({ variant, label, animated }: StatusDotProps) => {
 	const statusMapping = {
-		mounted: {
+		success: {
 			color: "bg-green-500",
 			colorLight: "bg-emerald-400",
-			animated: true,
+			animated: animated ?? true,
 		},
-		unmounted: {
+		neutral: {
 			color: "bg-gray-500",
 			colorLight: "bg-gray-400",
-			animated: false,
+			animated: animated ?? false,
 		},
 		error: {
 			color: "bg-red-500",
-			colorLight: "bg-amber-700",
-			animated: true,
+			colorLight: "bg-red-400",
+			animated: animated ?? true,
 		},
-		unknown: {
+		warning: {
 			color: "bg-yellow-500",
 			colorLight: "bg-yellow-400",
-			animated: true,
+			animated: animated ?? true,
 		},
-	}[status];
+		info: {
+			color: "bg-blue-500",
+			colorLight: "bg-blue-400",
+			animated: animated ?? true,
+		},
+	}[variant];
 
 	return (
 		<Tooltip>
@@ -42,7 +54,7 @@ export const StatusDot = ({ status }: { status: VolumeStatus }) => {
 				</span>
 			</TooltipTrigger>
 			<TooltipContent>
-				<p className="capitalize">{status}</p>
+				<p>{label}</p>
 			</TooltipContent>
 		</Tooltip>
 	);