feat: Extract type definitions

src/components/moderation/ModerationQueue.tsx

@@ -33,62 +33,22 @@ import { smartMergeArray } from '@/lib/smartStateUpdate';
 import { useDebounce } from '@/hooks/useDebounce';
 import { QueueItem } from './QueueItem';
 import { QueueSkeleton } from './QueueSkeleton';
-
+import type {
-interface ModerationItem {
+  ModerationItem,
-  id: string;
+  EntityFilter,
-  type: 'review' | 'content_submission';
+  StatusFilter,
-  content: any;
+  QueueTab,
-  created_at: string;
+  SortField,
-  updated_at?: string;
+  SortDirection,
-  user_id: string;
+  SortConfig,
-  status: string;
+  LoadingState,
-  submission_type?: string;
+  ModerationQueueRef,
-  user_profile?: {
+} from '@/types/moderation';
-    username: string;
-    display_name?: string;
-    avatar_url?: string;
-  };
-  entity_name?: string;
-  park_name?: string;
-  reviewed_at?: string;
-  reviewed_by?: string;
-  reviewer_notes?: string;
-  reviewer_profile?: {
-    username: string;
-    display_name?: string;
-    avatar_url?: string;
-  };
-  escalated?: boolean;
-  assigned_to?: string;
-  locked_until?: string;
-  _removing?: boolean;
-  submission_items?: Array<{
-    id: string;
-    item_type: string;
-    item_data: any;
-    status: string;
-  }>;
-}
-
-type EntityFilter = 'all' | 'reviews' | 'submissions' | 'photos';
-type StatusFilter = 'all' | 'pending' | 'partially_approved' | 'flagged' | 'approved' | 'rejected';
-type QueueTab = 'mainQueue' | 'archive';
-type SortField = 'created_at' | 'username' | 'submission_type' | 'status' | 'escalated';
-type SortDirection = 'asc' | 'desc';
-
-interface SortConfig {
-  field: SortField;
-  direction: SortDirection;
-}
-
-export interface ModerationQueueRef {
-  refresh: () => void;
-}
 
 export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
   const isMobile = useIsMobile();
   const [items, setItems] = useState<ModerationItem[]>([]);
-  const [loadingState, setLoadingState] = useState<'initial' | 'loading' | 'refreshing' | 'ready'>('initial');
+  const [loadingState, setLoadingState] = useState<LoadingState>('initial');
   const [actionLoading, setActionLoading] = useState<string | null>(null);
   const [notes, setNotes] = useState<Record<string, string>>({});
   const [activeTab, setActiveTab] = useState<QueueTab>('mainQueue');
@@ -2519,3 +2479,6 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
 });
 
 ModerationQueue.displayName = 'ModerationQueue';
+
+// Re-export types for backwards compatibility
+export type { ModerationQueueRef } from '@/types/moderation';

src/types/moderation.ts

@@ -0,0 +1,135 @@
+/**
+ * Moderation Queue Type Definitions
+ * 
+ * This file contains all TypeScript types and interfaces used by the moderation queue system.
+ * Extracted from ModerationQueue.tsx to improve maintainability and reusability.
+ */
+
+/**
+ * Represents a single item in the moderation queue.
+ * Can be either a review or a content submission.
+ */
+export interface ModerationItem {
+  /** Unique identifier for the item */
+  id: string;
+  
+  /** Type of moderation item */
+  type: 'review' | 'content_submission';
+  
+  /** Raw content data (structure varies by type) */
+  content: any;
+  
+  /** Timestamp when the item was created */
+  created_at: string;
+  
+  /** Timestamp when the item was last updated */
+  updated_at?: string;
+  
+  /** ID of the user who submitted this item */
+  user_id: string;
+  
+  /** Current status of the item */
+  status: string;
+  
+  /** Type of submission (e.g., 'park', 'ride', 'review') */
+  submission_type?: string;
+  
+  /** Profile information of the submitting user */
+  user_profile?: {
+    username: string;
+    display_name?: string;
+    avatar_url?: string;
+  };
+  
+  /** Display name of the entity being modified */
+  entity_name?: string;
+  
+  /** Display name of the park (for ride submissions) */
+  park_name?: string;
+  
+  /** Timestamp when the item was reviewed */
+  reviewed_at?: string;
+  
+  /** ID of the moderator who reviewed this item */
+  reviewed_by?: string;
+  
+  /** Notes left by the reviewing moderator */
+  reviewer_notes?: string;
+  
+  /** Profile information of the reviewing moderator */
+  reviewer_profile?: {
+    username: string;
+    display_name?: string;
+    avatar_url?: string;
+  };
+  
+  /** Whether this submission has been escalated for senior review */
+  escalated?: boolean;
+  
+  /** ID of the moderator this item is assigned to */
+  assigned_to?: string;
+  
+  /** Timestamp until which this item is locked by a moderator */
+  locked_until?: string;
+  
+  /** Internal flag indicating item is being removed (optimistic update) */
+  _removing?: boolean;
+  
+  /** Sub-items for composite submissions */
+  submission_items?: Array<{
+    id: string;
+    item_type: string;
+    item_data: any;
+    status: string;
+  }>;
+}
+
+/**
+ * Filter options for entity types in the moderation queue
+ */
+export type EntityFilter = 'all' | 'reviews' | 'submissions' | 'photos';
+
+/**
+ * Filter options for submission status in the moderation queue
+ */
+export type StatusFilter = 'all' | 'pending' | 'partially_approved' | 'flagged' | 'approved' | 'rejected';
+
+/**
+ * Available tabs in the moderation interface
+ */
+export type QueueTab = 'mainQueue' | 'archive';
+
+/**
+ * Fields that can be used for sorting the moderation queue
+ */
+export type SortField = 'created_at' | 'username' | 'submission_type' | 'status' | 'escalated';
+
+/**
+ * Direction for sorting (ascending or descending)
+ */
+export type SortDirection = 'asc' | 'desc';
+
+/**
+ * Configuration for sorting the moderation queue
+ */
+export interface SortConfig {
+  /** Field to sort by */
+  field: SortField;
+  
+  /** Direction to sort */
+  direction: SortDirection;
+}
+
+/**
+ * Loading states for the moderation queue
+ */
+export type LoadingState = 'initial' | 'loading' | 'refreshing' | 'ready';
+
+/**
+ * Ref interface for the ModerationQueue component
+ * Allows parent components to trigger actions imperatively
+ */
+export interface ModerationQueueRef {
+  /** Manually refresh the queue data */
+  refresh: () => void;
+}