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/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