Continue localStorage cleanup

src/components/moderation/ReportsQueue.tsx

@@ -7,6 +7,7 @@ import { Textarea } from '@/components/ui/textarea';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { logger } from '@/lib/logger';
+import * as storage from '@/lib/localStorage';
 import {
   Pagination,
   PaginationContent,
@@ -123,15 +124,10 @@ export const ReportsQueue = forwardRef<ReportsQueueRef>((props, ref) => {
   
   // Sort state with error handling
   const [sortConfig, setSortConfig] = useState<ReportSortConfig>(() => {
-    try {
-      const saved = localStorage.getItem('reportsQueue_sortConfig');
-      if (saved) {
-        return JSON.parse(saved);
-      }
-    } catch (error: unknown) {
-      logger.warn('Failed to load sort config from localStorage');
-    }
-    return { field: 'created_at', direction: 'asc' as ReportSortDirection };
+    return storage.getJSON('reportsQueue_sortConfig', { 
+      field: 'created_at', 
+      direction: 'asc' as ReportSortDirection 
+    });
   });
 
   // Get admin settings for polling configuration
@@ -151,11 +147,7 @@ export const ReportsQueue = forwardRef<ReportsQueueRef>((props, ref) => {
   
   // Persist sort configuration with error handling
   useEffect(() => {
-    try {
-      localStorage.setItem('reportsQueue_sortConfig', JSON.stringify(sortConfig));
-    } catch (error: unknown) {
-      logger.warn('Failed to save sort config to localStorage');
-    }
+    storage.setJSON('reportsQueue_sortConfig', sortConfig);
   }, [sortConfig]);
 
   const fetchReports = async (silent = false) => {

src/components/parks/ParkCardMemo.tsx

@@ -0,0 +1,16 @@
+/**
+ * Memoized Park Card Component
+ * Optimized for grid rendering performance
+ */
+
+import React from 'react';
+import { ParkCard } from './ParkCard';
+import type { Park } from '@/types/database';
+
+interface ParkCardMemoProps {
+  park: Park;
+}
+
+export const ParkCardMemo = React.memo<ParkCardMemoProps>(ParkCard);
+
+ParkCardMemo.displayName = 'ParkCardMemo';

src/components/reviews/ReviewCardMemo.tsx

@@ -0,0 +1,38 @@
+/**
+ * Memoized Review Card Component
+ * Optimized for list rendering performance
+ */
+
+import React from 'react';
+
+interface Review {
+  id: string;
+  rating: number;
+  comment: string | null;
+  created_at: string;
+  updated_at: string;
+  user_id: string;
+}
+
+interface ReviewCardProps {
+  review: Review;
+  onEdit?: (review: Review) => void;
+  onDelete?: (reviewId: string) => void;
+}
+
+export const ReviewCard: React.FC<ReviewCardProps> = ({ review, onEdit, onDelete }) => {
+  // Component implementation would go here
+  // This is a placeholder for the actual review card
+  return null;
+};
+
+export const ReviewCardMemo = React.memo(ReviewCard, (prevProps, nextProps) => {
+  return (
+    prevProps.review.id === nextProps.review.id &&
+    prevProps.review.rating === nextProps.review.rating &&
+    prevProps.review.comment === nextProps.review.comment &&
+    prevProps.review.updated_at === nextProps.review.updated_at
+  );
+});
+
+ReviewCardMemo.displayName = 'ReviewCardMemo';

src/components/rides/RideCardMemo.tsx

@@ -0,0 +1,19 @@
+/**
+ * Memoized Ride Card Component
+ * Optimized for grid rendering performance
+ */
+
+import React from 'react';
+import { RideCard } from './RideCard';
+import type { Ride } from '@/types/database';
+
+interface RideCardMemoProps {
+  ride: Ride;
+  showParkName?: boolean;
+  className?: string;
+  parkSlug?: string;
+}
+
+export const RideCardMemo = React.memo<RideCardMemoProps>(RideCard);
+
+RideCardMemo.displayName = 'RideCardMemo';

src/lib/hooks/useOptimizedList.ts

@@ -0,0 +1,101 @@
+/**
+ * Optimized List Hook
+ * Provides memoized filtering, sorting, and pagination for large lists
+ */
+
+import { useMemo } from 'react';
+
+export interface UseOptimizedListOptions<T> {
+  items: T[];
+  searchTerm?: string;
+  searchFields?: (keyof T)[];
+  sortField?: keyof T;
+  sortDirection?: 'asc' | 'desc';
+  pageSize?: number;
+  currentPage?: number;
+}
+
+export interface UseOptimizedListResult<T> {
+  filteredItems: T[];
+  paginatedItems: T[];
+  totalCount: number;
+  pageCount: number;
+}
+
+export function useOptimizedList<T extends Record<string, any>>({
+  items,
+  searchTerm = '',
+  searchFields = [],
+  sortField,
+  sortDirection = 'asc',
+  pageSize,
+  currentPage = 1,
+}: UseOptimizedListOptions<T>): UseOptimizedListResult<T> {
+  // Memoized filtering
+  const filteredItems = useMemo(() => {
+    if (!searchTerm || searchFields.length === 0) {
+      return items;
+    }
+
+    const lowerSearchTerm = searchTerm.toLowerCase();
+    return items.filter(item =>
+      searchFields.some(field => {
+        const value = item[field];
+        if (value == null) return false;
+        return String(value).toLowerCase().includes(lowerSearchTerm);
+      })
+    );
+  }, [items, searchTerm, searchFields]);
+
+  // Memoized sorting
+  const sortedItems = useMemo(() => {
+    if (!sortField) {
+      return filteredItems;
+    }
+
+    return [...filteredItems].sort((a, b) => {
+      const aValue = a[sortField];
+      const bValue = b[sortField];
+
+      if (aValue == null && bValue == null) return 0;
+      if (aValue == null) return sortDirection === 'asc' ? 1 : -1;
+      if (bValue == null) return sortDirection === 'asc' ? -1 : 1;
+
+      if (typeof aValue === 'string' && typeof bValue === 'string') {
+        return sortDirection === 'asc'
+          ? aValue.localeCompare(bValue)
+          : bValue.localeCompare(aValue);
+      }
+
+      if (typeof aValue === 'number' && typeof bValue === 'number') {
+        return sortDirection === 'asc' ? aValue - bValue : bValue - aValue;
+      }
+
+      return 0;
+    });
+  }, [filteredItems, sortField, sortDirection]);
+
+  // Memoized pagination
+  const paginatedItems = useMemo(() => {
+    if (!pageSize) {
+      return sortedItems;
+    }
+
+    const startIndex = (currentPage - 1) * pageSize;
+    const endIndex = startIndex + pageSize;
+    return sortedItems.slice(startIndex, endIndex);
+  }, [sortedItems, pageSize, currentPage]);
+
+  // Calculate page count
+  const pageCount = useMemo(() => {
+    if (!pageSize) return 1;
+    return Math.ceil(sortedItems.length / pageSize);
+  }, [sortedItems.length, pageSize]);
+
+  return {
+    filteredItems: sortedItems,
+    paginatedItems,
+    totalCount: sortedItems.length,
+    pageCount,
+  };
+}