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/app/[locale]/boards/_context.tsx

@@ -8,10 +8,13 @@ import {
   useEffect,
   useState,
 } from "react";
+import { usePathname } from "next/navigation";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
 
+import { updateBoardName } from "./_client";
+
 const BoardContext = createContext<{
   board: RouterOutputs["board"]["default"];
   isReady: boolean;
@@ -21,14 +24,30 @@ const BoardContext = createContext<{
 export const BoardProvider = ({
   children,
   initialBoard,
-}: PropsWithChildren<{ initialBoard: RouterOutputs["board"]["default"] }>) => {
+}: PropsWithChildren<{ initialBoard: RouterOutputs["board"]["byName"] }>) => {
+  const pathname = usePathname();
+  const utils = clientApi.useUtils();
   const [readySections, setReadySections] = useState<string[]>([]);
-  const { data } = clientApi.board.default.useQuery(undefined, {
-    initialData: initialBoard,
-    refetchOnMount: false,
-    refetchOnWindowFocus: false,
-    refetchOnReconnect: false,
-  });
+  const { data } = clientApi.board.byName.useQuery(
+    { name: initialBoard.name },
+    {
+      initialData: initialBoard,
+      refetchOnMount: false,
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false,
+    },
+  );
+  // Update the board name so it can be used within updateBoard method
+  updateBoardName(initialBoard.name);
+
+  // Invalidate the board when the pathname changes
+  // This allows to refetch the board when it might have changed - e.g. if someone else added an item
+  useEffect(() => {
+    return () => {
+      setReadySections([]);
+      void utils.board.byName.invalidate({ name: initialBoard.name });
+    };
+  }, [pathname, utils, initialBoard.name]);
 
   useEffect(() => {
     setReadySections((previous) =>