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]/(main)/integrations/_integration-accordion.tsx

@@ -1,32 +0,0 @@
-"use client";
-
-import type { PropsWithChildren } from "react";
-import { useRouter } from "next/navigation";
-
-import type { IntegrationKind } from "@homarr/definitions";
-import { Accordion } from "@homarr/ui";
-
-type IntegrationGroupAccordionControlProps = PropsWithChildren<{
-  activeTab: IntegrationKind | undefined;
-}>;
-
-export const IntegrationGroupAccordion = ({
-  children,
-  activeTab,
-}: IntegrationGroupAccordionControlProps) => {
-  const router = useRouter();
-
-  return (
-    <Accordion
-      variant="separated"
-      defaultValue={activeTab}
-      onChange={(tab) =>
-        tab
-          ? router.replace(`?tab=${tab}`, {})
-          : router.replace("/integrations")
-      }
-    >
-      {children}
-    </Accordion>
-  );
-};

apps/nextjs/src/app/[locale]/(main)/integrations/page.tsx

@@ -2,8 +2,8 @@ import Link from "next/link";
 
 import type { RouterOutputs } from "@homarr/api";
 import { objectEntries } from "@homarr/common";
-import { getIntegrationName } from "@homarr/definitions";
 import type { IntegrationKind } from "@homarr/definitions";
+import { getIntegrationName } from "@homarr/definitions";
 import { getScopedI18n } from "@homarr/translation/server";
 import {
   AccordionControl,
@@ -33,7 +33,7 @@ import {
 } from "@homarr/ui";
 
 import { api } from "~/trpc/server";
-import { IntegrationGroupAccordion } from "./_integration-accordion";
+import { ActiveTabAccordion } from "../../../../components/active-tab-accordion";
 import { IntegrationAvatar } from "./_integration-avatar";
 import { DeleteIntegrationActionButton } from "./_integration-buttons";
 import { IntegrationCreateDropdownContent } from "./new/_integration-new-dropdown";
@@ -112,7 +112,7 @@ const IntegrationList = async ({
   );
 
   return (
-    <IntegrationGroupAccordion activeTab={activeTab}>
+    <ActiveTabAccordion defaultValue={activeTab} variant="separated">
       {objectEntries(grouppedIntegrations).map(([kind, integrations]) => (
         <AccordionItem key={kind} value={kind}>
           <AccordionControl icon={<IntegrationAvatar size="sm" kind={kind} />}>
@@ -170,6 +170,6 @@ const IntegrationList = async ({
           </AccordionPanel>
         </AccordionItem>
       ))}
-    </IntegrationGroupAccordion>
+    </ActiveTabAccordion>
   );
 };