feat: Implement database-level sorting for moderation queue

src/components/moderation/QueueSortControls.tsx

@@ -0,0 +1,78 @@
+import { ArrowUp, ArrowDown } 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;
+}
+
+const SORT_FIELD_LABELS: Record<SortField, string> = {
+  created_at: 'Date Submitted',
+  submission_type: 'Type',
+  status: 'Status'
+};
+
+export const QueueSortControls = ({
+  sortConfig,
+  onSortChange,
+  isMobile
+}: QueueSortControlsProps) => {
+  const handleFieldChange = (field: SortField) => {
+    onSortChange({ ...sortConfig, field });
+  };
+
+  const handleDirectionToggle = () => {
+    onSortChange({
+      ...sortConfig,
+      direction: sortConfig.direction === 'asc' ? 'desc' : 'asc'
+    });
+  };
+
+  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'}`}>
+          Sort By
+        </Label>
+        <Select 
+          value={sortConfig.field} 
+          onValueChange={handleFieldChange}
+        >
+          <SelectTrigger className={isMobile ? "h-10" : ""}>
+            <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}
+          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" />
+          {isMobile && (
+            <span className="capitalize">{sortConfig.direction}ending</span>
+          )}
+        </Button>
+      </div>
+    </div>
+  );
+};