Refactor code and update dependencies configuration

This commit includes reorganizing dependencies in 'package.json' for better readability. It also refactors code associated with user and personal account data along with animations for AvatarFallback and profile name display. Additionally, the 'next' package version has been updated to '14.2.0-canary.56'. Some changes have been made for minor corrections and enhancements in the scripts.

.npmrc

@@ -1,2 +1,4 @@
 shamefully-hoist=true
-peer-legacy-deps=true
+peer-legacy-deps=true
+dedupe-peer-dependencies=true
+use-lockfile-v6=true

apps/web/app/(marketing)/_components/site-header-account-section.tsx

@@ -10,12 +10,19 @@ import { PersonalAccountDropdown } from '@kit/accounts/personal-account-dropdown
 import { useSignOut } from '@kit/supabase/hooks/use-sign-out';
 import { useUser } from '@kit/supabase/hooks/use-user';
 import { Button } from '@kit/ui/button';
-import { If } from '@kit/ui/if';
 import { Trans } from '@kit/ui/trans';
 
 import featuresFlagConfig from '~/config/feature-flags.config';
 import pathsConfig from '~/config/paths.config';
 
+const paths = {
+  home: pathsConfig.app.home,
+};
+
+const features = {
+  enableThemeToggle: featuresFlagConfig.enableThemeToggle,
+};
+
 export function SiteHeaderAccountSection({
   user,
 }: React.PropsWithChildren<{
@@ -32,22 +39,18 @@ function SuspendedPersonalAccountDropdown(props: { user: User | null }) {
   const signOut = useSignOut();
   const user = useUser(props.user);
 
-  return (
+  if (user.data) {
-    <If condition={user.data} fallback={<AuthButtons />}>
+    return (
-      {(data) => (
+      <PersonalAccountDropdown
-        <PersonalAccountDropdown
+        paths={paths}
-          paths={{
+        features={features}
-            home: pathsConfig.app.home,
+        user={user.data}
-          }}
+        signOutRequested={() => signOut.mutateAsync()}
-          features={{
+      />
-            enableThemeToggle: featuresFlagConfig.enableThemeToggle,
+    );
-          }}
+  }
-          user={data}
+
-          signOutRequested={() => signOut.mutateAsync()}
+  return <AuthButtons />;
-        />
-      )}
-    </If>
-  );
 }
 
 function AuthButtons() {

apps/web/package.json

@@ -42,7 +42,7 @@
     "edge-csrf": "^1.0.9",
     "i18next": "^23.10.1",
     "i18next-resources-to-backend": "^1.2.0",
-    "next": "14.2.0-canary.55",
+    "next": "14.2.0-canary.56",
     "next-sitemap": "^4.2.3",
     "next-themes": "0.3.0",
     "react": "18.2.0",

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

@@ -83,7 +83,11 @@ export function PersonalAccountDropdown({
         />
 
         <If condition={showProfileName}>
-          <div className={'flex w-full flex-col truncate text-left'}>
+          <div
+            className={
+              'fade-in animate-in flex w-full flex-col truncate text-left'
+            }
+          >
             <span className={'truncate text-sm'}>{displayName}</span>
 
             <span className={'text-muted-foreground truncate text-xs'}>

packages/features/accounts/src/components/personal-account-settings/update-account-details-form-container.tsx

@@ -20,11 +20,13 @@ export function UpdateAccountDetailsFormContainer() {
     return null;
   }
 
+  const userId = user.data.id;
+
   return (
     <UpdateAccountDetailsForm
       displayName={user.data.name ?? ''}
-      userId={user.data.id}
+      userId={userId}
-      onUpdate={revalidateUserDataQuery}
+      onUpdate={() => revalidateUserDataQuery(userId)}
     />
   );
 }

packages/features/accounts/src/components/personal-account-settings/update-account-image-container.tsx

@@ -28,11 +28,13 @@ export function UpdateAccountImageContainer() {
     return <LoadingOverlay fullPage={false} />;
   }
 
+  const userId = accountData.data.id;
+
   return (
     <UploadProfileAvatarForm
       pictureUrl={accountData.data.picture_url ?? null}
-      userId={accountData.data.id}
+      userId={userId}
-      onAvatarUpdated={revalidateUserDataQuery}
+      onAvatarUpdated={() => revalidateUserDataQuery(userId)}
     />
   );
 }

packages/features/accounts/src/hooks/use-personal-account-data.ts

@@ -5,14 +5,15 @@ import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { useSupabase } from '@kit/supabase/hooks/use-supabase';
 import { useUser } from '@kit/supabase/hooks/use-user';
 
-const queryKey = ['personal-account:data'];
-
 export function usePersonalAccountData() {
   const client = useSupabase();
   const user = useUser();
+  const userId = user.data?.id;
+
+  const queryKey = ['account:data', userId];
 
   const queryFn = async () => {
-    if (!user.data?.id) {
+    if (!userId) {
       return null;
     }
 
@@ -25,7 +26,7 @@ export function usePersonalAccountData() {
         picture_url
     `,
       )
-      .eq('primary_owner_user_id', user.data?.id)
+      .eq('primary_owner_user_id', userId)
       .eq('is_personal_account', true)
       .single();
 
@@ -39,7 +40,7 @@ export function usePersonalAccountData() {
   return useQuery({
     queryKey,
     queryFn,
-    enabled: !!user.data?.id,
+    enabled: !!userId,
     refetchOnWindowFocus: false,
     refetchOnMount: false,
   });
@@ -49,9 +50,9 @@ export function useRevalidatePersonalAccountDataQuery() {
   const queryClient = useQueryClient();
 
   return useCallback(
-    () =>
+    (userId: string) =>
       queryClient.invalidateQueries({
-        queryKey,
+        queryKey: ['account:data', userId],
       }),
     [queryClient],
   );

packages/i18n/src/i18n.settings.ts

@@ -1,6 +1,7 @@
 import { InitOptions } from 'i18next';
 
 const fallbackLng = 'en';
+
 export const languages: string[] = [fallbackLng];
 
 export const I18N_COOKIE_NAME = 'lang';

packages/supabase/src/components/auth-change-listener.tsx

@@ -84,9 +84,13 @@ export function AuthChangeListener({
   );
 }
 
+/**
+ * Determines if a given path is a private route.
+ *
+ * @param {string} path - The path to check.
+ */
 function isPrivateRoute(path: string) {
-  // TODO: use config
+  const prefixes = ['/home', '/admin', '/join', '/update-password'];
-  const prefixes = ['/home', '/admin', '/password-reset'];
 
   return prefixes.some((prefix) => path.startsWith(prefix));
 }

packages/supabase/src/hooks/use-user.ts

@@ -1,5 +1,3 @@
-import { useRouter } from 'next/navigation';
-
 import type { User } from '@supabase/supabase-js';
 
 import { useQuery } from '@tanstack/react-query';
@@ -10,14 +8,13 @@ const queryKey = ['supabase:user'];
 
 export function useUser(initialData?: User | null) {
   const client = useSupabase();
-  const router = useRouter();
 
   const queryFn = async () => {
     const response = await client.auth.getUser();
 
     // this is most likely a session error or the user is not logged in
     if (response.error) {
-      throw router.replace('/');
+      return null;
     }
 
     if (response.data?.user) {
@@ -32,6 +29,5 @@ export function useUser(initialData?: User | null) {
     queryKey,
     initialData,
     refetchOnWindowFocus: false,
-    refetchOnMount: false,
   });
 }

packages/ui/src/makerkit/profile-avatar.tsx

@@ -30,7 +30,7 @@ export function ProfileAvatar(props: ProfileAvatarProps) {
     <Avatar className={avatarClassName}>
       <AvatarImage src={props.pictureUrl ?? undefined} />
 
-      <AvatarFallback>
+      <AvatarFallback className={'animate-in fade-in'}>
         <span suppressHydrationWarning className={'uppercase'}>
           {initials}
         </span>

pnpm-lock.yaml

@@ -97,7 +97,7 @@ importers:
         version: 5.28.6(react@18.2.0)
       '@tanstack/react-query-next-experimental':
         specifier: ^5.28.14
-        version: 5.28.14(@tanstack/react-query@5.28.6)(next@14.2.0-canary.55)(react@18.2.0)
+        version: 5.28.14(@tanstack/react-query@5.28.6)(next@14.2.0-canary.56)(react@18.2.0)
       '@tanstack/react-table':
         specifier: ^8.15.3
         version: 8.15.3(react-dom@18.2.0)(react@18.2.0)
@@ -106,7 +106,7 @@ importers:
         version: 3.6.0
       edge-csrf:
         specifier: ^1.0.9
-        version: 1.0.9(next@14.2.0-canary.55)
+        version: 1.0.9(next@14.2.0-canary.56)
       i18next:
         specifier: ^23.10.1
         version: 23.10.1
@@ -114,11 +114,11 @@ importers:
         specifier: ^1.2.0
         version: 1.2.0
       next:
-        specifier: 14.2.0-canary.55
+        specifier: 14.2.0-canary.56
-        version: 14.2.0-canary.55(react-dom@18.2.0)(react@18.2.0)
+        version: 14.2.0-canary.56(react-dom@18.2.0)(react@18.2.0)
       next-sitemap:
         specifier: ^4.2.3
-        version: 4.2.3(next@14.2.0-canary.55)
+        version: 4.2.3(next@14.2.0-canary.56)
       next-themes:
         specifier: 0.3.0
         version: 0.3.0(react-dom@18.2.0)(react@18.2.0)
@@ -2260,8 +2260,8 @@ packages:
     resolution: {integrity: sha512-Py8zIo+02ht82brwwhTg36iogzFqGLPXlRGKQw5s+qP/kMNc4MAyDeEwBKDijk6zTIbegEgu8Qy7C1LboslQAw==}
     dev: false
 
-  /@next/env@14.2.0-canary.55:
+  /@next/env@14.2.0-canary.56:
-    resolution: {integrity: sha512-1GajIj+5OxLJ5vN3U6+Csh+SjXMwKAH/rlNpDMXns3G7dpvuMHjCGVY3qv8vF3B/E+sG3p+EQYBJLSQ3fYzFRA==}
+    resolution: {integrity: sha512-slHTSLx6xovPaNJd6j+SAgK3IZz0D4Go5Vj6hb7/UCYXii1G7xeVgO2EIHdwcuzNaeuug8iN6wvpqS9qjH67cA==}
     dev: false
 
   /@next/eslint-plugin-next@14.1.4:
@@ -2288,8 +2288,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-darwin-arm64@14.2.0-canary.55:
+  /@next/swc-darwin-arm64@14.2.0-canary.56:
-    resolution: {integrity: sha512-e+3YUD/t2NZcSN+Bx7tefkTytXxTvXmkqTVwNn9p0jF7gFUxMNv+zSAzO7r64Qs2ZFJj6nrcrPm5fNaAUC11sg==}
+    resolution: {integrity: sha512-9d162Qzls1eDrw2a7e6IiK5bzBm2LVD5Fh2DP67rggPFqgl15hJMDfjv+vfiCbFhxaA95uv45S48Kj/X2p4Wrg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
@@ -2315,8 +2315,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-darwin-x64@14.2.0-canary.55:
+  /@next/swc-darwin-x64@14.2.0-canary.56:
-    resolution: {integrity: sha512-wWCmSWuStSF6KhXpsKM5fQikrUUbCW4sLAHmO513Hv3wtDhX+qPg5nDwBwpTMJcWK1bDHN7OY0vSFMxchGbjFQ==}
+    resolution: {integrity: sha512-c3/9yRBCpbt5dF7KzdoI9gH4IMMciAaH1GHf97UOK7cuI7/ctvlld7X1IP+HlMnd8+p3+FHkjySUM/Rm+t//Mw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
@@ -2342,8 +2342,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-linux-arm64-gnu@14.2.0-canary.55:
+  /@next/swc-linux-arm64-gnu@14.2.0-canary.56:
-    resolution: {integrity: sha512-yoo1wPzKYi50sXDwhYx24mCZBFG6VlnXsApbD3brDCk9vSYgpvJBWSx9CS7V4QaIOmUUPBj6xtBYexFfpb9EmA==}
+    resolution: {integrity: sha512-Pv83XZ/Fyk6uz6pDA6Uywp2LT7+E9IXJtWgHXp0rsLTjSuyvXz76kEX9ZoQrakhMRF3ki4+f1AXysPkehuazNQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
@@ -2369,8 +2369,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-linux-arm64-musl@14.2.0-canary.55:
+  /@next/swc-linux-arm64-musl@14.2.0-canary.56:
-    resolution: {integrity: sha512-xK/lukjO61uiMl4rth8uvoYR0Kn0tEeM1H32ehq7QU80SSCcM2aVsMJS3OZASpYu8kJZSgZjyH5ck+AzwO+Zwg==}
+    resolution: {integrity: sha512-ytP9AAbMYXIye6dQ1RoFV7Eb2k+yu+nMlny4COYMWhNto+30dx0mmNjjJ464c7XU5KvcLTqdj2pcBGFi2Uj0vw==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
@@ -2396,8 +2396,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-linux-x64-gnu@14.2.0-canary.55:
+  /@next/swc-linux-x64-gnu@14.2.0-canary.56:
-    resolution: {integrity: sha512-bhzZMxNxEz56LNEwY2RcHIAdHP8jT4DC+zmYut7llxpyPMh0Ysq3qqh2Sl7IpWpwFBrCZ37jaTmwkq5HIt0C+w==}
+    resolution: {integrity: sha512-/V6ngDidzDYkK8120PfRWDCi/26y9WywaZ/lWJY+345sXaB3CGLnFd3tyfdIpzHxDOvRYDHCTLh8lYd0XJF+uA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
@@ -2423,8 +2423,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-linux-x64-musl@14.2.0-canary.55:
+  /@next/swc-linux-x64-musl@14.2.0-canary.56:
-    resolution: {integrity: sha512-438sYbiUAXofn8Zuc5Jd6N2Xv2YRZAD/VYLzQfYU1/XNfu8vb3UO48Hh3xYT7zqZ7JwWEdm3oi5qWzv2iQ6/OA==}
+    resolution: {integrity: sha512-YEwoiErfzmmXRrqoInPDItJ0X+PZbeTQVkR9UpYgUstgrwr0/aFILLI/wLT52r9NWX3yMiqONB/Owv5LefkQlg==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
@@ -2450,8 +2450,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-win32-arm64-msvc@14.2.0-canary.55:
+  /@next/swc-win32-arm64-msvc@14.2.0-canary.56:
-    resolution: {integrity: sha512-Qh14fDcSGCbfq5xI2+pwK54wgPLxu0OXgZ8pmZjX3w5Fu+lkV80pQTcaqFzJHSuPbf5+zR4KXMBqW8mvY4naIw==}
+    resolution: {integrity: sha512-gEIxu949cO8xTnapS5p+EVg3fr8dzQgsybjIVC/FIl8dfBDMMHHiUIJm2lNUvi9zRc4OgrJ7WC+0tA58h9JRfA==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
@@ -2477,8 +2477,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-win32-ia32-msvc@14.2.0-canary.55:
+  /@next/swc-win32-ia32-msvc@14.2.0-canary.56:
-    resolution: {integrity: sha512-OF5Aa6mbkAAFIu//WPAMIPm67gAwYZtxoBGI+W/7FO5eG5VJnmOuXaxX+BbNE1vQGOEZakrRzWpP9C+Fst0N1Q==}
+    resolution: {integrity: sha512-3EYXk812fRXuwhID9IYG+xodNr25IPkoEbCLTdKOzS8okZrRzRHo+WmhIqF2ylS4LDFt18yVWGibN2pPJISjVg==}
     engines: {node: '>= 10'}
     cpu: [ia32]
     os: [win32]
@@ -2504,8 +2504,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-win32-x64-msvc@14.2.0-canary.55:
+  /@next/swc-win32-x64-msvc@14.2.0-canary.56:
-    resolution: {integrity: sha512-yBOZdP4rcHjCqNIcnTy9fu8iWE1KvtZLPhTpLRv3weaAyjoljwgCaOZ45aE4whJxcd2Hr/QRhjQGlHfbzxwt8Q==}
+    resolution: {integrity: sha512-FvsUo8nh9Hc6qvK0uqoinEfZbw+q16Jj6qewA0fdUQ+QY0i6ECo7c8Wsc6Jm/dGmW/CAA1zAVUX00L9h+MGyZw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
@@ -4996,7 +4996,7 @@ packages:
   /@tanstack/query-core@5.28.6:
     resolution: {integrity: sha512-hnhotV+DnQtvtR3jPvbQMPNMW4KEK0J4k7c609zJ8muiNknm+yoDyMHmxTWM5ZnlZpsz0zOxYFr+mzRJNHWJsA==}
 
-  /@tanstack/react-query-next-experimental@5.28.14(@tanstack/react-query@5.28.6)(next@14.2.0-canary.55)(react@18.2.0):
+  /@tanstack/react-query-next-experimental@5.28.14(@tanstack/react-query@5.28.6)(next@14.2.0-canary.56)(react@18.2.0):
     resolution: {integrity: sha512-gGHx3uJkZNYYpFNFk8eEo96ssiFE2OmYA49wszHxHrtO5nL7kzRcnJF8SALGpqSEjo5D3fLMH24MrhbBsO0sig==}
     peerDependencies:
       '@tanstack/react-query': ^5.28.14
@@ -5004,7 +5004,7 @@ packages:
       react: ^18.0.0
     dependencies:
       '@tanstack/react-query': 5.28.6(react@18.2.0)
-      next: 14.2.0-canary.55(react-dom@18.2.0)(react@18.2.0)
+      next: 14.2.0-canary.56(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
     dev: false
 
@@ -6816,12 +6816,12 @@ packages:
   /eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
 
-  /edge-csrf@1.0.9(next@14.2.0-canary.55):
+  /edge-csrf@1.0.9(next@14.2.0-canary.56):
     resolution: {integrity: sha512-3F89YTh42UDdISr3s9AEcgJDLi4ysgjGfnybzF0LuZGaG2W31h1ZwgWwEQBLMj04lAklcP4XHZYi7vk9o8zcbg==}
     peerDependencies:
       next: ^13.0.0 || ^14.0.0
     dependencies:
-      next: 14.2.0-canary.55(react-dom@18.2.0)(react@18.2.0)
+      next: 14.2.0-canary.56(react-dom@18.2.0)(react@18.2.0)
     dev: false
 
   /editorconfig@1.0.4:
@@ -9607,7 +9607,7 @@ packages:
       - supports-color
     dev: false
 
-  /next-sitemap@4.2.3(next@14.2.0-canary.55):
+  /next-sitemap@4.2.3(next@14.2.0-canary.56):
     resolution: {integrity: sha512-vjdCxeDuWDzldhCnyFCQipw5bfpl4HmZA7uoo3GAaYGjGgfL4Cxb1CiztPuWGmS+auYs7/8OekRS8C2cjdAsjQ==}
     engines: {node: '>=14.18'}
     hasBin: true
@@ -9618,7 +9618,7 @@ packages:
       '@next/env': 13.5.6
       fast-glob: 3.3.2
       minimist: 1.2.8
-      next: 14.2.0-canary.55(react-dom@18.2.0)(react@18.2.0)
+      next: 14.2.0-canary.56(react-dom@18.2.0)(react@18.2.0)
     dev: false
 
   /next-themes@0.3.0(react-dom@18.2.0)(react@18.2.0):
@@ -9710,8 +9710,8 @@ packages:
       - babel-plugin-macros
     dev: false
 
-  /next@14.2.0-canary.55(react-dom@18.2.0)(react@18.2.0):
+  /next@14.2.0-canary.56(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-RLEOesad7T/2XrtHw1NdjO0Jb10eTp5+O2GTrq072sk1awPsam+bm35iKe6bXGUAhsfen9EDUchZGFohjnhhSg==}
+    resolution: {integrity: sha512-o5/GGmNwGY3y3At/K9Y/9Vmuhjk7lwXPh7W/feePYeqpYu7/jp47NDg+EKczNj3ueOdKPFJr2kiwYfD3rT2RBQ==}
     engines: {node: '>=18.17.0'}
     hasBin: true
     peerDependencies:
@@ -9728,7 +9728,7 @@ packages:
       sass:
         optional: true
     dependencies:
-      '@next/env': 14.2.0-canary.55
+      '@next/env': 14.2.0-canary.56
       '@swc/helpers': 0.5.5
       busboy: 1.6.0
       caniuse-lite: 1.0.30001600
@@ -9738,15 +9738,15 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
       styled-jsx: 5.1.1(react@18.2.0)
     optionalDependencies:
-      '@next/swc-darwin-arm64': 14.2.0-canary.55
+      '@next/swc-darwin-arm64': 14.2.0-canary.56
-      '@next/swc-darwin-x64': 14.2.0-canary.55
+      '@next/swc-darwin-x64': 14.2.0-canary.56
-      '@next/swc-linux-arm64-gnu': 14.2.0-canary.55
+      '@next/swc-linux-arm64-gnu': 14.2.0-canary.56
-      '@next/swc-linux-arm64-musl': 14.2.0-canary.55
+      '@next/swc-linux-arm64-musl': 14.2.0-canary.56
-      '@next/swc-linux-x64-gnu': 14.2.0-canary.55
+      '@next/swc-linux-x64-gnu': 14.2.0-canary.56
-      '@next/swc-linux-x64-musl': 14.2.0-canary.55
+      '@next/swc-linux-x64-musl': 14.2.0-canary.56
-      '@next/swc-win32-arm64-msvc': 14.2.0-canary.55
+      '@next/swc-win32-arm64-msvc': 14.2.0-canary.56
-      '@next/swc-win32-ia32-msvc': 14.2.0-canary.55
+      '@next/swc-win32-ia32-msvc': 14.2.0-canary.56
-      '@next/swc-win32-x64-msvc': 14.2.0-canary.55
+      '@next/swc-win32-x64-msvc': 14.2.0-canary.56
     transitivePeerDependencies:
       - '@babel/core'
       - babel-plugin-macros