Merge remote-tracking branch 'origin/claude/add-system-notifications-01WmAjjkvm38e7XKm6ircfDH' into claude/add-system-notifications-01WmAjjkvm38e7XKm6ircfDH

# Conflicts:
#	components/system-notification-banner/SystemNotificationBanner.tsx

Author: kelvink96

components/system-notification-banner/SystemNotificationBanner.tsx

@@ -35,19 +35,19 @@ const notificationConfig: Record<
 > = {
   info: {
     color: 'blue',
-    icon: <IconInfoCircle size={20} />,
+    icon: <IconInfoCircle size={16} />,
   },
   warning: {
     color: 'yellow',
-    icon: <IconAlertTriangle size={20} />,
+    icon: <IconAlertTriangle size={16} />,
   },
   error: {
     color: 'red',
-    icon: <IconX size={20} />,
+    icon: <IconX size={16} />,
   },
   success: {
     color: 'green',
-    icon: <IconCircleCheck size={20} />,
+    icon: <IconCircleCheck size={16} />,
   },
 };
 
@@ -69,56 +69,44 @@ const SystemNotificationBanner = ({
         const config = notificationConfig[notification.type];
 
         return (
-          <Alert
+          <Box
             key={notification.id}
-            variant="filled"
-            color={config.color}
-            radius={0}
-            icon={config.icon}
-            title={notification.title}
-            withCloseButton={notification.dismissible !== false}
-            onClose={() => dismissNotification(notification.id)}
-            styles={{
-              root: {
-                borderRadius: 0,
-              },
-              message: {
-                color: 'inherit',
-              },
-            }}
+            bg={`var(--mantine-color-${config.color}-filled)`}
+            c="white"
+            py="xs"
+            px="md"
           >
-            <Group justify="space-between" align="center" wrap="nowrap">
-              <Text size="sm" inherit>
-                {notification.message}
-              </Text>
-              {notification.action && (
-                <Box>
-                  {notification.action.href ? (
-                    <Anchor
-                      href={notification.action.href}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      c="white"
-                      fw={600}
-                      size="sm"
-                      underline="always"
-                    >
-                      {notification.action.label}
-                    </Anchor>
-                  ) : (
-                    <Button
-                      variant="white"
-                      color={config.color}
-                      size="compact-sm"
-                      onClick={notification.action.onClick}
-                    >
-                      {notification.action.label}
-                    </Button>
-                  )}
-                </Box>
+            <Group justify="space-between" align="center" wrap="nowrap" gap="md">
+              <Group gap="xs" wrap="nowrap" style={{ flex: 1, minWidth: 0 }}>
+                {config.icon}
+                <Text size="sm" truncate>
+                  {notification.message}
+                </Text>
+                {notification.action?.href && (
+                  <Anchor
+                    href={notification.action.href}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    c="white"
+                    fw={600}
+                    size="sm"
+                    underline="always"
+                    style={{ flexShrink: 0 }}
+                  >
+                    {notification.action.label}
+                  </Anchor>
+                )}
+              </Group>
+              {notification.dismissible !== false && (
+                <CloseButton
+                  size="sm"
+                  c="white"
+                  onClick={() => dismissNotification(notification.id)}
+                  aria-label="Dismiss notification"
+                />
               )}
             </Group>
-          </Alert>
+          </Box>
         );
       })}
     </Stack>

contexts/system-notifications/types.ts

@@ -5,7 +5,6 @@ export type NotificationType = 'info' | 'warning' | 'error' | 'success';
 export interface SystemNotification {
   id: string;
   type: NotificationType;
-  title: string;
   message: string;
   dismissible?: boolean;
   action?: {

public/system-announcements.json

@@ -2,18 +2,20 @@
   {
     "id": "welcome-notification",
     "type": "info",
-    "title": "Welcome to DesignSparx Dashboard",
-    "message": "This is a demo notification. Edit public/system-announcements.json to customize.",
-    "dismissible": true
+    "message": "Welcome to DesignSparx Dashboard. Edit public/system-announcements.json to customize.",
+    "dismissible": true,
+    "action": {
+      "label": "Learn more",
+      "href": "https://github.com/design-sparx/mantine-analytics-dashboard"
+    }
   },
   {
     "id": "example-previous-announcement",
     "type": "warning",
-    "title": "Example: Previous Breaking Change",
-    "message": "This is an example of a previous announcement kept for history. Only the first item in the array is shown.",
+    "message": "Example: API endpoints restructured in v4.0. Please review the migration guide.",
     "dismissible": true,
     "action": {
-      "label": "Learn More",
+      "label": "Read more",
       "href": "https://github.com/design-sparx/mantine-analytics-dashboard"
     }
   }