refactor: convert to bun workspaces monorepo
- Move web app into apps/web/ - Create packages/shared/ with shared types - Create plugins/decky-vault/ scaffold - Root package.json manages workspaces only
This commit is contained in:
@@ -0,0 +1,477 @@
|
||||
"use client"
|
||||
|
||||
import { AnimatePresence, motion } from "motion/react"
|
||||
import logo from "@/app/icon.png"
|
||||
import Image from "next/image"
|
||||
import Link from "next/link"
|
||||
import { useEffect, useSyncExternalStore, useRef, useState } from "react"
|
||||
import {
|
||||
Bookmark,
|
||||
CircleXIcon,
|
||||
Gamepad2Icon,
|
||||
LogOut,
|
||||
MenuIcon,
|
||||
ShieldIcon,
|
||||
User,
|
||||
XIcon,
|
||||
} from "lucide-react"
|
||||
import { routes, authRoutes } from "@/lib/routes"
|
||||
import { usePathname, useRouter, useSearchParams } from "next/navigation"
|
||||
import { useDebounce } from "@/lib/hooks/useDebounce"
|
||||
import { authClient, useSession } from "@/lib/auth-client"
|
||||
|
||||
export default function Navbar() {
|
||||
const pathname = usePathname()
|
||||
const router = useRouter()
|
||||
const searchParams = useSearchParams()
|
||||
|
||||
const isLanding = pathname === "/"
|
||||
const isAuthRoute =
|
||||
pathname.startsWith("/login") ||
|
||||
pathname.startsWith("/signup") ||
|
||||
pathname.startsWith("/forgot-password") ||
|
||||
pathname.startsWith("/reset-password")
|
||||
|
||||
const [searchQuery, setSearchQuery] = useState(
|
||||
() => searchParams.get("q") || "",
|
||||
)
|
||||
const debouncedQuery = useDebounce(searchQuery, 300)
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
|
||||
const [isFocused, setIsFocused] = useState(false)
|
||||
const [forceFocusStyles, setForceFocusStyles] = useState(false)
|
||||
const inputRef = useRef<HTMLInputElement>(null)
|
||||
|
||||
// When syncing state from the URL (e.g. after navigating from the landing
|
||||
// page), skip the next URL-write cycle so the stale/empty debounced value
|
||||
// doesn't overwrite the URL params before it catches up.
|
||||
const skipNextUrlWrite = useRef(false)
|
||||
|
||||
const { data: session, isPending: isSessionLoading } = useSession()
|
||||
const [userMenuOpen, setUserMenuOpen] = useState(false)
|
||||
|
||||
// Prevent hydration mismatch: useSession resolves differently on
|
||||
// server (isPending=true) vs client. We delay rendering the
|
||||
// auth-dependent UI until after the first client paint.
|
||||
// useSyncExternalStore avoids the React lint warning about setState in effects.
|
||||
const subscribe = () => () => {}
|
||||
const mounted = useSyncExternalStore(subscribe, () => true, () => false)
|
||||
const showAuth = mounted && !isSessionLoading
|
||||
|
||||
// Sync search query with URL ?q= param
|
||||
const searchQueryRef = useRef(searchQuery)
|
||||
useEffect(() => {
|
||||
searchQueryRef.current = searchQuery
|
||||
}, [searchQuery])
|
||||
|
||||
useEffect(() => {
|
||||
const q = searchParams.get("q") || ""
|
||||
if (q === searchQueryRef.current) return
|
||||
// If the URL has a different value than our state, we're syncing after
|
||||
// a navigation — skip the next URL-write to avoid clearing the param
|
||||
skipNextUrlWrite.current = true
|
||||
const id = setTimeout(() => setSearchQuery(q), 0)
|
||||
return () => clearTimeout(id)
|
||||
}, [searchParams])
|
||||
|
||||
// Update URL when debounced query changes (skip if already matches)
|
||||
useEffect(() => {
|
||||
// Skip one cycle after syncing from URL so the stale/empty debounced
|
||||
// value doesn't overwrite the URL params before it catches up
|
||||
if (skipNextUrlWrite.current) {
|
||||
skipNextUrlWrite.current = false
|
||||
return
|
||||
}
|
||||
|
||||
if (isLanding) return
|
||||
const currentQ = searchParams.get("q") || ""
|
||||
if (debouncedQuery === currentQ) return
|
||||
// Don't overwrite URL if the typed query hasn't debounced yet
|
||||
if (searchQuery !== debouncedQuery) return
|
||||
|
||||
const params = new URLSearchParams(searchParams.toString())
|
||||
if (debouncedQuery) {
|
||||
params.set("q", debouncedQuery)
|
||||
} else {
|
||||
params.delete("q")
|
||||
}
|
||||
router.replace(`/search?${params.toString()}`, { scroll: false })
|
||||
}, [debouncedQuery, isLanding, router, searchParams, searchQuery])
|
||||
|
||||
// Maintain focus & styles when flying from landing page search
|
||||
useEffect(() => {
|
||||
if (
|
||||
!isLanding &&
|
||||
searchQuery &&
|
||||
sessionStorage.getItem("focusSearch") === "true"
|
||||
) {
|
||||
sessionStorage.removeItem("focusSearch")
|
||||
const focusTimeout = setTimeout(() => setForceFocusStyles(true), 0)
|
||||
// Focus the input after the layout animation element mounts
|
||||
requestAnimationFrame(() => {
|
||||
inputRef.current?.focus()
|
||||
})
|
||||
const timer = setTimeout(() => setForceFocusStyles(false), 450)
|
||||
return () => {
|
||||
clearTimeout(focusTimeout)
|
||||
clearTimeout(timer)
|
||||
}
|
||||
}
|
||||
}, [isLanding, searchQuery])
|
||||
|
||||
const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setSearchQuery(e.target.value)
|
||||
}
|
||||
|
||||
const handleSearchSubmit = () => {
|
||||
if (searchQuery.trim()) {
|
||||
router.push(`/search?q=${encodeURIComponent(searchQuery.trim())}`)
|
||||
}
|
||||
}
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
if (e.key === "Enter") {
|
||||
handleSearchSubmit()
|
||||
}
|
||||
}
|
||||
|
||||
const navbarRoutes = routes.filter(
|
||||
(route) => route.href !== "/" && route.href !== "/search",
|
||||
)
|
||||
|
||||
// Hide navbar on auth routes
|
||||
if (isAuthRoute) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<AnimatePresence>
|
||||
<motion.nav
|
||||
key='navbar'
|
||||
initial={{ opacity: 0, y: "-100%" }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: "-100%" }}
|
||||
className='w-full flex flex-row px-4 md:px-[10svw] py-2 items-center gap-4 md:gap-8 justify-between border-b border-border sticky top-0 z-50 backdrop-blur-sm bg-background/80'
|
||||
>
|
||||
<Link
|
||||
href='/'
|
||||
className='flex flex-row gap-2 items-center font-bold text-lg py-1 shrink-0'
|
||||
>
|
||||
<Image
|
||||
src={logo}
|
||||
alt='DeckyVault Logo'
|
||||
className='h-6 my-1 w-auto'
|
||||
loading='eager'
|
||||
/>
|
||||
{!isLanding && (
|
||||
<motion.span className='hidden md:inline-block'>
|
||||
DeckyVault
|
||||
</motion.span>
|
||||
)}
|
||||
</Link>
|
||||
|
||||
<AnimatePresence>
|
||||
{!isLanding && (
|
||||
<motion.label
|
||||
key='search-bar'
|
||||
layoutId='search-bar'
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.95 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className={`flex flex-row items-center gap-2 flex-1 bg-text/5 px-2 py-1 rounded-md border placeholder:text-text/60 group transition-colors cursor-text ${
|
||||
isFocused || forceFocusStyles
|
||||
? "border-primary/80 ring-2 ring-primary/50 ring-offset-2 ring-offset-background"
|
||||
: "border-border hover:border-border-active"
|
||||
}`}
|
||||
>
|
||||
<Gamepad2Icon
|
||||
className={`h-4 w-4 transition-colors shrink-0 ${
|
||||
isFocused || forceFocusStyles
|
||||
? "stroke-accent"
|
||||
: ""
|
||||
}`}
|
||||
/>
|
||||
<input
|
||||
ref={inputRef}
|
||||
type='text'
|
||||
placeholder='search by game or appid...'
|
||||
value={searchQuery}
|
||||
onChange={handleSearchChange}
|
||||
onKeyDown={handleKeyDown}
|
||||
onFocus={() => setIsFocused(true)}
|
||||
onBlur={() => setIsFocused(false)}
|
||||
className='flex-1 outline-none bg-transparent text-sm min-w-0'
|
||||
/>
|
||||
<motion.button>
|
||||
<CircleXIcon
|
||||
onClick={() => {
|
||||
setSearchQuery("")
|
||||
if (!isLanding) {
|
||||
const params =
|
||||
new URLSearchParams(
|
||||
searchParams.toString(),
|
||||
)
|
||||
params.delete("q")
|
||||
router.replace(
|
||||
`/search?${params.toString()}`,
|
||||
{
|
||||
scroll: false,
|
||||
},
|
||||
)
|
||||
}
|
||||
}}
|
||||
className={`h-3 w-3 transition-color cursor-default hover:stroke-accent transition-all ${
|
||||
isFocused || forceFocusStyles
|
||||
? "opacity-100"
|
||||
: "opacity-0"
|
||||
}`}
|
||||
/>
|
||||
</motion.button>
|
||||
</motion.label>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Desktop Navigation Links */}
|
||||
<ul className='hidden md:flex flex-row items-center gap-6 shrink-0'>
|
||||
{navbarRoutes.map((route) => (
|
||||
<Link
|
||||
key={route.href}
|
||||
href={route.href}
|
||||
title={`Navigate to ${route.title}`}
|
||||
className='text-sm font-medium hover:text-primary transition-colors uppercase cursor-pointer'
|
||||
>
|
||||
{route.title}
|
||||
</Link>
|
||||
))}
|
||||
<AnimatePresence
|
||||
mode='popLayout'
|
||||
initial={false}
|
||||
>
|
||||
{!showAuth ? (
|
||||
<motion.li
|
||||
key='loading-placeholder'
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className='w-20 h-8 rounded-lg bg-white/3 animate-pulse'
|
||||
/>
|
||||
) : session ? (
|
||||
<motion.li
|
||||
key='profile-menu'
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className='relative'
|
||||
>
|
||||
<button
|
||||
onClick={() =>
|
||||
setUserMenuOpen(!userMenuOpen)
|
||||
}
|
||||
className='text-sm font-medium hover:text-primary transition-colors uppercase cursor-pointer'
|
||||
>
|
||||
Profile
|
||||
</button>
|
||||
{userMenuOpen && (
|
||||
<>
|
||||
<div
|
||||
className='fixed inset-0 z-40'
|
||||
onClick={() =>
|
||||
setUserMenuOpen(false)
|
||||
}
|
||||
/>
|
||||
<div className='absolute right-0 top-full mt-1 w-48 bg-[#1a1020] border border-white/10 rounded-lg shadow-lg z-50 py-1'>
|
||||
{authRoutes.map((route) => (
|
||||
<Link
|
||||
key={route.href}
|
||||
href={route.href}
|
||||
onClick={() =>
|
||||
setUserMenuOpen(
|
||||
false,
|
||||
)
|
||||
}
|
||||
className='w-full flex items-center gap-2 px-3 py-2 text-sm text-text/70 hover:text-text hover:bg-text/5 transition-colors cursor-pointer'
|
||||
>
|
||||
{route.icon ===
|
||||
"User" && (
|
||||
<User className='h-4 w-4' />
|
||||
)}
|
||||
{route.icon ===
|
||||
"Bookmark" && (
|
||||
<Bookmark className='h-4 w-4' />
|
||||
)}
|
||||
{route.title}
|
||||
</Link>
|
||||
))}
|
||||
{session.user.role === "admin" && (
|
||||
<>
|
||||
<div className='my-1 border-t border-white/10' />
|
||||
<Link
|
||||
href="/manage"
|
||||
onClick={() => setUserMenuOpen(false)}
|
||||
className="w-full flex items-center gap-2 px-3 py-2 text-sm text-primary/80 hover:text-primary hover:bg-primary/5 transition-colors cursor-pointer"
|
||||
>
|
||||
<ShieldIcon className="h-4 w-4" />
|
||||
Manage
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
<div className='my-1 border-t border-white/10' />
|
||||
<button
|
||||
onClick={async () => {
|
||||
setUserMenuOpen(false)
|
||||
await authClient.signOut()
|
||||
}}
|
||||
className='w-full flex items-center gap-2 px-3 py-2 text-sm text-text/70 hover:text-text hover:bg-text/5 transition-colors cursor-pointer'
|
||||
>
|
||||
<LogOut className='h-4 w-4' />
|
||||
Sign out
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</motion.li>
|
||||
) : (
|
||||
<motion.li
|
||||
key='sign-in-link'
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
>
|
||||
<Link
|
||||
href='/login'
|
||||
className='text-sm font-medium hover:text-primary transition-colors uppercase cursor-pointer'
|
||||
>
|
||||
login
|
||||
</Link>
|
||||
</motion.li>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</ul>
|
||||
|
||||
{/* Mobile Hamburger Button */}
|
||||
<button
|
||||
onClick={() => setMobileMenuOpen(true)}
|
||||
className='flex md:hidden flex-row items-center justify-center p-2 -mr-2 rounded-md hover:bg-text/5 transition-colors cursor-pointer'
|
||||
aria-label='Open menu'
|
||||
>
|
||||
<MenuIcon className='h-5 w-5' />
|
||||
</button>
|
||||
</motion.nav>
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Mobile Sidebar Overlay */}
|
||||
<AnimatePresence>
|
||||
{mobileMenuOpen && (
|
||||
<>
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className='fixed inset-0 bg-black/50 z-60 md:hidden'
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
/>
|
||||
<motion.aside
|
||||
initial={{ x: "100%" }}
|
||||
animate={{ x: 0 }}
|
||||
exit={{ x: "100%" }}
|
||||
transition={{
|
||||
type: "spring",
|
||||
damping: 25,
|
||||
stiffness: 250,
|
||||
}}
|
||||
className='fixed top-0 right-0 bottom-0 w-64 bg-background border-l border-border z-70 md:hidden flex flex-col'
|
||||
>
|
||||
<div className='flex flex-row items-center justify-between px-4 py-2 border-b border-border'>
|
||||
<span className='font-bold text-lg'>Menu</span>
|
||||
<button
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
className='p-2 -mr-2 rounded-md hover:bg-text/5 transition-colors cursor-pointer'
|
||||
aria-label='Close menu'
|
||||
>
|
||||
<XIcon className='h-5 w-5' />
|
||||
</button>
|
||||
</div>
|
||||
<nav className='flex flex-col p-4 gap-2'>
|
||||
{routes.map((route) => (
|
||||
<Link
|
||||
key={route.href}
|
||||
href={route.href}
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
className={`text-sm font-medium hover:text-primary transition-colors uppercase px-3 py-2 rounded-md hover:bg-text/5 cursor-pointer ${
|
||||
pathname === route.href
|
||||
? "text-primary bg-text/5"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
{route.title}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
{/* Mobile Auth Controls */}
|
||||
<div className='mt-auto p-4 border-t border-text/8'>
|
||||
{!showAuth ? (
|
||||
<div className='w-full h-10 rounded-lg bg-text/3 animate-pulse' />
|
||||
) : session ? (
|
||||
<div className='space-y-2'>
|
||||
{authRoutes.map((route) => (
|
||||
<Link
|
||||
key={route.href}
|
||||
href={route.href}
|
||||
onClick={() =>
|
||||
setMobileMenuOpen(false)
|
||||
}
|
||||
className='flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-text/70 hover:text-text hover:bg-text/5 transition-colors cursor-pointer'
|
||||
>
|
||||
{route.icon === "User" && (
|
||||
<User className='h-4 w-4' />
|
||||
)}
|
||||
{route.icon === "Bookmark" && (
|
||||
<Bookmark className='h-4 w-4' />
|
||||
)}
|
||||
{route.title}
|
||||
</Link>
|
||||
))}
|
||||
{session.user.role === "admin" && (
|
||||
<Link
|
||||
href="/manage"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
className="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-primary/80 hover:text-primary hover:bg-primary/5 transition-colors cursor-pointer"
|
||||
>
|
||||
<ShieldIcon className="h-4 w-4" />
|
||||
Manage
|
||||
</Link>
|
||||
)}
|
||||
<button
|
||||
onClick={async () => {
|
||||
setMobileMenuOpen(false)
|
||||
await authClient.signOut()
|
||||
}}
|
||||
className='w-full flex items-center justify-center gap-2 px-3 py-2 rounded-lg border border-white/10 text-sm text-text/70 hover:text-text hover:bg-text/5 transition-colors cursor-pointer'
|
||||
>
|
||||
<LogOut className='h-4 w-4' />
|
||||
Sign out
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className='space-y-2'>
|
||||
<Link
|
||||
href='/login'
|
||||
onClick={() =>
|
||||
setMobileMenuOpen(false)
|
||||
}
|
||||
className='block w-full text-center px-3 py-2 rounded-lg border border-white/10 text-sm text-text hover:bg-text/5 transition-colors cursor-pointer'
|
||||
>
|
||||
Login
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</motion.aside>
|
||||
</>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user