feat: radarr release type to calendar widget (#1256)

* feat: add release type

* fix: type check

* fix: deepSource

* fix: new approach

* fix: deepSource

* fix: typecheck

* fix: reviewed changes

packages/widgets/src/calendar/calendar-event-list.tsx

@@ -15,6 +15,7 @@ import { IconClock } from "@tabler/icons-react";
 import dayjs from "dayjs";
 
 import type { CalendarEvent } from "@homarr/integrations/types";
+import { useI18n } from "@homarr/translation/client";
 
 import classes from "./calendar-event-list.module.css";
 
@@ -24,6 +25,7 @@ interface CalendarEventListProps {
 
 export const CalendarEventList = ({ events }: CalendarEventListProps) => {
   const { colorScheme } = useMantineColorScheme();
+  const t = useI18n();
   return (
     <ScrollArea
       offsetScrollbars
@@ -57,14 +59,24 @@ export const CalendarEventList = ({ events }: CalendarEventListProps) => {
                       {event.subName}
                     </Text>
                   )}
-                  <Text fw={"bold"} lineClamp={1}>
+                  <Text fw={"bold"} lineClamp={1} size="sm">
                     {event.name}
                   </Text>
                 </Stack>
-                <Group gap={3} wrap="nowrap">
-                  <IconClock opacity={0.7} size={"1rem"} />
-                  <Text c={"dimmed"}>{dayjs(event.date.toString()).format("HH:mm")}</Text>
-                </Group>
+                {event.dates ? (
+                  <Group wrap="nowrap">
+                    <Text c="dimmed" size="sm">
+                      {t(
+                        `widget.calendar.option.releaseType.options.${event.dates.find(({ date }) => event.date === date)?.type ?? "inCinemas"}`,
+                      )}
+                    </Text>
+                  </Group>
+                ) : (
+                  <Group gap={3} wrap="nowrap">
+                    <IconClock opacity={0.7} size={"1rem"} />
+                    <Text c={"dimmed"}>{dayjs(event.date).format("HH:mm")}</Text>
+                  </Group>
+                )}
               </Group>
               {event.description && (
                 <Text size={"xs"} c={"dimmed"} lineClamp={2}>

packages/widgets/src/calendar/component.tsx

@@ -6,12 +6,18 @@ import { Calendar } from "@mantine/dates";
 import dayjs from "dayjs";
 
 import { clientApi } from "@homarr/api/client";
+import type { CalendarEvent } from "@homarr/integrations/types";
 
 import type { WidgetComponentProps } from "../definition";
 import { CalendarDay } from "./calender-day";
 import classes from "./component.module.css";
 
-export default function CalendarWidget({ isEditMode, integrationIds, itemId }: WidgetComponentProps<"calendar">) {
+export default function CalendarWidget({
+  isEditMode,
+  integrationIds,
+  itemId,
+  options,
+}: WidgetComponentProps<"calendar">) {
   const [events] = clientApi.widget.calendar.findAllEvents.useSuspenseQuery(
     {
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -80,9 +86,16 @@ export default function CalendarWidget({ isEditMode, integrationIds, itemId }: W
           padding: 0,
         },
       }}
-      renderDay={(date) => {
-        const eventsForDate = events.filter((event) => dayjs(event.date).isSame(date, "day"));
-        return <CalendarDay date={date} events={eventsForDate} disabled={isEditMode} />;
+      renderDay={(tileDate) => {
+        const eventsForDate = events
+          .map((event) => ({
+            ...event,
+            date: (event.dates?.filter(({ type }) => options.releaseType.includes(type)) ?? [event]).find(({ date }) =>
+              dayjs(date).isSame(tileDate, "day"),
+            )?.date,
+          }))
+          .filter((event): event is CalendarEvent => Boolean(event.date));
+        return <CalendarDay date={tileDate} events={eventsForDate} disabled={isEditMode} />;
       }}
     />
   );

packages/widgets/src/calendar/index.ts

@@ -1,6 +1,7 @@
 import { IconCalendar } from "@tabler/icons-react";
 
 import { getIntegrationKindsByCategory } from "@homarr/definitions";
+import { radarrReleaseTypes } from "@homarr/integrations/types";
 import { z } from "@homarr/validation";
 
 import { createWidgetDefinition } from "../definition";
@@ -9,6 +10,13 @@ import { optionsBuilder } from "../options";
 export const { definition, componentLoader } = createWidgetDefinition("calendar", {
   icon: IconCalendar,
   options: optionsBuilder.from((factory) => ({
+    releaseType: factory.multiSelect({
+      defaultValue: ["inCinemas", "digitalRelease"],
+      options: radarrReleaseTypes.map((value) => ({
+        value,
+        label: (t) => t(`widget.calendar.option.releaseType.options.${value}`),
+      })),
+    }),
     filterPastMonths: factory.number({
       validate: z.number().min(2).max(9999),
       defaultValue: 2,