feat: remove cqmin system (#2407)

* feat: remove cqmin system

* fix: improve weather widget

---------

Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>
This commit is contained in:
Manuel
2025-03-07 17:46:01 +00:00
committed by GitHub
parent 9881577f47
commit 37d471457a
26 changed files with 576 additions and 555 deletions

View File

@@ -0,0 +1,7 @@
[data-mantine-color-scheme="light"] .card {
background-color: var(--mantine-color-gray-1);
}
[data-mantine-color-scheme="dark"] .card {
background-color: var(--mantine-color-dark-7);
}

View File

@@ -2,11 +2,14 @@
import { Anchor, Button, Card, Container, Flex, Group, ScrollArea, Text } from "@mantine/core";
import { IconCircleCheck, IconCircleX, IconReportSearch, IconTestPipe } from "@tabler/icons-react";
import combineClasses from "clsx";
import { clientApi } from "@homarr/api/client";
import { useRequiredBoard } from "@homarr/boards/context";
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">) {
const t = useI18n();
@@ -22,6 +25,7 @@ export default function IndexerManagerWidget({ options, integrationIds }: Widget
const utils = clientApi.useUtils();
const { mutate: testAll, isPending } = clientApi.widget.indexerManager.testAllIndexers.useMutation();
const board = useRequiredBoard();
clientApi.widget.indexerManager.subscribeIndexersStatus.useSubscription(
{ integrationIds },
@@ -36,21 +40,28 @@ export default function IndexerManagerWidget({ options, integrationIds }: Widget
},
);
const iconStyle = { height: "7.5cqmin", width: "7.5cqmin" };
return (
<Flex className="indexer-manager-container" h="100%" direction="column" gap="2.5cqmin" p="2.5cqmin" align="center">
<Text className="indexer-manager-title" size="6.5cqmin">
<IconReportSearch className="indexer-manager-title-icon" size="7cqmin" /> {t("widget.indexerManager.title")}
</Text>
<Card className="indexer-manager-list-container" w="100%" p="2.5cqmin" radius="md" flex={1} withBorder>
<Flex className="indexer-manager-container" h="100%" direction="column" gap="sm" p="sm" align="center">
<Flex className="indexer-manager-title" align={"center"} gap={"xs"}>
<IconReportSearch className="indexer-manager-title-icon" size={30} />
<Text size="md" fw={"bold"}>
{t("widget.indexerManager.title")}
</Text>
</Flex>
<Card
className={combineClasses("indexer-manager-list-container", classes.card)}
w="100%"
p="sm"
radius={board.itemRadius}
flex={1}
>
<ScrollArea className="indexer-manager-list-scroll-area" h="100%">
{indexersData.map(({ integrationId, indexers }) => (
<Container className={`indexer-manager-${integrationId}-list-container`} p={0} key={integrationId}>
{indexers.map((indexer) => (
<Group
className={`indexer-manager-line indexer-manager-${indexer.name}`}
h="7.5cqmin"
h={30}
key={indexer.id}
justify="space-between"
>
@@ -59,7 +70,7 @@ export default function IndexerManagerWidget({ options, integrationIds }: Widget
href={indexer.url}
target={options.openIndexerSiteInNewTab ? "_blank" : "_self"}
>
<Text className="indexer-manager-line-anchor-text" c="dimmed" size="5cqmin">
<Text className="indexer-manager-line-anchor-text" c="dimmed" size="md">
{indexer.name}
</Text>
</Anchor>
@@ -67,13 +78,13 @@ export default function IndexerManagerWidget({ options, integrationIds }: Widget
<IconCircleX
className="indexer-manager-line-status-icon indexer-manager-line-icon-disabled"
color="#d9534f"
style={iconStyle}
size={24}
/>
) : (
<IconCircleCheck
className="indexer-manager-line-status-icon indexer-manager-line-icon-enabled"
color="#2ecc71"
style={iconStyle}
size={24}
/>
)}
</Group>
@@ -85,11 +96,9 @@ export default function IndexerManagerWidget({ options, integrationIds }: Widget
<Button
className="indexer-manager-test-button"
w="100%"
fz="5cqmin"
h="12.5cqmin"
radius="md"
radius={board.itemRadius}
variant="light"
leftSection={<IconTestPipe style={iconStyle} />}
leftSection={<IconTestPipe size={"1rem"} />}
loading={isPending}
loaderProps={{ type: "dots" }}
onClick={() => {