feat(widgets): add missing & queued media widget for Radarr and Sonarr (#6078)

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

apps/docs/docs/widgets/media-missing/index.mdx

@@ -0,0 +1,65 @@
+---
+title: 'Media Missing & Queue'
+description: 'Track missing media and active downloads from Radarr and Sonarr'
+hide_title: true
+---
+
+import { WidgetHeader } from '@site/src/components/widgets/header';
+import { AddingWidget } from '@site/src/components/widgets/adding';
+import { WidgetConfig } from '@site/src/components/widgets/configuration';
+import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { mediaMissingWidget } from '.';
+import { radarrIntegration } from '@site/docs/integrations/radarr';
+import { sonarrIntegration } from '@site/docs/integrations/sonarr';
+
+<WidgetHeader
+  widget={mediaMissingWidget}
+  categories={['Media', 'Downloads']}
+/>
+
+Monitor which movies and episodes are missing from your library, and track what is currently being downloaded. The widget pulls data from Radarr and Sonarr and groups results by type in two tabs.
+
+### Screenshots
+
+import widgetMissing from './img/missing.png';
+import widgetQueued from './img/queued.png';
+import widgetCompact from './img/compact.png';
+
+<div className="flex gap-2 flex-wrap">
+  <img src={widgetMissing} alt="media-missing widget showing missing movies and episodes in a grid" width={360} />
+  <img src={widgetQueued} alt="media-missing tab showing download queue with progress bars" width={256} />
+  <img src={widgetCompact} alt="media-missing widget in a compact wide-and-short size" width={256} />
+</div>
+
+### Supported Integrations
+
+<WidgetIntegrations items={[{
+  integration: radarrIntegration,
+}, {
+  integration: sonarrIntegration,
+}]} />
+
+### Tabs
+
+| Tab | Description |
+|---|---|
+| **Missing** | Lists movies (Radarr) and episodes (Sonarr) that are monitored but not yet available in your library. |
+| **Queued** | Shows items currently being downloaded with a progress bar and estimated time remaining. |
+
+### Sizing
+
+The widget adapts to its container size, so it looks good at any grid size:
+
+- **Wide** — fits as many columns of cards as the width allows, filling larger widgets instead of stretching a single column.
+- **Short** — packs items into more, tighter columns so they stay visible in the limited height.
+- **Narrow (1×N)** — tab labels collapse to counts only and posters scale down.
+
+Each item shows its poster art (with the artwork bleeding softly behind the card), a type badge, and — on the queue — an animated progress bar with the estimated time remaining.
+
+### Adding the widget
+
+<AddingWidget />
+
+### Configuration
+
+<WidgetConfig configuration={mediaMissingWidget.configuration} />

apps/docs/docs/widgets/media-missing/index.ts

@@ -0,0 +1,31 @@
+import { WidgetDefinition } from "@site/src/types";
+import { IconMovie } from "@tabler/icons-react";
+
+export const mediaMissingWidget: WidgetDefinition = {
+  icon: IconMovie,
+  name: "Media Missing & Queue",
+  description: "Track missing media and active downloads from Radarr and Sonarr",
+  path: "../../widgets/media-missing",
+  configuration: {
+    items: [
+      {
+        name: "Show Missing",
+        description: "Display the missing media tab, listing movies or episodes not yet downloaded",
+        values: { type: "boolean" },
+        defaultValue: "true",
+      },
+      {
+        name: "Show Queued",
+        description: "Display the download queue tab with progress for each item",
+        values: { type: "boolean" },
+        defaultValue: "true",
+      },
+      {
+        name: "Page Size",
+        description: "Maximum number of items to fetch per integration",
+        values: { type: "string" },
+        defaultValue: "10",
+      },
+    ],
+  },
+};