feat: ST-101-ST-110 M1 producten, PBI backlog, iconen en PWA manifest
- Product aanmaken/bewerken/archiveren/herstellen (ST-101, ST-103) - SplitPane component met versleepbare splitter en localStorage (ST-104) - PanelNavBar herbruikbaar paneelheader component (ST-105) - PbiList met prioriteitsgroepen, inline aanmaken, filter en verwijderen (ST-106-ST-110) - StoryPanel placeholder rechter paneel met selectie via Zustand (ST-109) - App iconen geinstalleerd: favicon, apple-icon, PWA manifest (192/512px) - AppIcon SVG component in navigatiebar - Root layout metadata bijgewerkt naar Nederlands Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
8017968e60
commit
ffda65490f
23 changed files with 1229 additions and 26 deletions
|
|
@ -2,7 +2,9 @@
|
|||
|
||||
import Link from 'next/link'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { useTransition } from 'react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { restoreProductAction } from '@/actions/products'
|
||||
|
||||
interface Product {
|
||||
id: string
|
||||
|
|
@ -14,17 +16,30 @@ interface Product {
|
|||
interface ProductListProps {
|
||||
products: Product[]
|
||||
isDemo: boolean
|
||||
showArchived?: boolean
|
||||
}
|
||||
|
||||
export function ProductList({ products, isDemo }: ProductListProps) {
|
||||
export function ProductList({ products, isDemo, showArchived = false }: ProductListProps) {
|
||||
const router = useRouter()
|
||||
const [, startTransition] = useTransition()
|
||||
|
||||
function handleRestore(id: string) {
|
||||
startTransition(async () => {
|
||||
await restoreProductAction(id)
|
||||
router.refresh()
|
||||
})
|
||||
}
|
||||
|
||||
if (products.length === 0) {
|
||||
return (
|
||||
<div className="bg-surface-container-low rounded-xl border border-border p-12 text-center space-y-3">
|
||||
<p className="text-muted-foreground">Je hebt nog geen producten aangemaakt.</p>
|
||||
{!isDemo && (
|
||||
<Button variant="outline" render={<Link href="/products/new" />}>
|
||||
<p className="text-muted-foreground">
|
||||
{showArchived
|
||||
? 'Geen gearchiveerde producten.'
|
||||
: 'Je hebt nog geen producten aangemaakt.'}
|
||||
</p>
|
||||
{!isDemo && !showArchived && (
|
||||
<Button variant="outline" nativeButton={false} render={<Link href="/products/new" />}>
|
||||
Maak je eerste product aan
|
||||
</Button>
|
||||
)}
|
||||
|
|
@ -37,8 +52,10 @@ export function ProductList({ products, isDemo }: ProductListProps) {
|
|||
{products.map(product => (
|
||||
<div
|
||||
key={product.id}
|
||||
onClick={() => router.push(`/products/${product.id}`)}
|
||||
className="group cursor-pointer bg-surface-container-low border border-border rounded-xl p-4 hover:border-primary transition-colors"
|
||||
onClick={() => !showArchived && router.push(`/products/${product.id}`)}
|
||||
className={`group bg-surface-container-low border border-border rounded-xl p-4 transition-colors ${
|
||||
showArchived ? 'opacity-60' : 'cursor-pointer hover:border-primary'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="min-w-0">
|
||||
|
|
@ -51,17 +68,27 @@ export function ProductList({ products, isDemo }: ProductListProps) {
|
|||
</p>
|
||||
)}
|
||||
</div>
|
||||
{product.repo_url && (
|
||||
<a
|
||||
href={product.repo_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
onClick={e => e.stopPropagation()}
|
||||
className="text-xs text-muted-foreground hover:text-primary shrink-0 underline"
|
||||
>
|
||||
Repo
|
||||
</a>
|
||||
)}
|
||||
<div className="flex items-center gap-3 shrink-0">
|
||||
{product.repo_url && (
|
||||
<a
|
||||
href={product.repo_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
onClick={e => e.stopPropagation()}
|
||||
className="text-xs text-muted-foreground hover:text-primary underline"
|
||||
>
|
||||
Repo
|
||||
</a>
|
||||
)}
|
||||
{showArchived && !isDemo && (
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); handleRestore(product.id) }}
|
||||
className="text-xs text-primary hover:underline"
|
||||
>
|
||||
Herstellen
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue