From 58777222ca37aea1e9bf84c69c26d06fc17485b5 Mon Sep 17 00:00:00 2001
From: saridsa2 <s.satya.suman@globaluniversityfoundation.com>
Date: Mon, 16 Mar 2026 18:32:27 +0530
Subject: [PATCH] feat: add exit animations on lead cards and cross-page filter
 continuity

- Wrap lead cards in AnimatePresence/motion.div so they fade+slide out when removed from the NEW filter
- Update "View All" link to pass active source filter as ?source= URL param
- Initialize AllLeadsPage sourceFilter from URL search params on mount

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/pages/all-leads.tsx      |  5 ++++-
 src/pages/lead-workspace.tsx | 41 ++++++++++++++++++++++++------------
 2 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/src/pages/all-leads.tsx b/src/pages/all-leads.tsx
index 17bce3b..dbb2427 100644
--- a/src/pages/all-leads.tsx
+++ b/src/pages/all-leads.tsx
@@ -1,4 +1,5 @@
 import { useMemo, useState } from 'react';
+import { useSearchParams } from 'react-router';
 import { ArrowLeft, Download01, FilterLines, SearchLg, SwitchVertical01 } from '@untitledui/icons';
 import { Button } from '@/components/base/buttons/button';
 import { Input } from '@/components/base/input/input';
@@ -29,11 +30,13 @@ const PAGE_SIZE = 25;
 
 export const AllLeadsPage = () => {
     const { user } = useAuth();
+    const [searchParams] = useSearchParams();
+    const initialSource = searchParams.get('source') as LeadSource | null;
     const [tab, setTab] = useState<TabKey>('new');
     const [selectedIds, setSelectedIds] = useState<string[]>([]);
     const [sortField, setSortField] = useState('createdAt');
     const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');
-    const [sourceFilter, setSourceFilter] = useState<LeadSource | null>(null);
+    const [sourceFilter, setSourceFilter] = useState<LeadSource | null>(initialSource);
     const [searchQuery, setSearchQuery] = useState('');
     const [currentPage, setCurrentPage] = useState(1);
 
diff --git a/src/pages/lead-workspace.tsx b/src/pages/lead-workspace.tsx
index ee6235d..47a87a7 100644
--- a/src/pages/lead-workspace.tsx
+++ b/src/pages/lead-workspace.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { AnimatePresence, motion } from 'motion/react';
 
 import { Button } from '@/components/base/buttons/button';
 import { TopBar } from '@/components/layout/top-bar';
@@ -81,23 +82,35 @@ export const LeadWorkspacePage = () => {
                     <div>
                         <div className="mb-3.5 flex items-center justify-between">
                             <h2 className="font-display text-md font-bold text-primary">New Leads</h2>
-                            <Button href="/leads" color="link-color" size="sm">
-                                View All {total} Leads
+                            <Button
+                                href={sourceFilter ? `/leads?source=${sourceFilter}` : '/leads'}
+                                color="link-color"
+                                size="sm"
+                            >
+                                View All {total} Leads →
                             </Button>
                         </div>
                         <div className="space-y-2">
-                            {displayLeads.map((lead) => (
-                                <LeadCard
-                                    key={lead.id}
-                                    lead={lead}
-                                    onAssign={handleAssign}
-                                    onMessage={handleMessage}
-                                    onMarkSpam={handleMarkSpam}
-                                    onMerge={handleMerge}
-                                    onLogCall={handleLogCall}
-                                    onUpdateStatus={handleUpdateStatus}
-                                />
-                            ))}
+                            <AnimatePresence>
+                                {displayLeads.map((lead) => (
+                                    <motion.div
+                                        key={lead.id}
+                                        initial={{ opacity: 1, x: 0 }}
+                                        exit={{ opacity: 0, x: -20, height: 0, marginBottom: 0 }}
+                                        transition={{ duration: 0.3 }}
+                                    >
+                                        <LeadCard
+                                            lead={lead}
+                                            onAssign={handleAssign}
+                                            onMessage={handleMessage}
+                                            onMarkSpam={handleMarkSpam}
+                                            onMerge={handleMerge}
+                                            onLogCall={handleLogCall}
+                                            onUpdateStatus={handleUpdateStatus}
+                                        />
+                                    </motion.div>
+                                ))}
+                            </AnimatePresence>
                             {displayLeads.length === 0 && (
                                 <p className="py-8 text-center text-sm text-tertiary">
                                     No leads match the current filters.