From 5d8ef1785b2236610dc0efc2a482cf12e70a5056 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Mon, 13 Oct 2025 01:02:08 +0000
Subject: [PATCH] Reverted to commit 879b890b6484464caaf5ed0d92ec28de7317b320

---
 .../moderation/QueueSortControls.tsx          | 77 +++++++++++--------
 1 file changed, 47 insertions(+), 30 deletions(-)

diff --git a/src/components/moderation/QueueSortControls.tsx b/src/components/moderation/QueueSortControls.tsx
index 8adeae4e..f2b5b946 100644
--- a/src/components/moderation/QueueSortControls.tsx
+++ b/src/components/moderation/QueueSortControls.tsx
@@ -3,6 +3,7 @@ import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Button } from '@/components/ui/button';
 import type { SortConfig, SortField } from '@/types/moderation';
+
 interface QueueSortControlsProps {
   sortConfig: SortConfig;
   onSortChange: (config: SortConfig) => void;
@@ -10,48 +11,53 @@ interface QueueSortControlsProps {
   variant?: 'inline' | 'standalone';
   showLabel?: boolean;
 }
+
 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';
-    default:
-      return field;
+    case 'created_at': return 'Date Created';
+    case 'username': return 'Submitter';
+    case 'submission_type': return 'Type';
+    case 'status': return 'Status';
+    case 'escalated': return 'Escalated';
+    default: return field;
   }
 };
-export const QueueSortControls = ({
-  sortConfig,
+
+export const QueueSortControls = ({ 
+  sortConfig, 
   onSortChange,
   isMobile = false,
   variant = 'inline',
   showLabel = true
 }: QueueSortControlsProps) => {
   const handleFieldChange = (field: SortField) => {
-    onSortChange({
-      ...sortConfig,
-      field
-    });
+    onSortChange({ ...sortConfig, field });
   };
+
   const handleDirectionToggle = () => {
-    onSortChange({
-      ...sortConfig,
-      direction: sortConfig.direction === 'asc' ? 'desc' : 'asc'
+    onSortChange({ 
+      ...sortConfig, 
+      direction: sortConfig.direction === 'asc' ? 'desc' : 'asc' 
     });
   };
-  return <div className={`space-y-2 ${isMobile ? 'w-full' : 'min-w-[180px]'}`}>
-      {showLabel && <Label className={`font-medium ${isMobile ? 'text-xs' : 'text-sm'}`}>
+
+  return (
+    <div className={`space-y-2 ${isMobile ? 'w-full' : 'min-w-[180px]'}`}>
+      {showLabel && (
+        <Label className={`font-medium ${isMobile ? 'text-xs' : 'text-sm'}`}>
           Sort By
-        </Label>}
-      
+        </Label>
+      )}
+      <div className="flex items-center gap-2 text-xs text-muted-foreground mb-1">
+        <span>
+          Sorting by {getSortFieldLabel(sortConfig.field)} ({sortConfig.direction === 'asc' ? '↑ Ascending' : '↓ Descending'})
+        </span>
+      </div>
       <div className="flex gap-2">
-        <Select value={sortConfig.field} onValueChange={handleFieldChange}>
+        <Select 
+          value={sortConfig.field} 
+          onValueChange={handleFieldChange}
+        >
           <SelectTrigger className={isMobile ? "h-10 flex-1" : "flex-1"}>
             <SelectValue />
           </SelectTrigger>
@@ -64,9 +70,20 @@ export const QueueSortControls = ({
           </SelectContent>
         </Select>
         
-        <Button variant="outline" size={isMobile ? "default" : "sm"} onClick={handleDirectionToggle} className={isMobile ? "h-10" : ""} title={sortConfig.direction === 'asc' ? 'Sort Descending' : 'Sort Ascending'}>
-          {sortConfig.direction === 'asc' ? <ArrowUp className="w-4 h-4" /> : <ArrowDown className="w-4 h-4" />}
+        <Button
+          variant="outline"
+          size={isMobile ? "default" : "sm"}
+          onClick={handleDirectionToggle}
+          className={isMobile ? "h-10" : ""}
+          title={sortConfig.direction === 'asc' ? 'Sort Descending' : 'Sort Ascending'}
+        >
+          {sortConfig.direction === 'asc' ? (
+            <ArrowUp className="w-4 h-4" />
+          ) : (
+            <ArrowDown className="w-4 h-4" />
+          )}
         </Button>
       </div>
-    </div>;
-};
\ No newline at end of file
+    </div>
+  );
+};