Pandore/homarr
Public Access
1
0 Fork 0
Code Actions Activity

Merge branch 'release/v2' into feat/widget-integration-dx

Browse Source
This commit is contained in:
Thomas authored and GitHub committed 2026-08-28 14:08:34 +02:00
2 parents bf0eed7607 f455e71be5
commit b53042f055
29 files changed
+468 -322
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/nextjs/src/components/board/items/item-content.module.css
-14
View File
@@ -1,17 +1,3 @@
.refreshIndicator {
position: absolute;
top: 0.25rem;
right: 0.25rem;
z-index: 3;
display: grid;
place-items: center;
width: 1.25rem;
height: 1.25rem;
border-radius: 999px;
background: color-mix(in srgb, var(--mantine-color-body) 78%, transparent);
pointer-events: none;
}
.settingsButton {
position: absolute;
top: -34px;
apps/nextjs/src/components/board/items/item-content.tsx
+2 -26
View File
@@ -4,7 +4,7 @@ import { createPortal } from "react-dom";
import dynamic from "next/dynamic";
import { Box, Button, Center, Loader, Portal } from "@mantine/core";
import { useElementSize, useIsomorphicEffect } from "@mantine/hooks";
import { QueryErrorResetBoundary, useIsFetching, useQueryClient } from "@tanstack/react-query";
import { QueryErrorResetBoundary, useQueryClient } from "@tanstack/react-query";
import combineClasses from "clsx";
import { NoIntegrationSelectedError } from "@homarr/widgets/errors/classes";
import type { FallbackProps } from "react-error-boundary";
@@ -19,7 +19,6 @@ import { WidgetError } from "@homarr/widgets/errors";
import {
createWidgetRuntimeState,
getWidgetQueryKeys,
getWidgetRuntimeQueries,
supportsAdvancedFocus as definitionSupportsAdvancedFocus,
} from "@homarr/widgets/definition";
import type { WidgetComponentProps, WidgetDefinition, WidgetRuntimeRef } from "@homarr/widgets/definition";
@@ -40,7 +39,6 @@ import { useItemActions } from "./item-actions";
import itemContentClasses from "./item-content.module.css";
import { WidgetContextMenu } from "./widget-context-menu";
import { removeWidgetDataQueries } from "./widget-query-recovery";
import { matchesWidgetItemQuery } from "./widget-query-scope";
const BoardItemMenu = dynamic(() => import("./item-menu").then((module) => module.BoardItemMenu), {
ssr: false,
@@ -158,24 +156,6 @@ const LoadedBoardItemContent = ({
() => ({ ...item, options: reduceWidgetOptionsWithDefinition(definition, settings, item.options) }),
[definition, item, settings],
);
const widgetQueryKeys = useMemo(() => getWidgetQueryKeys(definition, item.kind), [definition, item.kind]);
const isWidgetRefreshing =
useIsFetching({
predicate: (query) =>
query.state.data !== undefined &&
matchesWidgetItemQuery(
query.queryKey,
widgetQueryKeys,
{
itemId: item.id,
boardId: board.id,
integrationIds: item.integrationIds,
options: menuItem.options,
runtimeQueries: getWidgetRuntimeQueries(widgetRuntimeRef),
},
definition.queryMatcher,
),
}) > 0;
const [manualSurface, setManualSurface] = useState<HTMLDivElement | null>(null);
const [surfacePortalTarget, setSurfacePortalTarget] = useState<HTMLDivElement | null>(null);
const { active, viewportSize, open, close, dismiss, hover, leave } = useAdvancedFocus();
@@ -343,11 +323,6 @@ const LoadedBoardItemContent = ({
/>
</ErrorBoundary>
</Box>
{isWidgetRefreshing && (
<Box className={itemContentClasses.refreshIndicator} data-widget-refreshing aria-hidden>
<Loader size="xs" />
</Box>
)}
</WidgetCardShell>
);
@@ -361,6 +336,7 @@ const LoadedBoardItemContent = ({
widgetStateRef={widgetStateRef}
widgetRuntimeRef={widgetRuntimeRef}
sourceRef={sourceRef}
disabled={isAdvanced}
>
<Box
ref={sourceRef}
apps/nextjs/src/components/board/items/widget-context-menu.tsx
+5 -1
View File
@@ -44,6 +44,7 @@ interface WidgetContextMenuProps {
widgetStateRef: MutableRefObject<Record<string, unknown> | null>;
widgetRuntimeRef: WidgetRuntimeRef;
sourceRef: RefObject<HTMLElement | null>;
disabled?: boolean;
children: ReactNode;
}
@@ -53,6 +54,7 @@ export const WidgetContextMenu = ({
previewDimensions,
widgetRuntimeRef,
sourceRef,
disabled = false,
children,
}: WidgetContextMenuProps) => {
const { data: session } = useSession();
@@ -162,6 +164,7 @@ export const WidgetContextMenu = ({
}) ?? [];
const openEditModal = useCallback(() => {
setMenuOpened(false);
openModal(
{
kind: item.kind,
@@ -230,6 +233,7 @@ export const WidgetContextMenu = ({
const handleOpenAdvancedFocus = useCallback(() => {
if (!sourceRef.current) return;
setMenuOpened(false);
openAdvancedFocus(item.id, sourceRef.current, {
restoreFocusTarget:
sourceRef.current.querySelector<HTMLElement>("[data-advanced-focus-trigger]") ?? sourceRef.current,
@@ -256,7 +260,7 @@ export const WidgetContextMenu = ({
opened={menuOpened}
onChange={setMenuOpened}
>
<Menu.ContextMenu>{children}</Menu.ContextMenu>
<Menu.ContextMenu disabled={disabled}>{children}</Menu.ContextMenu>
<WidgetContextMenuDropdown opened={menuOpened} onClose={handleCloseMenu} title={getWidgetName(item.kind, t)}>
{canOpenAdvancedFocus && (
<>
apps/nextjs/src/components/board/layout/scaled-board-canvas.module.css
+9
View File
@@ -45,4 +45,13 @@
--mantine-h4-font-size: calc(1.125rem * var(--board-canvas-ui-scale, 1));
--mantine-h5-font-size: calc(1rem * var(--board-canvas-ui-scale, 1));
--mantine-h6-font-size: calc(0.875rem * var(--board-canvas-ui-scale, 1));
/* Without these, border-radius tokens (e.g. the board's "Item radius" setting) stay at their
* flat rem value while the canvas zoom shrinks the rendered card, so the chosen radius becomes
* imperceptibly small on busy/zoomed-out boards - same class of bug as the spacing/font tokens
* above, just never ported over to radius. */
--mantine-radius-xs: calc(0.25rem * var(--board-canvas-ui-scale, 1));
--mantine-radius-sm: calc(0.25rem * var(--board-canvas-ui-scale, 1));
--mantine-radius-md: calc(0.5rem * var(--board-canvas-ui-scale, 1));
--mantine-radius-lg: calc(0.75rem * var(--board-canvas-ui-scale, 1));
--mantine-radius-xl: calc(1rem * var(--board-canvas-ui-scale, 1));
}
apps/nextjs/src/components/board/sections/grid/section-grid.module.css
+24 -11
View File
@@ -3,6 +3,22 @@
overflow: visible;
}
/* --board-grid-drag-height inherits down the DOM tree like any custom property. A capped
section's own GridPreviewLayer effect correctly avoids setting it on itself (see
grid-preview-layer.tsx), but that does nothing to stop it inheriting the value an
*uncapped* ancestor section (e.g. the board's root section) legitimately sets on itself
while growing during a drag happening anywhere else on the board - any container (not just
a scrollable one - a non-scrollable, e.g. collapsible, container is just as capped) sits
inside that section's DOM tree, so the stray value cascades straight through and silently
defeats the `var(--board-grid-drag-height, ...px)` fallback in section-grid.tsx (including
its collapsibleHeaderInset adjustment), which only kicks in when the property is entirely
unset, not merely inherited. Reset it here so every container can never inherit a stray
value from anywhere above it, no matter what any ancestor's own drag state is doing.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascading_variables#custom_properties_and_inheritance */
.viewport[data-section-kind="container"] {
--board-grid-drag-height: initial;
}
/* Chained with .viewport (rather than a standalone .scrollableViewport rule) so this always
wins on specificity, not source order. GridEditor loads as a separate async chunk in edit
mode, and a board mutation can trigger its stylesheet to re-register - at equal specificity,
@@ -11,17 +27,14 @@
.viewport.scrollableViewport {
overflow-x: hidden;
overflow-y: auto;
/* --board-grid-drag-height inherits down the DOM tree like any custom property. A capped
section's own GridPreviewLayer effect correctly avoids setting it on itself (see
grid-preview-layer.tsx), but that does nothing to stop it inheriting the value an
*uncapped* ancestor section (e.g. the board's root section) legitimately sets on itself
while growing during a drag happening anywhere else on the board - a nested scrollable
container sits inside that section's DOM tree, so the stray value cascades straight
through and silently defeats the `var(--board-grid-drag-height, ...px)` fallback in
section-grid.tsx, which only kicks in when the property is entirely unset, not merely
inherited. Reset it here so this element can never inherit a stray value from anywhere
above it, no matter what any ancestor's own drag state is doing.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascading_variables#custom_properties_and_inheritance */
/* The grid content inside has a fixed pixel width matching this viewport's full
outer width (needed for the drag/resize math), so there's no room to reserve
for a scrollbar without it eating into - or overlapping - the content on
whichever side it renders. Hiding the native scrollbar track entirely (wheel/
touch/drag scrolling still works) avoids that instead of trying to reserve
space for it. */
scrollbar-width: none;
-ms-overflow-style: none;
--board-grid-drag-height: initial;
}
apps/nextjs/src/components/board/sections/grid/section-grid.tsx
+22 -1
View File
@@ -148,8 +148,25 @@ export const SectionGrid = ({
// card and visually spills past its right/bottom edges. 10 must match that CSS rule's inset.
const effectiveCanvasScale = Number.isFinite(canvasScale) && canvasScale > 0 ? canvasScale : 1;
const outerCardInset = section.kind === "container" ? (2 * 10) / effectiveCanvasScale : 0;
// A collapsible container's toggle bar (see the `containerToggle` Button in
// container-section.tsx) is an absolutely positioned overlay sitting on top of this grid.
// Its height comes from a Mantine size prop, which - like spacing/font-size - is compensated
// by --mantine-scale to render at a constant physical size regardless of board zoom (see
// scaled-board-canvas.module.css). That makes it behave like the outerCardInset gap above,
// not like the grid's own un-compensated logical-pixel math, so it needs the same
// effectiveCanvasScale conversion - a plain, unconverted subtraction would under-reserve on
// a zoomed-out board and leave the header overlapping the content. Without reserving it at
// all, the header bar covers the first row of the container's content instead of sitting
// above it. Only the vertical axis is affected - the toggle spans the full width already.
const collapsibleHeaderInset =
section.kind === "container" && section.options.collapsible
? CONTAINER_HEADER_HEIGHT / effectiveCanvasScale
: 0;
const logicalWidth = getLogicalGridSize(columnCount) - outerCardInset;
const viewportHeight = getLogicalGridSize(viewportRowCount) - outerCardInset;
const viewportHeight = Math.max(
1,
getLogicalGridSize(viewportRowCount) - outerCardInset - collapsibleHeaderInset,
);
// Items are positioned in a coordinate space sized to the *un-inset* column/row count
// (fullGridWidth/Height below - see getLogicalItemStyle), but logicalWidth/Height above are
// deliberately smaller by outerCardInset to match the container's actual visible card size.
@@ -283,6 +300,7 @@ export const SectionGrid = ({
{
width: logicalWidth,
height: `var(--board-grid-drag-height, ${viewportHeight}px)`,
marginTop: collapsibleHeaderInset || undefined,
"--board-item-radius": `var(--mantine-radius-${board.itemRadius})`,
} as CSSProperties
}
@@ -317,6 +335,9 @@ export const SectionGrid = ({
);
};
// Matches the collapsible container toggle's h={24} in container-section.tsx.
const CONTAINER_HEADER_HEIGHT = 24;
const INTERACTIVE_GRID_SELECTOR =
'a,button,input,textarea,select,option,[contenteditable="true"],[role="button"],[data-grid-no-drag]';
const EDIT_ACTIVATION_KEYS = new Set(["Enter", " ", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"]);
apps/nextjs/src/components/layout/header/configurable-header.module.css
+18 -28
View File
@@ -2,7 +2,7 @@
overflow: hidden;
}
.header[data-desktop-visible="false"] {
.header[data-visible="false"] {
display: none;
}
@@ -73,39 +73,38 @@
flex: 0 0 auto;
}
.userMenu {
display: flex;
padding-inline: rem(6px);
}
.mobileContent {
display: none;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
justify-content: space-between;
gap: var(--mantine-spacing-xs);
width: 100%;
height: 100%;
padding-inline: var(--mantine-spacing-xs);
}
.mobileIdentity,
.mobileActions {
.mobileZone {
min-width: 0;
overflow-x: auto;
scrollbar-width: none;
}
.mobileIdentity {
flex: 1 1 auto;
overflow: hidden;
.mobileZone::-webkit-scrollbar {
display: none;
}
.mobileIdentity > :last-child {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
.mobileZone[data-zone="left"] {
justify-content: flex-start;
}
.mobileIdentity h2 {
overflow: hidden;
text-overflow: ellipsis;
}
.mobileActions {
flex: 0 0 auto;
.mobileZone[data-zone="right"] {
justify-content: flex-end;
max-width: 72vw;
}
.floatingControls {
@@ -155,21 +154,12 @@
}
@media (max-width: $mantine-breakpoint-sm) {
.header[data-desktop-visible="false"] {
display: block;
}
.desktopContent {
display: none;
}
.mobileContent {
display: flex;
}
.floatingControls,
.floatingControlsCorner {
display: none;
display: grid;
}
}
apps/nextjs/src/components/layout/header/configurable-header.tsx
+38 -41
View File
@@ -3,15 +3,7 @@
import type { ReactNode } from "react";
import { useEffect, useMemo, useRef, useState } from "react";
import { AppShellHeader, Avatar, Group, Indicator, Loader, Tooltip, useMantineColorScheme } from "@mantine/core";
import {
IconBrandDocker,
IconHome,
IconLayoutDashboard,
IconReplace,
IconRobot,
IconSettings,
IconSunMoon,
} from "@tabler/icons-react";
import { IconBrandDocker, IconHome, IconReplace, IconRobot, IconSettings, IconSunMoon } from "@tabler/icons-react";
import type { RouterOutputs } from "@homarr/api";
import { clientApi } from "@homarr/api/client";
@@ -81,7 +73,10 @@ export const ConfigurableHeader = ({
return (
<BoardSwitcher>
{(boardSwitcher) => {
const renderItems = (items: HeaderItem[]) =>
const renderItems = (
items: HeaderItem[],
display: { search: "input" | "icon"; logo: "logo" | "logoAndText" },
) =>
items.map((item) => (
<HeaderItem
key={getHeaderItemKey(item)}
@@ -95,8 +90,8 @@ export const ConfigurableHeader = ({
isAdmin={isAdmin}
isDockerEnabled={isDockerEnabled}
board={item.type === "board" ? boardsById.get(item.boardId) : undefined}
searchDisplay={headerPreferences.searchDisplay}
logoDisplay={headerPreferences.logoDisplay}
searchDisplay={display.search}
logoDisplay={display.logo}
boardSwitcher={boardSwitcher}
assistant={assistant}
openDockerModal={openDockerModal}
@@ -106,13 +101,19 @@ export const ConfigurableHeader = ({
/>
));
const desktopDisplay = {
search: headerPreferences.searchDisplay,
logo: headerPreferences.logoDisplay,
};
const mobileDisplay = { search: "icon", logo: "logo" } as const;
return (
<>
<AppShellHeader
maw="100vw"
zIndex="var(--homarr-z-index-board-header)"
className={classes.header}
data-desktop-visible={headerPreferences.visible}
data-visible={headerPreferences.visible}
data-advanced-focus-background
data-app-shell-header
>
@@ -120,37 +121,26 @@ export const ConfigurableHeader = ({
<div className={classes.content}>
<div className={classes.zone} data-zone="left">
{hasNavigation ? <ClientBurger /> : null}
{renderItems(headerPreferences.zones.left)}
{renderItems(headerPreferences.zones.left, desktopDisplay)}
</div>
<div className={classes.zone} data-zone="center">
{renderItems(headerPreferences.zones.center)}
{renderItems(headerPreferences.zones.center, desktopDisplay)}
</div>
<div className={classes.zone} data-zone="right">
{renderItems(headerPreferences.zones.right)}
{renderItems(headerPreferences.zones.right, desktopDisplay)}
{actions ? <Group className={classes.contextActions}>{actions}</Group> : null}
</div>
</div>
</div>
<div className={classes.mobileContent}>
<Group className={classes.mobileIdentity} gap="xs" wrap="nowrap">
<Group className={classes.mobileZone} data-zone="left" gap="xs" wrap="nowrap">
{hasNavigation ? <ClientBurger /> : null}
<HeaderLogo display="logo" logo={logo} logoWithTitle={logoWithTitle} label={t("items.logo")} />
{renderItems(headerPreferences.zones.left, mobileDisplay)}
</Group>
<Group className={classes.mobileActions} gap="xs" wrap="nowrap">
{actions}
{boardEditAction}
{boardSettingsAction}
<TourTarget id="board-search">
<MobileSearchButton alwaysVisible />
</TourTarget>
<TourTarget id="board-user-menu">
<UserButtonClient
avatar={avatar}
isAdmin={isAdmin}
isDockerEnabled={isDockerEnabled}
boardSwitcher={boardSwitcher}
/>
</TourTarget>
<Group className={classes.mobileZone} data-zone="right" gap="xs" wrap="nowrap">
{renderItems(headerPreferences.zones.center, mobileDisplay)}
{renderItems(headerPreferences.zones.right, mobileDisplay)}
{actions ? <Group className={classes.contextActions}>{actions}</Group> : null}
</Group>
</div>
</AppShellHeader>
@@ -298,7 +288,9 @@ const HeaderItem = ({
return (
<Tooltip label={boardUnavailableLabel}>
<HeaderButton aria-label={boardUnavailableLabel} disabled>
<IconLayoutDashboard size={20} stroke={1.5} />
<Avatar size={22} radius="sm">
?
</Avatar>
</HeaderButton>
</Tooltip>
);
@@ -416,14 +408,19 @@ const HeaderItem = ({
return (
<TourTarget id="board-user-menu">
<UserButtonClient
avatar={avatar}
isAdmin={isAdmin}
isDockerEnabled={isDockerEnabled}
boardSwitcher={boardSwitcher}
/>
<div className={classes.userMenu}>
<UserButtonClient
avatar={avatar}
isAdmin={isAdmin}
isDockerEnabled={isDockerEnabled}
boardSwitcher={boardSwitcher}
/>
</div>
</TourTarget>
);
};
const getBoardInitial = (name: string) => Array.from(name.trim())[0]?.toLocaleUpperCase() ?? "?";
const getBoardInitial = (name: string) => {
const firstCharacter = Array.from(name.trim())[0] ?? "?";
return Array.from(firstCharacter.toUpperCase())[0] ?? "?";
};
apps/nextjs/src/components/layout/shell.tsx
+1 -1
View File
@@ -22,7 +22,7 @@ export const ClientShell = ({
const collapsed = useAtomValue(navigationCollapsedAtom);
const backgroundProps = useOptionalBackgroundProps();
const { headerPreferences } = useSettings();
const headerHeight = headerPreferences.visible ? appShellHeaderHeight : { base: appShellHeaderHeight, sm: 0 };
const headerHeight = headerPreferences.visible ? appShellHeaderHeight : 0;
return (
<AppShell
apps/nextjs/src/components/user-avatar-menu.tsx
+14
View File
@@ -6,6 +6,7 @@ import { Badge, Indicator, Kbd, Loader, Menu, Text } from "@mantine/core";
import {
IconBrandDocker,
IconHome,
IconLayoutDashboard,
IconLogin,
IconLogout,
IconReplace,
@@ -16,6 +17,8 @@ import {
import type { RouterOutputs } from "@homarr/api";
import { signOut, useSession } from "@homarr/auth/client";
import { constructBoardPermissions } from "@homarr/auth/shared";
import { useOptionalBoard } from "@homarr/boards/context";
import { hotkeys, invariantTechnicalLabels } from "@homarr/definitions";
import { useModalAction } from "@homarr/modals";
import { useI18n } from "@homarr/translation/client";
@@ -46,6 +49,8 @@ export const UserAvatarMenu = ({ children, availableUpdates, isDockerEnabled, bo
const t = useI18n("common.userAvatar.menu");
const tBoard = useI18n("board");
const session = useSession();
const board = useOptionalBoard();
const boardPermissions = board && constructBoardPermissions(board, session.data ?? null);
const { logoutUrl } = useAuthContext();
const { openModal: openDockerModal } = useModalAction(DockerQuickAccessModal);
@@ -67,6 +72,15 @@ export const UserAvatarMenu = ({ children, availableUpdates, isDockerEnabled, bo
<Menu.Item component={Link} href="/boards" leftSection={<IconHome size="1rem" />}>
{t("homeBoard")}
</Menu.Item>
{board && boardPermissions?.hasChangeAccess && (
<Menu.Item
component={Link}
href={`/boards/${encodeURIComponent(board.name)}/settings`}
leftSection={<IconLayoutDashboard size="1rem" />}
>
{tBoard("action.settings")}
</Menu.Item>
)}
<Menu.Item
leftSection={<IconReplace size="1rem" />}
rightSection={<Kbd size="xs">{formatHotkeyLabel(boardSwitcher.hotkey, t("modifier"))}</Kbd>}
e2e/lazy-widgets.spec.ts
-2
View File
@@ -163,7 +163,6 @@ describe("lazy widget application graph", () => {
});
await expect.poll(() => refreshRequestStarted, { timeout: 10_000 }).toBe(true);
await expect(cachedDownload).toBeVisible({ timeout: 5_000 });
await expect(downloadsWidget.locator("[data-widget-refreshing]")).toBeVisible();
const refreshedDownloadsResponse = page.waitForResponse(
(response) => response.url().includes("widget.downloads.getJobsAndStatuses") && response.ok(),
@@ -171,7 +170,6 @@ describe("lazy widget application graph", () => {
releaseRefresh();
releaseRefresh = undefined;
await refreshedDownloadsResponse;
await expect(downloadsWidget.locator("[data-widget-refreshing]")).toHaveCount(0);
await page.unroute(downloadsRequestPattern, delayDownloadsRefresh);
expect(pageErrors).toEqual([]);
expect(hydrationErrors).toEqual([]);
packages/forms-collection/src/board-create/board-create-form.tsx
+1 -2
View File
@@ -49,8 +49,7 @@ export const BoardCreateForm = ({ onCancel }: BoardCreateFormProps) => {
message: tBoard("action.create.notification.success.message", { name: values.name }),
});
const name = encodeURIComponent(result.name);
const layoutId = encodeURIComponent(result.layoutId);
router.push(`/boards/${name}?layout=${layoutId}&edit=true&add=true`);
router.push(`/boards/${name}`);
},
onError() {
showErrorNotification({
packages/modals/src/modal-form-footer.tsx
+22 -7
View File
@@ -7,6 +7,7 @@ import { useI18n } from "@homarr/translation/client";
interface ModalFormFooterProps {
onCancel: () => void;
form?: string;
submitLabel?: string;
cancelLabel?: string;
loading?: boolean;
@@ -18,24 +19,38 @@ const ActionButtons = ({
submitLabel,
cancelLabel,
loading,
}: Pick<ModalFormFooterProps, "onCancel" | "submitLabel" | "cancelLabel" | "loading">) => {
const t = useI18n();
form,
}: Pick<ModalFormFooterProps, "onCancel" | "submitLabel" | "cancelLabel" | "loading" | "form">) => {
const t = useI18n("common.action");
return (
<>
<Button onClick={onCancel} variant="subtle" color="gray">
{cancelLabel ?? t("common.action.cancel")}
{cancelLabel ?? t("cancel")}
</Button>
<Button type="submit" loading={loading}>
{submitLabel ?? t("common.action.saveChanges")}
<Button type="submit" form={form} loading={loading}>
{submitLabel ?? t("saveChanges")}
</Button>
</>
);
};
export const ModalFormFooter = ({ onCancel, submitLabel, cancelLabel, loading, leftSection }: ModalFormFooterProps) => {
export const ModalFormFooter = ({
onCancel,
form,
submitLabel,
cancelLabel,
loading,
leftSection,
}: ModalFormFooterProps) => {
const actionButtons = (
<ActionButtons onCancel={onCancel} submitLabel={submitLabel} cancelLabel={cancelLabel} loading={loading} />
<ActionButtons
onCancel={onCancel}
form={form}
submitLabel={submitLabel}
cancelLabel={cancelLabel}
loading={loading}
/>
);
if (leftSection) {
packages/translation/src/lang/en.json
+12 -1
View File
@@ -2430,6 +2430,16 @@
"label": "Animate weather icon",
"description": "Animate the weather icon. Disabled by default and always disabled when reduced motion is requested."
},
"colorWeatherByDayNight": {
"label": "Color weather by day/night",
"description": "Tint the weather icon and temperature with a day color or a night color, based on whether it's currently day or night at the chosen location."
},
"dayWeatherColor": {
"label": "Day color"
},
"nightWeatherColor": {
"label": "Night color"
},
"worldClockCities": {
"label": "World clock cities",
"description": "Add and order up to six cities for advanced view."
@@ -4841,7 +4851,8 @@
"memory": "MEM",
"network": "NET",
"up": "UP",
"down": "DOWN"
"down": "DOWN",
"memoryTooltip": "{used} / {available} ({percent}%)"
}
},
"systemDisks": {
packages/validation/src/header-preferences.ts
+1 -1
View File
@@ -16,7 +16,7 @@ export const headerBuiltinItemIds = [
"user",
] as const;
export const requiredHeaderBuiltinItemIds = ["boardEdit", "boardSettings", "user"] as const;
export const requiredHeaderBuiltinItemIds = ["user"] as const;
export const headerPreferenceItemIds = headerBuiltinItemIds;
export const headerItemIds = headerBuiltinItemIds;
packages/widgets/src/clock/advanced-view.tsx
+3
View File
@@ -132,6 +132,9 @@ const PrimaryClock = ({ now, options, primary }: Pick<ModeProps, "now" | "option
locationName={options.weatherLocation.name}
isFahrenheit={options.isWeatherFormatFahrenheit}
animateIcon={options.animateWeatherIcon}
colorByDayNight={options.colorWeatherByDayNight}
dayColor={options.dayWeatherColor}
nightColor={options.nightWeatherColor}
detailed
/>
</Paper>
packages/widgets/src/clock/component.tsx
+3
View File
@@ -54,6 +54,9 @@ export default function ClockWidget({ options, width, height, displayMode }: Wid
locationName={options.weatherLocation.name}
isFahrenheit={options.isWeatherFormatFahrenheit}
animateIcon={options.animateWeatherIcon}
colorByDayNight={options.colorWeatherByDayNight}
dayColor={options.dayWeatherColor}
nightColor={options.nightWeatherColor}
detailed={false}
/>
</Box>
packages/widgets/src/clock/index.ts
+38
View File
@@ -12,6 +12,23 @@ import {
const timeZoneOptions = getTimeZoneOptions();
// Mantine theme color names, used to let users pick their own day/night weather colors.
const weatherColorOptions: string[] = [
"red",
"pink",
"grape",
"violet",
"indigo",
"blue",
"cyan",
"teal",
"green",
"lime",
"yellow",
"orange",
"gray",
];
export const { definition, componentLoader } = createWidgetDefinition("clock", {
icon: IconClock,
supportsAdvancedFocus: true,
@@ -101,6 +118,18 @@ export const { definition, componentLoader } = createWidgetDefinition("clock", {
defaultValue: false,
withDescription: true,
}),
colorWeatherByDayNight: factory.switch({
defaultValue: false,
withDescription: true,
}),
dayWeatherColor: factory.select({
options: weatherColorOptions,
defaultValue: "orange",
}),
nightWeatherColor: factory.select({
options: weatherColorOptions,
defaultValue: "blue",
}),
worldClockCities: factory.timezoneList({
defaultValue: defaultWorldClockCities.map((city) => ({ ...city })),
maxValues: maximumWorldClockCities,
@@ -131,6 +160,15 @@ export const { definition, componentLoader } = createWidgetDefinition("clock", {
animateWeatherIcon: {
shouldHide: (options) => !options.showWeather,
},
colorWeatherByDayNight: {
shouldHide: (options) => !options.showWeather,
},
dayWeatherColor: {
shouldHide: (options) => !options.showWeather || !options.colorWeatherByDayNight,
},
nightWeatherColor: {
shouldHide: (options) => !options.showWeather || !options.colorWeatherByDayNight,
},
},
);
},
packages/widgets/src/clock/weather-summary.tsx
+14 -4
View File
@@ -14,6 +14,9 @@ interface ClockWeatherSummaryProps {
locationName: string;
isFahrenheit: boolean;
animateIcon: boolean;
colorByDayNight: boolean;
dayColor: string;
nightColor: string;
detailed: boolean;
}
@@ -23,6 +26,9 @@ export const ClockWeatherSummary = ({
locationName,
isFahrenheit,
animateIcon,
colorByDayNight,
dayColor,
nightColor,
detailed,
}: ClockWeatherSummaryProps) => {
const tCommon = useI18n("common");
@@ -46,6 +52,10 @@ export const ClockWeatherSummary = ({
return `${Math.round(preferred)}${unit}`;
};
const weatherColor = colorByDayNight
? `var(--mantine-color-${weather.current.isDay ? dayColor : nightColor}-5)`
: undefined;
return (
<Stack gap={detailed ? 3 : 2} align={detailed ? "flex-start" : "center"}>
{detailed ? (
@@ -54,9 +64,9 @@ export const ClockWeatherSummary = ({
animated={animateIcon}
code={weather.current.weatherCode}
isDay={weather.current.isDay}
style={zoomCompensatedSize(28)}
style={{ ...zoomCompensatedSize(28), ...(weatherColor ? { color: weatherColor } : undefined) }}
/>
<Text size="sm" fw={600}>
<Text size="sm" fw={600} c={weatherColor}>
{Math.round(temperature)}
{unit}
</Text>
@@ -68,9 +78,9 @@ export const ClockWeatherSummary = ({
animated={animateIcon}
code={weather.current.weatherCode}
isDay={weather.current.isDay}
style={zoomCompensatedSize(26)}
style={{ ...zoomCompensatedSize(26), ...(weatherColor ? { color: weatherColor } : undefined) }}
/>
<Text size="xs" c="dimmed">
<Text size="xs" c={weatherColor ?? "dimmed"}>
{Math.round(temperature)}
{unit}
</Text>
packages/widgets/src/modals/widget-edit-modal.module.css
+1
View File
@@ -143,6 +143,7 @@
margin-inline: calc(var(--mantine-spacing-md) * -1);
margin-bottom: calc(var(--mantine-spacing-md) * -1);
padding: var(--mantine-spacing-sm) var(--mantine-spacing-md);
padding-bottom: max(var(--mantine-spacing-sm), env(safe-area-inset-bottom));
border-top: 1px solid var(--mantine-color-default-border);
background: color-mix(in srgb, var(--mantine-color-body) 94%, transparent);
backdrop-filter: blur(10px);
packages/widgets/src/modals/widget-edit-modal.tsx
+2 -11
View File
@@ -36,7 +36,7 @@ import { objectEntries } from "@homarr/common";
import { IntegrationProvider, useSession } from "@homarr/auth/client";
import { useOptionalBoard } from "@homarr/boards/context";
import type { WidgetKind } from "@homarr/definitions";
import { createModal, modalSizeForm } from "@homarr/modals";
import { createModal, ModalFormFooter, modalSizeForm } from "@homarr/modals";
import type { SettingsContextProps } from "@homarr/settings/creator";
import { SpotlightProvider } from "@homarr/spotlight";
import { useI18n } from "@homarr/translation/client";
@@ -674,16 +674,7 @@ export const WidgetEditModal = createModal<WidgetEditModalProps<WidgetKind>>(({
const footer = (
<Box className={classes.footer}>
<Group justify="end" wrap="nowrap">
<Group gap="xs" wrap="nowrap">
<Button onClick={actions.closeModal} variant="subtle" color="gray">
{tCommon("action.cancel")}
</Button>
<Button type="submit" form={widgetFormId} loading={isSubmitting}>
{tCommon("action.saveChanges")}
</Button>
</Group>
</Group>
<ModalFormFooter onCancel={actions.closeModal} form={widgetFormId} loading={isSubmitting} />
</Box>
);
packages/widgets/src/system-resources/chart/combined-network-traffic.tsx
+37 -24
View File
@@ -1,4 +1,4 @@
import { Box, Group, Paper, Stack, Text } from "@mantine/core";
import { Box, Group, Stack, Text } from "@mantine/core";
import { IconNetwork } from "@tabler/icons-react";
import { formatByteRate } from "@homarr/common";
@@ -21,9 +21,43 @@ export const CombinedNetworkTrafficChart = ({
labelDisplayMode: LabelDisplayModeOption;
advanced?: boolean;
}) => {
const chartData = usageOverTime.map((usage, index) => ({ index, up: usage.up, down: usage.down }));
const chartData = usageOverTime.map((usage, index) => ({
index,
up: usage.up,
down: usage.down,
}));
const t = useI18n("widget.systemResources.card");
const tooltipLabel = (index: number) => {
const point = usageOverTime[index];
return (
<Stack gap={2}>
<Group gap={4} wrap="nowrap">
<Box
bg="orange.5"
w={8}
h={8}
style={{ borderRadius: 99, flexShrink: 0 }}
/>
<Text size="xs">
{t("up")}: {formatByteRate(Math.round(point?.up ?? 0))}
</Text>
</Group>
<Group gap={4} wrap="nowrap">
<Box
bg="yellow.5"
w={8}
h={8}
style={{ borderRadius: 99, flexShrink: 0 }}
/>
<Text size="xs">
{t("down")}: {formatByteRate(Math.round(point?.down ?? 0))}
</Text>
</Group>
</Stack>
);
};
return (
<CommonChart
data={chartData}
@@ -38,28 +72,7 @@ export const CombinedNetworkTrafficChart = ({
chartType={hasShadow ? "area" : "line"}
labelDisplayMode={labelDisplayMode}
advanced={advanced}
tooltipProps={{
content: ({ payload }) => {
return (
<Paper px={3} py={2} shadow="md">
<Stack gap={0}>
{payload.map((payloadData) => (
<Group key={payloadData.key} gap={4}>
<Box bg={payloadData.color} w={10} h={10} style={{ borderRadius: 99 }}></Box>
<Text c="dimmed" size="xs">
{payloadData.value === undefined ? (
<>N/A</>
) : (
formatByteRate(Math.round(Number(payloadData.value)))
)}
</Text>
</Group>
))}
</Stack>
</Paper>
);
},
}}
tooltipLabel={tooltipLabel}
/>
);
};
packages/widgets/src/system-resources/chart/common-chart.tsx
+160 -84
View File
@@ -1,10 +1,24 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import type { CSSProperties, ReactNode } from "react";
import type {
CSSProperties,
PointerEvent as ReactPointerEvent,
ReactNode,
} from "react";
import { useState } from "react";
import type { AreaChartSeries } from "@mantine/charts";
import { AreaChart, LineChart } from "@mantine/charts";
import { Card, Center, Group, Stack, Text, useComputedColorScheme, useMantineTheme } from "@mantine/core";
import {
Card,
Center,
Group,
Stack,
Text,
Tooltip,
useComputedColorScheme,
useMantineTheme,
} from "@mantine/core";
import { useElementSize, useHover, useMergedRef } from "@mantine/hooks";
import type { TooltipProps, YAxisProps } from "recharts";
import type { YAxisProps } from "recharts";
import { useRequiredBoard } from "@homarr/boards/context";
import { zoomCompensatedSize } from "@homarr/ui";
@@ -19,7 +33,7 @@ export const CommonChart = ({
title,
icon: Icon,
labelDisplayMode,
tooltipProps,
tooltipLabel,
yAxisProps,
lastValue,
chartType = "line",
@@ -31,7 +45,10 @@ export const CommonChart = ({
title: ReactNode;
icon: TablerIcon;
labelDisplayMode: LabelDisplayModeOption;
tooltipProps?: TooltipProps<number, any>;
// What to show on hover. Defaults to lastValue when omitted. Pass a function to reflect
// the datum under the cursor as it moves across multi-point data (e.g. memory's
// used/available at that point), instead of always showing the latest value.
tooltipLabel?: ReactNode | ((index: number) => ReactNode);
yAxisProps?: Omit<YAxisProps, "ref">;
lastValue?: string;
chartType?: "line" | "area";
@@ -45,63 +62,80 @@ export const CommonChart = ({
const ref = useMergedRef(elementSizeRef, hoverRef);
const opacity = board.opacity / 100;
let backgroundColor = colorScheme === "dark" ? `rgba(57, 57, 57, ${opacity})` : `rgba(246, 247, 248, ${opacity})`;
let backgroundColor =
colorScheme === "dark"
? `rgba(57, 57, 57, ${opacity})`
: `rgba(246, 247, 248, ${opacity})`;
const cardStyle: CSSProperties = { overflow: "hidden" };
const chartRootStyle: CSSProperties = { padding: 5, borderRadius: theme.radius[board.itemRadius] };
const chartRootStyle: CSSProperties = {
padding: 5,
borderRadius: theme.radius[board.itemRadius],
};
if (advanced) {
backgroundColor = "rgb(from var(--mantine-color-primaryColor-filled) r g b / calc(var(--opacity, 1) * 0.12))";
backgroundColor =
"rgb(from var(--mantine-color-primaryColor-filled) r g b / calc(var(--opacity, 1) * 0.12))";
cardStyle.border =
"1px solid rgb(from var(--mantine-color-secondaryColor-filled) r g b / calc(var(--opacity, 1) * 0.45))";
chartRootStyle.backgroundColor = backgroundColor;
}
const ChartComponent = chartType === "line" ? LineChart : AreaChart;
const showIcon = labelDisplayMode === "icon" || labelDisplayMode === "textWithIcon";
const showText = labelDisplayMode === "text" || labelDisplayMode === "textWithIcon";
const showIcon =
labelDisplayMode === "icon" || labelDisplayMode === "textWithIcon";
const showText =
labelDisplayMode === "text" || labelDisplayMode === "textWithIcon";
// Track which data point the cursor is over so the tooltip can reflect that point
// instead of always showing the latest value while scrubbing across the chart.
const [hoveredIndex, setHoveredIndex] = useState(data.length - 1);
const handlePointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {
if (data.length <= 1) return;
const rect = event.currentTarget.getBoundingClientRect();
if (rect.width === 0) return;
const ratio = (event.clientX - rect.left) / rect.width;
const index = Math.round(ratio * (data.length - 1));
setHoveredIndex(Math.min(data.length - 1, Math.max(0, index)));
};
// Clamp on read rather than syncing via an effect - handles data growing/shrinking
// between renders (e.g. history resetting on integration change) without ever
// handing a stale or out-of-range index to tooltipLabel.
const clampedHoveredIndex = Math.max(
0,
Math.min(hoveredIndex, data.length - 1),
);
const resolvedTooltipLabel =
typeof tooltipLabel === "function"
? tooltipLabel(clampedHoveredIndex)
: (tooltipLabel ?? lastValue);
return (
<Card ref={ref} h={"100%"} pos={"relative"} style={cardStyle} p={0} bg={backgroundColor} radius={board.itemRadius}>
{data.length > 1 && height > 40 && !hovered && (
<Group
pos={"absolute"}
top={0}
left={0}
p={8}
pt={6}
gap={5}
wrap={"nowrap"}
style={{ zIndex: 2, pointerEvents: "none" }}
align="center"
>
{showIcon && (
<Icon
color="var(--mantine-color-dimmed)"
style={zoomCompensatedSize(height > 100 ? 20 : 14)}
stroke={1.5}
/>
)}
{showText && (
<Text c={"dimmed"} size={height > 100 ? "md" : "xs"} fw={"bold"}>
{title}
</Text>
)}
{lastValue && (
<Text c={"dimmed"} size={height > 100 ? "md" : "xs"} lineClamp={1}>
{lastValue}
</Text>
)}
</Group>
)}
{advanced && data.length > 1 && height > 0 && height <= 40 && lastValue && !hovered && (
<Center pos="absolute" w="100%" h="100%" style={{ zIndex: 2, pointerEvents: "none" }}>
<Text size="xs" fw={600}>
{lastValue}
</Text>
</Center>
)}
{data.length <= 1 ? (
<Center pos="absolute" w="100%" h="100%">
<Stack px={"xs"} align={"center"} gap={4}>
<Tooltip.Floating
label={resolvedTooltipLabel}
disabled={data.length <= 1 || !resolvedTooltipLabel}
>
<Card
ref={ref}
h={"100%"}
pos={"relative"}
style={cardStyle}
p={0}
bg={backgroundColor}
radius={board.itemRadius}
onPointerMove={handlePointerMove}
>
{data.length > 1 && height > 40 && !hovered && (
<Group
pos={"absolute"}
top={0}
left={0}
p={8}
pt={6}
gap={5}
wrap={"nowrap"}
style={{ zIndex: 2, pointerEvents: "none" }}
align="center"
>
{showIcon && (
<Icon
color="var(--mantine-color-dimmed)"
@@ -110,43 +144,85 @@ export const CommonChart = ({
/>
)}
{showText && (
<Text c={"dimmed"} size={height > 100 ? "md" : "xs"} fw={"bold"} ta="center">
<Text c={"dimmed"} size={height > 100 ? "md" : "xs"} fw={"bold"}>
{title}
</Text>
)}
{advanced && lastValue && (
<Text size={height > 100 ? "md" : "xs"} fw={600} ta="center">
{lastValue && (
<Text
c={"dimmed"}
size={height > 100 ? "md" : "xs"}
lineClamp={1}
>
{lastValue}
</Text>
)}
</Stack>
</Center>
) : (
<ChartComponent
data={data}
dataKey={dataKey}
h={"100%"}
series={series}
curveType="monotone"
tickLine="none"
gridAxis="none"
withXAxis={false}
withYAxis={false}
withDots={false}
bg={backgroundColor}
styles={{ root: chartRootStyle }}
tooltipAnimationDuration={200}
tooltipProps={{
// Render via portal so the tooltip isn't clipped by the card's overflow:hidden
// (needed to stop the chart line itself bleeding past its rounded corners).
portal: typeof document !== "undefined" ? document.body : undefined,
...tooltipProps,
}}
withTooltip={height >= 64}
yAxisProps={yAxisProps}
fillOpacity={chartType === "area" ? 0.3 : undefined}
/>
)}
</Card>
</Group>
)}
{advanced &&
data.length > 1 &&
height > 0 &&
height <= 40 &&
lastValue &&
!hovered && (
<Center
pos="absolute"
w="100%"
h="100%"
style={{ zIndex: 2, pointerEvents: "none" }}
>
<Text size="xs" fw={600}>
{lastValue}
</Text>
</Center>
)}
{data.length <= 1 ? (
<Center pos="absolute" w="100%" h="100%">
<Stack px={"xs"} align={"center"} gap={4}>
{showIcon && (
<Icon
color="var(--mantine-color-dimmed)"
style={zoomCompensatedSize(height > 100 ? 20 : 14)}
stroke={1.5}
/>
)}
{showText && (
<Text
c={"dimmed"}
size={height > 100 ? "md" : "xs"}
fw={"bold"}
ta="center"
>
{title}
</Text>
)}
{advanced && lastValue && (
<Text size={height > 100 ? "md" : "xs"} fw={600} ta="center">
{lastValue}
</Text>
)}
</Stack>
</Center>
) : (
<ChartComponent
data={data}
dataKey={dataKey}
h={"100%"}
series={series}
curveType="monotone"
tickLine="none"
gridAxis="none"
withXAxis={false}
withYAxis={false}
withDots={false}
bg={backgroundColor}
styles={{ root: chartRootStyle }}
withTooltip={false}
yAxisProps={yAxisProps}
fillOpacity={chartType === "area" ? 0.3 : undefined}
/>
)}
</Card>
</Tooltip.Floating>
);
};
packages/widgets/src/system-resources/chart/cpu-chart.tsx
+5 -15
View File
@@ -1,4 +1,3 @@
import { Paper, Text } from "@mantine/core";
import { IconCpu } from "@tabler/icons-react";
import { invariantTechnicalLabels } from "@homarr/definitions";
@@ -27,25 +26,16 @@ export const SystemResourceCPUChart = ({
title={invariantTechnicalLabels.cpu}
icon={IconCpu}
lastValue={
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
cpuUsageOverTime.length > 0 ? `${Math.round(cpuUsageOverTime[cpuUsageOverTime.length - 1]!)}%` : undefined
cpuUsageOverTime.length > 0
? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
`${Math.round(cpuUsageOverTime[cpuUsageOverTime.length - 1]!)}%`
: undefined
}
chartType={hasShadow ? "area" : "line"}
yAxisProps={{ domain: [0, 100] }}
labelDisplayMode={labelDisplayMode}
advanced={advanced}
tooltipProps={{
content: ({ payload }) => {
const value = payload[0] ? Number(payload[0].value) : 0;
return (
<Paper px={3} py={2} shadow="md">
<Text c="dimmed" size="xs">
{value.toFixed(0)}%
</Text>
</Paper>
);
},
}}
tooltipLabel={(index) => `${Math.round(cpuUsageOverTime[index] ?? 0)}%`}
/>
);
};
packages/widgets/src/system-resources/chart/gpu-chart.tsx
+5 -15
View File
@@ -1,4 +1,3 @@
import { Paper, Text } from "@mantine/core";
import { IconDeviceDesktop } from "@tabler/icons-react";
import { invariantTechnicalLabels } from "@homarr/definitions";
@@ -27,25 +26,16 @@ export const SystemResourceGPUChart = ({
title={invariantTechnicalLabels.gpu}
icon={IconDeviceDesktop}
lastValue={
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
gpuUsageOverTime.length > 0 ? `${Math.round(gpuUsageOverTime[gpuUsageOverTime.length - 1]!)}%` : undefined
gpuUsageOverTime.length > 0
? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
`${Math.round(gpuUsageOverTime[gpuUsageOverTime.length - 1]!)}%`
: undefined
}
chartType={hasShadow ? "area" : "line"}
yAxisProps={{ domain: [0, 100] }}
labelDisplayMode={labelDisplayMode}
advanced={advanced}
tooltipProps={{
content: ({ payload }) => {
const value = payload[0] ? Number(payload[0].value) : 0;
return (
<Paper px={3} py={2} shadow="md">
<Text c="dimmed" size="xs">
{value.toFixed(0)}%
</Text>
</Paper>
);
},
}}
tooltipLabel={(index) => `${Math.round(gpuUsageOverTime[index] ?? 0)}%`}
/>
);
};
packages/widgets/src/system-resources/chart/memory-chart.tsx
+26 -18
View File
@@ -1,4 +1,3 @@
import { Paper, Text } from "@mantine/core";
import { IconBrain } from "@tabler/icons-react";
import { formatBytesPair } from "@homarr/common";
@@ -20,15 +19,33 @@ export const SystemResourceMemoryChart = ({
labelDisplayMode: LabelDisplayModeOption;
advanced?: boolean;
}) => {
const chartData = memoryUsageOverTime.map((usage, index) => ({ index, usage }));
const chartData = memoryUsageOverTime.map((usage, index) => ({
index,
usage,
}));
const t = useI18n("widget.systemResources.card");
const percentageUsed =
memoryUsageOverTime.length > 0 && totalCapacityInBytes > 0
? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
memoryUsageOverTime[memoryUsageOverTime.length - 1]! / totalCapacityInBytes
memoryUsageOverTime[memoryUsageOverTime.length - 1]! /
totalCapacityInBytes
: undefined;
const tooltipLabel = (index: number) => {
const used = memoryUsageOverTime[index] ?? 0;
const memory = formatBytesPair(Math.round(used), totalCapacityInBytes);
const percent =
totalCapacityInBytes > 0
? Math.round((used / totalCapacityInBytes) * 100)
: 0;
return t("memoryTooltip", {
used: memory.used,
available: memory.available,
percent,
});
};
return (
<CommonChart
data={chartData}
@@ -39,22 +56,13 @@ export const SystemResourceMemoryChart = ({
labelDisplayMode={labelDisplayMode}
advanced={advanced}
yAxisProps={{ domain: [0, totalCapacityInBytes] }}
lastValue={percentageUsed !== undefined ? `${Math.round(percentageUsed * 100)}%` : undefined}
lastValue={
percentageUsed !== undefined
? `${Math.round(percentageUsed * 100)}%`
: undefined
}
chartType={hasShadow ? "area" : "line"}
tooltipProps={{
content: ({ payload }) => {
const value = payload[0] ? Number(payload[0].value) : 0;
const memory = formatBytesPair(Math.round(value), totalCapacityInBytes);
return (
<Paper px={3} py={2} shadow="md">
<Text c="dimmed" size="xs">
{memory.used} / {memory.available} (
{totalCapacityInBytes > 0 ? Math.round((value / totalCapacityInBytes) * 100) : 0}%)
</Text>
</Paper>
);
},
}}
tooltipLabel={tooltipLabel}
/>
);
};
packages/widgets/src/system-resources/chart/network-traffic.tsx
+3 -13
View File
@@ -1,4 +1,3 @@
import { Paper, Text } from "@mantine/core";
import { IconArrowDown, IconArrowUp } from "@tabler/icons-react";
import { formatByteRate } from "@homarr/common";
@@ -39,18 +38,9 @@ export const NetworkTrafficChart = ({
chartType={hasShadow ? "area" : "line"}
labelDisplayMode={labelDisplayMode}
advanced={advanced}
tooltipProps={{
content: ({ payload }) => {
const value = payload[0] ? Number(payload[0].value) : 0;
return (
<Paper px={3} py={2} shadow="md">
<Text c="dimmed" size="xs">
{formatByteRate(Math.round(value))}
</Text>
</Paper>
);
},
}}
tooltipLabel={(index) =>
formatByteRate(Math.round(usageOverTime[index] ?? 0))
}
/>
);
};
packages/widgets/src/weather/animated-icon.tsx
+1 -1
View File
@@ -26,7 +26,7 @@ export const AnimatedWeatherIcon = ({ animated = false, code, isDay, size = 26,
let animationClass = "";
if (animated && (code !== 0 || isDay !== false)) animationClass = getAnimationClass(code);
return (
<span className={`weather-anim-wrapper ${animationClass}`}>
<span className={`weather-anim-wrapper ${animationClass}`} data-is-day={isDay === false ? "false" : "true"}>
<WeatherIcon code={code} isDay={isDay} size={size} style={style} />
</span>
);
tools/homarr-dev/internal/run/run.go
+1 -1
View File
@@ -70,7 +70,7 @@ func BuildPlan(opts Options) (*Plan, error) {
}
p.Env = append(p.Env, opts.Env...)
if opts.Demo {
p.Env = append(p.Env, "DEMO_MODE=true", "UNSAFE_ENABLE_MOCK_INTEGRATION=true")
p.Env = append(p.Env, "DEMO_MODE=true", "DEMO_READ_ONLY=false", "UNSAFE_ENABLE_MOCK_INTEGRATION=true")
p.Label += " (demo)"
}
return p, nil