fix test failures, new export/backup solutions

frontend/src/pages/Dashboard.tsx

@@ -1,45 +1,16 @@
 import React, { useEffect, useState, useCallback, useRef } from 'react';
-import { createPortal } from 'react-dom';
 import { Layout } from '../components/Layout';
 import { DrawingCard } from '../components/DrawingCard';
 import { Plus, Search, Loader2, Inbox, Trash2, Folder, ArrowRight, Copy, Upload, CheckSquare, Square, ArrowUp, ArrowDown, ChevronDown, FileText, Calendar, Clock } from 'lucide-react';
 import { useNavigate, useSearchParams, useLocation } from 'react-router-dom';
 import * as api from '../api';
 import type { DrawingSummary, Collection } from '../types';
+import type { DrawingSortField, SortDirection } from '../api';
 import { useDebounce } from '../hooks/useDebounce';
 import clsx from 'clsx';
 import { ConfirmModal } from '../components/ConfirmModal';
 import { useUpload } from '../context/UploadContext';
-
-type Point = { x: number; y: number };
-
-type SelectionBounds = {
-  left: number;
-  top: number;
-  right: number;
-  bottom: number;
-  width: number;
-  height: number;
-};
-
-const getSelectionBounds = (start: Point, current: Point): SelectionBounds => {
-  const left = Math.min(start.x, current.x);
-  const right = Math.max(start.x, current.x);
-  const top = Math.min(start.y, current.y);
-  const bottom = Math.max(start.y, current.y);
-  return {
-    left,
-    top,
-    right,
-    bottom,
-    width: right - left,
-    height: bottom - top,
-  };
-};
-
-const DragOverlayPortal: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  return createPortal(children, document.body);
-};
+import { DragOverlayPortal, getSelectionBounds, type Point, type SelectionBounds } from './dashboard/shared';
 
 const PAGE_SIZE = 24;
 
@@ -91,8 +62,7 @@ export const Dashboard: React.FC = () => {
   const containerRef = useRef<HTMLDivElement>(null);
   const loaderRef = useRef<HTMLDivElement>(null);
 
-  type SortField = 'name' | 'createdAt' | 'updatedAt';
-  type SortDirection = 'asc' | 'desc';
+  type SortField = DrawingSortField;
 
 
   const searchInputRef = useRef<HTMLInputElement>(null);
@@ -112,7 +82,12 @@ export const Dashboard: React.FC = () => {
     setIsLoading(true);
     try {
       const [drawingsRes, collectionsData] = await Promise.all([
-        api.getDrawings(debouncedSearch, selectedCollectionId, { limit: PAGE_SIZE, offset: 0 }),
+        api.getDrawings(debouncedSearch, selectedCollectionId, {
+          limit: PAGE_SIZE,
+          offset: 0,
+          sortField: sortConfig.field,
+          sortDirection: sortConfig.direction,
+        }),
         api.getCollections()
       ]);
       setDrawings(drawingsRes.drawings);
@@ -124,7 +99,7 @@ export const Dashboard: React.FC = () => {
     } finally {
       setIsLoading(false);
     }
-  }, [debouncedSearch, selectedCollectionId]);
+  }, [debouncedSearch, selectedCollectionId, sortConfig.field, sortConfig.direction]);
 
   const fetchMore = useCallback(async () => {
     if (isFetchingMore || !hasMore || isLoading) return;
@@ -132,7 +107,9 @@ export const Dashboard: React.FC = () => {
     try {
       const drawingsRes = await api.getDrawings(debouncedSearch, selectedCollectionId, {
         limit: PAGE_SIZE,
-        offset: drawings.length
+        offset: drawings.length,
+        sortField: sortConfig.field,
+        sortDirection: sortConfig.direction,
       });
       setDrawings(prev => [...prev, ...drawingsRes.drawings]);
       setTotalCount(drawingsRes.totalCount);
@@ -141,7 +118,16 @@ export const Dashboard: React.FC = () => {
     } finally {
       setIsFetchingMore(false);
     }
-  }, [isFetchingMore, hasMore, isLoading, debouncedSearch, selectedCollectionId, drawings.length]);
+  }, [
+    isFetchingMore,
+    hasMore,
+    isLoading,
+    debouncedSearch,
+    selectedCollectionId,
+    drawings.length,
+    sortConfig.field,
+    sortConfig.direction,
+  ]);
 
   useEffect(() => {
     refreshData();
@@ -258,16 +244,7 @@ export const Dashboard: React.FC = () => {
     setDragCurrent({ x: e.clientX, y: e.clientY });
   };
 
-  const sortedDrawings = React.useMemo(() => {
-    return [...drawings].sort((a, b) => {
-      const { field, direction } = sortConfig;
-      const modifier = direction === 'asc' ? 1 : -1;
-      if (field === 'name') return a.name.localeCompare(b.name) * modifier;
-      if (field === 'createdAt') return (a.createdAt - b.createdAt) * modifier;
-      if (field === 'updatedAt') return (a.updatedAt - b.updatedAt) * modifier;
-      return 0;
-    });
-  }, [drawings, sortConfig]);
+  const sortedDrawings = drawings;
 
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {