adding working mylar

public/locales/en/common.json

@@ -454,5 +454,10 @@
         "uptime": "Uptime",
         "incident": "Incident",
         "m": "m"
+    },
+    "mylar": {
+        "series": "Series",
+        "issues": "Issues",
+        "wanted": "Wanted"
     }
 }

src/widgets/components.js

@@ -27,6 +27,7 @@ const components = {
   miniflux: dynamic(() => import("./miniflux/component")),
   mikrotik: dynamic(() => import("./mikrotik/component")),
   moonraker: dynamic(() => import("./moonraker/component")),
+  mylar: dynamic(() => import("./mylar/component")),
   navidrome: dynamic(() => import("./navidrome/component")),
   nextdns: dynamic(() => import("./nextdns/component")),
   npm: dynamic(() => import("./npm/component")),

src/widgets/mylar/component.jsx

@@ -0,0 +1,40 @@
+import { useTranslation } from "next-i18next";
+
+import Container from "components/services/widget/container";
+import Block from "components/services/widget/block";
+import useWidgetAPI from "utils/proxy/use-widget-api";
+
+export default function Component({ service }) {
+  const { t } = useTranslation();
+
+  const { widget } = service;
+
+  const { data: seriesData, error: seriesError } = useWidgetAPI(widget, "series");
+  const { data: issuesData, error: issuesError } = useWidgetAPI(widget, "issues");
+  const { data: wantedData, error: wantedError } = useWidgetAPI(widget, "wanted");
+
+  if (seriesError || issuesError || wantedError) {
+    const finalError = seriesError ?? issuesError ?? wantedError;
+    return <Container error={finalError} />;
+  }
+
+  if (!seriesData || !issuesData || !wantedData) {
+    return (
+      <Container service={service}>
+        <Block label="mylar.series" />
+        <Block label="mylar.issues" />
+        <Block label="mylar.wanted" />
+      </Container>
+    );
+  }
+
+  const totalIssues = issuesData.data.reduce((acc, series) => acc + series.totalIssues, 0);
+
+  return (
+    <Container service={service}>
+      <Block label="mylar.series" value={t("common.number", { value: seriesData.data.length })} />  
+      <Block label="mylar.issues" value={t("common.number", { value: totalIssues })} />
+      <Block label="mylar.wanted" value={t("common.number", { value: wantedData.issues.length })} />
+    </Container>
+  );
+}

src/widgets/mylar/widget.js

@@ -0,0 +1,20 @@
+import genericProxyHandler from "utils/proxy/handlers/generic";
+
+const widget = {
+  api: "{url}/api?cmd={endpoint}&apikey={key}",
+  proxyHandler: genericProxyHandler,
+
+  mappings: {
+    issues: {
+      endpoint: "getIndex"
+    },
+    series: {
+      endpoint: "seriesjsonListing"
+    },
+    wanted: {
+      endpoint: "getWanted"
+    },
+  },
+};
+
+export default widget;

src/widgets/widgets.js

@@ -21,6 +21,7 @@ import medusa from "./medusa/widget";
 import miniflux from "./miniflux/widget";
 import mikrotik from "./mikrotik/widget";
 import moonraker from "./moonraker/widget";
+import mylar from "./mylar/widget";
 import navidrome from "./navidrome/widget";
 import nextdns from "./nextdns/widget";
 import npm from "./npm/widget";
@@ -85,6 +86,7 @@ const widgets = {
   miniflux,
   mikrotik,
   moonraker,
+  mylar,
   navidrome,
   nextdns,
   npm,