feat: add app actions (#322)

* feat: add app actions

* fix: broken lockfile

* fix: app should only load when one is selected and server data not fail when no app found

* fix: add missing dependency

* fix: format issue

packages/widgets/src/app/component.tsx

@@ -3,6 +3,7 @@
 import type { PropsWithChildren } from "react";
 
 import { clientApi } from "@homarr/api/client";
+import { useRegisterSpotlightActions } from "@homarr/spotlight";
 import { useScopedI18n } from "@homarr/translation/client";
 import {
   Center,
@@ -26,6 +27,7 @@ export default function AppWidget({
   height,
 }: WidgetComponentProps<"app">) {
   const t = useScopedI18n("widget.app");
+  const isQueryEnabled = Boolean(options.appId);
   const {
     data: app,
     isPending,
@@ -37,14 +39,34 @@ export default function AppWidget({
     {
       initialData:
         // We need to check if the id's match because otherwise the same initialData for a changed id will be used
-        serverData?.app.id === options.appId ? serverData?.app : undefined,
+        serverData?.app?.id === options.appId ? serverData?.app : undefined,
       refetchOnMount: false,
       refetchOnWindowFocus: false,
       refetchOnReconnect: false,
+      enabled: isQueryEnabled,
     },
   );
 
-  if (isPending) {
+  useRegisterSpotlightActions(
+    `app-${options.appId}`,
+    app?.href
+      ? [
+          {
+            id: `app-${options.appId}`,
+            title: app?.name,
+            description: app?.description ?? "",
+            icon: app?.iconUrl,
+            group: "app",
+            type: "link",
+            href: app?.href,
+            openInNewTab: options.openInNewTab,
+          },
+        ]
+      : [],
+    [app, options.appId, options.openInNewTab],
+  );
+
+  if (isPending && isQueryEnabled) {
     return (
       <Center h="100%">
         <Loader />
@@ -52,7 +74,7 @@ export default function AppWidget({
     );
   }
 
-  if (isError) {
+  if (isError || !isQueryEnabled) {
     return (
       <Tooltip.Floating label={t("error.notFound.tooltip")}>
         <Stack gap="xs" align="center" justify="center" h="100%" w="100%">

packages/widgets/src/app/serverData.ts

@@ -5,6 +5,10 @@ import { api } from "@homarr/api/server";
 import type { WidgetProps } from "../definition";
 
 export default async function getServerData({ options }: WidgetProps<"app">) {
-  const app = await api.app.byId({ id: options.appId });
-  return { app };
+  try {
+    const app = await api.app.byId({ id: options.appId });
+    return { app };
+  } catch (error) {
+    return { app: null };
+  }
 }