From c5c713da110fd592c263509491869d14119a9db1 Mon Sep 17 00:00:00 2001
From: mARTin <mail@martin-bierschenk.de>
Date: Wed, 4 Mar 2026 09:01:04 +0100
Subject: [PATCH] feat: 5x longer week slide animation (1.75s vs 0.35s day)

---
 package-lock.json             |  4 ++--
 package.json                  |  4 ++--
 src/app/globals.css           |  8 ++++++++
 src/components/WeeklyView.tsx | 10 ++++++----
 4 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5426118..be3c557 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "my-weekly-todo-list",
-  "version": "1.11.1",
+  "version": "1.11.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
@@ -11879,4 +11879,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 157fc51..0579888 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "my-weekly-todo-list",
-  "version": "1.11.1",
+  "version": "1.11.2",
   "description": "A web-based weekly task management application that organizes to-dos and calendar events in a single, intuitive weekly view",
   "main": "index.js",
   "scripts": {
@@ -59,4 +59,4 @@
     "ts-jest": "^29.0.0",
     "typescript": "^5.0.0"
   }
-}
+}
\ No newline at end of file
diff --git a/src/app/globals.css b/src/app/globals.css
index 5885535..9cd89fd 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -2758,6 +2758,14 @@ h3 {
   animation: navSlideInFromLeft 0.35s cubic-bezier(0.25, 1, 0.5, 1) both;
 }
 
+/* Week navigation: 5x longer for a more dramatic slide */
+.slide-animate-week-next {
+  animation: navSlideInFromRight 1.75s cubic-bezier(0.25, 1, 0.5, 1) both;
+}
+.slide-animate-week-prev {
+  animation: navSlideInFromLeft 1.75s cubic-bezier(0.25, 1, 0.5, 1) both;
+}
+
 /* Smooth View Transitions */
 ::view-transition-group(root) {
   animation-duration: 0.5s;
diff --git a/src/components/WeeklyView.tsx b/src/components/WeeklyView.tsx
index 1eb6877..7e0cf57 100644
--- a/src/components/WeeklyView.tsx
+++ b/src/components/WeeklyView.tsx
@@ -2089,6 +2089,7 @@ export default function WeeklyView() {
 
     // Navigation handlers with CSS class-based slide animation (works in all browsers)
     const gridRef = useRef<HTMLElement>(null);
+    const allSlideClasses = ["slide-animate-next", "slide-animate-prev", "slide-animate-week-next", "slide-animate-week-prev"];
     const navigate = (
         newDate: Date,
         direction: "left" | "right",
@@ -2097,14 +2098,15 @@ export default function WeeklyView() {
         const grid = gridRef.current;
         if (grid) {
             // Remove any existing animation class
-            grid.classList.remove("slide-animate-next", "slide-animate-prev");
+            grid.classList.remove(...allSlideClasses);
             // Trigger reflow to restart animation if same direction
             void grid.offsetWidth;
-            // Add new animation class
-            grid.classList.add(direction === "left" ? "slide-animate-next" : "slide-animate-prev");
+            // Pick class: week uses longer animation
+            const prefix = type === "week" ? "slide-animate-week-" : "slide-animate-";
+            grid.classList.add(prefix + (direction === "left" ? "next" : "prev"));
             // Clean up after animation
             const cleanup = () => {
-                grid.classList.remove("slide-animate-next", "slide-animate-prev");
+                grid.classList.remove(...allSlideClasses);
                 grid.removeEventListener("animationend", cleanup);
             };
             grid.addEventListener("animationend", cleanup, { once: true });