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
237
components/backlog/pbi-list.tsx
Normal file
237
components/backlog/pbi-list.tsx
Normal file
|
|
@ -0,0 +1,237 @@
|
|||
'use client'
|
||||
|
||||
import { useState, useTransition } from 'react'
|
||||
import { useActionState } from 'react'
|
||||
import { useFormStatus } from 'react-dom'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||
import { PanelNavBar } from '@/components/shared/panel-nav-bar'
|
||||
import { useSelectionStore } from '@/stores/selection-store'
|
||||
import { createPbiAction, deletePbiAction } from '@/actions/pbis'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const PRIORITY_LABELS: Record<number, string> = {
|
||||
1: 'Kritiek',
|
||||
2: 'Hoog',
|
||||
3: 'Gemiddeld',
|
||||
4: 'Laag',
|
||||
}
|
||||
|
||||
const PRIORITY_COLORS: Record<number, string> = {
|
||||
1: 'bg-priority-critical/15 text-priority-critical border-priority-critical/30',
|
||||
2: 'bg-priority-high/15 text-priority-high border-priority-high/30',
|
||||
3: 'bg-priority-medium/15 text-priority-medium border-priority-medium/30',
|
||||
4: 'bg-priority-low/15 text-priority-low border-priority-low/30',
|
||||
}
|
||||
|
||||
interface Pbi {
|
||||
id: string
|
||||
title: string
|
||||
priority: number
|
||||
}
|
||||
|
||||
interface PbiListProps {
|
||||
productId: string
|
||||
pbis: Pbi[]
|
||||
isDemo: boolean
|
||||
}
|
||||
|
||||
function CreatePbiForm({ productId, priority, onDone }: { productId: string; priority: number; onDone: () => void }) {
|
||||
const [state, formAction] = useActionState(
|
||||
async (_prev: unknown, fd: FormData) => {
|
||||
const result = await createPbiAction(_prev, fd)
|
||||
if (result?.success) onDone()
|
||||
return result
|
||||
},
|
||||
undefined
|
||||
)
|
||||
const error = state?.error
|
||||
|
||||
return (
|
||||
<form action={formAction} className="flex gap-2 p-2">
|
||||
<input type="hidden" name="productId" value={productId} />
|
||||
<input type="hidden" name="priority" value={priority} />
|
||||
<Input
|
||||
name="title"
|
||||
autoFocus
|
||||
placeholder="PBI-titel…"
|
||||
className="h-7 text-sm"
|
||||
required
|
||||
/>
|
||||
<CreateSubmitButton />
|
||||
<Button type="button" variant="ghost" size="sm" className="h-7" onClick={onDone}>
|
||||
Annuleren
|
||||
</Button>
|
||||
{typeof error === 'string' && (
|
||||
<p className="text-xs text-error self-center">{error}</p>
|
||||
)}
|
||||
</form>
|
||||
)
|
||||
}
|
||||
|
||||
function CreateSubmitButton() {
|
||||
const { pending } = useFormStatus()
|
||||
return (
|
||||
<Button type="submit" size="sm" className="h-7" disabled={pending}>
|
||||
{pending ? '…' : 'Toevoegen'}
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
export function PbiList({ productId, pbis, isDemo }: PbiListProps) {
|
||||
const { selectedPbiId, selectPbi } = useSelectionStore()
|
||||
const [filterPriority, setFilterPriority] = useState<number | null>(null)
|
||||
const [creatingForPriority, setCreatingForPriority] = useState<number | null>(null)
|
||||
const [, startTransition] = useTransition()
|
||||
|
||||
const filtered = filterPriority ? pbis.filter(p => p.priority === filterPriority) : pbis
|
||||
|
||||
const grouped = [1, 2, 3, 4].reduce<Record<number, Pbi[]>>((acc, p) => {
|
||||
acc[p] = filtered.filter(pbi => pbi.priority === p)
|
||||
return acc
|
||||
}, {} as Record<number, Pbi[]>)
|
||||
|
||||
const visiblePriorities = [1, 2, 3, 4].filter(
|
||||
p => grouped[p].length > 0 || creatingForPriority === p
|
||||
)
|
||||
|
||||
function handleDelete(id: string) {
|
||||
startTransition(async () => {
|
||||
await deletePbiAction(id)
|
||||
if (selectedPbiId === id) selectPbi(null)
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<PanelNavBar
|
||||
title="Product Backlog"
|
||||
actions={
|
||||
<>
|
||||
{filterPriority !== null && (
|
||||
<button
|
||||
onClick={() => setFilterPriority(null)}
|
||||
className="flex items-center gap-1 text-xs text-primary hover:underline"
|
||||
>
|
||||
<Badge className={cn('text-xs', PRIORITY_COLORS[filterPriority])}>
|
||||
{PRIORITY_LABELS[filterPriority]}
|
||||
</Badge>
|
||||
<span>×</span>
|
||||
</button>
|
||||
)}
|
||||
<Select
|
||||
value={filterPriority?.toString() ?? 'all'}
|
||||
onValueChange={(v) => setFilterPriority(!v || v === 'all' ? null : parseInt(v))}
|
||||
>
|
||||
<SelectTrigger className="h-7 w-28 text-xs">
|
||||
<SelectValue placeholder="Filter" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">Alle</SelectItem>
|
||||
<SelectItem value="1">Kritiek</SelectItem>
|
||||
<SelectItem value="2">Hoog</SelectItem>
|
||||
<SelectItem value="3">Gemiddeld</SelectItem>
|
||||
<SelectItem value="4">Laag</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{!isDemo && (
|
||||
<Button
|
||||
size="sm"
|
||||
className="h-7 text-xs"
|
||||
onClick={() => setCreatingForPriority(creatingForPriority ? null : 2)}
|
||||
>
|
||||
+ PBI
|
||||
</Button>
|
||||
)}
|
||||
</>
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{pbis.length === 0 && creatingForPriority === null ? (
|
||||
<div className="p-8 text-center text-muted-foreground text-sm space-y-3">
|
||||
<p>Nog geen PBI's aangemaakt.</p>
|
||||
{!isDemo && (
|
||||
<Button size="sm" variant="outline" onClick={() => setCreatingForPriority(2)}>
|
||||
Maak je eerste PBI aan
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="py-2">
|
||||
{visiblePriorities.map(priority => (
|
||||
<div key={priority}>
|
||||
{/* Priority group header */}
|
||||
<div className="flex items-center gap-2 px-4 py-1.5">
|
||||
<span className={cn('text-xs font-semibold px-2 py-0.5 rounded-full border', PRIORITY_COLORS[priority])}>
|
||||
{PRIORITY_LABELS[priority]}
|
||||
</span>
|
||||
<div className="flex-1 h-px bg-border" />
|
||||
{!isDemo && (
|
||||
<button
|
||||
onClick={() => setCreatingForPriority(priority)}
|
||||
className="text-xs text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
+
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* PBI items */}
|
||||
{grouped[priority].map(pbi => (
|
||||
<div
|
||||
key={pbi.id}
|
||||
onClick={() => selectPbi(pbi.id)}
|
||||
className={cn(
|
||||
'group flex items-center justify-between px-4 py-2 cursor-pointer transition-colors hover:bg-surface-container',
|
||||
selectedPbiId === pbi.id && 'bg-primary-container text-primary-container-foreground'
|
||||
)}
|
||||
>
|
||||
<span className="text-sm truncate flex-1">{pbi.title}</span>
|
||||
{!isDemo && (
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); handleDelete(pbi.id) }}
|
||||
className="opacity-0 group-hover:opacity-100 ml-2 text-muted-foreground hover:text-error text-xs shrink-0"
|
||||
aria-label="Verwijder PBI"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Inline create form for this priority */}
|
||||
{creatingForPriority === priority && (
|
||||
<CreatePbiForm
|
||||
productId={productId}
|
||||
priority={priority}
|
||||
onDone={() => setCreatingForPriority(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* If creating for a priority that has no items yet and isn't in visiblePriorities */}
|
||||
{creatingForPriority !== null && !visiblePriorities.includes(creatingForPriority) && (
|
||||
<div>
|
||||
<div className="flex items-center gap-2 px-4 py-1.5">
|
||||
<span className={cn('text-xs font-semibold px-2 py-0.5 rounded-full border', PRIORITY_COLORS[creatingForPriority])}>
|
||||
{PRIORITY_LABELS[creatingForPriority]}
|
||||
</span>
|
||||
<div className="flex-1 h-px bg-border" />
|
||||
</div>
|
||||
<CreatePbiForm
|
||||
productId={productId}
|
||||
priority={creatingForPriority}
|
||||
onDone={() => setCreatingForPriority(null)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
56
components/backlog/story-panel.tsx
Normal file
56
components/backlog/story-panel.tsx
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
'use client'
|
||||
|
||||
import { useSelectionStore } from '@/stores/selection-store'
|
||||
import { PanelNavBar } from '@/components/shared/panel-nav-bar'
|
||||
|
||||
interface Story {
|
||||
id: string
|
||||
title: string
|
||||
status: string
|
||||
}
|
||||
|
||||
interface StoryPanelProps {
|
||||
storiesByPbi: Record<string, Story[]>
|
||||
isDemo: boolean
|
||||
}
|
||||
|
||||
export function StoryPanel({ storiesByPbi, isDemo }: StoryPanelProps) {
|
||||
const { selectedPbiId } = useSelectionStore()
|
||||
|
||||
const stories = selectedPbiId ? (storiesByPbi[selectedPbiId] ?? []) : null
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<PanelNavBar
|
||||
title="Stories"
|
||||
actions={
|
||||
selectedPbiId && !isDemo ? (
|
||||
<button className="text-xs text-primary hover:underline">+ Story</button>
|
||||
) : undefined
|
||||
}
|
||||
/>
|
||||
<div className="flex-1 overflow-y-auto p-4">
|
||||
{stories === null ? (
|
||||
<p className="text-sm text-muted-foreground text-center mt-8">
|
||||
Selecteer een PBI om de stories te bekijken.
|
||||
</p>
|
||||
) : stories.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground text-center mt-8">
|
||||
Nog geen stories voor dit PBI.
|
||||
</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{stories.map(story => (
|
||||
<div
|
||||
key={story.id}
|
||||
className="bg-surface-container-low border border-border rounded-lg p-3 text-sm"
|
||||
>
|
||||
{story.title}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -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>
|
||||
))}
|
||||
|
|
|
|||
54
components/products/archive-product-button.tsx
Normal file
54
components/products/archive-product-button.tsx
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
'use client'
|
||||
|
||||
import { useState, useTransition } from 'react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { archiveProductAction } from '@/actions/products'
|
||||
|
||||
interface ArchiveProductButtonProps {
|
||||
productId: string
|
||||
}
|
||||
|
||||
export function ArchiveProductButton({ productId }: ArchiveProductButtonProps) {
|
||||
const [confirming, setConfirming] = useState(false)
|
||||
const [isPending, startTransition] = useTransition()
|
||||
|
||||
function handleArchive() {
|
||||
startTransition(async () => {
|
||||
await archiveProductAction(productId)
|
||||
})
|
||||
}
|
||||
|
||||
if (confirming) {
|
||||
return (
|
||||
<div className="flex gap-2 shrink-0">
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
disabled={isPending}
|
||||
onClick={handleArchive}
|
||||
>
|
||||
{isPending ? 'Bezig…' : 'Ja, archiveer'}
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setConfirming(false)}
|
||||
disabled={isPending}
|
||||
>
|
||||
Annuleren
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="shrink-0 border-error/40 text-error hover:bg-error/10"
|
||||
onClick={() => setConfirming(true)}
|
||||
>
|
||||
Archiveren
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
135
components/products/product-form.tsx
Normal file
135
components/products/product-form.tsx
Normal file
|
|
@ -0,0 +1,135 @@
|
|||
'use client'
|
||||
|
||||
import { useActionState } from 'react'
|
||||
import { useFormStatus } from 'react-dom'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
|
||||
type FieldErrors = Record<string, string[]>
|
||||
type ActionResult = { error?: string | FieldErrors; success?: boolean } | undefined
|
||||
|
||||
function SubmitButton({ label }: { label: string }) {
|
||||
const { pending } = useFormStatus()
|
||||
return (
|
||||
<Button type="submit" disabled={pending}>
|
||||
{pending ? 'Even wachten…' : label}
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
function getFieldError(error: string | FieldErrors | undefined, field: string): string | undefined {
|
||||
if (!error || typeof error === 'string') return undefined
|
||||
return (error as FieldErrors)[field]?.[0]
|
||||
}
|
||||
|
||||
function getGlobalError(error: string | FieldErrors | undefined): string | undefined {
|
||||
if (typeof error === 'string') return error
|
||||
return undefined
|
||||
}
|
||||
|
||||
interface ProductFormProps {
|
||||
action: (_prevState: unknown, formData: FormData) => Promise<ActionResult>
|
||||
submitLabel: string
|
||||
defaultValues?: {
|
||||
id?: string
|
||||
name?: string
|
||||
description?: string
|
||||
repo_url?: string
|
||||
definition_of_done?: string
|
||||
}
|
||||
}
|
||||
|
||||
export function ProductForm({ action, submitLabel, defaultValues }: ProductFormProps) {
|
||||
const [state, formAction] = useActionState(action, undefined)
|
||||
|
||||
const fieldError = (field: string) => getFieldError(state?.error, field)
|
||||
const globalError = getGlobalError(state?.error)
|
||||
|
||||
return (
|
||||
<form action={formAction} className="space-y-5">
|
||||
{defaultValues?.id && (
|
||||
<input type="hidden" name="id" value={defaultValues.id} />
|
||||
)}
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label htmlFor="name" className="text-sm font-medium text-foreground">
|
||||
Naam <span className="text-error">*</span>
|
||||
</label>
|
||||
<Input
|
||||
id="name"
|
||||
name="name"
|
||||
required
|
||||
defaultValue={defaultValues?.name}
|
||||
placeholder="bijv. DevPlanner"
|
||||
className={fieldError('name') ? 'border-error' : ''}
|
||||
/>
|
||||
{fieldError('name') && (
|
||||
<p className="text-xs text-error">{fieldError('name')}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label htmlFor="description" className="text-sm font-medium text-foreground">
|
||||
Beschrijving
|
||||
</label>
|
||||
<Textarea
|
||||
id="description"
|
||||
name="description"
|
||||
rows={3}
|
||||
defaultValue={defaultValues?.description}
|
||||
placeholder="Korte omschrijving van het product…"
|
||||
className={fieldError('description') ? 'border-error' : ''}
|
||||
/>
|
||||
{fieldError('description') && (
|
||||
<p className="text-xs text-error">{fieldError('description')}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label htmlFor="repo_url" className="text-sm font-medium text-foreground">
|
||||
Git-repo URL
|
||||
</label>
|
||||
<Input
|
||||
id="repo_url"
|
||||
name="repo_url"
|
||||
type="url"
|
||||
defaultValue={defaultValues?.repo_url ?? ''}
|
||||
placeholder="https://github.com/..."
|
||||
className={fieldError('repo_url') ? 'border-error' : ''}
|
||||
/>
|
||||
{fieldError('repo_url') && (
|
||||
<p className="text-xs text-error">{fieldError('repo_url')}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label htmlFor="definition_of_done" className="text-sm font-medium text-foreground">
|
||||
Definition of Done <span className="text-error">*</span>
|
||||
</label>
|
||||
<Textarea
|
||||
id="definition_of_done"
|
||||
name="definition_of_done"
|
||||
required
|
||||
rows={4}
|
||||
defaultValue={defaultValues?.definition_of_done}
|
||||
placeholder="Bijv. code gereviewd, tests groen, gedeployed naar staging…"
|
||||
className={fieldError('definition_of_done') ? 'border-error' : ''}
|
||||
/>
|
||||
{fieldError('definition_of_done') && (
|
||||
<p className="text-xs text-error">{fieldError('definition_of_done')}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{globalError && (
|
||||
<div className="bg-error-container text-error-container-foreground rounded-lg px-3 py-2 text-sm border-l-4 border-error">
|
||||
{globalError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-3 pt-1">
|
||||
<SubmitButton label={submitLabel} />
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
70
components/shared/app-icon.tsx
Normal file
70
components/shared/app-icon.tsx
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
// components/shared/app-icon.tsx
|
||||
// Scrum4Me app icon — concept 5 (Rocket)
|
||||
// Gebruik: <AppIcon size={32} /> of <AppIcon size={64} className="..." />
|
||||
|
||||
interface AppIconProps {
|
||||
size?: number
|
||||
className?: string
|
||||
}
|
||||
|
||||
export function AppIcon({ size = 32, className }: AppIconProps) {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 512 512"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={className}
|
||||
aria-label="Scrum4Me"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id="s4m-bg" x1="0" y1="0" x2="512" y2="512" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stopColor="#1a1028"/>
|
||||
<stop offset="100%" stopColor="#0d0a14"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="s4m-nose" x1="256" y1="60" x2="256" y2="212" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stopColor="#c4b5fd"/>
|
||||
<stop offset="100%" stopColor="#7c3aed"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
{/* Background */}
|
||||
<rect width="512" height="512" rx="114" fill="url(#s4m-bg)"/>
|
||||
|
||||
{/* Block 1 — PBI */}
|
||||
<rect x="174" y="372" width="164" height="60" rx="12" fill="#4f6ef7" opacity="0.6"/>
|
||||
|
||||
{/* Block 2 — Story */}
|
||||
<rect x="144" y="292" width="224" height="76" rx="12" fill="#6366f1" opacity="0.75"/>
|
||||
|
||||
{/* Block 3 — Task */}
|
||||
<rect x="160" y="212" width="192" height="76" rx="12" fill="#7c3aed" opacity="0.9"/>
|
||||
|
||||
{/* Rocket nose */}
|
||||
<path
|
||||
d="M256 60 C222 60 160 122 160 212 H352 C352 122 290 60 256 60Z"
|
||||
fill="url(#s4m-nose)"
|
||||
/>
|
||||
|
||||
{/* Window */}
|
||||
<circle cx="256" cy="152" r="30" fill="#0d0a14" opacity="0.5"/>
|
||||
<circle cx="256" cy="152" r="20" fill="#ede9fe" opacity="0.95"/>
|
||||
<circle cx="248" cy="144" r="6" fill="white" opacity="0.5"/>
|
||||
|
||||
{/* Fins */}
|
||||
<path d="M160 332 L108 400 L160 400 Z" fill="#4f6ef7" opacity="0.55"/>
|
||||
<path d="M352 332 L404 400 L352 400 Z" fill="#4f6ef7" opacity="0.55"/>
|
||||
|
||||
{/* Flame */}
|
||||
<path
|
||||
d="M212 432 Q244 472 256 456 Q268 472 300 432"
|
||||
stroke="#f59e0b" strokeWidth="12" strokeLinecap="round" fill="none" opacity="0.95"
|
||||
/>
|
||||
<path
|
||||
d="M232 432 Q248 460 256 448 Q264 460 280 432"
|
||||
stroke="#fef3c7" strokeWidth="7" strokeLinecap="round" fill="none" opacity="0.7"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
|
@ -5,6 +5,7 @@ import { usePathname } from 'next/navigation'
|
|||
import { logoutAction } from '@/actions/auth'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { AppIcon } from '@/components/shared/app-icon'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface NavBarProps {
|
||||
|
|
@ -23,6 +24,7 @@ export function NavBar({ isDemo }: NavBarProps) {
|
|||
<header className="bg-surface-container-low border-b border-border h-14 flex items-center px-4 gap-4 shrink-0">
|
||||
{/* Logo */}
|
||||
<Link href="/dashboard" className="flex items-center gap-2 font-medium text-foreground">
|
||||
<AppIcon size={24} />
|
||||
<span className="text-primary font-semibold">Scrum4Me</span>
|
||||
{isDemo && (
|
||||
<Badge className="bg-warning text-warning-foreground text-xs px-2 py-0">
|
||||
|
|
|
|||
16
components/shared/panel-nav-bar.tsx
Normal file
16
components/shared/panel-nav-bar.tsx
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface PanelNavBarProps {
|
||||
title: string
|
||||
actions?: React.ReactNode
|
||||
className?: string
|
||||
}
|
||||
|
||||
export function PanelNavBar({ title, actions, className }: PanelNavBarProps) {
|
||||
return (
|
||||
<div className={cn('flex items-center justify-between px-4 py-2 border-b border-border bg-surface-container-low shrink-0', className)}>
|
||||
<span className="text-sm font-medium text-foreground">{title}</span>
|
||||
{actions && <div className="flex items-center gap-2">{actions}</div>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
125
components/split-pane/split-pane.tsx
Normal file
125
components/split-pane/split-pane.tsx
Normal file
|
|
@ -0,0 +1,125 @@
|
|||
'use client'
|
||||
|
||||
import { useRef, useState, useEffect, useCallback } from 'react'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface SplitPaneProps {
|
||||
left: React.ReactNode
|
||||
right: React.ReactNode
|
||||
storageKey: string
|
||||
defaultSplit?: number // percentage for left pane, default 40
|
||||
minSize?: number // minimum px per pane, default 200
|
||||
}
|
||||
|
||||
export function SplitPane({
|
||||
left,
|
||||
right,
|
||||
storageKey,
|
||||
defaultSplit = 40,
|
||||
minSize = 200,
|
||||
}: SplitPaneProps) {
|
||||
const containerRef = useRef<HTMLDivElement>(null)
|
||||
const [split, setSplit] = useState<number>(defaultSplit)
|
||||
const [isDragging, setIsDragging] = useState(false)
|
||||
const [isMobile, setIsMobile] = useState(false)
|
||||
const [activeTab, setActiveTab] = useState<'left' | 'right'>('left')
|
||||
|
||||
// Load stored split on mount
|
||||
useEffect(() => {
|
||||
const stored = localStorage.getItem(`split-pane:${storageKey}`)
|
||||
if (stored) {
|
||||
const val = parseFloat(stored)
|
||||
if (!isNaN(val) && val > 0 && val < 100) setSplit(val)
|
||||
}
|
||||
}, [storageKey])
|
||||
|
||||
// Detect mobile
|
||||
useEffect(() => {
|
||||
const check = () => setIsMobile(window.innerWidth < 1024)
|
||||
check()
|
||||
window.addEventListener('resize', check)
|
||||
return () => window.removeEventListener('resize', check)
|
||||
}, [])
|
||||
|
||||
const onMouseMove = useCallback((e: MouseEvent) => {
|
||||
if (!isDragging || !containerRef.current) return
|
||||
const rect = containerRef.current.getBoundingClientRect()
|
||||
const containerWidth = rect.width
|
||||
const offsetX = e.clientX - rect.left
|
||||
const minPct = (minSize / containerWidth) * 100
|
||||
const maxPct = 100 - minPct
|
||||
const newSplit = Math.min(maxPct, Math.max(minPct, (offsetX / containerWidth) * 100))
|
||||
setSplit(newSplit)
|
||||
localStorage.setItem(`split-pane:${storageKey}`, String(newSplit))
|
||||
}, [isDragging, minSize, storageKey])
|
||||
|
||||
const onMouseUp = useCallback(() => setIsDragging(false), [])
|
||||
|
||||
useEffect(() => {
|
||||
if (isDragging) {
|
||||
window.addEventListener('mousemove', onMouseMove)
|
||||
window.addEventListener('mouseup', onMouseUp)
|
||||
}
|
||||
return () => {
|
||||
window.removeEventListener('mousemove', onMouseMove)
|
||||
window.removeEventListener('mouseup', onMouseUp)
|
||||
}
|
||||
}, [isDragging, onMouseMove, onMouseUp])
|
||||
|
||||
if (isMobile) {
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<div className="flex border-b border-border shrink-0">
|
||||
<button
|
||||
onClick={() => setActiveTab('left')}
|
||||
className={cn(
|
||||
'flex-1 py-2 text-sm font-medium transition-colors',
|
||||
activeTab === 'left'
|
||||
? 'border-b-2 border-primary text-primary'
|
||||
: 'text-muted-foreground hover:text-foreground'
|
||||
)}
|
||||
>
|
||||
Backlog
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('right')}
|
||||
className={cn(
|
||||
'flex-1 py-2 text-sm font-medium transition-colors',
|
||||
activeTab === 'right'
|
||||
? 'border-b-2 border-primary text-primary'
|
||||
: 'text-muted-foreground hover:text-foreground'
|
||||
)}
|
||||
>
|
||||
Stories
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex-1 overflow-auto">
|
||||
{activeTab === 'left' ? left : right}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div ref={containerRef} className="flex h-full overflow-hidden select-none">
|
||||
{/* Left pane */}
|
||||
<div className="flex flex-col overflow-hidden" style={{ width: `${split}%` }}>
|
||||
{left}
|
||||
</div>
|
||||
|
||||
{/* Divider */}
|
||||
<div
|
||||
onMouseDown={() => setIsDragging(true)}
|
||||
className={cn(
|
||||
'w-1 shrink-0 bg-border hover:bg-primary transition-colors cursor-col-resize',
|
||||
isDragging && 'bg-primary'
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Right pane */}
|
||||
<div className="flex flex-col overflow-hidden flex-1">
|
||||
{right}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue