feat: add releases widget

packages/api/src/router/widgets/index.ts

@@ -11,6 +11,7 @@ import { mediaTranscodingRouter } from "./media-transcoding";
 import { minecraftRouter } from "./minecraft";
 import { notebookRouter } from "./notebook";
 import { optionsRouter } from "./options";
+import { releasesRouter } from "./releases";
 import { rssFeedRouter } from "./rssFeed";
 import { smartHomeRouter } from "./smart-home";
 import { weatherRouter } from "./weather";
@@ -31,4 +32,5 @@ export const widgetRouter = createTRPCRouter({
   mediaTranscoding: mediaTranscodingRouter,
   minecraft: minecraftRouter,
   options: optionsRouter,
+  releases: releasesRouter,
 });

packages/api/src/router/widgets/releases.ts

@@ -0,0 +1,36 @@
+import { z } from "zod";
+
+import { releasesRequestHandler } from "@homarr/request-handler/releases";
+
+import { createTRPCRouter, publicProcedure } from "../../trpc";
+
+export const releasesRouter = createTRPCRouter({
+  getLatest: publicProcedure
+    .input(
+      z.object({
+        releases: z.array(
+          z.object({
+            providerName: z.string(),
+            identifier: z.string(),
+            versionRegex: z.string().optional(),
+          }),
+        ),
+      }),
+    )
+    .query(async ({ input }) => {
+      const result = await Promise.all(
+        input.releases.map(async (release) => {
+          const innerHandler = releasesRequestHandler.handler({
+            providerName: release.providerName,
+            identifier: release.identifier,
+            versionRegex: release.versionRegex,
+          });
+          return await innerHandler.getCachedOrUpdatedDataAsync({
+            forceUpdate: false,
+          });
+        }),
+      );
+
+      return result;
+    }),
+});

packages/api/src/router/widgets/rssFeed.ts

@@ -4,7 +4,7 @@ import { rssFeedsRequestHandler } from "@homarr/request-handler/rss-feeds";
 
 import { createTRPCRouter, publicProcedure } from "../../trpc";
 
-export const rssFeedRouter = createTRPCRouter({
+export const  rssFeedRouter = createTRPCRouter({
   getFeeds: publicProcedure
     .input(
       z.object({

packages/definitions/src/widget.ts

@@ -20,5 +20,6 @@ export const widgetKinds = [
   "bookmarks",
   "indexerManager",
   "healthMonitoring",
+  "releases",
 ] as const;
 export type WidgetKind = (typeof widgetKinds)[number];

packages/forms-collection/src/icon-picker/icon-picker.tsx

@@ -33,9 +33,10 @@ interface IconPickerProps {
   error?: string | null;
   onFocus?: FocusEventHandler;
   onBlur?: FocusEventHandler;
+  withAsterisk?: boolean;
 }
 
-export const IconPicker = ({ value: propsValue, onChange, error, onFocus, onBlur }: IconPickerProps) => {
+export const IconPicker = ({ value: propsValue, onChange, error, onFocus, onBlur, withAsterisk = true }: IconPickerProps) => {
   const [value, setValue] = useUncontrolled({
     value: propsValue,
     onChange,
@@ -145,7 +146,7 @@ export const IconPicker = ({ value: propsValue, onChange, error, onFocus, onBlur
               setSearch(value || "");
             }}
             rightSectionPointerEvents="none"
-            withAsterisk
+            withAsterisk={withAsterisk}
             error={error}
             label={tCommon("iconPicker.label")}
             placeholder={tCommon("iconPicker.header", { countIcons: data?.countIcons ?? 0 })}

packages/request-handler/src/releases.ts

@@ -0,0 +1,146 @@
+import dayjs from "dayjs";
+import { z } from "zod";
+
+import { fetchWithTimeout } from "@homarr/common";
+
+import { Providers } from "../../widgets/src/releases/release-providers";
+import { createCachedWidgetRequestHandler } from "./lib/cached-widget-request-handler";
+
+const dockerResponseSchema = z
+  .object({
+    results: z.array(
+      z
+        .object({ name: z.string(), last_updated: z.string().transform((value) => new Date(value)) })
+        .transform((tag) => ({
+          identifier: "",
+          tag: tag.name,
+          lastUpdated: tag.last_updated,
+        })),
+    ),
+  })
+  .transform((resp) => resp.results);
+
+const githubResponseSchema = z.array(
+  z
+    .object({ tag_name: z.string(), published_at: z.string().transform((value) => new Date(value)) })
+    .transform((tag) => ({
+      identifier: "",
+      tag: tag.tag_name,
+      lastUpdated: tag.published_at,
+    })),
+);
+
+const gitlabResponseSchema = z.array(
+  z.object({ name: z.string(), released_at: z.string().transform((value) => new Date(value)) }).transform((tag) => ({
+    identifier: "",
+    tag: tag.name,
+    lastUpdated: tag.released_at,
+  })),
+);
+
+const npmResponseSchema = z
+  .object({
+    time: z.record(z.string().transform((value) => new Date(value))).transform((version) =>
+      Object.entries(version).map(([key, value]) => ({
+        identifier: "",
+        tag: key,
+        lastUpdated: value,
+      })),
+    ),
+  })
+  .transform((resp) => resp.time);
+
+const codebergResponseSchema = z.array(
+  z
+    .object({ tag_name: z.string(), published_at: z.string().transform((value) => new Date(value)) })
+    .transform((tag) => ({
+      identifier: "",
+      tag: tag.tag_name,
+      lastUpdated: tag.published_at,
+    })),
+);
+
+const _responseSchema = z.object({ identifier: z.string(), tag: z.string(), lastUpdated: z.date() });
+
+function getDockerUrl(identifier: string): string {
+  if (identifier.indexOf("/") > 0) {
+    const [owner, name] = identifier.split("/");
+    if (!owner || !name) {
+      return "";
+    }
+    return `https://hub.docker.com/v2/namespaces/${encodeURIComponent(owner)}/repositories/${encodeURIComponent(name)}/tags?page_size=50`;
+  } else {
+    return `https://hub.docker.com/v2/repositories/library/${encodeURIComponent(identifier)}/tags?page_size=50`;
+  }
+}
+
+function getGithubUrl(identifier: string): string {
+  return `https://api.github.com/repos/${encodeURIComponent(identifier)}/releases`;
+}
+
+function getGitlabUrl(identifier: string): string {
+  return `https://gitlab.com/api/v4/projects/${encodeURIComponent(identifier)}/releases`;
+}
+
+function getNpmUrl(identifier: string): string {
+  return `https://registry.npmjs.org/${encodeURIComponent(identifier)}`;
+}
+
+function getCodebergUrl(identifier: string): string {
+  const [owner, name] = identifier.split("/");
+  if (!owner || !name) {
+    return "";
+  }
+  return `https://codeberg.org/api/v1/repos/${encodeURIComponent(owner)}/${encodeURIComponent(name)}/releases`;
+}
+
+export const releasesRequestHandler = createCachedWidgetRequestHandler({
+  queryKey: "releasesApiResult",
+  widgetKind: "releases",
+  async requestAsync(input: { providerName: string; identifier: string; versionRegex: string | undefined }) {
+    let url = "";
+    let responseSchema;
+    switch (input.providerName) {
+      case Providers.Docker.name:
+        url = getDockerUrl(input.identifier);
+        responseSchema = dockerResponseSchema;
+        break;
+      case Providers.Github.name:
+        url = getGithubUrl(input.identifier);
+        responseSchema = githubResponseSchema;
+        break;
+      case Providers.Gitlab.name:
+        url = getGitlabUrl(input.identifier);
+        responseSchema = gitlabResponseSchema;
+        break;
+      case Providers.Npm.name:
+        url = getNpmUrl(input.identifier);
+        responseSchema = npmResponseSchema;
+        break;
+      case Providers.Codeberg.name:
+        url = getCodebergUrl(input.identifier);
+        responseSchema = codebergResponseSchema;
+        break;
+    }
+
+    if (url === "" || responseSchema === undefined) return undefined;
+
+    const response = await fetchWithTimeout(url);
+    const result = responseSchema.safeParse(await response.json());
+
+    if (!result.success) return undefined;
+
+    const latest: ReleaseResponse = result.data
+      .filter((result) => (input.versionRegex ? new RegExp(input.versionRegex).test(result.tag) : false))
+      .reduce(
+        (latest, result) => {
+          return result.lastUpdated > latest.lastUpdated ? { ...result, identifier: input.identifier } : latest;
+        },
+        { identifier: "", tag: "", lastUpdated: new Date(0) },
+      );
+    return latest;
+  },
+  cacheDuration: dayjs.duration(5, "minutes"),
+});
+
+export type ReleaseResponse = z.infer<typeof _responseSchema>;

packages/translation/src/lang/en.json

@@ -1927,6 +1927,47 @@
           "label": "Amount posts limit"
         }
       }
+    },
+    "releases": {
+      "name": "Releases",
+      "description": "Displays a list of the current version of the given repositories with the given version regex.",
+      "option": {
+        "releases": {
+          "label": "Releases"
+        },
+        "addRelease": {
+          "label": "Add release"
+        },
+        "provider": {
+          "label": "Provider"
+        },
+        "identifier": {
+          "label": "Identifier",
+          "placeholder": "Name or Owner/Name"
+        },
+        "versionRegex": {
+          "label": "Version Regex"
+        },
+        "sortBy": {
+          "label": "Sort By"
+        },
+        "showOnlyNewReleases": {
+          "label": "Show Only New Releases"
+        },
+        "edit": {
+          "label": "Edit"
+        }
+      },
+      "editForm": {
+        "title": "Edit Release",
+        "cancel": {
+          "label": "Cancel"
+        },
+        "confirm": {
+          "label": "Confirm"
+        }
+      },
+      "not-found": "Not Found"
     }
   },
   "widgetPreview": {

packages/widgets/src/_inputs/index.ts

@@ -9,6 +9,7 @@ import { WidgetSliderInput } from "./widget-slider-input";
 import { WidgetSortedItemListInput } from "./widget-sortable-item-list-input";
 import { WidgetSwitchInput } from "./widget-switch-input";
 import { WidgetTextInput } from "./widget-text-input";
+import { WidgetMultiReleasesInput } from "./widget-multiReleases-input";
 
 const mapping = {
   text: WidgetTextInput,
@@ -21,6 +22,7 @@ const mapping = {
   switch: WidgetSwitchInput,
   app: WidgetAppInput,
   sortableItemList: WidgetSortedItemListInput,
+  multiReleases: WidgetMultiReleasesInput
 } satisfies Record<WidgetOptionType, unknown>;
 
 export const getInputForType = <TType extends WidgetOptionType>(type: TType) => {