From 815de81d48d802eaa1226b19eb91b6ea54b041e6 Mon Sep 17 00:00:00 2001
From: Dwynr <dwynr@outlook.de>
Date: Wed, 31 Jul 2024 17:34:07 +0200
Subject: [PATCH] feat: syncs: sort transfers

---
 src/components/syncs/content/transfers/index.tsx    | 10 ++++++++--
 src/components/syncs/content/transfers/transfer.tsx |  6 +++++-
 src/components/transfers/transfer.tsx               |  8 +++++---
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/components/syncs/content/transfers/index.tsx b/src/components/syncs/content/transfers/index.tsx
index 7b11ded3..e16657e2 100644
--- a/src/components/syncs/content/transfers/index.tsx
+++ b/src/components/syncs/content/transfers/index.tsx
@@ -9,6 +9,7 @@ import { type RemoteTreeIgnoredReason } from "@filen/sync/dist/lib/filesystems/r
 import { DESKTOP_TOPBAR_HEIGHT } from "@/constants"
 import { ArrowDownUp } from "lucide-react"
 import { useTranslation } from "react-i18next"
+import { transferStateSortingPriority } from "@/components/transfers"
 
 export type IgnoreType = {
 	localPath: string
@@ -27,10 +28,15 @@ export const Transfers = memo(({ sync }: { sync: SyncPair }) => {
 	}, [windowSize.height])
 
 	const transfers = useMemo(() => {
-		return syncTransfers[sync.uuid] ? syncTransfers[sync.uuid]! : []
+		return syncTransfers[sync.uuid]
+			? syncTransfers[sync.uuid]!.sort((a, b) => transferStateSortingPriority[a.state] - transferStateSortingPriority[b.state])
+			: []
 	}, [sync.uuid, syncTransfers])
 
-	const getItemKey = useCallback((_: number, transfer: TransferType) => `${transfer.localPath}:${transfer.relativePath}`, [])
+	const getItemKey = useCallback(
+		(_: number, transfer: TransferType) => `${transfer.type}:${transfer.name}:${transfer.localPath}:${transfer.relativePath}`,
+		[]
+	)
 
 	const itemContent = useCallback((_: number, transfer: TransferType) => {
 		return <Transfer transfer={transfer} />
diff --git a/src/components/syncs/content/transfers/transfer.tsx b/src/components/syncs/content/transfers/transfer.tsx
index 42901ae6..84f31531 100644
--- a/src/components/syncs/content/transfers/transfer.tsx
+++ b/src/components/syncs/content/transfers/transfer.tsx
@@ -36,7 +36,11 @@ export const Transfer = memo(({ transfer }: { transfer: TransferType }) => {
 								</TooltipContent>
 							</Tooltip>
 						</TooltipProvider>
-						<p className="line-clamp-1 text-ellipsis break-all text-xs text-muted-foreground">{formatBytes(transfer.size)}</p>
+						{transfer.size > 0 && (
+							<p className="line-clamp-1 text-ellipsis break-all text-xs text-muted-foreground">
+								{formatBytes(transfer.size)}
+							</p>
+						)}
 					</div>
 				</div>
 			</div>
diff --git a/src/components/transfers/transfer.tsx b/src/components/transfers/transfer.tsx
index 033e5da0..8fc94834 100644
--- a/src/components/transfers/transfer.tsx
+++ b/src/components/transfers/transfer.tsx
@@ -100,9 +100,11 @@ export const Transfer = memo(
 						</div>
 						<div className="flex flex-col">
 							<p className="line-clamp-1 text-ellipsis break-all">{transfer.name}</p>
-							<p className="line-clamp-1 text-ellipsis break-all text-xs text-muted-foreground">
-								{formatBytes(transfer.size)}
-							</p>
+							{transfer.size > 0 && (
+								<p className="line-clamp-1 text-ellipsis break-all text-xs text-muted-foreground">
+									{formatBytes(transfer.size)}
+								</p>
+							)}
 						</div>
 					</div>
 					<div className="flex flex-row gap-1 shrink-0">