Update Shadcn Sidebar (#73)

Migrated Sidebar to use Shadcn UI's
2024-10-25 09:43:34 +02:00
parent df944bb1e5
commit 14c2220904
48 changed files with 1863 additions and 543 deletions
--- a/packages/features/accounts/package.json
+++ b/packages/features/accounts/package.json
@@ -35,11 +35,11 @@
    "@kit/ui": "workspace:^",
    "@radix-ui/react-icons": "^1.3.0",
    "@supabase/supabase-js": "^2.45.6",
-    "@tanstack/react-query": "5.59.15",
+    "@tanstack/react-query": "5.59.16",
    "@types/react": "^18.3.11",
    "@types/react-dom": "^18.3.1",
    "lucide-react": "^0.453.0",
-    "next": "15.0.0",
+    "next": "15.0.1",
    "next-themes": "0.3.0",
    "react": "19.0.0-rc-69d4b800-20241021",
    "react-dom": "19.0.0-rc-69d4b800-20241021",
--- a/packages/features/accounts/src/components/account-selector.tsx
+++ b/packages/features/accounts/src/components/account-selector.tsx
@@ -86,7 +86,7 @@ export function AccountSelector({
    pictureUrl ? (
      <UserAvatar pictureUrl={pictureUrl} />
    ) : (
-      <PersonIcon className="h-4 min-h-4 w-4 min-w-4" />
+      <PersonIcon className="h-5 min-h-5 w-5 min-w-5" />
    );

  return (
@@ -103,7 +103,7 @@ export function AccountSelector({
              'dark:shadow-primary/10 group w-full min-w-0 px-2 lg:w-auto lg:max-w-fit',
              {
                'justify-start': !collapsed,
-                'm-auto justify-center px-4 lg:w-full': collapsed,
+                'm-auto justify-center px-2 lg:w-full': collapsed,
              },
              className,
            )}
@@ -111,7 +111,7 @@ export function AccountSelector({
            <If
              condition={selected}
              fallback={
-                <span className={'flex max-w-full items-center space-x-2'}>
+                <span className={'flex max-w-full items-center space-x-4'}>
                  <PersonalAccountAvatar />

                  <span
@@ -125,11 +125,11 @@ export function AccountSelector({
              }
            >
              {(account) => (
-                <span className={'flex max-w-full items-center space-x-2'}>
-                  <Avatar className={'h-5 w-5'}>
+                <span className={'flex max-w-full items-center space-x-4'}>
+                  <Avatar className={'h-6 w-6 rounded-sm'}>
                    <AvatarImage src={account.image ?? undefined} />

-                    <AvatarFallback className={'group-hover:bg-background'}>
+                    <AvatarFallback className={'group-hover:bg-background rounded-sm'}>
                      {account.label ? account.label[0] : ''}
                    </AvatarFallback>
                  </Avatar>
@@ -210,11 +210,11 @@ export function AccountSelector({
                      }}
                    >
                      <div className={'flex items-center'}>
-                        <Avatar className={'mr-2 h-5 w-5'}>
+                        <Avatar className={'mr-2 h-6 w-6 rounded-sm'}>
                          <AvatarImage src={account.image ?? undefined} />

                          <AvatarFallback
-                            className={cn({
+                            className={cn('rounded-sm', {
                              ['bg-background']: value === account.value,
                              ['group-hover:bg-background']:
                                value !== account.value,
@@ -274,7 +274,7 @@ export function AccountSelector({

 function UserAvatar(props: { pictureUrl?: string }) {
  return (
-    <Avatar className={'h-6 w-6'}>
+    <Avatar className={'h-6 w-6 rounded-sm'}>
      <AvatarImage src={props.pictureUrl} />
    </Avatar>
  );
--- a/packages/features/accounts/src/components/personal-account-dropdown.tsx
+++ b/packages/features/accounts/src/components/personal-account-dropdown.tsx
@@ -7,7 +7,7 @@ import Link from 'next/link';
 import type { User } from '@supabase/supabase-js';

 import {
-  EllipsisVertical,
+  ChevronsUpDown,
  Home,
  LogOut,
  MessageCircleQuestion,
@@ -85,16 +85,17 @@ export function PersonalAccountDropdown({
        aria-label="Open your profile menu"
        data-test={'account-dropdown-trigger'}
        className={cn(
-          'animate-in fade-in group flex cursor-pointer items-center focus:outline-none',
+          'animate-in fade-in focus:outline-primary flex cursor-pointer items-center duration-500 group-data-[minimized=true]:px-0',
          className ?? '',
          {
-            ['active:bg-secondary/50 items-center space-x-2.5 rounded-md' +
+            ['active:bg-secondary/50 items-center space-x-4 rounded-md' +
            ' hover:bg-secondary p-2 transition-colors']: showProfileName,
          },
        )}
      >
        <ProfileAvatar
-          className={'group-hover:border-primary/10 border border-transparent'}
+          className={'rounded-md'}
+          fallbackClassName={'rounded-md border'}
          displayName={displayName ?? user?.email ?? ''}
          pictureUrl={personalAccountData?.picture_url}
        />
@@ -102,7 +103,7 @@ export function PersonalAccountDropdown({
        <If condition={showProfileName}>
          <div
            className={
-              'fade-in animate-in flex w-full flex-col truncate text-left'
+              'fade-in animate-in flex w-full flex-col truncate text-left group-data-[minimized=true]:hidden'
            }
          >
            <span
@@ -120,17 +121,15 @@ export function PersonalAccountDropdown({
            </span>
          </div>

-          <EllipsisVertical
-            className={'text-muted-foreground mr-1 hidden h-8 group-hover:flex'}
+          <ChevronsUpDown
+            className={
+              'text-muted-foreground mr-1 h-8 group-data-[minimized=true]:hidden'
+            }
          />
        </If>
      </DropdownMenuTrigger>

-      <DropdownMenuContent
-        className={'xl:!min-w-[15rem]'}
-        collisionPadding={{ right: 20, left: 20 }}
-        sideOffset={10}
-      >
+      <DropdownMenuContent className={'xl:!min-w-[15rem]'}>
        <DropdownMenuItem className={'!h-10 rounded-none'}>
          <div
            className={'flex flex-col justify-start truncate text-left text-xs'}
--- a/packages/features/admin/package.json
+++ b/packages/features/admin/package.json
@@ -22,11 +22,11 @@
    "@makerkit/data-loader-supabase-core": "^0.0.8",
    "@makerkit/data-loader-supabase-nextjs": "^1.2.3",
    "@supabase/supabase-js": "^2.45.6",
-    "@tanstack/react-query": "5.59.15",
+    "@tanstack/react-query": "5.59.16",
    "@tanstack/react-table": "^8.20.5",
    "@types/react": "^18.3.11",
    "lucide-react": "^0.453.0",
-    "next": "15.0.0",
+    "next": "15.0.1",
    "react": "19.0.0-rc-69d4b800-20241021",
    "react-dom": "19.0.0-rc-69d4b800-20241021",
    "react-hook-form": "^7.53.1",
--- a/packages/features/auth/package.json
+++ b/packages/features/auth/package.json
@@ -29,10 +29,10 @@
    "@marsidev/react-turnstile": "^1.0.2",
    "@radix-ui/react-icons": "^1.3.0",
    "@supabase/supabase-js": "^2.45.6",
-    "@tanstack/react-query": "5.59.15",
+    "@tanstack/react-query": "5.59.16",
    "@types/react": "^18.3.11",
    "lucide-react": "^0.453.0",
-    "next": "15.0.0",
+    "next": "15.0.1",
    "react-hook-form": "^7.53.1",
    "react-i18next": "^15.1.0",
    "sonner": "^1.5.0",
--- a/packages/features/notifications/package.json
+++ b/packages/features/notifications/package.json
@@ -21,7 +21,7 @@
    "@kit/tsconfig": "workspace:*",
    "@kit/ui": "workspace:*",
    "@supabase/supabase-js": "^2.45.6",
-    "@tanstack/react-query": "5.59.15",
+    "@tanstack/react-query": "5.59.16",
    "@types/react": "^18.3.11",
    "lucide-react": "^0.453.0",
    "react": "19.0.0-rc-69d4b800-20241021",
--- a/packages/features/team-accounts/package.json
+++ b/packages/features/team-accounts/package.json
@@ -33,14 +33,14 @@
    "@kit/tsconfig": "workspace:*",
    "@kit/ui": "workspace:^",
    "@supabase/supabase-js": "^2.45.6",
-    "@tanstack/react-query": "5.59.15",
+    "@tanstack/react-query": "5.59.16",
    "@tanstack/react-table": "^8.20.5",
    "@types/react": "^18.3.11",
    "@types/react-dom": "^18.3.1",
    "class-variance-authority": "^0.7.0",
    "date-fns": "^4.1.0",
    "lucide-react": "^0.453.0",
-    "next": "15.0.0",
+    "next": "15.0.1",
    "react": "19.0.0-rc-69d4b800-20241021",
    "react-dom": "19.0.0-rc-69d4b800-20241021",
    "react-hook-form": "^7.53.1",