From 2a8752fe05138a68166392021b18dea8dbf1f183 Mon Sep 17 00:00:00 2001 From: Robert Kim Date: Mon, 16 Dec 2024 12:44:43 +0000 Subject: [PATCH] fixed ui bugs --- frontend/app/layout.tsx | 20 ++- frontend/app/page.tsx | 20 --- frontend/app/project/[projectId]/layout.tsx | 4 +- .../components/button-scroll-to-bottom.tsx | 34 ---- .../project/project-navbar-collapsed.tsx | 145 ------------------ .../components/project/project-navbar.tsx | 79 +++++++--- frontend/components/traces/traces.tsx | 8 +- frontend/components/ui/datatable.tsx | 2 +- frontend/components/ui/header.tsx | 9 +- frontend/components/ui/sidebar.tsx | 4 +- frontend/components/ui/tooltip.tsx | 2 +- 11 files changed, 92 insertions(+), 235 deletions(-) delete mode 100644 frontend/components/button-scroll-to-bottom.tsx delete mode 100644 frontend/components/project/project-navbar-collapsed.tsx diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx index 98a16d1..2dc6f0c 100644 --- a/frontend/app/layout.tsx +++ b/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'), { diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx index c8c143b..cf94130 100644 --- a/frontend/app/page.tsx +++ b/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); diff --git a/frontend/app/project/[projectId]/layout.tsx b/frontend/app/project/[projectId]/layout.tsx index 35a43d9..21d4f80 100644 --- a/frontend/app/project/[projectId]/layout.tsx +++ b/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 (
-
+
{ - window.scrollTo({ - top: document.body.offsetHeight, - behavior: 'smooth' - }); - }} - {...props} - > - - Scroll to bottom - - ); -} diff --git a/frontend/components/project/project-navbar-collapsed.tsx b/frontend/components/project/project-navbar-collapsed.tsx deleted file mode 100644 index ac03a85..0000000 --- a/frontend/components/project/project-navbar-collapsed.tsx +++ /dev/null @@ -1,145 +0,0 @@ -'use client'; - -import { - Cable, - Database, - FlaskConical, - LayoutGrid, - Pen, - PlayCircle, - Rows4, - Settings -} from 'lucide-react'; -import Image from 'next/image'; -import Link from 'next/link'; -import { usePathname } from 'next/navigation'; - -import logo from '@/assets/logo/icon.svg'; -import { - Tooltip, - TooltipContent, - TooltipProvider, - TooltipTrigger -} from '@/components/ui/tooltip'; -import { cn } from '@/lib/utils'; - -import AvatarMenu from '../user/avatar-menu'; - -interface ProjectNavBarProps { - projectId: string; - fullBuild: boolean; -} - -export default function ProjectNavbarCollapsed({ - projectId, - fullBuild -}: ProjectNavBarProps) { - const pathname = usePathname(); - - const allOptions = [ - { - name: 'dashboard', - href: `/project/${projectId}/dashboard`, - icon: LayoutGrid, - current: false - }, - { - name: 'traces', - href: `/project/${projectId}/traces`, - icon: Rows4, - current: false - }, - { - name: 'evaluations', - href: `/project/${projectId}/evaluations`, - icon: FlaskConical, - current: false - }, - { - name: 'datasets', - href: `/project/${projectId}/datasets`, - icon: Database, - current: false - }, - { - name: 'queues', - href: `/project/${projectId}/labeling-queues`, - icon: Pen, - current: false - }, - { - name: 'playgrounds', - href: `/project/${projectId}/playgrounds`, - icon: PlayCircle, - current: false - }, - { - name: 'pipelines', - href: `/project/${projectId}/pipelines`, - icon: Cable, - current: false - }, - { - name: 'settings', - href: `/project/${projectId}/settings`, - icon: Settings, - current: false - } - ]; - - const navbarOptions = allOptions.filter(option => { - if (!fullBuild) { - return !['dashboard'].includes(option.name); - } - return true; - }); - - return ( -
- - Laminar AI icon - -
- {navbarOptions.map((option, i) => ( - - - - - - - - -
{option.name}
- - - - // - // - //
- // {option.name.charAt(0).toUpperCase() + option.name.slice(1)} - //
- // - ))} -
-
-
- -
-
- ); -} diff --git a/frontend/components/project/project-navbar.tsx b/frontend/components/project/project-navbar.tsx index 04aeb9f..c52c7b7 100644 --- a/frontend/components/project/project-navbar.tsx +++ b/frontend/components/project/project-navbar.tsx @@ -1,6 +1,7 @@ 'use client'; import { + Book, Cable, Database, FlaskConical, @@ -8,15 +9,17 @@ import { 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(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 ( - - + + Laminar AI logo - - + + {navbarOptions.map((option, i) => ( - + - - - {option.name} + + + {open || openMobile ? {option.name} : null} ))} -
-
- -
+
+ {showStarCard && open && ( +
+ +

+ Laminar is fully open source +

+ + ⭐ Star it on GitHub + +
+ )} - + + + + {open || openMobile ? Docs : null} + + + + ); } diff --git a/frontend/components/traces/traces.tsx b/frontend/components/traces/traces.tsx index 5a2690d..c3b5203 100644 --- a/frontend/components/traces/traces.tsx +++ b/frontend/components/traces/traces.tsx @@ -67,12 +67,12 @@ export default function Traces() { Traces - - Sessions - Spans + + Sessions +
@@ -83,7 +83,7 @@ export default function Traces() { - +
diff --git a/frontend/components/ui/datatable.tsx b/frontend/components/ui/datatable.tsx index 4222a5e..ffe8a3e 100644 --- a/frontend/components/ui/datatable.tsx +++ b/frontend/components/ui/datatable.tsx @@ -208,7 +208,7 @@ export function DataTable({ 'flex min-w-full border-b', !!onRowClick && 'cursor-pointer', row.depth > 0 && 'bg-secondary/40', - focusedRowId === row.id && 'bg-secondary/50' + focusedRowId === row.id && 'bg-secondary/70' )} key={row.id} data-state={row.getIsSelected() && 'selected'} diff --git a/frontend/components/ui/header.tsx b/frontend/components/ui/header.tsx index f5dd9f8..b02b5c8 100644 --- a/frontend/components/ui/header.tsx +++ b/frontend/components/ui/header.tsx @@ -25,7 +25,7 @@ export default function Header({ path, children, className, showSidebarTrigger = >
{showSidebarTrigger && ( - + )} {projectName && (
@@ -51,12 +51,7 @@ export default function Header({ path, children, className, showSidebarTrigger = {children}
- -