fix(todo): pixel-perfect skeleton loaders, PillNav tab group, and SSR head fix

- Rewrite TaskListSkeleton to match notepad design (spiral holes, red margin line, cream background)
- Rewrite TaskItemSkeleton as flat rows with border-bottom instead of card style
- Rewrite KanbanColumnSkeleton with glassmorphism and pill-shaped task cards
- Update KanbanBoardSkeleton with matching border-radius and dark mode support
- Group navigation pills (Liste/Kanban/Tags) into PillTabGroup for clear UX distinction from toggle pills (Filter)
- Add Phosphor icon support to PillTabGroup component
- Fix %sveltekit.head% appearing as literal text in production by removing duplicate placeholder from HTML comment
- Disable PWA service worker in dev mode

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS 2026-03-23 20:51:41 +01:00
parent f5842ea50e
commit 45db42720c
7 changed files with 313 additions and 114 deletions

View file

@ -1,5 +1,42 @@
<script lang="ts">
import type { PillTabOption } from './types';
import {
List,
Columns,
Tag,
Heart,
House,
Gear,
GridFour,
Clock,
Timer,
Target,
CalendarBlank,
Fire,
MagnifyingGlass,
CheckSquare,
Funnel,
} from '@manacore/shared-icons';
// Map icon names to Phosphor components
const phosphorIcons: Record<string, any> = {
list: List,
columns: Columns,
kanban: Columns,
tag: Tag,
heart: Heart,
home: House,
settings: Gear,
grid: GridFour,
clock: Clock,
timer: Timer,
target: Target,
calendar: CalendarBlank,
fire: Fire,
search: MagnifyingGlass,
'check-square': CheckSquare,
filter: Funnel,
};
interface Props {
/** Tab options to display */
@ -76,6 +113,9 @@
{#if option.icon}
{#if option.iconSvg}
{@html option.iconSvg}
{:else if phosphorIcons[option.icon]}
{@const IconComponent = phosphorIcons[option.icon]}
<IconComponent size={18} class="tab-icon" />
{:else}
<svg class="tab-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path