Fix: add application_role to account-related fields (#48)

* Fix: fix accounts view, menu

* add migration

* add application_role to account-related fields

app/home/[account]/_components/team-account-layout-sidebar.tsx

@@ -1,5 +1,6 @@
 import type { User } from '@supabase/supabase-js';
 
+import { ApplicationRole } from '@kit/accounts/types/accounts';
 import {
   Sidebar,
   SidebarContent,
@@ -18,6 +19,7 @@ type AccountModel = {
   label: string | null;
   value: string | null;
   image: string | null;
+  application_role: ApplicationRole | null;
 };
 
 export function TeamAccountLayoutSidebar(props: {
@@ -73,7 +75,10 @@ function SidebarContainer(props: {
 
       <SidebarFooter>
         <SidebarContent>
-          <ProfileAccountDropdownContainer user={props.user} />
+          <ProfileAccountDropdownContainer
+            user={props.user}
+            accounts={accounts}
+          />
         </SidebarContent>
       </SidebarFooter>
     </Sidebar>

app/home/[account]/_components/team-account-navigation-menu.tsx

@@ -1,7 +1,4 @@
-import {
-  BorderedNavigationMenu,
-  BorderedNavigationMenuItem,
-} from '@kit/ui/bordered-navigation-menu';
+import { useMemo } from 'react';
 
 import { AppLogo } from '~/components/app-logo';
 import { ProfileAccountDropdownContainer } from '~/components/personal-account-dropdown-container';
@@ -10,18 +7,22 @@ import { getTeamAccountSidebarConfig } from '~/config/team-account-navigation.co
 // local imports
 import { TeamAccountWorkspace } from '../_lib/server/team-account-workspace.loader';
 import { TeamAccountNotifications } from './team-account-notifications';
-import { useMemo } from 'react';
 
 export function TeamAccountNavigationMenu(props: {
   workspace: TeamAccountWorkspace;
 }) {
   const { account, user, accounts: rawAccounts } = props.workspace;
 
-  const accounts = useMemo(() => rawAccounts.map((account) => ({
-            label: account.name,
-            value: account.slug,
-            image: account.picture_url,
-          })),[rawAccounts])
+  const accounts = useMemo(
+    () =>
+      rawAccounts.map((account) => ({
+        label: account.name,
+        value: account.slug,
+        image: account.picture_url,
+        application_role: account.application_role,
+      })),
+    [rawAccounts],
+  );
 
   const routes = getTeamAccountSidebarConfig(account.slug).routes.reduce<
     Array<{
@@ -48,7 +49,7 @@ export function TeamAccountNavigationMenu(props: {
         <AppLogo />
       </div>
 
-      <div className={'flex items-center justify-end space-x-2.5 gap-2'}>
+      <div className={'flex items-center justify-end gap-2 space-x-2.5'}>
         <TeamAccountNotifications accountId={account.id} userId={user.id} />
         <ProfileAccountDropdownContainer
           user={user}

app/home/[account]/layout.tsx

@@ -45,11 +45,14 @@ function SidebarLayout({
   const data = use(loadTeamWorkspace(account));
   const state = use(getLayoutState(account));
 
-  const accounts = data.accounts.map(({ name, slug, picture_url }) => ({
-    label: name,
-    value: slug,
-    image: picture_url,
-  }));
+  const accounts = data.accounts.map(
+    ({ name, slug, picture_url, application_role }) => ({
+      label: name,
+      value: slug,
+      image: picture_url,
+      application_role,
+    }),
+  );
 
   return (
     <TeamAccountWorkspaceContextProvider value={data}>
@@ -91,11 +94,14 @@ function HeaderLayout({
 }>) {
   const data = use(loadTeamWorkspace(account));
 
-  const accounts = data.accounts.map(({ name, slug, picture_url }) => ({
-    label: name,
-    value: slug,
-    image: picture_url,
-  }));
+  const accounts = data.accounts.map(
+    ({ name, slug, picture_url, application_role }) => ({
+      label: name,
+      value: slug,
+      image: picture_url,
+      application_role,
+    }),
+  );
 
   return (
     <TeamAccountWorkspaceContextProvider value={data}>