feat(M9): active product backlog — persistent active PB, NavBar splits, sprint card styling (#10)
* feat(tooling): extend backlog parser to support PBI-x milestone headers Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * chore(backlog): mark ST-801–806 as done Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(backlog): sorteer PBI's en stories op prio/code/datum, onthoud keuze in localStorage; vergroot sprint-afronden dialoog Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(ST-901): add user.active_product_id with FK to Product - Nullable relation User → Product with onDelete: SetNull - Index on active_product_id for join performance - Migration: 20260427165329_add_user_active_product_id - Install @tanstack/react-table (was missing from node_modules) - Fix PRIORITY_COLORS ref removed in earlier refactor - Note: User schema change affects vendor/scrum4me-mcp submodule — run prisma generate + tsc --noEmit there after merge Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix: restore priority color on PBI filter pill Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(ST-902): add setActiveProduct + clearActiveProduct server actions - actions/active-product.ts: setActiveProductAction validates access via productAccessFilter, rejects archived products and demo users - archiveProductAction: clears active_product_id for all affected users in transaction - removeProductMemberAction: clears active_product_id for removed member - leaveProductAction: clears active_product_id for leaving user Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(ST-903): load active product in layout, replace cookie with DB lookup in solo - layout.tsx: fetch active_product_id, resolve product, clear stale ref server-side - NavBar: add activeProduct prop (rendering changes in ST-904) - solo/page.tsx: redirect via user.active_product_id instead of lastProductId cookie - proxy.ts: remove lastProductId cookie logic - lib/cookies.ts: deleted (no longer used) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(ST-904): split NavBar into 5 tabs with disabled-states and product-switcher dropdown Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(ST-905): add Activeer button per product row in dashboard and product header * feat(ST-906): redirect to dashboard with toast when active product becomes inaccessible * feat(ST-907): tests for active-product actions and functional spec update for M9 * docs(M9): add implementation plan document and link from backlog * feat: active PB indicator, Maak actief button and new product link in settings * feat: apply priority-color card style to sprint story rows * fix: move add-to-sprint click from entire card to + Toevoegen button * feat: apply priority-color card style to sprint task rows * fix(sprint-backlog): prevent text selection on PBI collapse button * chore: bump version to 0.4.0 (M9 active product backlog) * fix(landing): align logged-in nav left to match app NavBar --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
GitHub
parent
c1c219639a
commit
88dca4102c
28 changed files with 1184 additions and 481 deletions
39
components/shared/activate-product-button.tsx
Normal file
39
components/shared/activate-product-button.tsx
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
'use client'
|
||||
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { useTransition } from 'react'
|
||||
import { toast } from 'sonner'
|
||||
import { setActiveProductAction } from '@/actions/active-product'
|
||||
|
||||
interface Props {
|
||||
productId: string
|
||||
isDemo: boolean
|
||||
/** Navigate here after activation. Omit to refresh the current page in place. */
|
||||
redirectTo?: string
|
||||
label?: string
|
||||
}
|
||||
|
||||
export function ActivateProductButton({ productId, isDemo, redirectTo, label = 'Activeer' }: Props) {
|
||||
const router = useRouter()
|
||||
const [isPending, startTransition] = useTransition()
|
||||
|
||||
function handleActivate() {
|
||||
if (isDemo) { toast.error('Niet beschikbaar in demo-modus'); return }
|
||||
startTransition(async () => {
|
||||
const result = await setActiveProductAction(productId)
|
||||
if (result?.error) toast.error(typeof result.error === 'string' ? result.error : 'Activeren mislukt')
|
||||
else if (redirectTo) router.push(redirectTo)
|
||||
else router.refresh()
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={handleActivate}
|
||||
disabled={isPending}
|
||||
className="text-xs text-primary hover:underline font-medium disabled:opacity-50"
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
28
components/shared/alert-toast.tsx
Normal file
28
components/shared/alert-toast.tsx
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
'use client'
|
||||
|
||||
import { useEffect } from 'react'
|
||||
import { useSearchParams, useRouter, usePathname } from 'next/navigation'
|
||||
import { toast } from 'sonner'
|
||||
|
||||
const ALERT_MESSAGES: Record<string, string> = {
|
||||
product_unavailable: 'Je actieve product is niet meer beschikbaar',
|
||||
}
|
||||
|
||||
export function AlertToast() {
|
||||
const searchParams = useSearchParams()
|
||||
const router = useRouter()
|
||||
const pathname = usePathname()
|
||||
const alert = searchParams.get('alert')
|
||||
|
||||
useEffect(() => {
|
||||
if (!alert || !ALERT_MESSAGES[alert]) return
|
||||
toast.error(ALERT_MESSAGES[alert])
|
||||
const params = new URLSearchParams(searchParams.toString())
|
||||
params.delete('alert')
|
||||
const next = params.toString() ? `${pathname}?${params}` : pathname
|
||||
router.replace(next)
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [alert])
|
||||
|
||||
return null
|
||||
}
|
||||
|
|
@ -1,13 +1,23 @@
|
|||
'use client'
|
||||
|
||||
import Link from 'next/link'
|
||||
import { usePathname } from 'next/navigation'
|
||||
import { usePathname, useRouter } from 'next/navigation'
|
||||
import { useTransition } from 'react'
|
||||
import { ChevronDown } from 'lucide-react'
|
||||
import { toast } from 'sonner'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu'
|
||||
import { AppIcon } from '@/components/shared/app-icon'
|
||||
import { UserMenu } from '@/components/shared/user-menu'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { useProductStore } from '@/stores/product-store'
|
||||
import { setActiveProductAction } from '@/actions/active-product'
|
||||
|
||||
interface NavBarProps {
|
||||
isDemo: boolean
|
||||
|
|
@ -15,23 +25,84 @@ interface NavBarProps {
|
|||
userId: string
|
||||
username: string
|
||||
email: string | null
|
||||
activeProduct: { id: string; name: string } | null
|
||||
products: { id: string; name: string }[]
|
||||
hasActiveSprint: boolean
|
||||
}
|
||||
|
||||
export function NavBar({ isDemo, roles, userId, username, email }: NavBarProps) {
|
||||
export function NavBar({
|
||||
isDemo,
|
||||
roles,
|
||||
userId,
|
||||
username,
|
||||
email,
|
||||
activeProduct,
|
||||
products,
|
||||
hasActiveSprint,
|
||||
}: NavBarProps) {
|
||||
const pathname = usePathname()
|
||||
const currentProduct = useProductStore(s => s.currentProduct)
|
||||
const router = useRouter()
|
||||
const [isPending, startTransition] = useTransition()
|
||||
|
||||
const productMatch = pathname.match(/^\/products\/([^/]+)/)
|
||||
const productId = productMatch ? productMatch[1] : null
|
||||
function handleSwitchProduct(productId: string) {
|
||||
startTransition(async () => {
|
||||
const result = await setActiveProductAction(productId)
|
||||
if (result?.error) {
|
||||
toast.error(typeof result.error === 'string' ? result.error : 'Wisselen mislukt')
|
||||
} else {
|
||||
router.push(`/products/${productId}`)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const sprintHref = productId ? `/products/${productId}/sprint` : null
|
||||
const activeId = activeProduct?.id ?? null
|
||||
|
||||
const navLinks = [
|
||||
{ href: '/dashboard', label: 'Producten', active: pathname.startsWith('/dashboard') || (pathname.startsWith('/products') && !pathname.includes('/solo')) },
|
||||
{ href: sprintHref, label: 'Sprint', active: pathname.includes('/sprint') },
|
||||
{ href: '/solo', label: 'Solo', active: pathname.includes('/solo') },
|
||||
{ href: '/todos', label: "Todo's", active: pathname.startsWith('/todos') },
|
||||
]
|
||||
// Nav link helpers
|
||||
const disabledSpan = (label: string) => (
|
||||
<span
|
||||
key={label}
|
||||
className="px-3 py-1.5 rounded-md text-sm text-muted-foreground/40 cursor-not-allowed select-none"
|
||||
>
|
||||
{label}
|
||||
</span>
|
||||
)
|
||||
|
||||
const navLink = (href: string, label: string, isActive: boolean) => (
|
||||
<Link
|
||||
key={label}
|
||||
href={href}
|
||||
className={cn(
|
||||
'px-3 py-1.5 rounded-md text-sm transition-colors',
|
||||
isActive
|
||||
? 'bg-primary-container text-primary-container-foreground font-medium'
|
||||
: 'text-muted-foreground hover:text-foreground hover:bg-surface-container'
|
||||
)}
|
||||
>
|
||||
{label}
|
||||
</Link>
|
||||
)
|
||||
|
||||
const sprintNode = () => {
|
||||
if (!activeId) return disabledSpan('Sprint')
|
||||
const href = `/products/${activeId}/sprint`
|
||||
const isActive = pathname.includes('/sprint')
|
||||
if (!hasActiveSprint) {
|
||||
return (
|
||||
<TooltipProvider key="sprint">
|
||||
<Tooltip>
|
||||
<TooltipTrigger
|
||||
className="px-3 py-1.5 rounded-md text-sm text-muted-foreground/40 cursor-not-allowed select-none"
|
||||
aria-disabled="true"
|
||||
>
|
||||
Sprint
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Geen actieve sprint</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
)
|
||||
}
|
||||
return navLink(href, 'Sprint', isActive)
|
||||
}
|
||||
|
||||
return (
|
||||
<header className="bg-surface-container-low border-b border-border h-14 flex items-center px-4 shrink-0">
|
||||
|
|
@ -48,50 +119,63 @@ export function NavBar({ isDemo, roles, userId, username, email }: NavBarProps)
|
|||
</Link>
|
||||
|
||||
<nav className="flex items-center gap-1 ml-2">
|
||||
{navLinks.map(link =>
|
||||
link.href ? (
|
||||
<Link
|
||||
key={link.label}
|
||||
href={link.href}
|
||||
className={cn(
|
||||
'px-3 py-1.5 rounded-md text-sm transition-colors',
|
||||
link.active
|
||||
? 'bg-primary-container text-primary-container-foreground font-medium'
|
||||
: 'text-muted-foreground hover:text-foreground hover:bg-surface-container'
|
||||
)}
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
) : (
|
||||
<span
|
||||
key={link.label}
|
||||
className="px-3 py-1.5 rounded-md text-sm text-muted-foreground/40 cursor-default select-none"
|
||||
>
|
||||
{link.label}
|
||||
</span>
|
||||
)
|
||||
)}
|
||||
{navLink('/dashboard', 'Producten', pathname.startsWith('/dashboard'))}
|
||||
{activeId
|
||||
? navLink(
|
||||
`/products/${activeId}`,
|
||||
'Product Backlog',
|
||||
pathname.startsWith(`/products/${activeId}`) && !pathname.includes('/sprint') && !pathname.includes('/solo')
|
||||
)
|
||||
: disabledSpan('Product Backlog')}
|
||||
{sprintNode()}
|
||||
{activeId
|
||||
? navLink(
|
||||
`/products/${activeId}/solo`,
|
||||
'Solo',
|
||||
pathname.includes('/solo')
|
||||
)
|
||||
: disabledSpan('Solo')}
|
||||
{navLink('/todos', "Todo's", pathname.startsWith('/todos'))}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Midden: productnaam */}
|
||||
{/* Midden: actief product dropdown */}
|
||||
<div className="flex items-center justify-center">
|
||||
{currentProduct && (
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger render={
|
||||
<Link
|
||||
href={`/products/${currentProduct.id}`}
|
||||
className="text-sm font-medium text-foreground hover:text-primary transition-colors px-2 truncate max-w-[200px]"
|
||||
/>
|
||||
}>
|
||||
{currentProduct.name.length > 20
|
||||
? currentProduct.name.slice(0, 20) + '…'
|
||||
: currentProduct.name}
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>{currentProduct.name}</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
{activeProduct ? (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger
|
||||
disabled={isPending}
|
||||
className="flex items-center gap-1 text-sm font-medium text-foreground hover:text-primary transition-colors px-2 rounded-md hover:bg-surface-container focus:outline-none"
|
||||
>
|
||||
<span className="truncate max-w-[180px]">
|
||||
{activeProduct.name.length > 22
|
||||
? activeProduct.name.slice(0, 22) + '…'
|
||||
: activeProduct.name}
|
||||
</span>
|
||||
<ChevronDown className="w-3.5 h-3.5 shrink-0 text-muted-foreground" />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="center" className="w-56">
|
||||
{products.map(p => (
|
||||
<DropdownMenuItem
|
||||
key={p.id}
|
||||
onSelect={() => p.id !== activeProduct.id && handleSwitchProduct(p.id)}
|
||||
className={cn(
|
||||
p.id === activeProduct.id && 'bg-primary-container text-primary-container-foreground font-medium'
|
||||
)}
|
||||
>
|
||||
<span className="truncate">{p.name}</span>
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem>
|
||||
<Link href="/dashboard" className="w-full">
|
||||
Producten beheren →
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
) : (
|
||||
<span className="text-sm text-muted-foreground/50 select-none">Geen actief product</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue