♻️ Improve usage of /b and /board

src/components/layout/Templates/BoardLayout.tsx

@@ -13,6 +13,7 @@ import Consola from 'consola';
 import { useSession } from 'next-auth/react';
 import { Trans, useTranslation } from 'next-i18next';
 import Link from 'next/link';
+import { useRouter } from 'next/router';
 import { useEditModeStore } from '~/components/Dashboard/Views/useEditModeStore';
 import { useNamedWrapperColumnCount } from '~/components/Dashboard/Wrappers/gridstack/store';
 import { BoardHeadOverride } from '~/components/layout/Meta/BoardHeadOverride';
@@ -74,10 +75,11 @@ const DockerButton = () => {
 const CustomizeBoardButton = () => {
   const { name } = useConfigContext();
   const { t } = useTranslation('boards/common');
+  const href = useBoardLink(`/board/${name}/customize`);
 
   return (
     <Tooltip label={t('header.customize')}>
-      <HeaderActionButton component={Link} href={`/board/${name}/customize`}>
+      <HeaderActionButton component={Link} href={href}>
         <IconSettings size={20} stroke={1.5} />
       </HeaderActionButton>
     </Tooltip>
@@ -223,3 +225,11 @@ const BackgroundImage = () => {
     />
   );
 };
+
+export const useBoardLink = (
+  link: '/board' | `/board/${string}/customize` | `/board/${string}`
+) => {
+  const router = useRouter();
+
+  return router.asPath.startsWith('/board') ? link : link.replace('/board', '/b');
+};

src/components/layout/header/AvatarMenu.tsx

@@ -21,6 +21,7 @@ import { useColorScheme } from '~/hooks/use-colorscheme';
 import { usePackageAttributesStore } from '~/tools/client/zustands/usePackageAttributesStore';
 
 import { REPO_URL } from '../../../../data/constants';
+import { useBoardLink } from '../Templates/BoardLayout';
 
 export const AvatarMenu = () => {
   const { t } = useTranslation('layout/header');
@@ -30,6 +31,7 @@ export const AvatarMenu = () => {
   const newVersionAvailable = useNewVersionAvailable();
 
   const Icon = colorScheme === 'dark' ? IconSun : IconMoonStars;
+  const defaultBoardHref = useBoardLink('/board');
 
   return (
     <>
@@ -51,7 +53,11 @@ export const AvatarMenu = () => {
                 >
                   {t('actions.avatar.preferences')}
                 </Menu.Item>
-                <Menu.Item component={Link} href="/board" icon={<IconDashboard size="1rem" />}>
+                <Menu.Item
+                  component={Link}
+                  href={defaultBoardHref}
+                  icon={<IconDashboard size="1rem" />}
+                >
                   {t('actions.avatar.defaultBoard')}
                 </Menu.Item>
                 <Menu.Item component={Link} href="/manage" icon={<IconHomeShare size="1rem" />}>

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

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

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

@@ -37,6 +37,7 @@ import {
   BoardCustomizationFormProvider,
   useBoardCustomizationForm,
 } from '~/components/Board/Customize/form';
+import { useBoardLink } from '~/components/layout/Templates/BoardLayout';
 import { MainLayout } from '~/components/layout/Templates/MainLayout';
 import { createTrpcServersideHelpers } from '~/server/api/helper';
 import { getServerAuthSession } from '~/server/auth';
@@ -87,6 +88,8 @@ export default function CustomizationPage() {
     validateInputOnBlur: true,
   });
 
+  const backToBoardHref = useBoardLink(`/board/${query.slug}`);
+
   const handleSubmit = async (values: z.infer<typeof boardCustomizationSchema>) => {
     if (isLoading) return;
     showNotification({
@@ -190,7 +193,7 @@ export default function CustomizationPage() {
               </Title>
               <Button
                 component={Link}
-                href={`/board/${query.slug}`}
+                href={backToBoardHref}
                 variant="light"
                 leftIcon={<IconArrowLeft size={16} />}
               >