feat: add support for app url variables (#915)

* feat: add support for app url variables

* fix: test not working

* fix: format issue

packages/widgets/src/app/component.tsx

@@ -8,6 +8,7 @@ import combineClasses from "clsx";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
+import { parseAppHrefWithVariablesClient } from "@homarr/common/client";
 import { useRegisterSpotlightActions } from "@homarr/spotlight";
 import { useScopedI18n } from "@homarr/translation/client";
 
@@ -40,7 +41,7 @@ export default function AppWidget({ options, serverData, isEditMode, width }: Wi
 
   const shouldRunPing = Boolean(app?.href) && options.pingEnabled;
   clientApi.widget.app.updatedPing.useSubscription(
-    { url: app?.href ?? "" },
+    { url: parseAppHrefWithVariablesClient(app?.href ?? "") },
     {
       enabled: shouldRunPing,
       onData(data) {
@@ -60,7 +61,7 @@ export default function AppWidget({ options, serverData, isEditMode, width }: Wi
             icon: app.iconUrl,
             group: "app",
             type: "link",
-            href: app.href,
+            href: parseAppHrefWithVariablesClient(app.href),
             openInNewTab: options.openInNewTab,
           },
         ]
@@ -92,7 +93,11 @@ export default function AppWidget({ options, serverData, isEditMode, width }: Wi
   }
 
   return (
-    <AppLink href={app?.href ?? ""} openInNewTab={options.openInNewTab} enabled={Boolean(app?.href) && !isEditMode}>
+    <AppLink
+      href={parseAppHrefWithVariablesClient(app?.href ?? "")}
+      openInNewTab={options.openInNewTab}
+      enabled={Boolean(app?.href) && !isEditMode}
+    >
       <Tooltip.Floating
         label={app?.description}
         position="right-start"

packages/widgets/src/app/serverData.ts

@@ -2,6 +2,7 @@
 
 import type { RouterOutputs } from "@homarr/api";
 import { api } from "@homarr/api/server";
+import { parseAppHrefWithVariablesServer } from "@homarr/common/server";
 
 import type { WidgetProps } from "../definition";
 
@@ -15,7 +16,9 @@ export default async function getServerDataAsync({ options }: WidgetProps<"app">
     let pingResult: RouterOutputs["widget"]["app"]["ping"] | null = null;
 
     if (app.href && options.pingEnabled) {
-      pingResult = await api.widget.app.ping({ url: app.href });
+      pingResult = await api.widget.app.ping({
+        url: parseAppHrefWithVariablesServer(app.href),
+      });
     }
 
     return { app, pingResult };

packages/widgets/src/app/test/serverData.spec.ts

@@ -30,6 +30,9 @@ vi.mock("@homarr/api/server", () => ({
     },
   },
 }));
+vi.mock("@homarr/common/server", () => ({
+  parseAppHrefWithVariablesServer: () => "http://localhost",
+}));
 
 describe("getServerDataAsync should load app and ping result", () => {
   test("when appId is empty it should return null for app and pingResult", async () => {