feat: add Bazarr integration and subtitle status widget (#6156)

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

packages/widgets/src/bazarr/component.module.css

@@ -0,0 +1,77 @@
+.root {
+  container-type: size;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  padding: clamp(6px, 3cqi, 14px);
+  gap: clamp(4px, 2cqi, 10px);
+  overflow: hidden;
+}
+
+.grid {
+  display: grid;
+  flex: 1;
+  min-height: 0;
+  gap: clamp(4px, 2cqi, 10px);
+  grid-template-columns: repeat(var(--stat-cols, 2), minmax(0, 1fr));
+  grid-auto-rows: 1fr;
+  align-content: stretch;
+}
+
+.statTile {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 0;
+  min-width: 0;
+  gap: clamp(2px, 1.5cqi, 5px);
+  padding: clamp(4px, 2.5cqi, 10px);
+  border-radius: var(--mantine-radius-md);
+  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+  overflow: hidden;
+}
+
+.statTileWarning {
+  background-color: light-dark(var(--mantine-color-orange-0), var(--mantine-color-dark-5));
+}
+
+.statIcon {
+  color: var(--mantine-color-dimmed);
+  flex-shrink: 0;
+}
+
+.statLabel {
+  font-size: clamp(8px, 2.5cqi, 12px);
+  color: var(--mantine-color-dimmed);
+  line-height: 1.2;
+  text-align: center;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.statValue {
+  font-size: clamp(14px, 5.5cqi, 24px);
+  font-weight: 700;
+  color: var(--mantine-primary-color-filled);
+  line-height: 1.1;
+  text-align: center;
+}
+
+.statValueWarning {
+  color: var(--mantine-color-orange-6);
+}
+
+.emptyState {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  min-height: 0;
+  color: var(--mantine-color-dimmed);
+  font-size: clamp(11px, 3cqi, 14px);
+  text-align: center;
+}

packages/widgets/src/bazarr/component.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import type { CSSProperties } from "react";
+import { Text } from "@mantine/core";
+import { IconAlertTriangle, IconDeviceTv, IconMovie, IconPlugConnected } from "@tabler/icons-react";
+
+import { clientApi } from "@homarr/api/client";
+import { useScopedI18n } from "@homarr/translation/client";
+
+import { WidgetEmptyState } from "../common/empty-state";
+import type { WidgetComponentProps } from "../definition";
+import classes from "./component.module.css";
+
+const statVisibilityByOption = {
+  showMissingEpisodes: "episodes",
+  showMissingMovies: "movies",
+  showProviderIssues: "providers",
+  showHealthIssues: "status",
+} as const;
+
+const statIcons = {
+  episodes: IconDeviceTv,
+  movies: IconMovie,
+  providers: IconPlugConnected,
+  status: IconAlertTriangle,
+} as const;
+
+const gridColsByWidth = [
+  { minWidth: 380, cols: 2 },
+  { minWidth: 0, cols: 1 },
+] as const;
+
+const iconSizeByWidth = [
+  { minWidth: 320, size: 22 },
+  { minWidth: 200, size: 18 },
+  { minWidth: 0, size: 16 },
+] as const;
+
+export default function BazarrWidget({ integrationIds, options, width }: WidgetComponentProps<"bazarr">) {
+  const t = useScopedI18n("widget.bazarr");
+  const { data: badges } = clientApi.widget.bazarr.getBadges.useQuery(
+    { integrationId: integrationIds[0] ?? "" },
+    { enabled: Boolean(integrationIds[0]) },
+  );
+
+  if (!badges) return <WidgetEmptyState />;
+
+  const statValues = {
+    episodes: badges.episodes,
+    movies: badges.movies,
+    providers: badges.providers,
+    status: badges.status,
+  } as const;
+
+  const visibleStatKeys = Object.entries(statVisibilityByOption)
+    .filter(([optionKey]) => options[optionKey as keyof typeof options])
+    .map(([, statKey]) => statKey);
+
+  const gridCols = getGridCols(width);
+  const iconSize = getIconSize(width);
+
+  if (visibleStatKeys.length === 0) {
+    return (
+      <div className={classes.root}>
+        <div className={classes.emptyState}>
+          <Text size="sm" c="dimmed">
+            —
+          </Text>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.grid} style={{ "--stat-cols": gridCols } as CSSProperties}>
+        {visibleStatKeys.map((statKey) => {
+          const Icon = statIcons[statKey];
+          const value = statValues[statKey];
+          const isWarning = (statKey === "providers" || statKey === "status") && value > 0;
+
+          return (
+            <div key={statKey} className={`${classes.statTile} ${isWarning ? classes.statTileWarning : ""}`}>
+              <Icon className={classes.statIcon} size={iconSize} stroke={1.5} />
+              <span className={`${classes.statValue} ${isWarning ? classes.statValueWarning : ""}`}>{value}</span>
+              <span className={classes.statLabel}>{t(statKey)}</span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+function getGridCols(width: number): number {
+  const match = gridColsByWidth.find(({ minWidth }) => width >= minWidth);
+  return match?.cols ?? 1;
+}
+
+function getIconSize(width: number): number {
+  const match = iconSizeByWidth.find(({ minWidth }) => width >= minWidth);
+  return match?.size ?? 16;
+}

packages/widgets/src/bazarr/index.ts

@@ -0,0 +1,36 @@
+import { IconBadgeCc, IconServerOff } from "@tabler/icons-react";
+
+import { createWidgetDefinition } from "../definition";
+import { optionsBuilder } from "../options";
+
+export const { definition, componentLoader } = createWidgetDefinition("bazarr", {
+  icon: IconBadgeCc,
+  supportedIntegrations: ["bazarr"],
+  integrationsRequired: true,
+  createOptions() {
+    return optionsBuilder.from((factory) => ({
+      showMissingEpisodes: factory.switch({
+        defaultValue: true,
+        withDescription: true,
+      }),
+      showMissingMovies: factory.switch({
+        defaultValue: true,
+        withDescription: true,
+      }),
+      showProviderIssues: factory.switch({
+        defaultValue: true,
+        withDescription: true,
+      }),
+      showHealthIssues: factory.switch({
+        defaultValue: true,
+        withDescription: true,
+      }),
+    }));
+  },
+  errors: {
+    INTERNAL_SERVER_ERROR: {
+      icon: IconServerOff,
+      message: (t) => t("widget.bazarr.error.internalServerError"),
+    },
+  },
+}).withDynamicImport(() => import("./component"));

packages/widgets/src/index.tsx

@@ -12,6 +12,7 @@ import * as audioStats from "./audio-stats";
 import * as app from "./app";
 import * as archiveTeamWarrior from "./archive-team-warrior";
 import * as bookmarks from "./bookmarks";
+import * as bazarr from "./bazarr";
 import * as calendar from "./calendar";
 import * as clock from "./clock";
 import * as coolify from "./coolify";
@@ -94,6 +95,7 @@ export const widgetImports = {
   networkControllerStatus,
   rssFeed,
   bookmarks,
+  bazarr,
   indexerManager,
   healthMonitoring,
   mediaTranscoding,