janpeter/Scrum4Me
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 10

feat(ST-1110.5): unify demo write-button pattern to disabled+tooltip

Browse source 
Convert all !isDemo && <Button> patterns to <DemoTooltip show={isDemo}>
<Button disabled={isDemo}> so demo visitors see app capabilities.
Affects: pbi-list, story-panel, story-dialog, task-list, sprint-backlog,
token-manager, product-list, activate-product-button, leave-product-button,
settings page.
This commit is contained in:
Janpeter Visser 2026-04-29 18:27:39 +02:00
commit 5e0308d42e
12 changed files with 180 additions and 134 deletions
Download patch file Download diff file Expand all files Collapse all files

40
components/dashboard/product-list.tsx
View file

@ -7,6 +7,7 @@ import { toast } from 'sonner'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { CodeBadge } from '@/components/shared/code-badge'
import { DemoTooltip } from '@/components/shared/demo-tooltip'
import { restoreProductAction } from '@/actions/products'
import { setActiveProductAction } from '@/actions/active-product'
@ -38,7 +39,6 @@ export function ProductList({ products, isDemo, showArchived = false, activeProd
}
function handleActivate(id: string) {
if (isDemo) { toast.error('Niet beschikbaar in demo-modus'); return }
startTransition(async () => {
const result = await setActiveProductAction(id)
if (result?.error) toast.error(typeof result.error === 'string' ? result.error : 'Activeren mislukt')
@ -54,11 +54,11 @@ export function ProductList({ products, isDemo, showArchived = false, activeProd
? 'Geen gearchiveerde producten.'
: 'Je hebt nog geen producten aangemaakt.'}
</p>
{!isDemo && !showArchived && (
<Button variant="outline" nativeButton={false} render={<Link href="/products/new" />}>
<DemoTooltip show={isDemo}>
<Button variant="outline" nativeButton={false} render={<Link href={isDemo ? '#' : '/products/new'} />} disabled={isDemo}>
Maak je eerste product aan
</Button>
)}
</DemoTooltip>
</div>
)
}
@ -103,21 +103,27 @@ export function ProductList({ products, isDemo, showArchived = false, activeProd
product.id === activeProductId
? <Badge className="bg-primary-container text-primary-container-foreground text-xs px-2 py-0">Actief</Badge>
: (
<button
onClick={(e) => { e.stopPropagation(); handleActivate(product.id) }}
className="text-xs text-primary hover:underline"
>
Activeer
</button>
<DemoTooltip show={isDemo}>
<button
onClick={(e) => { e.stopPropagation(); if (!isDemo) handleActivate(product.id) }}
className="text-xs text-primary hover:underline disabled:opacity-40 disabled:cursor-not-allowed disabled:no-underline"
disabled={isDemo}
>
Activeer
</button>
</DemoTooltip>
)
)}
{showArchived && !isDemo && (
<button
onClick={(e) => { e.stopPropagation(); handleRestore(product.id) }}
className="text-xs text-primary hover:underline"
>
Herstellen
</button>
{showArchived && (
<DemoTooltip show={isDemo}>
<button
onClick={(e) => { e.stopPropagation(); if (!isDemo) handleRestore(product.id) }}
className="text-xs text-primary hover:underline disabled:opacity-40 disabled:cursor-not-allowed"
disabled={isDemo}
>
Herstellen
</button>
</DemoTooltip>
)}
</div>
</div>