Improve app navigation with new sidebar (#66)

apps/engine/src/app/app/@connections/default.tsx

@@ -0,0 +1,3 @@
+import DefaultPage from './destinations/page';
+
+export default DefaultPage;

apps/engine/src/app/app/integrations/@tabs/outputs/github/_actions/disable-integration.action.tsx → apps/engine/src/app/app/@connections/destinations/github/_actions/disable-integration.action.tsx

@@ -19,6 +19,6 @@ export const disableIntegration = authorizedAction
       .delete(Integrations)
       .where(and(eq(Integrations.type, integrationType.Enum.github)));
 
-    revalidatePath('/app/integrations/outputs');
+    revalidatePath('/app/destinations');
     return { success: true };
   });

apps/engine/src/app/app/integrations/@tabs/outputs/github/callback/route.ts → apps/engine/src/app/app/@connections/destinations/github/callback/route.ts

@@ -43,5 +43,5 @@ export async function GET(request: NextRequest) {
     console.error('Failed to connect GitHub app.');
   }
 
-  return NextResponse.redirect(`${origin}/app/integrations/outputs`);
+  return NextResponse.redirect(`${origin}/app/destinations`);
 }

apps/engine/src/app/app/integrations/@tabs/outputs/gitlab/_actions/disable-integration.action.tsx → apps/engine/src/app/app/@connections/destinations/gitlab/_actions/disable-integration.action.tsx

@@ -19,6 +19,6 @@ export const disableIntegration = authorizedAction
       .delete(Integrations)
       .where(and(eq(Integrations.type, integrationType.Enum.github)));
 
-    revalidatePath('/app/integrations/outputs');
+    revalidatePath('/app/destinations');
     return { success: true };
   });

apps/engine/src/app/app/integrations/@tabs/outputs/page.tsx → apps/engine/src/app/app/@connections/destinations/page.tsx

@@ -8,7 +8,7 @@ export default function Page() {
   return (
     <section className="flex flex-wrap gap-2">
       <Github />
-      <Gitlab />
+      {/* <Gitlab /> */}
     </section>
   );
 }

apps/engine/src/app/app/integrations/@tabs/inputs/page.tsx → apps/engine/src/app/app/@connections/sources/page.tsx

@@ -8,7 +8,7 @@ export default function Page() {
   return (
     <section className="flex flex-wrap gap-2">
       <Figma />
-      <Penpot />
+      {/* <Penpot /> */}
     </section>
   );
 }

apps/engine/src/app/app/layout.tsx

@@ -1,32 +1,20 @@
-import { AppNavigation } from '@/components';
 import { api } from '@ds-project/api/rsc';
 import { getMetadata } from '@/lib/metadata';
-import { getShowReleasesFlag } from '@/lib/flags';
+
+import type { ReactNode } from 'react';
+import { AppLayout } from '@/modules/app-layout';
 
 export const metadata = getMetadata({ title: 'Dashboard' });
 
 export default async function RootLayout({
-  children,
+  connections,
 }: Readonly<{
-  children: React.ReactNode;
+  connections: ReactNode;
 }>) {
-  const projects = await api.projects.getAll();
+  // const tabsSegment = useSelectedLayoutSegment('tabs');
+  // const projects = await api.projects.getAll();
   const user = await api.users.getCurrent();
-  const showReleases = await getShowReleasesFlag();
+  // const showReleases = await getShowReleasesFlag();
 
-  return (
-    <>
-      <header className="sticky top-0 w-full">
-        <AppNavigation
-          className="px-2 pt-2"
-          projects={projects}
-          email={user.email}
-          showReleases={showReleases}
-        />
-      </header>
-      <main className="flex min-h-screen w-full flex-col items-center">
-        {children}
-      </main>
-    </>
-  );
+  return <AppLayout email={user.email}>{connections}</AppLayout>;
 }

apps/engine/src/components/app-navigation/app-navigation.tsx

@@ -15,7 +15,7 @@ import Link from 'next/link';
 import { cn } from '@/lib/css';
 import { HomeButton } from '../home-button';
 import type { SelectProjects } from '@ds-project/database/schema';
-import { AccountMenu } from '../account-menu/acocunt-menu';
+import { AccountMenu } from '../../modules/app-layout/acocunt-menu';
 import { config } from '@/config';
 
 interface AppNavigationProps {

apps/engine/src/components/integration-settings/integration-settings.tsx

@@ -53,18 +53,14 @@ export function IntegrationSettings({
         </SheetTrigger>
         <SheetContent className="flex flex-col">
           <SheetHeader>
-            <div className="flex gap-2 items-center">
+            <div className="flex items-center gap-2">
               {integrationLogo}
-              <SheetTitle size="base">
+              <SheetTitle>
                 <h3>Integration settings</h3>
               </SheetTitle>
             </div>
-            <SheetTitle size="base">
-              <h4>{name}</h4>
-            </SheetTitle>
-            <SheetDescription size="sm">
-              <p>Configure integration</p>
-            </SheetDescription>
+            <SheetTitle>{name}</SheetTitle>
+            <SheetDescription>Configure integration</SheetDescription>
           </SheetHeader>
           {children}
         </SheetContent>

apps/engine/src/config.ts

@@ -23,7 +23,7 @@ export const config = {
   isSentryEnabled: isProduction,
   FIGMA_QUERY_KEY: 'figma_key',
   FIGMA_COOKIE_KEY: 'figma.key',
-  figmaRedirectUri: `${pageUrl}/integrations/inputs/figma/callback`,
+  figmaRedirectUri: `${pageUrl}/app/sources/figma/callback`,
   defaultGitTokensPath: '',
   defaultTargetGitBranch: 'ds-pro/sync-tokens',
   defaultCommitMessage: 'feat(tokens): [ds-pro] 💅 Sync Tokens',

apps/engine/src/modules/app-layout/acocunt-menu.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import { shapes } from '@dicebear/collection';
+import { createAvatar } from '@dicebear/core';
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  LucideIcons,
+  SidebarMenuButton,
+} from '@ds-project/components';
+import Link from 'next/link';
+import { useMemo } from 'react';
+
+interface AccountMenuProps {
+  email: string;
+}
+
+export function AccountMenu({ email }: AccountMenuProps) {
+  const avatarUri = useMemo(() => {
+    const avatar = createAvatar(shapes, {
+      seed: email,
+    });
+
+    return avatar.toDataUri();
+  }, [email]);
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <SidebarMenuButton
+          size="lg"
+          className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+        >
+          <Avatar className="size-8 rounded-lg">
+            {/* TODO: improve alt description, perhaps with user name when we ask for it */}
+            <AvatarImage src={avatarUri} alt={'User avatar'} />
+            <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+          </Avatar>
+          <div className="grid flex-1 text-left text-sm leading-tight">
+            <span className="truncate font-semibold">{email}</span>
+            <span className="truncate text-xs">{email}</span>
+          </div>
+          <LucideIcons.ChevronsUpDown className="ml-auto size-4" />
+        </SidebarMenuButton>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+        side="bottom"
+        align="end"
+        sideOffset={4}
+      >
+        <DropdownMenuLabel className="p-0 font-normal">
+          <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+            <Avatar className="size-8 rounded-lg">
+              {/* TODO: improve alt description, perhaps with user name when we ask for it */}
+              <AvatarImage src={avatarUri} alt={'User avatar'} />
+              <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+            </Avatar>
+            <div className="grid flex-1 text-left text-sm leading-tight">
+              <span className="truncate font-semibold">{email}</span>
+              <span className="truncate text-xs">{email}</span>
+            </div>
+          </div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem asChild>
+          <Link href="/">
+            <LucideIcons.Home className="mr-2" />
+            Home
+          </Link>
+        </DropdownMenuItem>
+        <DropdownMenuItem asChild>
+          <Link href="/auth/logout">
+            <LucideIcons.LogOut className="mr-2" />
+            Log out
+          </Link>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

apps/engine/src/modules/app-layout/app-layout.tsx

@@ -0,0 +1,32 @@
+import {
+  Separator,
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from '@ds-project/components';
+import { BreadcrumbNav } from './breadcrumb-nav';
+import { AppSidebar } from './app-sidebar';
+
+export function AppLayout({
+  children,
+  email,
+}: {
+  children: React.ReactNode;
+  email: string;
+}) {
+  return (
+    <SidebarProvider>
+      <AppSidebar email={email} />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+          <div className="flex items-center gap-2 px-4">
+            <SidebarTrigger className="-ml-1" />
+            <Separator orientation="vertical" className="mr-2 h-4" />
+            <BreadcrumbNav />
+          </div>
+        </header>
+        <div className="p-4">{children}</div>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}