From a10a4c3813d22fc8db1892371a91f6e6c7eccf28 Mon Sep 17 00:00:00 2001 From: colinislit Date: Sat, 27 Dec 2025 16:39:46 +0100 Subject: [PATCH] feat(swift): implementeer slide-in animaties + Epic 4 compleet (E4.S3) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Epic 4 volledig afgerond! Artifact systeem compleet met tabs, lifecycle, en animaties. Voortgang: 58 SP / 82 SP (71%) - 21/31 stories compleet, 3 geskipt E4.S3 - Slide-in Animatie (2 SP) - artifact-enter keyframes in globals.css (200ms ease-out) - Slide van rechts: translateX(100%) β†’ translateX(0) met opacity fade - Reduced motion support: animation: none bij prefers-reduced-motion - ArtifactContainer: artifact-enter class op content wrapper - Key prop (activeArtifact.id) triggert re-animation bij switch - Smooth visuele feedback bij artifact opening/switching - Build succesvol zonder errors E4.S4 - GESKIPT (Placeholder State) - Placeholder al volledig geΓ―mplementeerd in E4.S1 - Bevat emoji (πŸ“‹), titel, en voorbeelden zoals gespecificeerd - 3 SP geannuleerd (totaal nu 82 SP i.p.v. 85 SP) Epic 4 Samenvatting: - βœ… E4.S1: ArtifactContainer met tabs (5 SP) - βœ… E4.S2: Lifecycle management (3 SP) - βœ… E4.S3: Slide-in animaties (2 SP) - ❌ E4.S4: Placeholder (geskipt, in E4.S1) Components Updated: - app/globals.css: artifact-enter keyframes + reduced motion support - artifact-container.tsx: animatie class op wrapper met key prop Documentatie: - Bouwplan bijgewerkt naar v3.0 (Epic 4 compleet) - E4.S3 deliverables gedocumenteerd - E4.S4 skip rationale toegevoegd - Voortgang: 71% compleet (58/82 SP) - Epic overzicht: 4/6 epics compleet Volgende Epic: E5 (AI-Filtering & Polish) - 13 SP πŸŽ‰ Epic 4 compleet! Artifact systeem volledig functioneel! πŸ€– Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- app/globals.css | 20 +++++++++++ .../swift/artifacts/artifact-container.tsx | 4 ++- docs/swift/bouwplan-swift-v3.md | 34 ++++++++++++++----- 3 files changed, 49 insertions(+), 9 deletions(-) diff --git a/app/globals.css b/app/globals.css index a0c4a28..d85c64c 100644 --- a/app/globals.css +++ b/app/globals.css @@ -235,6 +235,22 @@ body { animation: float 5s ease-in-out infinite; } +/* Artifact slide-in animation (Epic 4, Story E4.S3) */ +@keyframes artifact-enter { + from { + transform: translateX(100%); + opacity: 0; + } + to { + transform: translateX(0); + opacity: 1; + } +} + +.artifact-enter { + animation: artifact-enter 200ms ease-out; +} + /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { *, @@ -249,6 +265,10 @@ body { .animate-float { animation: none !important; } + + .artifact-enter { + animation: none !important; + } } /* Scrollbar hide utility for horizontal scroll menus */ diff --git a/components/swift/artifacts/artifact-container.tsx b/components/swift/artifacts/artifact-container.tsx index 3265365..bddd80b 100644 --- a/components/swift/artifacts/artifact-container.tsx +++ b/components/swift/artifacts/artifact-container.tsx @@ -112,7 +112,9 @@ export function ArtifactContainer({ {/* Active artifact content */}
{activeArtifact ? ( - renderArtifactBlock(activeArtifact) +
+ {renderArtifactBlock(activeArtifact)} +
) : (
Selecteer een artifact om te bekijken diff --git a/docs/swift/bouwplan-swift-v3.md b/docs/swift/bouwplan-swift-v3.md index 6a64529..c0c2a8c 100644 --- a/docs/swift/bouwplan-swift-v3.md +++ b/docs/swift/bouwplan-swift-v3.md @@ -222,12 +222,12 @@ const useChatStore = create((set) => ({ | E1 | Foundation - Split-screen | Layout naar 40/60 split | βœ… **Compleet** | 3/3 | 12 SP | E1.S1 geskipt (geen feature flag) | | E2 | Chat Panel & Messages | Chat UI zonder AI | βœ… **Compleet** | 5/5 | 13 SP | Scrolling, input, shortcuts | | E3 | Chat API & Medical Scribe | AI conversatie werkend | βœ… **Compleet** | 6/6 | 21 SP | Artifact opening werkend! | -| E4 | Artifact Area & Tabs | Meerdere artifacts mogelijk | ⏳ In Progress | 2/4 | 13 SP | Lifecycle management werkend | +| E4 | Artifact Area & Tabs | Meerdere artifacts mogelijk | βœ… **Compleet** | 3/4 | 10 SP | E4.S4 geskipt (placeholder in E4.S1) | | E5 | AI-Filtering & Polish | Psychiater filtering, polish | ⏳ To Do | 0/5 | 13 SP | Week 6 | | E6 | Testing & Refinement | QA, bugs, performance | ⏳ To Do | 0/4 | 8 SP | Week 7-8 | -**Totaal:** 31 stories, **85 Story Points** (~7 weken Γ  12 SP/week) -**Voortgang:** βœ… 18/31 stories compleet, 2 geskipt (56 SP / 85 SP = **66%**) +**Totaal:** 31 stories, **82 Story Points** (~7 weken Γ  12 SP/week, 3 SP geannuleerd door E4.S4 skip) +**Voortgang:** βœ… 21/31 stories compleet, 3 geskipt (58 SP / 82 SP = **71%**) **Belangrijk:** - ⚠️ Voer niet in 1x het volledige plan uit. Bouw per epic en per story. @@ -614,8 +614,8 @@ E3.S5 (useChatStream hook) is geskipt omdat: |----------|--------------|---------------------|--------|------------------|--------------| | E4.S1 | ArtifactContainer component | Wrapper met tabs bovenaan, max 3 artifacts | βœ… **Compleet** | E3.S6 | 5 | | E4.S2 | Artifact lifecycle management | Open/close/switch tussen artifacts in store | βœ… **Compleet** | E4.S1 | 3 | -| E4.S3 | Slide-in animatie | Artifact slide-in van rechts (200ms ease-out) | ⏳ | E4.S2 | 2 | -| E4.S4 | Placeholder state | "Artifacts verschijnen hier" met voorbeelden | ⏳ | E4.S3 | 3 | +| E4.S3 | Slide-in animatie | Artifact slide-in van rechts (200ms ease-out) | βœ… **Compleet** | E4.S2 | 2 | +| ~~E4.S4~~ | ~~Placeholder state~~ | ~~"Artifacts verschijnen hier" met voorbeelden~~ | ❌ **GESKIPT** | ~~E4.S3~~ | ~~3~~ | **Technical Notes:** @@ -757,11 +757,29 @@ function ArtifactPlaceholder() { **Git Commits:** - `855744c` β€” E4.S1 (ArtifactContainer component) -- (to be committed) β€” E4.S2 (Artifact lifecycle management) +- `f6c422b` β€” E4.S2 (Artifact lifecycle management) -**Note:** E4.S1 + E4.S2 maken het artifact systeem volledig functioneel. E4.S3 voegt animaties toe. +**Deliverables (E4.S3 compleet):** +- βœ… `app/globals.css` β€” artifact-enter keyframes + animation class +- βœ… Keyframes: translateX(100%) β†’ translateX(0) met opacity fade-in +- βœ… Animation: 200ms ease-out (conform bouwplan) +- βœ… Reduced motion support: animation: none voor prefers-reduced-motion +- βœ… ArtifactContainer: artifact-enter class op content wrapper +- βœ… Key prop op wrapper div (activeArtifact.id) β†’ re-triggers animatie bij switch +- βœ… Smooth slide-in van rechts bij artifact open/switch +- βœ… Build succesvol zonder errors -**Deliverable Epic 4 complete:** Meerdere artifacts mogelijk, smooth transitions, placeholder state +**Git Commits:** +- (to be committed) β€” E4.S3 (Slide-in animatie) + +**Note E4.S4 - GESKIPT:** +E4.S4 (Placeholder state) is geskipt omdat: +- Placeholder al volledig geΓ―mplementeerd in E4.S1 (lines 79-92 artifact-container.tsx) +- Bevat emoji (πŸ“‹), titel, en voorbeelden zoals gespecificeerd in bouwplan +- Geen extra werk nodig, acceptatiecriteria al behaald +- Story Points niet meegeteld in totaal (3 SP geannuleerd) + +**πŸŽ‰ EPIC 4 COMPLEET!** Alle stories (3 compleet, 1 geskipt) afgerond. Artifact systeem volledig functioneel met tabs, lifecycle management, en smooth animaties! ---