🔀 Merge branch 'feature/add-basic-authentication' of https://github.com/ajnart/homarr into feature/add-basic-authentication

src/pages/_app.tsx

@@ -40,19 +40,22 @@ function App(
     packageAttributes: ServerSidePackageAttributesType;
     editModeEnabled: boolean;
     config?: ConfigType;
+    primaryColor?: MantineTheme['primaryColor'];
+    secondaryColor?: MantineTheme['primaryColor'];
+    primaryShade?: MantineTheme['primaryShade'];
     session: Session;
   }>
 ) {
   const { Component, pageProps } = props;
 
   const [primaryColor, setPrimaryColor] = useState<MantineTheme['primaryColor']>(
-    props.pageProps.config?.settings.customization.colors.primary || 'red'
+    props.pageProps.primaryColor ?? 'red'
   );
   const [secondaryColor, setSecondaryColor] = useState<MantineTheme['primaryColor']>(
-    props.pageProps.config?.settings.customization.colors.secondary || 'orange'
+    props.pageProps.secondaryColor ?? 'orange'
   );
   const [primaryShade, setPrimaryShade] = useState<MantineTheme['primaryShade']>(
-    props.pageProps.config?.settings.customization.colors.shade || 6
+    props.pageProps.primaryShade ?? 6
   );
   const colorTheme = {
     primaryColor,

src/pages/board/[slug].tsx

@@ -57,6 +57,9 @@ export const getServerSideProps: GetServerSideProps<BoardGetServerSideProps> = a
   return {
     props: {
       config,
+      primaryColor: config.settings.customization.colors.primary,
+      secondaryColor: config.settings.customization.colors.secondary,
+      primaryShade: config.settings.customization.colors.shade,
       ...translations,
     },
   };

src/pages/board/[slug]/customize.tsx

@@ -27,7 +27,7 @@ import { useTranslation } from 'next-i18next';
 import Head from 'next/head';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { ReactNode, useRef } from 'react';
+import { ReactNode } from 'react';
 import { z } from 'zod';
 import { AppearanceCustomization } from '~/components/Board/Customize/Appearance/AppearanceCustomization';
 import { GridstackCustomization } from '~/components/Board/Customize/Gridstack/GridstackCustomization';
@@ -265,7 +265,7 @@ export const getServerSideProps: GetServerSideProps = async ({ req, res, locale,
 
   const helpers = await createTrpcServersideHelpers({ req, res });
 
-  helpers.config.byName.prefetch({ name: routeParams.data.slug });
+  const config = await helpers.config.byName.fetch({ name: routeParams.data.slug });
 
   const translations = await getServerSideTranslations(
     [
@@ -284,6 +284,9 @@ export const getServerSideProps: GetServerSideProps = async ({ req, res, locale,
 
   return {
     props: {
+      primaryColor: config.settings.customization.colors.primary,
+      secondaryColor: config.settings.customization.colors.secondary,
+      primaryShade: config.settings.customization.colors.shade,
       trpcState: helpers.dehydrate(),
       ...translations,
     },

src/pages/board/index.tsx

@@ -47,6 +47,9 @@ export const getServerSideProps: GetServerSideProps<BoardGetServerSideProps> = a
   return {
     props: {
       config,
+      primaryColor: config.settings.customization.colors.primary,
+      secondaryColor: config.settings.customization.colors.secondary,
+      primaryShade: config.settings.customization.colors.shade,
       ...translations,
     },
   };