✨ Add slug board page

src/components/layout/new-header/Header.tsx

@@ -19,7 +19,7 @@ export const MainHeader = ({
   showExperimental = false,
   logoHref = '/',
   headerActions,
-  leftIcon
+  leftIcon,
 }: MainHeaderProps) => {
   const { breakpoints } = useMantineTheme();
   const isSmallerThanMd = useMediaQuery(`(max-width: ${breakpoints.sm})`);
@@ -30,9 +30,9 @@ export const MainHeader = ({
     <Header height={headerHeight} pb="sm" pt={0}>
       <ExperimentalHeaderNote visible={showExperimental} height={experimentalHeaderNoteHeight} />
       <Group spacing="xl" mt="xs" px="md" position="apart" noWrap>
-        <Group noWrap>
+        <Group noWrap style={{ flex: 1 }}>
           {leftIcon}
-          <UnstyledButton component={Link} href={logoHref} style={{ flex: 1 }}>
+          <UnstyledButton component={Link} href={logoHref}>
             <Logo />
           </UnstyledButton>
         </Group>

src/config/provider.tsx

@@ -24,13 +24,13 @@ const ConfigContext = createContext<ConfigContextType>({
 export const ConfigProvider = ({
   children,
   config: fallbackConfig,
-  configName: initialConfigName,
 }: {
   children: ReactNode;
   config?: ConfigType;
-  configName?: string;
 }) => {
-  const [configName, setConfigName] = useState<string>(initialConfigName || 'default');
+  const [configName, setConfigName] = useState<string>(
+    fallbackConfig?.configProperties.name || 'unknown'
+  );
   const [configVersion, setConfigVersion] = useState(0);
   const { configs } = useConfigStore((s) => ({ configs: s.configs }), shallow);
   const { setPrimaryColor, setSecondaryColor, setPrimaryShade } = useColorTheme();

src/pages/_app.tsx

@@ -7,6 +7,7 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
 import Consola from 'consola';
 import { getCookie, setCookie } from 'cookies-next';
+import 'flag-icons/css/flag-icons.min.css';
 import { GetServerSidePropsContext } from 'next';
 import { Session } from 'next-auth';
 import { SessionProvider, getSession } from 'next-auth/react';
@@ -34,7 +35,6 @@ import {
   getServiceSidePackageAttributes,
 } from '../tools/server/getPackageVersion';
 import { theme } from '../tools/server/theme/theme';
-import "/node_modules/flag-icons/css/flag-icons.min.css";
 
 function App(
   this: any,
@@ -44,7 +44,6 @@ function App(
     packageAttributes: ServerSidePackageAttributesType;
     editModeEnabled: boolean;
     config?: ConfigType;
-    configName?: string;
     session: Session;
   }>
 ) {

src/pages/b/[id].tsx

@@ -1 +0,0 @@
-export { default, getServerSideProps } from '../board/[id]';

src/pages/b/[slug].tsx

@@ -0,0 +1 @@
+export { default, getServerSideProps } from '../board/[slug]';

src/pages/board/[id].tsx

@@ -1,16 +0,0 @@
-import { GetServerSideProps } from 'next';
-
-export default function BoardPage() {
-  return (
-    <div>
-      <h1>BoardPage</h1>
-    </div>
-  );
-}
-
-export const getServerSideProps: GetServerSideProps = async () => {
-  console.log('getServerSideProps');
-  return {
-    props: {},
-  };
-};

src/pages/board/[slug].tsx

@@ -0,0 +1,65 @@
+import { GetServerSideProps, InferGetServerSidePropsType } from 'next';
+import { SSRConfig } from 'next-i18next';
+import { z } from 'zod';
+import { Dashboard } from '~/components/Dashboard/Dashboard';
+import { MainLayout } from '~/components/layout/main';
+import { useInitConfig } from '~/config/init';
+import { configExists } from '~/tools/config/configExists';
+import { getFrontendConfig } from '~/tools/config/getFrontendConfig';
+import { getServerSideTranslations } from '~/tools/server/getServerSideTranslations';
+import { dashboardNamespaces } from '~/tools/server/translation-namespaces';
+import { ConfigType } from '~/types/config';
+
+import { HeaderActions } from '.';
+
+export default function BoardPage({
+  config: initialConfig,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) {
+  useInitConfig(initialConfig);
+
+  return (
+    <MainLayout headerActions={<HeaderActions />}>
+      <Dashboard />
+    </MainLayout>
+  );
+}
+
+type BoardGetServerSideProps = {
+  config: ConfigType;
+  _nextI18Next?: SSRConfig['_nextI18Next'];
+};
+
+const routeParamsSchema = z.object({
+  slug: z.string(),
+});
+
+export const getServerSideProps: GetServerSideProps<BoardGetServerSideProps> = async ({
+  params,
+  locale,
+  req,
+  res,
+}) => {
+  const routeParams = routeParamsSchema.safeParse(params);
+  if (!routeParams.success) {
+    return {
+      notFound: true,
+    };
+  }
+
+  const isPresent = configExists(routeParams.data.slug);
+  if (!isPresent) {
+    return {
+      notFound: true,
+    };
+  }
+
+  const config = await getFrontendConfig(routeParams.data.slug);
+  const translations = await getServerSideTranslations(dashboardNamespaces, locale, req, res);
+
+  return {
+    props: {
+      config,
+      ...translations,
+    },
+  };
+};

src/pages/board/index.tsx

@@ -55,7 +55,7 @@ export const getServerSideProps: GetServerSideProps<BoardGetServerSideProps> = a
     ctx.res
   );
   const boardName = currentUserSettings?.defaultBoard ?? 'default';
-  const config = await getFrontendConfig(boardName as string);
+  const config = await getFrontendConfig(boardName);
 
   return {
     props: {
@@ -65,7 +65,7 @@ export const getServerSideProps: GetServerSideProps<BoardGetServerSideProps> = a
   };
 };
 
-const HeaderActions = () => {
+export const HeaderActions = () => {
   const { data: sessionData } = useSession();
 
   if (!sessionData?.user?.isAdmin) return null;