Visual edit in Lovable

src/components/moderation/QueueSortControls.tsx

@@ -3,7 +3,6 @@ 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;
@@ -11,53 +10,48 @@ interface QueueSortControlsProps {
   variant?: 'inline' | 'standalone';
   showLabel?: boolean;
 }
-
 const getSortFieldLabel = (field: SortField): string => {
   switch (field) {
-    case 'created_at': return 'Date Created';
+    case 'created_at':
-    case 'username': return 'Submitter';
+      return 'Date Created';
-    case 'submission_type': return 'Type';
+    case 'username':
-    case 'status': return 'Status';
+      return 'Submitter';
-    case 'escalated': return 'Escalated';
+    case 'submission_type':
-    default: return field;
+      return 'Type';
+    case 'status':
+      return 'Status';
+    case 'escalated':
+      return 'Escalated';
+    default:
+      return field;
   }
 };
-
+export const QueueSortControls = ({
-export const QueueSortControls = ({ 
+  sortConfig,
-  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' 
     });
   };
-
+  const handleDirectionToggle = () => {
-  return (
+    onSortChange({
-    <div className={`space-y-2 ${isMobile ? 'w-full' : 'min-w-[180px]'}`}>
+      ...sortConfig,
-      {showLabel && (
+      direction: sortConfig.direction === 'asc' ? 'desc' : 'asc'
-        <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 
+        <Select value={sortConfig.field} onValueChange={handleFieldChange}>
-          value={sortConfig.field} 
-          onValueChange={handleFieldChange}
-        >
           <SelectTrigger className={isMobile ? "h-10 flex-1" : "flex-1"}>
             <SelectValue />
           </SelectTrigger>
@@ -70,20 +64,9 @@ export const QueueSortControls = ({
           </SelectContent>
         </Select>
         
-        <Button
+        <Button variant="outline" size={isMobile ? "default" : "sm"} onClick={handleDirectionToggle} className={isMobile ? "h-10" : ""} title={sortConfig.direction === 'asc' ? 'Sort Descending' : 'Sort Ascending'}>
-          variant="outline"
+          {sortConfig.direction === 'asc' ? <ArrowUp className="w-4 h-4" /> : <ArrowDown className="w-4 h-4" />}
-          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>;
-  );
+};
-};