feat: Implement database-level sorting for moderation queue

src/components/moderation/ModerationQueue.tsx

@@ -109,15 +109,17 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
       )}
       
       {/* Filter Bar */}
-      <QueueFilters
-        activeEntityFilter={queueManager.filters.entityFilter}
-        activeStatusFilter={queueManager.filters.statusFilter}
-        isMobile={isMobile}
-        onEntityFilterChange={queueManager.filters.setEntityFilter}
-        onStatusFilterChange={queueManager.filters.setStatusFilter}
-        onClearFilters={queueManager.filters.clearFilters}
-        showClearButton={queueManager.filters.hasActiveFilters}
-      />
+        <QueueFilters
+          activeEntityFilter={queueManager.filters.entityFilter}
+          activeStatusFilter={queueManager.filters.statusFilter}
+          sortConfig={queueManager.sort.config}
+          isMobile={isMobile}
+          onEntityFilterChange={queueManager.filters.setEntityFilter}
+          onStatusFilterChange={queueManager.filters.setStatusFilter}
+          onSortChange={queueManager.sort.setConfig}
+          onClearFilters={queueManager.filters.clearFilters}
+          showClearButton={queueManager.filters.hasActiveFilters}
+        />
       
       {/* Active Filters Display */}
       {queueManager.filters.hasActiveFilters && (

src/components/moderation/QueueFilters.tsx

@@ -2,14 +2,17 @@ import { Filter, MessageSquare, FileText, Image, X } 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 { EntityFilter, StatusFilter } from '@/types/moderation';
+import { QueueSortControls } from './QueueSortControls';
+import type { EntityFilter, StatusFilter, SortConfig } from '@/types/moderation';
 
 interface QueueFiltersProps {
   activeEntityFilter: EntityFilter;
   activeStatusFilter: StatusFilter;
+  sortConfig: SortConfig;
   isMobile: boolean;
   onEntityFilterChange: (filter: EntityFilter) => void;
   onStatusFilterChange: (filter: StatusFilter) => void;
+  onSortChange: (config: SortConfig) => void;
   onClearFilters: () => void;
   showClearButton: boolean;
 }
@@ -26,9 +29,11 @@ const getEntityFilterIcon = (filter: EntityFilter) => {
 export const QueueFilters = ({ 
   activeEntityFilter,
   activeStatusFilter,
+  sortConfig,
   isMobile,
   onEntityFilterChange,
   onStatusFilterChange,
+  onSortChange,
   onClearFilters,
   showClearButton
 }: QueueFiltersProps) => {
@@ -107,6 +112,13 @@ export const QueueFilters = ({
             </SelectContent>
           </Select>
         </div>
+
+        {/* Sort Controls */}
+        <QueueSortControls
+          sortConfig={sortConfig}
+          onSortChange={onSortChange}
+          isMobile={isMobile}
+        />
       </div>
 
       {/* Clear Filters Button */}

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>
+  );
+};