MED-189: add company to mobile menu

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

@@ -25,17 +25,21 @@ import {
   DropdownMenuTrigger,
 } from '@kit/ui/dropdown-menu';
 import { If } from '@kit/ui/if';
+import { cn } from '@kit/ui/shadcn';
+import { Avatar, AvatarFallback, AvatarImage } from '@kit/ui/shadcn/avatar';
 import { Button } from '@kit/ui/shadcn/button';
 import { Trans } from '@kit/ui/trans';
 
 // home imports
 import type { UserWorkspace } from '../_lib/server/load-user-workspace';
 
+const PERSONAL_ACCOUNT_SLUG = 'personal';
+
 export function HomeMobileNavigation(props: {
   workspace: UserWorkspace;
   cart: StoreCart | null;
 }) {
-  const user = props.workspace.user;
+  const { user, accounts } = props.workspace;
 
   const signOut = useSignOut();
   const { data: personalAccountData } = usePersonalAccountData(user.id);
@@ -167,6 +171,46 @@ export function HomeMobileNavigation(props: {
         </If>
         <DropdownMenuSeparator />
 
+        <If condition={accounts.length > 0}>
+          <span className="text-muted-foreground px-2 text-xs">
+            <Trans
+              i18nKey={'teams:yourTeams'}
+              values={{ teamsCount: accounts.length }}
+            />
+          </span>
+
+          {accounts.map((account) => (
+            <DropdownMenuItem key={account.value} asChild>
+              <Link
+                className={'s-full flex cursor-pointer items-center space-x-2'}
+                href={`${pathsConfig.app.home}/${account.value}`}
+              >
+                <div className={'flex items-center'}>
+                  <Avatar className={'h-5 w-5 rounded-xs ' + account.image}>
+                    <AvatarImage
+                      {...(account.image && { src: account.image })}
+                    />
+
+                    <AvatarFallback
+                      className={cn('rounded-md', {
+                        ['bg-background']:
+                          PERSONAL_ACCOUNT_SLUG === account.value,
+                        ['group-hover:bg-background']:
+                          PERSONAL_ACCOUNT_SLUG !== account.value,
+                      })}
+                    >
+                      {account.label ? account.label[0] : ''}
+                    </AvatarFallback>
+                  </Avatar>
+
+                  <span className={'pl-3'}>{account.label}</span>
+                </div>
+              </Link>
+            </DropdownMenuItem>
+          ))}
+          <DropdownMenuSeparator />
+        </If>
+
         <SignOutDropdownItem onSignOut={() => signOut.mutateAsync()} />
       </DropdownMenuContent>
     </DropdownMenu>

packages/features/accounts/src/components/personal-account-dropdown.tsx

@@ -43,17 +43,9 @@ export function PersonalAccountDropdown({
   showProfileName = true,
   paths,
   features,
-  account,
   accounts = [],
 }: {
   user: User;
-
-  account?: {
-    id: string | null;
-    name: string | null;
-    picture_url: string | null;
-    application_role: ApplicationRole | null;
-  };
   accounts: {
     label: string | null;
     value: string | null;

packages/shared/src/components/personal-account-dropdown-container.tsx

@@ -46,11 +46,10 @@ export function ProfileAccountDropdownContainer(props: {
 
   return (
     <PersonalAccountDropdown
-      className={'w-full'}
+      className="w-full"
       paths={paths}
       features={features}
       user={userData}
-      account={props.account}
       accounts={props.accounts}
       signOutRequested={() => signOut.mutateAsync()}
       showProfileName={props.showProfileName}