✨ Plex and Jellyfin widget (#713)

src/components/AppAvatar.tsx

@@ -0,0 +1,26 @@
+import { Avatar, DefaultMantineColor, useMantineTheme } from '@mantine/core';
+
+export const AppAvatar = ({
+  iconUrl,
+  color,
+}: {
+  iconUrl: string;
+  color?: DefaultMantineColor | undefined;
+}) => {
+  const { colors, colorScheme } = useMantineTheme();
+
+  return (
+    <Avatar
+      src={iconUrl}
+      bg={colorScheme === 'dark' ? colors.gray[8] : colors.gray[2]}
+      size="sm"
+      radius="xl"
+      p={4}
+      styles={{
+        root: {
+          borderColor: color !== undefined ? colors[color] : undefined,
+        },
+      }}
+    />
+  );
+};

src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/IntegrationSelector.tsx

@@ -75,6 +75,16 @@ export const IntegrationSelector = ({ form }: IntegrationSelectorProps) => {
       image: 'https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons@master/png/readarr.png',
       label: 'Readarr',
     },
+    {
+      value: 'jellyfin',
+      image: 'https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons@master/png/jellyfin.png',
+      label: 'Jellyfin',
+    },
+    {
+      value: 'plex',
+      image: 'https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons@master/png/plex.png',
+      label: 'Plex',
+    },
   ].filter((x) => Object.keys(integrationFieldProperties).includes(x.value));
 
   const getNewProperties = (value: string | null): AppIntegrationPropertyType[] => {