homarr/apps/nextjs/src/components/board/items/item-content.tsx

import type { MutableRefObject } from "react";
import { Suspense, use, useRef } from "react";
import { Badge, Card, Center, Loader } from "@mantine/core";
import { useElementSize } from "@mantine/hooks";
import { QueryErrorResetBoundary, useQueryClient } from "@tanstack/react-query";
import combineClasses from "clsx";
import { NoIntegrationSelectedError } from "@homarr/widgets/errors/classes";
import { ErrorBoundary } from "react-error-boundary";

import { useRequiredBoard } from "@homarr/boards/context";
import { useEditMode } from "@homarr/boards/edit-mode";
import { useSettings } from "@homarr/settings";
import { getWidgetComponent } from "@homarr/widgets/client";
import { WidgetError } from "@homarr/widgets/errors";
import { loadWidgetDefinition, reduceWidgetOptionsWithDefinition } from "@homarr/widgets/manifest";
import type { WidgetDefinition } from "@homarr/widgets/definition";

import type { SectionItem } from "~/app/[locale]/boards/_types";
import classes from "../sections/item.module.css";
import { useItemActions } from "./item-actions";
import itemContentClasses from "./item-content.module.css";
import { BoardItemMenu } from "./item-menu";
import { WidgetContextMenu } from "./widget-context-menu";
import { removePersistedWidgetQueries } from "./widget-query-recovery";

interface BoardItemContentProps {
  item: SectionItem;
}

const getOverflowFromKind = (kind: SectionItem["kind"]) => {
  if (kind === "iframe") return "hidden";
  if (kind === "systemResources") return "visible";
  return undefined;
};

export const BoardItemContent = ({ item }: BoardItemContentProps) => {
  const { ref, width, height } = useElementSize<HTMLDivElement>();
  const board = useRequiredBoard();
  const widgetStateRef = useRef<Record<string, unknown> | null>(null);

  return (
    <>
      <Suspense
        fallback={
          <Center ref={ref} className={classes.itemCard} h="100%">
            <Loader size="sm" />
          </Center>
        }
      >
        <LoadedBoardItemContent
          item={item}
          width={width}
          height={height}
          widgetStateRef={widgetStateRef}
          innerRef={ref}
        />
      </Suspense>
      {item.advancedOptions.title?.trim() && (
        <Badge
          pos="absolute"
          // It's 4 because of the mantine-react-table that has z-index 3
          style={{ zIndex: 4 }}
          top={2}
          left={16}
          size="xs"
          radius={board.itemRadius}
          styles={{
            root: {
              "--border-color": item.advancedOptions.borderColor !== "" ? item.advancedOptions.borderColor : undefined,
              "--opacity": board.opacity / 100,
            },
          }}
          className={itemContentClasses.badge}
          c="var(--mantine-color-text)"
        >
          {item.advancedOptions.title}
        </Badge>
      )}
    </>
  );
};

interface LoadedBoardItemContentProps extends Omit<InnerContentProps, "definition"> {
  innerRef: (element: HTMLDivElement | null) => void;
}

const LoadedBoardItemContent = ({ item, innerRef, ...innerContentProps }: LoadedBoardItemContentProps) => {
  const board = useRequiredBoard();
  const definition = use(loadWidgetDefinition(item.kind));

  return (
    <WidgetContextMenu item={item} definition={definition} widgetStateRef={innerContentProps.widgetStateRef}>
      <Card
        ref={innerRef}
        className={combineClasses(
          classes.itemCard,
          `${item.kind}-wrapper`,
          "grid-stack-item-content",
          item.advancedOptions.customCssClasses.join(" "),
        )}
        radius={board.itemRadius}
        styles={{
          root: {
            "--opacity": board.opacity / 100,
            containerType: "size",
            overflow: getOverflowFromKind(item.kind),
            "--border-color": item.advancedOptions.borderColor !== "" ? item.advancedOptions.borderColor : undefined,
          },
        }}
        p={0}
      >
        <ErrorBoundary
          resetKeys={[item.kind]}
          fallbackRender={({ resetErrorBoundary, error }) => (
            <>
              <BoardItemMenu offset={4} item={item} definition={definition} resetErrorBoundary={resetErrorBoundary} />
              <WidgetError definition={definition} error={error} resetErrorBoundary={resetErrorBoundary} />
            </>
          )}
        >
          <InnerContent item={item} definition={definition} {...innerContentProps} />
        </ErrorBoundary>
      </Card>
    </WidgetContextMenu>
  );
};

interface InnerContentProps {
  item: SectionItem;
  width: number;
  height: number;
  widgetStateRef: MutableRefObject<Record<string, unknown> | null>;
  definition: WidgetDefinition;
}

const InnerContent = ({ item, definition, ...dimensions }: InnerContentProps) => {
  const settings = useSettings();
  const board = useRequiredBoard();
  const [isEditMode] = useEditMode();
  const Comp = getWidgetComponent(item.kind);
  const options = reduceWidgetOptionsWithDefinition(definition, settings, item.options);
  const newItem = { ...item, options };
  const { updateItemOptions } = useItemActions();
  const updateOptions = ({ newOptions }: { newOptions: Record<string, unknown> }) =>
    updateItemOptions({ itemId: item.id, newOptions });
  const widgetSupportsIntegrations =
    "supportedIntegrations" in definition && (definition.supportedIntegrations?.length ?? 0) >= 1;
  const queryClient = useQueryClient();

  return (
    <QueryErrorResetBoundary>
      {({ reset }) => (
        <ErrorBoundary
          onReset={() => {
            removePersistedWidgetQueries(queryClient);
            reset();
          }}
          fallbackRender={({ resetErrorBoundary, error }) => (
            <>
              <BoardItemMenu
                offset={4}
                item={newItem}
                definition={definition}
                resetErrorBoundary={resetErrorBoundary}
              />
              <WidgetError definition={definition} error={error} resetErrorBoundary={resetErrorBoundary} />
            </>
          )}
        >
          <Throw
            error={new NoIntegrationSelectedError()}
            when={
              widgetSupportsIntegrations &&
              item.integrationIds.length === 0 &&
              (!("integrationsRequired" in definition) || definition.integrationsRequired !== false)
            }
          />
          <BoardItemMenu offset={4} item={newItem} definition={definition} />
          <Comp
            options={options as never}
            integrationIds={item.integrationIds}
            isEditMode={isEditMode}
            boardId={board.id}
            itemId={item.id}
            setOptions={(partialNewOptions) =>
              updateOptions({
                newOptions: {
                  ...options,
                  ...partialNewOptions.newOptions,
                },
              })
            }
            {...dimensions}
          />
        </ErrorBoundary>
      )}
    </QueryErrorResetBoundary>
  );
};

const Throw = ({ when, error }: { when: boolean; error: Error }) => {
  if (when) throw error;
  return null;
};