feat: board settings (#137)

* refactor: improve user feedback for general board settings section

* wip: add board settings for background and colors, move danger zone to own file, refactor code

* feat: add shade selector

* feat: add slider for opacity

* fix: issue with invalid hex values for color preview

* refactor: add shared mutation hook for saving partial board settings with invalidate query

* fix: add cleanup for not applied changes to logo and page title

* feat: add layout settings

* feat: add empty custom css section to board settings

* refactor: improve layout of board logo on mobile

* feat: add theme provider for board colors

* refactor: add auto contrast for better contrast of buttons with low primary shade

* feat: add background for boards

* feat: add opacity for boards

* feat: add rename board

* feat: add visibility and delete of board settings

* fix: issue that wrong data is updated with update board method

* refactor: improve danger zone button placement for mobile

* fix: board not revalidated when already in boards layout

* refactor: improve board color preview

* refactor: change save button color to teal, add placeholders for general board settings

* chore: update initial migration

* refactor: remove unnecessary div

* chore: address pull request feedback

* fix: ci issues

* fix: deepsource issues

* chore: address pull request feedback

* fix: formatting issue

* chore: address pull request feedback

apps/nextjs/src/components/active-tab-accordion.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import type { PropsWithChildren } from "react";
+import { useCallback } from "react";
+import { usePathname } from "next/navigation";
+import { useShallowEffect } from "@mantine/hooks";
+
+import type { AccordionProps } from "@homarr/ui";
+import { Accordion } from "@homarr/ui";
+
+type ActiveTabAccordionProps = PropsWithChildren<
+  Omit<AccordionProps<false>, "onChange">
+>;
+
+// Replace state without fetchign new data
+const replace = (newUrl: string) => {
+  window.history.replaceState(
+    { ...window.history.state, as: newUrl, url: newUrl },
+    "",
+    newUrl,
+  );
+};
+
+export const ActiveTabAccordion = ({
+  children,
+  ...props
+}: ActiveTabAccordionProps) => {
+  const pathname = usePathname();
+  const onChange = useCallback(
+    (tab: string | null) => (tab ? replace(`?tab=${tab}`) : replace(pathname)),
+    [pathname],
+  );
+
+  useShallowEffect(() => {
+    if (props.defaultValue) {
+      replace(`?tab=${props.defaultValue}`);
+    }
+  }, [props.defaultValue]);
+
+  return (
+    <Accordion {...props} onChange={onChange}>
+      {children}
+    </Accordion>
+  );
+};

apps/nextjs/src/components/board/modals/board-rename-modal.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import type { ManagedModal } from "mantine-modal-manager";
+
+import { clientApi } from "@homarr/api/client";
+import { useForm } from "@homarr/form";
+import { useI18n } from "@homarr/translation/client";
+import { Button, Group, Stack, TextInput } from "@homarr/ui";
+import type { validation, z } from "@homarr/validation";
+
+interface InnerProps {
+  id: string;
+  previousName: string;
+  onSuccess?: (name: string) => void;
+}
+
+export const BoardRenameModal: ManagedModal<InnerProps> = ({
+  actions,
+  innerProps,
+}) => {
+  const utils = clientApi.useUtils();
+  const t = useI18n();
+  const { mutate, isPending } = clientApi.board.rename.useMutation({
+    onSettled() {
+      void utils.board.byName.invalidate({ name: innerProps.previousName });
+      void utils.board.default.invalidate();
+    },
+  });
+  const form = useForm<FormType>({
+    initialValues: {
+      name: innerProps.previousName,
+    },
+  });
+
+  const handleSubmit = (values: FormType) => {
+    mutate(
+      {
+        id: innerProps.id,
+        name: values.name,
+      },
+      {
+        onSuccess: () => {
+          actions.closeModal();
+          innerProps.onSuccess?.(values.name);
+        },
+      },
+    );
+  };
+
+  return (
+    <form onSubmit={form.onSubmit(handleSubmit)}>
+      <Stack>
+        <TextInput
+          label={t("board.field.name.label")}
+          {...form.getInputProps("name")}
+          data-autofocus
+        />
+        <Group justify="end">
+          <Button variant="subtle" color="gray" onClick={actions.closeModal}>
+            {t("common.action.cancel")}
+          </Button>
+          <Button type="submit" loading={isPending}>
+            {t("common.action.confirm")}
+          </Button>
+        </Group>
+      </Stack>
+    </form>
+  );
+};
+
+type FormType = Omit<z.infer<(typeof validation)["board"]["rename"]>, "id">;

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

@@ -39,8 +39,6 @@ export const useCategoryActions = () => {
       updateBoard((previous) => ({
         ...previous,
         sections: [
-          // Ignore sidebar sections
-          ...previous.sections.filter((section) => section.kind === "sidebar"),
           // Place sections before the new category
           ...previous.sections.filter(
             (section) =>
@@ -235,12 +233,7 @@ export const useCategoryActions = () => {
           ...previous,
           sections: [
             ...previous.sections.filter(
-              (section) => section.kind === "sidebar",
-            ),
-            ...previous.sections.filter(
-              (section) =>
-                (section.kind === "category" || section.kind === "empty") &&
-                section.position < currentCategory.position - 1,
+              (section) => section.position < currentCategory.position - 1,
             ),
             {
               ...aboveWrapper,
@@ -253,7 +246,6 @@ export const useCategoryActions = () => {
             ...previous.sections
               .filter(
                 (section): section is CategorySection | EmptySection =>
-                  (section.kind === "category" || section.kind === "empty") &&
                   section.position >= currentCategory.position + 2,
               )
               .map((section) => ({

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

@@ -2,6 +2,7 @@
 // Ignored because of gridstack attributes
 
 import type { RefObject } from "react";
+import cx from "clsx";
 import { useAtomValue } from "jotai";
 
 import { useScopedI18n } from "@homarr/translation/client";
@@ -20,11 +21,13 @@ import {
   useServerDataFor,
 } from "@homarr/widgets";
 
+import { useRequiredBoard } from "~/app/[locale]/boards/_context";
 import type { Item } from "~/app/[locale]/boards/_types";
 import { modalEvents } from "~/app/[locale]/modals";
 import { editModeAtom } from "../editMode";
 import { useItemActions } from "../items/item-actions";
 import type { UseGridstackRefs } from "./gridstack/use-gridstack";
+import classes from "./item.module.css";
 
 interface Props {
   items: Item[];
@@ -32,6 +35,8 @@ interface Props {
 }
 
 export const SectionContent = ({ items, refs }: Props) => {
+  const board = useRequiredBoard();
+
   return (
     <>
       {items.map((item) => {
@@ -50,7 +55,15 @@ export const SectionContent = ({ items, refs }: Props) => {
             gs-max-h={4}
             ref={refs.items.current[item.id] as RefObject<HTMLDivElement>}
           >
-            <Card className="grid-stack-item-content" withBorder>
+            <Card
+              className={cx(classes.itemCard, "grid-stack-item-content")}
+              withBorder
+              styles={{
+                root: {
+                  "--opacity": board.opacity / 100,
+                },
+              }}
+            >
               <BoardItem item={item} />
             </Card>
           </div>

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

@@ -21,24 +21,18 @@ export const initializeGridstack = ({
   sectionColumnCount,
 }: InitializeGridstackProps) => {
   if (!refs.wrapper.current) return false;
-  // calculates the currently available count of columns
-  const columnCount = section.kind === "sidebar" ? 2 : sectionColumnCount;
-  const minRow =
-    section.kind !== "sidebar"
-      ? 1
-      : Math.floor(refs.wrapper.current.offsetHeight / 128);
   // initialize gridstack
   const newGrid = refs.gridstack;
   newGrid.current = GridStack.init(
     {
-      column: columnCount,
-      margin: section.kind === "sidebar" ? 5 : 10,
+      column: sectionColumnCount,
+      margin: 10,
       cellHeight: 128,
       float: true,
       alwaysShowResizeHandle: true,
       acceptWidgets: true,
       staticGrid: true,
-      minRow,
+      minRow: 1,
       animate: false,
       styleInHead: true,
       disableRemoveNodeOnDrop: true,
@@ -49,7 +43,7 @@ export const initializeGridstack = ({
   const grid = newGrid.current;
   if (!grid) return false;
   // Must be used to update the column count after the initialization
-  grid.column(columnCount, "none");
+  grid.column(sectionColumnCount, "none");
 
   grid.batchUpdate();
   grid.removeAll(false);

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

@@ -48,7 +48,7 @@ export const useGridstack = ({
 
   useCssVariableConfiguration({ section, mainRef, gridRef });
 
-  const sectionColumnCount = useSectionColumnCount(section.kind);
+  const board = useRequiredBoard();
 
   const items = useMemo(() => section.items, [section.items]);
 
@@ -125,7 +125,7 @@ export const useGridstack = ({
         wrapper: wrapperRef,
         gridstack: gridRef,
       },
-      sectionColumnCount,
+      sectionColumnCount: board.columnCount,
     });
 
     if (isReady) {
@@ -134,7 +134,7 @@ export const useGridstack = ({
 
     // Only run this effect when the section items change
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [items.length, section.items.length]);
+  }, [items.length, section.items.length, board.columnCount]);
 
   return {
     refs: {
@@ -145,19 +145,6 @@ export const useGridstack = ({
   };
 };
 
-/**
- * Get the column count for the section
- * For the sidebar it's always 2 otherwise it's the column count of the board
- * @param sectionKind kind of the section
- * @returns count of columns
- */
-const useSectionColumnCount = (sectionKind: Section["kind"]) => {
-  const board = useRequiredBoard();
-  if (sectionKind === "sidebar") return 2;
-
-  return board.columnCount;
-};
-
 interface UseCssVariableConfiguration {
   section: Section;
   mainRef?: RefObject<HTMLDivElement>;
@@ -177,7 +164,7 @@ const useCssVariableConfiguration = ({
   mainRef,
   gridRef,
 }: UseCssVariableConfiguration) => {
-  const sectionColumnCount = useSectionColumnCount(section.kind);
+  const board = useRequiredBoard();
 
   // Get reference to the :root element
   const typeofDocument = typeof document;
@@ -188,20 +175,20 @@ const useCssVariableConfiguration = ({
 
   // Define widget-width by calculating the width of one column with mainRef width and column count
   useEffect(() => {
-    if (section.kind === "sidebar" || !mainRef?.current) return;
-    const widgetWidth = mainRef.current.clientWidth / sectionColumnCount;
+    if (!mainRef?.current) return;
+    const widgetWidth = mainRef.current.clientWidth / board.columnCount;
     // widget width is used to define sizes of gridstack items within global.scss
     root?.style.setProperty("--gridstack-widget-width", widgetWidth.toString());
     gridRef.current?.cellHeight(widgetWidth);
     // gridRef.current is required otherwise the cellheight is run on production as undefined
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [sectionColumnCount, root, section.kind, mainRef, gridRef.current]);
+  }, [board.columnCount, root, section.kind, mainRef, gridRef.current]);
 
   // Define column count by using the sectionColumnCount
   useEffect(() => {
     root?.style.setProperty(
       "--gridstack-column-count",
-      sectionColumnCount.toString(),
+      board.columnCount.toString(),
     );
-  }, [sectionColumnCount, root]);
+  }, [board.columnCount, root]);
 };

apps/nextjs/src/components/board/sections/item.module.css

@@ -0,0 +1,10 @@
+.itemCard {
+  @mixin dark {
+    background-color: rgba(46, 46, 46, var(--opacity));
+    border-color: rgba(66, 66, 66, var(--opacity));
+  }
+  @mixin light {
+    background-color: rgba(255, 255, 255, var(--opacity));
+    border-color: rgba(222, 226, 230, var(--opacity));
+  }
+}

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

@@ -0,0 +1,62 @@
+import { usePathname } from "next/navigation";
+
+import type { AppShellProps } from "@homarr/ui";
+
+import { useOptionalBoard } from "~/app/[locale]/boards/_context";
+
+const supportedVideoFormats = ["mp4", "webm", "ogg"];
+const isVideo = (url: string) =>
+  supportedVideoFormats.some((format) =>
+    url.toLowerCase().endsWith(`.${format}`),
+  );
+
+export const useOptionalBackgroundProps = (): Partial<AppShellProps> => {
+  const board = useOptionalBoard();
+  const pathname = usePathname();
+
+  if (!board?.backgroundImageUrl) return {};
+
+  // Check if we are on a client board page
+  if (pathname.split("/").length > 3) return {};
+
+  if (isVideo(board.backgroundImageUrl)) {
+    return {};
+  }
+
+  return {
+    bg: `url(${board?.backgroundImageUrl})`,
+    bgp: "center center",
+    bgsz: board?.backgroundImageSize ?? "cover",
+    bgr: board?.backgroundImageRepeat ?? "no-repeat",
+    bga: board?.backgroundImageAttachment ?? "fixed",
+  };
+};
+
+export const BoardBackgroundVideo = () => {
+  const board = useOptionalBoard();
+
+  if (!board?.backgroundImageUrl) return null;
+  if (!isVideo(board.backgroundImageUrl)) return null;
+
+  const videoFormat = board.backgroundImageUrl.split(".").pop()?.toLowerCase();
+
+  if (!videoFormat) return null;
+
+  return (
+    <video
+      autoPlay
+      muted
+      loop
+      style={{
+        position: "fixed",
+        width: "100vw",
+        height: "100vh",
+        top: 0,
+        left: 0,
+        objectFit: board.backgroundImageSize ?? "cover",
+      }}
+    >
+      <source src={board.backgroundImageUrl} type={`video/${videoFormat}`} />
+    </video>
+  );
+};

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

@@ -25,14 +25,19 @@ export const BoardLogo = ({ size }: LogoProps) => {
 
 interface CommonLogoWithTitleProps {
   size: LogoWithTitleProps["size"];
+  hideTitleOnMobile?: boolean;
 }
 
-export const BoardLogoWithTitle = ({ size }: CommonLogoWithTitleProps) => {
+export const BoardLogoWithTitle = ({
+  size,
+  hideTitleOnMobile,
+}: CommonLogoWithTitleProps) => {
   const board = useRequiredBoard();
   const imageOptions = useImageOptions();
   return (
     <LogoWithTitle
       size={size}
+      hideTitleOnMobile={hideTitleOnMobile}
       title={board.pageTitle ?? homarrPageTitle}
       image={imageOptions}
     />

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

@@ -34,15 +34,27 @@ export interface LogoWithTitleProps {
   size: keyof typeof logoWithTitleSizes;
   title: string;
   image: Omit<LogoProps, "size">;
+  hideTitleOnMobile?: boolean;
 }
 
-export const LogoWithTitle = ({ size, title, image }: LogoWithTitleProps) => {
+export const LogoWithTitle = ({
+  size,
+  title,
+  image,
+  hideTitleOnMobile,
+}: LogoWithTitleProps) => {
   const { logoSize, titleOrder } = logoWithTitleSizes[size];
 
   return (
     <Group gap="xs" wrap="nowrap">
       <Logo {...image} size={logoSize} />
-      <Title order={titleOrder}>{title}</Title>
+      <Title
+        order={titleOrder}
+        visibleFrom={hideTitleOnMobile ? "sm" : undefined}
+        textWrap="nowrap"
+      >
+        {title}
+      </Title>
     </Group>
   );
 };

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

@@ -5,6 +5,7 @@ import { useAtomValue } from "jotai";
 
 import { AppShell } from "@homarr/ui";
 
+import { useOptionalBackgroundProps } from "./background";
 import { navigationCollapsedAtom } from "./header/burger";
 
 interface ClientShellProps {
@@ -18,9 +19,11 @@ export const ClientShell = ({
   children,
 }: PropsWithChildren<ClientShellProps>) => {
   const collapsed = useAtomValue(navigationCollapsedAtom);
+  const backgroundProps = useOptionalBackgroundProps();
 
   return (
     <AppShell
+      {...backgroundProps}
       header={hasHeader ? { height: 60 } : undefined}
       navbar={
         hasNavigation