janpeter visser
4dd62c199c
- usePlannerStore met pbiOrder/storyOrder init/reorder/rollback (ST-201) - useSelectionStore uitgebreid met selectedStoryId en clearSelection (ST-202) - PBI drag-and-drop binnen prioriteitsgroep via dnd-kit (ST-203) - PBI slepen over prioriteitsgrens wijzigt priority (ST-204) - Stories als blokken met prioriteit- en statusbadge (ST-205/ST-206) - Story drag-and-drop horizontaal binnen en tussen groepen (ST-207) - Story detail slide-over met bewerkformulier (ST-208) - Story verwijderen met bevestigingsstap (ST-209) - Filter op status en prioriteit in rechterpaneel (ST-210) - Fix: infinite loop in useEffect door stabiele string dependency Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
3.2 KiB
3.2 KiB
Scrum4Me — Icon installatie voor Next.js
Bestandslocaties
Kopieer de bestanden naar de juiste plek in je Next.js App Router project:
app/
favicon.ico ← favicon.ico
icon-192.png ← icon-192.png (rename: icon.png)
apple-icon.png ← icon-180.png (rename: apple-icon.png)
public/
icon-512.png ← voor PWA manifest
icon-192.png ← voor PWA manifest
components/
shared/
app-icon.tsx ← herbruikbare React component
Stap 1 — Favicon en app icons
# Kopieer naar app/ map (Next.js pikt deze automatisch op)
cp favicon.ico ../app/favicon.ico
cp icon-192.png ../app/icon.png
cp icon-180.png ../app/apple-icon.png
# Kopieer naar public/ voor manifest
cp icon-512.png ../public/icon-512.png
cp icon-192.png ../public/icon-192.png
Stap 2 — Metadata in app/layout.tsx
// app/layout.tsx
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: {
default: 'Scrum4Me',
template: '%s — Scrum4Me',
},
description: 'Lichtgewicht Scrum-planner voor solo developers en kleine teams',
icons: {
icon: [
{ url: '/favicon.ico', sizes: '48x48' },
{ url: '/icon.png', sizes: '192x192', type: 'image/png' },
],
apple: [
{ url: '/apple-icon.png', sizes: '180x180', type: 'image/png' },
],
},
manifest: '/manifest.json',
}
Stap 3 — PWA manifest (optioneel)
Maak public/manifest.json aan:
{
"name": "Scrum4Me",
"short_name": "Scrum4Me",
"description": "Lichtgewicht Scrum-planner voor solo developers en kleine teams",
"start_url": "/dashboard",
"display": "standalone",
"background_color": "#0d0a14",
"theme_color": "#7c3aed",
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any maskable"
}
]
}
Stap 4 — AppIcon component gebruiken
// In de navigatiebalk:
import { AppIcon } from '@/components/shared/app-icon'
export function Navbar() {
return (
<nav>
<div className="flex items-center gap-2">
<AppIcon size={28} />
<span className="font-semibold text-foreground">Scrum4Me</span>
</div>
</nav>
)
}
Gegenereerde bestanden — overzicht
| Bestand | Formaat | Gebruik |
|---|---|---|
favicon.ico |
ICO (16+32+48) | Browser tabblad |
icon-16.png |
PNG 16×16 | Browser fallback |
icon-32.png |
PNG 32×32 | Browser retina tabblad |
icon-48.png |
PNG 48×48 | Windows taskbar |
icon-76.png |
PNG 76×76 | iPad non-retina |
icon-120.png |
PNG 120×120 | iPhone retina |
icon-144.png |
PNG 144×144 | Windows tile |
icon-152.png |
PNG 152×152 | iPad retina |
icon-180.png |
PNG 180×180 | Apple touch icon |
icon-192.png |
PNG 192×192 | Android / PWA |
icon-512.png |
PNG 512×512 | PWA splash / stores |
icon-master.svg |
SVG | Bronbestand (master) |
icon-simple.svg |
SVG | Vereenvoudigd voor kleine formaten |
app-icon.tsx |
React | Inline SVG component |