Fix: Implement sorting functionality

src/components/moderation/ActiveFiltersDisplay.tsx

@@ -22,7 +22,6 @@ const getEntityFilterIcon = (filter: EntityFilter) => {
 
 const getSortFieldLabel = (field: SortField): string => {
   switch (field) {
-    case 'username': return 'Submitter';
     case 'submission_type': return 'Type';
     case 'escalated': return 'Escalated';
     case 'status': return 'Status';

src/components/moderation/QueueSortControls.tsx

@@ -15,7 +15,6 @@ interface QueueSortControlsProps {
 const getSortFieldLabel = (field: SortField): string => {
   switch (field) {
     case 'created_at': return 'Date Created';
-    case 'username': return 'Submitter';
     case 'submission_type': return 'Type';
     case 'status': return 'Status';
     case 'escalated': return 'Escalated';
@@ -58,7 +57,6 @@ export const QueueSortControls = ({
           </SelectTrigger>
           <SelectContent>
             <SelectItem value="created_at">{getSortFieldLabel('created_at')}</SelectItem>
-            <SelectItem value="username">{getSortFieldLabel('username')}</SelectItem>
             <SelectItem value="submission_type">{getSortFieldLabel('submission_type')}</SelectItem>
             <SelectItem value="status">{getSortFieldLabel('status')}</SelectItem>
             <SelectItem value="escalated">{getSortFieldLabel('escalated')}</SelectItem>

src/hooks/moderation/useModerationQueueManager.ts

@@ -12,7 +12,7 @@ import {
 } from "./index";
 import { useModerationQueue } from "@/hooks/useModerationQueue";
 import { smartMergeArray } from "@/lib/smartStateUpdate";
-import type { ModerationItem, EntityFilter, StatusFilter, LoadingState, SortConfig } from "@/types/moderation";
+import type { ModerationItem, EntityFilter, StatusFilter, LoadingState, SortConfig, SortField } from "@/types/moderation";
 
 /**
  * Configuration for useModerationQueueManager
@@ -100,11 +100,29 @@ export function useModerationQueueManager(config: ModerationQueueManagerConfig):
   });
 
   const sort = useModerationSort({
-    initialConfig: { field: "created_at", direction: "asc" },
+    initialConfig: { field: "created_at", direction: "desc" },
     persist: true,
     storageKey: "moderationQueue_sortConfig",
   });
 
+  /**
+   * Map UI sort field to actual database column
+   */
+  const getSortColumn = (field: SortField): string => {
+    switch (field) {
+      case 'created_at':
+        return 'created_at';
+      case 'submission_type':
+        return 'submission_type';
+      case 'status':
+        return 'status';
+      case 'escalated':
+        return 'escalated';
+      default:
+        return 'created_at';
+    }
+  };
+
   const queue = useModerationQueue();
   const entityCache = useEntityCache();
   const profileCache = useProfileCache();
@@ -222,8 +240,23 @@ export function useModerationQueueManager(config: ModerationQueueManagerConfig):
           )
         `,
           )
-          .order("escalated", { ascending: false })
-          .order("created_at", { ascending: true });
+          // Apply user-selected sort configuration
+          const sortColumn = getSortColumn(sort.field);
+          const sortAscending = sort.direction === 'asc';
+
+          console.log('[Query] Applying sort:', {
+            uiField: sort.field,
+            dbColumn: sortColumn,
+            direction: sort.direction,
+            ascending: sortAscending
+          });
+
+          submissionsQuery = submissionsQuery.order(sortColumn, { ascending: sortAscending });
+
+          // Secondary sort by created_at for consistency when primary sort has ties
+          if (sortColumn !== 'created_at') {
+            submissionsQuery = submissionsQuery.order('created_at', { ascending: true });
+          }
 
         // Apply tab-based status filtering
         const tab = filters.activeTab;
@@ -875,6 +908,33 @@ export function useModerationQueueManager(config: ModerationQueueManagerConfig):
     };
   }, [settings.refreshOnTabVisible]);
 
+  // Refetch when sort configuration changes
+  useEffect(() => {
+    console.log('🔄 [Sort Changed]', {
+      field: sort.config.field,
+      direction: sort.config.direction,
+      timestamp: new Date().toISOString()
+    });
+
+    // Skip if initial fetch hasn't completed yet
+    if (!initialFetchCompleteRef.current) {
+      console.log('⏭️ Skipping sort refetch (initial fetch not complete)');
+      return;
+    }
+
+    // Skip if mounting
+    if (isMountingRef.current) {
+      console.log('⏭️ Skipping sort refetch (mounting)');
+      return;
+    }
+
+    // Trigger refetch with new sort
+    if (fetchItemsRef.current) {
+      console.log('✅ Triggering refetch due to sort change');
+      fetchItemsRef.current(false);
+    }
+  }, [sort.config.field, sort.config.direction]);
+
   // Initialize realtime subscriptions
   useRealtimeSubscriptions({
     enabled: settings.useRealtimeQueue && !!user,

src/lib/moderation/sorting.ts

@@ -27,12 +27,6 @@ export function sortModerationItems(
         comparison = new Date(a.created_at).getTime() - new Date(b.created_at).getTime();
         break;
         
-      case 'username':
-        const usernameA = a.user_profile?.username || a.user_profile?.display_name || '';
-        const usernameB = b.user_profile?.username || b.user_profile?.display_name || '';
-        comparison = usernameA.localeCompare(usernameB);
-        break;
-        
       case 'submission_type':
         comparison = (a.submission_type || '').localeCompare(b.submission_type || '');
         break;
@@ -123,8 +117,6 @@ export function getSortFieldLabel(field: SortField): string {
   switch (field) {
     case 'created_at':
       return 'Date Created';
-    case 'username':
-      return 'Submitter';
     case 'submission_type':
       return 'Type';
     case 'status':

src/types/moderation.ts

@@ -102,7 +102,7 @@ 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';
+export type SortField = 'created_at' | 'submission_type' | 'status' | 'escalated';
 
 /**
  * Direction for sorting (ascending or descending)