✨ Add Tdarr integration and widget (#1882)

Author: jbruell

public/locales/en/modules/media-transcoding.json

@@ -0,0 +1,96 @@
+{
+  "descriptor": {
+    "name": "Media Transcoding",
+    "description": "Displays information about media transcoding",
+    "settings": {
+      "title": "Media Transcoding 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

@@ -202,5 +202,10 @@ export const availableIntegrations = [
     value: 'proxmox',
     image: 'https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons@master/png/proxmox.png',
     label: 'Proxmox',
+  },
+  {
+    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/WidgetsEditModal.tsx

@@ -85,7 +85,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;
 
@@ -395,6 +395,7 @@ const WidgetOptionTypeSwitch: FC<{
           </Flex>
         </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

@@ -22,6 +22,7 @@ import { smartHomeEntityStateRouter } from './routers/smart-home/entity-state';
 import { usenetRouter } from './routers/usenet/router';
 import { userRouter } from './routers/user';
 import { weatherRouter } from './routers/weather';
+import { tdarrRouter } from '~/server/api/routers/tdarr';
 
 /**
  * This is the primary router for your server.
@@ -51,6 +52,7 @@ export const rootRouter = createTRPCRouter({
   notebook: notebookRouter,
   smartHomeEntityState: smartHomeEntityStateRouter,
   healthMonitoring: healthMonitoringRouter,
+  tdarr: tdarrRouter,
 });
 
 // export type definition of API