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';