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

Revert "feat: complete automatic mobile board UX"

Browse Source 
This reverts commit 7959c20d88.
This commit is contained in:
ajnart committed 2026-08-13 19:55:21 +02:00
1 parent e93293f8a9
commit be9c69f325
41 files changed
+270 -1225
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/nextjs/src/components/board/items/actions/empty-position.ts
+1 -1
View File
@@ -7,7 +7,7 @@ export const getFirstEmptyPosition = (
size: { width: number; height: number } = { width: 1, height: 1 },
) => {
for (let yOffset = 0; yOffset < rowCount + 1 - size.height; yOffset++) {
for (let xOffset = 0; xOffset < columnCount + 1 - size.width; xOffset++) {
for (let xOffset = 0; xOffset < columnCount; xOffset++) {
const isOccupied = elements.some(
(element) =>
element.yOffset < yOffset + size.height &&
apps/nextjs/src/components/board/items/actions/move-and-resize-item.ts
+6 -3
View File
@@ -1,8 +1,9 @@
import { getCurrentLayout } from "@homarr/boards/context";
import type { Board } from "~/app/[locale]/boards/_types";
export interface MoveAndResizeItemInput {
itemId: string;
layoutId: string;
xOffset: number;
yOffset: number;
width: number;
@@ -10,8 +11,10 @@ export interface MoveAndResizeItemInput {
}
export const moveAndResizeItemCallback =
({ itemId, layoutId, ...layoutInput }: MoveAndResizeItemInput) =>
({ itemId, ...layoutInput }: MoveAndResizeItemInput) =>
(previous: Board): Board => {
const currentLayout = getCurrentLayout(previous);
return {
...previous,
items: previous.items.map((item) =>
@@ -20,7 +23,7 @@ export const moveAndResizeItemCallback =
: {
...item,
layouts: item.layouts.map((layout) =>
layout.layoutId !== layoutId
layout.layoutId !== currentLayout
? layout
: {
...layout,
apps/nextjs/src/components/board/items/actions/move-item-to-section.ts
+6 -3
View File
@@ -1,8 +1,9 @@
import { getCurrentLayout } from "@homarr/boards/context";
import type { Board } from "~/app/[locale]/boards/_types";
export interface MoveItemToSectionInput {
itemId: string;
layoutId: string;
sectionId: string;
xOffset: number;
yOffset: number;
@@ -11,8 +12,10 @@ export interface MoveItemToSectionInput {
}
export const moveItemToSectionCallback =
({ itemId, layoutId, ...layoutInput }: MoveItemToSectionInput) =>
({ itemId, ...layoutInput }: MoveItemToSectionInput) =>
(board: Board): Board => {
const currentLayout = getCurrentLayout(board);
return {
...board,
items: board.items.map((item) =>
@@ -21,7 +24,7 @@ export const moveItemToSectionCallback =
: {
...item,
layouts: item.layouts.map((layout) =>
layout.layoutId !== layoutId
layout.layoutId !== currentLayout
? layout
: {
...layout,
apps/nextjs/src/components/board/items/actions/test/move-and-resize-item.spec.ts
+9 -3
View File
@@ -1,4 +1,6 @@
import { describe, expect, test } from "vitest";
import { describe, expect, test, vi } from "vitest";
import * as boardContext from "@homarr/boards/context";
import { moveAndResizeItemCallback } from "../move-and-resize-item";
import { BoardMockBuilder } from "./mocks/board-mock";
@@ -9,6 +11,8 @@ describe("moveItemToSectionCallback should move item in section", () => {
// Arrange
const itemToMove = "2";
const layoutId = "1";
const spy = vi.spyOn(boardContext, "getCurrentLayout");
spy.mockReturnValue(layoutId);
const newPosition = {
xOffset: 20,
yOffset: 30,
@@ -21,7 +25,7 @@ describe("moveItemToSectionCallback should move item in section", () => {
const board = new BoardMockBuilder().addItem(itemA).addItem(itemB).addItem(itemC).build();
// Act
const updatedBoard = moveAndResizeItemCallback({ itemId: itemToMove, layoutId, ...newPosition })(board);
const updatedBoard = moveAndResizeItemCallback({ itemId: itemToMove, ...newPosition })(board);
// Assert
expect(updatedBoard.items).toHaveLength(3);
@@ -39,6 +43,8 @@ describe("moveItemToSectionCallback should move item in section", () => {
// Arrange
const itemToMove = "2";
const layoutId = "1";
const spy = vi.spyOn(boardContext, "getCurrentLayout");
spy.mockReturnValue(layoutId);
const newPosition = {
xOffset: 20,
yOffset: 30,
@@ -50,7 +56,7 @@ describe("moveItemToSectionCallback should move item in section", () => {
const board = new BoardMockBuilder().addItem(itemA).addItem(itemC).build();
// Act
const updatedBoard = moveAndResizeItemCallback({ itemId: itemToMove, layoutId, ...newPosition })(board);
const updatedBoard = moveAndResizeItemCallback({ itemId: itemToMove, ...newPosition })(board);
// Assert
expect(updatedBoard.items).toHaveLength(2);
apps/nextjs/src/components/board/items/actions/test/move-item-to-section.spec.ts
+9 -3
View File
@@ -1,4 +1,6 @@
import { describe, expect, test } from "vitest";
import { describe, expect, test, vi } from "vitest";
import * as boardContext from "@homarr/boards/context";
import { moveItemToSectionCallback } from "../move-item-to-section";
import { BoardMockBuilder } from "./mocks/board-mock";
@@ -9,6 +11,8 @@ describe("moveItemToSectionCallback should move item to section", () => {
// Arrange
const itemToMove = "2";
const layoutId = "1";
const spy = vi.spyOn(boardContext, "getCurrentLayout");
spy.mockReturnValue(layoutId);
const newPosition = {
sectionId: "3",
xOffset: 20,
@@ -22,7 +26,7 @@ describe("moveItemToSectionCallback should move item to section", () => {
const board = new BoardMockBuilder().addItem(itemA).addItem(itemB).addItem(itemC).build();
// Act
const updatedBoard = moveItemToSectionCallback({ itemId: itemToMove, layoutId, ...newPosition })(board);
const updatedBoard = moveItemToSectionCallback({ itemId: itemToMove, ...newPosition })(board);
// Assert
expect(updatedBoard.items).toHaveLength(3);
@@ -40,6 +44,8 @@ describe("moveItemToSectionCallback should move item to section", () => {
// Arrange
const itemToMove = "2";
const layoutId = "1";
const spy = vi.spyOn(boardContext, "getCurrentLayout");
spy.mockReturnValue(layoutId);
const newPosition = {
sectionId: "3",
xOffset: 20,
@@ -52,7 +58,7 @@ describe("moveItemToSectionCallback should move item to section", () => {
const board = new BoardMockBuilder().addItem(itemA).addItem(itemC).build();
// Act
const updatedBoard = moveItemToSectionCallback({ itemId: itemToMove, layoutId, ...newPosition })(board);
const updatedBoard = moveItemToSectionCallback({ itemId: itemToMove, ...newPosition })(board);
// Assert
expect(updatedBoard.items).toHaveLength(2);
apps/nextjs/src/components/board/mobile/deferred-mobile-item.tsx
+37 -27
View File
@@ -5,56 +5,66 @@ import { useEffect, useRef, useState } from "react";
import { Skeleton } from "@mantine/core";
import classes from "./mobile-board.module.css";
import { observeMobileViewportProximity } from "./mobile-viewport-observer";
interface DeferredMobileItemProps extends PropsWithChildren {
eager: boolean;
unmountWhenOffscreen: boolean;
onNearViewportChange?: (isNearViewport: boolean) => void;
}
export { getMobilePreloadRootMargin, mobilePreloadViewportMultiplier } from "./mobile-viewport-observer";
export const mobilePreloadViewportMultiplier = 2;
export const DeferredMobileItem = ({
eager,
unmountWhenOffscreen,
onNearViewportChange,
children,
}: DeferredMobileItemProps) => {
export const getMobilePreloadRootMargin = (viewportHeight: number) =>
`${Math.max(0, Math.round(viewportHeight * mobilePreloadViewportMultiplier))}px 0px`;
export const DeferredMobileItem = ({ eager, unmountWhenOffscreen, children }: DeferredMobileItemProps) => {
const [hasMounted, setHasMounted] = useState(eager);
const wrapperRef = useRef<HTMLDivElement | null>(null);
const hasMountedOnceRef = useRef(eager);
useEffect(() => {
if (eager) {
hasMountedOnceRef.current = true;
setHasMounted(true);
onNearViewportChange?.(true);
return;
}
const element = wrapperRef.current;
if (!element) {
if (!element || typeof IntersectionObserver === "undefined") {
setHasMounted(true);
onNearViewportChange?.(true);
return;
}
return observeMobileViewportProximity(
element,
(isNearViewport) => {
onNearViewportChange?.(isNearViewport);
let observer: IntersectionObserver | null = null;
const observe = () => {
if (hasMountedOnceRef.current && !unmountWhenOffscreen) return;
observer?.disconnect();
observer = new IntersectionObserver(
([entry]) => {
const isNearViewport = entry?.isIntersecting ?? false;
if (isNearViewport) {
setHasMounted(true);
return;
}
if (isNearViewport) {
hasMountedOnceRef.current = true;
setHasMounted(true);
if (!unmountWhenOffscreen) observer?.disconnect();
return;
}
if (unmountWhenOffscreen && !element.contains(document.activeElement)) {
setHasMounted(false);
}
},
{ once: !unmountWhenOffscreen },
);
}, [eager, onNearViewportChange, unmountWhenOffscreen]);
if (unmountWhenOffscreen && !element.contains(document.activeElement)) {
setHasMounted(false);
}
},
{ rootMargin: getMobilePreloadRootMargin(window.innerHeight) },
);
observer.observe(element);
};
observe();
window.addEventListener("resize", observe);
return () => {
window.removeEventListener("resize", observe);
observer?.disconnect();
};
}, [eager, unmountWhenOffscreen]);
return (
<div ref={wrapperRef} className={classes.deferredItem} aria-busy={!hasMounted}>
apps/nextjs/src/components/board/mobile/mobile-board.tsx
+3 -20
View File
@@ -1,9 +1,8 @@
"use client";
import type { CSSProperties, RefObject } from "react";
import { useMemo, useRef, useState } from "react";
import { useMemo, useRef } from "react";
import { Box, Center, Stack, Text, ThemeIcon, Title } from "@mantine/core";
import { useDisclosure } from "@mantine/hooks";
import { IconLayoutBoard } from "@tabler/icons-react";
import { getDesktopLayout, useRequiredBoard } from "@homarr/boards/context";
@@ -64,8 +63,6 @@ const getMobilePresentation = (item: SectionItem) => {
const MobileBoardItem = ({ item }: { item: SectionItem }) => {
const widgetStateRef = useRef<Record<string, unknown> | null>(null);
const presentation = getMobilePresentation(item);
const [isNearViewport, setIsNearViewport] = useState(presentation.eager);
const [detailsOpened, detailsDisclosure] = useDisclosure(false);
return (
<Box
@@ -74,30 +71,16 @@ const MobileBoardItem = ({ item }: { item: SectionItem }) => {
data-mobile-board-item={item.id}
data-mobile-display-mode={presentation.displayMode}
>
<DeferredMobileItem
eager={presentation.eager}
unmountWhenOffscreen={presentation.unmountWhenOffscreen}
onNearViewportChange={setIsNearViewport}
>
<DeferredMobileItem eager={presentation.eager} unmountWhenOffscreen={presentation.unmountWhenOffscreen}>
<BoardItemContent
item={item}
displayMode={presentation.displayMode}
disableContextMenu
isReadOnly
widgetStateRef={widgetStateRef}
onOpenDetails={presentation.usesGenericSummary ? detailsDisclosure.open : undefined}
/>
</DeferredMobileItem>
<MobileWidgetActions
item={item}
supportsDetails={presentation.supportsDetails}
detailsFromCard={presentation.usesGenericSummary}
detailsOpened={detailsOpened}
openDetails={detailsDisclosure.open}
closeDetails={detailsDisclosure.close}
widgetStateRef={widgetStateRef}
isNearViewport={isNearViewport}
/>
<MobileWidgetActions item={item} supportsDetails={presentation.supportsDetails} widgetStateRef={widgetStateRef} />
</Box>
);
};
apps/nextjs/src/components/board/mobile/mobile-presentation.spec.ts
+2 -42
View File
@@ -3,7 +3,6 @@ import { describe, expect, test } from "vitest";
import {
isMobileContextActionVisible,
resolveMobileItemPresentation,
shouldKeepMobileWidgetActionsMounted,
shouldRenderMobileWidgetActions,
} from "./mobile-presentation";
@@ -43,7 +42,7 @@ describe("resolveMobileItemPresentation", () => {
});
});
test("uses a compact one-row fallback when only details are configured", () => {
test("keeps automatic footprint defaults when only details are configured", () => {
expect(
resolveMobileItemPresentation(
{ kind: "calendar", height: 7 },
@@ -53,10 +52,8 @@ describe("resolveMobileItemPresentation", () => {
),
).toMatchObject({
width: 2,
height: 1,
displayMode: "mobileSummary",
height: 3,
supportsDetails: true,
usesGenericSummary: true,
});
});
@@ -78,7 +75,6 @@ describe("resolveMobileItemPresentation", () => {
height: 1,
displayMode: "mobileSummary",
supportsDetails: false,
usesGenericSummary: false,
eager: true,
unmountWhenOffscreen: false,
});
@@ -105,42 +101,6 @@ describe("shouldRenderMobileWidgetActions", () => {
});
});
describe("shouldKeepMobileWidgetActionsMounted", () => {
test("does not expose actions before a deferred widget is near the viewport", () => {
expect(
shouldKeepMobileWidgetActionsMounted({
isNearViewport: false,
actionsOpened: false,
detailsOpened: false,
isOpeningDetails: false,
isCompletingAction: false,
actionTriggerHasFocus: false,
}),
).toBe(false);
});
test.each([
["near the viewport", { isNearViewport: true }],
["showing its action drawer", { actionsOpened: true }],
["showing its detail view", { detailsOpened: true }],
["transitioning to details", { isOpeningDetails: true }],
["completing an action", { isCompletingAction: true }],
["retaining keyboard focus", { actionTriggerHasFocus: true }],
])("keeps actions mounted while %s", (_label, activeState) => {
expect(
shouldKeepMobileWidgetActionsMounted({
isNearViewport: false,
actionsOpened: false,
detailsOpened: false,
isOpeningDetails: false,
isCompletingAction: false,
actionTriggerHasFocus: false,
...activeState,
}),
).toBe(true);
});
});
describe("isMobileContextActionVisible", () => {
test("requires actions to opt into the read-only mobile surface", () => {
const action = { key: "configure", label: "Configure", onClick: () => undefined };
apps/nextjs/src/components/board/mobile/mobile-presentation.ts
+8 -34
View File
@@ -4,21 +4,14 @@ import type { WidgetContextMenuAction, WidgetMobilePresentation } from "@homarr/
export const resolveMobileItemPresentation = (
item: { kind: WidgetKind; height: number },
mobile: WidgetMobilePresentation | undefined,
) => {
const supportsCompactSummary = mobile?.supportsCompactSummary === true;
const supportsDetails = mobile?.supportsDetailView === true;
const usesGenericSummary = supportsDetails && !supportsCompactSummary;
return {
width: mobile?.width ?? (item.kind === "app" ? 1 : 2),
height: mobile?.height ?? (item.kind === "app" || usesGenericSummary ? 1 : Math.max(1, Math.min(item.height, 3))),
displayMode: supportsCompactSummary || usesGenericSummary ? ("mobileSummary" as const) : ("default" as const),
supportsDetails,
usesGenericSummary,
eager: mobile?.eager ?? (item.kind === "app" || item.kind === "bookmarks"),
unmountWhenOffscreen: mobile?.eager === true ? false : (mobile?.unmountWhenOffscreen ?? false),
};
};
) => ({
width: mobile?.width ?? (item.kind === "app" ? 1 : 2),
height: mobile?.height ?? (item.kind === "app" ? 1 : Math.max(1, Math.min(item.height, 3))),
displayMode: mobile?.supportsCompactSummary ? ("mobileSummary" as const) : ("default" as const),
supportsDetails: mobile?.supportsDetailView === true,
eager: mobile?.eager ?? (item.kind === "app" || item.kind === "bookmarks"),
unmountWhenOffscreen: mobile?.eager === true ? false : (mobile?.unmountWhenOffscreen ?? false),
});
export const shouldRenderMobileWidgetActions = ({
supportsDetails,
@@ -30,24 +23,5 @@ export const shouldRenderMobileWidgetActions = ({
visibleContextActionCount: number;
}) => supportsDetails || supportsRefresh || visibleContextActionCount > 0;
interface ShouldKeepMobileWidgetActionsMountedInput {
isNearViewport: boolean;
actionsOpened: boolean;
detailsOpened: boolean;
isOpeningDetails: boolean;
isCompletingAction: boolean;
actionTriggerHasFocus: boolean;
}
export const shouldKeepMobileWidgetActionsMounted = ({
isNearViewport,
actionsOpened,
detailsOpened,
isOpeningDetails,
isCompletingAction,
actionTriggerHasFocus,
}: ShouldKeepMobileWidgetActionsMountedInput) =>
isNearViewport || actionsOpened || detailsOpened || isOpeningDetails || isCompletingAction || actionTriggerHasFocus;
export const isMobileContextActionVisible = (action: WidgetContextMenuAction) =>
action.mobileVisible === true && !action.hidden;
apps/nextjs/src/components/board/mobile/mobile-viewport-observer.spec.ts
-103
View File
@@ -1,103 +0,0 @@
import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
import { getMobilePreloadRootMargin, observeMobileViewportProximity } from "./mobile-viewport-observer";
class IntersectionObserverMock {
static instances: IntersectionObserverMock[] = [];
readonly observedElements = new Set<Element>();
readonly rootMargin: string;
disconnected = false;
constructor(
private readonly callback: IntersectionObserverCallback,
options?: IntersectionObserverInit,
) {
this.rootMargin = options?.rootMargin ?? "0px";
IntersectionObserverMock.instances.push(this);
}
observe(element: Element) {
this.observedElements.add(element);
}
unobserve(element: Element) {
this.observedElements.delete(element);
}
disconnect() {
this.disconnected = true;
this.observedElements.clear();
}
emit(element: Element, isIntersecting: boolean) {
this.callback([{ target: element, isIntersecting } as IntersectionObserverEntry], this as never);
}
}
describe("observeMobileViewportProximity", () => {
beforeEach(() => {
IntersectionObserverMock.instances = [];
vi.stubGlobal("IntersectionObserver", IntersectionObserverMock);
Object.defineProperty(window, "innerHeight", { configurable: true, value: 600, writable: true });
});
afterEach(() => {
vi.unstubAllGlobals();
});
test("shares one observer across cards and recreates it once when the viewport margin changes", () => {
const firstElement = document.createElement("div");
const secondElement = document.createElement("div");
const firstListener = vi.fn();
const secondListener = vi.fn();
const stopObservingFirst = observeMobileViewportProximity(firstElement, firstListener);
const stopObservingSecond = observeMobileViewportProximity(secondElement, secondListener);
expect(IntersectionObserverMock.instances).toHaveLength(1);
expect(IntersectionObserverMock.instances[0]?.observedElements).toEqual(new Set([firstElement, secondElement]));
expect(IntersectionObserverMock.instances[0]?.rootMargin).toBe(getMobilePreloadRootMargin(600));
IntersectionObserverMock.instances[0]?.emit(firstElement, true);
expect(firstListener).toHaveBeenCalledWith(true);
expect(secondListener).not.toHaveBeenCalled();
window.dispatchEvent(new Event("resize"));
expect(IntersectionObserverMock.instances).toHaveLength(1);
window.innerHeight = 700;
window.dispatchEvent(new Event("resize"));
expect(IntersectionObserverMock.instances).toHaveLength(2);
expect(IntersectionObserverMock.instances[0]?.disconnected).toBe(true);
expect(IntersectionObserverMock.instances[1]?.observedElements).toEqual(new Set([firstElement, secondElement]));
expect(IntersectionObserverMock.instances[1]?.rootMargin).toBe(getMobilePreloadRootMargin(700));
stopObservingFirst();
stopObservingSecond();
expect(IntersectionObserverMock.instances[1]?.disconnected).toBe(true);
});
test("removes one-time subscriptions after their card first becomes near", () => {
const element = document.createElement("div");
const listener = vi.fn();
const stopObserving = observeMobileViewportProximity(element, listener, { once: true });
IntersectionObserverMock.instances[0]?.emit(element, true);
expect(listener).toHaveBeenCalledOnce();
expect(IntersectionObserverMock.instances[0]?.disconnected).toBe(true);
stopObserving();
});
test("mounts content immediately when IntersectionObserver is unavailable", () => {
vi.stubGlobal("IntersectionObserver", undefined);
const listener = vi.fn();
const stopObserving = observeMobileViewportProximity(document.createElement("div"), listener);
expect(listener).toHaveBeenCalledWith(true);
stopObserving();
});
});
apps/nextjs/src/components/board/mobile/mobile-viewport-observer.ts
-116
View File
@@ -1,116 +0,0 @@
export const mobilePreloadViewportMultiplier = 2;
export const getMobilePreloadRootMargin = (viewportHeight: number) =>
`${Math.max(0, Math.round(viewportHeight * mobilePreloadViewportMultiplier))}px 0px`;
interface MobileViewportSubscription {
listener: (isNearViewport: boolean) => void;
once: boolean;
}
interface ObserveMobileViewportOptions {
once?: boolean;
}
const subscriptions = new Map<Element, Set<MobileViewportSubscription>>();
let observer: IntersectionObserver | null = null;
let observedRootMargin: string | null = null;
let isListeningForResize = false;
const stopObservingIfIdle = () => {
if (subscriptions.size > 0) return;
observer?.disconnect();
observer = null;
observedRootMargin = null;
if (isListeningForResize) {
window.removeEventListener("resize", handleViewportResize);
isListeningForResize = false;
}
};
const removeSubscription = (element: Element, subscription: MobileViewportSubscription) => {
const elementSubscriptions = subscriptions.get(element);
if (!elementSubscriptions) return;
elementSubscriptions.delete(subscription);
if (elementSubscriptions.size > 0) return;
subscriptions.delete(element);
observer?.unobserve(element);
stopObservingIfIdle();
};
const handleIntersections: IntersectionObserverCallback = (entries) => {
for (const entry of entries) {
const elementSubscriptions = subscriptions.get(entry.target);
if (!elementSubscriptions) continue;
for (const subscription of elementSubscriptions) {
subscription.listener(entry.isIntersecting);
if (entry.isIntersecting && subscription.once) {
removeSubscription(entry.target, subscription);
}
}
}
};
const createObserver = (rootMargin: string) => {
observer?.disconnect();
observer = new IntersectionObserver(handleIntersections, { rootMargin });
observedRootMargin = rootMargin;
for (const element of subscriptions.keys()) {
observer.observe(element);
}
};
function handleViewportResize() {
const rootMargin = getMobilePreloadRootMargin(window.innerHeight);
if (rootMargin === observedRootMargin) return;
createObserver(rootMargin);
}
const ensureObserver = () => {
if (observer) return;
createObserver(getMobilePreloadRootMargin(window.innerHeight));
window.addEventListener("resize", handleViewportResize);
isListeningForResize = true;
};
export const observeMobileViewportProximity = (
element: Element,
listener: (isNearViewport: boolean) => void,
options: ObserveMobileViewportOptions = {},
) => {
if (typeof window === "undefined" || typeof IntersectionObserver === "undefined") {
listener(true);
return () => undefined;
}
const subscription: MobileViewportSubscription = {
listener,
once: options.once ?? false,
};
const elementSubscriptions = subscriptions.get(element);
if (elementSubscriptions) {
elementSubscriptions.add(subscription);
} else {
subscriptions.set(element, new Set([subscription]));
}
if (observer) {
observer.observe(element);
} else {
ensureObserver();
}
return () => {
removeSubscription(element, subscription);
};
};
apps/nextjs/src/components/board/mobile/mobile-widget-actions.tsx
+123 -179
View File
@@ -1,7 +1,7 @@
"use client";
import type { MutableRefObject } from "react";
import { useMemo, useRef, useState } from "react";
import { useMemo, useRef } from "react";
import { ActionIcon, Box, Button, Drawer, Loader, Modal, Stack } from "@mantine/core";
import { useDisclosure } from "@mantine/hooks";
import { IconDotsVertical, IconMaximize, IconRefresh } from "@tabler/icons-react";
@@ -20,40 +20,20 @@ import type { SectionItem } from "~/app/[locale]/boards/_types";
import { BoardItemContent } from "../items/item-content";
import { useHasNestedDialog } from "./mobile-dialog-stack";
import classes from "./mobile-board.module.css";
import {
isMobileContextActionVisible,
shouldKeepMobileWidgetActionsMounted,
shouldRenderMobileWidgetActions,
} from "./mobile-presentation";
import { isMobileContextActionVisible, shouldRenderMobileWidgetActions } from "./mobile-presentation";
interface MobileWidgetActionsProps {
item: SectionItem;
supportsDetails: boolean;
detailsFromCard: boolean;
detailsOpened: boolean;
openDetails: () => void;
closeDetails: () => void;
widgetStateRef: MutableRefObject<Record<string, unknown> | null>;
isNearViewport: boolean;
}
export const MobileWidgetActions = ({
item,
supportsDetails,
detailsFromCard,
detailsOpened,
openDetails,
closeDetails,
widgetStateRef,
isNearViewport,
}: MobileWidgetActionsProps) => {
export const MobileWidgetActions = ({ item, supportsDetails, widgetStateRef }: MobileWidgetActionsProps) => {
const [actionsOpened, actionsDisclosure] = useDisclosure(false);
const [isOpeningDetails, setIsOpeningDetails] = useState(false);
const [isCompletingAction, setIsCompletingAction] = useState(false);
const [actionTriggerHasFocus, setActionTriggerHasFocus] = useState(false);
const [detailsOpened, detailsDisclosure] = useDisclosure(false);
const actionTriggerRef = useRef<HTMLButtonElement | null>(null);
const detailsDialogRef = useRef<HTMLDivElement | null>(null);
const pendingContextActionRef = useRef<(() => void) | null>(null);
const openDetailsAfterActionsRef = useRef(false);
const hasNestedDialog = useHasNestedDialog(detailsOpened, detailsDialogRef);
const t = useI18n();
const settings = useSettings();
@@ -79,169 +59,133 @@ export const MobileWidgetActions = ({
const visibleContextActions = contextActions.filter(isMobileContextActionVisible);
const title = item.advancedOptions.title?.trim() || t(`widget.${item.kind}.name`);
const hasActions = shouldRenderMobileWidgetActions({
supportsDetails: supportsDetails && !detailsFromCard,
supportsDetails,
supportsRefresh: queryKey !== undefined,
visibleContextActionCount: visibleContextActions.length,
});
const shouldKeepMounted = shouldKeepMobileWidgetActionsMounted({
isNearViewport,
actionsOpened,
detailsOpened,
isOpeningDetails,
isCompletingAction,
actionTriggerHasFocus,
});
if ((!hasActions && !detailsOpened) || !shouldKeepMounted) return null;
if (!hasActions) return null;
return (
<>
{hasActions && (
<>
<ActionIcon
ref={actionTriggerRef}
className={classes.widgetAction}
variant="filled"
color="dark"
radius="xl"
size={44}
aria-label={t("board.mobile.actions", { title })}
onClick={actionsDisclosure.open}
onFocus={() => setActionTriggerHasFocus(true)}
onBlur={() => setActionTriggerHasFocus(false)}
>
<IconDotsVertical size={20} />
</ActionIcon>
<ActionIcon
ref={actionTriggerRef}
className={classes.widgetAction}
variant="filled"
color="dark"
radius="xl"
size={44}
aria-label={t("board.mobile.actions", { title })}
onClick={actionsDisclosure.open}
>
<IconDotsVertical size={20} />
</ActionIcon>
<Drawer
opened={actionsOpened}
onClose={actionsDisclosure.close}
title={title}
position="bottom"
size="auto"
padding="md"
overlayProps={{ backgroundOpacity: 0.45, blur: 2 }}
returnFocus={false}
styles={{
content: {
paddingLeft: "env(safe-area-inset-left)",
paddingRight: "env(safe-area-inset-right)",
},
}}
onExitTransitionEnd={() => {
if (isOpeningDetails) {
setIsOpeningDetails(false);
openDetails();
return;
}
<Drawer
opened={actionsOpened}
onClose={actionsDisclosure.close}
title={title}
position="bottom"
size="auto"
padding="md"
overlayProps={{ backgroundOpacity: 0.45, blur: 2 }}
styles={{
content: {
paddingLeft: "env(safe-area-inset-left)",
paddingRight: "env(safe-area-inset-right)",
},
}}
onExitTransitionEnd={() => {
if (!openDetailsAfterActionsRef.current) return;
openDetailsAfterActionsRef.current = false;
detailsDisclosure.open();
}}
closeButtonProps={{
"aria-label": t("common.action.close"),
size: 44,
}}
>
<Stack gap="xs" pb="calc(var(--mantine-spacing-sm) + env(safe-area-inset-bottom))">
{supportsDetails && (
<Button
variant="subtle"
justify="flex-start"
size="lg"
leftSection={<IconMaximize size={20} />}
onClick={() => {
openDetailsAfterActionsRef.current = true;
actionsDisclosure.close();
}}
>
{t("board.mobile.details")}
</Button>
)}
{visibleContextActions.map((action) => {
const Icon = action.icon;
return (
<Button
key={action.key}
variant="subtle"
color={action.color}
justify="flex-start"
size="lg"
disabled={action.disabled}
leftSection={Icon ? <Icon size={20} /> : undefined}
onClick={() => {
action.onClick();
actionsDisclosure.close();
}}
>
{String(translateIfNecessary(t, action.label))}
</Button>
);
})}
{queryKey && <MobileWidgetRefreshAction queryKey={queryKey} onComplete={actionsDisclosure.close} />}
</Stack>
</Drawer>
const pendingContextAction = pendingContextActionRef.current;
if (pendingContextAction) {
pendingContextActionRef.current = null;
setIsCompletingAction(false);
pendingContextAction();
return;
}
actionTriggerRef.current?.focus();
}}
closeButtonProps={{
"aria-label": t("common.action.close"),
size: 44,
}}
>
<Stack gap="xs" pb="calc(var(--mantine-spacing-sm) + env(safe-area-inset-bottom))">
{supportsDetails && !detailsFromCard && (
<Button
variant="subtle"
justify="flex-start"
size="lg"
leftSection={<IconMaximize size={20} />}
onClick={() => {
setIsOpeningDetails(true);
actionsDisclosure.close();
}}
>
{t("board.mobile.details")}
</Button>
)}
{visibleContextActions.map((action) => {
const Icon = action.icon;
return (
<Button
key={action.key}
variant="subtle"
color={action.color}
justify="flex-start"
size="lg"
disabled={action.disabled}
leftSection={Icon ? <Icon size={20} /> : undefined}
onClick={() => {
pendingContextActionRef.current = action.onClick;
setIsCompletingAction(true);
actionsDisclosure.close();
}}
>
{String(translateIfNecessary(t, action.label))}
</Button>
);
})}
{queryKey && <MobileWidgetRefreshAction queryKey={queryKey} onComplete={actionsDisclosure.close} />}
</Stack>
</Drawer>
</>
)}
{supportsDetails && (
<Modal
ref={detailsDialogRef}
opened={detailsOpened}
onClose={closeDetails}
title={title}
fullScreen
padding="md"
returnFocus={detailsFromCard}
trapFocus={!hasNestedDialog}
closeOnEscape={!hasNestedDialog}
aria-hidden={hasNestedDialog || undefined}
inert={hasNestedDialog || undefined}
onExitTransitionEnd={() => {
if (!detailsFromCard) {
actionTriggerRef.current?.focus();
}
}}
closeButtonProps={{
"aria-label": t("common.action.close"),
size: 44,
}}
styles={{
content: {
display: "flex",
flexDirection: "column",
height: "100dvh",
paddingTop: "env(safe-area-inset-top)",
paddingLeft: "env(safe-area-inset-left)",
paddingRight: "env(safe-area-inset-right)",
},
body: {
flex: "1 1 auto",
minHeight: 0,
overflowY: "auto",
paddingBottom: "calc(var(--mantine-spacing-md) + env(safe-area-inset-bottom))",
},
}}
>
<Box className={classes.detailContent}>
<BoardItemContent
item={item}
displayMode="mobileDetail"
disableContextMenu
disableItemConfiguration
widgetStateRef={widgetStateRef}
/>
</Box>
</Modal>
)}
<Modal
ref={detailsDialogRef}
opened={detailsOpened}
onClose={detailsDisclosure.close}
title={title}
fullScreen
padding="md"
returnFocus={false}
trapFocus={!hasNestedDialog}
closeOnEscape={!hasNestedDialog}
onExitTransitionEnd={() => actionTriggerRef.current?.focus()}
closeButtonProps={{
"aria-label": t("common.action.close"),
size: 44,
}}
styles={{
content: {
display: "flex",
flexDirection: "column",
height: "100dvh",
paddingTop: "env(safe-area-inset-top)",
paddingLeft: "env(safe-area-inset-left)",
paddingRight: "env(safe-area-inset-right)",
},
body: {
flex: "1 1 auto",
minHeight: 0,
overflowY: "auto",
paddingBottom: "calc(var(--mantine-spacing-md) + env(safe-area-inset-bottom))",
},
}}
>
<Box className={classes.detailContent}>
<BoardItemContent
item={item}
displayMode="mobileDetail"
disableContextMenu
isReadOnly
widgetStateRef={widgetStateRef}
/>
</Box>
</Modal>
</>
);
};
apps/nextjs/src/components/board/sections/section-actions.tsx
+9 -6
View File
@@ -1,10 +1,10 @@
import { useCallback } from "react";
import { getCurrentLayout } from "@homarr/boards/context";
import { useUpdateBoard } from "@homarr/boards/updater";
interface MoveAndResizeInnerSection {
innerSectionId: string;
layoutId: string;
xOffset: number;
yOffset: number;
width: number;
@@ -12,7 +12,6 @@ interface MoveAndResizeInnerSection {
}
interface MoveInnerSectionToSection {
innerSectionId: string;
layoutId: string;
sectionId: string;
xOffset: number;
yOffset: number;
@@ -24,7 +23,7 @@ export const useSectionActions = () => {
const { updateBoard } = useUpdateBoard();
const moveAndResizeInnerSection = useCallback(
({ innerSectionId, layoutId, ...positionProps }: MoveAndResizeInnerSection) => {
({ innerSectionId, ...positionProps }: MoveAndResizeInnerSection) => {
updateBoard((previous) => ({
...previous,
sections: previous.sections.map((section) => {
@@ -32,10 +31,12 @@ export const useSectionActions = () => {
if (section.id !== innerSectionId) return section;
if (section.kind !== "container") return section;
const currentLayout = getCurrentLayout(previous);
return {
...section,
layouts: section.layouts.map((layout) => {
if (layout.layoutId !== layoutId) return layout;
if (layout.layoutId !== currentLayout) return layout;
return {
...layout,
...positionProps,
@@ -49,7 +50,7 @@ export const useSectionActions = () => {
);
const moveInnerSectionToSection = useCallback(
({ innerSectionId, layoutId, sectionId, ...positionProps }: MoveInnerSectionToSection) => {
({ innerSectionId, sectionId, ...positionProps }: MoveInnerSectionToSection) => {
updateBoard((previous) => {
return {
...previous,
@@ -58,10 +59,12 @@ export const useSectionActions = () => {
if (section.id !== innerSectionId) return section;
if (section.kind !== "container") return section;
const currentLayout = getCurrentLayout(previous);
return {
...section,
layouts: section.layouts.map((layout) => {
if (layout.layoutId !== layoutId) return layout;
if (layout.layoutId !== currentLayout) return layout;
return {
...layout,
...positionProps,
apps/nextjs/src/components/board/use-mobile-board.spec.ts
+1 -28
View File
@@ -1,10 +1,6 @@
import { describe, expect, test } from "vitest";
import {
resolveIsAutomaticMobileBoard,
resolveMobileBoardViewport,
shouldShowMobileBoardViewportSkeleton,
} from "./use-mobile-board";
import { resolveMobileBoardViewport } from "./use-mobile-board";
describe("resolveMobileBoardViewport", () => {
test("keeps phones mobile regardless of their viewport width", () => {
@@ -60,26 +56,3 @@ describe("resolveMobileBoardViewport", () => {
});
});
});
describe("resolveIsAutomaticMobileBoard", () => {
test.each([
[true, true, true],
[true, false, false],
[false, true, false],
[false, false, false],
])(
"requires both a mobile viewport and the server setting (viewport: %s, setting: %s)",
(isMobileViewport, enableAutomaticMobileLayout, expected) => {
expect(resolveIsAutomaticMobileBoard({ isMobileViewport, enableAutomaticMobileLayout })).toBe(expected);
},
);
test("does not show the tablet resolution skeleton in legacy mode", () => {
expect(
shouldShowMobileBoardViewportSkeleton({
enableAutomaticMobileLayout: false,
isResolved: false,
}),
).toBe(false);
});
});
apps/nextjs/src/components/board/use-mobile-board.tsx
+2 -36
View File
@@ -5,8 +5,6 @@ import { createContext, useContext, useEffect, useState } from "react";
import { Box, Group, Skeleton, Stack } from "@mantine/core";
import { useMediaQuery } from "@mantine/hooks";
import { useSettings } from "@homarr/settings";
export const mobileBoardMediaQuery = "(max-width: 48em)";
export type MobileBoardDeviceClass = "phone" | "tablet" | "desktop";
@@ -72,7 +70,6 @@ export const MobileBoardViewportProvider = ({
initialDeviceClass,
children,
}: PropsWithChildren<{ initialDeviceClass: MobileBoardDeviceClass }>) => {
const { enableAutomaticMobileLayout } = useSettings();
const [hasResolvedClientWidth, setHasResolvedClientWidth] = useState(false);
const matchesMobileWidth = useMediaQuery(mobileBoardMediaQuery, initialDeviceClass === "phone", {
getInitialValueInEffect: true,
@@ -90,42 +87,11 @@ export const MobileBoardViewportProvider = ({
return (
<MobileBoardViewportContext.Provider value={viewport}>
{shouldShowMobileBoardViewportSkeleton({
enableAutomaticMobileLayout,
isResolved: viewport.isResolved,
}) ? (
<MobileBoardViewportSkeleton />
) : (
children
)}
{viewport.isResolved ? children : <MobileBoardViewportSkeleton />}
</MobileBoardViewportContext.Provider>
);
};
export const useMobileBoardViewport = () => useContext(MobileBoardViewportContext);
export const resolveIsAutomaticMobileBoard = ({
isMobileViewport,
enableAutomaticMobileLayout,
}: {
isMobileViewport: boolean;
enableAutomaticMobileLayout: boolean;
}) => isMobileViewport && enableAutomaticMobileLayout;
export const shouldShowMobileBoardViewportSkeleton = ({
enableAutomaticMobileLayout,
isResolved,
}: {
enableAutomaticMobileLayout: boolean;
isResolved: boolean;
}) => enableAutomaticMobileLayout && !isResolved;
export const useIsMobileBoard = () => {
const viewport = useMobileBoardViewport();
const { enableAutomaticMobileLayout } = useSettings();
return resolveIsAutomaticMobileBoard({
isMobileViewport: viewport.isMobile,
enableAutomaticMobileLayout,
});
};
export const useIsMobileBoard = () => useMobileBoardViewport().isMobile;
apps/nextjs/src/components/language/current-language-combobox.tsx
+1 -2
View File
@@ -1,6 +1,5 @@
"use client";
import { requestBoardEditAction } from "@homarr/boards/edit-mode";
import { useChangeLocale, useCurrentLocale } from "@homarr/translation/client";
import { LanguageCombobox } from "./language-combobox";
@@ -17,7 +16,7 @@ export const CurrentLanguageCombobox = ({ width, withinPortal }: CurrentLanguage
return (
<LanguageCombobox
value={currentLocale}
onChange={(locale) => requestBoardEditAction(() => changeLocale(locale))}
onChange={changeLocale}
isPending={isPending}
width={width}
withinPortal={withinPortal}