111 lines
3.9 KiB
TypeScript
111 lines
3.9 KiB
TypeScript
'use client'
|
|
|
|
import { Check, ChevronDown, Home, Plus } from 'lucide-react'
|
|
import { useRouter } from 'next/navigation'
|
|
import { useState } from 'react'
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from '@/components/ui/primitives/dropdown-menu'
|
|
import { cn } from '@/lib/utils'
|
|
import { useProjectStore } from '../lib/projects/store'
|
|
import { NewProjectDialog } from './new-project-dialog'
|
|
|
|
/**
|
|
* ProjectDropdown - Shows active project and allows switching between projects
|
|
* Note: useProjectScene() is called in the Editor component, not here.
|
|
* Having it in both places caused duplicate subscriptions and 2x server action calls.
|
|
*/
|
|
export function ProjectDropdown() {
|
|
const router = useRouter()
|
|
|
|
// Use project store
|
|
const projects = useProjectStore((state) => state.projects)
|
|
const activeProject = useProjectStore((state) => state.activeProject)
|
|
const isLoading = useProjectStore((state) => state.isLoading)
|
|
const setActiveProject = useProjectStore((state) => state.setActiveProject)
|
|
const fetchProjects = useProjectStore((state) => state.fetchProjects)
|
|
|
|
const [isNewProjectDialogOpen, setIsNewProjectDialogOpen] = useState(false)
|
|
|
|
const handleProjectSelect = async (projectId: string) => {
|
|
await setActiveProject(projectId)
|
|
}
|
|
|
|
const handleAddNew = () => {
|
|
setIsNewProjectDialogOpen(true)
|
|
}
|
|
|
|
const handleProjectCreated = (projectId: string) => {
|
|
router.push(`/editor/${projectId}`)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<button
|
|
className="flex h-9 items-center gap-2 rounded-lg border border-border bg-background/95 px-3 text-sm shadow-lg backdrop-blur-md transition-colors hover:bg-accent hover:text-accent-foreground disabled:opacity-50 focus:outline-none"
|
|
disabled={isLoading}
|
|
type="button"
|
|
>
|
|
<Home className="h-4 w-4" />
|
|
<span className="max-w-[150px] truncate">
|
|
{activeProject
|
|
? activeProject.name
|
|
: projects.length > 0
|
|
? 'Select Project'
|
|
: 'Add Project'}
|
|
</span>
|
|
<ChevronDown className="h-3 w-3 opacity-50" />
|
|
</button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="w-[280px]">
|
|
{/* Project list */}
|
|
{projects.length > 0 ? (
|
|
<div className="max-h-[300px] overflow-y-auto">
|
|
{projects.map((project) => (
|
|
<DropdownMenuItem
|
|
className={cn(
|
|
'cursor-pointer text-sm',
|
|
activeProject?.id === project.id && 'cursor-default bg-accent',
|
|
)}
|
|
key={project.id}
|
|
onClick={() =>
|
|
activeProject?.id === project.id ? null : handleProjectSelect(project.id)
|
|
}
|
|
>
|
|
<div className="flex w-full items-center justify-between gap-2">
|
|
<div className="flex-1 truncate font-medium">{project.name}</div>
|
|
{activeProject?.id === project.id && (
|
|
<Check className="h-4 w-4 shrink-0 text-primary" />
|
|
)}
|
|
</div>
|
|
</DropdownMenuItem>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="px-2 py-3 text-center text-muted-foreground text-sm">
|
|
No projects yet
|
|
</div>
|
|
)}
|
|
|
|
{/* Add new project option */}
|
|
<DropdownMenuItem className="cursor-pointer" onClick={handleAddNew}>
|
|
<Plus className="mr-2 h-4 w-4" />
|
|
<span>Add new project</span>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
|
|
<NewProjectDialog
|
|
open={isNewProjectDialogOpen}
|
|
onOpenChange={setIsNewProjectDialogOpen}
|
|
onSuccess={handleProjectCreated}
|
|
/>
|
|
</>
|
|
)
|
|
}
|