fix: improve mobile header and board menus

2026-08-27 07:24:40 +02:00
1 parent 1b2f1bd720
commit 63e1bc7f6c
@@ -15,6 +15,10 @@
  outline: none;
 }

+.results {
+  min-height: 0;
+}
+
 .searchInput {
  border-color: color-mix(in srgb, var(--mantine-color-default-border) 72%, transparent);
  background: color-mix(in srgb, var(--mantine-color-body) 54%, transparent);
@@ -44,3 +48,19 @@
  border-color: var(--mantine-primary-color-filled);
  box-shadow: var(--mantine-shadow-md);
 }
+
+@media (max-width: $mantine-breakpoint-sm) {
+  .modalContent {
+    height: calc(100dvh - var(--modal-y-offset) * 2);
+  }
+
+  .modalBody,
+  .content {
+    min-height: 0;
+    height: 100%;
+  }
+
+  .results {
+    flex: 1;
+  }
+}
@@ -228,7 +228,13 @@ export const BoardSwitcher = ({ children }: BoardSwitcherProps) => {
            radius="xl"
            classNames={{ input: classes.searchInput }}
          />
-          <ScrollArea.Autosize mah="min(80vh, 42rem)" type="never">
+          <ScrollArea.Autosize
+            mah="min(80vh, 42rem)"
+            type="never"
+            scrollbars="y"
+            overscrollBehavior="contain"
+            className={classes.results}
+          >
            {results}
          </ScrollArea.Autosize>
        </Stack>
@@ -0,0 +1,14 @@
+.mobileDrawerContent {
+  height: min(80dvh, rem(640px));
+  max-height: 80dvh;
+  overscroll-behavior: contain;
+}
+
+.mobileDrawerBody {
+  padding-bottom: max(var(--mantine-spacing-md), env(safe-area-inset-bottom));
+}
+
+.mobileActionList {
+  display: flex;
+  flex-direction: column;
+}
@@ -2,7 +2,8 @@

 import type { MutableRefObject, ReactNode, RefObject } from "react";
 import { useCallback, useMemo, useState } from "react";
-import { Group, Loader, Menu, Text, Tooltip } from "@mantine/core";
+import { Drawer, Group, Loader, Menu, Text, Tooltip } from "@mantine/core";
+import { useMediaQuery } from "@mantine/hooks";
 import { IconAlertTriangle, IconCircleCheck, IconMaximize, IconRefresh, IconSettings } from "@tabler/icons-react";
 import type { QueryClient, QueryKey } from "@tanstack/react-query";
 import { useIsFetching, useQueryClient } from "@tanstack/react-query";
@@ -20,7 +21,7 @@ import { getWidgetName } from "@homarr/definitions";
 import { translateIfNecessary } from "@homarr/translation";
 import type { TranslationFunction } from "@homarr/translation";
 import { useI18n } from "@homarr/translation/client";
-import type { WidgetDefinition, WidgetRuntimeRef } from "@homarr/widgets/definition";
+import type { WidgetContextMenuAction, WidgetDefinition, WidgetRuntimeRef } from "@homarr/widgets/definition";
 import { getWidgetQueryKeys, getWidgetRuntimeQueries, supportsAdvancedFocus } from "@homarr/widgets/definition";
 import { reduceWidgetOptionsWithDefinition } from "@homarr/widgets/manifest";
 import { getWidgetOptionTranslationNamespace } from "@homarr/widgets/option-translation";
@@ -31,6 +32,9 @@ import { useBoardPermissions } from "../permissions/client";
 import { useItemActions } from "./item-actions";
 import { LazyWidgetEditModal, preloadWidgetEditModal } from "./lazy-widget-edit-modal";
 import { matchesWidgetItemQuery } from "./widget-query-scope";
+import classes from "./widget-context-menu.module.css";
+
+type ToggleOption = [key: string, option: { type: string; skipContextMenu?: boolean }];

 interface WidgetContextMenuProps {
  item: SectionItem;
@@ -56,8 +60,6 @@ export const WidgetContextMenu = ({
  const { hasChangeAccess } = useBoardPermissions(board);
  const { updateAndPersistBoard } = usePersistBoard(board);
  const t = useI18n();
-  const tMenu = useI18n("item.menu.label");
-  const tCommon = useI18n("common.action");
  const settings = useSettings();
  const { openModal } = useModalAction(LazyWidgetEditModal);
  const { updateItemOptions, updateItemAdvancedOptions, updateItemIntegrations } = useItemActions();
@@ -72,6 +74,7 @@ export const WidgetContextMenu = ({
  const { open: openAdvancedFocus } = useAdvancedFocus();
  const integrationsWithInteractAccess = useIntegrationsWithInteractAccess();
  const [menuOpened, setMenuOpened] = useState(false);
+  const isMobile = useMediaQuery("(max-width: 48em)");

  const persistBoard = useCallback(
    (updater: (previous: typeof board) => typeof board) => {
@@ -134,11 +137,12 @@ export const WidgetContextMenu = ({
    [item.id, persistBoard],
  );

-  type OptionDef = { type: string; skipContextMenu?: boolean };
  const toggleOptions = useMemo(() => {
    if (!canConfigureWidget) return [];
-    const rawOptions = definition.createOptions(settings) as unknown as Record<string, OptionDef>;
-    return Object.entries(rawOptions).filter(([, option]) => option.type === "switch" && !option.skipContextMenu);
+    const rawOptions = definition.createOptions(settings) as unknown as Record<string, ToggleOption[1]>;
+    return Object.entries(rawOptions).filter(
+      ([, option]) => option.type === "switch" && !option.skipContextMenu,
+    ) as ToggleOption[];
  }, [canConfigureWidget, definition, settings]);

  const widgetContextActions =
@@ -222,11 +226,37 @@ export const WidgetContextMenu = ({
    [setItemOptions],
  );

+  const handleOpenAdvancedFocus = useCallback(() => {
+    if (!sourceRef.current) return;
+    openAdvancedFocus(item.id, sourceRef.current, {
+      restoreFocusTarget:
+        sourceRef.current.querySelector<HTMLElement>("[data-advanced-focus-trigger]") ?? sourceRef.current,
+    });
+  }, [item.id, openAdvancedFocus, sourceRef]);
+
  if (!session || !settings.enableRightClickOnWidgets || isEditMode || item.kind === "app") {
    return <>{children}</>;
  }

  const visibleWidgetActions = widgetContextActions.filter((action) => !action.hidden);
+  const actionContent = (
+    <WidgetContextActions
+      canOpenAdvancedFocus={canOpenAdvancedFocus}
+      onOpenAdvancedFocus={handleOpenAdvancedFocus}
+      toggleOptions={toggleOptions}
+      options={options}
+      onToggle={handleToggle}
+      itemKind={item.kind}
+      visibleWidgetActions={visibleWidgetActions}
+      isWidgetFetching={isWidgetFetching}
+      onRefetch={handleRefetch}
+      queryClient={queryClient}
+      matchesWidgetQuery={matchesWidgetQuery}
+      onEdit={openEditModal}
+      canConfigureWidget={canConfigureWidget}
+      isIntegrationDataPending={hasSupportedIntegrations && isPending}
+    />
+  );

  return (
    <Menu
@@ -239,91 +269,137 @@ export const WidgetContextMenu = ({
      onChange={setMenuOpened}
    >
      <Menu.ContextMenu>{children}</Menu.ContextMenu>
-      <Menu.Dropdown>
-        {canOpenAdvancedFocus && (
-          <>
-            <Menu.Item
-              closeMenuOnClick
-              leftSection={<IconMaximize size={16} />}
-              onClick={() => {
-                if (sourceRef.current)
-                  openAdvancedFocus(item.id, sourceRef.current, {
-                    restoreFocusTarget:
-                      sourceRef.current.querySelector<HTMLElement>("[data-advanced-focus-trigger]") ??
-                      sourceRef.current,
-                  });
-              }}
-            >
-              {t("item.advancedFocus.open")}
-            </Menu.Item>
-            <Menu.Divider />
-          </>
-        )}
-
-        {toggleOptions.length > 0 && (
-          <>
-            <Menu.Label>{tMenu("options")}</Menu.Label>
-            {toggleOptions.map(([key]) => (
-              <Menu.CheckboxItem key={key} checked={Boolean(options[key])} onChange={handleToggle(key)}>
-                {t(`${getWidgetOptionTranslationNamespace(item.kind, key)}.label` as never)}
-              </Menu.CheckboxItem>
-            ))}
-          </>
-        )}
-
-        {visibleWidgetActions.length > 0 && (
-          <>
-            {toggleOptions.length > 0 && <Menu.Divider />}
-            <Menu.Label>{tMenu("actions")}</Menu.Label>
-            {visibleWidgetActions.map((action) => {
-              const Icon = action.icon;
-              return (
-                <Menu.Item
-                  key={action.key}
-                  closeMenuOnClick
-                  leftSection={Icon ? <Icon size={16} /> : undefined}
-                  onClick={action.onClick}
-                  disabled={action.disabled}
-                  color={action.color}
-                >
-                  {translateIfNecessary(t, action.label)}
-                </Menu.Item>
-              );
-            })}
-          </>
-        )}
-
-        {(toggleOptions.length > 0 || visibleWidgetActions.length > 0) && <Menu.Divider />}
-        <Menu.Item
-          leftSection={isWidgetFetching ? <Loader size={16} /> : <IconRefresh size={16} />}
-          onClick={handleRefetch}
-          disabled={isWidgetFetching}
+      {isMobile ? (
+        <Drawer
+          opened={menuOpened}
+          onClose={() => setMenuOpened(false)}
+          position="bottom"
+          size="min(80dvh, 40rem)"
+          title={getWidgetName(item.kind, t)}
+          classNames={{ content: classes.mobileDrawerContent, body: classes.mobileDrawerBody }}
        >
-          <Group justify="space-between" wrap="nowrap" gap="sm">
-            {tCommon("refresh")}
-            <WidgetQueryStatus
-              queryClient={queryClient}
-              matchesQuery={matchesWidgetQuery}
-              isFetching={isWidgetFetching}
-              t={t}
-            />
-          </Group>
-        </Menu.Item>
-        <Menu.Item
-          closeMenuOnClick
-          leftSection={<IconSettings size={16} />}
-          onClick={openEditModal}
-          onFocus={preloadWidgetEditModal}
-          onPointerEnter={preloadWidgetEditModal}
-          disabled={!canConfigureWidget || (hasSupportedIntegrations && isPending)}
-        >
-          {tMenu("settings")}
-        </Menu.Item>
-      </Menu.Dropdown>
+          <div className={classes.mobileActionList} role="menu" aria-orientation="vertical" data-menu-dropdown>
+            {actionContent}
+          </div>
+        </Drawer>
+      ) : (
+        <Menu.Dropdown>{actionContent}</Menu.Dropdown>
+      )}
    </Menu>
  );
 };

+interface WidgetContextActionsProps {
+  canOpenAdvancedFocus: boolean;
+  onOpenAdvancedFocus: () => void;
+  toggleOptions: ToggleOption[];
+  options: Record<string, unknown>;
+  onToggle: (key: string) => (checked: boolean) => void;
+  itemKind: SectionItem["kind"];
+  visibleWidgetActions: WidgetContextMenuAction[];
+  isWidgetFetching: boolean;
+  onRefetch: () => void;
+  queryClient: QueryClient;
+  matchesWidgetQuery: (queryKey: QueryKey) => boolean;
+  onEdit: () => void;
+  canConfigureWidget: boolean;
+  isIntegrationDataPending: boolean;
+}
+
+const WidgetContextActions = ({
+  canOpenAdvancedFocus,
+  onOpenAdvancedFocus,
+  toggleOptions,
+  options,
+  onToggle,
+  itemKind,
+  visibleWidgetActions,
+  isWidgetFetching,
+  onRefetch,
+  queryClient,
+  matchesWidgetQuery,
+  onEdit,
+  canConfigureWidget,
+  isIntegrationDataPending,
+}: WidgetContextActionsProps) => {
+  const t = useI18n();
+  const tMenu = useI18n("item.menu.label");
+  const tCommon = useI18n("common.action");
+
+  return (
+    <>
+      {canOpenAdvancedFocus && (
+        <>
+          <Menu.Item closeMenuOnClick leftSection={<IconMaximize size={16} />} onClick={onOpenAdvancedFocus}>
+            {t("item.advancedFocus.open")}
+          </Menu.Item>
+          <Menu.Divider />
+        </>
+      )}
+
+      {toggleOptions.length > 0 && (
+        <>
+          <Menu.Label>{tMenu("options")}</Menu.Label>
+          {toggleOptions.map(([key]) => (
+            <Menu.CheckboxItem key={key} checked={Boolean(options[key])} onChange={onToggle(key)}>
+              {t(`${getWidgetOptionTranslationNamespace(itemKind, key)}.label` as never)}
+            </Menu.CheckboxItem>
+          ))}
+        </>
+      )}
+
+      {visibleWidgetActions.length > 0 && (
+        <>
+          {toggleOptions.length > 0 && <Menu.Divider />}
+          <Menu.Label>{tMenu("actions")}</Menu.Label>
+          {visibleWidgetActions.map((action) => {
+            const Icon = action.icon;
+            return (
+              <Menu.Item
+                key={action.key}
+                closeMenuOnClick
+                leftSection={Icon ? <Icon size={16} /> : undefined}
+                onClick={action.onClick}
+                disabled={action.disabled}
+                color={action.color}
+              >
+                {translateIfNecessary(t, action.label)}
+              </Menu.Item>
+            );
+          })}
+        </>
+      )}
+
+      {(toggleOptions.length > 0 || visibleWidgetActions.length > 0) && <Menu.Divider />}
+      <Menu.Item
+        leftSection={isWidgetFetching ? <Loader size={16} /> : <IconRefresh size={16} />}
+        onClick={onRefetch}
+        disabled={isWidgetFetching}
+      >
+        <Group justify="space-between" wrap="nowrap" gap="sm">
+          {tCommon("refresh")}
+          <WidgetQueryStatus
+            queryClient={queryClient}
+            matchesQuery={matchesWidgetQuery}
+            isFetching={isWidgetFetching}
+            t={t}
+          />
+        </Group>
+      </Menu.Item>
+      <Menu.Item
+        closeMenuOnClick
+        leftSection={<IconSettings size={16} />}
+        onClick={onEdit}
+        onFocus={preloadWidgetEditModal}
+        onPointerEnter={preloadWidgetEditModal}
+        disabled={!canConfigureWidget || isIntegrationDataPending}
+      >
+        {tMenu("settings")}
+      </Menu.Item>
+    </>
+  );
+};
+
 interface WidgetQueryStatusProps {
  queryClient: QueryClient;
  matchesQuery: (queryKey: QueryKey) => boolean;