Rename component files and update code dependencies

Numerous component files have been renamed for better organization and readability. This includes changing 'app' to 'account-layout' in various instances and 'organization' to 'team' to ensure consistency across code. Additionally, dependencies within codes have been updated in line with the renaming. The pull request also includes a minor update to the pnpm-lock file, reflecting the latest version of Next.js.

apps/web/app/(dashboard)/home/(user)/_components/user-account-header.tsx

@@ -0,0 +1,18 @@
+import { PageHeader } from '@kit/ui/page';
+
+import UserLayoutMobileNavigation from './user-layout-mobile-navigation';
+
+export function UserAccountHeader(
+  props: React.PropsWithChildren<{
+    title: string | React.ReactNode;
+    description?: string | React.ReactNode;
+  }>,
+) {
+  return (
+    <PageHeader
+      title={props.title}
+      description={props.description}
+      mobileNavigation={<UserLayoutMobileNavigation />}
+    />
+  );
+}

apps/web/app/(dashboard)/home/(user)/_components/user-layout-mobile-navigation.tsx

@@ -0,0 +1,109 @@
+'use client';
+
+import Link from 'next/link';
+
+import { LogOut, Menu } from 'lucide-react';
+
+import { useSignOut } from '@kit/supabase/hooks/use-sign-out';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@kit/ui/dropdown-menu';
+import { Trans } from '@kit/ui/trans';
+
+import { personalAccountSidebarConfig } from '~/config/personal-account-sidebar.config';
+
+export function UserLayoutMobileNavigation() {
+  const signOut = useSignOut();
+
+  const Links = personalAccountSidebarConfig.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 (
+      <DropdownLink
+        key={item.path}
+        Icon={item.Icon}
+        path={item.path}
+        label={item.label}
+      />
+    );
+  });
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <Menu className={'h-9'} />
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent sideOffset={10} className={'w-screen rounded-none'}>
+        {Links}
+
+        <DropdownMenuSeparator />
+
+        <SignOutDropdownItem onSignOut={() => signOut.mutateAsync()} />
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+export default UserLayoutMobileNavigation;
+
+function DropdownLink(
+  props: React.PropsWithChildren<{
+    path: string;
+    label: string;
+    Icon: React.ReactNode;
+  }>,
+) {
+  return (
+    <DropdownMenuItem asChild key={props.path}>
+      <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>
+    </DropdownMenuItem>
+  );
+}
+
+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>
+  );
+}

apps/web/app/(dashboard)/home/(user)/billing/page.tsx

@@ -7,9 +7,10 @@ import {
 import { Database } from '@kit/supabase/database';
 import { getSupabaseServerComponentClient } from '@kit/supabase/server-component-client';
 import { If } from '@kit/ui/if';
-import { PageBody, PageHeader } from '@kit/ui/page';
+import { PageBody } from '@kit/ui/page';
 import { Trans } from '@kit/ui/trans';
 
+import { UserAccountHeader } from '~/(dashboard)/home/(user)/_components/user-account-header';
 import { createPersonalAccountBillingPortalSession } from '~/(dashboard)/home/(user)/billing/server-actions';
 import billingConfig from '~/config/billing.config';
 import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
@@ -34,7 +35,7 @@ async function PersonalAccountBillingPage() {
 
   return (
     <>
-      <PageHeader
+      <UserAccountHeader
         title={<Trans i18nKey={'common:billingTabLabel'} />}
         description={<Trans i18nKey={'common:billingTabDescription'} />}
       />

apps/web/app/(dashboard)/home/(user)/page.tsx

@@ -1,6 +1,7 @@
-import { PageBody, PageHeader } from '@kit/ui/page';
+import { PageBody } from '@kit/ui/page';
 import { Trans } from '@kit/ui/trans';
 
+import { UserAccountHeader } from '~/(dashboard)/home/(user)/_components/user-account-header';
 import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
@@ -16,7 +17,7 @@ export const generateMetadata = async () => {
 function UserHomePage() {
   return (
     <>
-      <PageHeader
+      <UserAccountHeader
         title={<Trans i18nKey={'common:homeTabLabel'} defaults={'Home'} />}
         description={
           <Trans

apps/web/app/(dashboard)/home/(user)/settings/layout.tsx

@@ -1,17 +1,17 @@
-import { PageBody, PageHeader } from '@kit/ui/page';
 import { Trans } from '@kit/ui/trans';
 
+import { UserAccountHeader } from '~/(dashboard)/home/(user)/_components/user-account-header';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
 function UserSettingsLayout(props: React.PropsWithChildren) {
   return (
     <>
-      <PageHeader
+      <UserAccountHeader
         title={<Trans i18nKey={'common:yourAccountTabLabel'} />}
         description={'Manage your account settings'}
       />
 
-      <PageBody>{props.children}</PageBody>
+      {props.children}
     </>
   );
 }

apps/web/app/(dashboard)/home/(user)/settings/page.tsx

@@ -26,11 +26,7 @@ export const generateMetadata = async () => {
 function PersonalAccountSettingsPage() {
   return (
     <PageBody>
-      <div
-        className={
-          'container mx-auto flex max-w-2xl flex-1 flex-col items-center'
-        }
-      >
+      <div className={'mx-auto flex w-full flex-1 flex-col lg:max-w-2xl'}>
         <PersonalAccountSettingsContainer features={features} paths={paths} />
       </div>
     </PageBody>