{interactions.map(({ icon: Icon, title, description }) => (
-
- {children}
-
+ {children}
{active && (
- close()}
aria-hidden
/>
diff --git a/apps/nextjs/src/components/board/advanced-focus/escape.spec.ts b/apps/nextjs/src/components/board/advanced-focus/escape.spec.ts
index dc123eeff..7704ef8be 100644
--- a/apps/nextjs/src/components/board/advanced-focus/escape.spec.ts
+++ b/apps/nextjs/src/components/board/advanced-focus/escape.spec.ts
@@ -5,7 +5,7 @@ import { isEscapeOwnedByNestedOverlay } from "./escape";
describe("isEscapeOwnedByNestedOverlay", () => {
test("allows Escape from the advanced surface itself", () => {
const surface = document.createElement("section");
- surface.setAttribute("role", "dialog");
+ surface.setAttribute("role", "region");
const button = document.createElement("button");
surface.append(button);
@@ -14,7 +14,7 @@ describe("isEscapeOwnedByNestedOverlay", () => {
test("leaves Escape to a nested Mantine modal", () => {
const surface = document.createElement("section");
- surface.setAttribute("role", "dialog");
+ surface.setAttribute("role", "region");
const modal = document.createElement("section");
modal.setAttribute("role", "dialog");
const input = document.createElement("input");
@@ -25,7 +25,7 @@ describe("isEscapeOwnedByNestedOverlay", () => {
test.each(["menu", "listbox"])("leaves Escape to a nested %s overlay", (role) => {
const surface = document.createElement("section");
- surface.setAttribute("role", "dialog");
+ surface.setAttribute("role", "region");
const overlay = document.createElement("div");
overlay.setAttribute("role", role);
const target = document.createElement("button");
@@ -36,7 +36,7 @@ describe("isEscapeOwnedByNestedOverlay", () => {
test("honors Mantine's stop-propagation marker for menus and comboboxes", () => {
const surface = document.createElement("section");
- surface.setAttribute("role", "dialog");
+ surface.setAttribute("role", "region");
const target = document.createElement("button");
target.setAttribute("data-mantine-stop-propagation", "true");
surface.append(target);
@@ -46,7 +46,7 @@ describe("isEscapeOwnedByNestedOverlay", () => {
test("does not mistake the compact widget source for a nested overlay", () => {
const surface = document.createElement("section");
- surface.setAttribute("role", "dialog");
+ surface.setAttribute("role", "region");
const source = document.createElement("button");
expect(isEscapeOwnedByNestedOverlay(source, surface)).toBe(false);
diff --git a/apps/nextjs/src/components/board/advanced-focus/geometry.spec.ts b/apps/nextjs/src/components/board/advanced-focus/geometry.spec.ts
index c769e7fbc..1617a4858 100644
--- a/apps/nextjs/src/components/board/advanced-focus/geometry.spec.ts
+++ b/apps/nextjs/src/components/board/advanced-focus/geometry.spec.ts
@@ -1,15 +1,14 @@
import { describe, expect, it } from "vitest";
-import { getAdvancedFocusRect } from "./geometry";
+import { getAdvancedFocusClosePosition, getAdvancedFocusRect } from "./geometry";
describe("getAdvancedFocusRect", () => {
- it("expands a widget and keeps it inside the viewport", () => {
- const rect = getAdvancedFocusRect({ left: 10, top: 10, width: 300, height: 200 }, { width: 1200, height: 800 });
+ it("expands around the widget instead of centering a modal", () => {
+ const rect = getAdvancedFocusRect({ left: 450, top: 300, width: 300, height: 200 }, { width: 1200, height: 800 });
- expect(rect.left).toBe(120);
- expect(rect.top).toBeCloseTo(118.6);
- expect(rect.width).toBe(960);
- expect(rect.height).toBeCloseTo(622.8);
+ expect(rect).toEqual({ left: 200, top: 120, width: 800, height: 560 });
+ expect(rect.left + rect.width / 2).toBe(600);
+ expect(rect.top + rect.height / 2).toBe(400);
});
it("uses the available viewport on small screens", () => {
@@ -22,9 +21,34 @@ describe("getAdvancedFocusRect", () => {
});
it("keeps controls below the fixed board header on short screens", () => {
- const rect = getAdvancedFocusRect({ left: 0, top: 0, width: 500, height: 500 }, { width: 1366, height: 768 });
+ const rect = getAdvancedFocusRect({ left: 1200, top: 700, width: 500, height: 500 }, { width: 1366, height: 768 });
- expect(rect.top).toBeGreaterThanOrEqual(84);
- expect(rect.top + rect.height).toBeLessThanOrEqual(744);
+ expect(rect.left).toBeGreaterThanOrEqual(16);
+ expect(rect.left + rect.width).toBeLessThanOrEqual(1350);
+ expect(rect.top).toBeGreaterThanOrEqual(76);
+ expect(rect.top + rect.height).toBeLessThanOrEqual(752);
+ });
+});
+
+describe("getAdvancedFocusClosePosition", () => {
+ it("keeps the close control outside the surface when the right side has room", () => {
+ expect(getAdvancedFocusClosePosition({ left: 16, top: 76, width: 800, height: 560 }, 1280)).toEqual({
+ left: 824,
+ top: 76,
+ });
+ });
+
+ it("uses the left side when the surface is anchored to the right edge", () => {
+ expect(getAdvancedFocusClosePosition({ left: 464, top: 76, width: 800, height: 560 }, 1280)).toEqual({
+ left: 412,
+ top: 76,
+ });
+ });
+
+ it("falls back to the inside corner on narrow screens", () => {
+ expect(getAdvancedFocusClosePosition({ left: 8, top: 68, width: 374, height: 624 }, 390)).toEqual({
+ left: 330,
+ top: 76,
+ });
});
});
diff --git a/apps/nextjs/src/components/board/advanced-focus/geometry.ts b/apps/nextjs/src/components/board/advanced-focus/geometry.ts
index 086cfd622..e8859a5a8 100644
--- a/apps/nextjs/src/components/board/advanced-focus/geometry.ts
+++ b/apps/nextjs/src/components/board/advanced-focus/geometry.ts
@@ -7,22 +7,48 @@ export interface FocusRect {
height: number;
}
+export interface FocusClosePosition {
+ left: number;
+ top: number;
+}
+
+const closeButtonSize = 44;
+const closeButtonGap = 8;
+
export const getAdvancedFocusRect = (source: FocusRect, viewport: { width: number; height: number }): FocusRect => {
- const margin = viewport.width < 640 ? 8 : 24;
+ const margin = viewport.width < 640 ? 8 : 16;
const availableWidth = Math.max(0, viewport.width - margin * 2);
const availableHeight = Math.max(0, viewport.height - appShellHeaderHeight - margin * 2);
- const preferredWidth = viewport.width < 640 ? availableWidth : Math.min(960, availableWidth * 0.9);
- const preferredHeight = viewport.width < 640 ? availableHeight : Math.min(720, availableHeight * 0.9);
+ const preferredWidth = viewport.width < 640 ? availableWidth : Math.min(800, availableWidth);
+ const preferredHeight = viewport.width < 640 ? availableHeight : Math.min(560, availableHeight);
const width = Math.min(availableWidth, Math.max(source.width, preferredWidth));
const height = Math.min(availableHeight, Math.max(source.height, preferredHeight));
+ const minimumTop = appShellHeaderHeight + margin;
+ const maximumLeft = Math.max(margin, viewport.width - margin - width);
+ const maximumTop = Math.max(minimumTop, viewport.height - margin - height);
return {
- left: Math.max(margin, (viewport.width - width) / 2),
- top: Math.max(
- appShellHeaderHeight + margin,
- appShellHeaderHeight + (viewport.height - appShellHeaderHeight - height) / 2,
- ),
+ left: Math.min(maximumLeft, Math.max(margin, source.left - (width - source.width) / 2)),
+ top: Math.min(maximumTop, Math.max(minimumTop, source.top - (height - source.height) / 2)),
width,
height,
};
};
+
+export const getAdvancedFocusClosePosition = (surface: FocusRect, viewportWidth: number): FocusClosePosition => {
+ const outsideOffset = closeButtonSize + closeButtonGap;
+ const surfaceRight = surface.left + surface.width;
+
+ if (viewportWidth - surfaceRight >= outsideOffset) {
+ return { left: surfaceRight + closeButtonGap, top: surface.top };
+ }
+
+ if (surface.left >= outsideOffset) {
+ return { left: surface.left - outsideOffset, top: surface.top };
+ }
+
+ return {
+ left: Math.max(0, Math.min(viewportWidth - closeButtonSize, surfaceRight - outsideOffset)),
+ top: surface.top + closeButtonGap,
+ };
+};
diff --git a/e2e/board-advanced-interactions.spec.ts b/e2e/board-advanced-interactions.spec.ts
index 417f913b3..eabb0a33f 100644
--- a/e2e/board-advanced-interactions.spec.ts
+++ b/e2e/board-advanced-interactions.spec.ts
@@ -7,6 +7,7 @@ import { afterAll, beforeAll, describe, test } from "vitest";
import { hashPasswordAsync } from "../packages/auth/security";
import {
+ apps,
boardUserPermissions,
boards,
itemLayouts,
@@ -24,6 +25,7 @@ const ownerCredentials = { username: "owner", password: "Comp(exP4sswOrd" };
const disabledModifierCredentials = { username: "modifier", password: "Comp(exP4sswOrd" };
const viewerCredentials = { username: "viewer", password: "Comp(exP4sswOrd" };
const boardName = "advanced-interactions-e2e";
+const emptyCellCenterXRatio = 7.5 / 12;
describe("Board advanced interactions", () => {
let browser: Browser;
@@ -67,7 +69,10 @@ describe("Board advanced interactions", () => {
try {
const widget = page.locator(".grid-stack-item[data-kind='clock'] > .grid-stack-item-content").first();
const compactSurface = widget.locator(".clock-wrapper");
- const advancedDialog = page.getByRole("dialog", { name: "Date and time advanced view" });
+ const advancedSurface = page.getByRole("region", { name: "Date and time advanced view" });
+ const iframeAdvancedSurface = page.getByRole("region", { name: "iFrame advanced view" });
+ const dimmingOverlay = page.locator("[data-advanced-focus-overlay]");
+ const otherWidget = page.locator(".grid-stack-item[data-kind='iframe'] > .grid-stack-item-content").first();
await compactSurface.evaluate((element) => {
element.setAttribute("data-lifecycle-probe", "same-instance");
@@ -75,43 +80,60 @@ describe("Board advanced interactions", () => {
await widget.focus();
await page.keyboard.down("Shift");
await widget.hover();
- await expect(advancedDialog).toBeVisible({ timeout: 2_000 });
- await expect(advancedDialog).toHaveCSS("animation-name", "none");
- const advancedBounds = await advancedDialog.boundingBox();
- expect(advancedBounds?.width).toBeGreaterThanOrEqual(900);
- await expect(advancedDialog).toHaveAttribute("data-lifecycle-probe", "same-instance");
+ await expect(advancedSurface).toBeVisible({ timeout: 2_000 });
+ await expect(advancedSurface).toHaveCSS("animation-name", "none");
+ const compactBounds = await widget.boundingBox();
+ const advancedBounds = await advancedSurface.boundingBox();
+ expect(advancedBounds?.width).toBeGreaterThan(compactBounds?.width ?? 0);
+ await expect(advancedSurface).toHaveAttribute("data-lifecycle-probe", "same-instance");
+ await expect(dimmingOverlay).toBeVisible();
+ await expect(dimmingOverlay).toHaveCSS("pointer-events", "none");
+ await expect(otherWidget).toBeVisible();
await expect(widget).toBeFocused();
+
+ await advancedSurface.click({ button: "right", position: { x: 80, y: 80 } });
+ const portalledMenuItem = page.getByRole("menuitem", { name: "Open advanced view" });
+ await expect(portalledMenuItem).toBeVisible();
+ await portalledMenuItem.hover();
+ await expect(advancedSurface).toBeVisible();
+ await page.keyboard.press("Escape");
+ await expect(portalledMenuItem).toBeHidden();
+ await expect(advancedSurface).toBeVisible();
+
+ await otherWidget.hover();
+ await expect(advancedSurface).toBeHidden();
+ await expect(iframeAdvancedSurface).toBeVisible({ timeout: 2_000 });
await page.keyboard.up("Shift");
- await expect(advancedDialog).toBeHidden();
+ await expect(iframeAdvancedSurface).toBeHidden();
+ await expect(dimmingOverlay).toBeHidden();
await expect(compactSurface).toHaveAttribute("data-lifecycle-probe", "same-instance");
await expect(widget).toBeFocused();
- await page.keyboard.down("Shift");
- await widget.hover();
- await expect(advancedDialog).toBeVisible({ timeout: 2_000 });
- await page.getByRole("button", { name: "Keep advanced view open" }).click();
- const pinnedButton = page.getByRole("button", { name: "Advanced view is pinned" });
- await expect(pinnedButton).toBeFocused();
- await page.keyboard.up("Shift");
- await expect(advancedDialog).toBeVisible();
- await page.keyboard.press("Shift+Tab");
- await expect(advancedDialog).toBeVisible();
- await expect(page.getByRole("button", { name: "Close advanced view" })).toBeFocused();
- await page.keyboard.press("Escape");
- await expect(advancedDialog).toBeHidden();
- await expect(widget).toBeFocused();
-
await page.keyboard.press("Shift+Enter");
- await expect(advancedDialog).toBeVisible();
+ await expect(advancedSurface).toBeVisible();
+ await expect(page.getByRole("button", { name: "Close advanced view" })).toBeFocused();
+ await expect(page.getByRole("button", { name: /advanced view is pinned|keep advanced view open/i })).toHaveCount(
+ 0,
+ );
await page.keyboard.press("Escape");
- await expect(advancedDialog).toBeHidden();
+ await expect(advancedSurface).toBeHidden();
await expect(widget).toBeFocused();
await widget.click({ button: "right" });
await page.getByRole("menuitem", { name: "Open advanced view" }).click();
- await expect(advancedDialog).toBeVisible();
+ await expect(advancedSurface).toBeVisible();
await page.keyboard.press("Escape");
- await expect(advancedDialog).toBeHidden();
+ await expect(advancedSurface).toBeHidden();
+
+ const appWidget = page.locator(".grid-stack-item[data-kind='app'] > .grid-stack-item-content").first();
+ await expect(appWidget).not.toHaveAttribute("aria-keyshortcuts", "Shift+Enter");
+ await appWidget.click({ button: "right" });
+ await expect(page.getByRole("menuitem", { name: "Open advanced view" })).toHaveCount(0);
+ await page.keyboard.press("Escape");
+ await page.keyboard.down("Shift");
+ await appWidget.hover();
+ await expect(advancedSurface).toBeHidden();
+ await page.keyboard.up("Shift");
} finally {
await context.close();
}
@@ -131,7 +153,7 @@ describe("Board advanced interactions", () => {
await iframeSlot.focus();
await page.keyboard.press("Shift+Enter");
- await expect(page.getByRole("dialog", { name: "iFrame advanced view" })).toBeVisible();
+ await expect(page.getByRole("region", { name: "iFrame advanced view" })).toBeVisible();
await expect(frame.locator("#state")).toHaveValue("changed");
await page.keyboard.press("Escape");
await expect(frame.locator("#state")).toHaveValue("changed");
@@ -139,7 +161,7 @@ describe("Board advanced interactions", () => {
await iframeSlot.focus();
await page.keyboard.press("Shift+Enter");
await page.setViewportSize({ width: 800, height: 900 });
- await expect(page.getByRole("dialog", { name: "iFrame advanced view" })).toBeHidden();
+ await expect(page.getByRole("region", { name: "iFrame advanced view" })).toBeHidden();
await expect(page.locator(".grid-stack-item[data-kind='iframe'] iframe")).toBeVisible();
} finally {
await context.close();
@@ -163,13 +185,18 @@ describe("Board advanced interactions", () => {
expect(bounds.height).toBeGreaterThanOrEqual(44);
expect(bounds.x + bounds.width).toBeLessThanOrEqual(1366);
expect(bounds.y + bounds.height).toBeLessThanOrEqual(768);
- const dialogBounds = await page.getByRole("dialog", { name: "Date and time advanced view" }).boundingBox();
+ const surfaceBounds = await page.getByRole("region", { name: "Date and time advanced view" }).boundingBox();
const contentBounds = await page.locator(".clock-widget-container").boundingBox();
- expect(dialogBounds).not.toBeNull();
+ expect(surfaceBounds).not.toBeNull();
expect(contentBounds).not.toBeNull();
- if (dialogBounds && contentBounds) expect(contentBounds.y).toBeGreaterThanOrEqual(dialogBounds.y + 60);
+ if (surfaceBounds && contentBounds) {
+ expect(contentBounds.y - surfaceBounds.y).toBeLessThan(32);
+ expect(bounds.x >= surfaceBounds.x + surfaceBounds.width || bounds.x + bounds.width <= surfaceBounds.x).toBe(
+ true,
+ );
+ }
await closeButton.click();
- await expect(page.getByRole("dialog", { name: "Date and time advanced view" })).toBeHidden();
+ await expect(page.getByRole("region", { name: "Date and time advanced view" })).toBeHidden();
} finally {
await context.close();
}
@@ -232,7 +259,7 @@ describe("Board advanced interactions", () => {
await widget.click({ button: "right" });
await page.getByRole("menuitem", { name: "Open advanced view" }).click();
- await expect(page.getByRole("dialog", { name: "Date and time advanced view" })).toBeVisible();
+ await expect(page.getByRole("region", { name: "Date and time advanced view" })).toBeVisible();
await page.keyboard.press("Escape");
await expect(grid).not.toHaveAttribute("aria-label", "Add item here");
@@ -273,7 +300,7 @@ const rightClickEmptyGridSpaceAsync = async (grid: Locator) => {
await grid.click({
button: "right",
- position: { x: bounds.width - 16, y: Math.min(24, bounds.height / 2) },
+ position: { x: bounds.width * emptyCellCenterXRatio, y: Math.min(24, bounds.height / 2) },
});
};
@@ -282,7 +309,7 @@ const touchAndHoldEmptyGridSpaceAsync = async (grid: Locator) => {
expect(bounds).not.toBeNull();
if (!bounds) return;
- const clientX = bounds.x + bounds.width - 16;
+ const clientX = bounds.x + bounds.width * emptyCellCenterXRatio;
const clientY = bounds.y + Math.min(24, bounds.height / 2);
await grid.dispatchEvent("pointerdown", { pointerType: "touch", clientX, clientY });
await new Promise((resolve) => setTimeout(resolve, 800));
@@ -296,8 +323,16 @@ const seedInteractionBoardAsync = async (db: SqliteDatabase, ownerId: string) =>
const sectionId = createId();
const clockItemId = createId();
const iframeItemId = createId();
+ const appItemId = createId();
+ const appId = createId();
await db.insert(boards).values({ id: boardId, name: boardName, creatorId: ownerId, isPublic: false });
+ await db.insert(apps).values({
+ id: appId,
+ name: "Example app",
+ iconUrl: "/favicon.ico",
+ href: "https://example.com",
+ });
await db.insert(layouts).values([
{ id: baseLayoutId, name: "Base", columnCount: 12, breakpoint: 0, boardId },
{ id: desktopLayoutId, name: "Desktop", columnCount: 12, breakpoint: 1000, boardId },
@@ -318,6 +353,13 @@ const seedInteractionBoardAsync = async (db: SqliteDatabase, ownerId: string) =>
options: stringify({ embedUrl: "http://127.0.0.1:9", allowScrolling: true }),
advancedOptions: stringify({ title: null, customCssClasses: [], borderColor: "" }),
},
+ {
+ id: appItemId,
+ kind: "app",
+ boardId,
+ options: stringify({ appId, openInNewTab: true, showTitle: true, pingEnabled: false }),
+ advancedOptions: stringify({ title: null, customCssClasses: [], borderColor: "" }),
+ },
]);
await db.insert(itemLayouts).values(
[baseLayoutId, desktopLayoutId].flatMap((layoutId) => [
@@ -334,11 +376,20 @@ const seedInteractionBoardAsync = async (db: SqliteDatabase, ownerId: string) =>
itemId: iframeItemId,
sectionId,
layoutId,
- xOffset: 4,
+ xOffset: 8,
yOffset: 0,
width: 4,
height: 3,
},
+ {
+ itemId: appItemId,
+ sectionId,
+ layoutId,
+ xOffset: 4,
+ yOffset: 0,
+ width: 3,
+ height: 3,
+ },
]),
);
await db
diff --git a/packages/request-handler/src/timetable.spec.ts b/packages/request-handler/src/timetable.spec.ts
index 54bd68645..ea39392ab 100644
--- a/packages/request-handler/src/timetable.spec.ts
+++ b/packages/request-handler/src/timetable.spec.ts
@@ -14,7 +14,8 @@ vi.mock("@homarr/core/infrastructure/http", () => ({
const mockFetch = vi.mocked(fetchWithTrustedCertificatesAsync);
const mockCreateCertificateAgent = vi.mocked(createCertificateAgentAsync);
const mockCloseDispatcher = vi.fn();
-const mockDispatcher = { close: mockCloseDispatcher };
+const mockDestroyDispatcher = vi.fn().mockResolvedValue(undefined);
+const mockDispatcher = { close: mockCloseDispatcher, destroy: mockDestroyDispatcher };
beforeEach(() => {
vi.clearAllMocks();
@@ -156,6 +157,41 @@ describe("timetable response bounds", () => {
expect(mockCloseDispatcher).toHaveBeenCalledOnce();
});
+ it("destroys the pinned station dispatcher when response handling fails", async () => {
+ mockFetch.mockResolvedValue(new Response("not json"));
+
+ await expect(
+ timetableSearchStationsRequestHandler
+ .handler({
+ baseUrl: "https://timetable.example.com",
+ query: "invalid-stations",
+ pinnedAddresses: [{ address: "93.184.216.34", family: 4 }],
+ })
+ .getDataAsync(),
+ ).rejects.toThrow();
+
+ expect(mockDestroyDispatcher).toHaveBeenCalledOnce();
+ expect(mockCloseDispatcher).not.toHaveBeenCalled();
+ });
+
+ it("destroys the pinned timetable dispatcher when response handling fails", async () => {
+ mockFetch.mockResolvedValue(new Response("not json"));
+
+ await expect(
+ timetableGetTimetableRequestHandler
+ .handler({
+ baseUrl: "https://timetable.example.com",
+ stationId: "invalid-departures",
+ limit: 1,
+ pinnedAddresses: [{ address: "93.184.216.34", family: 4 }],
+ })
+ .getDataAsync(),
+ ).rejects.toThrow();
+
+ expect(mockDestroyDispatcher).toHaveBeenCalledOnce();
+ expect(mockCloseDispatcher).not.toHaveBeenCalled();
+ });
+
it("never caches more departures than requested", async () => {
mockFetch.mockResolvedValue(
new Response(
diff --git a/packages/request-handler/src/timetable.ts b/packages/request-handler/src/timetable.ts
index 2ae4eb449..27f549ac5 100644
--- a/packages/request-handler/src/timetable.ts
+++ b/packages/request-handler/src/timetable.ts
@@ -124,9 +124,10 @@ const searchStationsAsync = async (
query: string,
pinnedAddresses?: TimetableResolvedAddress[],
): Promise => {
- const dispatcher = pinnedAddresses ? await createPinnedTimetableDispatcherAsync(baseUrl, pinnedAddresses) : undefined;
+ let dispatcher = pinnedAddresses ? await createPinnedTimetableDispatcherAsync(baseUrl, pinnedAddresses) : undefined;
+ let response: Awaited> | undefined;
try {
- const response = await fetchWithTrustedCertificatesAsync(
+ response = await fetchWithTrustedCertificatesAsync(
buildUrl(baseUrl, "/timetable/api/completion.json", { term: query, show_ids: 1, nofavorites: 1 }),
{ ...timetableFetchOptions, dispatcher },
);
@@ -138,6 +139,11 @@ const searchStationsAsync = async (
.filter((item) => supportedStationTypes.some((type) => item.iconclass.endsWith(type)))
.map((item) => (item.id !== undefined ? { id: item.id, name: item.label } : null))
.filter((item) => item !== null);
+ } catch (error) {
+ if (response?.body) await response.body.cancel().catch(() => {});
+ await dispatcher?.destroy().catch(() => {});
+ dispatcher = undefined;
+ throw error;
} finally {
await dispatcher?.close();
}
@@ -161,9 +167,10 @@ const getTimetableAsync = async (
minute: "2-digit",
hour12: false,
}).format(now);
- const dispatcher = pinnedAddresses ? await createPinnedTimetableDispatcherAsync(baseUrl, pinnedAddresses) : undefined;
+ let dispatcher = pinnedAddresses ? await createPinnedTimetableDispatcherAsync(baseUrl, pinnedAddresses) : undefined;
+ let response: Awaited> | undefined;
try {
- const response = await fetchWithTrustedCertificatesAsync(
+ response = await fetchWithTrustedCertificatesAsync(
buildUrl(baseUrl, "/timetable/api/stationboard.json", {
stop: options.stationId,
limit: options.limit,
@@ -205,6 +212,11 @@ const getTimetableAsync = async (
};
}),
};
+ } catch (error) {
+ if (response?.body) await response.body.cancel().catch(() => {});
+ await dispatcher?.destroy().catch(() => {});
+ dispatcher = undefined;
+ throw error;
} finally {
await dispatcher?.close();
}
diff --git a/packages/widgets/src/anchor-note/anchor-note.css b/packages/widgets/src/anchor-note/anchor-note.css
index c28655e87..d107b2a77 100644
--- a/packages/widgets/src/anchor-note/anchor-note.css
+++ b/packages/widgets/src/anchor-note/anchor-note.css
@@ -4,6 +4,34 @@
height: 100%;
}
+.homarr-anchor-actions {
+ opacity: 0;
+ transform: translateY(-2px);
+ transition:
+ opacity 120ms ease,
+ transform 120ms ease;
+}
+
+.homarr-anchor-note:hover .homarr-anchor-actions,
+.homarr-anchor-note:focus-within .homarr-anchor-actions,
+.homarr-anchor-actions[data-visible="true"] {
+ opacity: 1;
+ transform: none;
+}
+
+@media (any-pointer: coarse) {
+ .homarr-anchor-actions {
+ opacity: 1;
+ transform: none;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .homarr-anchor-actions {
+ transition: none;
+ }
+}
+
.homarr-anchor-quill .ql-toolbar.ql-snow,
.homarr-anchor-quill .ql-container.ql-snow {
border: 0;
diff --git a/packages/widgets/src/anchor-note/component.tsx b/packages/widgets/src/anchor-note/component.tsx
index 6667189b0..9268bf6f4 100644
--- a/packages/widgets/src/anchor-note/component.tsx
+++ b/packages/widgets/src/anchor-note/component.tsx
@@ -3,7 +3,8 @@
import { startTransition, useCallback, useEffect, useMemo, useState } from "react";
import type { ComponentProps } from "react";
import dynamic from "next/dynamic";
-import { Badge, Button, Center, Group, Stack, Text, TextInput } from "@mantine/core";
+import { ActionIcon, Badge, Button, Center, Group, Stack, Text, TextInput, Tooltip } from "@mantine/core";
+import { IconEdit } from "@tabler/icons-react";
import { Quill } from "react-quill-new";
import type { DeltaStatic } from "react-quill-new";
import type ReactQuillComponent from "react-quill-new";
@@ -295,7 +296,7 @@ const AnchorNoteWidgetContent = ({
if (!note) return
+
{isEditing ? (
@@ -335,22 +336,30 @@ const AnchorNoteWidgetContent = ({
)}
-
- {isEditing ? (
- <>
-
+ )}
{isEditing || isAdvanced ? (
- Advanced view reuses the widget's live data and cache. Touch devices expose a maximize control; board actions - respect your permissions and right-click preference. + Advanced view reuses the widget's live data and cache. The rest of the board stays visible but dimmed. Touch + devices expose a maximize control; app tiles stay compact.
); diff --git a/apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css b/apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css index 39965dbdf..60cc31954 100644 --- a/apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css +++ b/apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css @@ -1,28 +1,18 @@ -.focusScope { - height: 100%; -} - .backdrop { - position: fixed; - inset: 0; - z-index: 198; - background: rgba(0, 0, 0, 0.64); - backdrop-filter: blur(6px) saturate(0.75); - touch-action: none; + pointer-events: none; animation: focus-backdrop-in 180ms cubic-bezier(0.16, 1, 0.3, 1); } .surface { position: fixed; - z-index: 199; + z-index: 1; pointer-events: auto; overflow: hidden; background: var(--mantine-color-body); - box-shadow: var(--mantine-shadow-lg); + box-shadow: var(--mantine-shadow-md); overscroll-behavior: contain; - animation: focus-surface-in 220ms cubic-bezier(0.16, 1, 0.3, 1); + animation: focus-surface-in 180ms cubic-bezier(0.16, 1, 0.3, 1); transform-origin: top left; - padding-top: 60px; } .backdropClosing { @@ -45,7 +35,7 @@ .surfaceHostAdvanced { position: fixed; inset: 0; - z-index: 199; + z-index: calc(var(--mantine-z-index-modal) - 1); width: auto; height: auto; pointer-events: none; @@ -58,33 +48,8 @@ pointer-events: none; } -.surfaceControlsAdvanced { - right: 0; - bottom: auto; - height: 60px; - background: color-mix(in srgb, var(--mantine-color-body) 92%, transparent); - border-bottom: 1px solid var(--mantine-color-default-border); -} - -.surfaceTitle { - position: absolute; - top: 20px; - right: 120px; - left: 16px; -} - .closeButton { - position: absolute; - top: 8px; - right: 8px; - z-index: 2; - pointer-events: auto; -} - -.pinButton { - position: absolute; - top: 8px; - right: 60px; + position: fixed; z-index: 2; pointer-events: auto; } @@ -141,8 +106,7 @@ @media (forced-colors: active) { .backdrop { - backdrop-filter: none; background: Canvas; - opacity: 0.8; + opacity: 0.4; } } diff --git a/apps/nextjs/src/components/board/advanced-focus/context.tsx b/apps/nextjs/src/components/board/advanced-focus/context.tsx index 79e4ff50d..3f38bdc44 100644 --- a/apps/nextjs/src/components/board/advanced-focus/context.tsx +++ b/apps/nextjs/src/components/board/advanced-focus/context.tsx @@ -2,7 +2,7 @@ import type { PropsWithChildren } from "react"; import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react"; -import { Box, Portal, RemoveScroll } from "@mantine/core"; +import { Overlay, Portal } from "@mantine/core"; import { useEditMode } from "@homarr/boards/edit-mode"; @@ -14,17 +14,21 @@ interface ActiveFocus { itemId: string; source: HTMLElement; sourceRect: FocusRect; - pinned: boolean; + activation: "preview" | "manual"; autofocusClose: boolean; phase: "visible" | "closing"; } +interface OpenAdvancedFocusOptions { + activation?: ActiveFocus["activation"]; + autofocusClose?: boolean; +} + interface AdvancedFocusContextValue { active: ActiveFocus | null; - open: (itemId: string, source: HTMLElement, pinned?: boolean) => void; + open: (itemId: string, source: HTMLElement, options?: OpenAdvancedFocusOptions) => void; close: (restoreFocus?: boolean) => void; dismiss: (itemId: string) => void; - pin: (autofocusClose?: boolean) => void; hover: (itemId: string, source: HTMLElement) => void; leave: (itemId: string) => void; } @@ -64,7 +68,7 @@ export const BoardAdvancedFocusProvider = ({ children }: PropsWithChildren) => { }, []); const open = useCallback( - (itemId: string, source: HTMLElement, pinned = false) => { + (itemId: string, source: HTMLElement, options: OpenAdvancedFocusOptions = {}) => { if (isEditMode) return; cancelHoverTimer(); cancelCloseTimer(); @@ -73,8 +77,8 @@ export const BoardAdvancedFocusProvider = ({ children }: PropsWithChildren) => { itemId, source, sourceRect: { left: rect.left, top: rect.top, width: rect.width, height: rect.height }, - pinned, - autofocusClose: pinned, + activation: options.activation ?? "manual", + autofocusClose: options.autofocusClose ?? false, phase: "visible", }); }, @@ -101,15 +105,23 @@ export const BoardAdvancedFocusProvider = ({ children }: PropsWithChildren) => { cancelHoverTimer(); const hovered = hoveredRef.current; if (!hovered || !shiftHeldRef.current || activeRef.current) return; - hoverTimerRef.current = setTimeout(() => open(hovered.itemId, hovered.source), HOVER_DELAY_MS); + hoverTimerRef.current = setTimeout( + () => open(hovered.itemId, hovered.source, { activation: "preview" }), + HOVER_DELAY_MS, + ); }, [cancelHoverTimer, open]); const hover = useCallback( (itemId: string, source: HTMLElement) => { hoveredRef.current = { itemId, source }; + const current = activeRef.current; + if (current?.activation === "preview" && current.itemId !== itemId) { + cancelCloseTimer(); + updateActive(null); + } startHoverTimer(); }, - [startHoverTimer], + [cancelCloseTimer, startHoverTimer, updateActive], ); const leave = useCallback( @@ -130,15 +142,6 @@ export const BoardAdvancedFocusProvider = ({ children }: PropsWithChildren) => { [cancelCloseTimer, cancelHoverTimer, updateActive], ); - const pin = useCallback( - (autofocusClose = false) => { - const current = activeRef.current; - if (!current || current.pinned || current.phase === "closing") return; - updateActive({ ...current, pinned: true, autofocusClose }); - }, - [updateActive], - ); - useEffect(() => { const handleKeyDown = (event: KeyboardEvent) => { if (event.key === "Escape" && activeRef.current) { @@ -151,7 +154,7 @@ export const BoardAdvancedFocusProvider = ({ children }: PropsWithChildren) => { } if (isEditMode) return; if (event.key !== "Shift" || event.repeat || isEditableTarget(event.target)) return; - if (activeRef.current?.pinned) return; + if (activeRef.current?.activation === "manual") return; shiftHeldRef.current = true; startHoverTimer(); }; @@ -159,12 +162,12 @@ export const BoardAdvancedFocusProvider = ({ children }: PropsWithChildren) => { if (event.key !== "Shift") return; shiftHeldRef.current = false; cancelHoverTimer(); - if (activeRef.current && !activeRef.current.pinned) close(false); + if (activeRef.current?.activation === "preview") close(false); }; const handleBlur = () => { shiftHeldRef.current = false; cancelHoverTimer(); - if (activeRef.current && !activeRef.current.pinned) close(false); + if (activeRef.current?.activation === "preview") close(false); }; window.addEventListener("keydown", handleKeyDown); @@ -184,20 +187,22 @@ export const BoardAdvancedFocusProvider = ({ children }: PropsWithChildren) => { }, [close, isEditMode]); const value = useMemo( - () => ({ active, open, close, dismiss, pin, hover, leave }), - [active, close, dismiss, hover, leave, open, pin], + () => ({ active, open, close, dismiss, hover, leave }), + [active, close, dismiss, hover, leave, open], ); return () {
+export default function AppWidget({ options, isEditMode, height, width }: WidgetComponentProps<"app">) {
const t = useI18n();
const settings = useSettings();
const board = useRequiredBoard();
@@ -51,7 +51,6 @@ export default function AppWidget({ options, isEditMode, height, width, displayM
if (!app) return e.preventDefault() : undefined}
>
- {(options.showTitle || isAdvanced) && (
+ {options.showTitle && (
)}
- {(options.descriptionDisplayMode === "normal" || isAdvanced) && (
+ {options.descriptionDisplayMode === "normal" && (
{app.description?.split("\n").map((line, index) => (
@@ -110,11 +109,6 @@ export default function AppWidget({ options, isEditMode, height, width, displayM
))}
)}
- {isAdvanced && app.href && (
-
- {getDisplayHost(app.href)}
-
- )}
{
- try {
- return new URL(href).host;
- } catch {
- return href;
- }
-};
diff --git a/packages/widgets/src/archive-team-warrior/component.tsx b/packages/widgets/src/archive-team-warrior/component.tsx
index e6b4f878d..83cf74289 100644
--- a/packages/widgets/src/archive-team-warrior/component.tsx
+++ b/packages/widgets/src/archive-team-warrior/component.tsx
@@ -53,9 +53,16 @@ const ArchiveTeamWarriorWidgetContent = ({
const status = data.status;
const projectName = status.project?.title ?? status.selectedProject ?? t("noProjectSelected");
const statusKey = getStatusKey(status.status);
+ const layout = getArchiveCompactLayout(width, height, isAdvanced);
+ const countMetrics = [
+ { label: t("metric.running"), value: status.counts.running },
+ ...(layout.showSecondaryCounts ? [{ label: t("metric.completed"), value: status.counts.completed }] : []),
+ { label: t("metric.failed"), value: status.counts.failed },
+ ...(layout.showSecondaryCounts ? [{ label: t("metric.canceled"), value: status.counts.canceled }] : []),
+ ];
return (
-
+
- {options.showBroadcastMessage && status.broadcastMessage && (isAdvanced || height >= 160) && (
+ {options.showBroadcastMessage && status.broadcastMessage && layout.showBroadcast && (
{status.broadcastMessage}
@@ -77,17 +84,16 @@ const ArchiveTeamWarriorWidgetContent = ({
)}
-
-
+ {countMetrics.map((metric) => (
+
- {status.bandwidth && (
-
-
+
)}
{isAdvanced && (
@@ -130,17 +136,32 @@ const ArchiveTeamWarriorWidgetContent = ({
);
};
-const Metric = ({ label, value }: { label: string; value: number | string }) => (
+const Metric = ({ label, value, dense = false }: { label: string; value: number | string; dense?: boolean }) => (
-
+
{value}
-
+
{label}
);
+export const getArchiveCompactLayout = (width: number, height: number, isAdvanced = false) => {
+ const dense = !isAdvanced && (width < 240 || height < 160);
+ const showSecondaryCounts = isAdvanced || (width >= 200 && height >= 120);
+ const metricCount = showSecondaryCounts ? 4 : 2;
+
+ return {
+ dense,
+ gap: dense ? 4 : "xs",
+ metricColumns: height < 160 ? metricCount : Math.min(metricCount, width >= 260 ? 4 : 2),
+ showBandwidth: isAdvanced || height >= 190,
+ showBroadcast: isAdvanced || height >= 240,
+ showSecondaryCounts,
+ } as const;
+};
+
const formatBandwidth = (value?: number) => formatByteRate(Math.round(value ?? 0));
type WarriorStatusKey = "running" | "completed" | "failed" | "canceled" | "stopped" | "idle" | "unknown";
diff --git a/packages/widgets/src/archive-team-warrior/layout.spec.ts b/packages/widgets/src/archive-team-warrior/layout.spec.ts
new file mode 100644
index 000000000..213c5bd11
--- /dev/null
+++ b/packages/widgets/src/archive-team-warrior/layout.spec.ts
@@ -0,0 +1,23 @@
+import { describe, expect, test } from "vitest";
+
+import { getArchiveCompactLayout } from "./component";
+
+describe("archive team warrior compact layout", () => {
+ test("keeps only primary counters in a minimum-size widget", () => {
+ expect(getArchiveCompactLayout(180, 100)).toMatchObject({
+ metricColumns: 2,
+ showBandwidth: false,
+ showBroadcast: false,
+ showSecondaryCounts: false,
+ });
+ });
+
+ test("adds secondary information as height becomes available", () => {
+ expect(getArchiveCompactLayout(320, 260)).toMatchObject({
+ metricColumns: 4,
+ showBandwidth: true,
+ showBroadcast: true,
+ showSecondaryCounts: true,
+ });
+ });
+});
diff --git a/packages/widgets/src/audio-stats/audio-stats-content.tsx b/packages/widgets/src/audio-stats/audio-stats-content.tsx
index b6824a1fe..3592744a4 100644
--- a/packages/widgets/src/audio-stats/audio-stats-content.tsx
+++ b/packages/widgets/src/audio-stats/audio-stats-content.tsx
@@ -8,7 +8,14 @@ import { useScopedI18n } from "@homarr/translation/client";
import classes from "./component.module.css";
import type { AudioStatsBackend, AudioStatsDisplayOptions } from "./shared";
-import { AUDIO_STATS_TRANSLATION_SCOPE, getGridCols, getIconSize, getVisibleStats } from "./shared";
+import {
+ AUDIO_STATS_TRANSLATION_SCOPE,
+ getGridCols,
+ getIconSize,
+ prioritizeVisibleStats,
+ getVisibleStatLimit,
+ getVisibleStats,
+} from "./shared";
const rootClassByCompact = {
true: classes.rootCompact,
@@ -30,14 +37,17 @@ interface AudioStatsContentProps {
stats: NavidromeDashboardData | AudiobookshelfDashboardData;
options: AudioStatsDisplayOptions;
width: number;
+ height: number;
}
-export function AudioStatsContent({ backend, stats, options, width }: AudioStatsContentProps) {
+export function AudioStatsContent({ backend, stats, options, width, height }: AudioStatsContentProps) {
const t = useScopedI18n(AUDIO_STATS_TRANSLATION_SCOPE);
- const visibleStats = getVisibleStats(backend, options, stats);
- const compactKey = String(options.compactMode ?? false) as keyof typeof rootClassByCompact;
- const gridCols = getGridCols(width, visibleStats.length, options.compactMode ?? false);
- const iconSize = getIconSize(width, options.compactMode ?? false);
+ const compact = options.compactMode ?? false;
+ const enabledStats = prioritizeVisibleStats(getVisibleStats(backend, options, stats), compact);
+ const visibleStats = enabledStats.slice(0, getVisibleStatLimit(width, height, enabledStats.length, compact));
+ const compactKey = String(compact) as keyof typeof rootClassByCompact;
+ const gridCols = getGridCols(width, visibleStats.length, compact);
+ const iconSize = getIconSize(width, compact);
return (
diff --git a/packages/widgets/src/audio-stats/audio-stats-shared.spec.ts b/packages/widgets/src/audio-stats/audio-stats-shared.spec.ts
index 406562f66..c4484ac12 100644
--- a/packages/widgets/src/audio-stats/audio-stats-shared.spec.ts
+++ b/packages/widgets/src/audio-stats/audio-stats-shared.spec.ts
@@ -2,7 +2,7 @@ import { describe, expect, test } from "vitest";
import type { AudiobookshelfDashboardData, NavidromeDashboardData } from "@homarr/integrations/types";
-import { getGridCols, getIconSize, getVisibleStats } from "./shared";
+import { getGridCols, getIconSize, getVisibleStatLimit, getVisibleStats, prioritizeVisibleStats } from "./shared";
describe("getGridCols", () => {
test("caps columns to visible stat count", () => {
@@ -37,6 +37,17 @@ describe("getIconSize", () => {
});
});
+describe("getVisibleStatLimit", () => {
+ test("keeps compact metrics legible when height is constrained", () => {
+ expect(getVisibleStatLimit(100, 80, 5, true)).toBe(1);
+ expect(getVisibleStatLimit(180, 50, 5, true)).toBe(3);
+ });
+
+ test("preserves every configured metric outside compact mode", () => {
+ expect(getVisibleStatLimit(100, 80, 5, false)).toBe(5);
+ });
+});
+
describe("getVisibleStats", () => {
const navidromeStats: NavidromeDashboardData = {
artistCount: 100,
@@ -91,3 +102,21 @@ describe("getVisibleStats", () => {
expect(typeof result[0]?.value).toBe("string");
});
});
+
+describe("prioritizeVisibleStats", () => {
+ test("puts an active session first only on compact surfaces", () => {
+ const stats = getVisibleStats(
+ "audiobookshelf",
+ { showLibraryCount: true, showActiveSessions: true },
+ {
+ libraryCount: 3,
+ totalAudiobooks: 150,
+ totalPodcasts: 20,
+ totalListeningTimeSeconds: 86400,
+ activeSessions: 2,
+ },
+ );
+ expect(prioritizeVisibleStats(stats, true)[0]?.statKey).toBe("activeSessions");
+ expect(prioritizeVisibleStats(stats, false)[0]?.statKey).toBe("libraryCount");
+ });
+});
diff --git a/packages/widgets/src/audio-stats/component.tsx b/packages/widgets/src/audio-stats/component.tsx
index 0504cce25..338d84027 100644
--- a/packages/widgets/src/audio-stats/component.tsx
+++ b/packages/widgets/src/audio-stats/component.tsx
@@ -40,6 +40,7 @@ export default function AudioStatsWidget({
stats={response.data}
options={{ ...options, compactMode: displayMode === "compact" && (options.compactMode || height < 160) }}
width={width}
+ height={height}
/>
);
if (displayMode === "compact") return summary;
diff --git a/packages/widgets/src/audio-stats/shared.ts b/packages/widgets/src/audio-stats/shared.ts
index d4b79c72c..15e6b8a12 100644
--- a/packages/widgets/src/audio-stats/shared.ts
+++ b/packages/widgets/src/audio-stats/shared.ts
@@ -155,6 +155,23 @@ export const getGridCols = (width: number, visibleCount: number, compact: boolea
return Math.min(maxCols, Math.max(visibleCount, 1));
};
+export const getVisibleStatLimit = (width: number, height: number, visibleCount: number, compact: boolean): number => {
+ if (!compact) return visibleCount;
+
+ const columns = getGridCols(width, visibleCount, true);
+ const rows = Math.max(1, Math.floor(Math.max(0, height - 8) / 44));
+ return Math.min(visibleCount, columns * rows);
+};
+
+export const prioritizeVisibleStats = (stats: VisibleStat[], compact: boolean): VisibleStat[] => {
+ if (!compact) return stats;
+ return stats.toSorted(
+ (left, right) =>
+ Number(right.statKey === "activeSessions" && Number(right.value) > 0) -
+ Number(left.statKey === "activeSessions" && Number(left.value) > 0),
+ );
+};
+
const fallbackIconSize = { true: 14, false: 16 } as const;
export const getIconSize = (width: number, compact: boolean): number => {
diff --git a/packages/widgets/src/bazarr/component.tsx b/packages/widgets/src/bazarr/component.tsx
index 5e4d32ffd..3538ecc2f 100644
--- a/packages/widgets/src/bazarr/component.tsx
+++ b/packages/widgets/src/bazarr/component.tsx
@@ -89,7 +89,9 @@ export default function BazarrWidget({
+
{t("status.triggered")} ({triggeredAlerts.length})
@@ -116,6 +130,7 @@ export default function BeszelAlertsWidget({
min={alert.min}
systemName={systemNameMap[alert.system] ?? alert.system}
triggered
+ showDescription={showAlertDescriptions}
/>
))}
@@ -127,7 +142,7 @@ export default function BeszelAlertsWidget({
+
{t("status.ok")} ({okAlerts.length})
@@ -139,6 +154,7 @@ export default function BeszelAlertsWidget({
min={alert.min}
systemName={systemNameMap[alert.system] ?? alert.system}
triggered={false}
+ showDescription={showAlertDescriptions}
/>
))}
@@ -150,7 +166,7 @@ export default function BeszelAlertsWidget({
+
{t("history")}
@@ -203,6 +219,7 @@ interface AlertRowProps {
min: number;
systemName: string;
triggered: boolean;
+ showDescription: boolean;
}
const unitSuffixMap: Record = {
@@ -226,38 +243,43 @@ function formatAlertDescription(name: string, value: number, min: number): strin
return `exceeds ${value}${suffix} over ${min} min`;
}
-function AlertRow({ name, value, min, systemName, triggered }: AlertRowProps) {
+function AlertRow({ name, value, min, systemName, triggered, showDescription }: AlertRowProps) {
const Icon = alertIconMap[name] ?? Server;
+ const description = formatAlertDescription(name, value, min);
return (
-
-
-
-
- {systemName}
-
-
- ·
-
-
- {name}
-
-
-
- {formatAlertDescription(name, value, min)}
-
-
-
+
+
+
+
+
+ {systemName}
+
+
+ ·
+
+
+ {name}
+
+
+ {showDescription && (
+
+ {description}
+
+ )}
+ {!showDescription && {description} }
+
+
+
);
}
diff --git a/packages/widgets/src/beszel-system-grid/component.module.css b/packages/widgets/src/beszel-system-grid/component.module.css
index f70cde0e9..94c951dca 100644
--- a/packages/widgets/src/beszel-system-grid/component.module.css
+++ b/packages/widgets/src/beszel-system-grid/component.module.css
@@ -1,7 +1,20 @@
.clickableCard {
transition: background-color 150ms;
+ cursor: pointer;
}
-.clickableCard:hover {
+.clickableCard:hover,
+.clickableCard:focus-visible {
background-color: color-mix(in srgb, var(--mantine-color-default-hover) 40%, transparent) !important;
}
+
+.clickableCard:focus-visible {
+ outline: 2px solid var(--mantine-primary-color-filled);
+ outline-offset: -2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .clickableCard {
+ transition: none;
+ }
+}
diff --git a/packages/widgets/src/beszel-system-grid/component.tsx b/packages/widgets/src/beszel-system-grid/component.tsx
index ff26240b4..d7fcbb21c 100644
--- a/packages/widgets/src/beszel-system-grid/component.tsx
+++ b/packages/widgets/src/beszel-system-grid/component.tsx
@@ -336,6 +336,9 @@ const SystemCard = ({ system, options, t, size, maxMetrics, itemRadius, onClick
return (
diff --git a/packages/widgets/src/beszel-system-stats/component.module.css b/packages/widgets/src/beszel-system-stats/component.module.css
index 7750108f9..9d8b2087b 100644
--- a/packages/widgets/src/beszel-system-stats/component.module.css
+++ b/packages/widgets/src/beszel-system-stats/component.module.css
@@ -8,7 +8,21 @@
pointer-events: none;
}
-.beszelStatsContainer:hover .beszelStatsSystemToggle {
+.beszelStatsContainer:hover .beszelStatsSystemToggle,
+.beszelStatsContainer:focus-within .beszelStatsSystemToggle {
opacity: 1;
pointer-events: auto;
}
+
+@media (hover: none) {
+ .beszelStatsSystemToggle {
+ opacity: 1;
+ pointer-events: auto;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .beszelStatsSystemToggle {
+ transition: none;
+ }
+}
diff --git a/packages/widgets/src/beszel/_shared/tooltip.tsx b/packages/widgets/src/beszel/_shared/tooltip.tsx
index b72403fe5..a7020b2dc 100644
--- a/packages/widgets/src/beszel/_shared/tooltip.tsx
+++ b/packages/widgets/src/beszel/_shared/tooltip.tsx
@@ -1,10 +1,9 @@
"use client";
import type { CSSProperties } from "react";
-import dayjs from "dayjs";
-import localizedFormat from "dayjs/plugin/localizedFormat";
+import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
-dayjs.extend(localizedFormat);
+import { formatLocalizedDate } from "../../common/locale";
const styles: Record = {
wrapper: {
@@ -54,6 +53,8 @@ interface BeszelTooltipProps {
}
const BeszelTooltipContent = ({ active, label, payload, formatter, showTotal }: BeszelTooltipProps) => {
+ const locale = useCurrentIntlLocale();
+ const t = useScopedI18n("common");
const isActive = active && (payload?.length ?? 0) > 0;
if (!isActive) return null;
@@ -66,7 +67,9 @@ const BeszelTooltipContent = ({ active, label, payload, formatter, showTotal }:
if (!sorted.length) return null;
const rawTime = sorted[0]?.payload?.rawTime as string | undefined;
- const tooltipLabel = rawTime ? dayjs(rawTime).format("MMM D, LT") : label;
+ const tooltipLabel = rawTime
+ ? formatLocalizedDate(rawTime, locale, { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" })
+ : label;
const total = sorted.reduce((sum, p) => sum + p.value, 0);
return (
@@ -81,7 +84,7 @@ const BeszelTooltipContent = ({ active, label, payload, formatter, showTotal }:
))}
{showTotal && sorted.length > 1 && (
+
{options.title.length > 0 && (
-
+ <Title order={4} px="0.25rem" lineClamp={1}>
{options.title}
)}
@@ -57,29 +112,37 @@ export default function BookmarksWidget({ options, itemId, width, displayMode }:
hasIconColor={board.iconColor !== null}
/>
)}
- {displayMode !== "advanced" && (options.layout === "grid" || options.layout === "gridHorizontal") && (
-
+
+ {options.layout === "grid" || options.layout === "gridHorizontal" ? (
+
+
)}
);
@@ -94,6 +157,7 @@ interface FlexLayoutProps {
openNewTab: boolean;
withBorder: boolean;
hasIconColor: boolean;
+ minimumItemSize: number;
}
const FlexLayout = ({
@@ -105,13 +169,15 @@ const FlexLayout = ({
openNewTab,
withBorder,
hasIconColor,
+ minimumItemSize,
}: FlexLayoutProps) => {
const board = useRequiredBoard();
return (
-
+
{data.map((app) => (
-
- Total
+ {t("total")}
{formatter(total)}
)}
@@ -100,6 +103,6 @@ export const makeTooltipProps = (formatter: (v: number) => string, showTotal = f
showTotal={showTotal}
/>
),
- wrapperStyle: { zIndex: 10000, pointerEvents: "none" as const },
+ wrapperStyle: { pointerEvents: "none" as const },
isAnimationActive: false,
});
diff --git a/packages/widgets/src/bookmarks/bookmark.module.css b/packages/widgets/src/bookmarks/bookmark.module.css
index c37b78242..807b90e48 100644
--- a/packages/widgets/src/bookmarks/bookmark.module.css
+++ b/packages/widgets/src/bookmarks/bookmark.module.css
@@ -2,6 +2,12 @@
background-color: var(--mantine-color-primaryColor-light-hover);
}
+.bookmarkButton:focus-visible {
+ outline: 2px solid var(--mantine-primary-color-filled);
+ outline-offset: 2px;
+ border-radius: var(--mantine-radius-sm);
+}
+
[data-mantine-color-scheme="light"] .card-grid {
background-color: var(--mantine-color-gray-1);
}
@@ -13,3 +19,7 @@
.card:hover > div > div.bookmarkIcon {
background-color: var(--mantine-color-iconColor-filled-hover);
}
+
+.bookmarkButton:focus-visible .bookmarkIcon {
+ background-color: var(--mantine-color-iconColor-filled-hover);
+}
diff --git a/packages/widgets/src/bookmarks/component.tsx b/packages/widgets/src/bookmarks/component.tsx
index 875394ea8..87cda56b4 100644
--- a/packages/widgets/src/bookmarks/component.tsx
+++ b/packages/widgets/src/bookmarks/component.tsx
@@ -1,6 +1,18 @@
"use client";
-import { Anchor, Card, Flex, Group, ScrollArea, SimpleGrid, Stack, Text, Title, UnstyledButton } from "@mantine/core";
+import {
+ Anchor,
+ Box,
+ Card,
+ Flex,
+ Group,
+ ScrollArea,
+ SimpleGrid,
+ Stack,
+ Text,
+ Title,
+ UnstyledButton,
+} from "@mantine/core";
import combineClasses from "clsx";
import type { RouterOutputs } from "@homarr/api";
@@ -12,7 +24,45 @@ import { MaskedOrNormalImage } from "@homarr/ui";
import type { WidgetComponentProps } from "../definition";
import classes from "./bookmark.module.css";
-export default function BookmarksWidget({ options, itemId, width, displayMode }: WidgetComponentProps<"bookmarks">) {
+type BookmarkLayout = WidgetComponentProps<"bookmarks">["options"]["layout"];
+
+export interface CompactBookmarkLayout {
+ columns: number;
+ hideHostname: boolean;
+ hideTitle: boolean;
+ minimumItemSize: number;
+}
+
+export function getCompactBookmarkLayout(
+ width: number,
+ height: number,
+ itemCount: number,
+ layout: BookmarkLayout,
+): CompactBookmarkLayout {
+ const count = Math.max(1, itemCount);
+ const isGrid = layout === "grid" || layout === "gridHorizontal";
+ const targetWidth = layout === "gridHorizontal" ? 180 : 104;
+ const columns = isGrid ? Math.max(1, Math.min(count, Math.floor(width / targetWidth))) : layout === "row" ? count : 1;
+ const rows = Math.max(1, Math.ceil(count / columns));
+ const cellWidth = width / columns;
+ const cellHeight = height / rows;
+ const usesHorizontalItems = layout === "column" || layout === "gridHorizontal";
+
+ return {
+ columns,
+ hideHostname: cellWidth < 120 || cellHeight < (usesHorizontalItems ? 52 : 96),
+ hideTitle: cellWidth < 64 || cellHeight < 40,
+ minimumItemSize: usesHorizontalItems ? 48 : 96,
+ };
+}
+
+export default function BookmarksWidget({
+ options,
+ itemId,
+ width,
+ height,
+ displayMode,
+}: WidgetComponentProps<"bookmarks">) {
const board = useRequiredBoard();
const { data = [] } = clientApi.app.byIds.useQuery(options.items, {
select(apps) {
@@ -41,10 +91,15 @@ export default function BookmarksWidget({ options, itemId, width, displayMode }:
[data],
);
+ const compactLayout = getCompactBookmarkLayout(width, height, data.length, options.layout);
+ const compactHideTitle = options.hideTitle || (compactLayout.hideTitle && !options.hideIcon);
+ const compactHideHostname =
+ options.hideHostname || (compactLayout.hideHostname && !(options.hideTitle && options.hideIcon));
+
return (
-
+
(
{
const board = useRequiredBoard();
return (
-
+
{data.map((app) => (
))}
-
+
);
};
@@ -305,7 +384,7 @@ const VerticalItem = ({
return (
{!hideTitle && (
-
+
{app.name}
)}
@@ -326,7 +405,7 @@ const VerticalItem = ({
/>
)}
{!hideHostname && (
-
+
{getBookmarkHostname(app.href)}
)}
@@ -365,7 +444,7 @@ const HorizontalItem = ({
)}
{!(hideTitle && hideHostname) && (
<>
-
+
{!hideTitle && (
{app.name}
@@ -373,7 +452,7 @@ const HorizontalItem = ({
)}
{!hideHostname && (
-
+
{getBookmarkHostname(app.href)}
)}
diff --git a/packages/widgets/src/bookmarks/layout.spec.ts b/packages/widgets/src/bookmarks/layout.spec.ts
index adb35a554..8e98c3e56 100644
--- a/packages/widgets/src/bookmarks/layout.spec.ts
+++ b/packages/widgets/src/bookmarks/layout.spec.ts
@@ -1,6 +1,6 @@
import { describe, expect, test } from "vitest";
-import { getAdvancedBookmarkColumns, getBookmarkHostname } from "./component";
+import { getAdvancedBookmarkColumns, getBookmarkHostname, getCompactBookmarkLayout } from "./component";
describe("bookmark display helpers", () => {
test("uses bounded advanced columns", () => {
@@ -9,6 +9,22 @@ describe("bookmark display helpers", () => {
expect(getAdvancedBookmarkColumns(900, 0)).toBe(1);
});
+ test("uses container geometry to keep compact cards legible", () => {
+ expect(getCompactBookmarkLayout(420, 220, 4, "gridHorizontal")).toMatchObject({
+ columns: 2,
+ hideHostname: false,
+ hideTitle: false,
+ minimumItemSize: 48,
+ });
+
+ expect(getCompactBookmarkLayout(180, 80, 4, "row")).toMatchObject({
+ columns: 4,
+ hideHostname: true,
+ hideTitle: true,
+ minimumItemSize: 96,
+ });
+ });
+
test("does not crash on malformed bookmark URLs", () => {
expect(getBookmarkHostname("https://homarr.dev/docs")).toBe("homarr.dev");
expect(getBookmarkHostname("not a URL")).toBe("not a URL");
diff --git a/packages/widgets/src/calendar/calendar-event-list.tsx b/packages/widgets/src/calendar/calendar-event-list.tsx
index 3fadb5a98..14270322b 100644
--- a/packages/widgets/src/calendar/calendar-event-list.tsx
+++ b/packages/widgets/src/calendar/calendar-event-list.tsx
@@ -24,11 +24,17 @@ import classes from "./calendar-event-list.module.css";
interface CalendarEventListProps {
events: CalendarEvent[];
+ fillHeight?: boolean;
groupByDate?: boolean;
locale?: string;
}
-export const CalendarEventList = ({ events, groupByDate = false, locale }: CalendarEventListProps) => {
+export const CalendarEventList = ({
+ events,
+ fillHeight = false,
+ groupByDate = false,
+ locale,
+}: CalendarEventListProps) => {
const headingIdPrefix = useId();
const dateFormatter = new Intl.DateTimeFormat(locale, {
weekday: "long",
@@ -43,9 +49,10 @@ export const CalendarEventList = ({ events, groupByDate = false, locale }: Calen
offsetScrollbars
pt={5}
w="100%"
+ h={fillHeight ? "100%" : undefined}
styles={{
viewport: {
- maxHeight: 450,
+ maxHeight: fillHeight ? undefined : 450,
},
}}
>
@@ -100,9 +107,9 @@ const CalendarEventRows = ({ events }: Pick) =
)}
)}
-
-
-
+
+
+
{event.subTitle !== null && (
{event.subTitle}
@@ -120,7 +127,7 @@ const CalendarEventRows = ({ events }: Pick) =
)}
-
+
diff --git a/packages/widgets/src/calendar/calendar-events.ts b/packages/widgets/src/calendar/calendar-events.ts
index 0b15e0098..19ddd3bd5 100644
--- a/packages/widgets/src/calendar/calendar-events.ts
+++ b/packages/widgets/src/calendar/calendar-events.ts
@@ -4,6 +4,9 @@ import type { CalendarEvent } from "@homarr/integrations/types";
export const toCalendarDateKey = (date: Date) => dayjs(date).format("YYYY-MM-DD");
+export const moveCalendarMonth = (month: Date, amount: number): Date =>
+ dayjs(month).startOf("month").add(amount, "month").toDate();
+
const matchesReleaseType = (event: CalendarEvent, releaseTypes: readonly string[]) =>
event.metadata?.type !== "radarr" || releaseTypes.includes(event.metadata.releaseType);
diff --git a/packages/widgets/src/calendar/calendar.spec.ts b/packages/widgets/src/calendar/calendar.spec.ts
index 84ba92b86..d42d6f151 100644
--- a/packages/widgets/src/calendar/calendar.spec.ts
+++ b/packages/widgets/src/calendar/calendar.spec.ts
@@ -2,7 +2,7 @@ import { describe, expect, test } from "vitest";
import type { CalendarEvent } from "@homarr/integrations/types";
-import { getCalendarAgendaEvents, groupEventsByDate, splitEvents } from "./calendar-events";
+import { getCalendarAgendaEvents, groupEventsByDate, moveCalendarMonth, splitEvents } from "./calendar-events";
describe("splitEvents should split multi-day events into multiple single-day events", () => {
test("2 day all-day event should be split up into two all-day events", () => {
@@ -92,6 +92,13 @@ describe("getCalendarAgendaEvents", () => {
});
});
+describe("moveCalendarMonth", () => {
+ test("uses the first day so short months do not skip", () => {
+ expect(moveCalendarMonth(new Date(2025, 0, 31), 1)).toEqual(new Date(2025, 1, 1));
+ expect(moveCalendarMonth(new Date(2025, 2, 31), -1)).toEqual(new Date(2025, 1, 1));
+ });
+});
+
const createEvent = (startDate: Date, endDate: Date | null = null): CalendarEvent => ({
title: "Test",
subTitle: null,
diff --git a/packages/widgets/src/calendar/component.tsx b/packages/widgets/src/calendar/component.tsx
index d1cc45045..27190ba6d 100644
--- a/packages/widgets/src/calendar/component.tsx
+++ b/packages/widgets/src/calendar/component.tsx
@@ -1,31 +1,64 @@
"use client";
import { useMemo, useState } from "react";
-import { useParams } from "next/navigation";
-import { Box, Group, Stack, Text, useMantineTheme } from "@mantine/core";
+import { ActionIcon, Box, Center, Group, Loader, Stack, Text, Tooltip, useMantineTheme } from "@mantine/core";
import { Calendar } from "@mantine/dates";
import { useElementSize } from "@mantine/hooks";
+import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
+import { getQueryKey } from "@trpc/react-query";
import dayjs from "dayjs";
import { clientApi } from "@homarr/api/client";
import { useRequiredBoard } from "@homarr/boards/context";
-import type { CalendarEvent } from "@homarr/integrations/types";
import { useSettings } from "@homarr/settings";
+import { useCurrentIntlLocale, useI18n, useScopedI18n } from "@homarr/translation/client";
+import actionTargetClasses from "../common/action-target.module.css";
import type { WidgetComponentProps } from "../definition";
-import { setWidgetRuntimeQueries } from "../definition";
+import { getUsableWidgetQueryData } from "../common/query-state";
+import { WidgetQueryErrorIndicator } from "../common/query-state-indicator";
+import { useWidgetRuntimeQueries } from "../runtime-hooks";
import { IntegrationErrorIndicator } from "../common/integration-error-indicator";
import { CalendarDay } from "./calender-day";
-import { getCalendarAgendaEvents, groupEventsByDate, splitEvents, toCalendarDateKey } from "./calendar-events";
+import {
+ getCalendarAgendaEvents,
+ groupEventsByDate,
+ moveCalendarMonth,
+ splitEvents,
+ toCalendarDateKey,
+} from "./calendar-events";
+import type { CalendarEventWithSource } from "./calendar-event-list";
import { CalendarEventList } from "./calendar-event-list";
import classes from "./component.module.css";
export default function CalendarWidget(props: WidgetComponentProps<"calendar">) {
const [month, setMonth] = useState(() => new Date());
+ const runtimeInput = {
+ integrationIds: props.integrationIds,
+ month: month.getMonth(),
+ year: month.getFullYear(),
+ releaseType: props.options.releaseType,
+ showUnmonitored: props.options.showUnmonitored,
+ };
+ useWidgetRuntimeQueries(
+ props.widgetRuntimeRef,
+ props.integrationIds.length > 0
+ ? [getQueryKey(clientApi.widget.calendar.findAllEvents, runtimeInput, "query")]
+ : [],
+ );
if (props.integrationIds.length === 0) {
- setWidgetRuntimeQueries(props.widgetStateRef, []);
- return
- {failedIntegrations.length > 0 && (
+ {(failedIntegrations.length > 0 || Boolean(queryError)) && (
)}
-
- {new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).format(month)} · {agendaEvents.length}
-
-
- )}
+
+ );
+};
+
+interface CalendarAgendaProps {
+ events: CalendarEventWithSource[];
+ failedIntegrations: CalendarBaseProps["failedIntegrations"];
+ isPending: boolean;
+ queryError: unknown;
+ queryErrorLabel: string;
+ isEditMode: boolean;
+ locale: string;
+ month: Date;
+ setMonth: (date: Date) => void;
+}
+
+const CalendarAgenda = ({
+ events,
+ failedIntegrations,
+ isPending,
+ queryError,
+ queryErrorLabel,
+ isEditMode,
+ locale,
+ month,
+ setMonth,
+}: CalendarAgendaProps) => {
+ const t = useScopedI18n("widget.calendar.advanced");
+ const monthLabel = new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).format(month);
+
+ return (
+
+
+
+
+ setMonth(moveCalendarMonth(month, -1))}
+ >
+
+
+
+
+ {monthLabel}
+
+
+ {isPending ? t("loading") : t("eventCount", { count: events.length })}
+
+
+
+ setMonth(moveCalendarMonth(month, 1))}
+ >
+
+
+
+
+
+
+
+
+ {isPending ? (
+
+
+ ) : events.length > 0 ? (
+
+
+ {t("noEvents")}
+
+
+ )}
+
);
};
diff --git a/packages/widgets/src/coolify/component.tsx b/packages/widgets/src/coolify/component.tsx
index 0e0a5c801..6d3f84828 100644
--- a/packages/widgets/src/coolify/component.tsx
+++ b/packages/widgets/src/coolify/component.tsx
@@ -14,6 +14,7 @@ export default function CoolifyWidget({
options,
integrationIds,
width,
+ height,
displayMode,
}: WidgetComponentProps<"coolify">) {
const t = useScopedI18n("widget.coolify");
@@ -31,6 +32,7 @@ export default function CoolifyWidget({
integrationIds={integrationIds}
options={options}
width={width}
+ height={height}
isAdvanced={displayMode === "advanced"}
/>
);
@@ -40,16 +42,31 @@ interface CoolifyContentProps {
integrationIds: string[];
options: WidgetComponentProps<"coolify">["options"];
width: number;
+ height: number;
isAdvanced: boolean;
}
-function CoolifyContent({ integrationIds, options, width, isAdvanced }: CoolifyContentProps) {
- const { data: instancesData = [] } = clientApi.widget.coolify.getInstancesInfo.useQuery({ integrationIds });
+function CoolifyContent({ integrationIds, options, width, height, isAdvanced }: CoolifyContentProps) {
+ const t = useScopedI18n("common");
+ const { data: instancesData = [], isPending } = clientApi.widget.coolify.getInstancesInfo.useQuery({
+ integrationIds,
+ });
- const isTiny = !isAdvanced && width < 256;
+ const isTiny = !isAdvanced && (width < 256 || height < 144);
+ const hideFooter = !isAdvanced && height < 112;
const [firstInstance] = instancesData;
const widgetKey = createWidgetKey(integrationIds);
+ if (isPending) {
+ return (
+
+
+ {t("action.loading")}
+
+
+ );
+ }
+
if (instancesData.length === 1 && firstInstance) {
return (
@@ -80,19 +80,42 @@ export function InstanceCard({ instance, options, isTiny, widgetKey, isAdvanced
wrap="nowrap"
style={{ borderBottom: "1px solid var(--mantine-color-dark-4)" }}
>
-
+
- {instance.integrationName}
-
+
+
+ {instance.integrationName}
+
+ {isAdvanced && (
+
+ {t("source.url", { url: displayUrl })}
+
+ )}
+
- {options.showServers && (
+ {isTiny && totalResources > 0 ? (
+
+
+ {healthyResources}/{totalResources}
+
+
+ ) : null}
+ {!isTiny && options.showServers && (
{onlineServers}/{instance.instanceInfo.servers.length}
)}
- {options.showApplications && (
+ {!isTiny && options.showApplications && (
)}
- {options.showServices && (
+ {!isTiny && options.showServices && (
setShowIp((prev) => !prev)}
/>
@@ -134,18 +158,29 @@ export function InstanceCard({ instance, options, isTiny, widgetKey, isAdvanced
-
- v{instance.instanceInfo.version}
-
-
- {t("footer.updated", { when: relativeTime })}
-
-
+ {!hideFooter && (
+
+
+ v{instance.instanceInfo.version}
+
+
+ {t("footer.updated", { when: relativeTime })}
+
+
+ )}
);
}
diff --git a/packages/widgets/src/coolify/resource-row.tsx b/packages/widgets/src/coolify/resource-row.tsx
index 9f6cfe1ae..4aaa4b625 100644
--- a/packages/widgets/src/coolify/resource-row.tsx
+++ b/packages/widgets/src/coolify/resource-row.tsx
@@ -1,7 +1,7 @@
"use client";
import { ActionIcon, Anchor, Group, Indicator, Stack, Text } from "@mantine/core";
-import { IconExternalLink, IconFileText, IconLink } from "@tabler/icons-react";
+import { IconFileText, IconLink } from "@tabler/icons-react";
import { cleanFqdn, getResourceTimestamp, getStatusColor, parseStatus } from "./coolify-utils";
@@ -39,7 +39,14 @@ export function ResourceRow({ item, baseUrl, isTiny, resourceType }: ResourceRow
+
{item.name}
) : (
@@ -50,24 +57,39 @@ export function ResourceRow({ item, baseUrl, isTiny, resourceType }: ResourceRow
{cleanFqdn(item.fqdn) && (
-
+
)}
- {resourceUrl && (
-
-
- )}
- {logsUrl && (
-
+ {!isTiny && logsUrl && (
+
)}
-
- {item.projectName ?? "-"} / {item.environmentName ?? "-"}
-
- {getResourceTimestamp(item, resourceType) && (
+ {!isTiny && (
+
+ {item.projectName ?? "-"} / {item.environmentName ?? "-"}
+
+ )}
+ {!isTiny && getResourceTimestamp(item, resourceType) && (
{getResourceTimestamp(item, resourceType)}
diff --git a/packages/widgets/src/coolify/servers-section.tsx b/packages/widgets/src/coolify/servers-section.tsx
index 543df1c67..55f2ad5c1 100644
--- a/packages/widgets/src/coolify/servers-section.tsx
+++ b/packages/widgets/src/coolify/servers-section.tsx
@@ -1,7 +1,7 @@
"use client";
import { Accordion, ActionIcon, Anchor, Badge, Group, Indicator, Stack, Text } from "@mantine/core";
-import { IconExternalLink, IconEye, IconEyeOff, IconServer } from "@tabler/icons-react";
+import { IconEye, IconEyeOff, IconServer } from "@tabler/icons-react";
import type { CoolifyServer } from "@homarr/integrations/types";
import { useScopedI18n } from "@homarr/translation/client";
@@ -40,6 +40,7 @@ export function ServersSection({
+
{server.name}
{isBuildServer ? (
@@ -110,9 +118,6 @@ function ServerRow({ server, counts, baseUrl, isTiny, showIp }: ServerRowProps)
)}
-
-
{showIp ? server.ip : "***.***.***.***"}
diff --git a/packages/widgets/src/coolify/single-instance-layout.tsx b/packages/widgets/src/coolify/single-instance-layout.tsx
index 2360f8f59..d06d7e566 100644
--- a/packages/widgets/src/coolify/single-instance-layout.tsx
+++ b/packages/widgets/src/coolify/single-instance-layout.tsx
@@ -20,9 +20,17 @@ interface SingleInstanceLayoutProps {
isTiny: boolean;
widgetKey: string;
isAdvanced: boolean;
+ hideFooter: boolean;
}
-export function SingleInstanceLayout({ instance, options, isTiny, widgetKey, isAdvanced }: SingleInstanceLayoutProps) {
+export function SingleInstanceLayout({
+ instance,
+ options,
+ isTiny,
+ widgetKey,
+ isAdvanced,
+ hideFooter,
+}: SingleInstanceLayoutProps) {
const t = useScopedI18n("widget.coolify");
const [showIp, setShowIp] = useLocalStorage({
key: `coolify-show-ip-${widgetKey}`,
@@ -74,7 +82,15 @@ export function SingleInstanceLayout({ instance, options, isTiny, widgetKey, isA
oolify
-
+
{displayUrl}
@@ -104,21 +120,23 @@ export function SingleInstanceLayout({ instance, options, isTiny, widgetKey, isA
)}
-
-
-
+
+
+ v{instance.instanceInfo.version}
+
+
- v{instance.instanceInfo.version}
+ {t("footer.updated", { when: relativeTime })}
-
- {t("footer.updated", { when: relativeTime })}
-
-
+ )}
);
diff --git a/packages/widgets/src/dns-hole/controls/component.tsx b/packages/widgets/src/dns-hole/controls/component.tsx
index e6072ff95..952cd7e04 100644
--- a/packages/widgets/src/dns-hole/controls/component.tsx
+++ b/packages/widgets/src/dns-hole/controls/component.tsx
@@ -53,7 +53,7 @@ export default function DnsHoleControlsWidget({
.map(({ id }) => id)
.filter((id) => integrationIds.includes(id));
- const { data: summaries = [] } = clientApi.widget.dnsHole.summary.useQuery({
+ const { data: summaries = [], isPending: isSummaryPending } = clientApi.widget.dnsHole.summary.useQuery({
integrationIds,
});
const utils = clientApi.useUtils();
@@ -129,6 +129,16 @@ export default function DnsHoleControlsWidget({
setBulkPending(false);
};
+ if (isSummaryPending) {
+ return (
+
+
+ {t("common.action.loading")}
+
+
+ );
+ }
+
return (
@@ -153,24 +171,6 @@ export default function IndexerManagerWidget({
))}
- {!hasSmallHeight && (
- }
- loading={isPending}
- disabled={isEditMode}
- loaderProps={{ type: "dots" }}
- onClick={() => {
- testAll({ integrationIds });
- }}
- >
- {t("widget.indexerManager.testAll")}
-
- )}
);
}
diff --git a/packages/widgets/src/media-missing/component.module.css b/packages/widgets/src/media-missing/component.module.css
index 5b1c9f568..9068a25b3 100644
--- a/packages/widgets/src/media-missing/component.module.css
+++ b/packages/widgets/src/media-missing/component.module.css
@@ -5,10 +5,10 @@
text-decoration: none;
color: inherit;
border: 1px solid var(--border-color);
+ background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-7));
transition:
border-color 120ms ease,
- transform 120ms ease,
- box-shadow 120ms ease;
+ background-color 120ms ease;
@mixin dark {
--border-color: var(--mantine-color-dark-4);
@@ -17,22 +17,16 @@
--border-color: var(--mantine-color-gray-3);
}
- &:hover {
+ &:hover,
+ &:focus-visible {
border-color: var(--mantine-primary-color-filled);
- transform: translateY(-1px);
- box-shadow: var(--mantine-shadow-sm);
+ background-color: var(--mantine-color-default-hover);
}
-}
-.backdrop {
- position: absolute;
- inset: 0;
- background-size: cover;
- background-position: center;
- filter: blur(20px) saturate(1.2);
- transform: scale(1.3);
- opacity: 0.16;
- pointer-events: none;
+ &:focus-visible {
+ outline: 2px solid var(--mantine-primary-color-filled);
+ outline-offset: -2px;
+ }
}
.content {
@@ -47,3 +41,9 @@
object-fit: cover;
box-shadow: var(--mantine-shadow-sm);
}
+
+@media (prefers-reduced-motion: reduce) {
+ .card {
+ transition: none;
+ }
+}
diff --git a/packages/widgets/src/media-missing/component.tsx b/packages/widgets/src/media-missing/component.tsx
index 3fc2f8684..1df41a849 100644
--- a/packages/widgets/src/media-missing/component.tsx
+++ b/packages/widgets/src/media-missing/component.tsx
@@ -294,9 +294,6 @@ const CardShell = ({
p="xs"
h={CARD_HEIGHT[density]}
>
- {item.imageUrl && (
-
- )}
{!isAdvanced && index !== 0 && options.layout === "poster" &&
))}
@@ -60,25 +62,30 @@ interface ItemProps {
item: RouterOutputs["widget"]["mediaRelease"]["getMediaReleases"][number];
options: WidgetComponentProps<"mediaReleases">["options"];
isAdvanced: boolean;
+ width: number;
+ height: number;
}
-const formatReleaseDate = (value: unknown, locale: string) => {
+const formatReleaseDate = (value: unknown, locale: string, compact: boolean) => {
const date = toValidDate(value);
if (!date) return "—";
return Intl.DateTimeFormat(locale, {
- month: "2-digit",
+ month: compact ? "short" : "2-digit",
year: "numeric",
day: "2-digit",
- hour: "2-digit",
- minute: "2-digit",
- hour12: false,
+ ...(compact ? {} : { hour: "2-digit", minute: "2-digit", hour12: false }),
}).format(date);
};
-const Item = ({ item, options, isAdvanced }: ItemProps) => {
+const Item = ({ item, options, isAdvanced, width, height }: ItemProps) => {
const locale = useCurrentLocale();
const t = useI18n();
const length = formatLength(item.length, item.type, t);
+ const isCompact = !isAdvanced && (width < 340 || height < 180);
+ const isTiny = !isAdvanced && (width < 220 || height < 105);
+ const showPoster = (isAdvanced || options.layout === "poster") && !isTiny;
+ const showExtendedMetadata = isAdvanced || (!isCompact && width >= 360);
+ const showSide = isAdvanced || (!isTiny && (options.showType || options.showSource));
return (
{
}
>
{
}}
/>
)}
-
-
- {(isAdvanced || options.layout === "poster") && (
-
+
+ {showPoster && (
+
+
-
+
{item.title}
- {item.subtitle !== undefined && (
-
+ {item.subtitle !== undefined && !isTiny && (
+
{item.subtitle}
)}
-
-
+
- {item.tags.length > 0 && (
+ {item.tags.length > 0 && (isAdvanced || !isCompact) && (
- {(isAdvanced || options.showType || options.showSource) && (
+ {showSide && (
{(isAdvanced || options.showType) && (
(
const Info = ({ icon: Icon, label }: IconAndLabelProps) => {
return (
-
- {Icon &&
+
+ {Icon &&
{label}
diff --git a/packages/widgets/src/media-requests/list/component.module.css b/packages/widgets/src/media-requests/list/component.module.css
new file mode 100644
index 000000000..6dc16de32
--- /dev/null
+++ b/packages/widgets/src/media-requests/list/component.module.css
@@ -0,0 +1,45 @@
+.card {
+ min-width: 0;
+ background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-7));
+ transition:
+ background-color 120ms ease,
+ border-color 120ms ease;
+
+ &:hover,
+ &:focus-within {
+ border-color: var(--mantine-primary-color-filled);
+ background-color: var(--mantine-color-default-hover);
+ }
+}
+
+.pendingActions {
+ flex-shrink: 0;
+ opacity: 0;
+ transition: opacity 120ms ease;
+}
+
+.card:hover .pendingActions,
+.card:focus-within .pendingActions,
+.pendingActionsVisible {
+ opacity: 1;
+}
+
+@media (hover: none) {
+ .pendingActions {
+ opacity: 1;
+ }
+}
+
+@media (pointer: coarse) {
+ .pendingActions button {
+ min-width: 36px;
+ min-height: 36px;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .card,
+ .pendingActions {
+ transition: none;
+ }
+}
diff --git a/packages/widgets/src/media-requests/list/component.tsx b/packages/widgets/src/media-requests/list/component.tsx
index 7017d3495..79d0184eb 100644
--- a/packages/widgets/src/media-requests/list/component.tsx
+++ b/packages/widgets/src/media-requests/list/component.tsx
@@ -17,7 +17,8 @@ import { WidgetEmptyState } from "../../common/empty-state";
import { IntegrationErrorIndicator } from "../../common/integration-error-indicator";
import type { WidgetComponentProps } from "../../definition";
import { NoIntegrationDataError } from "../../errors/no-data-integration";
-import classes from "../search-button.module.css";
+import classes from "./component.module.css";
+import searchClasses from "../search-button.module.css";
export default function MediaServerWidget({
integrationIds,
@@ -46,7 +47,7 @@ export default function MediaServerWidget({
if (mediaRequests.length === 0 && failedIntegrations.length === 0) throw new NoIntegrationDataError();
return (
-
+
{!isEditMode &&
@@ -64,6 +65,7 @@ export default function MediaServerWidget({
key={`${mediaRequest.integrationId}-${mediaRequest.id}`}
request={mediaRequest}
isTiny={displayMode !== "advanced" && (width <= 256 || height < 96)}
+ isDense={displayMode !== "advanced" && (width < 340 || height < 150)}
isAdvanced={displayMode === "advanced"}
canInteract={interactIntegrationIds.has(mediaRequest.integrationId)}
options={options}
@@ -81,7 +83,7 @@ const MediaRequestSearchButton = ({ integrationIds }: { integrationIds: string[]
return (
["options"];
}
-const MediaRequestCard = ({ request, isTiny, isAdvanced, canInteract, options }: MediaRequestCardProps) => {
+const MediaRequestCard = ({ request, isTiny, isDense, isAdvanced, canInteract, options }: MediaRequestCardProps) => {
const board = useRequiredBoard();
const t = useScopedI18n("widget.mediaRequests-requestList");
return (
-
-
+
{!isTiny && (
-
-
+
+
+
+ {request.name || "unknown"}
+
+ {request.status === "pending" ? (
+
+
+
{toValidDate(request.airDate)?.getFullYear() ?? t("toBeDetermined")}
@@ -164,46 +191,26 @@ const MediaRequestCard = ({ request, isTiny, isAdvanced, canInteract, options }:
)}
-
-
- {(request.requestedBy?.displayName ?? "") || "unknown"}
-
-
-
-
-
- {request.name || "unknown"}
-
- {request.status === "pending" ? (
-
+
+ {(request.requestedBy?.displayName ?? "") || "unknown"}
+
+
)}
@@ -217,9 +224,10 @@ interface DecisionButtonsProps {
requestId: number;
integrationId: string;
canInteract: boolean;
+ alwaysVisible: boolean;
}
-const DecisionButtons = ({ requestId, integrationId, canInteract }: DecisionButtonsProps) => {
+const DecisionButtons = ({ requestId, integrationId, canInteract, alwaysVisible }: DecisionButtonsProps) => {
const utils = clientApi.useUtils();
const {
mutate: mutateRequestAnswer,
@@ -239,13 +247,18 @@ const DecisionButtons = ({ requestId, integrationId, canInteract }: DecisionButt
};
return (
-
+
{
@@ -260,7 +273,7 @@ const DecisionButtons = ({ requestId, integrationId, canInteract }: DecisionButt
className="mediaRequests-list-item-pending-button-decline"
variant="light"
color="red"
- size="xs"
+ size="sm"
disabled={!canInteract || isPending}
aria-label={t("pending.decline")}
onClick={() => {
diff --git a/packages/widgets/src/media-requests/stats/component.module.css b/packages/widgets/src/media-requests/stats/component.module.css
index 1ab18a656..913c196c4 100644
--- a/packages/widgets/src/media-requests/stats/component.module.css
+++ b/packages/widgets/src/media-requests/stats/component.module.css
@@ -5,3 +5,25 @@
[data-mantine-color-scheme="dark"] .card {
background-color: var(--mantine-color-dark-7);
}
+
+.userCard {
+ color: inherit;
+ text-decoration: none;
+ transition: background-color 120ms ease;
+
+ &:hover,
+ &:focus-visible {
+ background-color: var(--mantine-color-default-hover);
+ }
+
+ &:focus-visible {
+ outline: 2px solid var(--mantine-primary-color-filled);
+ outline-offset: -2px;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .userCard {
+ transition: none;
+ }
+}
diff --git a/packages/widgets/src/media-requests/stats/component.tsx b/packages/widgets/src/media-requests/stats/component.tsx
index 9ced6ceb2..be1a69e54 100644
--- a/packages/widgets/src/media-requests/stats/component.tsx
+++ b/packages/widgets/src/media-requests/stats/component.tsx
@@ -97,6 +97,7 @@ export default function MediaServerWidget({
] satisfies { name: keyof RequestStats; icon: Icon; number: number }[];
const isTiny = displayMode !== "advanced" && (width < 256 || height < 180);
+ const showSectionTitles = displayMode === "advanced" || height >= 180;
const visibleStats = displayMode === "advanced" ? data : data.slice(0, height < 120 ? 4 : 8);
const visibleUsers = requestStats.users.slice(
0,
@@ -119,9 +120,11 @@ export default function MediaServerWidget({
style={{ pointerEvents: isEditMode ? "none" : undefined }}
>
-
- {t("titles.stats.main")}
-
+ {showSectionTitles && (
+
+ {t("titles.stats.main")}
+
+ )}
{visibleStats.map((stat) => (
-
- {t("titles.users.main")} ({t("titles.users.requests")})
-
+ {showSectionTitles && (
+
+ {t("titles.users.main")} ({t("titles.users.requests")})
+
+ )}
{visibleUsers.map((user) => (
@@ -159,6 +164,7 @@ export default function MediaServerWidget({
"mediaRequests-stats-users-user-wrapper",
`mediaRequests-stats-users-user-${user.id}`,
classes.card,
+ classes.userCard,
)}
key={`${user.integration.id}:${user.id}`}
p="xs"
@@ -171,7 +177,7 @@ export default function MediaServerWidget({
gap="sm"
justify="space-between"
>
-
+
-
+
{user.displayName}
diff --git a/packages/widgets/src/media-server/component.module.css b/packages/widgets/src/media-server/component.module.css
new file mode 100644
index 000000000..3987924f4
--- /dev/null
+++ b/packages/widgets/src/media-server/component.module.css
@@ -0,0 +1,13 @@
+.sessionRow {
+ cursor: pointer;
+
+ &:hover,
+ &:focus-visible {
+ background-color: var(--mantine-color-default-hover);
+ }
+
+ &:focus-visible {
+ outline: 2px solid var(--mantine-primary-color-filled);
+ outline-offset: -2px;
+ }
+}
diff --git a/packages/widgets/src/media-transcoding/component.tsx b/packages/widgets/src/media-transcoding/component.tsx
index 926ef992a..19bd5e66a 100644
--- a/packages/widgets/src/media-transcoding/component.tsx
+++ b/packages/widgets/src/media-transcoding/component.tsx
@@ -13,6 +13,7 @@ import {
SimpleGrid,
Stack,
Text,
+ VisuallyHidden,
} from "@mantine/core";
import { IconClipboardList, IconCpu2, IconReportAnalytics } from "@tabler/icons-react";
@@ -87,7 +88,7 @@ export default function MediaTranscodingWidget({
if (!transcodingData) return
{t(`tab.${value}`)}
+ ) : (
{t(`tab.${value}`)}
diff --git a/packages/widgets/src/media-transcoding/health-check-status.tsx b/packages/widgets/src/media-transcoding/health-check-status.tsx
index 24a8100d3..9f10ddf27 100644
--- a/packages/widgets/src/media-transcoding/health-check-status.tsx
+++ b/packages/widgets/src/media-transcoding/health-check-status.tsx
@@ -1,5 +1,5 @@
import type { MantineColor } from "@mantine/core";
-import { Divider, Group, HoverCard, Indicator, RingProgress, Stack, Text } from "@mantine/core";
+import { ActionIcon, Divider, Group, Indicator, Popover, RingProgress, Stack, Text } from "@mantine/core";
import { useColorScheme } from "@mantine/hooks";
import { IconHeartbeat } from "@tabler/icons-react";
@@ -21,13 +21,15 @@ export function HealthCheckStatus(props: HealthCheckStatusProps) {
: "green";
return (
-
-
-
-
-
-
+
+
+
+
+
+
+
-
-
+
+
);
}
diff --git a/packages/widgets/src/minecraft/server-status/component.tsx b/packages/widgets/src/minecraft/server-status/component.tsx
index 2f33ebb19..303b8f614 100644
--- a/packages/widgets/src/minecraft/server-status/component.tsx
+++ b/packages/widgets/src/minecraft/server-status/component.tsx
@@ -1,6 +1,6 @@
"use client";
-import { Badge, Box, Flex, Group, Progress, Stack, Text, Tooltip } from "@mantine/core";
+import { Badge, Box, Flex, Group, Progress, Stack, Text, Tooltip, VisuallyHidden } from "@mantine/core";
import { IconCube, IconUsersGroup } from "@tabler/icons-react";
import { clientApi } from "@homarr/api/client";
@@ -16,14 +16,25 @@ export default function MinecraftServerStatusWidget({
height,
displayMode,
}: WidgetComponentProps<"minecraftServerStatus">) {
- const { data: result } = clientApi.widget.minecraft.getServerStatus.useQuery(options);
+ const { data: result, isPending } = clientApi.widget.minecraft.getServerStatus.useQuery(options);
const t = useI18n();
+ if (isPending) {
+ return (
+
+
+ {t("common.action.loading")}
+
+
+ );
+ }
if (!result) return
+
-
+
+ {data.online
+ ? t("widget.minecraftServerStatus.status.online")
+ : t("widget.minecraftServerStatus.status.offline")}
+
{title}
@@ -62,6 +78,7 @@ export default function MinecraftServerStatusWidget({
{data.online && (
<>
{!options.isBedrockServer &&
+ showServerIcon &&
(data.icon ? (
![]()
+
{formatNumber(data.players.online, 1)} / {formatNumber(data.players.max, 1)}
diff --git a/packages/widgets/src/network-controller/network-status/component.tsx b/packages/widgets/src/network-controller/network-status/component.tsx
index 6bfa59407..d931df9fb 100644
--- a/packages/widgets/src/network-controller/network-status/component.tsx
+++ b/packages/widgets/src/network-controller/network-status/component.tsx
@@ -1,13 +1,14 @@
"use client";
import { useMemo } from "react";
-import { Box, Card, SimpleGrid } from "@mantine/core";
+import { Box, Card, Center, SimpleGrid, Text } from "@mantine/core";
import dayjs from "dayjs";
import duration from "dayjs/plugin/duration";
import objectSupport from "dayjs/plugin/objectSupport";
import relativeTime from "dayjs/plugin/relativeTime";
import { clientApi } from "@homarr/api/client";
+import { useI18n } from "@homarr/translation/client";
import type { WidgetComponentProps } from "../../definition";
import { WifiVariant } from "./variants/wifi-variant";
@@ -22,10 +23,12 @@ export default function NetworkControllerNetworkStatusWidget({
integrationIds,
displayMode,
width,
+ height,
}: WidgetComponentProps<"networkControllerStatus">) {
- const { data: summaries = [] } = clientApi.widget.networkController.summary.useQuery({
+ const { data: summaries = [], isPending } = clientApi.widget.networkController.summary.useQuery({
integrationIds,
});
+ const t = useI18n();
const data = useMemo(() => summaries.flatMap(({ summary }) => summary), [summaries]);
const isAdvanced = displayMode === "advanced";
@@ -33,18 +36,39 @@ export default function NetworkControllerNetworkStatusWidget({
const countWifiUsers = data.reduce((sum, summary) => sum + summary.wifi.users, 0);
const countLanGuests = data.reduce((sum, summary) => sum + summary.lan.guests, 0);
const countLanUsers = data.reduce((sum, summary) => sum + summary.lan.users, 0);
+ const useHorizontalStats = !isAdvanced && height < 150 && width >= 200;
+
+ if (isPending || data.length === 0) {
+ return (
+
+
+ {isPending ? t("common.action.loading") : t("widget.networkControllerStatus.error.integrationsDisconnected")}
+
+
+ );
+ }
return (
-
+
= 560 ? 2 : 1} h="100%" spacing="sm">
{(isAdvanced || options.content === "wifi") && (
-
)}
{(isAdvanced || options.content === "wired") && (
-
)}
diff --git a/packages/widgets/src/network-controller/network-status/variants/wifi-variant.tsx b/packages/widgets/src/network-controller/network-status/variants/wifi-variant.tsx
index 9560c984a..ebcfbe2d9 100644
--- a/packages/widgets/src/network-controller/network-status/variants/wifi-variant.tsx
+++ b/packages/widgets/src/network-controller/network-status/variants/wifi-variant.tsx
@@ -1,4 +1,4 @@
-import { Group, Stack, Text } from "@mantine/core";
+import { Group, SimpleGrid, Text } from "@mantine/core";
import { IconWifi } from "@tabler/icons-react";
import { useScopedI18n } from "@homarr/translation/client";
@@ -9,10 +9,12 @@ export const WifiVariant = ({
countGuests,
countUsers,
compact = false,
+ horizontal = false,
}: {
countUsers: number;
countGuests: number;
compact?: boolean;
+ horizontal?: boolean;
}) => {
const t = useScopedI18n("widget.networkControllerStatus.card");
return (
@@ -23,10 +25,10 @@ export const WifiVariant = ({
{t("variants.wifi.name")}
-
+
+
);
};
diff --git a/packages/widgets/src/network-controller/network-status/variants/wired-variant.tsx b/packages/widgets/src/network-controller/network-status/variants/wired-variant.tsx
index 46ca76a83..ff19d41e2 100644
--- a/packages/widgets/src/network-controller/network-status/variants/wired-variant.tsx
+++ b/packages/widgets/src/network-controller/network-status/variants/wired-variant.tsx
@@ -1,4 +1,4 @@
-import { Group, Stack, Text } from "@mantine/core";
+import { Group, SimpleGrid, Text } from "@mantine/core";
import { IconNetwork } from "@tabler/icons-react";
import { useScopedI18n } from "@homarr/translation/client";
@@ -9,10 +9,12 @@ export const WiredVariant = ({
countGuests,
countUsers,
compact = false,
+ horizontal = false,
}: {
countUsers: number;
countGuests: number;
compact?: boolean;
+ horizontal?: boolean;
}) => {
const t = useScopedI18n("widget.networkControllerStatus.card");
return (
@@ -23,10 +25,10 @@ export const WiredVariant = ({
{t("variants.wired.name")}
-
+
+
);
};
diff --git a/packages/widgets/src/network-controller/summary/component.tsx b/packages/widgets/src/network-controller/summary/component.tsx
index 86075dc0b..2d123ab5d 100644
--- a/packages/widgets/src/network-controller/summary/component.tsx
+++ b/packages/widgets/src/network-controller/summary/component.tsx
@@ -1,6 +1,6 @@
"use client";
-import { Badge, Card, Group, List, ScrollArea, SimpleGrid, Stack, Text, useMantineTheme } from "@mantine/core";
+import { Badge, Card, Center, Group, List, ScrollArea, SimpleGrid, Stack, Text, useMantineTheme } from "@mantine/core";
import { IconCircleCheckFilled, IconCircleXFilled } from "@tabler/icons-react";
import dayjs from "dayjs";
import duration from "dayjs/plugin/duration";
@@ -19,19 +19,31 @@ dayjs.extend(duration);
export default function NetworkControllerSummaryWidget({
integrationIds,
width,
+ height,
displayMode,
}: WidgetComponentProps<"networkControllerSummary">) {
- const { data: summaries = [] } = clientApi.widget.networkController.summary.useQuery({
+ const { data: summaries = [], isPending } = clientApi.widget.networkController.summary.useQuery({
integrationIds,
});
const t = useI18n();
const isAdvanced = displayMode === "advanced";
+ const isDense = !isAdvanced && height < 160;
const columns = isAdvanced && width >= 720 ? 2 : 1;
+ if (isPending || summaries.length === 0) {
+ return (
+
+
+ {isPending ? t("common.action.loading") : t("widget.networkControllerSummary.error.integrationsDisconnected")}
+
+
+ );
+ }
+
return (
-
+
{summaries.map(({ integration, summary }) => (
1 || isAdvanced}>
@@ -46,9 +58,9 @@ export default function NetworkControllerSummaryWidget({
)}
-
);
}
-const InfoDisplay = ({ date, source }: { date: Date; source?: string }) => {
+const InfoDisplay = ({ date, source, dense }: { date: Date; source?: string; dense: boolean }) => {
const timeAgo = useTimeAgo(date, 30000); // update every 30sec
return (
-
+
{timeAgo}
{source && • }
diff --git a/packages/widgets/src/paperless-ngx/component.tsx b/packages/widgets/src/paperless-ngx/component.tsx
index 4744c1bec..e0d08e49e 100644
--- a/packages/widgets/src/paperless-ngx/component.tsx
+++ b/packages/widgets/src/paperless-ngx/component.tsx
@@ -2,7 +2,7 @@
import { Fragment } from "react";
import type { CSSProperties } from "react";
-import { RingProgress, Text } from "@mantine/core";
+import { Center, RingProgress, Text } from "@mantine/core";
import { IconFileDescription, IconFileText, IconInbox, IconTag, IconUsers } from "@tabler/icons-react";
import { clientApi } from "@homarr/api/client";
@@ -78,10 +78,20 @@ export default function PaperlessNgxWidget({
displayMode = "compact",
}: WidgetComponentProps<"paperlessNgx">) {
const t = useScopedI18n("widget.paperlessNgx");
- const { data: stats } = clientApi.widget.paperlessNgx.getStats.useQuery({
+ const tCommon = useScopedI18n("common");
+ const { data: stats, isPending } = clientApi.widget.paperlessNgx.getStats.useQuery({
integrationId: integrationIds[0] ?? "",
});
+ if (isPending) {
+ return (
+
+
+ {tCommon("action.loading")}
+
+
+ );
+ }
if (!stats) return toggleExpandedDisplay(repository)}
+ aria-expanded={isActive}
>
-
+
- {!options.showOnlyIcon && (
-
- {/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing */}
- {repository.name || repository.identifier}
-
- )}
+
+ {!options.showOnlyIcon && (
+
+ {/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing */}
+ {repository.name || repository.identifier}
+
+ )}
-
+
+ {hasError ? t("error.label") : (repository.latestRelease ?? t("not-found"))}
+
+
+
+
+
- {hasError ? t("error.label") : (repository.latestRelease ?? t("not-found"))}
+ {repository.latestReleaseAt &&
+ !hasError &&
+ formatter.relativeTime(repository.latestReleaseAt, {
+ now,
+ style: "long",
+ })}
-
-
-
-
-
- {repository.latestReleaseAt &&
- !hasError &&
- formatter.relativeTime(repository.latestReleaseAt, {
- now,
- style: "long",
- })}
-
- {hasError ? (
-
-
+
{(options.showDetails || isAdvanced) && (
toggleExpandedDisplay(repository)} />
- toggleExpandedDisplay(repository)}
>
-
-
-
+
+
-
-
-
-
-
-
-
-
-
-
-
- {!repository.starsCount
- ? "-"
- : formatter.number(repository.starsCount, {
- notation: "compact",
- maximumFractionDigits: 1,
- })}
-
-
-
+
-
-
+
+
+
- {!repository.forksCount
- ? "-"
- : formatter.number(repository.forksCount, {
- notation: "compact",
- maximumFractionDigits: 1,
- })}
-
-
-
-
-
-
+
+
+
-
- {!repository.openIssues
- ? "-"
- : formatter.number(repository.openIssues, {
- notation: "compact",
- maximumFractionDigits: 1,
- })}
-
-
-
+
+ {!repository.starsCount
+ ? "-"
+ : formatter.number(repository.starsCount, {
+ notation: "compact",
+ maximumFractionDigits: 1,
+ })}
+
+
+
+
+
+
+
+ {!repository.forksCount
+ ? "-"
+ : formatter.number(repository.forksCount, {
+ notation: "compact",
+ maximumFractionDigits: 1,
+ })}
+
+
+
+
+
+
+
+ {!repository.openIssues
+ ? "-"
+ : formatter.number(repository.openIssues, {
+ notation: "compact",
+ maximumFractionDigits: 1,
+ })}
+
+
+
+
-
+
);
};
diff --git a/packages/widgets/src/rssFeed/component.module.scss b/packages/widgets/src/rssFeed/component.module.scss
index cd68be962..7d68fd7de 100644
--- a/packages/widgets/src/rssFeed/component.module.scss
+++ b/packages/widgets/src/rssFeed/component.module.scss
@@ -1,11 +1,26 @@
-.backgroundImage {
- position: absolute;
- width: 100%;
- height: 100%;
- filter: blur(5px);
- transform: scaleX(-1.05) scaleZ(-1.05);
- opacity: 0.25;
- top: 0;
- left: 0;
- object-fit: cover;
+.entry {
+ min-width: 0;
+ color: inherit;
+ text-decoration: none;
+ transition: background-color 120ms ease;
+
+ &:hover,
+ &:focus-visible {
+ background-color: var(--mantine-color-default-hover);
+ }
+
+ &:focus-visible {
+ outline: 2px solid var(--mantine-primary-color-filled);
+ outline-offset: -2px;
+ }
+}
+
+.poster {
+ flex-shrink: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .entry {
+ transition: none;
+ }
}
diff --git a/packages/widgets/src/rssFeed/component.tsx b/packages/widgets/src/rssFeed/component.tsx
index 79a070420..0da7d7c70 100644
--- a/packages/widgets/src/rssFeed/component.tsx
+++ b/packages/widgets/src/rssFeed/component.tsx
@@ -33,7 +33,7 @@ const useLiveFeed = (input: RouterInputs["widget"]["rssFeed"]["getFeeds"]) => {
};
};
-export default function RssFeed({ options, width, displayMode }: WidgetComponentProps<"rssFeed">) {
+export default function RssFeed({ options, width, height, displayMode }: WidgetComponentProps<"rssFeed">) {
const {
entries: feedEntries,
failedFeedCount,
@@ -54,11 +54,13 @@ export default function RssFeed({ options, width, displayMode }: WidgetComponent
const languageDir = options.enableRtl ? "RTL" : "LTR";
const isAdvanced = displayMode === "advanced";
- const isNarrow = !isAdvanced && width < 128 * 3;
+ const isDense = !isAdvanced && (width < 420 || height < 180);
+ const isTiny = !isAdvanced && (width < 260 || height < 110);
const columns = isAdvanced && width >= 720 ? 2 : 1;
+ const descriptionLines = isAdvanced ? Math.max(options.textLinesClamp, 8) : isDense ? 1 : options.textLinesClamp;
return (
-
+
{warning && (
- {feedEntry.enclosure !== undefined && (
-
- {feedEntry.enclosure !== undefined && options.showPosterImage && !isNarrow && (
+
+ {feedEntry.enclosure !== undefined && options.showPosterImage && !isTiny && (
{feedEntry.title}
- {!options.hideDescription && feedEntry.description && (
-
+ {!options.hideDescription && feedEntry.description && !isTiny && (
+
{feedDescriptionToText(feedEntry.description)}
)}
-
- {displayMode === "advanced" && typeof entity?.attributes.friendly_name === "string"
- ? entity.attributes.friendly_name
- : options.displayName}
-
-
- {entity?.state ?? "—"}
+
+ {state}
{attribute}
+
+ {displayName}
+
{displayMode === "advanced" && entity && (
<>
@@ -131,7 +135,7 @@ export default function SmartHomeEntityStateWidget({
)}
{error && (
-
+
{t("widget.smartHome-entityState.error.toggleFailed")}
diff --git a/packages/widgets/src/smart-home/execute-automation/component.tsx b/packages/widgets/src/smart-home/execute-automation/component.tsx
index 5d57d2c62..98964991d 100644
--- a/packages/widgets/src/smart-home/execute-automation/component.tsx
+++ b/packages/widgets/src/smart-home/execute-automation/component.tsx
@@ -87,7 +87,7 @@ export default function SmartHomeTriggerAutomationWidget({
return (
-
+
{isPending
? t("widget.smartHome-executeAutomation.status.running")
: isShowSuccess
@@ -100,6 +100,7 @@ export default function SmartHomeTriggerAutomationWidget({
)}
-
-
+
+
+
+
{options.displayName}
{displayMode === "advanced" && (
diff --git a/packages/widgets/src/speedtest-tracker/component.tsx b/packages/widgets/src/speedtest-tracker/component.tsx
index 56fbfa07e..8c3c4350d 100644
--- a/packages/widgets/src/speedtest-tracker/component.tsx
+++ b/packages/widgets/src/speedtest-tracker/component.tsx
@@ -9,7 +9,7 @@ import { useScopedI18n } from "@homarr/translation/client";
import type { WidgetComponentProps } from "../definition";
import { WidgetEmptyState } from "../common/empty-state";
import { AveragesSection } from "./averages";
-import { combineSpeedtestDashboards } from "./helpers";
+import { combineSpeedtestDashboards, getCompactSections } from "./helpers";
import { LatestResultSection } from "./latest-result";
import { RecentResultsSection } from "./recent-results";
@@ -48,6 +48,11 @@ export default function SpeedtestTrackerWidget({
const averages = options.showStats && combined.stats && (
- {hasStatSection && (
+ {(compactSections.latest || compactSections.averages) && (
- {latest &&
)}
- {hasChart && (
+ {compactSections.chart && (
,
+): Record => {
+ const budget = height < 240 ? 1 : height < 360 ? 2 : 3;
+ const visible = new Set(
+ (["latest", "chart", "averages"] as const).filter((section) => available[section]).slice(0, budget),
+ );
+
+ return {
+ latest: visible.has("latest"),
+ chart: visible.has("chart"),
+ averages: visible.has("averages"),
+ };
+};
diff --git a/packages/widgets/src/speedtest-tracker/latest-result.tsx b/packages/widgets/src/speedtest-tracker/latest-result.tsx
index 20b792196..d2851aa43 100644
--- a/packages/widgets/src/speedtest-tracker/latest-result.tsx
+++ b/packages/widgets/src/speedtest-tracker/latest-result.tsx
@@ -26,7 +26,7 @@ export function LatestResultSection({ result, width = 500 }: { result: Speedtest
{t("latestResult")}
-
+
{timestamp}
diff --git a/packages/widgets/src/speedtest-tracker/section-label.tsx b/packages/widgets/src/speedtest-tracker/section-label.tsx
index 255e05113..ce7e306d2 100644
--- a/packages/widgets/src/speedtest-tracker/section-label.tsx
+++ b/packages/widgets/src/speedtest-tracker/section-label.tsx
@@ -3,7 +3,7 @@ import { Text } from "@mantine/core";
export function SectionLabel({ children }: { children: ReactNode }) {
return (
-
+
{children}
);
diff --git a/packages/widgets/src/speedtest-tracker/speed-stat-card.tsx b/packages/widgets/src/speedtest-tracker/speed-stat-card.tsx
index 0817d07f4..844093417 100644
--- a/packages/widgets/src/speedtest-tracker/speed-stat-card.tsx
+++ b/packages/widgets/src/speedtest-tracker/speed-stat-card.tsx
@@ -1,6 +1,6 @@
"use client";
-import { Card, Flex, Text } from "@mantine/core";
+import { Box, Flex, Text, Tooltip, VisuallyHidden } from "@mantine/core";
import { useElementSize } from "@mantine/hooks";
import { useRequiredBoard } from "@homarr/boards/context";
@@ -21,34 +21,37 @@ export function SpeedStatCard({ icon: Icon, color, value, label, compact = false
const hideLabel = height > 0 && height <= 38;
return (
-
-
+
-
-
- {value}
-
- {!hideLabel && (
-
- {label}
+
+
+
+ {value}
- )}
+ {!hideLabel && (
+
+ {label}
+
+ )}
+ {hideLabel && {label} }
+
-
-
+
+
);
}
diff --git a/packages/widgets/src/stocks/component.spec.ts b/packages/widgets/src/stocks/component.spec.ts
index 56ad94954..5f74928ef 100644
--- a/packages/widgets/src/stocks/component.spec.ts
+++ b/packages/widgets/src/stocks/component.spec.ts
@@ -1,6 +1,6 @@
import { describe, expect, it } from "vitest";
-import { getStockSummary } from "./component";
+import { getStockLayout, getStockSummary } from "./component";
describe("stock summary", () => {
it("returns no summary for an empty series", () => {
@@ -16,3 +16,38 @@ describe("stock summary", () => {
});
});
});
+
+describe("stock layout", () => {
+ it("keeps compact widgets focused on symbol and price", () => {
+ expect(getStockLayout(320, 100, false)).toMatchObject({
+ showName: false,
+ showChange: false,
+ showRange: false,
+ priceOrder: 2,
+ });
+ });
+
+ it("reveals secondary data only when both axes have room", () => {
+ expect(getStockLayout(320, 160, false)).toMatchObject({
+ showName: false,
+ showChange: true,
+ showRange: true,
+ });
+ expect(getStockLayout(320, 220, false)).toMatchObject({
+ showName: true,
+ showChange: true,
+ showRange: true,
+ graphHeight: "68%",
+ });
+ });
+
+ it("always exposes the complete advanced summary", () => {
+ expect(getStockLayout(120, 80, true)).toEqual({
+ showName: true,
+ showChange: true,
+ showRange: true,
+ graphHeight: "75%",
+ priceOrder: 1,
+ });
+ });
+});
diff --git a/packages/widgets/src/stocks/component.tsx b/packages/widgets/src/stocks/component.tsx
index aacd9c16c..4fee07497 100644
--- a/packages/widgets/src/stocks/component.tsx
+++ b/packages/widgets/src/stocks/component.tsx
@@ -30,6 +30,34 @@ export interface StockSummary {
graphValues: number[];
}
+export interface StockLayout {
+ showName: boolean;
+ showChange: boolean;
+ showRange: boolean;
+ graphHeight: "48%" | "68%" | "75%";
+ priceOrder: 1 | 2;
+}
+
+export function getStockLayout(width: number, height: number, isAdvanced: boolean): StockLayout {
+ if (isAdvanced) {
+ return {
+ showName: true,
+ showChange: true,
+ showRange: true,
+ graphHeight: "75%",
+ priceOrder: 1,
+ };
+ }
+
+ return {
+ showName: width >= 300 && height >= 190,
+ showChange: width >= 260 && height >= 130,
+ showRange: width >= 220 && height >= 130,
+ graphHeight: height >= 220 ? "68%" : "48%",
+ priceOrder: width >= 280 && height >= 120 ? 1 : 2,
+ };
+}
+
export function getStockSummary(priceHistory: number[], previousClose: number): StockSummary | null {
const currentPrice = priceHistory.at(-1);
if (currentPrice === undefined) return null;
@@ -57,6 +85,7 @@ export default function StockPriceWidget({ options, width, height, displayMode }
const stockValuesChangePercentage = summary.changePercentage === null ? null : round(summary.changePercentage);
const stockGraphValues = summary.graphValues;
const trendColor = stockValuesChange > 0 ? "green.7" : stockValuesChange < 0 ? "red.7" : "gray.6";
+ const layout = getStockLayout(width, height, displayMode === "advanced");
return (
@@ -64,7 +93,7 @@ export default function StockPriceWidget({ options, width, height, displayMode }
pos="absolute"
bottom={10}
w="100%"
- h={displayMode === "advanced" || height > 280 ? "75%" : "50%"}
+ h={layout.graphHeight}
data={stockGraphValues}
curveType="linear"
color={trendColor}
@@ -81,18 +110,18 @@ export default function StockPriceWidget({ options, width, height, displayMode }
)}
{data.symbol}
- {(displayMode === "advanced" || (width > 280 && height > 280)) && (
+ {layout.showName && (
{data.shortName}
)}
- 280 ? 1 : 2} fw={700}>
+ <Title pos="absolute" bottom={10} right={10} order={layout.priceOrder} fw={700}>
{new Intl.NumberFormat().format(round(summary.currentPrice))}
- {(displayMode === "advanced" || width > 280) && (
+ {layout.showChange && (
{new Intl.NumberFormat().format(stockValuesChange)}
{stockValuesChangePercentage === null
@@ -101,7 +130,7 @@ export default function StockPriceWidget({ options, width, height, displayMode }
)}
- {(displayMode === "advanced" || width > 280) && (
+ {layout.showRange && (
{t(`option.timeRange.option.${options.timeRange}.label`)}
diff --git a/packages/widgets/src/system-disks/component.tsx b/packages/widgets/src/system-disks/component.tsx
index 73a21fdb2..7977318c2 100644
--- a/packages/widgets/src/system-disks/component.tsx
+++ b/packages/widgets/src/system-disks/component.tsx
@@ -58,6 +58,7 @@ interface SystemDiskCardProps {
integrationName?: string;
secondaryText?: string;
isAdvanced: boolean;
+ showTemperature: boolean;
}
const SystemDiskCard = ({
@@ -70,6 +71,7 @@ const SystemDiskCard = ({
integrationName,
secondaryText,
isAdvanced,
+ showTemperature,
}: SystemDiskCardProps) => {
const board = useRequiredBoard();
const scheme = useMantineColorScheme();
@@ -95,11 +97,18 @@ const SystemDiskCard = ({
}, [displayText, healthy]);
const unhealthyLabel = t("widget.systemDisks.status.unhealthy");
+ const hasHiddenTemperature = temperature !== null && temperature !== undefined && !showTemperature;
+ const tooltipLabel = [
+ healthy ? displayText : `${displayText} (${unhealthyLabel})`,
+ hasHiddenTemperature ? `${temperature}°C` : null,
+ ]
+ .filter(Boolean)
+ .join(" · ");
return (
@@ -109,9 +118,9 @@ const SystemDiskCard = ({
bg={scheme.colorScheme === "dark" ? "dark.7" : "gray.1"}
style={{ overflow: "hidden", position: "relative" }}
>
-
-
{children}
);
diff --git a/packages/widgets/src/media-releases/component.module.css b/packages/widgets/src/media-releases/component.module.css
new file mode 100644
index 000000000..602f43ba1
--- /dev/null
+++ b/packages/widgets/src/media-releases/component.module.css
@@ -0,0 +1,24 @@
+.item {
+ display: block;
+ width: 100%;
+ min-width: 0;
+ color: inherit;
+ text-align: start;
+ transition: background-color 120ms ease;
+
+ &:hover,
+ &:focus-visible {
+ background-color: var(--mantine-color-default-hover);
+ }
+
+ &:focus-visible {
+ outline: 2px solid var(--mantine-primary-color-filled);
+ outline-offset: -2px;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .item {
+ transition: none;
+ }
+}
diff --git a/packages/widgets/src/media-releases/component.tsx b/packages/widgets/src/media-releases/component.tsx
index f768f7ed4..e90743f27 100644
--- a/packages/widgets/src/media-releases/component.tsx
+++ b/packages/widgets/src/media-releases/component.tsx
@@ -29,11 +29,13 @@ import type { TablerIcon } from "@homarr/ui";
import { OverflowBadge } from "@homarr/ui";
import type { WidgetComponentProps } from "../definition";
+import classes from "./component.module.css";
export default function MediaReleasesWidget({
options,
integrationIds,
width,
+ height,
displayMode,
}: WidgetComponentProps<"mediaReleases">) {
const { data: releases = [] } = clientApi.widget.mediaRelease.getMediaReleases.useQuery({
@@ -48,7 +50,7 @@ export default function MediaReleasesWidget({
{releases.map((item, index) => (
-
-
-
+
{latest}
}
- {averages && height >= 170 && {averages}
}
+ {compactSections.latest && {latest}
}
+ {compactSections.averages && {averages}
}
-
+
+
+
{deviceName}
{integrationName && (
@@ -119,22 +128,23 @@ const SystemDiskCard = ({
{integrationName}
)}
-
{secondaryText}
)}
-
+
- {temperature !== null && temperature !== undefined ?
@@ -199,6 +213,7 @@ export default function SystemResources({
integrationName={isAdvanced || data.length > 1 ? integrationName : undefined}
secondaryText={getAbsoluteText(item)}
isAdvanced={isAdvanced}
+ showTemperature={isAdvanced || (height >= 100 && cellWidth >= 220)}
/>
))}
diff --git a/packages/widgets/src/system-resources/chart/common-chart.tsx b/packages/widgets/src/system-resources/chart/common-chart.tsx
index f2f9f1d87..ffc10a45f 100644
--- a/packages/widgets/src/system-resources/chart/common-chart.tsx
+++ b/packages/widgets/src/system-resources/chart/common-chart.tsx
@@ -83,6 +83,13 @@ export const CommonChart = ({
)}
)}
+ {data.length > 1 && height > 0 && height <= 40 && lastValue && !hovered && (
+
+
+ {lastValue}
+
+
+ )}
{data.length <= 1 ? (
@@ -92,6 +99,11 @@ export const CommonChart = ({
{title}
)}
+ {lastValue && (
+ 100 ? "md" : "xs"} fw={600} ta="center">
+ {lastValue}
+
+ )}
) : (
diff --git a/packages/widgets/src/system-resources/chart/memory-chart.tsx b/packages/widgets/src/system-resources/chart/memory-chart.tsx
index b49ea81be..429ec7016 100644
--- a/packages/widgets/src/system-resources/chart/memory-chart.tsx
+++ b/packages/widgets/src/system-resources/chart/memory-chart.tsx
@@ -22,7 +22,7 @@ export const SystemResourceMemoryChart = ({
const t = useScopedI18n("widget.systemResources.card");
const percentageUsed =
- memoryUsageOverTime.length > 0
+ memoryUsageOverTime.length > 0 && totalCapacityInBytes > 0
? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
memoryUsageOverTime[memoryUsageOverTime.length - 1]! / totalCapacityInBytes
: undefined;
@@ -45,7 +45,8 @@ export const SystemResourceMemoryChart = ({
return (
- {memory.used} / {memory.available} ({Math.round((value / totalCapacityInBytes) * 100)}%)
+ {memory.used} / {memory.available} (
+ {totalCapacityInBytes > 0 ? Math.round((value / totalCapacityInBytes) * 100) : 0}%)
);
diff --git a/packages/widgets/src/system-resources/chart/network-traffic.tsx b/packages/widgets/src/system-resources/chart/network-traffic.tsx
index fc3b644b6..5ea5bff9a 100644
--- a/packages/widgets/src/system-resources/chart/network-traffic.tsx
+++ b/packages/widgets/src/system-resources/chart/network-traffic.tsx
@@ -23,6 +23,7 @@ export const NetworkTrafficChart = ({
const max = Math.max(...usageOverTime);
const upperBound = max + max * 0.2;
+ const latest = usageOverTime.at(-1) ?? 0;
return (
["options"]["visibleCharts"][number];
type ChartItem = {
cpu: number;
@@ -40,19 +48,59 @@ export const toChartItem = (healthInfo: {
export const appendBoundedHistory = (history: ChartItem[], item: ChartItem, limit: number): ChartItem[] =>
[...history, item].slice(-limit);
+export const getNetworkHistory = (items: readonly ChartItem[]) =>
+ items.flatMap((item) => (item.network === null ? [] : [item.network]));
+
+export const getCompactChartBudget = (height: number): number => {
+ if (height < 140) return 1;
+ if (height < 260) return 2;
+ return 4;
+};
+
+export const getVisibleSystemCharts = ({
+ configuredCharts,
+ hasGpu,
+ hasNetwork,
+ height,
+ isAdvanced,
+}: {
+ configuredCharts: readonly SystemChart[];
+ hasGpu: boolean;
+ hasNetwork: boolean;
+ height: number;
+ isAdvanced: boolean;
+}): SystemChart[] => {
+ const selectedCharts = isAdvanced ? ALL_SYSTEM_CHARTS : configuredCharts;
+ const availableCharts = selectedCharts.filter(
+ (chart) => (chart !== "gpu" || !isAdvanced || hasGpu) && (chart !== "network" || hasNetwork),
+ );
+ return isAdvanced ? [...availableCharts] : availableCharts.slice(0, getCompactChartBudget(height));
+};
+
export default function SystemResources({
integrationIds,
options,
width,
+ height,
displayMode,
}: WidgetComponentProps<"systemResources">) {
- const { data = [], dataUpdatedAt } = clientApi.widget.healthMonitoring.getSystemHealthStatus.useQuery({
- integrationIds,
- });
+ const t = useScopedI18n("widget.systemResources");
+ const healthQuery = clientApi.widget.healthMonitoring.getSystemHealthStatus.useQuery({ integrationIds });
+ const results = getUsableWidgetQueryData(healthQuery) ?? [];
+ const data = results.filter(
+ (entry): entry is typeof entry & { healthInfo: NonNullable } => entry.healthInfo !== null,
+ );
+ const { dataUpdatedAt, isPending } = healthQuery;
const isAdvanced = displayMode === "advanced";
const integrationKey = useMemo(() => integrationIds.join("\u0000"), [integrationIds]);
const [historyByIntegration, setHistoryByIntegration] = useState>({});
const previousIntegrationKey = useRef(integrationKey);
+ const queryIndicators = (
+
+
+ );
useEffect(() => {
if (previousIntegrationKey.current === integrationKey) return;
@@ -80,7 +128,7 @@ export default function SystemResources({
const panelColumns = isAdvanced && width >= 960 && data.length > 1 ? 2 : 1;
const panelWidth = width / panelColumns;
- const renderCharts = (entry: (typeof data)[number], availableWidth: number) => {
+ const renderCharts = (entry: (typeof data)[number], availableWidth: number, availableHeight: number) => {
const currentItem = toChartItem(entry.healthInfo);
const fullHistory = historyByIntegration[entry.integrationId] ?? [currentItem];
const history = isAdvanced ? fullHistory : fullHistory.slice(-COMPACT_HISTORY_SIZE);
@@ -90,38 +138,71 @@ export default function SystemResources({
key={entry.integrationId}
integrationName={entry.integrationName}
items={history}
+ hasGpu={entry.healthInfo.gpu.length > 0}
memoryCapacityInBytes={entry.healthInfo.memAvailableInBytes + entry.healthInfo.memUsedInBytes}
options={options}
width={availableWidth}
+ height={availableHeight}
isAdvanced={isAdvanced}
showTitle={isAdvanced || data.length > 1}
/>
);
};
- if (!isAdvanced && data.length === 1 && data[0]) {
+ if (isPending) {
return (
-
- {renderCharts(data[0], width)}
+
+
+ );
+ }
+
+ if (data.length === 0) {
+ return (
+
+
+ {queryIndicators}
+
+
);
}
+ if (!isAdvanced && data.length === 1 && data[0]) {
+ return (
+
+
+ {queryIndicators}
+
+ {renderCharts(data[0], width, Math.max(0, height - 20))}
+
+ );
+ }
+
+ const compactPanelHeight = Math.max(160, Math.floor(height / Math.min(data.length, 2)));
+
return (
-
-
- {data.map((entry) => renderCharts(entry, panelWidth))}
-
-
+
+
+ {queryIndicators}
+
+
+
+ {data.map((entry) => renderCharts(entry, panelWidth, isAdvanced ? height : compactPanelHeight))}
+
+
+
);
}
interface SystemChartsProps {
integrationName: string;
items: ChartItem[];
+ hasGpu: boolean;
memoryCapacityInBytes: number;
options: WidgetComponentProps<"systemResources">["options"];
width: number;
+ height: number;
isAdvanced: boolean;
showTitle: boolean;
}
@@ -129,53 +210,70 @@ interface SystemChartsProps {
const SystemCharts = ({
integrationName,
items,
+ hasGpu,
memoryCapacityInBytes,
options,
width,
+ height,
isAdvanced,
showTitle,
}: SystemChartsProps) => {
- const showNetwork =
- items.length > 0 && items[items.length - 1]?.network !== null && options.visibleCharts.includes("network");
- const chartCount = options.visibleCharts.filter((chart) => chart !== "network").length + Number(showNetwork);
+ const networkItems = getNetworkHistory(items);
+ const visibleCharts = getVisibleSystemCharts({
+ configuredCharts: options.visibleCharts,
+ hasGpu,
+ hasNetwork: networkItems.length > 0,
+ height,
+ isAdvanced,
+ });
+ const showNetwork = visibleCharts.includes("network");
+ const labelDisplayMode = isAdvanced ? "textWithIcon" : options.labelDisplayMode;
+ const chartCount = visibleCharts.length;
const chartColumns = isAdvanced && width >= 560 ? 2 : 1;
const chartHeight = isAdvanced
? 180
- : `calc((100% - ${Math.max(0, chartCount - 1) * 8}px) / ${Math.max(1, chartCount)})`;
+ : `calc((100% - ${Math.max(0, chartCount - 1) * 10}px) / ${Math.max(1, chartCount)})`;
return (
-
+
{showTitle && (
{integrationName}
)}
-
- {options.visibleCharts.includes("cpu") && (
+
+ {chartCount === 0 && (
+
+
+ —
+
+
+ )}
+ {visibleCharts.includes("cpu") && (
item.cpu)}
hasShadow={options.hasShadow}
- labelDisplayMode={options.labelDisplayMode}
+ labelDisplayMode={labelDisplayMode}
/>
)}
- {options.visibleCharts.includes("memory") && (
+ {visibleCharts.includes("memory") && (
item.memory)}
totalCapacityInBytes={memoryCapacityInBytes}
hasShadow={options.hasShadow}
- labelDisplayMode={options.labelDisplayMode}
+ labelDisplayMode={labelDisplayMode}
/>
)}
- {options.visibleCharts.includes("gpu") && (
+ {visibleCharts.includes("gpu") && (
item.gpu)}
hasShadow={options.hasShadow}
- labelDisplayMode={options.labelDisplayMode}
+ labelDisplayMode={labelDisplayMode}
/>
)}
@@ -183,24 +281,24 @@ const SystemCharts = ({
(width >= 300 ? (
item.network?.down ?? 0)}
+ usageOverTime={networkItems.map((network) => network.down)}
isUp={false}
hasShadow={options.hasShadow}
- labelDisplayMode={options.labelDisplayMode}
+ labelDisplayMode={labelDisplayMode}
/>
item.network?.up ?? 0)}
+ usageOverTime={networkItems.map((network) => network.up)}
isUp
hasShadow={options.hasShadow}
- labelDisplayMode={options.labelDisplayMode}
+ labelDisplayMode={labelDisplayMode}
/>
) : (
item.network ?? { up: 0, down: 0 })}
+ usageOverTime={networkItems}
hasShadow={options.hasShadow}
- labelDisplayMode={options.labelDisplayMode}
+ labelDisplayMode={labelDisplayMode}
/>
))}
diff --git a/packages/widgets/src/system-resources/history.spec.ts b/packages/widgets/src/system-resources/history.spec.ts
index 421f74035..7fe2512a2 100644
--- a/packages/widgets/src/system-resources/history.spec.ts
+++ b/packages/widgets/src/system-resources/history.spec.ts
@@ -1,6 +1,12 @@
import { describe, expect, test } from "vitest";
-import { appendBoundedHistory, toChartItem } from "./component";
+import {
+ appendBoundedHistory,
+ getCompactChartBudget,
+ getNetworkHistory,
+ getVisibleSystemCharts,
+ toChartItem,
+} from "./component";
describe("system resource history", () => {
test("averages all GPU values", () => {
@@ -18,4 +24,46 @@ describe("system resource history", () => {
const item = toChartItem({ cpuUtilization: 1, memUsedInBytes: 2, gpu: [], network: null });
expect(appendBoundedHistory([item, item], item, 2)).toHaveLength(2);
});
+
+ test("omits unavailable network samples instead of inventing zero traffic", () => {
+ const missing = toChartItem({ cpuUtilization: 1, memUsedInBytes: 2, gpu: [], network: null });
+ const available = toChartItem({
+ cpuUtilization: 1,
+ memUsedInBytes: 2,
+ gpu: [],
+ network: { up: 12, down: 34 },
+ });
+
+ expect(getNetworkHistory([missing, available, missing])).toEqual([{ up: 12, down: 34 }]);
+ });
+
+ test("limits compact charts to the available height", () => {
+ expect(getCompactChartBudget(100)).toBe(1);
+ expect(getCompactChartBudget(200)).toBe(2);
+ expect(getCompactChartBudget(300)).toBe(4);
+ });
+
+ test("advanced mode exposes every available chart regardless of compact configuration", () => {
+ expect(
+ getVisibleSystemCharts({
+ configuredCharts: ["cpu"],
+ hasGpu: true,
+ hasNetwork: true,
+ height: 100,
+ isAdvanced: true,
+ }),
+ ).toEqual(["cpu", "memory", "gpu", "network"]);
+ });
+
+ test("advanced mode omits charts whose data is unavailable", () => {
+ expect(
+ getVisibleSystemCharts({
+ configuredCharts: ["gpu", "network"],
+ hasGpu: false,
+ hasNetwork: false,
+ height: 300,
+ isAdvanced: true,
+ }),
+ ).toEqual(["cpu", "memory"]);
+ });
});
diff --git a/packages/widgets/src/timetable/component.tsx b/packages/widgets/src/timetable/component.tsx
index 7a50c3f70..bc6b62d20 100644
--- a/packages/widgets/src/timetable/component.tsx
+++ b/packages/widgets/src/timetable/component.tsx
@@ -12,6 +12,7 @@ export default function TimetableWidget({
options,
displayMode = "compact",
width,
+ height,
itemId,
}: WidgetComponentProps<"timetable">) {
const t = useScopedI18n("widget.timetable");
@@ -27,6 +28,7 @@ export default function TimetableWidget({
itemId={itemId}
displayMode={displayMode}
width={width}
+ height={height}
/>
);
}
@@ -37,16 +39,22 @@ interface TimetableWidgetInnerProps {
itemId?: string;
displayMode: "compact" | "advanced";
width: number;
+ height: number;
}
-const TimetableWidgetInner = ({ station, baseUrl, itemId, displayMode, width }: TimetableWidgetInnerProps) => {
- const { data: timetable, error } = clientApi.widget.timetable.getTimetable.useQuery({
+const TimetableWidgetInner = ({ station, baseUrl, itemId, displayMode, width, height }: TimetableWidgetInnerProps) => {
+ const {
+ data: timetable,
+ error,
+ isPending,
+ } = clientApi.widget.timetable.getTimetable.useQuery({
baseUrl,
itemId,
stationId: station.value,
limit: displayMode === "advanced" ? 50 : 10,
});
const t = useScopedI18n("widget.timetable");
+ const tCommon = useScopedI18n("common");
if (error && timetable === undefined) throw error;
@@ -54,10 +62,19 @@ const TimetableWidgetInner = ({ station, baseUrl, itemId, displayMode, width }:
const staleTime = timetable ? dayjs(timetable.timestamp).format("HH:mm:ss") : undefined;
const staleWarning = error && staleTime ? t("warning.stale", { time: staleTime }) : undefined;
const compactStaleWarning = error && staleTime ? t("warning.staleCompact") : undefined;
+ const isAdvanced = displayMode === "advanced";
+ const isDense = !isAdvanced && (width < 300 || height < 160);
+ const showTitle = isAdvanced || height >= 112;
+ const showLine = isAdvanced || width >= 200;
+ const showPlatform = isAdvanced || width >= 320;
return (
-
- {t("title", { station: station.label })}
+
+ {showTitle && (
+
+ {t("title", { station: station.label })}
+
+ )}
{compactStaleWarning && displayMode === "compact" && (
= 760 ? 2 : 1} spacing="xs">
- {entries.map((entry) => (
-
+
+ {tCommon("action.loading")}
+
+
+ ) : entries.length > 0 ? (
+ entries.map((entry) => (
+
+
+ —
+
+
+ )}
{displayMode === "advanced" && timetable && (
@@ -95,11 +132,21 @@ interface TimetableEntryView {
platform: { name: string; hasChanged: boolean } | null;
}
-function DepartureRow({ entry }: { entry: TimetableEntryView }) {
+function DepartureRow({
+ entry,
+ dense,
+ showLine,
+ showPlatform,
+}: {
+ entry: TimetableEntryView;
+ dense: boolean;
+ showLine: boolean;
+ showPlatform: boolean;
+}) {
return (
-
- {entry.line && (
+
+ {showLine && entry.line && (
)}
-
+
{dayjs(entry.timestamp).format("HH:mm")}{" "}
{entry.delay >= 1 && (
-
+
+{entry.delay}'
)}
-
+
{entry.location}
- {entry.platform && (
-
+ {showPlatform && entry.platform && (
+
{entry.platform.name}
)}
diff --git a/packages/widgets/src/tracearr/component.spec.ts b/packages/widgets/src/tracearr/component.spec.ts
index 171dead78..e74b35a54 100644
--- a/packages/widgets/src/tracearr/component.spec.ts
+++ b/packages/widgets/src/tracearr/component.spec.ts
@@ -1,6 +1,6 @@
import { describe, expect, it } from "vitest";
-import { getAdvancedColumnWidth } from "./component";
+import { getAdvancedColumnWidth, getCompactSectionVisibility } from "./component";
describe("Tracearr advanced layout", () => {
it("subtracts grid padding and the inter-column gap", () => {
@@ -12,3 +12,29 @@ describe("Tracearr advanced layout", () => {
expect(getAdvancedColumnWidth(799, false)).toBe(767);
});
});
+
+describe("Tracearr compact disclosure", () => {
+ it("keeps urgent violations visible in a short widget", () => {
+ expect(
+ getCompactSectionVisibility({
+ height: 160,
+ showStreams: true,
+ showViolations: true,
+ hasViolations: true,
+ showRecentActivity: true,
+ }),
+ ).toEqual({ violations: true, recentActivity: false });
+ });
+
+ it("reveals secondary history as height becomes available", () => {
+ expect(
+ getCompactSectionVisibility({
+ height: 400,
+ showStreams: true,
+ showViolations: true,
+ hasViolations: false,
+ showRecentActivity: true,
+ }),
+ ).toEqual({ violations: true, recentActivity: true });
+ });
+});
diff --git a/packages/widgets/src/tracearr/component.tsx b/packages/widgets/src/tracearr/component.tsx
index 17f6df5bc..3992fe4f7 100644
--- a/packages/widgets/src/tracearr/component.tsx
+++ b/packages/widgets/src/tracearr/component.tsx
@@ -18,6 +18,23 @@ const ADVANCED_GRID_BREAKPOINT = 800;
const ADVANCED_GRID_GAP_PX = 16;
const ADVANCED_GRID_PADDING_PX = 16;
+export const getCompactSectionVisibility = ({
+ height,
+ showStreams,
+ showViolations,
+ hasViolations,
+ showRecentActivity,
+}: {
+ height: number;
+ showStreams: boolean;
+ showViolations: boolean;
+ hasViolations: boolean;
+ showRecentActivity: boolean;
+}) => ({
+ violations: showViolations && (hasViolations || height >= 240 || !showStreams),
+ recentActivity: showRecentActivity && (height >= 360 || (!showStreams && (!showViolations || !hasViolations))),
+});
+
export default function TracearrWidget({
options,
integrationIds,
@@ -124,6 +141,13 @@ function TracearrContent({ integrationIds, options, width, height, displayMode }
const streams = displayMode === "advanced" ? combined.streams.data : combined.streams.data.slice(0, compactLimit);
const violations = combined.violations?.data ?? [];
const recentActivity = combined.recentActivity?.data ?? [];
+ const compactSections = getCompactSectionVisibility({
+ height,
+ showStreams: options.showStreams,
+ showViolations: options.showViolations,
+ hasViolations: violations.length > 0,
+ showRecentActivity: options.showRecentActivity,
+ });
if (displayMode === "advanced") {
const isTwoColumn = width >= ADVANCED_GRID_BREAKPOINT;
@@ -154,9 +178,9 @@ function TracearrContent({ integrationIds, options, width, height, displayMode }
{options.showStats &&
{t("noSectionsEnabled")}
diff --git a/packages/widgets/src/tracearr/recent-activity-section.tsx b/packages/widgets/src/tracearr/recent-activity-section.tsx
index e078fd6f2..982101350 100644
--- a/packages/widgets/src/tracearr/recent-activity-section.tsx
+++ b/packages/widgets/src/tracearr/recent-activity-section.tsx
@@ -8,7 +8,7 @@ export function RecentActivityList({ sessions }: { sessions: TracearrHistorySess
return (
-
+
{t("recentActivity.title")}
{sessions.length === 0 ? (
diff --git a/packages/widgets/src/tracearr/violations-section.tsx b/packages/widgets/src/tracearr/violations-section.tsx
index 2ce675ed8..6d052dd59 100644
--- a/packages/widgets/src/tracearr/violations-section.tsx
+++ b/packages/widgets/src/tracearr/violations-section.tsx
@@ -9,7 +9,7 @@ export function ViolationsList({ violations }: { violations: TracearrViolation[]
return (
-
+
{t("violations.title")}
{violations.length === 0 ? (
diff --git a/packages/widgets/src/traefik/component.tsx b/packages/widgets/src/traefik/component.tsx
index 42d2d013b..a5503583c 100644
--- a/packages/widgets/src/traefik/component.tsx
+++ b/packages/widgets/src/traefik/component.tsx
@@ -126,7 +126,7 @@ function TraefikWidgetContent({
))}
- {options.showEntryPoints && combined.entryPoints.length > 0 && (
+ {options.showEntryPoints && combined.entryPoints.length > 0 && (displayMode === "advanced" || height >= 340) && (
{temperature}°C
: null} +
+ {showTemperature && temperature !== null && temperature !== undefined ? (
+ {temperature}°C
+ ) : null}
{dedupe(combined.entryPoints)
.slice(0, getEntryPointLimit(width))
diff --git a/packages/widgets/src/umami/umami-content.tsx b/packages/widgets/src/umami/umami-content.tsx
index 428bacff7..1179fb4f6 100644
--- a/packages/widgets/src/umami/umami-content.tsx
+++ b/packages/widgets/src/umami/umami-content.tsx
@@ -43,10 +43,11 @@ export function UmamiContent({
displayMode,
}: UmamiContentProps) {
const t = useScopedI18n("widget.umami");
+ const tCommon = useScopedI18n("common");
const { colorScheme } = useMantineColorScheme();
const tickColor = colorScheme === "dark" ? "#c1c2c5" : "#495057";
- const { data: results = [] } = clientApi.widget.umami.getVisitorStats.useQuery(
+ const { data: results = [], isPending: isStatsPending } = clientApi.widget.umami.getVisitorStats.useQuery(
{ integrationIds, websiteId, timeFrame, eventName },
umamiQueryOptions,
);
@@ -67,6 +68,15 @@ export function UmamiContent({
: undefined;
const firstResult = results[0];
+ if (isStatsPending) {
+ return (
+
+
+ {tCommon("action.loading")}
+
+
+ );
+ }
if (!firstResult) {
return (
@@ -93,6 +103,11 @@ export function UmamiContent({
const isOverlay = chartStyle === "overlay" && hasEventSeries;
const overlayBarSize = 16;
+ const isAdvanced = displayMode === "advanced";
+ const isDense = !isAdvanced && height < 120;
+ const showXAxis = isAdvanced || height >= 140;
+ const showSecondaryStats = isAdvanced || height >= 96;
+ const showDetailedStats = isAdvanced || (width >= 260 && height >= 150);
const selectedView =
viewMode === "events" ? (
@@ -102,6 +117,7 @@ export function UmamiContent({
timeFrame={timeFrame}
eventNames={eventNames}
chartType={chartType}
+ showXAxis={showXAxis}
/>
) : viewMode === "topPages" ? (
+
{visitorStats.domain} ({formatTimeFrameLabel(timeFrame, t)})
@@ -231,27 +247,29 @@ export function UmamiContent({
)}
-
-
- ● {activeVisitors.toLocaleString()} {t("active")}
-
-
- {visitorStats.totalPageviews.toLocaleString()} {t("pageviews")}
-
-
- {visitorStats.totalVisits.toLocaleString()} {t("visits")}
-
- {(displayMode === "advanced" || width >= 260) && (
- <>
-
- {visitorStats.bounceRate}% {t("bounceRate")}
-
-
- {formatDuration(visitorStats.avgDuration * 1000)} {t("avgDuration")}
-
-
- )}
-
+ {showSecondaryStats && (
+
+
+ ● {activeVisitors.toLocaleString()} {t("active")}
+
+
+ {visitorStats.totalPageviews.toLocaleString()} {t("pageviews")}
+
+
+ {visitorStats.totalVisits.toLocaleString()} {t("visits")}
+
+ {showDetailedStats && (
+ <>
+
+ {visitorStats.bounceRate}% {t("bounceRate")}
+
+
+ {formatDuration(visitorStats.avgDuration * 1000)} {t("avgDuration")}
+
+
+ )}
+
+ )}
{displayMode === "advanced" ? advancedContent : selectedView}
diff --git a/packages/widgets/src/umami/umami-events-content.tsx b/packages/widgets/src/umami/umami-events-content.tsx
index ef91df422..e503df97a 100644
--- a/packages/widgets/src/umami/umami-events-content.tsx
+++ b/packages/widgets/src/umami/umami-events-content.tsx
@@ -15,6 +15,7 @@ interface UmamiEventsContentProps {
timeFrame: string;
eventNames: string[];
chartType: string;
+ showXAxis: boolean;
}
export function UmamiEventsContent({
@@ -23,6 +24,7 @@ export function UmamiEventsContent({
timeFrame,
eventNames,
chartType,
+ showXAxis,
}: UmamiEventsContentProps) {
const t = useScopedI18n("widget.umami");
const { colorScheme } = useMantineColorScheme();
@@ -104,7 +106,7 @@ export function UmamiEventsContent({
gridAxis="none"
withLegend={false}
withTooltip
- withXAxis
+ withXAxis={showXAxis}
withYAxis={false}
xAxisProps={{
tick: { fontSize: 9, fill: tickColor },
@@ -121,7 +123,7 @@ export function UmamiEventsContent({
gridAxis="none"
withLegend={false}
withTooltip
- withXAxis
+ withXAxis={showXAxis}
withYAxis={false}
barProps={{ radius: 2 }}
xAxisProps={{
diff --git a/packages/widgets/src/uptime-kuma/aggregate.spec.ts b/packages/widgets/src/uptime-kuma/aggregate.spec.ts
index c4aaf9f18..4982f5331 100644
--- a/packages/widgets/src/uptime-kuma/aggregate.spec.ts
+++ b/packages/widgets/src/uptime-kuma/aggregate.spec.ts
@@ -1,6 +1,7 @@
import { describe, expect, it } from "vitest";
import { aggregateUptimeKumaDashboards } from "./aggregate";
+import { getCompactStatLimit, getCompactStatPriority } from "./component";
describe("aggregateUptimeKumaDashboards", () => {
it("weights uptime by monitors instead of integrations", () => {
@@ -29,3 +30,26 @@ describe("aggregateUptimeKumaDashboards", () => {
expect(combined.averageUptimePercent).toBe(25);
});
});
+
+describe("getCompactStatLimit", () => {
+ it("reserves compact height for the uptime summary", () => {
+ expect(getCompactStatLimit(150, true, 4)).toBe(0);
+ expect(getCompactStatLimit(220, true, 4)).toBe(2);
+ });
+
+ it("uses the space for metrics when the summary is disabled", () => {
+ expect(getCompactStatLimit(100, false, 4)).toBe(2);
+ expect(getCompactStatLimit(240, false, 4)).toBe(4);
+ });
+});
+
+describe("getCompactStatPriority", () => {
+ it("puts active failures before healthy totals", () => {
+ expect(getCompactStatPriority("downCount", 2)).toBeLessThan(getCompactStatPriority("totalMonitors", 10));
+ expect(getCompactStatPriority("pausedCount", 1)).toBeLessThan(getCompactStatPriority("upCount", 8));
+ });
+
+ it("moves zero-value problem states behind healthy totals", () => {
+ expect(getCompactStatPriority("downCount", 0)).toBeGreaterThan(getCompactStatPriority("upCount", 8));
+ });
+});
diff --git a/packages/widgets/src/uptime-kuma/component.tsx b/packages/widgets/src/uptime-kuma/component.tsx
index efe60c72c..838ce7eaa 100644
--- a/packages/widgets/src/uptime-kuma/component.tsx
+++ b/packages/widgets/src/uptime-kuma/component.tsx
@@ -76,6 +76,25 @@ const heroVariantByRing = {
false: classes.heroTextOnly,
} as const;
+export function getCompactStatLimit(height: number, showHero: boolean, statCount: number): number {
+ if (showHero) {
+ if (height < 180) return 0;
+ if (height < 260) return Math.min(2, statCount);
+ if (height < 340) return Math.min(4, statCount);
+ } else {
+ if (height < 130) return Math.min(2, statCount);
+ if (height < 220) return Math.min(4, statCount);
+ }
+ return statCount;
+}
+
+export function getCompactStatPriority(statKey: keyof typeof statIcons, value: number): number {
+ if (statKey === "downCount") return value > 0 ? 0 : 4;
+ if (statKey === "pausedCount") return value > 0 ? 1 : 5;
+ if (statKey === "totalMonitors") return 2;
+ return 3;
+}
+
export default function UptimeKumaWidget({
integrationIds,
options,
@@ -126,16 +145,30 @@ function UptimeKumaContent({ integrationIds, options, width, height, displayMode
const iconSize = getIconSize(width);
const gridCols = getGridCols(width);
- const visibleStatKeys = Object.entries(statVisibilityByOption)
+ const enabledStatKeys = Object.entries(statVisibilityByOption)
.filter(([optionKey]) => options[optionKey as keyof typeof options])
.map(([, statKey]) => statKey);
const showHero = options.showAverageUptime;
+ const showRing = options.showUptimeRing && (displayMode === "advanced" || (width >= 170 && height >= 110));
+ const prioritizedStatKeys =
+ displayMode === "advanced"
+ ? enabledStatKeys
+ : enabledStatKeys.toSorted(
+ (left, right) =>
+ getCompactStatPriority(left, combined[left]) - getCompactStatPriority(right, combined[right]),
+ );
+ const visibleStatKeys = prioritizedStatKeys.slice(
+ 0,
+ displayMode === "advanced"
+ ? prioritizedStatKeys.length
+ : getCompactStatLimit(height, showHero, prioritizedStatKeys.length),
+ );
const hasContent = showHero || visibleStatKeys.length > 0;
const heroLayoutClass =
heroLayoutBySecondaryStats[String(visibleStatKeys.length > 0) as keyof typeof heroLayoutBySecondaryStats];
- const heroRingClass = heroVariantByRing[String(options.showUptimeRing) as keyof typeof heroVariantByRing];
+ const heroRingClass = heroVariantByRing[String(showRing) as keyof typeof heroVariantByRing];
const summaryContent = (
)}
- {displayMode === "compact" && height >= 240 && combined.downCount > 0 && (
+ {displayMode === "compact" && height >= 300 && combined.downCount > 0 && (
{monitors
.filter((monitor) => monitor.status === "down")
diff --git a/packages/widgets/src/vpn/component.tsx b/packages/widgets/src/vpn/component.tsx
index 4d43bc302..295499d78 100644
--- a/packages/widgets/src/vpn/component.tsx
+++ b/packages/widgets/src/vpn/component.tsx
@@ -1,8 +1,9 @@
"use client";
-import { Flex, ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
+import { Center, Flex, ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
import { clientApi } from "@homarr/api/client";
+import { useScopedI18n } from "@homarr/translation/client";
import type { WidgetComponentProps } from "../definition";
import { VpnIntegrationCard } from "./vpn-card";
@@ -11,12 +12,26 @@ export default function VpnWidget({
options,
integrationIds,
width,
+ height,
displayMode = "compact",
}: WidgetComponentProps<"vpn">) {
- const { data: integrations = [] } = clientApi.widget.vpn.getSummaries.useQuery({
+ const { data: integrations = [], isPending } = clientApi.widget.vpn.getSummaries.useQuery({
...options,
integrationIds,
});
+ const t = useScopedI18n("widget.vpn");
+ const tCommon = useScopedI18n("common");
+ const dense = displayMode === "compact" && (width < 240 || height < 120);
+
+ if (isPending || integrations.length === 0) {
+ return (
+
+
+ {isPending ? tCommon("action.loading") : t("serviceUnavailable")}
+
+
+ );
+ }
const [vpn] = integrations;
if (displayMode === "compact" && integrations.length === 1 && vpn) {
@@ -26,6 +41,7 @@ export default function VpnWidget({
vpn={vpn.summary}
integrationName={vpn.integration.name}
variant={width < 240 ? "list" : "single"}
+ dense={dense}
/>
);
@@ -59,6 +75,7 @@ export default function VpnWidget({
vpn={result.summary}
integrationName={result.integration.name}
variant="list"
+ dense={dense}
/>
))}
diff --git a/packages/widgets/src/vpn/vpn-card.tsx b/packages/widgets/src/vpn/vpn-card.tsx
index 3cb26bdd5..8ddcfd7fd 100644
--- a/packages/widgets/src/vpn/vpn-card.tsx
+++ b/packages/widgets/src/vpn/vpn-card.tsx
@@ -1,8 +1,15 @@
"use client";
import React from "react";
-import { Badge, Box, Card, Flex, Group, Text } from "@mantine/core";
-import { IconArrowsExchange, IconMapPin, IconShieldCheck, IconShieldX } from "@tabler/icons-react";
+import { Badge, Box, Card, Flex, Group, Text, VisuallyHidden } from "@mantine/core";
+import {
+ IconArrowsExchange,
+ IconCircleCheckFilled,
+ IconCircleXFilled,
+ IconMapPin,
+ IconShieldCheck,
+ IconShieldX,
+} from "@tabler/icons-react";
import type { RouterOutputs } from "@homarr/api";
import { useRequiredBoard } from "@homarr/boards/context";
@@ -16,17 +23,19 @@ export function VpnIntegrationCard({
vpn,
integrationName,
variant = "single",
+ dense = false,
}: {
vpn: VpnInfo;
integrationName?: string;
variant?: "single" | "list";
+ dense?: boolean;
}) {
const board = useRequiredBoard();
const compact = variant === "list";
const content = vpn ? (
-
) : (
-
+
{content}
);
@@ -52,20 +62,28 @@ export function VpnIntegrationCard({
return {content} ;
}
-function VpnUnavailableContent({ compact, integrationName }: { compact: boolean; integrationName?: string }) {
+function VpnUnavailableContent({
+ compact,
+ dense,
+ integrationName,
+}: {
+ compact: boolean;
+ dense: boolean;
+ integrationName?: string;
+}) {
const t = useScopedI18n("widget.vpn");
return (
{/* Empty statuses render the shield and DNS badge in red (see getStatusColor). */}
-
{integrationName ? (
{integrationName}
) : null}
-
+
{t("serviceUnavailable")}
@@ -77,17 +95,30 @@ function VpnStatusColumn({
vpnStatus,
dnsStatus,
compact,
+ dense,
}: {
vpnStatus: string;
dnsStatus: string;
compact: boolean;
+ dense: boolean;
}) {
// Connected shows a shield with a check; anything else (stopped or unavailable) shows a shield with a cross.
const ShieldIcon = vpnStatus === RUNNING_STATUS ? IconShieldCheck : IconShieldX;
return (
-
-
+
);
@@ -101,6 +132,7 @@ function VpnInfoColumn({
provider,
protocol,
compact,
+ dense,
}: {
integrationName?: string;
publicIp: string;
@@ -109,6 +141,7 @@ function VpnInfoColumn({
provider: string;
protocol: string;
compact: boolean;
+ dense: boolean;
}) {
return (
@@ -117,16 +150,18 @@ function VpnInfoColumn({
{integrationName}
) : null}
-
- {publicIp}
+
+ {publicIp || "—"}
-
-
- {city}, {country}
-
-
-
+
+ {[city, country].filter(Boolean).join(", ")}
+
+
+ )}
+ {!dense && (provider || protocol) &&
);
}
@@ -145,20 +180,18 @@ function VpnProviderDetails({ provider, protocol }: { provider: string; protocol
);
}
-function StatusDot({ status, size = 10 }: { status: string; size?: number }) {
- return {status || "unavailable"}
);
}
diff --git a/packages/widgets/src/weather/component.spec.ts b/packages/widgets/src/weather/component.spec.ts
index 54f8f6a56..44bfe8847 100644
--- a/packages/widgets/src/weather/component.spec.ts
+++ b/packages/widgets/src/weather/component.spec.ts
@@ -1,6 +1,6 @@
import { describe, expect, it } from "vitest";
-import { getPreferredUnit, getVisibleForecastDays } from "./component";
+import { getPreferredTime, getPreferredUnit, getPreferredWindSpeed, getVisibleForecastDays } from "./component";
describe("weather formatting", () => {
it("preserves valid zero temperatures", () => {
@@ -8,9 +8,15 @@ describe("weather formatting", () => {
expect(getPreferredUnit(0, true, true)).toBe("32°F");
});
+ it("keeps zero wind speeds and missing forecast values truthful", () => {
+ expect(getPreferredWindSpeed(0)).toBe("0.0");
+ expect(getPreferredWindSpeed(undefined)).toBe("?");
+ expect(getPreferredTime(undefined)).toBe("?");
+ expect(getPreferredTime("invalid")).toBe("?");
+ });
+
it("limits compact forecasts by both axes", () => {
- expect(getVisibleForecastDays(7, 120, 100, false)).toBe(2);
- expect(getVisibleForecastDays(7, 600, 100, false)).toBe(3);
- expect(getVisibleForecastDays(7, 120, 100, true)).toBe(7);
+ expect(getVisibleForecastDays(7, 120, 100)).toBe(2);
+ expect(getVisibleForecastDays(7, 600, 100)).toBe(3);
});
});
diff --git a/packages/widgets/src/weather/component.tsx b/packages/widgets/src/weather/component.tsx
index 2f96589f5..f1be2ac44 100644
--- a/packages/widgets/src/weather/component.tsx
+++ b/packages/widgets/src/weather/component.tsx
@@ -1,7 +1,16 @@
"use client";
-import { Box, Group, HoverCard, Stack, Text } from "@mantine/core";
-import { IconArrowDownRight, IconArrowUpRight, IconDroplets, IconMapPin, IconWind } from "@tabler/icons-react";
+import { useId } from "react";
+import { Box, Group, HoverCard, Stack, Table, Text } from "@mantine/core";
+import {
+ IconArrowDownRight,
+ IconArrowUpRight,
+ IconDroplets,
+ IconMapPin,
+ IconSunrise,
+ IconSunset,
+ IconWind,
+} from "@tabler/icons-react";
import combineClasses from "clsx";
import dayjs from "dayjs";
@@ -30,6 +39,10 @@ export default function WeatherWidget({
if (!weather) return
);
@@ -57,7 +69,172 @@ interface WeatherProps extends Pick, "options">
weather: NonNullable;
}
-const DailyWeather = ({ options, weather, showDetails = false }: WeatherProps & { showDetails?: boolean }) => {
+const AdvancedWeather = ({ options, weather }: WeatherProps) => {
+ const forecastHeadingId = useId();
+ const t = useScopedI18n("widget.weather");
+ const tCommon = useScopedI18n("common");
+
+ return (
+
+
+
+
+
+ {getPreferredUnit(
+ weather.current.temperature,
+ options.isFormatFahrenheit,
+ options.disableTemperatureDecimals,
+ )}
+
+
+
+
+
+
+ {options.location.name}
+
+
+
+ {t("currentWindSpeed", {
+ currentWindSpeed: getPreferredWindSpeed(weather.current.windspeed, options.useImperialSpeed),
+ unit: options.useImperialSpeed
+ ? tCommon("unit.speed.milesPerHour")
+ : tCommon("unit.speed.kilometersPerHour"),
+ })}
+
+
+
+
+
+
+ {t("advanced.forecast")}
+
+
+
+
+
+
+ );
+};
+
+const DailyWeather = ({ options, weather }: WeatherProps) => {
const t = useScopedI18n("widget.weather");
const tCommon = useScopedI18n("common");
@@ -138,39 +315,11 @@ const DailyWeather = ({ options, weather, showDetails = false }: WeatherProps &
)}
- {showDetails && weather.daily[0] && (
-
@@ -202,17 +351,12 @@ const WeeklyForecast = ({
-
@@ -233,11 +377,6 @@ function Forecast({
{getPreferredUnit(dayWeather.maxTemp, options.isFormatFahrenheit, options.disableTemperatureDecimals)}
- {showDetails && (
-
- {getPreferredUnit(dayWeather.minTemp, options.isFormatFahrenheit, options.disableTemperatureDecimals)}
-
- )}
@@ -276,13 +415,16 @@ export const getPreferredUnit = (value?: number, isFahrenheit = false, disableTe
: `${value.toFixed(disableTemperatureDecimals ? 0 : 1)}°C`
: "?";
-export const getVisibleForecastDays = (
- configuredDays: number,
- width: number,
- height: number,
- isAdvanced: boolean,
-): number => {
- if (isAdvanced) return configuredDays;
+export const getPreferredWindSpeed = (value: number | undefined, useImperialSpeed = false): string =>
+ value === undefined ? "?" : (useImperialSpeed ? metricToImperial(value) : value).toFixed(1);
+
+export const getPreferredTime = (value: string | undefined): string => {
+ if (!value) return "?";
+ const time = dayjs(value);
+ return time.isValid() ? time.format("HH:mm") : "?";
+};
+
+export const getVisibleForecastDays = (configuredDays: number, width: number, height: number): number => {
const widthBudget = Math.max(1, Math.floor(width / 58));
const heightBudget = height < 120 ? 3 : configuredDays;
return Math.min(configuredDays, widthBudget, heightBudget);
@@ -145,7 +178,7 @@ function UptimeKumaContent({ integrationIds, options, width, height, displayMode
{t("averageUptime")}
{formatNumber(uptimeValue, 1)}%
- {options.showUptimeRing && (
+ {showRing && (