feat(settings): add simple-ping settings (#2118)

apps/nextjs/src/components/board/items/item-actions.tsx

@@ -1,9 +1,9 @@
 import { useCallback } from "react";
 
+import { useUpdateBoard } from "@homarr/boards/updater";
 import type { BoardItemAdvancedOptions } from "@homarr/validation";
 
 import type { Item } from "~/app/[locale]/boards/_types";
-import { useUpdateBoard } from "~/app/[locale]/boards/(content)/_client";
 import type { CreateItemInput } from "./actions/create-item";
 import { createItemCallback } from "./actions/create-item";
 import type { DuplicateItemInput } from "./actions/duplicate-item";

apps/nextjs/src/components/board/items/item-content.tsx

@@ -5,11 +5,13 @@ import combineClasses from "clsx";
 import { NoIntegrationSelectedError } from "node_modules/@homarr/widgets/src/errors";
 import { ErrorBoundary } from "react-error-boundary";
 
+import { useRequiredBoard } from "@homarr/boards/context";
+import { useEditMode } from "@homarr/boards/edit-mode";
+import { useSettings } from "@homarr/settings";
 import { loadWidgetDynamic, reduceWidgetOptionsWithDefaultValues, widgetImports } from "@homarr/widgets";
 import { WidgetError } from "@homarr/widgets/errors";
 
 import type { Item } from "~/app/[locale]/boards/_types";
-import { useEditMode, useRequiredBoard } from "~/app/[locale]/boards/(content)/_context";
 import classes from "../sections/item.module.css";
 import { useItemActions } from "./item-actions";
 import { BoardItemMenu } from "./item-menu";
@@ -53,11 +55,12 @@ interface InnerContentProps {
 }
 
 const InnerContent = ({ item, ...dimensions }: InnerContentProps) => {
+  const settings = useSettings();
   const board = useRequiredBoard();
   const [isEditMode] = useEditMode();
   const Comp = loadWidgetDynamic(item.kind);
   const { definition } = widgetImports[item.kind];
-  const options = reduceWidgetOptionsWithDefaultValues(item.kind, item.options);
+  const options = reduceWidgetOptionsWithDefaultValues(item.kind, settings, item.options);
   const newItem = { ...item, options };
   const { updateItemOptions } = useItemActions();
   const updateOptions = ({ newOptions }: { newOptions: Record<string, unknown> }) =>

apps/nextjs/src/components/board/items/item-menu.tsx

@@ -3,13 +3,14 @@ import { ActionIcon, Menu } from "@mantine/core";
 import { IconCopy, IconDotsVertical, IconLayoutKanban, IconPencil, IconTrash } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
+import { useEditMode } from "@homarr/boards/edit-mode";
 import { useConfirmModal, useModalAction } from "@homarr/modals";
+import { useSettings } from "@homarr/settings";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
 import { widgetImports } from "@homarr/widgets";
 import { WidgetEditModal } from "@homarr/widgets/modals";
 
 import type { Item } from "~/app/[locale]/boards/_types";
-import { useEditMode } from "~/app/[locale]/boards/(content)/_context";
 import { useSectionContext } from "../sections/section-context";
 import { useItemActions } from "./item-actions";
 import { ItemMoveModal } from "./item-move-modal";
@@ -35,6 +36,7 @@ export const BoardItemMenu = ({
   const { data: integrationData, isPending } = clientApi.integration.all.useQuery();
   const currentDefinition = useMemo(() => widgetImports[item.kind].definition, [item.kind]);
   const { gridstack } = useSectionContext().refs;
+  const settings = useSettings();
 
   // Reset error boundary on next render if item has been edited
   useEffect(() => {
@@ -75,6 +77,7 @@ export const BoardItemMenu = ({
           (currentDefinition.supportedIntegrations as string[]).some((kind) => kind === integration.kind),
       ),
       integrationSupport: "supportedIntegrations" in currentDefinition,
+      settings,
     });
   };
 

apps/nextjs/src/components/board/sections/category-section.tsx

@@ -3,9 +3,9 @@ import { useDisclosure } from "@mantine/hooks";
 import { IconChevronDown, IconChevronUp } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
+import { useRequiredBoard } from "@homarr/boards/context";
 
 import type { CategorySection } from "~/app/[locale]/boards/_types";
-import { useRequiredBoard } from "~/app/[locale]/boards/(content)/_context";
 import { CategoryMenu } from "./category/category-menu";
 import { GridStack } from "./gridstack/gridstack";
 import classes from "./item.module.css";

apps/nextjs/src/components/board/sections/category/category-actions.ts

@@ -1,9 +1,9 @@
 import { useCallback } from "react";
 
+import { useUpdateBoard } from "@homarr/boards/updater";
 import { createId } from "@homarr/db/client";
 
 import type { CategorySection, EmptySection } from "~/app/[locale]/boards/_types";
-import { useUpdateBoard } from "~/app/[locale]/boards/(content)/_client";
 import type { MoveCategoryInput } from "./actions/move-category";
 import { moveCategoryCallback } from "./actions/move-category";
 import type { RemoveCategoryInput } from "./actions/remove-category";

apps/nextjs/src/components/board/sections/category/category-menu-actions.tsx

@@ -3,6 +3,7 @@ import { useCallback } from "react";
 import { fetchApi } from "@homarr/api/client";
 import { createId } from "@homarr/db/client";
 import { useConfirmModal, useModalAction } from "@homarr/modals";
+import { useSettings } from "@homarr/settings";
 import { useI18n } from "@homarr/translation/client";
 
 import type { CategorySection } from "~/app/[locale]/boards/_types";
@@ -99,8 +100,9 @@ export const useCategoryMenuActions = (category: CategorySection) => {
     );
   }, [category, openModal, renameCategory, t]);
 
+  const settings = useSettings();
   const openAllInNewTabs = useCallback(async () => {
-    const appIds = filterByItemKind(category.items, "app").map((item) => {
+    const appIds = filterByItemKind(category.items, settings, "app").map((item) => {
       return item.options.appId;
     });
 
@@ -119,7 +121,7 @@ export const useCategoryMenuActions = (category: CategorySection) => {
       });
       break;
     }
-  }, [category, t, openConfirmModal]);
+  }, [category, t, openConfirmModal, settings]);
 
   return {
     addCategoryAbove,

apps/nextjs/src/components/board/sections/category/category-menu.tsx

@@ -13,12 +13,12 @@ import {
   IconTrash,
 } from "@tabler/icons-react";
 
+import { useEditMode } from "@homarr/boards/edit-mode";
 import type { MaybePromise } from "@homarr/common/types";
 import { useScopedI18n } from "@homarr/translation/client";
 import type { TablerIcon } from "@homarr/ui";
 
 import type { CategorySection } from "~/app/[locale]/boards/_types";
-import { useEditMode } from "~/app/[locale]/boards/(content)/_context";
 import { useCategoryMenuActions } from "./category-menu-actions";
 
 interface Props {

apps/nextjs/src/components/board/sections/category/filter.ts

@@ -1,14 +1,23 @@
 import type { WidgetKind } from "@homarr/definitions";
+import type { SettingsContextProps } from "@homarr/settings";
 import type { WidgetComponentProps } from "@homarr/widgets";
 import { reduceWidgetOptionsWithDefaultValues } from "@homarr/widgets";
 
 import type { Item } from "~/app/[locale]/boards/_types";
 
-export const filterByItemKind = <TKind extends WidgetKind>(items: Item[], kind: TKind) => {
+export const filterByItemKind = <TKind extends WidgetKind>(
+  items: Item[],
+  settings: SettingsContextProps,
+  kind: TKind,
+) => {
   return items
     .filter((item) => item.kind === kind)
     .map((item) => ({
       ...item,
-      options: reduceWidgetOptionsWithDefaultValues(kind, item.options) as WidgetComponentProps<TKind>["options"],
+      options: reduceWidgetOptionsWithDefaultValues(
+        kind,
+        settings,
+        item.options,
+      ) as WidgetComponentProps<TKind>["options"],
     }));
 };

apps/nextjs/src/components/board/sections/content.tsx

@@ -1,7 +1,8 @@
 import { useMemo } from "react";
 
+import { useRequiredBoard } from "@homarr/boards/context";
+
 import type { DynamicSection, Item, Section } from "~/app/[locale]/boards/_types";
-import { useRequiredBoard } from "~/app/[locale]/boards/(content)/_context";
 import { BoardItemContent } from "../items/item-content";
 import { BoardDynamicSection } from "./dynamic-section";
 import { GridStackItem } from "./gridstack/gridstack-item";

apps/nextjs/src/components/board/sections/dynamic-section.tsx

@@ -1,7 +1,8 @@
 import { Box, Card } from "@mantine/core";
 
+import { useRequiredBoard } from "@homarr/boards/context";
+
 import type { DynamicSection } from "~/app/[locale]/boards/_types";
-import { useRequiredBoard } from "~/app/[locale]/boards/(content)/_context";
 import { BoardDynamicSectionMenu } from "./dynamic/dynamic-menu";
 import { GridStack } from "./gridstack/gridstack";
 import classes from "./item.module.css";

apps/nextjs/src/components/board/sections/dynamic/dynamic-actions.ts

@@ -1,9 +1,9 @@
 import { useCallback } from "react";
 
+import { useUpdateBoard } from "@homarr/boards/updater";
 import { createId } from "@homarr/db/client";
 
 import type { DynamicSection, EmptySection } from "~/app/[locale]/boards/_types";
-import { useUpdateBoard } from "~/app/[locale]/boards/(content)/_client";
 
 interface RemoveDynamicSection {
   id: string;

apps/nextjs/src/components/board/sections/dynamic/dynamic-menu.tsx

@@ -1,11 +1,11 @@
 import { ActionIcon, Menu } from "@mantine/core";
 import { IconDotsVertical, IconTrash } from "@tabler/icons-react";
 
+import { useEditMode } from "@homarr/boards/edit-mode";
 import { useConfirmModal } from "@homarr/modals";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
 
 import type { DynamicSection } from "~/app/[locale]/boards/_types";
-import { useEditMode } from "~/app/[locale]/boards/(content)/_context";
 import { useDynamicSectionActions } from "./dynamic-actions";
 
 export const BoardDynamicSectionMenu = ({ section }: { section: DynamicSection }) => {

apps/nextjs/src/components/board/sections/empty-section.tsx

@@ -1,7 +1,8 @@
 import combineClasses from "clsx";
 
+import { useEditMode } from "@homarr/boards/edit-mode";
+
 import type { EmptySection } from "~/app/[locale]/boards/_types";
-import { useEditMode } from "~/app/[locale]/boards/(content)/_context";
 import { GridStack } from "./gridstack/gridstack";
 import { useSectionItems } from "./use-section-items";
 

apps/nextjs/src/components/board/sections/gridstack/use-gridstack.ts

@@ -2,10 +2,12 @@ import type { RefObject } from "react";
 import { createRef, useCallback, useEffect, useRef } from "react";
 import { useElementSize } from "@mantine/hooks";
 
+import { useRequiredBoard } from "@homarr/boards/context";
+import { useEditMode } from "@homarr/boards/edit-mode";
 import type { GridHTMLElement, GridItemHTMLElement, GridStack, GridStackNode } from "@homarr/gridstack";
 
 import type { Section } from "~/app/[locale]/boards/_types";
-import { useEditMode, useMarkSectionAsReady, useRequiredBoard } from "~/app/[locale]/boards/(content)/_context";
+import { useMarkSectionAsReady } from "~/app/[locale]/boards/(content)/_ready-context";
 import { useItemActions } from "../../items/item-actions";
 import { useSectionActions } from "../section-actions";
 import { initializeGridstack } from "./init-gridstack";

apps/nextjs/src/components/board/sections/section-actions.tsx

@@ -1,6 +1,6 @@
 import { useCallback } from "react";
 
-import { useUpdateBoard } from "~/app/[locale]/boards/(content)/_client";
+import { useUpdateBoard } from "@homarr/boards/updater";
 
 interface MoveAndResizeInnerSection {
   innerSectionId: string;

apps/nextjs/src/components/board/sections/use-section-items.ts

@@ -1,5 +1,6 @@
+import { useRequiredBoard } from "@homarr/boards/context";
+
 import type { Section } from "~/app/[locale]/boards/_types";
-import { useRequiredBoard } from "~/app/[locale]/boards/(content)/_context";
 
 export const useSectionItems = (section: Section) => {
   const board = useRequiredBoard();

apps/nextjs/src/components/layout/background.tsx

@@ -1,7 +1,7 @@
 import { usePathname } from "next/navigation";
 import type { AppShellProps } from "@mantine/core";
 
-import { useOptionalBoard } from "~/app/[locale]/boards/(content)/_context";
+import { useOptionalBoard } from "@homarr/boards/context";
 
 const supportedVideoFormats = ["mp4", "webm", "ogg"];
 const isVideo = (url: string) => supportedVideoFormats.some((format) => url.toLowerCase().endsWith(`.${format}`));

apps/nextjs/src/components/layout/logo/board-logo.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { useRequiredBoard } from "~/app/[locale]/boards/(content)/_context";
+import { useRequiredBoard } from "@homarr/boards/context";
+
 import { homarrLogoPath, homarrPageTitle } from "./homarr-logo";
 import type { LogoWithTitleProps } from "./logo";
 import { Logo, LogoWithTitle } from "./logo";