feat: modernize dashboard widgets

packages/widgets/src/smart-home/entity-state/component.tsx

@@ -1,11 +1,13 @@
 "use client";
 
 import { useCallback } from "react";
-import { Center, Stack, Text, UnstyledButton } from "@mantine/core";
+import { Badge, Center, Group, Stack, Text, Tooltip, UnstyledButton } from "@mantine/core";
 import { IconBinaryTree } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
+import { useIntegrationsWithInteractAccess } from "@homarr/auth/client";
 import { useRegisterSpotlightContextActions } from "@homarr/spotlight";
+import { useI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../../definition";
 
@@ -14,7 +16,10 @@ export default function SmartHomeEntityStateWidget({
   integrationIds,
   isEditMode,
   width,
+  height,
+  displayMode,
 }: WidgetComponentProps<"smartHome-entityState">) {
+  const t = useI18n();
   // It will always have at least one integration as otherwise the NoIntegrationSelectedError would be thrown in item-content.tsx
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const integrationId = integrationIds[0]!;
@@ -23,21 +28,25 @@ export default function SmartHomeEntityStateWidget({
     entityId: options.entityId,
     integrationId,
   };
-  const { data: entityState } = clientApi.widget.smartHome.entityState.useQuery(input);
+  const { data: entity } = clientApi.widget.smartHome.entityDetails.useQuery(input);
+  const canInteract = useIntegrationsWithInteractAccess().some(({ id }) => id === integrationId);
 
   const utils = clientApi.useUtils();
-  const { mutate } = clientApi.widget.smartHome.switchEntity.useMutation({
-    onSettled: () => void utils.widget.smartHome.entityState.invalidate(input),
+  const { mutate, isPending, error } = clientApi.widget.smartHome.switchEntity.useMutation({
+    onSettled: () => void utils.widget.smartHome.entityDetails.invalidate(input),
   });
 
-  const attribute = options.entityUnit.length > 0 ? " " + options.entityUnit : "";
+  const apiUnit = entity?.attributes.unit_of_measurement;
+  const unit = options.entityUnit || (typeof apiUnit === "string" ? apiUnit : "");
+  const attribute = unit.length > 0 ? ` ${unit}` : "";
+  const isActionable = options.clickable && canInteract && !isPending;
 
   const handleClick = useCallback(() => {
     if (isEditMode) {
       return;
     }
 
-    if (!options.clickable) {
+    if (!isActionable) {
       return;
     }
 
@@ -45,7 +54,7 @@ export default function SmartHomeEntityStateWidget({
       entityId: options.entityId,
       integrationId,
     });
-  }, [integrationId, isEditMode, mutate, options.clickable, options.entityId]);
+  }, [integrationId, isActionable, isEditMode, mutate, options.entityId]);
 
   useRegisterSpotlightContextActions(
     `smartHome-entityState-${options.entityId}`,
@@ -62,35 +71,70 @@ export default function SmartHomeEntityStateWidget({
             },
           };
         },
-        disabled: !options.clickable,
+        disabled: !isActionable,
       },
     ],
-    [handleClick, options.clickable, options.displayName, options.entityId],
+    [handleClick, isActionable, options.displayName, options.entityId],
   );
-  const isTiny = width < 128;
+  const isTiny = width < 128 || height < 96;
+  const advancedAttributes = [
+    { key: "unit" as const, value: entity?.attributes.unit_of_measurement },
+    { key: "deviceClass" as const, value: entity?.attributes.device_class },
+    { key: "icon" as const, value: entity?.attributes.icon },
+  ].filter(({ value }) => typeof value === "string" && value.length > 0);
 
   return (
     <UnstyledButton
-      mod={{ "entity-state": entityState, "entity-id": options.entityId }}
+      mod={{ "entity-state": entity?.state, "entity-id": options.entityId }}
       onClick={handleClick}
+      disabled={!isActionable}
+      aria-description={error?.message}
       w="100%"
       h="100%"
       styles={{
         root: {
-          cursor: options.clickable && !isEditMode ? "pointer" : "initial",
+          cursor: isActionable && !isEditMode ? "pointer" : "initial",
           pointerEvents: isEditMode ? "none" : undefined,
         },
       }}
     >
       <Center h="100%" w="100%">
-        <Stack align="center" gap="md">
+        <Stack align="center" gap={isTiny ? 4 : "md"} p="xs" maw="100%">
           <Text ta="center" fw="bold" size={isTiny ? "sm" : "lg"}>
-            {options.displayName}
+            {displayMode === "advanced" && typeof entity?.attributes.friendly_name === "string"
+              ? entity.attributes.friendly_name
+              : options.displayName}
           </Text>
           <Text ta="center" size={isTiny ? "xs" : "lg"}>
-            {entityState}
+            {entity?.state ?? "—"}
             {attribute}
           </Text>
+          {displayMode === "advanced" && entity && (
+            <>
+              <Group justify="center" gap={4}>
+                {advancedAttributes.map(({ key, value }) => (
+                  <Badge key={key} size="xs" variant="light" tt="none">
+                    {t(`widget.smartHome-entityState.advanced.attribute.${key}`)}: {String(value)}
+                  </Badge>
+                ))}
+              </Group>
+              <Text size="xs" c="dimmed">
+                {t("widget.smartHome-entityState.advanced.entityId", { id: entity.entity_id })}
+              </Text>
+              <Text size="xs" c="dimmed">
+                {t("widget.smartHome-entityState.advanced.lastUpdated", {
+                  date: new Date(entity.last_updated).toLocaleString(),
+                })}
+              </Text>
+            </>
+          )}
+          {error && (
+            <Tooltip label={error.message} multiline>
+              <Text size="xs" c="red" lineClamp={2}>
+                {t("widget.smartHome-entityState.error.toggleFailed")}
+              </Text>
+            </Tooltip>
+          )}
         </Stack>
       </Center>
     </UnstyledButton>

packages/widgets/src/smart-home/entity-state/index.ts

@@ -1,4 +1,4 @@
-import { IconBinaryTree } from "@tabler/icons-react";
+import { IconBinaryTree, IconServerOff } from "@tabler/icons-react";
 
 import { getIntegrationKindsByCategory } from "@homarr/definitions";
 
@@ -7,7 +7,9 @@ import { optionsBuilder } from "../../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("smartHome-entityState", {
   icon: IconBinaryTree,
+  supportsAdvancedFocus: true,
   queryKey: [["widget", "smartHome"]],
+  maxIntegrations: 1,
   createOptions() {
     return optionsBuilder.from((factory) => ({
       entityId: factory.text({
@@ -21,4 +23,10 @@ export const { definition, componentLoader } = createWidgetDefinition("smartHome
     }));
   },
   supportedIntegrations: getIntegrationKindsByCategory("smartHomeServer"),
+  errors: {
+    INTERNAL_SERVER_ERROR: {
+      icon: IconServerOff,
+      message: (t) => t("widget.smartHome-entityState.error.loadFailed"),
+    },
+  },
 }).withDynamicImport(() => import("./component"));