chore(release): 1.44.0 [skip ci]

Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>

CHANGELOG.md

@@ -1,3 +1,26 @@
+## [1.44.0](https://github.com/homarr-labs/homarr/compare/v1.43.3...v1.44.0) (2025-11-21)
+
+### Features
+
+* **pi-hole:** support no-auth ([#4480](https://github.com/homarr-labs/homarr/issues/4480)) ([c89e35e](https://github.com/homarr-labs/homarr/commit/c89e35e13c794bbdf98748c00644b86f7f5dbe68))
+
+### Bug Fixes
+
+* **deps:** update dependency @tanstack/react-query to ^5.90.8 ([#4494](https://github.com/homarr-labs/homarr/issues/4494)) ([a5b6203](https://github.com/homarr-labs/homarr/commit/a5b6203be6ac3c2308614f10ef6a17590917e2c9))
+* **deps:** update dependency @tanstack/react-query to ^5.90.9 ([#4508](https://github.com/homarr-labs/homarr/issues/4508)) ([b3db5d5](https://github.com/homarr-labs/homarr/commit/b3db5d5f7bc2d146f0b2c230a52e7bd4efad3bcb))
+* **deps:** update dependency @tanstack/react-query-next-experimental to ^5.91.0 ([#4505](https://github.com/homarr-labs/homarr/issues/4505)) ([8ea6cff](https://github.com/homarr-labs/homarr/commit/8ea6cffb537ca54a413c583ab8b8fd24a52185be))
+* **deps:** update dependency drizzle-kit to ^0.31.7 ([#4507](https://github.com/homarr-labs/homarr/issues/4507)) ([b4f9fb8](https://github.com/homarr-labs/homarr/commit/b4f9fb8b46a8f74e2d7896dfe98e80618cfbcde4))
+* **deps:** update dependency fast-xml-parser to ^5.3.2 ([#4510](https://github.com/homarr-labs/homarr/issues/4510)) ([5e57a49](https://github.com/homarr-labs/homarr/commit/5e57a4906bcedc53d220e983827293f4a699c425))
+* **deps:** update dependency next-intl to v4.5.1 ([#4484](https://github.com/homarr-labs/homarr/issues/4484)) ([06942ec](https://github.com/homarr-labs/homarr/commit/06942ecbcd245f5540f2960f437ca2955a5ed0c3))
+* **deps:** update dependency next-intl to v4.5.3 ([#4503](https://github.com/homarr-labs/homarr/issues/4503)) ([0642773](https://github.com/homarr-labs/homarr/commit/064277373cacd3309d8da3779d5451d195da7f81))
+* **deps:** update dependency sass to ^1.94.0 ([#4482](https://github.com/homarr-labs/homarr/issues/4482)) ([19ecede](https://github.com/homarr-labs/homarr/commit/19ecedea4370924d47545ca8d9d46a0b7c016cc9))
+* **deps:** update mantine monorepo to ^8.3.8 ([#4516](https://github.com/homarr-labs/homarr/issues/4516)) ([ded4e72](https://github.com/homarr-labs/homarr/commit/ded4e72e5407b0076495a06111f3b04445f27276))
+* **deps:** update nextjs monorepo to v16.0.3 ([#4504](https://github.com/homarr-labs/homarr/issues/4504)) ([7d0c1a1](https://github.com/homarr-labs/homarr/commit/7d0c1a14fdf1731ff44e3d00793cf4cd1c3e9b1f))
+* **deps:** update testcontainers-node monorepo to ^11.8.1 ([#4486](https://github.com/homarr-labs/homarr/issues/4486)) ([64657d8](https://github.com/homarr-labs/homarr/commit/64657d831cbe28a59708b280b07889b9f0232743))
+* **deps:** update turbo monorepo to ^2.6.1 ([#4483](https://github.com/homarr-labs/homarr/issues/4483)) ([cd124d6](https://github.com/homarr-labs/homarr/commit/cd124d6e8392eef5df0092481ec3cc26599f2902))
+* **iframe:** allow clicking links within ([#4521](https://github.com/homarr-labs/homarr/issues/4521)) ([5a418d7](https://github.com/homarr-labs/homarr/commit/5a418d73bdb07cf3d3270983b6881f2de8d58ad7))
+* **media-requests:** incorrect availability mapping ([#4520](https://github.com/homarr-labs/homarr/issues/4520)) ([d9cc35b](https://github.com/homarr-labs/homarr/commit/d9cc35b9859a14f44c4e4b13c6518287f8d18e54))
+
 ## [1.43.3](https://github.com/homarr-labs/homarr/compare/v1.43.2...v1.43.3) (2025-11-14)
 
 ### Bug Fixes

apps/nextjs/package.json

@@ -50,12 +50,12 @@
     "@homarr/ui": "workspace:^0.1.0",
     "@homarr/validation": "workspace:^0.1.0",
     "@homarr/widgets": "workspace:^0.1.0",
-    "@mantine/colors-generator": "^8.3.7",
-    "@mantine/core": "^8.3.7",
-    "@mantine/dropzone": "^8.3.7",
-    "@mantine/hooks": "^8.3.7",
-    "@mantine/modals": "^8.3.7",
-    "@mantine/tiptap": "^8.3.7",
+    "@mantine/colors-generator": "^8.3.8",
+    "@mantine/core": "^8.3.8",
+    "@mantine/dropzone": "^8.3.8",
+    "@mantine/hooks": "^8.3.8",
+    "@mantine/modals": "^8.3.8",
+    "@mantine/tiptap": "^8.3.8",
     "@million/lint": "1.0.14",
     "@tabler/icons-react": "^3.35.0",
     "@tanstack/react-query": "^5.90.9",
@@ -98,7 +98,7 @@
     "@types/chroma-js": "3.1.2",
     "@types/node": "^24.10.1",
     "@types/prismjs": "^1.26.5",
-    "@types/react": "19.2.4",
+    "@types/react": "19.2.5",
     "@types/react-dom": "19.2.3",
     "@types/swagger-ui-react": "^5.18.0",
     "concurrently": "^9.2.1",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "homarr",
-  "version": "1.43.3",
+  "version": "1.44.0",
   "private": true,
   "scripts": {
     "build": "cross-env CI=true turbo build",
@@ -40,13 +40,13 @@
     "@semantic-release/commit-analyzer": "^13.0.1",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/github": "^12.0.2",
-    "@semantic-release/npm": "^13.1.1",
+    "@semantic-release/npm": "^13.1.2",
     "@semantic-release/release-notes-generator": "^14.1.0",
     "@testcontainers/redis": "^11.8.1",
     "@turbo/gen": "^2.6.1",
     "@vitejs/plugin-react": "^5.1.1",
-    "@vitest/coverage-v8": "^4.0.8",
-    "@vitest/ui": "^4.0.8",
+    "@vitest/coverage-v8": "^4.0.9",
+    "@vitest/ui": "^4.0.9",
     "conventional-changelog-conventionalcommits": "^9.1.0",
     "cross-env": "^10.1.0",
     "jsdom": "^27.2.0",
@@ -56,7 +56,7 @@
     "turbo": "^2.6.1",
     "typescript": "^5.9.3",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^4.0.8"
+    "vitest": "^4.0.9"
   },
   "packageManager": "pnpm@10.22.0",
   "engines": {
@@ -82,7 +82,7 @@
       "brace-expansion@>=1.0.0 <=1.1.11": ">=4.0.1",
       "esbuild@<=0.24.2": ">=0.27.0",
       "form-data@>=4.0.0 <4.0.4": ">=4.0.4",
-      "hono@<4.6.5": ">=4.10.5",
+      "hono@<4.6.5": ">=4.10.6",
       "linkifyjs@<4.3.2": ">=4.3.2",
       "nanoid@>=4.0.0 <5.0.9": ">=5.1.6",
       "prismjs@<1.30.0": ">=1.30.0",
@@ -105,12 +105,5 @@
       "core-js-pure",
       "protobufjs"
     ]
-  },
-  "bin": "apps/tasks/tasks.cjs",
-  "pkg": {
-    "scripts": ["apps/tasks/tasks.cjs", "apps/websocket/wssServer.cjs", "apps/nextjs/server.js"],
-    "assets": ["apps/nextjs/public/**/*"],
-    "targets": ["latest-linux-x64"],
-    "outputPath": "dist-pkg"
   }
 }

packages/api/src/router/widgets/media-requests.ts

@@ -3,6 +3,7 @@ import { z } from "zod/v4";
 
 import { getIntegrationKindsByCategory } from "@homarr/definitions";
 import { createIntegrationAsync } from "@homarr/integrations";
+import { mediaRequestStatusConfiguration } from "@homarr/integrations/types";
 import type { MediaRequest } from "@homarr/integrations/types";
 import { mediaRequestListRequestHandler } from "@homarr/request-handler/media-request-list";
 import { mediaRequestStatsRequestHandler } from "@homarr/request-handler/media-request-stats";
@@ -35,7 +36,10 @@ export const mediaRequestsRouter = createTRPCRouter({
             return dataB.createdAt.getTime() - dataA.createdAt.getTime();
           }
 
-          return dataA.status - dataB.status;
+          return (
+            mediaRequestStatusConfiguration[dataA.status].position -
+            mediaRequestStatusConfiguration[dataB.status].position
+          );
         });
     }),
   subscribeToLatestRequests: publicProcedure

packages/cron-job-api/package.json

@@ -42,7 +42,7 @@
     "@homarr/prettier-config": "workspace:^0.1.0",
     "@homarr/tsconfig": "workspace:^0.1.0",
     "@types/node-cron": "^3.0.11",
-    "@types/react": "19.2.4",
+    "@types/react": "19.2.5",
     "eslint": "^9.39.1",
     "typescript": "^5.9.3"
   }

packages/db/package.json

@@ -49,7 +49,7 @@
     "@homarr/definitions": "workspace:^0.1.0",
     "@homarr/log": "workspace:^0.1.0",
     "@homarr/server-settings": "workspace:^0.1.0",
-    "@mantine/core": "^8.3.7",
+    "@mantine/core": "^8.3.8",
     "@paralleldrive/cuid2": "^3.1.0",
     "@testcontainers/mysql": "^11.8.1",
     "@testcontainers/postgresql": "^11.8.1",

packages/docker/package.json

@@ -32,7 +32,7 @@
     "@homarr/eslint-config": "workspace:^0.2.0",
     "@homarr/prettier-config": "workspace:^0.1.0",
     "@homarr/tsconfig": "workspace:^0.1.0",
-    "@types/dockerode": "^3.3.45",
+    "@types/dockerode": "^3.3.46",
     "eslint": "^9.39.1",
     "typescript": "^5.9.3"
   }

packages/form/package.json

@@ -26,7 +26,7 @@
     "@homarr/common": "workspace:^0.1.0",
     "@homarr/translation": "workspace:^0.1.0",
     "@homarr/validation": "workspace:^0.1.0",
-    "@mantine/form": "^8.3.7",
+    "@mantine/form": "^8.3.8",
     "mantine-form-zod-resolver": "^1.3.0",
     "zod": "^4.1.12"
   },

packages/forms-collection/package.json

@@ -30,7 +30,7 @@
     "@homarr/translation": "workspace:^0.1.0",
     "@homarr/ui": "workspace:^0.1.0",
     "@homarr/validation": "workspace:^0.1.0",
-    "@mantine/core": "^8.3.7",
+    "@mantine/core": "^8.3.8",
     "react": "19.2.0",
     "zod": "^4.1.12"
   },

packages/integrations/src/index.ts

@@ -38,7 +38,7 @@ export type {
   FirewallMemorySummary,
 } from "./interfaces/firewall-summary/firewall-summary-types";
 export type { SystemHealthMonitoring } from "./interfaces/health-monitoring/health-monitoring-types";
-export { MediaRequestStatus } from "./interfaces/media-requests/media-request-types";
+export { UpstreamMediaRequestStatus } from "./interfaces/media-requests/media-request-types";
 export type { MediaRequestList, MediaRequestStats } from "./interfaces/media-requests/media-request-types";
 export type { StreamSession } from "./interfaces/media-server/media-server-types";
 export type {

packages/integrations/src/interfaces/media-requests/media-request-types.ts

@@ -1,3 +1,5 @@
+import { objectKeys } from "@homarr/common";
+
 interface SerieSeason {
   id: number;
   seasonNumber: number;
@@ -34,6 +36,64 @@ export interface MediaRequest {
   requestedBy?: Omit<RequestUser, "requestCount">;
 }
 
+export const mediaAvailabilityConfiguration = {
+  available: {
+    color: "green",
+  },
+  partiallyAvailable: {
+    color: "yellow",
+  },
+  processing: {
+    color: "blue",
+  },
+  requested: {
+    color: "violet",
+  },
+  pending: {
+    color: "violet",
+  },
+  unknown: {
+    color: "orange",
+  },
+  deleted: {
+    color: "red",
+  },
+  blacklisted: {
+    color: "gray",
+  },
+} satisfies Record<string, { color: string }>;
+
+export const mediaAvailabilities = objectKeys(mediaAvailabilityConfiguration);
+
+export type MediaAvailability = (typeof mediaAvailabilities)[number];
+
+export const mediaRequestStatusConfiguration = {
+  pending: {
+    color: "blue",
+    position: 1,
+  },
+  approved: {
+    color: "green",
+    position: 2,
+  },
+  declined: {
+    color: "red",
+    position: 3,
+  },
+  failed: {
+    color: "red",
+    position: 4,
+  },
+  completed: {
+    color: "green",
+    position: 5,
+  },
+} satisfies Record<string, { color: string; position: number }>;
+
+export const mediaRequestStatuses = objectKeys(mediaRequestStatusConfiguration);
+
+export type MediaRequestStatus = (typeof mediaRequestStatuses)[number];
+
 export interface MediaRequestList {
   integration: {
     id: string;
@@ -66,7 +126,7 @@ export interface MediaRequestStats {
 }
 
 // https://github.com/fallenbagel/jellyseerr/blob/0fd03f38480f853e7015ad9229ed98160e37602e/server/constants/media.ts#L1
-export enum MediaRequestStatus {
+export enum UpstreamMediaRequestStatus {
   PendingApproval = 1,
   Approved = 2,
   Declined = 3,
@@ -75,12 +135,12 @@ export enum MediaRequestStatus {
 }
 
 // https://github.com/fallenbagel/jellyseerr/blob/0fd03f38480f853e7015ad9229ed98160e37602e/server/constants/media.ts#L14
-export enum MediaAvailability {
+export enum UpstreamMediaAvailability {
   Unknown = 1,
   Pending = 2,
   Processing = 3,
   PartiallyAvailable = 4,
   Available = 5,
-  Blacklisted = 6,
-  Deleted = 7,
+  JellyseerrBlacklistedOrOverseerrDeleted = 6,
+  JellyseerrDeleted = 7,
 }

packages/integrations/src/jellyseerr/jellyseerr-integration.ts

@@ -1,3 +1,12 @@
+import type { MediaAvailability } from "../interfaces/media-requests/media-request-types";
+import { UpstreamMediaAvailability } from "../interfaces/media-requests/media-request-types";
 import { OverseerrIntegration } from "../overseerr/overseerr-integration";
 
-export class JellyseerrIntegration extends OverseerrIntegration {}
+export class JellyseerrIntegration extends OverseerrIntegration {
+  protected override mapAvailability(availability: UpstreamMediaAvailability, inProgress: boolean): MediaAvailability {
+    // Availability statuses are not exactly the same between Jellyseerr and Overseerr (Jellyseerr has "blacklisted" additionally (deleted is the same value in overseerr))
+    if (availability === UpstreamMediaAvailability.JellyseerrBlacklistedOrOverseerrDeleted) return "blacklisted";
+    if (availability === UpstreamMediaAvailability.JellyseerrDeleted) return "deleted";
+    return super.mapAvailability(availability, inProgress);
+  }
+}

packages/integrations/src/mock/data/media-request.ts

@@ -1,8 +1,13 @@
-import { objectEntries } from "@homarr/common";
-
 import type { IMediaRequestIntegration } from "../../interfaces/media-requests/media-request-integration";
-import type { MediaInformation, MediaRequest, RequestStats, RequestUser } from "../../types";
-import { MediaAvailability, MediaRequestStatus } from "../../types";
+import type {
+  MediaAvailability,
+  MediaInformation,
+  MediaRequest,
+  MediaRequestStatus,
+  RequestStats,
+  RequestUser,
+} from "../../types";
+import { mediaAvailabilities, mediaRequestStatuses } from "../../types";
 
 export class MediaRequestMockService implements IMediaRequestIntegration {
   public async getSeriesInformationAsync(mediaType: "movie" | "tv", id: number): Promise<MediaInformation> {
@@ -86,12 +91,10 @@ export class MediaRequestMockService implements IMediaRequestIntegration {
   }
 
   private static randomAvailability(): MediaAvailability {
-    const values = objectEntries(MediaAvailability).filter(([key]) => typeof key === "number");
-    return values[Math.floor(Math.random() * values.length)]?.[1] ?? MediaAvailability.Available;
+    return mediaAvailabilities.at(Math.floor(Math.random() * mediaAvailabilities.length)) ?? "unknown";
   }
 
   private static randomStatus(): MediaRequestStatus {
-    const values = objectEntries(MediaRequestStatus).filter(([key]) => typeof key === "number");
-    return values[Math.floor(Math.random() * values.length)]?.[1] ?? MediaRequestStatus.PendingApproval;
+    return mediaRequestStatuses.at(Math.floor(Math.random() * mediaRequestStatuses.length)) ?? "pending";
   }
 }

packages/integrations/src/overseerr/overseerr-integration.ts

@@ -9,8 +9,17 @@ import type { ISearchableIntegration } from "../base/searchable-integration";
 import { TestConnectionError } from "../base/test-connection/test-connection-error";
 import type { TestingResult } from "../base/test-connection/test-connection-service";
 import type { IMediaRequestIntegration } from "../interfaces/media-requests/media-request-integration";
-import type { MediaRequest, RequestStats, RequestUser } from "../interfaces/media-requests/media-request-types";
-import { MediaAvailability, MediaRequestStatus } from "../interfaces/media-requests/media-request-types";
+import type {
+  MediaAvailability,
+  MediaRequest,
+  MediaRequestStatus,
+  RequestStats,
+  RequestUser,
+} from "../interfaces/media-requests/media-request-types";
+import {
+  UpstreamMediaAvailability,
+  UpstreamMediaRequestStatus,
+} from "../interfaces/media-requests/media-request-types";
 
 interface OverseerrSearchResult {
   id: number;
@@ -128,7 +137,7 @@ export class OverseerrIntegration
 
     if (pendingResults.length > 0 && allResults.length > 0) {
       requests = pendingResults.concat(
-        allResults.filter(({ status }) => status !== MediaRequestStatus.PendingApproval),
+        allResults.filter(({ status }) => status !== UpstreamMediaRequestStatus.PendingApproval),
       );
     } else if (pendingResults.length > 0) requests = pendingResults;
     else if (allResults.length > 0) requests = allResults;
@@ -137,11 +146,15 @@ export class OverseerrIntegration
     return await Promise.all(
       requests.map(async (request): Promise<MediaRequest> => {
         const information = await this.getItemInformationAsync(request.media.tmdbId, request.type);
+
+        // See https://github.com/seerr-team/seerr/blob/af083a3cd5c3e3d5d7917fdf4fdd67fe3f39c46b/src/components/StatusBadge/index.tsx#L40
+        const inProgress = (request.media.downloadStatus ?? []).length >= 1;
+
         return {
           id: request.id,
           name: information.name,
-          status: request.status,
-          availability: request.media.status,
+          status: this.mapRequestStatus(request.status),
+          availability: this.mapAvailability(request.media.status, inProgress),
           backdropImageUrl: `https://image.tmdb.org/t/p/original/${information.backdropPath}`,
           posterImagePath: `https://image.tmdb.org/t/p/w600_and_h900_bestv2/${information.posterPath}`,
           href: this.externalUrl(`/${request.type}/${request.media.tmdbId}`).toString(),
@@ -161,6 +174,42 @@ export class OverseerrIntegration
     );
   }
 
+  protected mapRequestStatus(status: UpstreamMediaRequestStatus): MediaRequestStatus {
+    switch (status) {
+      case UpstreamMediaRequestStatus.PendingApproval:
+        return "pending";
+      case UpstreamMediaRequestStatus.Approved:
+        return "approved";
+      case UpstreamMediaRequestStatus.Declined:
+        return "declined";
+      case UpstreamMediaRequestStatus.Failed:
+        return "failed";
+      case UpstreamMediaRequestStatus.Completed:
+        return "completed";
+      default:
+        return "failed";
+    }
+  }
+
+  // See https://github.com/seerr-team/seerr/blob/af083a3cd5c3e3d5d7917fdf4fdd67fe3f39c46b/src/components/StatusBadge/index.tsx#L153-L387
+  protected mapAvailability(availability: UpstreamMediaAvailability, inProgress: boolean): MediaAvailability {
+    switch (availability) {
+      case UpstreamMediaAvailability.Available:
+        return inProgress ? "processing" : "available";
+      case UpstreamMediaAvailability.PartiallyAvailable:
+        return inProgress ? "processing" : "partiallyAvailable";
+      case UpstreamMediaAvailability.Processing:
+        return inProgress ? "processing" : "requested";
+      case UpstreamMediaAvailability.Pending:
+        return "pending";
+      case UpstreamMediaAvailability.JellyseerrBlacklistedOrOverseerrDeleted:
+        return "deleted";
+      case UpstreamMediaAvailability.Unknown:
+      default:
+        return inProgress ? "processing" : "unknown";
+    }
+  }
+
   public async getStatsAsync(): Promise<RequestStats> {
     const response = await fetchWithTrustedCertificatesAsync(this.url("/api/v1/request/count"), {
       headers: {
@@ -339,11 +388,12 @@ const getRequestsSchema = z.object({
     .array(
       z.object({
         id: z.number(),
-        status: z.nativeEnum(MediaRequestStatus),
+        status: z.enum(UpstreamMediaRequestStatus),
         createdAt: z.string().transform((value) => new Date(value)),
         media: z.object({
-          status: z.nativeEnum(MediaAvailability),
+          status: z.enum(UpstreamMediaAvailability),
           tmdbId: z.number(),
+          downloadStatus: z.array(z.unknown()).optional(),
         }),
         type: z.enum(["movie", "tv"]),
         requestedBy: z

packages/modals-collection/package.json

@@ -33,7 +33,7 @@
     "@homarr/translation": "workspace:^0.1.0",
     "@homarr/ui": "workspace:^0.1.0",
     "@homarr/validation": "workspace:^0.1.0",
-    "@mantine/core": "^8.3.7",
+    "@mantine/core": "^8.3.8",
     "@tabler/icons-react": "^3.35.0",
     "dayjs": "^1.11.19",
     "next": "16.0.3",

packages/modals/package.json

@@ -24,8 +24,8 @@
   "dependencies": {
     "@homarr/translation": "workspace:^0.1.0",
     "@homarr/ui": "workspace:^0.1.0",
-    "@mantine/core": "^8.3.7",
-    "@mantine/hooks": "^8.3.7",
+    "@mantine/core": "^8.3.8",
+    "@mantine/hooks": "^8.3.8",
     "react": "19.2.0"
   },
   "devDependencies": {

packages/notifications/package.json

@@ -24,7 +24,7 @@
   "prettier": "@homarr/prettier-config",
   "dependencies": {
     "@homarr/ui": "workspace:^0.1.0",
-    "@mantine/notifications": "^8.3.7",
+    "@mantine/notifications": "^8.3.8",
     "@tabler/icons-react": "^3.35.0"
   },
   "devDependencies": {

packages/old-import/package.json

@@ -37,8 +37,8 @@
     "@homarr/translation": "workspace:^0.1.0",
     "@homarr/ui": "workspace:^0.1.0",
     "@homarr/validation": "workspace:^0.1.0",
-    "@mantine/core": "^8.3.7",
-    "@mantine/hooks": "^8.3.7",
+    "@mantine/core": "^8.3.8",
+    "@mantine/hooks": "^8.3.8",
     "adm-zip": "0.5.16",
     "next": "16.0.3",
     "react": "19.2.0",

packages/settings/package.json

@@ -26,7 +26,7 @@
     "@homarr/api": "workspace:^0.1.0",
     "@homarr/db": "workspace:^0.1.0",
     "@homarr/server-settings": "workspace:^0.1.0",
-    "@mantine/dates": "^8.3.7",
+    "@mantine/dates": "^8.3.8",
     "next": "16.0.3",
     "react": "19.2.0",
     "react-dom": "19.2.0"

packages/spotlight/package.json

@@ -33,9 +33,9 @@
     "@homarr/settings": "workspace:^0.1.0",
     "@homarr/translation": "workspace:^0.1.0",
     "@homarr/ui": "workspace:^0.1.0",
-    "@mantine/core": "^8.3.7",
-    "@mantine/hooks": "^8.3.7",
-    "@mantine/spotlight": "^8.3.7",
+    "@mantine/core": "^8.3.8",
+    "@mantine/hooks": "^8.3.8",
+    "@mantine/spotlight": "^8.3.8",
     "@tabler/icons-react": "^3.35.0",
     "jotai": "^2.15.1",
     "next": "16.0.3",

packages/translation/src/lang/en.json

@@ -2232,6 +2232,7 @@
         "unknown": "Unknown",
         "pending": "Pending",
         "processing": "Processing",
+        "requested": "Requested",
         "partiallyAvailable": "Partial",
         "available": "Available",
         "blacklisted": "Blacklisted",

packages/ui/package.json

@@ -30,9 +30,9 @@
     "@homarr/log": "workspace:^0.1.0",
     "@homarr/translation": "workspace:^0.1.0",
     "@homarr/validation": "workspace:^0.1.0",
-    "@mantine/core": "^8.3.7",
-    "@mantine/dates": "^8.3.7",
-    "@mantine/hooks": "^8.3.7",
+    "@mantine/core": "^8.3.8",
+    "@mantine/dates": "^8.3.8",
+    "@mantine/hooks": "^8.3.8",
     "@tabler/icons-react": "^3.35.0",
     "mantine-react-table": "2.0.0-beta.9",
     "next": "16.0.3",

packages/widgets/package.json

@@ -48,9 +48,9 @@
     "@homarr/translation": "workspace:^0.1.0",
     "@homarr/ui": "workspace:^0.1.0",
     "@homarr/validation": "workspace:^0.1.0",
-    "@mantine/charts": "^8.3.7",
-    "@mantine/core": "^8.3.7",
-    "@mantine/hooks": "^8.3.7",
+    "@mantine/charts": "^8.3.8",
+    "@mantine/core": "^8.3.8",
+    "@mantine/hooks": "^8.3.8",
     "@tabler/icons-react": "^3.35.0",
     "@tiptap/extension-color": "2.27.1",
     "@tiptap/extension-highlight": "2.27.1",

packages/widgets/src/iframe/component.tsx

@@ -85,7 +85,13 @@ const getAllowedPermissions = (
 const getSandboxFlags = (
   permissions: Omit<WidgetComponentProps<"iframe">["options"], "embedUrl" | "allowScrolling">,
 ) => {
-  const baseSandbox = ["allow-scripts", "allow-same-origin", "allow-forms", "allow-popups"];
+  const baseSandbox = [
+    "allow-scripts",
+    "allow-same-origin",
+    "allow-forms",
+    "allow-popups",
+    "allow-top-navigation-by-user-activation",
+  ];
 
   if (permissions.allowFullScreen) {
     baseSandbox.push("allow-presentation");

packages/widgets/src/media-requests/list/component.tsx

@@ -3,10 +3,11 @@
 import { ActionIcon, Anchor, Avatar, Badge, Card, Group, Image, ScrollArea, Stack, Text, Tooltip } from "@mantine/core";
 import { IconThumbDown, IconThumbUp } from "@tabler/icons-react";
 
+import type { RouterInputs, RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
 import { useRequiredBoard } from "@homarr/boards/context";
-import { MediaAvailability, MediaRequestStatus } from "@homarr/integrations/types";
-import type { ScopedTranslationFunction } from "@homarr/translation";
+import type { MediaRequestStatus } from "@homarr/integrations/types";
+import { mediaAvailabilityConfiguration, mediaRequestStatusConfiguration } from "@homarr/integrations/types";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../../definition";
@@ -18,7 +19,6 @@ export default function MediaServerWidget({
   options,
   width,
 }: WidgetComponentProps<"mediaRequests-requestList">) {
-  const t = useScopedI18n("widget.mediaRequests-requestList");
   const [mediaRequests] = clientApi.widget.mediaRequests.getLatestRequests.useSuspenseQuery(
     {
       integrationIds,
@@ -48,20 +48,18 @@ export default function MediaServerWidget({
               return dataB.createdAt.getTime() - dataA.createdAt.getTime();
             }
 
-            return dataA.status - dataB.status;
+            return (
+              mediaRequestStatusConfiguration[dataA.status].position -
+              mediaRequestStatusConfiguration[dataB.status].position
+            );
           });
         });
       },
     },
   );
 
-  const { mutate: mutateRequestAnswer } = clientApi.widget.mediaRequests.answerRequest.useMutation();
-  const board = useRequiredBoard();
-
   if (mediaRequests.length === 0) throw new NoIntegrationDataError();
 
-  const isTiny = width < 256;
-
   return (
     <ScrollArea
       className="mediaRequests-list-scrollArea"
@@ -70,193 +68,188 @@ export default function MediaServerWidget({
     >
       <Stack className="mediaRequests-list-list" gap="xs" p="sm">
         {mediaRequests.map((mediaRequest) => (
-          <Card
-            className={`mediaRequests-list-item-wrapper mediaRequests-list-item-${mediaRequest.type} mediaRequests-list-item-${mediaRequest.status}`}
+          <MediaRequestCard
             key={`${mediaRequest.integrationId}-${mediaRequest.id}`}
-            radius={board.itemRadius}
-            p="xs"
-            withBorder
-          >
-            <Image
-              className="mediaRequests-list-item-background"
-              src={mediaRequest.backdropImageUrl}
-              pos="absolute"
-              w="100%"
-              h="100%"
-              opacity={0.2}
-              top={0}
-              left={0}
-              alt=""
-            />
-
-            <Group
-              className="mediaRequests-list-item-contents"
-              h="100%"
-              style={{ zIndex: 1 }}
-              justify="space-between"
-              wrap="nowrap"
-              gap={0}
-            >
-              <Group className="mediaRequests-list-item-left-side" h="100%" gap="md" wrap="nowrap" flex={1}>
-                {!isTiny && (
-                  <Image
-                    className="mediaRequests-list-item-poster"
-                    src={mediaRequest.posterImagePath}
-                    h={40}
-                    w="auto"
-                    radius={"md"}
-                  />
-                )}
-
-                <Stack gap={0} w="100%">
-                  <Group justify="space-between" gap="xs" className="mediaRequests-list-item-top-group">
-                    <Group gap="xs">
-                      <Text className="mediaRequests-list-item-media-year" size="xs">
-                        {mediaRequest.airDate?.getFullYear() ?? t("toBeDetermined")}
-                      </Text>
-                      {!isTiny && (
-                        <Badge
-                          className="mediaRequests-list-item-media-status"
-                          color={getAvailabilityProperties(mediaRequest.availability, t).color}
-                          variant="light"
-                          size="xs"
-                        >
-                          {getAvailabilityProperties(mediaRequest.availability, t).label}
-                        </Badge>
-                      )}
-                    </Group>
-                    <Group className="mediaRequests-list-item-request-user" gap={4} wrap="nowrap">
-                      <Avatar
-                        className="mediaRequests-list-item-request-user-avatar"
-                        src={mediaRequest.requestedBy?.avatar}
-                        size="xs"
-                      />
-                      <Anchor
-                        className="mediaRequests-list-item-request-user-name"
-                        href={mediaRequest.requestedBy?.link}
-                        c="var(--mantine-color-text)"
-                        target={options.linksTargetNewTab ? "_blank" : "_self"}
-                        fz="xs"
-                        lineClamp={1}
-                        style={{ wordBreak: "break-all" }}
-                      >
-                        {(mediaRequest.requestedBy?.displayName ?? "") || "unknown"}
-                      </Anchor>
-                    </Group>
-                  </Group>
-                  <Group gap="xs" justify="space-between" className="mediaRequests-list-item-bottom-group">
-                    <Anchor
-                      className="mediaRequests-list-item-info-second-line mediaRequests-list-item-media-title"
-                      href={mediaRequest.href}
-                      c="var(--mantine-color-text)"
-                      target={options.linksTargetNewTab ? "_blank" : "_self"}
-                      fz={isTiny ? "xs" : "sm"}
-                      fw={"bold"}
-                      title={mediaRequest.name}
-                      lineClamp={1}
-                    >
-                      {mediaRequest.name || "unknown"}
-                    </Anchor>
-                    {mediaRequest.status === MediaRequestStatus.PendingApproval ? (
-                      <Group className="mediaRequests-list-item-pending-buttons" gap="sm">
-                        <Tooltip label={t("pending.approve")}>
-                          <ActionIcon
-                            className="mediaRequests-list-item-pending-button-approve"
-                            variant="light"
-                            color="green"
-                            size="xs"
-                            radius="md"
-                            onClick={() => {
-                              mutateRequestAnswer({
-                                integrationId: mediaRequest.integrationId,
-                                requestId: mediaRequest.id,
-                                answer: "approve",
-                              });
-                            }}
-                          >
-                            <IconThumbUp size={16} />
-                          </ActionIcon>
-                        </Tooltip>
-                        <Tooltip label={t("pending.decline")}>
-                          <ActionIcon
-                            className="mediaRequests-list-item-pending-button-decline"
-                            variant="light"
-                            color="red"
-                            size="xs"
-                            radius="md"
-                            onClick={() => {
-                              mutateRequestAnswer({
-                                integrationId: mediaRequest.integrationId,
-                                requestId: mediaRequest.id,
-                                answer: "decline",
-                              });
-                            }}
-                          >
-                            <IconThumbDown size={16} />
-                          </ActionIcon>
-                        </Tooltip>
-                      </Group>
-                    ) : (
-                      <StatusBadge status={mediaRequest.status} />
-                    )}
-                  </Group>
-                </Stack>
-              </Group>
-            </Group>
-          </Card>
+            request={mediaRequest}
+            isTiny={width <= 256}
+            options={options}
+          />
         ))}
       </Stack>
     </ScrollArea>
   );
 }
 
-const statusMapping = {
-  [MediaRequestStatus.PendingApproval]: { color: "blue", label: (t) => t("pending") },
-  [MediaRequestStatus.Approved]: { color: "green", label: (t) => t("approved") },
-  [MediaRequestStatus.Declined]: { color: "red", label: (t) => t("declined") },
-  [MediaRequestStatus.Failed]: { color: "red", label: (t) => t("failed") },
-  [MediaRequestStatus.Completed]: { color: "green", label: (t) => t("completed") },
-} satisfies Record<
-  MediaRequestStatus,
-  {
-    color: string;
-    label: (t: ScopedTranslationFunction<"widget.mediaRequests-requestList.status">) => string;
-  }
->;
+interface MediaRequestCardProps {
+  request: RouterOutputs["widget"]["mediaRequests"]["getLatestRequests"][number];
+  isTiny: boolean;
+  options: WidgetComponentProps<"mediaRequests-requestList">["options"];
+}
+
+const MediaRequestCard = ({ request, isTiny, options }: MediaRequestCardProps) => {
+  const board = useRequiredBoard();
+  const t = useScopedI18n("widget.mediaRequests-requestList");
+
+  return (
+    <Card
+      className={`mediaRequests-list-item-wrapper mediaRequests-list-item-${request.type} mediaRequests-list-item-${request.status}`}
+      radius={board.itemRadius}
+      p="xs"
+      withBorder
+    >
+      <Image
+        className="mediaRequests-list-item-background"
+        src={request.backdropImageUrl}
+        pos="absolute"
+        w="100%"
+        h="100%"
+        opacity={0.2}
+        top={0}
+        left={0}
+        alt=""
+      />
+
+      <Group
+        className="mediaRequests-list-item-contents"
+        h="100%"
+        style={{ zIndex: 1 }}
+        justify="space-between"
+        wrap="nowrap"
+        gap={0}
+      >
+        <Group className="mediaRequests-list-item-left-side" h="100%" gap="md" wrap="nowrap" flex={1}>
+          {!isTiny && (
+            <Image
+              className="mediaRequests-list-item-poster"
+              src={request.posterImagePath}
+              h={40}
+              w="auto"
+              radius={"md"}
+            />
+          )}
+
+          <Stack gap={0} w="100%">
+            <Group justify="space-between" gap="xs" className="mediaRequests-list-item-top-group">
+              <Group gap="xs">
+                <Text className="mediaRequests-list-item-media-year" size="xs">
+                  {request.airDate?.getFullYear() ?? t("toBeDetermined")}
+                </Text>
+                {!isTiny && (
+                  <Badge
+                    className="mediaRequests-list-item-media-status"
+                    color={mediaAvailabilityConfiguration[request.availability].color}
+                    variant="light"
+                    size="xs"
+                  >
+                    {t(`availability.${request.availability}`)}
+                  </Badge>
+                )}
+              </Group>
+              <Group className="mediaRequests-list-item-request-user" gap={4} wrap="nowrap">
+                <Avatar
+                  className="mediaRequests-list-item-request-user-avatar"
+                  src={request.requestedBy?.avatar}
+                  size="xs"
+                />
+                <Anchor
+                  className="mediaRequests-list-item-request-user-name"
+                  href={request.requestedBy?.link}
+                  c="var(--mantine-color-text)"
+                  target={options.linksTargetNewTab ? "_blank" : "_self"}
+                  fz="xs"
+                  lineClamp={1}
+                  style={{ wordBreak: "break-all" }}
+                >
+                  {(request.requestedBy?.displayName ?? "") || "unknown"}
+                </Anchor>
+              </Group>
+            </Group>
+            <Group gap="xs" justify="space-between" className="mediaRequests-list-item-bottom-group">
+              <Anchor
+                className="mediaRequests-list-item-info-second-line mediaRequests-list-item-media-title"
+                href={request.href}
+                c="var(--mantine-color-text)"
+                target={options.linksTargetNewTab ? "_blank" : "_self"}
+                fz={isTiny ? "xs" : "sm"}
+                fw={"bold"}
+                title={request.name}
+                lineClamp={1}
+              >
+                {request.name || "unknown"}
+              </Anchor>
+              {request.status === "pending" ? (
+                <DecisionButtons requestId={request.id} integrationId={request.integrationId} />
+              ) : (
+                <StatusBadge status={request.status} />
+              )}
+            </Group>
+          </Stack>
+        </Group>
+      </Group>
+    </Card>
+  );
+};
+
+interface DecisionButtonsProps {
+  requestId: number;
+  integrationId: string;
+}
+
+const DecisionButtons = ({ requestId, integrationId }: DecisionButtonsProps) => {
+  const { mutate: mutateRequestAnswer } = clientApi.widget.mediaRequests.answerRequest.useMutation();
+  const t = useScopedI18n("widget.mediaRequests-requestList");
+  const handleDecision = (answer: RouterInputs["widget"]["mediaRequests"]["answerRequest"]["answer"]) => {
+    mutateRequestAnswer({
+      integrationId,
+      requestId,
+      answer,
+    });
+  };
+
+  return (
+    <Group className="mediaRequests-list-item-pending-buttons" gap="sm">
+      <Tooltip label={t("pending.approve")}>
+        <ActionIcon
+          className="mediaRequests-list-item-pending-button-approve"
+          variant="light"
+          color="green"
+          size="xs"
+          radius="md"
+          onClick={() => {
+            handleDecision("approve");
+          }}
+        >
+          <IconThumbUp size={16} />
+        </ActionIcon>
+      </Tooltip>
+      <Tooltip label={t("pending.decline")}>
+        <ActionIcon
+          className="mediaRequests-list-item-pending-button-decline"
+          variant="light"
+          color="red"
+          size="xs"
+          radius="md"
+          onClick={() => {
+            handleDecision("decline");
+          }}
+        >
+          <IconThumbDown size={16} />
+        </ActionIcon>
+      </Tooltip>
+    </Group>
+  );
+};
 
 interface StatusBadgeProps {
   status: MediaRequestStatus;
 }
 
 const StatusBadge = ({ status }: StatusBadgeProps) => {
-  const { color, label } = statusMapping[status];
   const tStatus = useScopedI18n("widget.mediaRequests-requestList.status");
 
   return (
-    <Badge size="xs" color={color} variant="light">
-      {label(tStatus)}
+    <Badge size="xs" color={mediaRequestStatusConfiguration[status].color} variant="light">
+      {tStatus(status)}
     </Badge>
   );
 };
-
-function getAvailabilityProperties(
-  mediaRequestAvailability: MediaAvailability,
-  t: ScopedTranslationFunction<"widget.mediaRequests-requestList">,
-) {
-  switch (mediaRequestAvailability) {
-    case MediaAvailability.Available:
-      return { color: "green", label: t("availability.available") };
-    case MediaAvailability.PartiallyAvailable:
-      return { color: "yellow", label: t("availability.partiallyAvailable") };
-    case MediaAvailability.Processing:
-      return { color: "blue", label: t("availability.processing") };
-    case MediaAvailability.Pending:
-      return { color: "violet", label: t("availability.pending") };
-    case MediaAvailability.Blacklisted:
-      return { color: "gray", label: t("availability.blacklisted") };
-    case MediaAvailability.Deleted:
-      return { color: "red", label: t("availability.deleted") };
-    default:
-      return { color: "orange", label: t("availability.unknown") };
-  }
-}