Refactor code structure and remove redundant changes

src-old/components/moderation/QueueSortControls.tsx

@@ -0,0 +1,97 @@
+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';
+import type { SortConfig, SortField } from '@/types/moderation';
+
+interface QueueSortControlsProps {
+  sortConfig: SortConfig;
+  onSortChange: (config: SortConfig) => void;
+  isMobile: boolean;
+  isLoading?: boolean;
+}
+
+const SORT_FIELD_LABELS: Record<SortField, string> = {
+  created_at: 'Date Submitted',
+  submission_type: 'Type',
+  status: 'Status'
+};
+
+export const QueueSortControls = ({
+  sortConfig,
+  onSortChange,
+  isMobile,
+  isLoading = false
+}: QueueSortControlsProps) => {
+  const handleFieldChange = (value: string) => {
+    const validFields: SortField[] = ['created_at', 'submission_type', 'status'];
+    
+    if (!validFields.includes(value as SortField)) {
+      return;
+    }
+    
+    const field = value as SortField;
+    onSortChange({ ...sortConfig, field });
+  };
+
+  const handleDirectionToggle = () => {
+    const newDirection = sortConfig.direction === 'asc' ? 'desc' : 'asc';
+    onSortChange({
+      ...sortConfig,
+      direction: newDirection
+    });
+  };
+
+  const DirectionIcon = sortConfig.direction === 'asc' ? ArrowUp : ArrowDown;
+
+  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'} 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" : ""} disabled={isLoading}>
+            <SelectValue>
+              {SORT_FIELD_LABELS[sortConfig.field]}
+            </SelectValue>
+          </SelectTrigger>
+          <SelectContent>
+            {Object.entries(SORT_FIELD_LABELS).map(([field, label]) => (
+              <SelectItem key={field} value={field}>
+                {label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className={isMobile ? "" : "pb-[2px]"}>
+        <Button
+          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'}
+        >
+          {isLoading ? (
+            <Loader2 className="w-4 h-4 animate-spin" />
+          ) : (
+            <DirectionIcon className="w-4 h-4" />
+          )}
+          {isMobile && (
+            <span className="capitalize">
+              {isLoading ? 'Loading...' : `${sortConfig.direction}ending`}
+            </span>
+          )}
+        </Button>
+      </div>
+    </div>
+  );
+};