✨ Add Tdarr integration and widget

public/locales/en/modules/tdarr-queue.json

@@ -0,0 +1,96 @@
+{
+  "descriptor": {
+    "name": "Tdarr Queue",
+    "description": "Displays the queue of an external Tdarr instance.",
+    "settings": {
+      "title": "Tdarr Queue Settings",
+      "appId": {
+        "label": "Select an app"
+      },
+      "defaultView": {
+        "label": "Default view",
+        "data": {
+          "workers": "Workers",
+          "queue": "Queue",
+          "statistics": "Statistics"
+        }
+      },
+      "showHealthCheck": {
+        "label": "Show Health Check indicator"
+      },
+      "showHealthChecksInQueue": {
+        "label": "Show Health Checks in queue"
+      },
+      "queuePageSize": {
+        "label": "Queue: Items per page"
+      },
+      "showAppIcon": {
+        "label": "Show app icon in the bottom right corner"
+      }
+    }
+  },
+  "noAppSelected": "Please select an app in the widget settings",
+  "views": {
+    "workers": {
+      "table": {
+        "header": {
+          "name": "File",
+          "eta": "ETA",
+          "progress": "Progress"
+        },
+        "empty": "Empty",
+        "tooltip": {
+          "transcode": "Transcode",
+          "healthCheck": "Health Check"
+        }
+      }
+    },
+    "queue": {
+      "table": {
+        "header": {
+          "name": "File",
+          "size": "Size"
+        },
+        "footer": {
+          "currentIndex": "{{start}}-{{end}} of {{total}}"
+        },
+        "empty": "Empty",
+        "tooltip": {
+          "transcode": "Transcode",
+          "healthCheck": "Health Check"
+        }
+      }
+    },
+    "statistics": {
+      "empty": "Empty",
+      "box": {
+        "transcodes": "Transcodes: {{value}}",
+        "healthChecks": "Health Checks: {{value}}",
+        "files": "Files: {{value}}",
+        "spaceSaved": "Saved: {{value}}"
+      },
+      "pies": {
+        "transcodes": "Transcodes",
+        "healthChecks": "Health Checks",
+        "videoCodecs": "Codecs",
+        "videoContainers": "Containers",
+        "videoResolutions": "Resolutions"
+      }
+    }
+  },
+  "error": {
+    "title": "Error",
+    "message": "An error occurred while fetching data from Tdarr."
+  },
+  "tabs": {
+    "workers": "Workers",
+    "queue": "Queue",
+    "statistics": "Statistics"
+  },
+  "healthCheckStatus": {
+    "title": "Health Check",
+    "queued": "Queued",
+    "healthy": "Healthy",
+    "unhealthy": "Unhealthy"
+  }
+}

src/components/Board/Customize/Appearance/AppearanceCustomization.tsx

@@ -16,7 +16,11 @@ import { useTranslation } from 'next-i18next';
 import { highlight, languages } from 'prismjs';
 import Editor from 'react-simple-code-editor';
 import { useColorTheme } from '~/tools/color';
-import { BackgroundImageAttachment, BackgroundImageRepeat, BackgroundImageSize } from '~/types/settings';
+import {
+  BackgroundImageAttachment,
+  BackgroundImageRepeat,
+  BackgroundImageSize,
+} from '~/types/settings';
 
 import { useBoardCustomizationFormContext } from '../form';
 

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

@@ -193,4 +193,9 @@ export const availableIntegrations = [
     image: 'https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons@master/png/home-assistant.png',
     label: 'Home Assistant',
   },
+  {
+    value: 'tdarr',
+    image: 'https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/tdarr.png',
+    label: 'Tdarr',
+  },
 ] as const satisfies Readonly<SelectItem[]>;

src/components/Dashboard/Tiles/Widgets/Inputs/AppSelector.tsx

@@ -0,0 +1,50 @@
+import { Group, Select, Text } from '@mantine/core';
+import { ComponentProps, forwardRef } from 'react';
+import { AppAvatar } from '~/components/AppAvatar';
+import { useConfigContext } from '~/config/provider';
+import { IntegrationType } from '~/types/app';
+
+export type AppSelectorProps = {
+  value: string;
+  onChange: (value: string) => void;
+  integrations: IntegrationType[];
+  selectProps?: Omit<ComponentProps<typeof Select>, 'value' | 'data' | 'onChange'>;
+};
+
+export function AppSelector(props: AppSelectorProps) {
+  const { value, integrations, onChange } = props;
+  const { config } = useConfigContext();
+
+  const apps =
+    config?.apps.filter(
+      (app) => app.integration.type && integrations.includes(app.integration.type)
+    ) ?? [];
+  const selectedApp = apps.find((app) => app.id === value);
+
+  return (
+    <Select
+      value={value}
+      data={apps.map((app) => ({
+        value: app.id,
+        label: app.name,
+      }))}
+      onChange={onChange}
+      icon={selectedApp ? <AppAvatar iconUrl={selectedApp?.appearance.iconUrl} /> : undefined}
+      itemComponent={forwardRef(({ value, label, ...rest }, ref) => {
+        const app = apps.find((app) => app.id === value);
+
+        if (!app) {
+          return null;
+        }
+
+        return (
+          <Group ref={ref} {...rest}>
+            <AppAvatar iconUrl={app.appearance.iconUrl} />
+            <Text size="xs">{label}</Text>
+          </Group>
+        );
+      })}
+      nothingFound="No apps found"
+    />
+  );
+}

src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx

@@ -18,6 +18,7 @@ import { ContextModalProps } from '@mantine/modals';
 import { IconAlertTriangle, IconPlaylistX, IconPlus } from '@tabler/icons-react';
 import { Trans, useTranslation } from 'next-i18next';
 import { FC, useState } from 'react';
+import { AppSelector } from '~/components/Dashboard/Tiles/Widgets/Inputs/AppSelector';
 import { useConfigContext } from '~/config/provider';
 import { useConfigStore } from '~/config/store';
 import { mapObject } from '~/tools/client/objects';
@@ -85,7 +86,7 @@ export const WidgetsEditModal = ({
 
   return (
     <Stack>
-      {items.map(([key, _], index) => {
+      {items.map(([key], index) => {
         const option = (currentWidgetDefinition as any).options[key] as IWidgetOptionValue;
         const value = moduleProperties[key] ?? option.defaultValue;
 
@@ -385,6 +386,28 @@ const WidgetOptionTypeSwitch: FC<{
           </Flex>
         </Stack>
       );
+
+    case 'app-select':
+      return (
+        <Stack spacing={0}>
+          <Group align="center" spacing="sm">
+            <Text size="0.875rem" weight="500">
+              {t(`descriptor.settings.${key}.label`)}
+            </Text>
+            {info && <InfoCard message={t(`descriptor.settings.${key}.info`)} link={link} />}
+          </Group>
+          <AppSelector
+            value={value}
+            onChange={(v) => handleChange(key, v ?? option.defaultValue)}
+            integrations={option.integrations}
+            selectProps={{
+              withinPortal: true,
+              ...option.inputProps,
+            }}
+          />
+        </Stack>
+      );
+
     /* eslint-enable no-case-declarations */
     default:
       return null;

src/components/Dashboard/Tiles/Widgets/WidgetsMenu.tsx

@@ -63,7 +63,7 @@ export const WidgetsMenu = ({ integration, widget }: WidgetsMenuProps) => {
   const handleEditClick = () => {
     openContextModalGeneric<WidgetEditModalInnerProps>({
       modal: 'integrationOptions',
-      title: <Title order={4}>{t('descriptor.settings.title')}</Title>,
+      title: t('descriptor.settings.title'),
       innerProps: {
         widgetId: widget.id,
         widgetType: integration,

src/server/api/root.ts

@@ -1,3 +1,4 @@
+import { tdarrRouter } from '~/server/api/routers/tdarr';
 import { createTRPCRouter } from '~/server/api/trpc';
 
 import { appRouter } from './routers/app';
@@ -49,6 +50,7 @@ export const rootRouter = createTRPCRouter({
   password: passwordRouter,
   notebook: notebookRouter,
   smartHomeEntityState: smartHomeEntityStateRouter,
+  tdarr: tdarrRouter,
 });
 
 // export type definition of API