From b56617efcc343325a1f38b66219a3d9c47356cf7 Mon Sep 17 00:00:00 2001
From: pac7 <47831526-pac7@users.noreply.replit.com>
Date: Mon, 13 Oct 2025 15:16:16 +0000
Subject: [PATCH] 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
---
 .replit                                       |  4 ++++
 replit.md                                     |  6 +++++
 src/components/moderation/ModerationQueue.tsx |  1 +
 src/components/moderation/QueueFilters.tsx    |  3 +++
 .../moderation/QueueSortControls.tsx          | 23 ++++++++++++++-----
 .../moderation/useModerationQueueManager.ts   | 17 ++++++++++++++
 6 files changed, 48 insertions(+), 6 deletions(-)

diff --git a/.replit b/.replit
index f1bbfc88..409cff57 100644
--- a/.replit
+++ b/.replit
@@ -41,3 +41,7 @@ externalPort = 3000
 [[ports]]
 localPort = 37143
 externalPort = 3001
+
+[[ports]]
+localPort = 41349
+externalPort = 3002
diff --git a/replit.md b/replit.md
index 485a4abd..963eec01 100644
--- a/replit.md
+++ b/replit.md
@@ -5,6 +5,12 @@ ThrillWiki is a community-driven web application for discovering, reviewing, and
 
 ## Recent Changes
 **October 2025 - Critical Bug Fixes & Stability Improvements (Latest)**
+- **Moderation Queue Sorting Enhancement**: Enhanced sorting controls with visual loading indicators and diagnostic logging:
+  - Added animated spinners to sort controls (label and direction button) during data fetch operations
+  - Added comprehensive logging to track multi-level sort queries (escalated DESC → user-selected sort → created_at tertiary)
+  - Added detailed result preview logging showing first 3 items with sort field values for debugging
+  - Disabled sort controls during loading to prevent duplicate requests
+  - Mobile-specific loading text changes from "Ascending/Descending" to "Loading..." for clarity
 - **Moderation Queue Sorting Fix**: Resolved sorting controls not updating the UI by fixing type mismatch in QueueSortControls (Radix Select passes string, handler expected SortField) and correcting refresh strategy logic (user-initiated sort/filter changes now bypass "notify" freeze mode and always update display)
 - **Auth Loading State Fix**: Resolved perpetual loading state issue in auth buttons by simplifying useAuth hook's loading state management, removing blocking conditional logic, adding explicit setLoading(false) calls in all code paths, and ensuring pending email state cleanup occurs before early returns
 - **React Hooks Violation Fix**: Resolved critical hooks ordering issue in useSearch that caused app crashes during hot module reload (HMR) by using stable useMemo with entire options object as dependency
diff --git a/src/components/moderation/ModerationQueue.tsx b/src/components/moderation/ModerationQueue.tsx
index bb1703a3..90ed51b5 100644
--- a/src/components/moderation/ModerationQueue.tsx
+++ b/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}
diff --git a/src/components/moderation/QueueFilters.tsx b/src/components/moderation/QueueFilters.tsx
index c98f8b3f..8e068276 100644
--- a/src/components/moderation/QueueFilters.tsx
+++ b/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>
 
diff --git a/src/components/moderation/QueueSortControls.tsx b/src/components/moderation/QueueSortControls.tsx
index b0ae3c8f..0a6975ad 100644
--- a/src/components/moderation/QueueSortControls.tsx
+++ b/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>
diff --git a/src/hooks/moderation/useModerationQueueManager.ts b/src/hooks/moderation/useModerationQueueManager.ts
index 166e36c6..0c3916a4 100644
--- a/src/hooks/moderation/useModerationQueueManager.ts
+++ b/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([