fix: alert ui incorrectly using termix css and fixed issue with alert system not loading

src/ui/AppShell.tsx

@@ -25,6 +25,7 @@ import { AdminSettingsPanel } from "@/sidebar/AdminSettingsPanel";
 import { CredentialsPanel } from "@/sidebar/CredentialsPanel";
 import { SplitView } from "@/shell/SplitView";
 import { renderTabContent } from "@/shell/tabUtils";
+import { AlertManager } from "@/dashboard/panels/alerts/AlertManager";
 import { TabBar } from "@/shell/TabBar";
 import type {
   Tab,
@@ -207,6 +208,7 @@ export function AppShell({
   const [hostsLoading, setHostsLoading] = useState(true);
   const [allHosts, setAllHosts] = useState<Host[]>([]);
   const [isAdmin, setIsAdmin] = useState(false);
+  const [userId, setUserId] = useState<string | null>(null);
   const [backgroundTabRecords, setBackgroundTabRecords] = useState<
     OpenTabRecord[]
   >([]);
@@ -246,7 +248,10 @@ export function AppShell({
 
   useEffect(() => {
     getUserInfo()
-      .then((info) => setIsAdmin(info.is_admin))
+      .then((info) => {
+        setIsAdmin(info.is_admin);
+        setUserId(info.userId);
+      })
       .catch(() => setIsAdmin(false));
   }, []);
 
@@ -1702,6 +1707,7 @@ export function AppShell({
         }}
       />
       <TransferMonitor />
+      <AlertManager userId={userId} loggedIn={!!username} />
     </>
   );
 }

src/ui/dashboard/panels/alerts/AlertCard.tsx

@@ -32,16 +32,19 @@ const getAlertIcon = (type?: string) => {
   }
 };
 
-const getAccentBarClass = (priority?: string, type?: string): string => {
+const getAccentBorderClass = (priority?: string, type?: string): string => {
-  if (priority === "critical" || type === "error") return "bg-destructive";
+  if (priority === "critical" || type === "error")
-  if (priority === "high" || type === "warning") return "bg-accent-brand";
+    return "border-t-2 border-t-destructive";
-  if (priority === "medium" || type === "success") return "bg-green-400";
+  if (priority === "high" || type === "warning")
-  return "bg-border";
+    return "border-t-2 border-t-accent-brand";
+  if (priority === "medium" || type === "success")
+    return "border-t-2 border-t-green-400";
+  return "";
 };
 
 const getPriorityBadgeVariant = (
   priority?: string,
-): "destructive" | "secondary" | "outline" => {
+): "destructive" | "secondary" | "default" => {
   switch (priority) {
     case "critical":
     case "high":
@@ -50,13 +53,13 @@ const getPriorityBadgeVariant = (
       return "secondary";
     case "low":
     default:
-      return "outline";
+      return "default";
   }
 };
 
 const getTypeBadgeVariant = (
   type?: string,
-): "destructive" | "secondary" | "outline" => {
+): "destructive" | "secondary" | "default" => {
   switch (type) {
     case "error":
       return "destructive";
@@ -65,7 +68,7 @@ const getTypeBadgeVariant = (
     case "success":
     case "info":
     default:
-      return "outline";
+      return "default";
   }
 };
 
@@ -86,13 +89,9 @@ export function AlertCard({
   };
 
   return (
-    <div className="w-full border border-edge rounded-md !bg-elevated overflow-hidden">
     <div
-        className={
+      className={`w-full border border-foreground/10 rounded-none bg-card overflow-hidden ${getAccentBorderClass(alert.priority, alert.type)}`}
-          "h-1 w-full " + getAccentBarClass(alert.priority, alert.type)
+    >
-        }
-      />
-
       <div className="flex items-start justify-between px-4 pt-4 pb-2">
         <div className="flex items-center gap-3">
           {getAlertIcon(alert.type)}
@@ -123,7 +122,7 @@ export function AlertCard({
         </div>
       )}
 
-      <div className="mx-3 mb-3 border border-edge rounded-md px-3 py-3 !bg-canvas">
+      <div className="mx-3 mb-3 border border-foreground/10 px-3 py-3 bg-background">
         <p className="text-sm text-muted-foreground leading-relaxed whitespace-pre-wrap">
           {alert.message}
         </p>