feat: add widget feedback feature

apps/nextjs/package.json

@@ -97,6 +97,7 @@
     "@types/react": "19.0.12",
     "@types/react-dom": "19.0.4",
     "@types/swagger-ui-react": "^5.18.0",
+    "@types/umami": "^2.10.0",
     "concurrently": "^9.1.2",
     "eslint": "^9.23.0",
     "node-loader": "^2.1.0",

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

@@ -1,10 +1,18 @@
 import { useEffect, useMemo, useRef } from "react";
 import { ActionIcon, Menu } from "@mantine/core";
-import { IconCopy, IconDotsVertical, IconLayoutKanban, IconPencil, IconTrash } from "@tabler/icons-react";
+import {
+  IconCopy,
+  IconDotsVertical,
+  IconLayoutKanban,
+  IconMessageCircle2,
+  IconPencil,
+  IconTrash,
+} from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
 import { useEditMode } from "@homarr/boards/edit-mode";
 import { useConfirmModal, useModalAction } from "@homarr/modals";
+import { WidgetFeedbackModal } from "@homarr/modals-collection";
 import { useSettings } from "@homarr/settings";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
 import { widgetImports } from "@homarr/widgets";
@@ -29,6 +37,7 @@ export const BoardItemMenu = ({
   const t = useI18n();
   const { openModal } = useModalAction(WidgetEditModal);
   const { openModal: openMoveModal } = useModalAction(ItemMoveModal);
+  const { openModal: openFeedbackModal } = useModalAction(WidgetFeedbackModal);
   const { openConfirmModal } = useConfirmModal();
   const [isEditMode] = useEditMode();
   const { updateItemOptions, updateItemAdvancedOptions, updateItemIntegrations, duplicateItem, removeItem } =
@@ -91,6 +100,13 @@ export const BoardItemMenu = ({
     });
   };
 
+  const openWidgetFeedbackModal = () => {
+    openFeedbackModal({
+      itemId: item.id,
+      widgetKind: item.kind,
+    });
+  };
+
   return (
     <Menu withinPortal withArrow position="right-start" arrowPosition="center">
       <Menu.Target>
@@ -115,6 +131,9 @@ export const BoardItemMenu = ({
         <Menu.Item leftSection={<IconCopy size={16} />} onClick={() => duplicateItem({ itemId: item.id })}>
           {tItem("action.duplicate")}
         </Menu.Item>
+        <Menu.Item leftSection={<IconMessageCircle2 size={16} />} onClick={openWidgetFeedbackModal}>
+          {tItem("action.feedback")}
+        </Menu.Item>
         <Menu.Divider />
         <Menu.Label c="red.6">{t("common.dangerZone")}</Menu.Label>
         <Menu.Item c="red.6" leftSection={<IconTrash size={16} />} onClick={openRemoveModal}>

packages/definitions/src/docs/homarr-docs-sitemap.ts

@@ -522,6 +522,7 @@ export type HomarrDocumentationPath =
   | "/docs/next/getting-started/installation/source"
   | "/docs/next/getting-started/installation/synology"
   | "/docs/next/getting-started/installation/unraid"
+  | "/docs/next/integrations/cloud"
   | "/docs/next/integrations/containers"
   | "/docs/next/integrations/dns"
   | "/docs/next/integrations/hardware"

packages/modals-collection/package.json

@@ -45,6 +45,7 @@
     "@homarr/eslint-config": "workspace:^0.2.0",
     "@homarr/prettier-config": "workspace:^0.1.0",
     "@homarr/tsconfig": "workspace:^0.1.0",
+    "@types/umami": "^2.10.0",
     "eslint": "^9.23.0",
     "typescript": "^5.8.2"
   }

packages/modals-collection/src/feedback/index.ts

@@ -0,0 +1 @@
+export * from "./widget-feedback-modal";

packages/modals-collection/src/feedback/umami.d.ts

@@ -0,0 +1,9 @@
+type UmamiEventData = Record<string, string | number | boolean>;
+
+declare global {
+  interface Window {
+    umami?: {
+      track: (eventName: string, eventData?: UmamiEventData) => void;
+    };
+  }
+}

packages/modals-collection/src/feedback/widget-feedback-modal.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import { useState } from "react";
+import { Button, Group, Rating, Stack, Textarea, TextInput } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+
+import { createModal } from "@homarr/modals";
+import { showSuccessNotification } from "@homarr/notifications";
+import { useI18n, useScopedI18n } from "@homarr/translation/client";
+
+interface WidgetFeedbackModalProps {
+  itemId: string;
+  widgetKind: string;
+}
+
+export const WidgetFeedbackModal = createModal<WidgetFeedbackModalProps>(({ actions, innerProps }) => {
+  const tCommon = useI18n();
+  const t = useScopedI18n("feedback");
+  const [usabilityRating, setUsabilityRating] = useState(0);
+  const [featuresRating, setFeaturesRating] = useState(0);
+  const [overallRating, setOverallRating] = useState(0);
+  const [discordUsername, setDiscordUsername] = useState("");
+  const [feedbackText, setFeedbackText] = useState("");
+  const [submitting, handle] = useDisclosure(false);
+
+  const isFormValid = usabilityRating > 0 && featuresRating > 0 && overallRating > 0;
+
+  const handleSubmit = () => {
+    handle.open();
+
+    try {
+      if (typeof window !== "undefined") {
+        void umami.track("widget-feedback", {
+          itemId: innerProps.itemId,
+          widgetKind: innerProps.widgetKind,
+          usabilityRating,
+          featuresRating,
+          overallRating,
+          discordUsername: discordUsername || "anonymous",
+          feedbackText,
+        });
+      }
+
+      showSuccessNotification({
+        title: t("notification.success.title"),
+        message: t("notification.success.message"),
+      });
+
+      actions.closeModal();
+    } catch (error) {
+      console.error("Error sending feedback:", error);
+    } finally {
+      handle.close();
+    }
+  };
+
+  return (
+    <Stack>
+      <Stack gap="xs">
+        <Group>
+          <Stack gap={5} style={{ flex: 1 }}>
+            <label htmlFor="usability-rating">{t("rating.usability.label")}</label>
+            <Rating id="usability-rating" value={usabilityRating} onChange={setUsabilityRating} size="lg" />
+          </Stack>
+        </Group>
+
+        <Group>
+          <Stack gap={5} style={{ flex: 1 }}>
+            <label htmlFor="features-rating">{t("rating.features.label")}</label>
+            <Rating id="features-rating" value={featuresRating} onChange={setFeaturesRating} size="lg" />
+          </Stack>
+        </Group>
+
+        <Group>
+          <Stack gap={5} style={{ flex: 1 }}>
+            <label htmlFor="overall-rating">{t("rating.overall.label")}</label>
+            <Rating id="overall-rating" value={overallRating} onChange={setOverallRating} size="lg" />
+          </Stack>
+        </Group>
+      </Stack>
+
+      <TextInput
+        label={t("discord.label")}
+        placeholder={t("discord.placeholder")}
+        description={t("discord.description")}
+        value={discordUsername}
+        onChange={(event) => setDiscordUsername(event.currentTarget.value)}
+      />
+
+      <Textarea
+        label={t("comments.label")}
+        placeholder={t("comments.placeholder")}
+        minRows={4}
+        value={feedbackText}
+        onChange={(event) => setFeedbackText(event.currentTarget.value)}
+      />
+
+      <Group justify="flex-end">
+        <Button variant="default" onClick={() => actions.closeModal()}>
+          {tCommon("common.action.cancel")}
+        </Button>
+        <Button loading={submitting} onClick={handleSubmit} disabled={!isFormValid}>
+          {t("button.submit")}
+        </Button>
+      </Group>
+    </Stack>
+  );
+}).withOptions({
+  defaultTitle: (t) => t("feedback.modal.title"),
+});

packages/modals-collection/src/index.ts

@@ -1,6 +1,7 @@
+export * from "./apps";
 export * from "./boards";
-export * from "./invites";
+export * from "./docker";
+export * from "./feedback";
 export * from "./groups";
+export * from "./invites";
 export * from "./search-engines";
-export * from "./docker";
-export * from "./apps";

packages/translation/src/lang/en.json

@@ -615,6 +615,40 @@
       }
     }
   },
+  "feedback": {
+    "modal": {
+      "title": "Give feedback on this widget"
+    },
+    "rating": {
+      "usability": {
+        "label": "How would you rate the usability of this widget?"
+      },
+      "features": {
+        "label": "How would you rate the features of this widget?"
+      },
+      "overall": {
+        "label": "Overall satisfaction with this widget"
+      }
+    },
+    "discord": {
+      "label": "Discord Username (optional)",
+      "placeholder": "username#1234 or username",
+      "description": "Leave your Discord username if you'd like us to contact you about your feedback. You must be on the Homarr server."
+    },
+    "comments": {
+      "label": "Wishlist or comments",
+      "placeholder": "Share your thoughts, what you like or what you don't like..."
+    },
+    "button": {
+      "submit": "Submit Feedback"
+    },
+    "notification": {
+      "success": {
+        "title": "Feedback Sent",
+        "message": "Thank you for your feedback! It helps us improve Homarr."
+      }
+    }
+  },
   "integration": {
     "page": {
       "list": {
@@ -1036,7 +1070,8 @@
       "edit": "Edit item",
       "moveResize": "Move / resize item",
       "duplicate": "Duplicate item",
-      "remove": "Remove item"
+      "remove": "Remove item",
+      "feedback": "Give feedback"
     },
     "menu": {
       "label": {