chore: bump version to 3.1.1 in package.json; refactor mobile navigation components and improve layout structure (#472)

- Updated version to 3.1.1 in package.json. - Refactored mobile navigation components to enhance structure and usability. - Adjusted layout components to improve responsiveness and visual consistency. - Introduced shared mobile navigation components for better code reuse.
2026-03-31 21:24:37 +08:00
parent 6268d1bab0
commit c837d4f592
17 changed files with 270 additions and 260 deletions
--- a/apps/web/app/[locale]/home/(user)/_components/home-account-selector.tsx
+++ b/apps/web/app/[locale]/home/(user)/_components/home-account-selector.tsx
@@ -22,13 +22,15 @@ export function HomeAccountSelector(props: {
  }>;

  userId: string;
+  collapsed?: boolean;
 }) {
  const router = useRouter();
  const context = useContext(SidebarContext);
+  const collapsed = props.collapsed ?? !context?.open;

  return (
    <AccountSelector
-      collapsed={!context?.open}
+      collapsed={collapsed}
      accounts={props.accounts}
      features={features}
      userId={props.userId}
--- a/apps/web/app/[locale]/home/(user)/_components/home-menu-navigation.tsx
+++ b/apps/web/app/[locale]/home/(user)/_components/home-menu-navigation.tsx
@@ -39,7 +39,9 @@ export function HomeMenuNavigation(props: { workspace: UserWorkspace }) {
  return (
    <div className={'flex w-full flex-1 justify-between'}>
      <div className={'flex items-center space-x-8'}>
-        <AppLogo />
+        <div>
+          <AppLogo />
+        </div>

        <BorderedNavigationMenu>
          {routes.map((route) => (
@@ -54,7 +56,9 @@ export function HomeMenuNavigation(props: { workspace: UserWorkspace }) {
        </If>

        <If condition={featuresFlagConfig.enableTeamAccounts}>
-          <HomeAccountSelector userId={user.id} accounts={accounts} />
+          <div>
+            <HomeAccountSelector userId={user.id} accounts={accounts} />
+          </div>
        </If>

        <div>
--- a/apps/web/app/[locale]/home/(user)/_components/home-mobile-navigation.tsx
+++ b/apps/web/app/[locale]/home/(user)/_components/home-mobile-navigation.tsx
@@ -1,15 +1,12 @@
 'use client';

-import Link from 'next/link';
-
-import { LogOut, Menu } from 'lucide-react';
+import { Menu } from 'lucide-react';

 import { useSignOut } from '@kit/supabase/hooks/use-sign-out';
 import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
-  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
@@ -17,6 +14,10 @@ import {
 import { If } from '@kit/ui/if';
 import { Trans } from '@kit/ui/trans';

+import {
+  MobileNavRouteLinks,
+  MobileNavSignOutItem,
+} from '~/components/mobile-navigation-shared';
 import featuresFlagConfig from '~/config/feature-flags.config';
 import { personalAccountNavigationConfig } from '~/config/personal-account-navigation.config';

@@ -27,25 +28,6 @@ import type { UserWorkspace } from '../_lib/server/load-user-workspace';
 export function HomeMobileNavigation(props: { workspace: UserWorkspace }) {
  const signOut = useSignOut();

-  const Links = personalAccountNavigationConfig.routes.map((item, index) => {
-    if ('children' in item) {
-      return item.children.map((child) => {
-        return (
-          <DropdownLink
-            key={child.path}
-            Icon={child.Icon}
-            path={child.path}
-            label={child.label}
-          />
-        );
-      });
-    }
-
-    if ('divider' in item) {
-      return <DropdownMenuSeparator key={index} />;
-    }
-  });
-
  return (
    <DropdownMenu>
      <DropdownMenuTrigger>
@@ -60,6 +42,7 @@ export function HomeMobileNavigation(props: { workspace: UserWorkspace }) {
            </DropdownMenuLabel>

            <HomeAccountSelector
+              collapsed={false}
              userId={props.workspace.user.id}
              accounts={props.workspace.accounts}
            />
@@ -68,57 +51,16 @@ export function HomeMobileNavigation(props: { workspace: UserWorkspace }) {
          <DropdownMenuSeparator />
        </If>

-        <DropdownMenuGroup>{Links}</DropdownMenuGroup>
+        <DropdownMenuGroup>
+          <MobileNavRouteLinks
+            routes={personalAccountNavigationConfig.routes}
+          />
+        </DropdownMenuGroup>

        <DropdownMenuSeparator />

-        <SignOutDropdownItem onSignOut={() => signOut.mutateAsync()} />
+        <MobileNavSignOutItem onSignOut={() => signOut.mutateAsync()} />
      </DropdownMenuContent>
    </DropdownMenu>
  );
 }
-
-function DropdownLink(
-  props: React.PropsWithChildren<{
-    path: string;
-    label: string;
-    Icon: React.ReactNode;
-  }>,
-) {
-  return (
-    <DropdownMenuItem
-      render={
-        <Link
-          href={props.path}
-          className={'flex h-12 w-full items-center space-x-4'}
-        >
-          {props.Icon}
-
-          <span>
-            <Trans i18nKey={props.label} defaults={props.label} />
-          </span>
-        </Link>
-      }
-      key={props.path}
-    />
-  );
-}
-
-function SignOutDropdownItem(
-  props: React.PropsWithChildren<{
-    onSignOut: () => unknown;
-  }>,
-) {
-  return (
-    <DropdownMenuItem
-      className={'flex h-12 w-full items-center space-x-4'}
-      onClick={props.onSignOut}
-    >
-      <LogOut className={'h-6'} />
-
-      <span>
-        <Trans i18nKey={'common.signOut'} defaults={'Sign out'} />
-      </span>
-    </DropdownMenuItem>
-  );
-}
--- a/apps/web/app/[locale]/home/(user)/_components/home-page-header.tsx
+++ b/apps/web/app/[locale]/home/(user)/_components/home-page-header.tsx
@@ -1,12 +1,26 @@
+import { cookies } from 'next/headers';
+
 import { PageHeader } from '@kit/ui/page';

-export function HomeLayoutPageHeader(
+import { personalAccountNavigationConfig } from '~/config/personal-account-navigation.config';
+
+export async function HomeLayoutPageHeader(
  props: React.PropsWithChildren<{
    title: string | React.ReactNode;
    description: string | React.ReactNode;
  }>,
 ) {
+  const cookieStore = await cookies();
+  const layoutStyleCookie = cookieStore.get('layout-style')?.value;
+  const displaySidebarTrigger =
+    (layoutStyleCookie ?? personalAccountNavigationConfig.style) === 'sidebar';
+
  return (
-    <PageHeader description={props.description}>{props.children}</PageHeader>
+    <PageHeader
+      description={props.description}
+      displaySidebarTrigger={displaySidebarTrigger}
+    >
+      {props.children}
+    </PageHeader>
  );
 }
--- a/apps/web/app/[locale]/home/(user)/billing/_lib/server/user-billing.service.ts
+++ b/apps/web/app/[locale]/home/(user)/billing/_lib/server/user-billing.service.ts
@@ -109,7 +109,7 @@ class UserBillingService {
          planId,
          customerId,
          accountId,
-          error: message
+          error: message,
        },
        `Checkout session not created due to an error`,
      );
--- a/apps/web/app/[locale]/home/(user)/layout.tsx
+++ b/apps/web/app/[locale]/home/(user)/layout.tsx
@@ -52,7 +52,7 @@ async function SidebarLayout({ children }: React.PropsWithChildren) {
            <HomeSidebar workspace={workspace} />
          </PageNavigation>

-          <PageMobileNavigation className={'flex items-center justify-between'}>
+          <PageMobileNavigation>
            <MobileNavigation workspace={workspace} />
          </PageMobileNavigation>

@@ -75,7 +75,7 @@ async function HeaderLayout({ children }: React.PropsWithChildren) {
          <HomeMenuNavigation workspace={workspace} />
        </PageNavigation>

-        <PageMobileNavigation className={'flex items-center justify-between'}>
+        <PageMobileNavigation>
          <MobileNavigation workspace={workspace} />
        </PageMobileNavigation>

@@ -92,7 +92,9 @@ function MobileNavigation({
 }) {
  return (
    <>
-      <AppLogo />
+      <div>
+        <AppLogo />
+      </div>

      <HomeMobileNavigation workspace={workspace} />
    </>
--- a/apps/web/app/[locale]/home/[account]/_components/team-account-accounts-selector.tsx
+++ b/apps/web/app/[locale]/home/[account]/_components/team-account-accounts-selector.tsx
@@ -1,9 +1,11 @@
 'use client';

+import { useContext } from 'react';
+
 import { useRouter } from 'next/navigation';

 import { AccountSelector } from '@kit/accounts/account-selector';
-import { useSidebar } from '@kit/ui/sidebar';
+import { SidebarContext } from '@kit/ui/sidebar';

 import featureFlagsConfig from '~/config/feature-flags.config';
 import pathsConfig from '~/config/paths.config';
@@ -23,7 +25,7 @@ export function TeamAccountAccountsSelector(params: {
  }>;
 }) {
  const router = useRouter();
-  const ctx = useSidebar();
+  const ctx = useContext(SidebarContext);

  return (
    <AccountSelector
--- a/apps/web/app/[locale]/home/[account]/_components/team-account-layout-mobile-navigation.tsx
+++ b/apps/web/app/[locale]/home/[account]/_components/team-account-layout-mobile-navigation.tsx
@@ -1,28 +1,25 @@
 'use client';

-import Link from 'next/link';
 import { useRouter } from 'next/navigation';

-import { Home, LogOut, Menu } from 'lucide-react';
+import { Menu } from 'lucide-react';

 import { AccountSelector } from '@kit/accounts/account-selector';
 import { useSignOut } from '@kit/supabase/hooks/use-sign-out';
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@kit/ui/dialog';
 import {
  DropdownMenu,
  DropdownMenuContent,
-  DropdownMenuItem,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
 } from '@kit/ui/dropdown-menu';
 import { Trans } from '@kit/ui/trans';

+import {
+  MobileNavRouteLinks,
+  MobileNavSignOutItem,
+} from '~/components/mobile-navigation-shared';
 import featureFlagsConfig from '~/config/feature-flags.config';
 import pathsConfig from '~/config/paths.config';
 import { getTeamAccountSidebarConfig } from '~/config/team-account-navigation.config';
@@ -34,7 +31,6 @@ type Accounts = Array<{
 }>;

 const features = {
-  enableTeamAccounts: featureFlagsConfig.enableTeamAccounts,
  enableTeamCreation: featureFlagsConfig.enableTeamCreation,
 };

@@ -45,128 +41,21 @@ export const TeamAccountLayoutMobileNavigation = (
    accounts: Accounts;
  }>,
 ) => {
+  const router = useRouter();
  const signOut = useSignOut();

-  const Links = getTeamAccountSidebarConfig(props.account).routes.map(
-    (item, index) => {
-      if ('children' in item) {
-        return item.children.map((child) => {
-          return (
-            <DropdownLink
-              key={child.path}
-              Icon={child.Icon}
-              path={child.path}
-              label={child.label}
-            />
-          );
-        });
-      }
-
-      if ('divider' in item) {
-        return <DropdownMenuSeparator key={index} />;
-      }
-    },
-  );
-
  return (
    <DropdownMenu>
      <DropdownMenuTrigger>
        <Menu className={'h-9'} />
      </DropdownMenuTrigger>

-      <DropdownMenuContent sideOffset={10} className={'w-screen rounded-none'}>
-        <TeamAccountsModal
-          userId={props.userId}
-          accounts={props.accounts}
-          account={props.account}
-        />
-
-        {Links}
-
-        <DropdownMenuSeparator />
-
-        <SignOutDropdownItem onSignOut={() => signOut.mutateAsync()} />
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-};
-
-function DropdownLink(
-  props: React.PropsWithChildren<{
-    path: string;
-    label: string;
-    Icon: React.ReactNode;
-  }>,
-) {
-  return (
-    <DropdownMenuItem
-      render={
-        <Link
-          href={props.path}
-          className={'flex h-12 w-full items-center gap-x-3 px-3'}
-        >
-          {props.Icon}
-
-          <span>
-            <Trans i18nKey={props.label} defaults={props.label} />
-          </span>
-        </Link>
-      }
-    />
-  );
-}
-
-function SignOutDropdownItem(
-  props: React.PropsWithChildren<{
-    onSignOut: () => unknown;
-  }>,
-) {
-  return (
-    <DropdownMenuItem
-      className={'flex h-12 w-full items-center space-x-2'}
-      onClick={props.onSignOut}
-    >
-      <LogOut className={'h-4'} />
-
-      <span>
-        <Trans i18nKey={'common.signOut'} />
-      </span>
-    </DropdownMenuItem>
-  );
-}
-
-function TeamAccountsModal(props: {
-  accounts: Accounts;
-  userId: string;
-  account: string;
-}) {
-  const router = useRouter();
-
-  return (
-    <Dialog>
-      <DialogTrigger
-        render={
-          <DropdownMenuItem
-            className={'flex h-12 w-full items-center space-x-2'}
-            onSelect={(e) => e.preventDefault()}
-          >
-            <Home className={'h-4'} />
-
-            <span>
-              <Trans i18nKey={'common.yourAccounts'} />
-            </span>
-          </DropdownMenuItem>
-        }
-      />
-
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>
+      <DropdownMenuContent className={'w-screen rounded-none'}>
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>
            <Trans i18nKey={'common.yourAccounts'} />
-          </DialogTitle>
-        </DialogHeader>
+          </DropdownMenuLabel>

-        <div className={'py-6'}>
          <AccountSelector
            className={'w-full max-w-full'}
            userId={props.userId}
@@ -185,8 +74,20 @@ function TeamAccountsModal(props: {
              router.replace(path);
            }}
          />
-        </div>
-      </DialogContent>
-    </Dialog>
+        </DropdownMenuGroup>
+
+        <DropdownMenuSeparator />
+
+        <DropdownMenuGroup>
+          <MobileNavRouteLinks
+            routes={getTeamAccountSidebarConfig(props.account).routes}
+          />
+        </DropdownMenuGroup>
+
+        <DropdownMenuSeparator />
+
+        <MobileNavSignOutItem onSignOut={() => signOut.mutateAsync()} />
+      </DropdownMenuContent>
+    </DropdownMenu>
  );
-}
+};
--- a/apps/web/app/[locale]/home/[account]/_components/team-account-layout-page-header.tsx
+++ b/apps/web/app/[locale]/home/[account]/_components/team-account-layout-page-header.tsx
@@ -1,13 +1,28 @@
+import { cookies } from 'next/headers';
+
 import { PageHeader } from '@kit/ui/page';

-export function TeamAccountLayoutPageHeader(
+import { getTeamAccountSidebarConfig } from '~/config/team-account-navigation.config';
+
+export async function TeamAccountLayoutPageHeader(
  props: React.PropsWithChildren<{
    title: string | React.ReactNode;
    description: string | React.ReactNode;
    account: string;
  }>,
 ) {
+  const cookieStore = await cookies();
+  const layoutStyleCookie = cookieStore.get('layout-style')?.value;
+  const defaultStyle = getTeamAccountSidebarConfig(props.account).style;
+  const displaySidebarTrigger =
+    (layoutStyleCookie ?? defaultStyle) === 'sidebar';
+
  return (
-    <PageHeader description={props.description}>{props.children}</PageHeader>
+    <PageHeader
+      description={props.description}
+      displaySidebarTrigger={displaySidebarTrigger}
+    >
+      {props.children}
+    </PageHeader>
  );
 }
--- a/apps/web/app/[locale]/home/[account]/_components/team-account-navigation-menu.tsx
+++ b/apps/web/app/[locale]/home/[account]/_components/team-account-navigation-menu.tsx
@@ -41,7 +41,9 @@ export function TeamAccountNavigationMenu(props: {
  return (
    <div className={'flex w-full flex-1 justify-between'}>
      <div className={'flex items-center space-x-8'}>
-        <AppLogo />
+        <div>
+          <AppLogo />
+        </div>

        <BorderedNavigationMenu>
          {routes.map((route) => (
@@ -50,20 +52,22 @@ export function TeamAccountNavigationMenu(props: {
        </BorderedNavigationMenu>
      </div>

-      <div className={'flex items-center justify-end space-x-2.5'}>
+      <div className={'flex items-center justify-end space-x-1'}>
        <If condition={featureFlagsConfig.enableNotifications}>
          <TeamAccountNotifications accountId={account.id} userId={user.id} />
        </If>

-        <TeamAccountAccountsSelector
-          userId={user.id}
-          selectedAccount={account.slug}
-          accounts={accounts.map((account) => ({
-            label: account.name,
-            value: account.slug,
-            image: account.picture_url,
-          }))}
-        />
+        <div>
+          <TeamAccountAccountsSelector
+            userId={user.id}
+            selectedAccount={account.slug}
+            accounts={accounts.map((account) => ({
+              label: account.name,
+              value: account.slug,
+              image: account.picture_url,
+            }))}
+          />
+        </div>

        <div>
          <ProfileAccountDropdownContainer
--- a/apps/web/app/[locale]/home/[account]/billing/_lib/server/team-billing.service.ts
+++ b/apps/web/app/[locale]/home/[account]/billing/_lib/server/team-billing.service.ts
@@ -131,7 +131,7 @@ class TeamBillingService {
      logger.error(
        {
          ...ctx,
-          error: message
+          error: message,
        },
        `Error creating the checkout session`,
      );
--- a/apps/web/app/[locale]/home/[account]/layout.tsx
+++ b/apps/web/app/[locale]/home/[account]/layout.tsx
@@ -67,10 +67,10 @@ async function SidebarLayout({
            />
          </PageNavigation>

-          <PageMobileNavigation className={'flex items-center justify-between'}>
+          <PageMobileNavigation>
            <AppLogo />

-            <div className={'flex space-x-4'}>
+            <div className={'flex'}>
              <TeamAccountLayoutMobileNavigation
                userId={data.user.id}
                accounts={accounts}
@@ -94,6 +94,12 @@ function HeaderLayout({
 }>) {
  const data = use(loadTeamWorkspace(account));

+  const accounts = data.accounts.map(({ name, slug, picture_url }) => ({
+    label: name,
+    value: slug,
+    image: picture_url,
+  }));
+
  return (
    <TeamAccountWorkspaceContextProvider value={data}>
      <Page style={'header'}>
@@ -101,6 +107,20 @@ function HeaderLayout({
          <TeamAccountNavigationMenu workspace={data} />
        </PageNavigation>

+        <PageMobileNavigation className={'flex items-center justify-between'}>
+          <div>
+            <AppLogo />
+          </div>
+
+          <div>
+            <TeamAccountLayoutMobileNavigation
+              userId={data.user.id}
+              accounts={accounts}
+              account={account}
+            />
+          </div>
+        </PageMobileNavigation>
+
        {children}
      </Page>
    </TeamAccountWorkspaceContextProvider>