From 99346f288bcfc701c41fecaab6f7bc0438d80563 Mon Sep 17 00:00:00 2001
From: Thomas <thomas@ajnart.fr>
Date: Fri, 5 Jun 2026 12:31:50 +0200
Subject: [PATCH] feat(widgets): add in-place app editing in widget edit modal
 (#5809)

---
 .../src/components/board/items/item-menu.tsx  |   1 +
 .../forms-collection/src/new-app/_form.tsx    | 124 ++++++++---
 packages/translation/src/lang/en.json         |   7 +
 .../src/modals/embedded-app-edit-form.tsx     |  95 +++++++++
 .../widgets/src/modals/widget-edit-modal.tsx  | 195 +++++++++++-------
 5 files changed, 319 insertions(+), 103 deletions(-)
 create mode 100644 packages/widgets/src/modals/embedded-app-edit-form.tsx

diff --git a/apps/nextjs/src/components/board/items/item-menu.tsx b/apps/nextjs/src/components/board/items/item-menu.tsx
index 3b79dafd6..1c0c4100a 100644
--- a/apps/nextjs/src/components/board/items/item-menu.tsx
+++ b/apps/nextjs/src/components/board/items/item-menu.tsx
@@ -85,6 +85,7 @@ const BoardItemMenuInner = ({ offset, item, resetErrorBoundary }: BoardItemMenuP
         ),
         integrationSupport: "supportedIntegrations" in currentDefinition,
         settings,
+        appId: item.kind === "app" ? (item.options.appId as string | undefined) : undefined,
       },
       {
         title(t) {
diff --git a/packages/forms-collection/src/new-app/_form.tsx b/packages/forms-collection/src/new-app/_form.tsx
index 05c7e3f6f..2bce21034 100644
--- a/packages/forms-collection/src/new-app/_form.tsx
+++ b/packages/forms-collection/src/new-app/_form.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import type { ChangeEventHandler } from "react";
-import { useEffect, useRef } from "react";
+import { useEffect, useImperativeHandle, useRef } from "react";
 import { Button, Checkbox, Collapse, Group, Stack, Textarea, TextInput } from "@mantine/core";
 import { useDebouncedValue, useDisclosure } from "@mantine/hooks";
 import type { z } from "zod/v4";
@@ -17,6 +17,19 @@ import { findBestIconMatch } from "./icon-matcher";
 
 type FormType = z.infer<typeof appManageSchema>;
 
+const toFormValues = (values: FormType | undefined): FormType => ({
+  name: values?.name ?? "",
+  description: values?.description ?? "",
+  iconUrl: values?.iconUrl ?? "",
+  href: values?.href ?? "",
+  pingUrl: values?.pingUrl ?? "",
+});
+
+export interface AppFormHandle {
+  submit: () => Promise<boolean>;
+  isDirty: () => boolean;
+}
+
 interface AppFormProps {
   showBackToOverview: boolean;
   buttonLabels: {
@@ -24,8 +37,10 @@ interface AppFormProps {
     submitAndCreateAnother?: string;
   };
   initialValues?: FormType;
-  handleSubmit: (values: FormType, redirect: boolean, afterSuccess?: () => void) => void;
+  handleSubmit: (values: FormType, redirect: boolean, afterSuccess?: () => void) => void | Promise<void>;
   isPending: boolean;
+  hideButtons?: boolean;
+  formRef?: React.Ref<AppFormHandle>;
 }
 
 export const AppForm = ({
@@ -34,19 +49,31 @@ export const AppForm = ({
   handleSubmit: originalHandleSubmit,
   initialValues,
   isPending,
+  hideButtons,
+  formRef,
 }: AppFormProps) => {
   const t = useI18n();
 
   const form = useZodForm(appManageSchema, {
-    initialValues: {
-      name: initialValues?.name ?? "",
-      description: initialValues?.description ?? "",
-      iconUrl: initialValues?.iconUrl ?? "",
-      href: initialValues?.href ?? "",
-      pingUrl: initialValues?.pingUrl ?? "",
-    },
+    initialValues: toFormValues(initialValues),
   });
 
+  const initialValuesKey = [
+    initialValues?.name,
+    initialValues?.description,
+    initialValues?.iconUrl,
+    initialValues?.href,
+    initialValues?.pingUrl,
+  ].join("\0");
+
+  useEffect(() => {
+    if (!initialValues || form.isDirty()) {
+      return;
+    }
+
+    form.initialize(toFormValues(initialValues));
+  }, [initialValuesKey, form, initialValues]);
+
   // Debounce the name value with 200ms delay
   const [debouncedName] = useDebouncedValue(form.values.name, 200);
 
@@ -62,6 +89,29 @@ export const AppForm = ({
     originalHandleSubmit(values, redirect, afterSuccess);
   };
 
+  useImperativeHandle(
+    formRef,
+    () => ({
+      submit: () =>
+        new Promise<boolean>((resolve) => {
+          form.onSubmit(
+            async (values) => {
+              try {
+                await Promise.resolve(handleSubmit(values));
+                form.initialize(values);
+                resolve(true);
+              } catch {
+                resolve(false);
+              }
+            },
+            () => resolve(false),
+          )();
+        }),
+      isDirty: () => form.isDirty(),
+    }),
+    [form, handleSubmit],
+  );
+
   const [opened, { open, close }] = useDisclosure((initialValues?.pingUrl?.length ?? 0) > 0);
 
   const handleClickDifferentUrlPing: ChangeEventHandler<HTMLInputElement> = () => {
@@ -92,32 +142,32 @@ export const AppForm = ({
     }
   }, [debouncedName, iconsData]);
 
-  return (
-    <form onSubmit={form.onSubmit(handleSubmit)}>
-      <Stack>
-        <TextInput {...form.getInputProps("name")} withAsterisk label={t("app.field.name.label")} />
-        <IconPicker {...form.getInputProps("iconUrl")} />
-        <Textarea
-          {...form.getInputProps("description")}
-          label={t("app.field.description.label")}
-          autosize
-          minRows={2}
-          resize="vertical"
-        />
-        <TextInput {...form.getInputProps("href")} label={t("app.field.url.label")} />
+  const formFields = (
+    <Stack>
+      <TextInput {...form.getInputProps("name")} withAsterisk label={t("app.field.name.label")} />
+      <IconPicker {...form.getInputProps("iconUrl")} />
+      <Textarea
+        {...form.getInputProps("description")}
+        label={t("app.field.description.label")}
+        autosize
+        minRows={2}
+        resize="vertical"
+      />
+      <TextInput {...form.getInputProps("href")} label={t("app.field.url.label")} />
 
-        <Checkbox
-          checked={opened}
-          onChange={handleClickDifferentUrlPing}
-          label={t("app.field.useDifferentUrlForPing.checkbox.label")}
-          description={t("app.field.useDifferentUrlForPing.checkbox.description")}
-          mt="md"
-        />
+      <Checkbox
+        checked={opened}
+        onChange={handleClickDifferentUrlPing}
+        label={t("app.field.useDifferentUrlForPing.checkbox.label")}
+        description={t("app.field.useDifferentUrlForPing.checkbox.description")}
+        mt="md"
+      />
 
-        <Collapse expanded={opened}>
-          <TextInput {...form.getInputProps("pingUrl")} />
-        </Collapse>
+      <Collapse expanded={opened}>
+        <TextInput {...form.getInputProps("pingUrl")} />
+      </Collapse>
 
+      {!hideButtons && (
         <Group justify="end">
           {showBackToOverview && (
             <Button variant="default" component={Link} href="/manage/apps">
@@ -139,7 +189,13 @@ export const AppForm = ({
             {buttonLabels.submit}
           </Button>
         </Group>
-      </Stack>
-    </form>
+      )}
+    </Stack>
   );
+
+  if (hideButtons) {
+    return formFields;
+  }
+
+  return <form onSubmit={form.onSubmit(handleSubmit)}>{formFields}</form>;
 };
diff --git a/packages/translation/src/lang/en.json b/packages/translation/src/lang/en.json
index 81a04ff76..a8f08d222 100644
--- a/packages/translation/src/lang/en.json
+++ b/packages/translation/src/lang/en.json
@@ -1303,6 +1303,13 @@
     },
     "edit": {
       "title": "Edit item",
+      "tab": {
+        "widget": "Edit widget",
+        "app": "Edit app"
+      },
+      "app": {
+        "propagationNotice": "Changes to this app will be applied everywhere it is used across all dashboards."
+      },
       "advancedOptions": {
         "label": "Advanced options",
         "title": "Advanced item options"
diff --git a/packages/widgets/src/modals/embedded-app-edit-form.tsx b/packages/widgets/src/modals/embedded-app-edit-form.tsx
new file mode 100644
index 000000000..81b336869
--- /dev/null
+++ b/packages/widgets/src/modals/embedded-app-edit-form.tsx
@@ -0,0 +1,95 @@
+"use client";
+
+import { useImperativeHandle, useRef } from "react";
+import { Alert, Button, Center, Loader, Stack, Text } from "@mantine/core";
+import { IconInfoCircle } from "@tabler/icons-react";
+
+import { clientApi } from "@homarr/api/client";
+import type { AppFormHandle } from "@homarr/forms-collection";
+import { AppForm } from "@homarr/forms-collection";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
+import { useI18n } from "@homarr/translation/client";
+
+export interface EmbeddedAppEditFormHandle {
+  submitIfDirty: () => Promise<boolean>;
+}
+
+interface EmbeddedAppEditFormProps {
+  appId: string;
+  handleRef: React.Ref<EmbeddedAppEditFormHandle>;
+}
+
+export const EmbeddedAppEditForm = ({ appId, handleRef }: EmbeddedAppEditFormProps) => {
+  const t = useI18n();
+  const utils = clientApi.useUtils();
+  const appFormRef = useRef<AppFormHandle>(null);
+  const { data: app, isPending: isLoadingApp, isError, refetch } = clientApi.app.byId.useQuery({ id: appId });
+
+  const { mutateAsync, isPending: isMutating } = clientApi.app.update.useMutation({
+    onSuccess: async () => {
+      await utils.app.invalidate();
+      showSuccessNotification({
+        title: t("app.page.edit.notification.success.title"),
+        message: t("app.page.edit.notification.success.message"),
+      });
+    },
+    onError: () => {
+      showErrorNotification({
+        title: t("app.page.edit.notification.error.title"),
+        message: t("app.page.edit.notification.error.message"),
+      });
+    },
+  });
+
+  useImperativeHandle(
+    handleRef,
+    () => ({
+      submitIfDirty: async () => {
+        if (!appFormRef.current?.isDirty()) {
+          return true;
+        }
+
+        return appFormRef.current.submit();
+      },
+    }),
+    [],
+  );
+
+  if (isLoadingApp) {
+    return (
+      <Center py="xl">
+        <Loader />
+      </Center>
+    );
+  }
+
+  if (isError || !app) {
+    return (
+      <Stack align="center" gap="md" py="xl">
+        <Text c="dimmed">{t("app.action.select.notFound")}</Text>
+        <Button variant="light" onClick={() => void refetch()}>
+          {t("common.action.tryAgain")}
+        </Button>
+      </Stack>
+    );
+  }
+
+  return (
+    <Stack>
+      <Alert icon={<IconInfoCircle size={16} />} color="blue" variant="light">
+        {t("item.edit.app.propagationNotice")}
+      </Alert>
+      <AppForm
+        formRef={appFormRef}
+        hideButtons
+        showBackToOverview={false}
+        buttonLabels={{ submit: "" }}
+        initialValues={app}
+        handleSubmit={async (values) => {
+          await mutateAsync({ id: appId, ...values });
+        }}
+        isPending={isMutating}
+      />
+    </Stack>
+  );
+};
diff --git a/packages/widgets/src/modals/widget-edit-modal.tsx b/packages/widgets/src/modals/widget-edit-modal.tsx
index 1722bcaf9..5f837234a 100644
--- a/packages/widgets/src/modals/widget-edit-modal.tsx
+++ b/packages/widgets/src/modals/widget-edit-modal.tsx
@@ -1,11 +1,13 @@
 "use client";
 
-import { useState } from "react";
-import { Button, Group, Stack } from "@mantine/core";
+import { useRef, useState } from "react";
+import type { FormEvent } from "react";
+import { Button, Group, Stack, Tabs } from "@mantine/core";
 import { schemaResolver } from "@mantine/form";
 import { z } from "zod/v4";
 
 import { objectEntries } from "@homarr/common";
+import { useSession } from "@homarr/auth/client";
 import type { WidgetKind } from "@homarr/definitions";
 import { createModal, useModalAction } from "@homarr/modals";
 import type { SettingsContextProps } from "@homarr/settings/creator";
@@ -20,6 +22,8 @@ import type { OptionsBuilderResult } from "../options";
 import type { IntegrationSelectOption } from "../widget-integration-select";
 import { WidgetIntegrationSelect } from "../widget-integration-select";
 import { WidgetAdvancedOptionsModal } from "./widget-advanced-options-modal";
+import type { EmbeddedAppEditFormHandle } from "./embedded-app-edit-form";
+import { EmbeddedAppEditForm } from "./embedded-app-edit-form";
 
 export interface WidgetEditModalState {
   options: Record<string, unknown>;
@@ -34,13 +38,16 @@ interface ModalProps<TSort extends WidgetKind> {
   integrationData: IntegrationSelectOption[];
   integrationSupport: boolean;
   settings: SettingsContextProps;
+  appId?: string;
 }
 
 export const WidgetEditModal = createModal<ModalProps<WidgetKind>>(({ actions, innerProps }) => {
   const t = useI18n();
+  const { data: session } = useSession();
   const [advancedOptions, setAdvancedOptions] = useState<BoardItemAdvancedOptions>(innerProps.value.advancedOptions);
+  const appEditRef = useRef<EmbeddedAppEditFormHandle>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
-  // Translate the error messages
   z.config({
     customError: zodErrorMap(t),
   });
@@ -77,78 +84,128 @@ export const WidgetEditModal = createModal<ModalProps<WidgetKind>>(({ actions, i
   });
   const { openModal } = useModalAction(WidgetAdvancedOptionsModal);
 
-  return (
-    <form
-      onSubmit={form.onSubmit((values) => {
-        innerProps.onSuccessfulEdit({
-          ...values,
-          advancedOptions,
-        });
-        actions.closeModal();
+  const canModifyApps = session?.user.permissions.includes("app-modify-all") ?? false;
+  const appId = innerProps.appId;
+  const showAppTab = innerProps.kind === "app" && canModifyApps && Boolean(appId);
+
+  const handleSubmit = form.onSubmit(async (values) => {
+    setIsSubmitting(true);
+    try {
+      const appSaved = showAppTab ? await (appEditRef.current?.submitIfDirty() ?? true) : true;
+
+      if (!appSaved) {
+        return;
+      }
+
+      innerProps.onSuccessfulEdit({
+        ...values,
+        advancedOptions,
+      });
+      actions.closeModal();
+    } finally {
+      setIsSubmitting(false);
+    }
+  });
+
+  const onFormSubmit = (event: FormEvent<HTMLFormElement>) => {
+    handleSubmit(event);
+  };
+
+  const widgetFormContent = (
+    <Stack>
+      {innerProps.integrationSupport && (
+        <WidgetIntegrationSelect
+          label={t("item.edit.field.integrations.label")}
+          data={innerProps.integrationData}
+          {...form.getInputProps("integrationIds")}
+        />
+      )}
+      {Object.entries(options).map(([key, value]) => {
+        const Input = getInputForType(value.type);
+
+        if (
+          !Input ||
+          value.shouldHide?.(
+            form.values.options as never,
+            innerProps.integrationData
+              .filter(({ id }) => form.values.integrationIds.includes(id))
+              .map(({ kind }) => kind),
+          )
+        ) {
+          return null;
+        }
+
+        return (
+          <Input
+            key={key}
+            kind={innerProps.kind}
+            property={key}
+            options={value as never}
+            initialOptions={innerProps.value.options}
+          />
+        );
       })}
-    >
-      <FormProvider form={form}>
-        <Stack>
-          {innerProps.integrationSupport && (
-            <WidgetIntegrationSelect
-              label={t("item.edit.field.integrations.label")}
-              data={innerProps.integrationData}
-              {...form.getInputProps("integrationIds")}
-            />
-          )}
-          {Object.entries(options).map(([key, value]) => {
-            const Input = getInputForType(value.type);
-
-            if (
-              // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-              !Input ||
-              // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-              value.shouldHide?.(
-                form.values.options as never,
-                innerProps.integrationData
-                  .filter(({ id }) => form.values.integrationIds.includes(id))
-                  .map(({ kind }) => kind),
-              )
-            ) {
-              return null;
-            }
-
-            return (
-              <Input
-                key={key}
-                kind={innerProps.kind}
-                property={key}
-                options={value as never}
-                initialOptions={innerProps.value.options}
-              />
-            );
-          })}
-          <Group justify="space-between">
-            <Button
-              variant="subtle"
-              onClick={() =>
-                openModal({
-                  advancedOptions,
-                  onSuccess(options) {
-                    setAdvancedOptions(options);
-                    innerProps.onSuccessfulEdit({
-                      ...innerProps.value,
-                      advancedOptions: options,
-                    });
-                  },
-                })
-              }
-            >
-              {t("item.edit.advancedOptions.label")}
+      <Group justify="space-between">
+        <Button
+          variant="subtle"
+          onClick={() =>
+            openModal({
+              advancedOptions,
+              onSuccess(options) {
+                setAdvancedOptions(options);
+                innerProps.onSuccessfulEdit({
+                  ...innerProps.value,
+                  advancedOptions: options,
+                });
+              },
+            })
+          }
+        >
+          {t("item.edit.advancedOptions.label")}
+        </Button>
+        {!showAppTab && (
+          <Group justify="end" w={{ base: "100%", xs: "auto" }}>
+            <Button onClick={actions.closeModal} variant="subtle" color="gray">
+              {t("common.action.cancel")}
             </Button>
-            <Group justify="end" w={{ base: "100%", xs: "auto" }}>
+            <Button type="submit" loading={isSubmitting}>
+              {t("common.action.saveChanges")}
+            </Button>
+          </Group>
+        )}
+      </Group>
+    </Stack>
+  );
+
+  return (
+    <form onSubmit={onFormSubmit}>
+      <FormProvider form={form}>
+        {showAppTab ? (
+          <Stack>
+            <Tabs defaultValue="widget">
+              <Tabs.List grow>
+                <Tabs.Tab value="widget">{t("item.edit.tab.widget")}</Tabs.Tab>
+                <Tabs.Tab value="app">{t("item.edit.tab.app")}</Tabs.Tab>
+              </Tabs.List>
+              <Tabs.Panel value="widget" pt="md">
+                {widgetFormContent}
+              </Tabs.Panel>
+              <Tabs.Panel value="app" pt="md">
+                {appId && <EmbeddedAppEditForm appId={appId} handleRef={appEditRef} />}
+              </Tabs.Panel>
+            </Tabs>
+            <Group justify="end">
               <Button onClick={actions.closeModal} variant="subtle" color="gray">
                 {t("common.action.cancel")}
               </Button>
-              <Button type="submit">{t("common.action.saveChanges")}</Button>
+              <Button type="submit" loading={isSubmitting}>
+                {t("common.action.saveChanges")}
+              </Button>
             </Group>
-          </Group>
-        </Stack>
+          </Stack>
+        ) : (
+          widgetFormContent
+        )}
       </FormProvider>
     </form>
   );