Reverted to commit 879b890b64

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':
+    case 'created_at': return 'Date Created';
-      return 'Date Created';
+    case 'username': return 'Submitter';
-    case 'username':
+    case 'submission_type': return 'Type';
-      return 'Submitter';
+    case 'status': return 'Status';
-    case 'submission_type':
+    case 'escalated': return 'Escalated';
-      return 'Type';
+    default: return field;
-    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({
+    onSortChange({ ...sortConfig, field });
-      ...sortConfig,
-      field
-    });
   };
+
   const handleDirectionToggle = () => {
-    onSortChange({
+    onSortChange({ 
-      ...sortConfig,
+      ...sortConfig, 
-      direction: sortConfig.direction === 'asc' ? 'desc' : 'asc'
+      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'}>
+        <Button
-          {sortConfig.direction === 'asc' ? <ArrowUp className="w-4 h-4" /> : <ArrowDown className="w-4 h-4" />}
+          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>;
+    </div>
-};
+  );
+};