Revert "[dev] [Itsnotaka] daniel/ui (#1915)" (#1928)

This reverts commit 44faa9e.

Co-authored-by: Mariano Fuentes <[email protected]>

Author: github-actions[bot]

apps/app/src/actions/sidebar.ts

@@ -0,0 +1,24 @@
+'use server';
+
+import { addYears } from 'date-fns';
+import { createSafeActionClient } from 'next-safe-action';
+import { cookies } from 'next/headers';
+import { z } from 'zod';
+
+const schema = z.object({
+  isCollapsed: z.boolean(),
+});
+
+export const updateSidebarState = createSafeActionClient()
+  .inputSchema(schema)
+  .action(async ({ parsedInput }) => {
+    const cookieStore = await cookies();
+
+    cookieStore.set({
+      name: 'sidebar-collapsed',
+      value: JSON.stringify(parsedInput.isCollapsed),
+      expires: addYears(new Date(), 1),
+    });
+
+    return { success: true };
+  });

apps/app/src/app/(app)/[orgId]/layout.tsx

@@ -1,10 +1,11 @@
-import { AppSidebar } from '@/components/app-sidebar';
+import { AnimatedLayout } from '@/components/animated-layout';
 import { CheckoutCompleteDialog } from '@/components/dialogs/checkout-complete-dialog';
 import { Header } from '@/components/header';
 import { AssistantSheet } from '@/components/sheets/assistant-sheet';
+import { Sidebar } from '@/components/sidebar';
 import { TriggerTokenProvider } from '@/components/trigger-token-provider';
+import { SidebarProvider } from '@/context/sidebar-context';
 import { auth } from '@/utils/auth';
-import { SidebarInset, SidebarProvider } from '@comp/ui/sidebar';
 import { db, Role } from '@db';
 import dynamic from 'next/dynamic';
 import { cookies, headers } from 'next/headers';
@@ -14,6 +15,7 @@ import { ConditionalOnboardingTracker } from './components/ConditionalOnboarding
 import { ConditionalPaddingWrapper } from './components/ConditionalPaddingWrapper';
 import { DynamicMinHeight } from './components/DynamicMinHeight';
 
+// Helper to safely parse comma-separated roles string
 function parseRolesString(rolesStr: string | null | undefined): Role[] {
   if (!rolesStr) return [];
   return rolesStr
@@ -36,9 +38,10 @@ export default async function Layout({
   const { orgId: requestedOrgId } = await params;
 
   const cookieStore = await cookies();
-  const defaultOpen = cookieStore.get('sidebar_state')?.value !== 'false';
-  const publicAccessToken = cookieStore.get('publicAccessToken')?.value || undefined;
+  const isCollapsed = cookieStore.get('sidebar-collapsed')?.value === 'true';
+  let publicAccessToken = cookieStore.get('publicAccessToken')?.value || undefined;
 
+  // Check if user has access to this organization
   const session = await auth.api.getSession({
     headers: await headers(),
   });
@@ -48,11 +51,13 @@ export default async function Layout({
     return redirect('/auth');
   }
 
+  // First check if the organization exists and load access flags
   const organization = await db.organization.findUnique({
     where: { id: requestedOrgId },
   });
 
   if (!organization) {
+    // Organization doesn't exist
     return redirect('/auth/not-found');
   }
 
@@ -65,6 +70,7 @@ export default async function Layout({
   });
 
   if (!member) {
+    // User doesn't have access to this organization
     return redirect('/auth/unauthorized');
   }
 
@@ -76,10 +82,12 @@ export default async function Layout({
     return redirect('/no-access');
   }
 
+  // If this org is not accessible on current plan, redirect to upgrade
   if (!organization.hasAccess) {
     return redirect(`/upgrade/${organization.id}`);
   }
 
+  // If onboarding is required and user isn't already on onboarding, redirect
   if (!organization.onboardingCompleted) {
     return redirect(`/onboarding/${organization.id}`);
   }
@@ -95,9 +103,8 @@ export default async function Layout({
       triggerJobId={onboarding?.triggerJobId || undefined}
       initialToken={publicAccessToken || undefined}
     >
-      <SidebarProvider defaultOpen={defaultOpen}>
-        <AppSidebar organization={organization} />
-        <SidebarInset>
+      <SidebarProvider initialIsCollapsed={isCollapsed}>
+        <AnimatedLayout sidebar={<Sidebar organization={organization} />} isCollapsed={isCollapsed}>
           {onboarding?.triggerJobId && <ConditionalOnboardingTracker onboarding={onboarding} />}
           <Header organizationId={organization.id} />
           <ConditionalPaddingWrapper>
@@ -107,7 +114,7 @@ export default async function Layout({
           <Suspense fallback={null}>
             <CheckoutCompleteDialog orgId={organization.id} />
           </Suspense>
-        </SidebarInset>
+        </AnimatedLayout>
         <HotKeys />
       </SidebarProvider>
     </TriggerTokenProvider>

apps/app/src/app/providers.tsx

@@ -4,7 +4,6 @@ import { JwtTokenManager } from '@/components/auth/jwt-token-manager';
 import { env } from '@/env.mjs';
 import { AnalyticsProvider } from '@comp/analytics';
 import { Toaster } from '@comp/ui/sooner';
-import { TooltipProvider } from '@comp/ui/tooltip';
 import { GoogleTagManager } from '@next/third-parties/google';
 import {
   defaultShouldDehydrateQuery,
@@ -87,11 +86,9 @@ export function Providers({ children, session }: ProviderProps) {
           userId={session?.user?.id ?? undefined}
           userEmail={session?.user?.email ?? undefined}
         >
-          <TooltipProvider delayDuration={0}>
-            <JwtTokenManager />
-            {children}
-            <Toaster richColors />
-          </TooltipProvider>
+          <JwtTokenManager />
+          {children}
+          <Toaster richColors />
         </AnalyticsProvider>
       </ThemeProvider>
     </QueryClientProvider>

apps/app/src/components/animated-layout.tsx

@@ -0,0 +1,25 @@
+import { cn } from '@comp/ui/cn';
+
+interface AnimatedLayoutProps {
+  children: React.ReactNode;
+  sidebar: React.ReactNode;
+  isCollapsed: boolean;
+  blurred?: boolean;
+}
+
+export function AnimatedLayout({ children, sidebar, isCollapsed, blurred }: AnimatedLayoutProps) {
+  return (
+    <div className="flex h-dvh w-full overflow-hidden">
+      <div
+        className={cn(
+          'bg-background hidden h-full shrink-0 overflow-y-auto border-r duration-300 ease-in-out md:block',
+          isCollapsed ? 'w-[80px]' : 'w-[240px]',
+          blurred ? 'pointer-events-none blur-xs select-none' : '',
+        )}
+      >
+        {sidebar}
+      </div>
+      <div className="bg-background flex-1 overflow-y-auto">{children}</div>
+    </div>
+  );
+}

apps/app/src/components/header.tsx

@@ -1,8 +1,12 @@
+import { getFeatureFlags } from '@/app/posthog';
 import { UserMenu } from '@/components/user-menu';
+import { getOrganizations } from '@/data/getOrganizations';
+import { auth } from '@/utils/auth';
 import { Skeleton } from '@comp/ui/skeleton';
-import { SidebarTrigger } from '@comp/ui/sidebar';
+import { headers } from 'next/headers';
 import { Suspense } from 'react';
 import { AssistantButton } from './ai/chat-button';
+import { MobileMenu } from './mobile-menu';
 import { NotificationBell } from './notifications/notification-bell';
 
 export async function Header({
@@ -12,9 +16,29 @@ export async function Header({
   organizationId?: string;
   hideChat?: boolean;
 }) {
+  const { organizations } = await getOrganizations();
+
+  // Check feature flags for menu items
+  const session = await auth.api.getSession({
+    headers: await headers(),
+  });
+  let isQuestionnaireEnabled = false;
+  let isTrustNdaEnabled = false;
+  if (session?.user?.id) {
+    const flags = await getFeatureFlags(session.user.id);
+    isQuestionnaireEnabled = flags['ai-vendor-questionnaire'] === true;
+    isTrustNdaEnabled =
+      flags['is-trust-nda-enabled'] === true || flags['is-trust-nda-enabled'] === 'true';
+  }
+
   return (
     <header className="border/40 sticky top-0 z-10 flex items-center justify-between border-b px-4 py-2 backdrop-blur-sm bg-card">
-      <SidebarTrigger className="md:hidden" />
+      <MobileMenu
+        organizations={organizations}
+        organizationId={organizationId}
+        isQuestionnaireEnabled={isQuestionnaireEnabled}
+        isTrustNdaEnabled={isTrustNdaEnabled}
+      />
 
       {!hideChat && <AssistantButton />}