39e0a229b6
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.
132 lines
3.1 KiB
TypeScript
132 lines
3.1 KiB
TypeScript
'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,
|
|
DropdownMenuGroup,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from '@kit/ui/dropdown-menu';
|
|
import { If } from '@kit/ui/if';
|
|
import { Trans } from '@kit/ui/trans';
|
|
|
|
import featuresFlagConfig from '~/config/feature-flags.config';
|
|
import { personalAccountNavigationConfig } from '~/config/personal-account-navigation.config';
|
|
|
|
// home imports
|
|
import { HomeAccountSelector } from '../_components/home-account-selector';
|
|
import type { UserWorkspace } from '../_lib/server/user-workspace.loader';
|
|
|
|
export function HomeMobileNavigation(props: { workspace: UserWorkspace }) {
|
|
const signOut = useSignOut();
|
|
|
|
const Links = personalAccountNavigationConfig.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'}>
|
|
<If condition={featuresFlagConfig.enableTeamAccounts}>
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuLabel>
|
|
<Trans i18nKey={'common:yourAccounts'} />
|
|
</DropdownMenuLabel>
|
|
|
|
<HomeAccountSelector
|
|
userId={props.workspace.user.id}
|
|
accounts={props.workspace.accounts}
|
|
collapsed={false}
|
|
/>
|
|
</DropdownMenuGroup>
|
|
|
|
<DropdownMenuSeparator />
|
|
</If>
|
|
|
|
<DropdownMenuGroup>{Links}</DropdownMenuGroup>
|
|
|
|
<DropdownMenuSeparator />
|
|
|
|
<SignOutDropdownItem onSignOut={() => signOut.mutateAsync()} />
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|
|
|
|
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>
|
|
);
|
|
}
|