feat(widget): show name in edit modal (#3970)

apps/nextjs/src/app/[locale]/widgets/[kind]/_content.tsx

@@ -10,7 +10,7 @@ import type { IntegrationKind, WidgetKind } from "@homarr/definitions";
 import { useModalAction } from "@homarr/modals";
 import { showSuccessNotification } from "@homarr/notifications";
 import { useSettings } from "@homarr/settings";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useI18n } from "@homarr/translation/client";
 import type { BoardItemAdvancedOptions } from "@homarr/validation/shared";
 import { loadWidgetDynamic, reduceWidgetOptionsWithDefaultValues, widgetImports } from "@homarr/widgets";
 import { WidgetError } from "@homarr/widgets/errors";
@@ -31,7 +31,7 @@ interface WidgetPreviewPageContentProps {
 
 export const WidgetPreviewPageContent = ({ kind, integrationData }: WidgetPreviewPageContentProps) => {
   const settings = useSettings();
-  const t = useScopedI18n("widgetPreview");
+  const t = useI18n();
   const { openModal: openWidgetEditModal } = useModalAction(WidgetEditModal);
   const { openModal: openPreviewDimensionsModal } = useModalAction(PreviewDimensionsModal);
   const currentDefinition = useMemo(() => widgetImports[kind].definition, [kind]);
@@ -55,20 +55,27 @@ export const WidgetPreviewPageContent = ({ kind, integrationData }: WidgetPrevie
   });
 
   const handleOpenEditWidgetModal = useCallback(() => {
-    openWidgetEditModal({
+    openWidgetEditModal(
-      kind,
+      {
-      value: state,
+        kind,
-      onSuccessfulEdit: (value) => {
+        value: state,
-        setState(value);
+        onSuccessfulEdit: (value) => {
+          setState(value);
+        },
+        integrationData: integrationData.filter(
+          (integration) =>
+            "supportedIntegrations" in currentDefinition &&
+            (currentDefinition.supportedIntegrations as string[]).some((kind) => kind === integration.kind),
+        ),
+        integrationSupport: "supportedIntegrations" in currentDefinition,
+        settings,
       },
-      integrationData: integrationData.filter(
+      {
-        (integration) =>
+        title(t) {
-          "supportedIntegrations" in currentDefinition &&
+          return `${t("item.edit.title")} - ${t(`widget.${kind}.name`)}`;
-          (currentDefinition.supportedIntegrations as string[]).some((kind) => kind === integration.kind),
+        },
-      ),
+      },
-      integrationSupport: "supportedIntegrations" in currentDefinition,
+    );
-      settings,
-    });
   }, [currentDefinition, integrationData, kind, openWidgetEditModal, settings, state]);
 
   const Comp = loadWidgetDynamic(kind);
@@ -76,7 +83,7 @@ export const WidgetPreviewPageContent = ({ kind, integrationData }: WidgetPrevie
   const toggleEditMode = useCallback(() => {
     setEditMode((editMode) => !editMode);
     showSuccessNotification({
-      message: editMode ? t("toggle.disabled") : t("toggle.enabled"),
+      message: editMode ? t("widgetPreview.toggle.disabled") : t("widgetPreview.toggle.enabled"),
     });
   }, [editMode, t]);
 

apps/nextjs/src/components/board/items/item-menu.tsx

@@ -49,36 +49,43 @@ export const BoardItemMenu = ({
   if (!isEditMode || isPending) return null;
 
   const openEditModal = () => {
-    openModal({
+    openModal(
-      kind: item.kind,
+      {
-      value: {
+        kind: item.kind,
-        advancedOptions: item.advancedOptions,
+        value: {
-        options: item.options,
+          advancedOptions: item.advancedOptions,
-        integrationIds: item.integrationIds,
+          options: item.options,
+          integrationIds: item.integrationIds,
+        },
+        onSuccessfulEdit: ({ options, integrationIds, advancedOptions }) => {
+          updateItemOptions({
+            itemId: item.id,
+            newOptions: options,
+          });
+          updateItemAdvancedOptions({
+            itemId: item.id,
+            newAdvancedOptions: advancedOptions,
+          });
+          updateItemIntegrations({
+            itemId: item.id,
+            newIntegrations: integrationIds,
+          });
+          refResetErrorBoundaryOnNextRender.current = true;
+        },
+        integrationData: (integrationData ?? []).filter(
+          (integration) =>
+            "supportedIntegrations" in currentDefinition &&
+            (currentDefinition.supportedIntegrations as string[]).some((kind) => kind === integration.kind),
+        ),
+        integrationSupport: "supportedIntegrations" in currentDefinition,
+        settings,
       },
-      onSuccessfulEdit: ({ options, integrationIds, advancedOptions }) => {
+      {
-        updateItemOptions({
+        title(t) {
-          itemId: item.id,
+          return `${t("item.edit.title")} - ${t(`widget.${item.kind}.name`)}`;
-          newOptions: options,
+        },
-        });
-        updateItemAdvancedOptions({
-          itemId: item.id,
-          newAdvancedOptions: advancedOptions,
-        });
-        updateItemIntegrations({
-          itemId: item.id,
-          newIntegrations: integrationIds,
-        });
-        refResetErrorBoundaryOnNextRender.current = true;
       },
-      integrationData: (integrationData ?? []).filter(
+    );
-        (integration) =>
-          "supportedIntegrations" in currentDefinition &&
-          (currentDefinition.supportedIntegrations as string[]).some((kind) => kind === integration.kind),
-      ),
-      integrationSupport: "supportedIntegrations" in currentDefinition,
-      settings,
-    });
   };
 
   const openRemoveModal = () => {