[UI] refactor "inactive alerts" panel (#10913)

* Remove "inactive alerts" panel

* Improve messaging / colors

* Refactor to "system status" display

* remove duplicate messages

* Revert alert messages

---------

Co-authored-by: Matthias Mair <code@mjmair.com>

src/frontend/src/components/nav/Alerts.tsx

@@ -1,5 +1,5 @@
 import { ActionIcon, Alert, Group, Menu, Stack, Tooltip } from '@mantine/core';
-import { IconExclamationCircle } from '@tabler/icons-react';
+import { IconCircleCheck, IconExclamationCircle } from '@tabler/icons-react';
 import { useMemo, useState } from 'react';
 
 import type { SettingsStateProps } from '@lib/types/Settings';
@@ -34,7 +34,7 @@ export function Alerts() {
 
   const [dismissed, setDismissed] = useState<string[]>([]);
 
-  const alerts: AlertInfo[] = useMemo(
+  const alerts: ExtendedAlertInfo[] = useMemo(
     () =>
       getAlerts(server, globalSettings).filter(
         (alert) => !dismissed.includes(alert.key)
@@ -79,11 +79,12 @@ export function Alerts() {
 export function ServerAlert({
   alert,
   closeAlert
-}: { alert: AlertInfo; closeAlert?: (key: string) => void }) {
+}: { alert: ExtendedAlertInfo; closeAlert?: (key: string) => void }) {
   return (
     <Alert
       withCloseButton={!!closeAlert}
-      color={alert.error ? 'red' : 'orange'}
+      color={alert.condition ? (alert.error ? 'red' : 'orange') : 'green'}
+      icon={alert.condition ? <IconExclamationCircle /> : <IconCircleCheck />}
       title={
         <Group gap='xs'>
           {alert.code && `${alert.code}: `}
@@ -93,14 +94,15 @@ export function ServerAlert({
       onClose={closeAlert ? () => closeAlert(alert.key) : undefined}
     >
       <Stack gap='xs'>
-        {alert.message}
+        {!alert.condition && t`No issues detected`}
-        {alert.code && errorCodeLink(alert.code)}
+        {alert.condition && alert.message}
+        {alert.condition && alert.code && errorCodeLink(alert.code)}
       </Stack>
     </Alert>
   );
 }
 
-type ExtendedAlertInfo = AlertInfo & {
+export type ExtendedAlertInfo = AlertInfo & {
   condition: boolean;
 };
 
@@ -112,7 +114,7 @@ export function getAlerts(
   const n_migrations =
     Number.parseInt(globalSettings.getSetting('_PENDING_MIGRATIONS')) ?? 0;
 
-  const allalerts: ExtendedAlertInfo[] = [
+  const allAlerts: ExtendedAlertInfo[] = [
     {
       key: 'debug',
       title: t`Debug Mode`,
@@ -150,7 +152,7 @@ export function getAlerts(
     }
   ];
 
-  return allalerts.filter((alert) => inactive || alert.condition);
+  return allAlerts.filter((alert) => inactive || alert.condition);
 }
 
 export function errorCodeLink(code: string) {

src/frontend/src/pages/Index/Settings/AdminCenter/HomePanel.tsx

@@ -4,28 +4,37 @@ import { Accordion, Alert, SimpleGrid, Stack, Text } from '@mantine/core';
 import { type JSX, useMemo, useState } from 'react';
 import { useShallow } from 'zustand/react/shallow';
 import { StylishText } from '../../../../components/items/StylishText';
-import { ServerAlert, getAlerts } from '../../../../components/nav/Alerts';
+import {
+  type ExtendedAlertInfo,
+  ServerAlert,
+  getAlerts
+} from '../../../../components/nav/Alerts';
 import { QuickAction } from '../../../../components/settings/QuickAction';
 import { useServerApiState } from '../../../../states/ServerApiState';
 import { useGlobalSettingsState } from '../../../../states/SettingsStates';
 
+function rankAlert(alert: ExtendedAlertInfo): number {
+  if (!alert.condition) return 0;
+  if (alert.error) return 2;
+
+  return 1;
+}
+
 export default function HomePanel(): JSX.Element {
   const [dismissed, setDismissed] = useState<boolean>(false);
   const [server] = useServerApiState(useShallow((state) => [state.server]));
   const globalSettings = useGlobalSettingsState();
 
   const accElements = useMemo(() => {
-    const _alerts = getAlerts(server, globalSettings, true);
+    const _alerts = getAlerts(server, globalSettings, true).sort(
+      (a, b) => rankAlert(b) - rankAlert(a)
+    );
+
     return [
       {
-        key: 'active',
+        key: 'system-status',
-        text: t`Active Alerts`,
+        text: t`System Status`,
-        elements: _alerts.filter((alert) => alert.condition)
+        elements: _alerts
-      },
-      {
-        key: 'inactive',
-        text: t`Inactive Alerts`,
-        elements: _alerts.filter((alert) => !alert.condition)
       }
     ];
   }, [server, globalSettings]);
@@ -67,7 +76,7 @@ export default function HomePanel(): JSX.Element {
       )}
       <Accordion
         multiple
-        defaultValue={['quick-actions', 'active']}
+        defaultValue={['quick-actions', 'system-status']}
         variant='contained'
       >
         <Accordion.Item value='quick-actions'>