feat(events): add client-side pagination and animations on /events\n\n- Show 5 nearest events (>= today-3d) by default\n- Add Load previous/Load later with smooth fade-slide-in for new items\n- Prevent animating existing items; preserve scroll on prepend\n- Show check-in prompt only for initial 5 events\n- Add keyframes utility in index.css

backend/.repl_history

@@ -1,3 +1,5 @@
+.cli users:list
+.cli users:create --email test@radziel.com --username radziel --password QWEqwe123 --first Radek --last Gierwialo
 .cli users:verify --email test@radziel.com
 .cli users:create --email test@radziel.com --username radziel --password QWEqwe123 --first Radek --last Gierwialo
 users:create --mail test@radziel.com --username radziel --password QWEqwe123 --first Radek --last Gierwialo
@@ -25,6 +27,4 @@ event
 .
 help
 .exity
-.cli events:import:worldsdc --dry-run --limit 20
-exit
-.cli events:import:worldsdc --dry-run --limit 20<32> w CLI REPL 
+.cli events:import:worldsdc --dry-run --limit 20

frontend/src/index.css

@@ -7,3 +7,19 @@
     @apply bg-gray-50 text-gray-900;
   }
 }
+
+@layer utilities {
+  @keyframes fade-slide-in {
+    0% {
+      opacity: 0;
+      transform: translateY(24px) scale(0.96);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+  .animate-fade-slide-in {
+    animation: fade-slide-in 1200ms ease-out both;
+  }
+}

frontend/src/pages/EventsPage.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import Layout from '../components/layout/Layout';
 import { eventsAPI } from '../services/api';
@@ -9,6 +9,9 @@ const EventsPage = () => {
   const [events, setEvents] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState('');
+  // Pagination controls for revealing older/newer events around the nearest 5
+  const [pastShownCount, setPastShownCount] = useState(0);
+  const [futureShownCount, setFutureShownCount] = useState(0);
 
   useEffect(() => {
     const fetchEvents = async () => {
@@ -27,6 +30,61 @@ const EventsPage = () => {
     fetchEvents();
   }, []);
 
+  // Build visible list and animation guards BEFORE any conditional returns
+  const threshold = new Date();
+  threshold.setDate(threshold.getDate() - 3);
+
+  const { visibleEvents, pastPool, futurePool, canLoadMorePast, canLoadMoreFuture, initialFutureIds } = useMemo(() => {
+    const sorted = [...events].sort((a, b) => new Date(a.startDate) - new Date(b.startDate));
+    const idxStart = sorted.findIndex((e) => new Date(e.startDate) >= threshold);
+    const startIdx = idxStart === -1 ? sorted.length : idxStart;
+    const pastPool = sorted.slice(0, startIdx);
+    const initialFuture = sorted.slice(startIdx, startIdx + 5);
+    const futurePool = sorted.slice(startIdx + 5);
+
+    const showPast = pastPool.slice(Math.max(0, pastPool.length - pastShownCount));
+    const showFuture = futurePool.slice(0, futureShownCount);
+    const visibleEvents = [...showPast, ...initialFuture, ...showFuture];
+    return {
+      visibleEvents,
+      pastPool,
+      futurePool,
+      canLoadMorePast: pastShownCount < pastPool.length,
+      canLoadMoreFuture: futureShownCount < futurePool.length,
+      initialFutureIds: new Set(initialFuture.map((e) => e.id)),
+    };
+  }, [events, pastShownCount, futureShownCount]);
+
+  // Track previously visible IDs to animate only newly added items
+  const prevVisibleIdsRef = useRef(new Set());
+  const listTopRef = useRef(null);
+  const isNewById = useMemo(() => {
+    const map = new Map();
+    for (const ev of visibleEvents) {
+      map.set(ev.id, !prevVisibleIdsRef.current.has(ev.id));
+    }
+    return map;
+  }, [visibleEvents]);
+
+  useEffect(() => {
+    prevVisibleIdsRef.current = new Set(visibleEvents.map((e) => e.id));
+  }, [visibleEvents]);
+
+  // Preserve scroll position when prepending past items
+  const handleLoadPrevious = () => {
+    const containerTop = listTopRef.current?.getBoundingClientRect().top || 0;
+    setPastShownCount((c) => Math.min(c + 10, pastPool.length));
+    requestAnimationFrame(() => {
+      const newTop = listTopRef.current?.getBoundingClientRect().top || 0;
+      const delta = newTop - containerTop;
+      if (delta !== 0) window.scrollBy({ top: delta, left: 0, behavior: 'instant' });
+    });
+  };
+
+  const handleLoadLater = () => {
+    setFutureShownCount((c) => Math.min(c + 10, futurePool.length));
+  };
+
   const handleJoinEvent = (slug) => {
     navigate(`/events/${slug}/chat`);
   };
@@ -56,84 +114,122 @@ const EventsPage = () => {
     );
   }
 
+  
+
+  // Animated card for smoother reveal of newly mounted items (CSS keyframes)
+  const EventCard = ({ event, delay = 0, isNew = false, showCheckin = false }) => {
+    const handleJoinEvent = () => navigate(`/events/${event.slug}/chat`);
+    return (
+      <div
+        className={`bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow p-6 border-2 ${
+          event.isJoined ? 'border-primary-500' : 'border-gray-200'
+        } ${isNew ? 'animate-fade-slide-in' : ''}`}
+        style={isNew ? { animationDelay: `${delay}ms` } : undefined}
+      >
+        <div className="flex items-start justify-between mb-3">
+          <h3 className="text-xl font-bold text-gray-900">{event.name}</h3>
+          {event.isJoined && (
+            <span className="flex items-center gap-1 px-2 py-1 bg-primary-100 text-primary-700 text-xs font-medium rounded-full">
+              <CheckCircle className="w-3 h-3" />
+              Joined
+            </span>
+          )}
+        </div>
+
+        <div className="space-y-2 mb-4">
+          <div className="flex items-center text-gray-600">
+            <MapPin className="w-4 h-4 mr-2" />
+            <span className="text-sm">{event.location}</span>
+          </div>
+          <div className="flex items-center text-gray-600">
+            <Calendar className="w-4 h-4 mr-2" />
+            <span className="text-sm">
+              {new Date(event.startDate).toLocaleDateString('en-US')} - {new Date(event.endDate).toLocaleDateString('en-US')}
+            </span>
+          </div>
+          <div className="flex items-center text-gray-600">
+            <Users className="w-4 h-4 mr-2" />
+            <span className="text-sm">{event.participantsCount} participants</span>
+          </div>
+        </div>
+
+        {event.description && (
+          <p className="text-gray-600 text-sm mb-4">{event.description}</p>
+        )}
+
+        <div className="space-y-2">
+          {event.isJoined ? (
+            <button
+              onClick={handleJoinEvent}
+              className="w-full px-4 py-2 bg-primary-600 text-white rounded-md hover:bg-primary-700 transition-colors"
+            >
+              Open chat
+            </button>
+          ) : showCheckin ? (
+            <div className="bg-amber-50 border border-amber-200 rounded-md p-4 text-sm text-amber-800">
+              <div className="flex items-center gap-2 font-medium mb-2">
+                <QrCode className="w-5 h-5" />
+                Check-in required
+              </div>
+              <p className="text-amber-700">
+                Scan the QR code at the event venue to join the chat
+              </p>
+            </div>
+          ) : null}
+
+          {/* Development mode: Show details link */}
+          {import.meta.env.DEV && (
+            <button
+              onClick={() => navigate(`/events/${event.slug}/details`)}
+              className="w-full px-4 py-2 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 transition-colors text-sm"
+            >
+              View details (dev)
+            </button>
+          )}
+        </div>
+      </div>
+    );
+  };
+
   return (
     <Layout>
       <div className="max-w-4xl mx-auto">
         <h1 className="text-3xl font-bold text-gray-900 mb-2">Choose an event</h1>
         <p className="text-gray-600 mb-8">Join an event and start connecting with other dancers</p>
 
-        <div className="grid gap-6 md:grid-cols-2">
-          {events.map((event) => (
-            <div
-              key={event.id}
-              className={`bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow p-6 border-2 ${
-                event.isJoined ? 'border-primary-500' : 'border-gray-200'
-              }`}
+        {canLoadMorePast && (
+          <div className="mb-4 flex justify-center">
+            <button
+              onClick={handleLoadPrevious}
+              className="px-3 py-1.5 text-sm border border-gray-200 rounded-full text-gray-600 hover:bg-gray-50 hover:text-gray-800 transition-colors"
             >
-              <div className="flex items-start justify-between mb-3">
-                <h3 className="text-xl font-bold text-gray-900">{event.name}</h3>
-                {event.isJoined && (
-                  <span className="flex items-center gap-1 px-2 py-1 bg-primary-100 text-primary-700 text-xs font-medium rounded-full">
-                    <CheckCircle className="w-3 h-3" />
-                    Joined
-                  </span>
-                )}
-              </div>
+              Load previous
+            </button>
+          </div>
+        )}
 
-              <div className="space-y-2 mb-4">
-                <div className="flex items-center text-gray-600">
-                  <MapPin className="w-4 h-4 mr-2" />
-                  <span className="text-sm">{event.location}</span>
-                </div>
-                <div className="flex items-center text-gray-600">
-                  <Calendar className="w-4 h-4 mr-2" />
-                  <span className="text-sm">
-                    {new Date(event.startDate).toLocaleDateString('en-US')} - {new Date(event.endDate).toLocaleDateString('en-US')}
-                  </span>
-                </div>
-                <div className="flex items-center text-gray-600">
-                  <Users className="w-4 h-4 mr-2" />
-                  <span className="text-sm">{event.participantsCount} participants</span>
-                </div>
-              </div>
-
-              {event.description && (
-                <p className="text-gray-600 text-sm mb-4">{event.description}</p>
-              )}
-
-              <div className="space-y-2">
-                {event.isJoined ? (
-                  <button
-                    onClick={() => handleJoinEvent(event.slug)}
-                    className="w-full px-4 py-2 bg-primary-600 text-white rounded-md hover:bg-primary-700 transition-colors"
-                  >
-                    Open chat
-                  </button>
-                ) : (
-                  <div className="bg-amber-50 border border-amber-200 rounded-md p-4 text-sm text-amber-800">
-                    <div className="flex items-center gap-2 font-medium mb-2">
-                      <QrCode className="w-5 h-5" />
-                      Check-in required
-                    </div>
-                    <p className="text-amber-700">
-                      Scan the QR code at the event venue to join the chat
-                    </p>
-                  </div>
-                )}
-
-                {/* Development mode: Show details link */}
-                {import.meta.env.DEV && (
-                  <button
-                    onClick={() => navigate(`/events/${event.slug}/details`)}
-                    className="w-full px-4 py-2 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 transition-colors text-sm"
-                  >
-                    View details (dev)
-                  </button>
-                )}
-              </div>
-            </div>
+        <div ref={listTopRef} className="grid gap-6 md:grid-cols-2">
+          {visibleEvents.map((event, idx) => (
+            <EventCard
+              key={event.id}
+              event={event}
+              isNew={isNewById.get(event.id)}
+              delay={isNewById.get(event.id) ? Math.min(idx * 80, 640) : 0}
+              showCheckin={initialFutureIds.has(event.id)}
+            />
           ))}
         </div>
+
+        {canLoadMoreFuture && (
+          <div className="mt-6 flex justify-center">
+            <button
+              onClick={handleLoadLater}
+              className="px-3 py-1.5 text-sm border border-gray-200 rounded-full text-gray-600 hover:bg-gray-50 hover:text-gray-800 transition-colors"
+            >
+              Load later
+            </button>
+          </div>
+        )}
       </div>
     </Layout>
   );