Skip to content

Commit ed9a71f

Browse files
icecrasher321icecrasher321
authored
v0.6.9: general ux improvements for tables, mothership
2 parents c78c870 + f6975fc commit ed9a71f

File tree

93 files changed

+2957
-850
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

93 files changed

+2957
-850
lines changed

‎apps/sim/app/(home)/components/navbar/navbar.tsx‎

Lines changed: 107 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@
33
import { useCallback, useEffect, useRef, useState } from 'react'
44
import Image from 'next/image'
55
import Link from 'next/link'
6+
import { useSearchParams } from 'next/navigation'
67
import { GithubOutlineIcon } from '@/components/icons'
8+
import { useSession } from '@/lib/auth/auth-client'
79
import { cn } from '@/lib/core/utils/cn'
810
import {
911
BlogDropdown,
@@ -40,6 +42,12 @@ interface NavbarProps {
4042

4143
export default function Navbar({ logoOnly = false, blogPosts = [] }: NavbarProps) {
4244
const brand = getBrandConfig()
45+
const searchParams = useSearchParams()
46+
const { data: session, isPending: isSessionPending } = useSession()
47+
const isAuthenticated = Boolean(session?.user?.id)
48+
const isBrowsingHome = searchParams.has('home')
49+
const useHomeLinks = isAuthenticated || isBrowsingHome
50+
const logoHref = useHomeLinks ? '/?home' : '/'
4351
const [activeDropdown, setActiveDropdown] = useState<DropdownId>(null)
4452
const [hoveredLink, setHoveredLink] = useState<string | null>(null)
4553
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
@@ -92,7 +100,7 @@ export default function Navbar({ logoOnly = false, blogPosts = [] }: NavbarProps
92100
itemScope
93101
itemType='https://schema.org/SiteNavigationElement'
94102
>
95-
<Link href='/' className={LOGO_CELL} aria-label={`${brand.name} home`} itemProp='url'>
103+
<Link href={logoHref} className={LOGO_CELL} aria-label={`${brand.name} home`} itemProp='url'>
96104
<span itemProp='name' className='sr-only'>
97105
{brand.name}
98106
</span>
@@ -121,7 +129,9 @@ export default function Navbar({ logoOnly = false, blogPosts = [] }: NavbarProps
121129
{!logoOnly && (
122130
<>
123131
<ul className='mt-[0.75px] hidden lg:flex'>
124-
{NAV_LINKS.map(({ label, href, external, icon, dropdown }) => {
132+
{NAV_LINKS.map(({ label, href: rawHref, external, icon, dropdown }) => {
133+
const href =
134+
useHomeLinks && rawHref.startsWith('/#') ? `/?home${rawHref.slice(1)}` : rawHref
125135
const hasDropdown = !!dropdown
126136
const isActive = hasDropdown && activeDropdown === dropdown
127137
const isThisHovered = hoveredLink === label
@@ -206,21 +216,38 @@ export default function Navbar({ logoOnly = false, blogPosts = [] }: NavbarProps
206216

207217
<div className='hidden flex-1 lg:block' />
208218

209-
<div className='hidden items-center gap-[8px] pr-[80px] pl-[20px] lg:flex'>
210-
<Link
211-
href='/login'
212-
className='inline-flex h-[30px] items-center rounded-[5px] border border-[#3d3d3d] px-[9px] text-[#ECECEC] text-[13.5px] transition-colors hover:bg-[#2A2A2A]'
213-
aria-label='Log in'
214-
>
215-
Log in
216-
</Link>
217-
<Link
218-
href='/signup'
219-
className='inline-flex h-[30px] items-center gap-[7px] rounded-[5px] border border-[#FFFFFF] bg-[#FFFFFF] px-[9px] text-[13.5px] text-black transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]'
220-
aria-label='Get started with Sim'
221-
>
222-
Get started
223-
</Link>
219+
<div
220+
className={cn(
221+
'hidden items-center gap-[8px] pr-[80px] pl-[20px] lg:flex',
222+
isSessionPending && 'invisible'
223+
)}
224+
>
225+
{isAuthenticated ? (
226+
<Link
227+
href='/workspace'
228+
className='inline-flex h-[30px] items-center gap-[7px] rounded-[5px] border border-[#FFFFFF] bg-[#FFFFFF] px-[9px] text-[13.5px] text-black transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]'
229+
aria-label='Go to app'
230+
>
231+
Go to App
232+
</Link>
233+
) : (
234+
<>
235+
<Link
236+
href='/login'
237+
className='inline-flex h-[30px] items-center rounded-[5px] border border-[#3d3d3d] px-[9px] text-[#ECECEC] text-[13.5px] transition-colors hover:bg-[#2A2A2A]'
238+
aria-label='Log in'
239+
>
240+
Log in
241+
</Link>
242+
<Link
243+
href='/signup'
244+
className='inline-flex h-[30px] items-center gap-[7px] rounded-[5px] border border-[#FFFFFF] bg-[#FFFFFF] px-[9px] text-[13.5px] text-black transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]'
245+
aria-label='Get started with Sim'
246+
>
247+
Get started
248+
</Link>
249+
</>
250+
)}
224251
</div>
225252

226253
<div className='flex flex-1 items-center justify-end pr-[20px] lg:hidden'>
@@ -242,30 +269,34 @@ export default function Navbar({ logoOnly = false, blogPosts = [] }: NavbarProps
242269
)}
243270
>
244271
<ul className='flex flex-col'>
245-
{NAV_LINKS.map(({ label, href, external }) => (
246-
<li key={label} className='border-[#2A2A2A] border-b'>
247-
{external ? (
248-
<a
249-
href={href}
250-
target='_blank'
251-
rel='noopener noreferrer'
252-
className='flex items-center justify-between px-[20px] py-[14px] text-[#ECECEC] transition-colors active:bg-[#2A2A2A]'
253-
onClick={() => setMobileMenuOpen(false)}
254-
>
255-
{label}
256-
<ExternalArrowIcon />
257-
</a>
258-
) : (
259-
<Link
260-
href={href}
261-
className='flex items-center px-[20px] py-[14px] text-[#ECECEC] transition-colors active:bg-[#2A2A2A]'
262-
onClick={() => setMobileMenuOpen(false)}
263-
>
264-
{label}
265-
</Link>
266-
)}
267-
</li>
268-
))}
272+
{NAV_LINKS.map(({ label, href: rawHref, external }) => {
273+
const href =
274+
useHomeLinks && rawHref.startsWith('/#') ? `/?home${rawHref.slice(1)}` : rawHref
275+
return (
276+
<li key={label} className='border-[#2A2A2A] border-b'>
277+
{external ? (
278+
<a
279+
href={href}
280+
target='_blank'
281+
rel='noopener noreferrer'
282+
className='flex items-center justify-between px-[20px] py-[14px] text-[#ECECEC] transition-colors active:bg-[#2A2A2A]'
283+
onClick={() => setMobileMenuOpen(false)}
284+
>
285+
{label}
286+
<ExternalArrowIcon />
287+
</a>
288+
) : (
289+
<Link
290+
href={href}
291+
className='flex items-center px-[20px] py-[14px] text-[#ECECEC] transition-colors active:bg-[#2A2A2A]'
292+
onClick={() => setMobileMenuOpen(false)}
293+
>
294+
{label}
295+
</Link>
296+
)}
297+
</li>
298+
)
299+
})}
269300
<li className='border-[#2A2A2A] border-b'>
270301
<a
271302
href='https://github.com/simstudioai/sim'
@@ -280,23 +311,41 @@ export default function Navbar({ logoOnly = false, blogPosts = [] }: NavbarProps
280311
</li>
281312
</ul>
282313

283-
<div className='mt-auto flex flex-col gap-[10px] p-[20px]'>
284-
<Link
285-
href='/login'
286-
className='flex h-[32px] items-center justify-center rounded-[5px] border border-[#3d3d3d] text-[#ECECEC] text-[14px] transition-colors active:bg-[#2A2A2A]'
287-
onClick={() => setMobileMenuOpen(false)}
288-
aria-label='Log in'
289-
>
290-
Log in
291-
</Link>
292-
<Link
293-
href='/signup'
294-
className='flex h-[32px] items-center justify-center rounded-[5px] border border-[#FFFFFF] bg-[#FFFFFF] text-[14px] text-black transition-colors active:bg-[#E0E0E0]'
295-
onClick={() => setMobileMenuOpen(false)}
296-
aria-label='Get started with Sim'
297-
>
298-
Get started
299-
</Link>
314+
<div
315+
className={cn(
316+
'mt-auto flex flex-col gap-[10px] p-[20px]',
317+
isSessionPending && 'invisible'
318+
)}
319+
>
320+
{isAuthenticated ? (
321+
<Link
322+
href='/workspace'
323+
className='flex h-[32px] items-center justify-center rounded-[5px] border border-[#FFFFFF] bg-[#FFFFFF] text-[14px] text-black transition-colors active:bg-[#E0E0E0]'
324+
onClick={() => setMobileMenuOpen(false)}
325+
aria-label='Go to app'
326+
>
327+
Go to App
328+
</Link>
329+
) : (
330+
<>
331+
<Link
332+
href='/login'
333+
className='flex h-[32px] items-center justify-center rounded-[5px] border border-[#3d3d3d] text-[#ECECEC] text-[14px] transition-colors active:bg-[#2A2A2A]'
334+
onClick={() => setMobileMenuOpen(false)}
335+
aria-label='Log in'
336+
>
337+
Log in
338+
</Link>
339+
<Link
340+
href='/signup'
341+
className='flex h-[32px] items-center justify-center rounded-[5px] border border-[#FFFFFF] bg-[#FFFFFF] text-[14px] text-black transition-colors active:bg-[#E0E0E0]'
342+
onClick={() => setMobileMenuOpen(false)}
343+
aria-label='Get started with Sim'
344+
>
345+
Get started
346+
</Link>
347+
</>
348+
)}
300349
</div>
301350
</div>
302351
</>

‎apps/sim/app/(landing)/blog/[slug]/page.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,6 @@ export default async function Page({ params }: { params: Promise<{ slug: string
6060
sizes='(max-width: 768px) 100vw, 450px'
6161
priority
6262
itemProp='image'
63-
unoptimized
6463
/>
6564
</div>
6665
</div>
@@ -144,7 +143,6 @@ export default async function Page({ params }: { params: Promise<{ slug: string
144143
className='h-[160px] w-full object-cover'
145144
sizes='(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw'
146145
loading='lazy'
147-
unoptimized
148146
/>
149147
<div className='p-3'>
150148
<div className='mb-1 text-[#999] text-xs'>

‎apps/sim/app/(landing)/blog/authors/[id]/page.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,6 @@ export default async function AuthorPage({ params }: { params: Promise<{ id: str
6464
width={600}
6565
height={315}
6666
className='h-[160px] w-full object-cover transition-transform group-hover:scale-[1.02]'
67-
unoptimized
6867
/>
6968
<div className='p-3'>
7069
<div className='mb-1 text-[#999] text-xs'>

‎apps/sim/app/(landing)/blog/post-grid.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@ export function PostGrid({ posts }: { posts: Post[] }) {
3232
src={p.ogImage}
3333
alt={p.title}
3434
sizes='(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw'
35-
unoptimized
3635
priority={index < 6}
3736
loading={index < 6 ? undefined : 'lazy'}
3837
fill

‎apps/sim/app/(landing)/components/nav/nav.tsx‎

Lines changed: 73 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,9 @@ import { createLogger } from '@sim/logger'
55
import { ArrowRight, ChevronRight } from 'lucide-react'
66
import Image from 'next/image'
77
import Link from 'next/link'
8-
import { useRouter } from 'next/navigation'
8+
import { useRouter, useSearchParams } from 'next/navigation'
99
import { GithubIcon } from '@/components/icons'
10+
import { useSession } from '@/lib/auth/auth-client'
1011
import { isHosted } from '@/lib/core/config/feature-flags'
1112
import { getFormattedGitHubStars } from '@/app/(landing)/actions/github'
1213
import { useBrandConfig } from '@/ee/whitelabeling'
@@ -26,6 +27,12 @@ export default function Nav({ hideAuthButtons = false, variant = 'landing' }: Na
2627
const router = useRouter()
2728
const brand = useBrandConfig()
2829
const buttonClass = useBrandedButtonClass()
30+
const searchParams = useSearchParams()
31+
const { data: session, isPending: isSessionPending } = useSession()
32+
const isAuthenticated = Boolean(session?.user?.id)
33+
const isBrowsingHome = searchParams.has('home')
34+
const useHomeLinks = isAuthenticated || isBrowsingHome
35+
const logoHref = useHomeLinks ? '/?home' : '/'
2936

3037
useEffect(() => {
3138
if (variant !== 'landing') return
@@ -72,7 +79,7 @@ export default function Nav({ hideAuthButtons = false, variant = 'landing' }: Na
7279
</li>
7380
<li>
7481
<Link
75-
href='/?from=nav#pricing'
82+
href={useHomeLinks ? '/?home#pricing' : '/#pricing'}
7683
className='text-[16px] text-muted-foreground transition-colors hover:text-foreground'
7784
scroll={true}
7885
>
@@ -124,7 +131,7 @@ export default function Nav({ hideAuthButtons = false, variant = 'landing' }: Na
124131
itemType='https://schema.org/SiteNavigationElement'
125132
>
126133
<div className='flex items-center gap-[34px]'>
127-
<Link href='/?from=nav' aria-label={`${brand.name} home`} itemProp='url'>
134+
<Link href={logoHref} aria-label={`${brand.name} home`} itemProp='url'>
128135
<span itemProp='name' className='sr-only'>
129136
{brand.name} Home
130137
</span>
@@ -162,45 +169,70 @@ export default function Nav({ hideAuthButtons = false, variant = 'landing' }: Na
162169

163170
{/* Auth Buttons - show only when hosted, regardless of variant */}
164171
{!hideAuthButtons && isHosted && (
165-
<div className='flex items-center justify-center gap-[16px] pt-[1.5px]'>
166-
<button
167-
onClick={handleLoginClick}
168-
onMouseEnter={() => setIsLoginHovered(true)}
169-
onMouseLeave={() => setIsLoginHovered(false)}
170-
className='group hidden text-[#2E2E2E] text-[16px] transition-colors hover:text-foreground md:block'
171-
type='button'
172-
aria-label='Log in to your account'
173-
>
174-
<span className='flex items-center gap-1'>
175-
Log in
176-
<span className='inline-flex transition-transform duration-200 group-hover:translate-x-0.5'>
177-
{isLoginHovered ? (
178-
<ArrowRight className='h-4 w-4' aria-hidden='true' />
179-
) : (
180-
<ChevronRight className='h-4 w-4' aria-hidden='true' />
181-
)}
182-
</span>
183-
</span>
184-
</button>
185-
<Link
186-
href='/signup'
187-
onMouseEnter={() => setIsHovered(true)}
188-
onMouseLeave={() => setIsHovered(false)}
189-
className={`${buttonClass} group inline-flex items-center justify-center gap-2 rounded-[10px] py-[6px] pr-[10px] pl-[12px] text-[15px] text-white transition-all`}
190-
aria-label='Get started with Sim - Sign up for free'
191-
prefetch={true}
192-
>
193-
<span className='flex items-center gap-1'>
194-
Get started
195-
<span className='inline-flex transition-transform duration-200 group-hover:translate-x-0.5'>
196-
{isHovered ? (
197-
<ArrowRight className='h-4 w-4' aria-hidden='true' />
198-
) : (
199-
<ChevronRight className='h-4 w-4' aria-hidden='true' />
200-
)}
172+
<div
173+
className={`flex items-center justify-center gap-[16px] pt-[1.5px]${isSessionPending ? ' invisible' : ''}`}
174+
>
175+
{isAuthenticated ? (
176+
<Link
177+
href='/workspace'
178+
onMouseEnter={() => setIsHovered(true)}
179+
onMouseLeave={() => setIsHovered(false)}
180+
className={`${buttonClass} group inline-flex items-center justify-center gap-2 rounded-[10px] py-[6px] pr-[10px] pl-[12px] text-[15px] text-white transition-all`}
181+
aria-label='Go to app'
182+
>
183+
<span className='flex items-center gap-1'>
184+
Go to App
185+
<span className='inline-flex transition-transform duration-200 group-hover:translate-x-0.5'>
186+
{isHovered ? (
187+
<ArrowRight className='h-4 w-4' aria-hidden='true' />
188+
) : (
189+
<ChevronRight className='h-4 w-4' aria-hidden='true' />
190+
)}
191+
</span>
201192
</span>
202-
</span>
203-
</Link>
193+
</Link>
194+
) : (
195+
<>
196+
<button
197+
onClick={handleLoginClick}
198+
onMouseEnter={() => setIsLoginHovered(true)}
199+
onMouseLeave={() => setIsLoginHovered(false)}
200+
className='group hidden text-[#2E2E2E] text-[16px] transition-colors hover:text-foreground md:block'
201+
type='button'
202+
aria-label='Log in to your account'
203+
>
204+
<span className='flex items-center gap-1'>
205+
Log in
206+
<span className='inline-flex transition-transform duration-200 group-hover:translate-x-0.5'>
207+
{isLoginHovered ? (
208+
<ArrowRight className='h-4 w-4' aria-hidden='true' />
209+
) : (
210+
<ChevronRight className='h-4 w-4' aria-hidden='true' />
211+
)}
212+
</span>
213+
</span>
214+
</button>
215+
<Link
216+
href='/signup'
217+
onMouseEnter={() => setIsHovered(true)}
218+
onMouseLeave={() => setIsHovered(false)}
219+
className={`${buttonClass} group inline-flex items-center justify-center gap-2 rounded-[10px] py-[6px] pr-[10px] pl-[12px] text-[15px] text-white transition-all`}
220+
aria-label='Get started with Sim - Sign up for free'
221+
prefetch={true}
222+
>
223+
<span className='flex items-center gap-1'>
224+
Get started
225+
<span className='inline-flex transition-transform duration-200 group-hover:translate-x-0.5'>
226+
{isHovered ? (
227+
<ArrowRight className='h-4 w-4' aria-hidden='true' />
228+
) : (
229+
<ChevronRight className='h-4 w-4' aria-hidden='true' />
230+
)}
231+
</span>
232+
</span>
233+
</Link>
234+
</>
235+
)}
204236
</div>
205237
)}
206238
</nav>

0 commit comments

Comments
 (0)