feat: 5x longer week slide animation (1.75s vs 0.35s day)

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": {

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": {

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;

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 });