Merge remote-tracking branch 'origin/main'

# Conflicts: # apps/web/app/home/(user)/_components/home-menu-navigation.tsx # apps/web/app/home/(user)/_components/home-sidebar.tsx # apps/web/app/home/(user)/layout.tsx # apps/web/app/home/[account]/_components/team-account-layout-sidebar.tsx # apps/web/app/home/[account]/_components/team-account-navigation-menu.tsx # apps/web/app/home/[account]/layout.tsx # packages/features/accounts/src/components/account-selector.tsx # packages/features/notifications/src/components/notifications-popover.tsx # packages/ui/src/makerkit/page.tsx
2024-05-01 02:16:39 +07:00
parent 19aa40493f 5e8e01e340
commit 383f6d1f9e
11 changed files with 45 additions and 39 deletions
--- a/apps/web/app/home/(user)/_components/home-menu-navigation.tsx
+++ b/apps/web/app/home/(user)/_components/home-menu-navigation.tsx
@@ -36,7 +36,7 @@ export function HomeMenuNavigation(props: { workspace: UserWorkspace }) {

  return (
    <div className={'flex w-full flex-1 justify-between'}>
-      <div className={'flex items-center space-x-4'}>
+      <div className={'flex items-center space-x-8'}>
        <AppLogo />

        <BorderedNavigationMenu>
@@ -46,7 +46,7 @@ export function HomeMenuNavigation(props: { workspace: UserWorkspace }) {
        </BorderedNavigationMenu>
      </div>

-      <div className={'flex justify-end space-x-4'}>
+      <div className={'flex justify-end space-x-2.5'}>
        <HomeAccountSelector accounts={accounts} collapsed={false} />

        <UserNotifications userId={user.id} />
--- a/apps/web/app/home/(user)/_components/home-sidebar.tsx
+++ b/apps/web/app/home/(user)/_components/home-sidebar.tsx
@@ -5,6 +5,7 @@ import { AppLogo } from '~/components/app-logo';
 import { ProfileAccountDropdownContainer } from '~/components/personal-account-dropdown-container';
 import featuresFlagConfig from '~/config/feature-flags.config';
 import { personalAccountNavigationConfig } from '~/config/personal-account-navigation.config';
+import { UserNotifications } from '~/home/(user)/_components/user-notifications';

 // home imports
 import type { UserWorkspace } from '../_lib/server/load-user-workspace';
@@ -16,12 +17,16 @@ export function HomeSidebar(props: { workspace: UserWorkspace }) {
  return (
    <Sidebar>
      <SidebarContent className={'h-16 justify-center'}>
-        <If
-          condition={featuresFlagConfig.enableTeamAccounts}
-          fallback={<AppLogo className={'py-2'} />}
-        >
-          <HomeAccountSelector collapsed={false} accounts={accounts} />
-        </If>
+        <div className={'flex items-center justify-between'}>
+          <If
+            condition={featuresFlagConfig.enableTeamAccounts}
+            fallback={<AppLogo className={'py-2'} />}
+          >
+            <HomeAccountSelector collapsed={false} accounts={accounts} />
+          </If>
+
+          <UserNotifications userId={user.id} />
+        </div>
      </SidebarContent>

      <SidebarContent className={`mt-5 h-[calc(100%-160px)] overflow-y-auto`}>
--- a/apps/web/app/home/(user)/layout.tsx
+++ b/apps/web/app/home/(user)/layout.tsx
@@ -31,13 +31,8 @@ function UserHomeLayout({ children }: React.PropsWithChildren) {
      </PageNavigation>

      <PageMobileNavigation className={'flex items-center justify-between'}>
-        <div>
-          <AppLogo />
-        </div>
-
-        <div>
-          <HomeMobileNavigation workspace={workspace} />
-        </div>
+        <AppLogo />
+        <HomeMobileNavigation workspace={workspace} />
      </PageMobileNavigation>

      {children}
--- a/apps/web/app/home/[account]/_components/team-account-layout-sidebar.tsx
+++ b/apps/web/app/home/[account]/_components/team-account-layout-sidebar.tsx
@@ -16,6 +16,7 @@ import { Trans } from '@kit/ui/trans';
 import { cn } from '@kit/ui/utils';

 import { ProfileAccountDropdownContainer } from '~/components//personal-account-dropdown-container';
+import { TeamAccountNotifications } from '~/home/[account]/_components/team-account-notifications';

 import { TeamAccountAccountsSelector } from '../_components/team-account-accounts-selector';
 import { TeamAccountLayoutSidebarNavigation } from './team-account-layout-sidebar-navigation';
@@ -59,11 +60,18 @@ function SidebarContainer(props: {

  return (
    <>
-      <SidebarContent className={'mt-4 justify-center'}>
-        <TeamAccountAccountsSelector
-          selectedAccount={account}
-          accounts={accounts}
-        />
+      <SidebarContent className={'mt-4'}>
+        <div className={'flex items-center justify-between'}>
+          <TeamAccountAccountsSelector
+            selectedAccount={account}
+            accounts={accounts}
+          />
+
+          <TeamAccountNotifications
+            userId={props.user.id}
+            accountId={account}
+          />
+        </div>
      </SidebarContent>

      <SidebarContent className={`mt-5 h-[calc(100%-160px)] overflow-y-auto`}>
@@ -72,12 +80,10 @@ function SidebarContainer(props: {

      <div className={'absolute bottom-4 left-0 w-full'}>
        <SidebarContent>
-          <div className={'flex space-x-2'}>
-            <ProfileAccountDropdownContainer
-              user={props.user}
-              collapsed={props.collapsed}
-            />
-          </div>
+          <ProfileAccountDropdownContainer
+            user={props.user}
+            collapsed={props.collapsed}
+          />

          <If condition={props.collapsible}>
            <AppSidebarFooterMenu
--- a/apps/web/app/home/[account]/_components/team-account-navigation-menu.tsx
+++ b/apps/web/app/home/[account]/_components/team-account-navigation-menu.tsx
@@ -38,7 +38,7 @@ export function TeamAccountNavigationMenu(props: {

  return (
    <div className={'flex w-full flex-1 justify-between'}>
-      <div className={'flex items-center space-x-4'}>
+      <div className={'flex items-center space-x-8'}>
        <AppLogo />

        <BorderedNavigationMenu>
@@ -48,7 +48,7 @@ export function TeamAccountNavigationMenu(props: {
        </BorderedNavigationMenu>
      </div>

-      <div className={'flex justify-end space-x-4'}>
+      <div className={'flex justify-end space-x-2.5'}>
        <TeamAccountAccountsSelector
          selectedAccount={account.id}
          accounts={accounts.map((account) => ({
--- a/apps/web/app/home/[account]/layout.tsx
+++ b/apps/web/app/home/[account]/layout.tsx
@@ -5,7 +5,6 @@ import { Page, PageMobileNavigation, PageNavigation } from '@kit/ui/page';

 import { AppLogo } from '~/components/app-logo';
 import { getTeamAccountSidebarConfig } from '~/config/team-account-navigation.config';
-import { TeamAccountNotifications } from '~/home/[account]/_components/team-account-notifications';
 import { withI18n } from '~/lib/i18n/with-i18n';

 // local imports
--- a/apps/web/app/home/[account]/page.tsx
+++ b/apps/web/app/home/[account]/page.tsx
@@ -54,7 +54,7 @@ function TeamAccountHomePage({ params }: { params: Params }) {
        title={<Trans i18nKey={'common:dashboardTabLabel'} />}
        description={<Trans i18nKey={'common:dashboardTabDescription'} />}
      >
-        <Button size={'sm'}>
+        <Button>
          <PlusCircle className={'mr-1 h-4'} />
          <span>Add Widget</span>
        </Button>
--- a/packages/features/accounts/src/components/account-selector.tsx
+++ b/packages/features/accounts/src/components/account-selector.tsx
@@ -98,7 +98,7 @@ export function AccountSelector({
            variant="ghost"
            role="combobox"
            aria-expanded={open}
-            className={cn('dark:shadow-primary/10 group w-full border px-4', {
+            className={cn('dark:shadow-primary/10 group px-2', {
              'justify-between': !collapsed,
              'justify-center': collapsed,
            })}
@@ -144,11 +144,11 @@ export function AccountSelector({
              )}
            </If>

-            <CaretSortIcon className="ml-1 h-4 w-4 shrink-0 opacity-50" />
+            <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
          </Button>
        </PopoverTrigger>

-        <PopoverContent className="w-full p-0">
+        <PopoverContent className="w-full p-0" collisionPadding={20}>
          <Command>
            <CommandInput placeholder={t('searchAccount')} className="h-9" />

--- a/packages/features/notifications/src/components/notifications-popover.tsx
+++ b/packages/features/notifications/src/components/notifications-popover.tsx
@@ -111,12 +111,12 @@ export function NotificationsPopover(params: {
  return (
    <Popover modal open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
-        <Button className={'h-8 w-8'} variant={'ghost'}>
+        <Button className={'h-9 w-9'} variant={'ghost'}>
          <Bell className={'min-h-5 min-w-5'} />

          <span
            className={cn(
-              `fade-in animate-in zoom-in absolute right-5 top-5 flex h-3.5 w-3.5 items-center justify-center rounded-full bg-red-500 text-[0.65rem] text-white`,
+              `fade-in animate-in zoom-in absolute right-5 top-5 mt-0 flex h-3.5 w-3.5 items-center justify-center rounded-full bg-red-500 text-[0.65rem] text-white`,
              {
                hidden: !unread.length,
              },
@@ -129,7 +129,8 @@ export function NotificationsPopover(params: {

      <PopoverContent
        className={'flex w-full flex-col p-0 lg:min-w-64'}
-        collisionPadding={{ right: 20 }}
+        align={'start'}
+        collisionPadding={20}
        sideOffset={10}
      >
        <div className={'flex items-center px-3 py-2 text-sm font-semibold'}>
--- a/packages/ui/src/makerkit/page.tsx
+++ b/packages/ui/src/makerkit/page.tsx
@@ -56,7 +56,7 @@ export function PageMobileNavigation(
  }>,
 ) {
  return (
-    <div className={cn('w-full py-4 lg:hidden', props.className)}>
+    <div className={cn('w-full py-2 lg:hidden', props.className)}>
      {props.children}
    </div>
  );
--- a/packages/ui/src/makerkit/profile-avatar.tsx
+++ b/packages/ui/src/makerkit/profile-avatar.tsx
@@ -18,13 +18,13 @@ export function ProfileAvatar(props: ProfileAvatarProps) {
    return (
      <Avatar className={avatarClassName}>
        <AvatarFallback>
-          <span className={'uppercase'}>{props.text.slice(0, 2)}</span>
+          <span className={'uppercase'}>{props.text.slice(0, 1)}</span>
        </AvatarFallback>
      </Avatar>
    );
  }

-  const initials = props.displayName?.slice(0, 2);
+  const initials = props.displayName?.slice(0, 1);

  return (
    <Avatar className={avatarClassName}>