diff --git a/packages/widgets/src/indexer-manager/component.tsx b/packages/widgets/src/indexer-manager/component.tsx index 12aed440a..e406ffa8a 100644 --- a/packages/widgets/src/indexer-manager/component.tsx +++ b/packages/widgets/src/indexer-manager/component.tsx @@ -1,6 +1,6 @@ "use client"; -import { Anchor, Button, Card, Container, Flex, Group, ScrollArea, Text } from "@mantine/core"; +import { ActionIcon, Anchor, Button, Card, Flex, Group, ScrollArea, Stack, Text } from "@mantine/core"; import { IconCircleCheck, IconCircleX, IconReportSearch, IconTestPipe } from "@tabler/icons-react"; import combineClasses from "clsx"; @@ -11,7 +11,12 @@ import { useI18n } from "@homarr/translation/client"; import type { WidgetComponentProps } from "../definition"; import classes from "./component.module.css"; -export default function IndexerManagerWidget({ options, integrationIds }: WidgetComponentProps<"indexerManager">) { +export default function IndexerManagerWidget({ + options, + integrationIds, + width, + height, +}: WidgetComponentProps<"indexerManager">) { const t = useI18n(); const [indexersData] = clientApi.widget.indexerManager.getIndexersStatus.useSuspenseQuery( { integrationIds }, @@ -40,37 +45,60 @@ export default function IndexerManagerWidget({ options, integrationIds }: Widget }, ); + const hasSmallWidth = width < 256; + const hasSmallHeight = height < 256; + return ( - - - + + + {t("widget.indexerManager.title")} - + {hasSmallHeight && ( + { + testAll({ integrationIds }); + }} + > + + + )} + - + {indexersData.map(({ integrationId, indexers }) => ( - + {indexers.map((indexer) => ( - + {indexer.name} @@ -78,35 +106,38 @@ export default function IndexerManagerWidget({ options, integrationIds }: Widget ) : ( )} ))} - + ))} - + {!hasSmallHeight && ( + + )} ); }