Cleanup

apps/web/app/(dashboard)/home/components/home-sidebar-account-selector.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+import featureFlagsConfig from '~/config/feature-flags.config';
+import pathsConfig from '~/config/paths.config';
+
+import { AccountSelector } from '@kit/accounts/account-selector';
+
+const features = {
+  enableOrganizationAccounts: featureFlagsConfig.enableOrganizationAccounts,
+  enableOrganizationCreation: featureFlagsConfig.enableOrganizationCreation,
+};
+
+export function HomeSidebarAccountSelector(props: {
+  accounts: Array<{
+    label: string | null;
+    value: string | null;
+    image: string | null;
+  }>;
+
+  collapsed: boolean;
+}) {
+  const router = useRouter();
+
+  return (
+    <AccountSelector
+      collapsed={props.collapsed}
+      accounts={props.accounts}
+      features={features}
+      onAccountChange={(value) => {
+        if (value) {
+          const path = pathsConfig.app.accountHome.replace('[account]', value);
+          router.replace(path);
+        }
+      }}
+    />
+  );
+}

apps/web/app/(dashboard)/home/components/home-sidebar.tsx

@@ -0,0 +1,57 @@
+import { use } from 'react';
+
+import { cookies } from 'next/headers';
+
+import { HomeSidebarAccountSelector } from '~/(dashboard)/home/components/home-sidebar-account-selector';
+import { ProfileDropdownContainer } from '~/(dashboard)/home/components/personal-account-dropdown';
+import { personalAccountSidebarConfig } from '~/config/personal-account-sidebar.config';
+
+import { getSupabaseServerComponentClient } from '@kit/supabase/server-component-client';
+import { Sidebar, SidebarContent, SidebarNavigation } from '@kit/ui/sidebar';
+
+export function HomeSidebar() {
+  const collapsed = getSidebarCollapsed();
+  const accounts = use(loadUserAccounts());
+
+  return (
+    <Sidebar collapsed={collapsed}>
+      <SidebarContent className={'my-4'}>
+        <HomeSidebarAccountSelector collapsed={collapsed} accounts={accounts} />
+      </SidebarContent>
+
+      <SidebarContent className={`h-[calc(100%-160px)] overflow-y-auto`}>
+        <SidebarNavigation config={personalAccountSidebarConfig} />
+      </SidebarContent>
+
+      <div className={'absolute bottom-4 left-0 w-full'}>
+        <SidebarContent>
+          <ProfileDropdownContainer collapsed={collapsed} />
+        </SidebarContent>
+      </div>
+    </Sidebar>
+  );
+}
+
+function getSidebarCollapsed() {
+  return cookies().get('sidebar-collapsed')?.value === 'true';
+}
+
+async function loadUserAccounts() {
+  const client = getSupabaseServerComponentClient();
+
+  const { data: accounts, error } = await client
+    .from('user_accounts')
+    .select('*');
+
+  if (error) {
+    throw error;
+  }
+
+  return accounts.map(({ name, slug, picture_url }) => {
+    return {
+      label: name,
+      value: slug,
+      image: picture_url,
+    };
+  });
+}

apps/web/app/(dashboard)/home/components/personal-account-dropdown.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import pathsConfig from '~/config/paths.config';
+
+import { PersonalAccountDropdown } from '@kit/accounts/personal-account-dropdown';
+import { useSignOut } from '@kit/supabase/hooks/use-sign-out';
+import { useUserSession } from '@kit/supabase/hooks/use-user-session';
+
+export function ProfileDropdownContainer(props: { collapsed: boolean }) {
+  const userSession = useUserSession();
+  const signOut = useSignOut();
+  const session = userSession?.data ?? undefined;
+
+  return (
+    <div className={props.collapsed ? '' : 'w-full'}>
+      <PersonalAccountDropdown
+        paths={{
+          home: pathsConfig.app.home,
+        }}
+        className={'w-full'}
+        showProfileName={!props.collapsed}
+        session={session}
+        signOutRequested={() => signOut.mutateAsync()}
+      />
+    </div>
+  );
+}