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/(user)/_components/home-account-selector.tsx

@@ -18,6 +18,7 @@ export function HomeAccountSelector(props: {
     image: string | null;
   }>;
 
+  userId: string;
   collapsed: boolean;
 }) {
   const router = useRouter();
@@ -27,6 +28,7 @@ export function HomeAccountSelector(props: {
       collapsed={props.collapsed}
       accounts={props.accounts}
       features={features}
+      userId={props.userId}
       onAccountChange={(value) => {
         if (value) {
           const path = pathsConfig.app.accountHome.replace('[account]', value);

apps/web/app/home/(user)/_components/home-menu-navigation.tsx

@@ -12,7 +12,7 @@ import { personalAccountNavigationConfig } from '~/config/personal-account-navig
 // home imports
 import { HomeAccountSelector } from '../_components/home-account-selector';
 import { UserNotifications } from '../_components/user-notifications';
-import { type UserWorkspace } from '../_lib/server/load-user-workspace';
+import { type UserWorkspace } from '../_lib/server/user-workspace.loader';
 
 export function HomeMenuNavigation(props: { workspace: UserWorkspace }) {
   const { workspace, user, accounts } = props.workspace;
@@ -50,7 +50,11 @@ export function HomeMenuNavigation(props: { workspace: UserWorkspace }) {
 
       <div className={'flex justify-end space-x-2.5'}>
         <If condition={featuresFlagConfig.enableTeamAccounts}>
-          <HomeAccountSelector accounts={accounts} collapsed={false} />
+          <HomeAccountSelector
+            userId={user.id}
+            accounts={accounts}
+            collapsed={false}
+          />
         </If>
 
         <UserNotifications userId={user.id} />

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

@@ -22,7 +22,7 @@ import { personalAccountNavigationConfig } from '~/config/personal-account-navig
 
 // home imports
 import { HomeAccountSelector } from '../_components/home-account-selector';
-import type { UserWorkspace } from '../_lib/server/load-user-workspace';
+import type { UserWorkspace } from '../_lib/server/user-workspace.loader';
 
 export function HomeMobileNavigation(props: { workspace: UserWorkspace }) {
   const signOut = useSignOut();
@@ -69,6 +69,7 @@ export function HomeMobileNavigation(props: { workspace: UserWorkspace }) {
             </DropdownMenuLabel>
 
             <HomeAccountSelector
+              userId={props.workspace.user.id}
               accounts={props.workspace.accounts}
               collapsed={false}
             />

apps/web/app/home/(user)/_components/home-sidebar.tsx

@@ -8,7 +8,7 @@ import { personalAccountNavigationConfig } from '~/config/personal-account-navig
 import { UserNotifications } from '~/home/(user)/_components/user-notifications';
 
 // home imports
-import type { UserWorkspace } from '../_lib/server/load-user-workspace';
+import type { UserWorkspace } from '../_lib/server/user-workspace.loader';
 import { HomeAccountSelector } from './home-account-selector';
 
 export function HomeSidebar(props: { workspace: UserWorkspace }) {
@@ -22,7 +22,11 @@ export function HomeSidebar(props: { workspace: UserWorkspace }) {
             condition={featuresFlagConfig.enableTeamAccounts}
             fallback={<AppLogo className={'py-2'} />}
           >
-            <HomeAccountSelector collapsed={false} accounts={accounts} />
+            <HomeAccountSelector
+              userId={user.id}
+              collapsed={false}
+              accounts={accounts}
+            />
           </If>
 
           <UserNotifications userId={user.id} />

apps/web/app/home/(user)/_lib/server/user-workspace.loader.ts

@@ -1,6 +1,9 @@
 import { cache } from 'react';
 
+import { redirect } from 'next/navigation';
+
 import { createAccountsApi } from '@kit/accounts/api';
+import { requireUser } from '@kit/supabase/require-user';
 import { getSupabaseServerComponentClient } from '@kit/supabase/server-component-client';
 
 import featureFlagsConfig from '~/config/feature-flags.config';
@@ -24,20 +27,19 @@ export const loadUserWorkspace = cache(async () => {
     : () => Promise.resolve([]);
 
   const workspacePromise = api.getAccountWorkspace();
-  const userPromise = client.auth.getUser();
 
-  const [accounts, workspace, userResult] = await Promise.all([
+  const [accounts, workspace, auth] = await Promise.all([
     accountsPromise(),
     workspacePromise,
-    userPromise,
+    requireUser(client),
   ]);
 
-  const user = userResult.data.user;
-
-  if (!user) {
-    throw new Error('User is not logged in');
+  if (!auth.data) {
+    return redirect(auth.redirectTo);
   }
 
+  const user = auth.data;
+
   return {
     accounts,
     workspace,

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

@@ -18,7 +18,7 @@ import { withI18n } from '~/lib/i18n/with-i18n';
 import { HomeMenuNavigation } from './_components/home-menu-navigation';
 import { HomeMobileNavigation } from './_components/home-mobile-navigation';
 import { HomeSidebar } from './_components/home-sidebar';
-import { loadUserWorkspace } from './_lib/server/load-user-workspace';
+import { loadUserWorkspace } from './_lib/server/user-workspace.loader';
 
 function UserHomeLayout({ children }: React.PropsWithChildren) {
   const workspace = use(loadUserWorkspace());

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

@@ -1,8 +1,11 @@
+import { use } from 'react';
+
 import { PersonalAccountSettingsContainer } from '@kit/accounts/personal-account-settings';
 import { PageBody } from '@kit/ui/page';
 
 import featureFlagsConfig from '~/config/feature-flags.config';
 import pathsConfig from '~/config/paths.config';
+import { loadUserWorkspace } from '~/home/(user)/_lib/server/user-workspace.loader';
 import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
@@ -24,10 +27,16 @@ export const generateMetadata = async () => {
 };
 
 function PersonalAccountSettingsPage() {
+  const { user } = use(loadUserWorkspace());
+
   return (
     <PageBody>
       <div className={'flex w-full flex-1 flex-col lg:max-w-2xl'}>
-        <PersonalAccountSettingsContainer features={features} paths={paths} />
+        <PersonalAccountSettingsContainer
+          userId={user.id}
+          features={features}
+          paths={paths}
+        />
       </div>
     </PageBody>
   );