Refactor account handling to improve performance

This commit dates the transition from a global user session to individual account handling based on user ID. The transition was made across several components, notably the account settings, icons, and selector. This change improves performance by reducing unnecessary requests and ensures more accurate data handling. The commit also includes some cleanups and minor fixes spread across different components.

apps/web/app/home/[account]/_components/team-account-accounts-selector.tsx

@@ -13,6 +13,8 @@ const features = {
 
 export function TeamAccountAccountsSelector(params: {
   selectedAccount: string;
+  userId: string;
+
   accounts: Array<{
     label: string | null;
     value: string | null;
@@ -25,6 +27,7 @@ export function TeamAccountAccountsSelector(params: {
     <AccountSelector
       selectedAccount={params.selectedAccount}
       accounts={params.accounts}
+      userId={params.userId}
       collapsed={false}
       features={features}
       onAccountChange={(value) => {

apps/web/app/home/[account]/_components/team-account-layout-mobile-navigation.tsx

@@ -41,6 +41,7 @@ const features = {
 export const TeamAccountLayoutMobileNavigation = (
   props: React.PropsWithChildren<{
     account: string;
+    userId: string;
     accounts: Accounts;
   }>,
 ) => {
@@ -83,7 +84,7 @@ export const TeamAccountLayoutMobileNavigation = (
       </DropdownMenuTrigger>
 
       <DropdownMenuContent sideOffset={10} className={'w-screen rounded-none'}>
-        <TeamAccountsModal accounts={props.accounts} />
+        <TeamAccountsModal userId={props.userId} accounts={props.accounts} />
 
         {Links}
 
@@ -137,7 +138,7 @@ function SignOutDropdownItem(
   );
 }
 
-function TeamAccountsModal(props: { accounts: Accounts }) {
+function TeamAccountsModal(props: { accounts: Accounts; userId: string }) {
   const router = useRouter();
 
   return (
@@ -165,6 +166,7 @@ function TeamAccountsModal(props: { accounts: Accounts }) {
         <div className={'py-16'}>
           <AccountSelector
             className={'w-full max-w-full'}
+            userId={props.userId}
             onAccountChange={(value) => {
               const path = value
                 ? pathsConfig.app.accountHome.replace('[account]', value)

apps/web/app/home/[account]/_components/team-account-layout-sidebar.tsx

@@ -59,7 +59,8 @@ function SidebarContainer(props: {
   collapsible?: boolean;
   user: User;
 }) {
-  const { account, accounts } = props;
+  const { account, accounts, user } = props;
+  const userId = user.id;
 
   return (
     <>
@@ -68,12 +69,13 @@ function SidebarContainer(props: {
           className={'flex max-w-full items-center justify-between space-x-4'}
         >
           <TeamAccountAccountsSelector
+            userId={userId}
             selectedAccount={account}
             accounts={accounts}
           />
 
           <TeamAccountNotifications
-            userId={props.user.id}
+            userId={userId}
             accountId={props.accountId}
           />
         </div>

apps/web/app/home/[account]/_components/team-account-navigation-menu.tsx

@@ -50,6 +50,7 @@ export function TeamAccountNavigationMenu(props: {
 
       <div className={'flex justify-end space-x-2.5'}>
         <TeamAccountAccountsSelector
+          userId={user.id}
           selectedAccount={account.slug}
           accounts={accounts.map((account) => ({
             label: account.name,

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

@@ -4,6 +4,7 @@ import { cache } from 'react';
 
 import { redirect } from 'next/navigation';
 
+import { requireUser } from '@kit/supabase/require-user';
 import { getSupabaseServerComponentClient } from '@kit/supabase/server-component-client';
 import { createTeamAccountsApi } from '@kit/team-accounts/api';
 
@@ -26,19 +27,25 @@ export const loadTeamWorkspace = cache(async (accountSlug: string) => {
   const client = getSupabaseServerComponentClient();
   const api = createTeamAccountsApi(client);
 
-  const workspace = await api.getAccountWorkspace(accountSlug);
-
-  if (workspace.error) {
-    throw workspace.error;
-  }
-
-  const account = workspace.data.account;
+  const [workspace, auth] = await Promise.all([
+    api.getAccountWorkspace(accountSlug),
+    requireUser(client),
+  ]);
 
   // we cannot find any record for the selected account
   // so we redirect the user to the home page
-  if (!account) {
+  if (!workspace.data?.account) {
     return redirect(pathsConfig.app.home);
   }
 
-  return workspace.data;
+  if (!auth.data) {
+    return redirect(auth.redirectTo);
+  }
+
+  const user = auth.data;
+
+  return {
+    ...workspace.data,
+    user,
+  };
 });

apps/web/app/home/[account]/layout.tsx

@@ -62,6 +62,7 @@ function TeamWorkspaceLayout({
 
         <div className={'flex space-x-4'}>
           <TeamAccountLayoutMobileNavigation
+            userId={data.user.id}
             accounts={accounts}
             account={params.account}
           />

apps/web/app/home/[account]/members/_lib/server/members-page.loader.ts

@@ -19,7 +19,6 @@ export async function loadMembersPageData(
     loadTeamWorkspace(slug),
     loadAccountMembers(client, slug),
     loadInvitations(client, slug),
-    loadUser(client),
     canAddMember,
   ]);
 }
@@ -38,16 +37,6 @@ async function canAddMember() {
   return Promise.resolve(true);
 }
 
-async function loadUser(client: SupabaseClient<Database>) {
-  const { data, error } = await client.auth.getUser();
-
-  if (error) {
-    throw error;
-  }
-
-  return data.user;
-}
-
 /**
  * Load account members
  * @param client

apps/web/app/home/[account]/members/page.tsx

@@ -18,6 +18,7 @@ import { If } from '@kit/ui/if';
 import { PageBody } from '@kit/ui/page';
 import { Trans } from '@kit/ui/trans';
 
+import { loadTeamWorkspace } from '~/home/[account]/_lib/server/team-account-workspace.loader';
 import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
@@ -43,7 +44,9 @@ export const generateMetadata = async () => {
 async function TeamAccountMembersPage({ params }: Params) {
   const client = getSupabaseServerComponentClient();
 
-  const [{ account }, members, invitations, user, canAddMember] =
+  const { user } = await loadTeamWorkspace(params.account);
+
+  const [{ account }, members, invitations, canAddMember] =
     await loadMembersPageData(client, params.account);
 
   const canManageRoles = account.permissions.includes('roles.manage');