Update Next.js version and improve session handling

Next.js version has been upgraded from 14.2.0-canary.58 to 14.2.0-canary.60 for performance and stability improvements. Additionally, account session handling has been improved by fetching the session data during server-side processing and passing it to various components, thus optimizing the user experience.

apps/web/app/(dashboard)/home/[account]/_components/account-layout-sidebar.tsx

@@ -2,6 +2,8 @@
 
 import { useRouter } from 'next/navigation';
 
+import { User } from '@supabase/supabase-js';
+
 import { ArrowLeftCircle, ArrowRightCircle } from 'lucide-react';
 
 import { AccountSelector } from '@kit/accounts/account-selector';
@@ -37,6 +39,7 @@ export function AccountLayoutSidebar(props: {
   account: string;
   accounts: AccountModel[];
   collapsed: boolean;
+  user: User | null;
 }) {
   return (
     <Sidebar collapsed={props.collapsed}>
@@ -46,6 +49,7 @@ export function AccountLayoutSidebar(props: {
           setCollapsed={setCollapsed}
           account={props.account}
           accounts={props.accounts}
+          user={props.user}
         />
       )}
     </Sidebar>
@@ -58,6 +62,7 @@ function SidebarContainer(props: {
   collapsed: boolean;
   setCollapsed: (collapsed: boolean) => void;
   collapsible?: boolean;
+  user: User | null;
 }) {
   const { account, accounts } = props;
   const router = useRouter();
@@ -86,7 +91,10 @@ function SidebarContainer(props: {
 
       <div className={'absolute bottom-4 left-0 w-full'}>
         <SidebarContent>
-          <ProfileAccountDropdownContainer collapsed={props.collapsed} />
+          <ProfileAccountDropdownContainer
+            user={props.user}
+            collapsed={props.collapsed}
+          />
 
           <If condition={props.collapsible}>
             <AppSidebarFooterMenu

apps/web/app/(dashboard)/home/[account]/_lib/server/team-account-workspace.loader.ts

@@ -26,9 +26,16 @@ export const loadTeamWorkspace = cache(async (accountSlug: string) => {
 
   const accountsPromise = client.from('user_accounts').select('*');
 
-  const [accountResult, accountsResult] = await Promise.all([
+  const [
+    accountResult,
+    accountsResult,
+    {
+      data: { session },
+    },
+  ] = await Promise.all([
     accountPromise,
     accountsPromise,
+    client.auth.getSession(),
   ]);
 
   if (accountResult.error) {
@@ -56,5 +63,6 @@ export const loadTeamWorkspace = cache(async (accountSlug: string) => {
   return {
     account: accountData,
     accounts: accountsResult.data,
+    session,
   };
 });

apps/web/app/(dashboard)/home/[account]/layout.tsx

@@ -32,6 +32,7 @@ function TeamWorkspaceLayout({
           collapsed={false}
           account={params.account}
           accounts={accounts}
+          user={data.session?.user ?? null}
         />
       }
     >