feat: Add Traefik Integration with dedicated widget and Add optional Icons for Gotify/Notifcation Widget (ONLY GOTIFY) (#6206)

Co-authored-by: Thomas <thomas@ajnart.fr>

packages/widgets/src/notifications/component.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useMemo } from "react";
-import { Card, Flex, Group, ScrollArea, Stack, Text } from "@mantine/core";
+import { Avatar, Card, Flex, Group, ScrollArea, Stack, Text } from "@mantine/core";
 import { IconClock } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
@@ -34,18 +34,39 @@ export default function NotificationsWidget({ options, integrationIds }: WidgetC
       <Stack w={"100%"} gap="sm">
         {sortedNotifications.length > 0 ? (
           sortedNotifications.map((notification) => (
-            <Card key={notification.id} radius={board.itemRadius} w="100%" p="sm">
-              <Flex gap="sm" direction="column" w="100%">
-                {notification.title && (
-                  <Text fz="sm" lh="sm" lineClamp={2}>
-                    {notification.title}
-                  </Text>
+            <Card
+              key={notification.id}
+              component={notification.href ? "a" : "div"}
+              href={notification.href}
+              target={notification.href ? "_blank" : undefined}
+              rel={notification.href ? "noopener noreferrer" : undefined}
+              radius={board.itemRadius}
+              w="100%"
+              p="sm"
+              style={{ color: "inherit", textDecoration: "none" }}
+            >
+              <Flex gap="sm" align="flex-start" w="100%">
+                {!options.hideLogos && notification.source?.iconUrl && (
+                  <Avatar
+                    src={notification.source.iconUrl}
+                    alt={notification.source.name}
+                    size="sm"
+                    radius={board.itemRadius}
+                  />
                 )}
-                <Text c="dimmed" size="sm" lineClamp={4} style={{ whiteSpace: "pre-line" }}>
-                  {notification.body}
-                </Text>
 
-                <InfoDisplay date={notification.time} />
+                <Flex gap="sm" direction="column" w="100%">
+                  {notification.title && (
+                    <Text fz="sm" lh="sm" lineClamp={2}>
+                      {notification.title}
+                    </Text>
+                  )}
+                  <Text c="dimmed" size="sm" lineClamp={4} style={{ whiteSpace: "pre-line" }}>
+                    {notification.body}
+                  </Text>
+
+                  <InfoDisplay date={notification.time} />
+                </Flex>
               </Flex>
             </Card>
           ))

packages/widgets/src/notifications/index.ts

@@ -8,7 +8,9 @@ import { optionsBuilder } from "../options";
 export const { componentLoader, definition } = createWidgetDefinition("notifications", {
   icon: IconMessage,
   createOptions() {
-    return optionsBuilder.from(() => ({}));
+    return optionsBuilder.from((factory) => ({
+      hideLogos: factory.switch({ defaultValue: false }),
+    }));
   },
   supportedIntegrations: getIntegrationKindsByCategory("notifications"),
 }).withDynamicImport(() => import("./component"));