Enhance moderation queue sorting with visual indicators and logging

Add loading spinners, detailed sort query logging, result preview logging, disable sort controls during loading, and mobile-specific loading text changes. Also, fix type mismatch in QueueSortControls and correct refresh strategy logic.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ef7037e7-a631-48a2-94d1-9a4b52d7c35a
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/7cdf4e95-3f41-4180-b8e3-8ef56d032c0e/ef7037e7-a631-48a2-94d1-9a4b52d7c35a/kq6AhNt

src/components/moderation/ModerationQueue.tsx

@@ -114,6 +114,7 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
           activeStatusFilter={queueManager.filters.statusFilter}
           sortConfig={queueManager.sort.config}
           isMobile={isMobile}
+          isLoading={queueManager.loadingState === 'loading'}
           onEntityFilterChange={queueManager.filters.setEntityFilter}
           onStatusFilterChange={queueManager.filters.setStatusFilter}
           onSortChange={queueManager.sort.setConfig}

src/components/moderation/QueueFilters.tsx

@@ -10,6 +10,7 @@ interface QueueFiltersProps {
   activeStatusFilter: StatusFilter;
   sortConfig: SortConfig;
   isMobile: boolean;
+  isLoading?: boolean;
   onEntityFilterChange: (filter: EntityFilter) => void;
   onStatusFilterChange: (filter: StatusFilter) => void;
   onSortChange: (config: SortConfig) => void;
@@ -31,6 +32,7 @@ export const QueueFilters = ({
   activeStatusFilter,
   sortConfig,
   isMobile,
+  isLoading = false,
   onEntityFilterChange,
   onStatusFilterChange,
   onSortChange,
@@ -118,6 +120,7 @@ export const QueueFilters = ({
           sortConfig={sortConfig}
           onSortChange={onSortChange}
           isMobile={isMobile}
+          isLoading={isLoading}
         />
       </div>
 

src/components/moderation/QueueSortControls.tsx

@@ -1,4 +1,4 @@
-import { ArrowUp, ArrowDown } from 'lucide-react';
+import { ArrowUp, ArrowDown, Loader2 } from 'lucide-react';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Button } from '@/components/ui/button';
@@ -8,6 +8,7 @@ interface QueueSortControlsProps {
   sortConfig: SortConfig;
   onSortChange: (config: SortConfig) => void;
   isMobile: boolean;
+  isLoading?: boolean;
 }
 
 const SORT_FIELD_LABELS: Record<SortField, string> = {
@@ -19,7 +20,8 @@ const SORT_FIELD_LABELS: Record<SortField, string> = {
 export const QueueSortControls = ({
   sortConfig,
   onSortChange,
-  isMobile
+  isMobile,
+  isLoading = false
 }: QueueSortControlsProps) => {
   const handleFieldChange = (value: string) => {
     const validFields: SortField[] = ['created_at', 'submission_type', 'status'];
@@ -48,14 +50,16 @@ export const QueueSortControls = ({
   return (
     <div className={`flex gap-2 ${isMobile ? 'flex-col' : 'items-end'}`}>
       <div className={`space-y-2 ${isMobile ? 'w-full' : 'min-w-[160px]'}`}>
-        <Label className={`font-medium ${isMobile ? 'text-xs' : 'text-sm'}`}>
+        <Label className={`font-medium ${isMobile ? 'text-xs' : 'text-sm'} flex items-center gap-2`}>
           Sort By
+          {isLoading && <Loader2 className="w-3 h-3 animate-spin text-primary" />}
         </Label>
         <Select 
           value={sortConfig.field} 
           onValueChange={handleFieldChange}
+          disabled={isLoading}
         >
-          <SelectTrigger className={isMobile ? "h-10" : ""}>
+          <SelectTrigger className={isMobile ? "h-10" : ""} disabled={isLoading}>
             <SelectValue>
               {SORT_FIELD_LABELS[sortConfig.field]}
             </SelectValue>
@@ -75,12 +79,19 @@ export const QueueSortControls = ({
           variant="outline"
           size={isMobile ? "default" : "icon"}
           onClick={handleDirectionToggle}
+          disabled={isLoading}
           className={`flex items-center gap-2 ${isMobile ? 'w-full h-10' : 'h-10 w-10'}`}
           title={sortConfig.direction === 'asc' ? 'Ascending' : 'Descending'}
         >
-          <DirectionIcon className="w-4 h-4" />
+          {isLoading ? (
+            <Loader2 className="w-4 h-4 animate-spin" />
+          ) : (
+            <DirectionIcon className="w-4 h-4" />
+          )}
           {isMobile && (
-            <span className="capitalize">{sortConfig.direction}ending</span>
+            <span className="capitalize">
+              {isLoading ? 'Loading...' : `${sortConfig.direction}ending`}
+            </span>
           )}
         </Button>
       </div>

src/hooks/moderation/useModerationQueueManager.ts

@@ -224,6 +224,12 @@ export function useModerationQueueManager(config: ModerationQueueManagerConfig):
           );
 
         // CRITICAL: Multi-level ordering
+        console.log('📊 [SORT QUERY] Applying multi-level sort:', {
+          level1: 'escalated DESC',
+          level2: `${sort.debouncedConfig.field} ${sort.debouncedConfig.direction.toUpperCase()}`,
+          level3: sort.debouncedConfig.field !== 'created_at' ? 'created_at ASC' : 'none'
+        });
+
         // Level 1: Always sort by escalated first (descending)
         submissionsQuery = submissionsQuery.order('escalated', { ascending: false });
 
@@ -291,6 +297,17 @@ export function useModerationQueueManager(config: ModerationQueueManagerConfig):
 
         if (submissionsError) throw submissionsError;
 
+        // Log the actual data returned to verify sort order
+        if (submissions && submissions.length > 0) {
+          const sortField = sort.debouncedConfig.field;
+          const preview = submissions.slice(0, 3).map(s => ({
+            id: s.id.substring(0, 8),
+            [sortField]: s[sortField],
+            escalated: s.escalated
+          }));
+          console.log(`📋 [SORT RESULT] First 3 items by ${sortField}:`, preview);
+        }
+
         // Fetch related profiles and entities
         const userIds = [
           ...new Set([