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>
+  );
+};