feat(i18n): add media mode help text and request modal status translations

- Add search.mode.media.help for the Modes list entry - Add table header 'Status' and status badge 'Requested' for the request modal season table
feat(media-request): add availability indicators and allow TV re-requests
2026-05-30 00:56:39 +02:00 · 2026-05-30 00:56:32 +02:00 · 2026-05-30 00:56:24 +02:00 · 2026-05-30 00:56:15 +02:00
9 changed files with 59 additions and 58 deletions
@@ -149,8 +149,7 @@ export const NewIntegrationForm = ({ searchParams }: NewIntegrationFormProps) =>
  };

  const integrationCategories = integrationDefs[searchParams.kind].category.flat();
-  const supportsSearchEngine =
-    integrationCategories.includes("search") && !integrationCategories.includes("mediaSearch");
+  const supportsSearchEngine = integrationCategories.includes("search") && !integrationCategories.includes("mediaSearch");

  return (
    <form onSubmit={form.onSubmit((value) => void handleSubmitAsync(value))}>
@@ -82,7 +82,7 @@ export const integrationRouter = createTRPCRouter({
          },
        };
      })
-      .toSorted(
+      .sort(
        (integrationA, integrationB) =>
          integrationKinds.indexOf(integrationA.kind) - integrationKinds.indexOf(integrationB.kind),
      );
@@ -130,7 +130,7 @@ export const integrationRouter = createTRPCRouter({
          },
        };
      })
-      .toSorted(
+      .sort(
        (integrationA, integrationB) =>
          integrationKinds.indexOf(integrationA.kind) - integrationKinds.indexOf(integrationB.kind),
      );
@@ -181,7 +181,7 @@ export const integrationRouter = createTRPCRouter({
            },
          };
        })
-        .toSorted(
+        .sort(
          (integrationA, integrationB) =>
            integrationKinds.indexOf(integrationA.kind) - integrationKinds.indexOf(integrationB.kind),
        );
@@ -484,7 +484,7 @@ export const integrationRouter = createTRPCRouter({
    });

    return {
-      inherited: dbGroupPermissions.toSorted((permissionA, permissionB) => {
+      inherited: dbGroupPermissions.sort((permissionA, permissionB) => {
        return permissionA.group.name.localeCompare(permissionB.group.name);
      }),
      users: userPermissions
@@ -492,7 +492,7 @@ export const integrationRouter = createTRPCRouter({
          user,
          permission,
        }))
-        .toSorted((permissionA, permissionB) => {
+        .sort((permissionA, permissionB) => {
          return (permissionA.user.name ?? "").localeCompare(permissionB.user.name ?? "");
        }),
      groups: dbGroupIntegrationPermission
@@ -503,7 +503,7 @@ export const integrationRouter = createTRPCRouter({
          },
          permission,
        }))
-        .toSorted((permissionA, permissionB) => {
+        .sort((permissionA, permissionB) => {
          return permissionA.group.name.localeCompare(permissionB.group.name);
        }),
    };
@@ -12,14 +12,14 @@ interface SeriesInformation {
  overview: string;
  seasons: SerieSeason[];
  posterPath: string;
-  requestedSeasons?: number[];
+  requestedSeasons: number[];
 }

 interface MovieInformation {
  id: number;
  overview: string;
  posterPath: string;
-  requestedSeasons?: number[];
+  requestedSeasons: number[];
 }

 export type MediaInformation = SeriesInformation | MovieInformation;
@@ -75,7 +75,9 @@ export class OverseerrIntegration
    });
    const data = await mediaInformationSchema.parseAsync(await response.json());
    const requestedSeasons = [
-      ...new Set(data.mediaInfo?.requests?.flatMap((req) => req.seasons.map((s) => s.seasonNumber)) ?? []),
+      ...new Set(
+        data.mediaInfo?.requests?.flatMap((req) => req.seasons.map((s) => s.seasonNumber)) ?? [],
+      ),
    ];
    const { mediaInfo: _strip, ...rest } = data;
    return { ...rest, requestedSeasons };
@@ -349,21 +351,13 @@ interface MovieInformation {
  releaseDate: string;
 }

-const mediaInfoRequestsSchema = z
-  .object({
-    requests: z
-      .array(
-        z.object({
-          seasons: z.array(
-            z.object({
-              seasonNumber: z.number(),
-            }),
-          ),
-        }),
-      )
-      .optional(),
-  })
-  .optional();
+const mediaInfoRequestsSchema = z.object({
+  requests: z.array(z.object({
+    seasons: z.array(z.object({
+      seasonNumber: z.number(),
+    })),
+  })).optional(),
+}).optional();

 const mediaInformationSchema = z.union([
  z.object({
@@ -389,11 +383,9 @@ const mediaInformationSchema = z.union([
  }),
 ]);

-const searchMediaInfoSchema = z
-  .object({
-    status: z.number(),
-  })
-  .optional();
+const searchMediaInfoSchema = z.object({
+  status: z.number(),
+}).optional();

 const searchSchema = z.object({
  results: z
@@ -78,8 +78,12 @@ export const homeSearchEngineGroup = createGroup<GroupItem>({

    return {
      isLoading:
-        defaultSearchEngineQuery.isLoading || (resultQuery.isLoading && fromIntegrationEnabled) || status === "loading",
-      isError: defaultSearchEngineQuery.isError || (resultQuery.isError && fromIntegrationEnabled),
+        defaultSearchEngineQuery.isLoading ||
+        (resultQuery.isLoading && fromIntegrationEnabled) ||
+        status === "loading",
+      isError:
+        defaultSearchEngineQuery.isError ||
+        (resultQuery.isError && fromIntegrationEnabled),
      data: createDefaultSearchEntries(defaultSearchEngine, results, session, query, t),
    };
  },
@@ -15,8 +15,13 @@ import { createGroup } from "../../lib/group";
 import { mediaRequestSearchScopeAtom } from "../../spotlight-store";
 import { useMediaRequestSearchInteraction } from "../external/search-engines-search-group";

-const availabilityLabelKeys = ["available", "partiallyAvailable", "processing", "requested", "pending"] as const;
-type AvailabilityWithLabel = (typeof availabilityLabelKeys)[number];
+const availabilityLabels: Partial<Record<MediaAvailability, string>> = {
+  available: "Available",
+  partiallyAvailable: "Partial",
+  processing: "Processing",
+  requested: "Requested",
+  pending: "Requested",
+};

 type MediaRequestSearchResult = RouterOutputs["integration"]["searchMediaRequests"][number];

@@ -37,8 +42,6 @@ export const mediaRequestSearchGroup = createGroup<MediaRequestSearchOption>({
  keyPath: "key",
  title: (t) => t("search.mode.media.group.title"),
  Component(option) {
-    const tMedia = useScopedI18n("search.mode.media");
-
    if (option.kind !== "result") {
      return (
        <Group w="100%" wrap="nowrap" align="center" px="md" py="xs" opacity={option.kind === "disabled" ? 0.55 : 1}>
@@ -54,11 +57,7 @@ export const mediaRequestSearchGroup = createGroup<MediaRequestSearchOption>({
    }

    const { result } = option;
-    const hasAvailabilityLabel =
-      result.availability && (availabilityLabelKeys as readonly string[]).includes(result.availability);
-    const badgeLabel = hasAvailabilityLabel
-      ? tMedia(`availability.${result.availability as AvailabilityWithLabel}`)
-      : undefined;
+    const badgeLabel = result.availability ? availabilityLabels[result.availability as MediaAvailability] : undefined;
    const badgeColor = result.availability
      ? mediaAvailabilityConfiguration[result.availability as MediaAvailability]?.color
      : undefined;
@@ -73,11 +72,7 @@ export const mediaRequestSearchGroup = createGroup<MediaRequestSearchOption>({
        <Stack gap={2} style={{ flex: 1 }}>
          <Group gap="xs" wrap="nowrap">
            <Text>{result.name}</Text>
-            {badgeLabel && (
-              <Badge size="xs" color={badgeColor} variant="light">
-                {badgeLabel}
-              </Badge>
-            )}
+            {badgeLabel && <Badge size="xs" color={badgeColor} variant="light">{badgeLabel}</Badge>}
          </Group>
          <Text c="dimmed" size="sm" lineClamp={2}>
            {result.text ?? getIntegrationName(result.integration.kind)}
@@ -4567,13 +4567,6 @@
              "scoped": "This widget does not have an accessible media request integration."
            }
          }
-        },
-        "availability": {
-          "available": "Available",
-          "partiallyAvailable": "Partial",
-          "processing": "Processing",
-          "requested": "Requested",
-          "pending": "Requested"
        }
      },
      "external": {
@@ -58,7 +58,7 @@ export default function MediaServerWidget({
          const newData = filteredData.concat(
            data.requests.map((request) => ({ ...request, integrationId: data.integrationId })),
          );
-          return newData.toSorted((dataA, dataB) => {
+          return newData.sort((dataA, dataB) => {
            if (dataA.status === dataB.status) {
              return dataB.createdAt.getTime() - dataA.createdAt.getTime();
            }
@@ -120,7 +120,13 @@ export default function MediaServerWidget({
              >
                <Tooltip label={t(`titles.stats.${stat.name}`)}>
                  <Card p={0} radius={board.itemRadius} className={classes.card}>
-                    <Group className="mediaRequests-stats-stat-stack" justify="center" align="center" gap="xs" w="100%">
+                    <Group
+                      className="mediaRequests-stats-stat-stack"
+                      justify="center"
+                      align="center"
+                      gap="xs"
+                      w="100%"
+                    >
                      <stat.icon className="mediaRequests-stats-stat-icon" size={16} />
                      <Text className="mediaRequests-stats-stat-value" size="md">
                        {stat.number}
@@ -136,7 +142,13 @@ export default function MediaServerWidget({
          <Text className="mediaRequests-stats-users-title" fw="bold" ta="center" size={isTiny ? "xs" : "sm"}>
            {t("titles.users.main")} ({t("titles.users.requests")})
          </Text>
-          <Stack className="mediaRequests-stats-users-wrapper" flex={1} w="100%" gap={4} style={{ overflow: "hidden" }}>
+          <Stack
+            className="mediaRequests-stats-users-wrapper"
+            flex={1}
+            w="100%"
+            gap={4}
+            style={{ overflow: "hidden" }}
+          >
            {requestStats.users.slice(0, 10).map((user) => (
              <Card
                component="a"
@@ -152,7 +164,13 @@ export default function MediaServerWidget({
                p="xs"
                radius={board.itemRadius}
              >
-                <Group className="mediaRequests-stats-users-user-group" h="100%" p={0} gap="sm" justify="space-between">
+                <Group
+                  className="mediaRequests-stats-users-user-group"
+                  h="100%"
+                  p={0}
+                  gap="sm"
+                  justify="space-between"
+                >
                  <Group gap={4}>
                    <Tooltip label={user.integration.name}>
                      <Avatar
Author	SHA1	Message	Date
Thomas Camlong	b2b22aace0	feat(i18n): add media mode help text and request modal status translations - Add search.mode.media.help for the Modes list entry - Add table header 'Status' and status badge 'Requested' for the request modal season table	2026-05-30 00:56:39 +02:00
Thomas Camlong	3e856c648f	feat(media-request): add availability indicators and allow TV re-requests - Extend searchSchema to parse mediaInfo.status and map to MediaAvailability (available, partial, processing, requested) - Extend mediaInformationSchema to parse already-requested seasons from mediaInfo.requests[].seasons[].seasonNumber - Show colored availability badge on search results in spotlight - Allow re-requesting TV shows (hide Request only for fully available movies), so users can request additional seasons	2026-05-30 00:56:32 +02:00
Thomas Camlong	8a0c438a7d	fix(spotlight): add media mode to Modes list and remove from search results Media request search now appears in the Modes section (with no keyboard shortcut) instead of being mixed into search results when typing. Changed keyPath from 'character' to 'modeKey' to support modes without a trigger character. Removed the mediaRequestSearchEntry from home search results since it is now accessible via the Modes list.	2026-05-30 00:56:24 +02:00
Thomas Camlong	5a697f911a	fix(api): move getMediaRequestOptions and requestMedia to integration router The procedures were on the searchEngine router which only supported jellyseerr and overseerr kinds. Moved to the integration router with seerr added as a supported kind, fixing NOT_FOUND errors for seerr integrations. Updated RequestMediaModal to use the new endpoint paths.	2026-05-30 00:56:15 +02:00