fixed ui bugs (#280)

frontend/app/layout.tsx

@@ -11,7 +11,25 @@ import { PHProvider } from './providers';
 
 export const metadata: Metadata = {
   metadataBase: new URL('https://www.lmnr.ai'),
-  title: 'laminar'
+  title: 'Laminar',
+  openGraph: {
+    type: 'website',
+    title: 'Laminar',
+    description: 'The AI engineering platform',
+    images: {
+      url: '/opengraph-image.png',
+      alt: 'Laminar'
+    }
+  },
+  twitter: {
+    card: 'summary',
+    description: 'The AI engineering platform',
+    title: 'Laminar',
+    images: {
+      url: '/twitter-image.png',
+      alt: 'Laminar'
+    }
+  }
 };
 
 const PostHogPageView = dynamic(() => import('./posthog-pageview'), {

frontend/app/page.tsx

@@ -1,4 +1,3 @@
-import { Metadata } from 'next';
 import { redirect } from 'next/navigation';
 import { getServerSession } from 'next-auth';
 
@@ -7,25 +6,6 @@ import LandingHeader from '@/components/landing/landing-header';
 import { authOptions } from '@/lib/auth';
 import { Feature, isFeatureEnabled } from '@/lib/features/features';
 
-
-export const metadata: Metadata = {
-  title: 'Laminar',
-  openGraph: {
-    type: 'website',
-    title: 'Laminar',
-    description: 'AI engineering from first principles'
-  },
-  twitter: {
-    card: 'summary',
-    description: 'AI engineering from first principles',
-    title: 'Laminar',
-    images: {
-      url: 'https://www.lmnr.ai/twitter-image.png',
-      alt: 'Laminar logo'
-    }
-  }
-};
-
 export default async function LandingPage() {
   const session = await getServerSession(authOptions);
 

frontend/app/project/[projectId]/layout.tsx

@@ -51,7 +51,7 @@ export default async function ProjectIdLayout({
 
   // getting the cookies for the sidebar state
   const cookieStore = cookies();
-  const defaultOpen = cookieStore.get("sidebar:state")?.value === "true";
+  const defaultOpen = cookieStore.get("sidebar:state") ? cookieStore.get("sidebar:state")?.value === "true" : true;
 
   return (
     <UserContextProvider
@@ -63,7 +63,7 @@ export default async function ProjectIdLayout({
       <ProjectContextProvider projectId={project.id} projectName={project.name}>
         <div className="flex flex-row max-w-full max-h-screen">
           <SidebarProvider defaultOpen={defaultOpen}>
-            <div className="flex flex-col flex-shrink-0 h-screen">
+            <div className="z-50 h-screen">
               <ProjectNavbar
                 projectId={projectId}
                 fullBuild={isFeatureEnabled(Feature.FULL_BUILD)}

frontend/components/project/project-navbar.tsx

@@ -1,22 +1,25 @@
 'use client';
 
 import {
+  Book,
   Cable,
   Database,
   FlaskConical,
   LayoutGrid,
   Pen,
   PlayCircle,
   Rows4,
-  Settings
+  Settings,
+  X
 } from 'lucide-react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
+import { useEffect, useState } from 'react';
 
 import smallLogo from '@/assets/logo/icon.svg';
 import fullLogo from '@/assets/logo/logo.svg';
-import { Sidebar, SidebarContent, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from '@/components/ui/sidebar';
+import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from '@/components/ui/sidebar';
 import { cn } from '@/lib/utils';
 
 import AvatarMenu from '../user/avatar-menu';
@@ -29,6 +32,19 @@ interface ProjectNavBarProps {
 export default function ProjectNavbar({ projectId, fullBuild }: ProjectNavBarProps) {
   const pathname = usePathname();
   const { open, openMobile } = useSidebar();
+  const [showStarCard, setShowStarCard] = useState<boolean>(false);
+
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const saved = localStorage.getItem('showStarCard');
+      setShowStarCard(saved !== null ? JSON.parse(saved) : true);
+    }
+  }, []);
+
+  useEffect(() => {
+    localStorage.setItem('showStarCard', JSON.stringify(showStarCard));
+  }, [showStarCard]);
 
   const allOptions = [
     {
@@ -90,8 +106,8 @@ export default function ProjectNavbar({ projectId, fullBuild }: ProjectNavBarPro
 
   return (
     <Sidebar className="border-r" collapsible='icon'>
-      <SidebarHeader className="h-14 bg-background">
-        <Link href="/projects" className={`flex h-14 items-center ${open || openMobile ? 'justify-start pl-2' : 'justify-center'}`}>
+      <SidebarHeader className="h-12 bg-background">
+        <Link href="/projects" className={`flex h-12 items-center ${open || openMobile ? 'justify-start pl-2' : 'justify-center'}`}>
           <Image
             alt="Laminar AI logo"
             src={open || openMobile ? fullLogo : smallLogo}
@@ -100,31 +116,58 @@ export default function ProjectNavbar({ projectId, fullBuild }: ProjectNavBarPro
           />
         </Link>
       </SidebarHeader>
-      <SidebarContent className="flex flex-col pt-2 bg-background">
-        <SidebarMenu className={`${open || openMobile ? undefined : "justify-center items-center flex"}`}>
+      <SidebarContent className="pt-2 bg-background">
+        <SidebarMenu className={cn(open || openMobile ? undefined : 'justify-center items-center flex')}>
           {navbarOptions.map((option, i) => (
-            <SidebarMenuItem key={i}>
+            <SidebarMenuItem key={i} className='h-7'>
               <SidebarMenuButton
                 asChild
+                className={cn('text-secondary-foreground flex items-center', open || openMobile ? '' : 'justify-center gap-0')}
                 isActive={pathname.startsWith(option.href)}
                 tooltip={option.name}
               >
-                <Link href={option.href} className={cn(
-                  'hover:bg-secondary flex items-center p-2 rounded text-secondary-foreground',
-                  pathname.startsWith(option.href) ? 'bg-secondary text-primary-foreground' : ''
-                )}>
-                  <option.icon className="flex justify-center items-center !w-[20px] !h-[20px]" />
-                  <span>{option.name}</span>
+                <Link href={option.href}>
+                  <option.icon />
+                  {open || openMobile ? <span>{option.name}</span> : null}
                 </Link>
               </SidebarMenuButton>
             </SidebarMenuItem>
           ))}
         </SidebarMenu>
-        <div className="flex-grow" />
-        <div className="p-4">
-          <AvatarMenu showDetails={open || openMobile} />
-        </div>
+        <div className='flex-1' />
+        {showStarCard && open && (
+          <div className={cn(
+            'mx-4 mt-4 p-3 rounded-lg border bg-muted relative',
+            open || openMobile ? 'text-sm' : 'hidden'
+          )}>
+            <button
+              onClick={() => setShowStarCard(false)}
+              className="absolute right-2 top-2 text-muted-foreground hover:text-foreground"
+            >
+              <X size={16} />
+            </button>
+            <p className="text-xs text-muted-foreground mb-2">
+              Laminar is fully open source
+            </p>
+            <a
+              href="https://github.com/lmnr-ai/lmnr"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-xs text-foreground hover:underline"
+            >
+              ⭐ Star it on GitHub
+            </a>
+          </div>
+        )}
       </SidebarContent>
-    </Sidebar>
+      <SidebarFooter className='bg-background p-4 gap-4'>
+        <Link href="https://docs.lmnr.ai" target="_blank" rel="noopener noreferrer"
+          className={cn('h-8 text-secondary-foreground flex items-center gap-2', open || openMobile ? '' : 'justify-center')}>
+          <Book size={16} />
+          {open || openMobile ? <span className='text-sm'>Docs</span> : null}
+        </Link>
+        <AvatarMenu showDetails={open || openMobile} />
+      </SidebarFooter>
+    </Sidebar >
   );
 }