Merge branch 'feat/auto-mobile-boards' into feat/homarr-assistant

packages/widgets/src/_inputs/widget-multiReleasesRepositories-input.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import {
   Accordion,
   ActionIcon,
@@ -21,7 +21,6 @@ import {
   Tooltip,
 } from "@mantine/core";
 import type { FormErrors } from "@mantine/form";
-import { useDebouncedValue } from "@mantine/hooks";
 import {
   IconAlertTriangleFilled,
   IconBrandDocker,
@@ -48,7 +47,7 @@ import {
   normalizeReleaseProviderIdentifier,
   releaseProviderKinds,
 } from "@homarr/definitions";
-import { findBestIconMatch, IconPicker } from "@homarr/forms-collection";
+import { IconPicker } from "@homarr/forms-collection";
 import { createModal, useModalAction } from "@homarr/modals";
 import { showErrorNotification } from "@homarr/notifications";
 import { useScopedI18n } from "@homarr/translation/client";
@@ -417,13 +416,6 @@ const RepositoryEditModal = createModal<RepositoryEditProps>(({ innerProps, acti
   const [loading, setLoading] = useState(false);
   const [tempRepository, setTempRepository] = useState(() => ({ ...innerProps.repository }));
   const [formErrors, setFormErrors] = useState<FormErrors>({});
-  // Allows user to not select an icon by removing the url from the input,
-  // will only try and get an icon if the name or identifier changes
-  const [autoSetIcon, setAutoSetIcon] = useState(false);
-
-  // Debounce the name value with 200ms delay
-  const [debouncedName] = useDebouncedValue(tempRepository.name, 800);
-
   const handleConfirm = useCallback(() => {
     setLoading(true);
 
@@ -448,25 +440,6 @@ const RepositoryEditModal = createModal<RepositoryEditProps>(({ innerProps, acti
     setTempRepository((prev) => ({ ...prev, ...changedValue }));
   }, []);
 
-  // Auto-select icon based on identifier formatted name with debounced search
-  const { data: iconsData } = clientApi.icon.findIcons.useQuery(
-    {
-      searchText: debouncedName,
-    },
-    {
-      enabled: autoSetIcon && (debouncedName?.length ?? 0) > 3,
-    },
-  );
-
-  useEffect(() => {
-    if (autoSetIcon && debouncedName && !tempRepository.iconUrl && iconsData?.icons) {
-      const bestMatch = findBestIconMatch(debouncedName, iconsData.icons);
-      if (bestMatch) {
-        handleChange({ iconUrl: bestMatch });
-      }
-    }
-  }, [debouncedName, iconsData, tempRepository, handleChange, autoSetIcon]);
-
   return (
     <Stack>
       <Group align="start" wrap="nowrap" grow preventGrowOverflow={false}>
@@ -498,8 +471,6 @@ const RepositoryEditModal = createModal<RepositoryEditProps>(({ innerProps, acti
               identifier: event.currentTarget.value,
               name,
             });
-
-            if (event.currentTarget.value) setAutoSetIcon(true);
           }}
           error={formErrors[`${innerProps.fieldPath}.identifier`]}
           style={{ flex: 0.7 }}
@@ -520,11 +491,7 @@ const RepositoryEditModal = createModal<RepositoryEditProps>(({ innerProps, acti
         <TextInput
           label={tRepository("name.label")}
           value={tempRepository.name ?? ""}
-          onChange={(event) => {
-            handleChange({ name: event.currentTarget.value });
-
-            if (event.currentTarget.value) setAutoSetIcon(true);
-          }}
+          onChange={(event) => handleChange({ name: event.currentTarget.value })}
           error={formErrors[`${innerProps.fieldPath}.name`]}
           style={{ flex: 0.3 }}
         />
@@ -533,9 +500,9 @@ const RepositoryEditModal = createModal<RepositoryEditProps>(({ innerProps, acti
           <IconPicker
             withAsterisk={false}
             value={tempRepository.iconUrl ?? ""}
+            suggestedSearch={tempRepository.name || tempRepository.identifier}
             onChange={(url) => {
               if (url === "") {
-                setAutoSetIcon(false);
                 handleChange({ iconUrl: undefined });
               } else {
                 handleChange({ iconUrl: url });

packages/widgets/src/beszel/_shared/stats-view.tsx

@@ -20,22 +20,17 @@ import {
   useSystemChartData,
 } from "./chart";
 import { chartAxisFormatters, formatByteRate, formatGB, formatPercent, formatStorageBytes } from "./format";
-import type { BeszelTooltipLayer } from "./tooltip";
 import { makeTooltipProps } from "./tooltip";
 import { useLiveStats } from "./use-live-stats";
 
 const CHART_HEIGHT = 180;
 const MB = 1024 * 1024;
-const makeTooltipSet = (layer: BeszelTooltipLayer) => ({
-  percent: makeTooltipProps(formatPercent, false, layer),
-  gigabytes: makeTooltipProps(formatGB, true, layer),
-  rate: makeTooltipProps(formatByteRate, true, layer),
-  percentTotal: makeTooltipProps(formatPercent, true, layer),
-  bytesTotal: makeTooltipProps(formatStorageBytes, true, layer),
-});
-const tooltipSets = {
-  background: makeTooltipSet("background"),
-  modal: makeTooltipSet("modal"),
+const tooltips = {
+  percent: makeTooltipProps(formatPercent),
+  gigabytes: makeTooltipProps(formatGB, true),
+  rate: makeTooltipProps(formatByteRate, true),
+  percentTotal: makeTooltipProps(formatPercent, true),
+  bytesTotal: makeTooltipProps(formatStorageBytes, true),
 };
 
 const ChartSkeleton = () => (
@@ -66,7 +61,6 @@ interface BeszelStatsViewProps {
   visibility: BeszelStatsVisibility;
   columns: 1 | 2;
   onSwitchToHistorical?: () => void;
-  tooltipLayer?: BeszelTooltipLayer;
 }
 
 const whenVisible = <T,>(visible: boolean, data: T | undefined) => (visible ? data : undefined);
@@ -78,14 +72,11 @@ export function BeszelStatsView({
   visibility,
   columns,
   onSwitchToHistorical,
-  tooltipLayer = "background",
 }: BeszelStatsViewProps) {
   const t = useScopedI18n("widget.beszelSystemStats");
   const locale = useCurrentIntlLocale();
   const showDocker = visibility.dockerCpu || visibility.dockerMemory || visibility.dockerNetwork;
   const isLive = timePeriod === "1m";
-  const tooltips = tooltipSets[tooltipLayer];
-
   const historicalQuery = clientApi.widget.beszel.getSystemStats.useQuery(
     { integrationIds, systemId, timePeriod, includeDocker: showDocker },
     { refetchInterval: isLive ? false : 5_000, enabled: !isLive && systemId !== "" },

packages/widgets/src/beszel/_shared/system-stats-modal.tsx

@@ -50,7 +50,6 @@ export const BeszelSystemStatsModal = createModal<BeszelSystemStatsModalProps>((
         timePeriod={timePeriod}
         visibility={allCharts}
         columns={2}
-        tooltipLayer="modal"
         onSwitchToHistorical={() => setTimePeriod("1h")}
       />
     </Stack>

packages/widgets/src/beszel/_shared/tooltip.tsx

@@ -1,8 +1,6 @@
 "use client";
 
 import type { CSSProperties } from "react";
-import { createPortal } from "react-dom";
-import { useCallback, useEffect, useRef, useState } from "react";
 import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
 
 import { formatLocalizedDate } from "../../common/locale";
@@ -46,64 +44,18 @@ export interface TooltipPayloadItem {
   payload?: Record<string, unknown>;
 }
 
-interface PortalTooltipProps {
+interface BeszelTooltipProps {
   active?: boolean;
   label?: string;
   payload?: TooltipPayloadItem[];
   formatter: (value: number) => string;
   showTotal?: boolean;
-  layer: BeszelTooltipLayer;
 }
 
-export type BeszelTooltipLayer = "background" | "modal";
-
-const MARGIN = 14;
-const PortalTooltipContent = ({ active, label, payload, formatter, showTotal, layer }: PortalTooltipProps) => {
+const BeszelTooltipContent = ({ active, label, payload, formatter, showTotal }: BeszelTooltipProps) => {
   const locale = useCurrentIntlLocale();
   const t = useScopedI18n("common");
-  const mouseRef = useRef({ x: 0, y: 0 });
-  const [pos, setPos] = useState({ x: 0, y: 0 });
-  const rafRef = useRef(0);
-  const tooltipRef = useRef<HTMLDivElement>(null);
-
-  const handleMouse = useCallback((e: MouseEvent) => {
-    mouseRef.current = { x: e.clientX, y: e.clientY };
-    cancelAnimationFrame(rafRef.current);
-    rafRef.current = requestAnimationFrame(() => {
-      const el = tooltipRef.current;
-      const mx = mouseRef.current.x;
-      const my = mouseRef.current.y;
-      if (!el) {
-        setPos({ x: mx + MARGIN, y: my });
-        return;
-      }
-
-      const { width, height } = el.getBoundingClientRect();
-      const vw = window.innerWidth;
-      const vh = window.innerHeight;
-
-      let x = mx + MARGIN;
-      let y = my - height / 2;
-
-      if (x + width > vw - MARGIN) x = mx - width - MARGIN;
-      if (y < MARGIN) y = MARGIN;
-      if (y + height > vh - MARGIN) y = vh - MARGIN - height;
-
-      setPos({ x, y });
-    });
-  }, []);
-
   const isActive = active && (payload?.length ?? 0) > 0;
-
-  useEffect(() => {
-    if (!isActive) return;
-    document.addEventListener("mousemove", handleMouse);
-    return () => {
-      document.removeEventListener("mousemove", handleMouse);
-      cancelAnimationFrame(rafRef.current);
-    };
-  }, [isActive, handleMouse]);
-
   if (!isActive) return null;
 
   const deduped = new Map<string, TooltipPayloadItem>();
@@ -120,54 +72,37 @@ const PortalTooltipContent = ({ active, label, payload, formatter, showTotal, la
     : label;
   const total = sorted.reduce((sum, p) => sum + p.value, 0);
 
-  const portalStyle: CSSProperties = {
-    position: "fixed",
-    left: pos.x,
-    top: pos.y,
-    zIndex:
-      layer === "modal" ? "var(--homarr-z-index-modal-tooltip)" : "var(--homarr-z-index-widget-background-tooltip)",
-    pointerEvents: "none",
-  };
-
-  return createPortal(
-    <div ref={tooltipRef} style={portalStyle}>
-      <div style={styles.wrapper}>
-        <div style={styles.header}>{tooltipLabel}</div>
-        {sorted.map((item) => (
-          <div key={item.dataKey} style={styles.row}>
-            <div style={{ ...styles.indicator, background: item.color }} />
-            <span style={styles.name}>{item.name}</span>
-            <span style={styles.value}>{formatter(item.value)}</span>
-          </div>
-        ))}
-        {showTotal && sorted.length > 1 && (
-          <div style={{ ...styles.row, ...styles.separator }}>
-            <span style={styles.name}>{t("total")}</span>
-            <span style={styles.value}>{formatter(total)}</span>
-          </div>
-        )}
-      </div>
-    </div>,
-    document.body,
+  return (
+    <div style={styles.wrapper}>
+      <div style={styles.header}>{tooltipLabel}</div>
+      {sorted.map((item) => (
+        <div key={item.dataKey} style={styles.row}>
+          <div style={{ ...styles.indicator, background: item.color }} />
+          <span style={styles.name}>{item.name}</span>
+          <span style={styles.value}>{formatter(item.value)}</span>
+        </div>
+      ))}
+      {showTotal && sorted.length > 1 && (
+        <div style={{ ...styles.row, ...styles.separator }}>
+          <span style={styles.name}>{t("total")}</span>
+          <span style={styles.value}>{formatter(total)}</span>
+        </div>
+      )}
+    </div>
   );
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const makeTooltipProps = (
-  formatter: (v: number) => string,
-  showTotal = false,
-  layer: BeszelTooltipLayer = "background",
-) => ({
+export const makeTooltipProps = (formatter: (v: number) => string, showTotal = false) => ({
   content: (props: any) => (
-    <PortalTooltipContent
+    <BeszelTooltipContent
       active={props.active}
       label={props.label != null ? String(props.label) : undefined}
       payload={props.payload}
       formatter={formatter}
       showTotal={showTotal}
-      layer={layer}
     />
   ),
-  wrapperStyle: { visibility: "hidden" as const, position: "absolute" as const, width: 0, height: 0 },
+  wrapperStyle: { pointerEvents: "none" as const },
   isAnimationActive: false,
 });