feat: update session links to include tab parameters for improved navigation and add loading skeletons for better user experience

src/app/sessions/WorkshopTabs.tsx

@@ -2,12 +2,15 @@
 
 import { useState, useTransition } from 'react';
 import Link from 'next/link';
+import { useSearchParams, useRouter } from 'next/navigation';
 import { Card, Badge, Button, Modal, ModalFooter, Input, CollaboratorDisplay } from '@/components/ui';
 import { deleteSwotSession, updateSwotSession } from '@/actions/session';
 import { deleteMotivatorSession, updateMotivatorSession } from '@/actions/moving-motivators';
 
 type WorkshopType = 'all' | 'swot' | 'motivators' | 'byPerson';
 
+const VALID_TABS: WorkshopType[] = ['all', 'swot', 'motivators', 'byPerson'];
+
 interface ShareUser {
   id: string;
   name: string | null;
@@ -122,7 +125,24 @@ function groupByPerson(sessions: AnySession[]): Map<string, AnySession[]> {
 }
 
 export function WorkshopTabs({ swotSessions, motivatorSessions }: WorkshopTabsProps) {
-  const [activeTab, setActiveTab] = useState<WorkshopType>('all');
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  
+  // Get tab from URL or default to 'all'
+  const tabParam = searchParams.get('tab');
+  const activeTab: WorkshopType = tabParam && VALID_TABS.includes(tabParam as WorkshopType)
+    ? (tabParam as WorkshopType)
+    : 'all';
+
+  const setActiveTab = (tab: WorkshopType) => {
+    const params = new URLSearchParams(searchParams.toString());
+    if (tab === 'all') {
+      params.delete('tab');
+    } else {
+      params.set('tab', tab);
+    }
+    router.push(`/sessions${params.toString() ? `?${params.toString()}` : ''}`);
+  };
 
   // Combine and sort all sessions
   const allSessions: AnySession[] = [...swotSessions, ...motivatorSessions].sort(