Merge pull request #119 from tonyantony300/feature/clear-selection

add ability to clear selection

Author: tonyantony300

sendme/src/core/receive.rs

@@ -164,7 +164,12 @@ pub async fn download(
                                 0.0
                             };
 
-                            emit_progress_event(&app_handle, offset.min(payload_size), payload_size, speed_bps);
+                            emit_progress_event(
+                                &app_handle,
+                                offset.min(payload_size),
+                                payload_size,
+                                speed_bps,
+                            );
                         }
                     }
                     GetProgressItem::Done(value) => {

sendme/src/core/send.rs

@@ -366,7 +366,9 @@ mod tests {
                 }
                 let path = entry.into_path();
                 let relative = path.strip_prefix(root).ok()?;
-                canonicalized_path_to_string(relative, true).ok().map(|name| (name, path))
+                canonicalized_path_to_string(relative, true)
+                    .ok()
+                    .map(|name| (name, path))
             })
             .collect();
 

web-app/src/components/LanguageSwitcher.tsx

@@ -29,7 +29,7 @@ const LANGUAGES = [
 	{ value: 'uk', label: 'Українська' },
 	{ value: 'zh-CN', label: '简体中文' },
 	{ value: 'zh-TW', label: '繁體中文' },
-  ]
+]
 
 export function LanguageSwitcher(props: ButtonProps) {
 	const { i18n } = useAppTranslation()

web-app/src/components/common/TransferSuccessScreen.tsx

@@ -73,17 +73,12 @@ export function TransferSuccessScreen({
 				{wasStopped ? (
 					<XCircle size={44} className="text-destructive" />
 				) : (
-					<CheckCircle
-						size={44}
-						className="text-success"
-					/>
+					<CheckCircle size={44} className="text-success" />
 				)}
 			</div>
 
 			<div className="text-center">
-				<h2
-					className="text-2xl font-semibold mb-2"
-				>
+				<h2 className="text-2xl font-semibold mb-2">
 					{wasStopped
 						? t('common:transfer.stopped')
 						: t('common:transfer.complete')}

web-app/src/components/receiver/InstructionsCard.tsx

@@ -3,11 +3,7 @@ import type { InstructionsCardProps } from '../../types/ui'
 export function InstructionsCard(_props: InstructionsCardProps) {
 	return (
 		<div className="p-4 rounded-lg border">
-			<h3
-				className="text-sm font-medium mb-2"
-			>
-				How to receive files:
-			</h3>
+			<h3 className="text-sm font-medium mb-2">How to receive files:</h3>
 			<ol className="text-xs space-y-1 list-decimal list-inside">
 				<li>Get a ticket from someone who is sharing a file</li>
 				<li>Paste the ticket in the text area above</li>

web-app/src/components/receiver/Receiver.tsx

@@ -48,16 +48,12 @@ export function Receiver({ onTransferStateChange }: ReceiverProps) {
 	}, [isReceiving, onTransferStateChange])
 
 	return (
-		<div
-			className="p-6 space-y-6 relative h-112 overflow-y-auto flex flex-col"
-		>
+		<div className="p-6 space-y-6 relative h-112 overflow-y-auto flex flex-col">
 			{!isReceiving ? (
 				<>
 					<div className="text-center">
 						<div className="flex items-center justify-center gap-2 mb-2">
-							<h2
-								className="text-xl font-semibold"
-							>
+							<h2 className="text-xl font-semibold">
 								{t('common:receiver.title')}
 							</h2>
 							<Button

web-app/src/components/receiver/TicketInput.tsx

@@ -18,9 +18,7 @@ export function TicketInput({
 	return (
 		<div className="space-y-4">
 			<div>
-				<p
-					className="block text-sm font-medium mb-2"
-				>
+				<p className="block text-sm font-medium mb-2">
 					{t('common:receiver.saveToFolder')}
 				</p>
 				<InputGroup onClick={onBrowseFolder}>
@@ -37,9 +35,7 @@ export function TicketInput({
 			</div>
 
 			<div>
-				<p
-					className="block text-sm font-medium mb-2"
-				>
+				<p className="block text-sm font-medium mb-2">
 					{t('common:receiver.pasteTicket')}
 				</p>
 				<div className="flex gap-2 p-0.5">

web-app/src/components/sender/DragDrop.tsx

@@ -8,12 +8,14 @@ interface DragDropProps {
 	onFileSelect: (path: string) => void
 	selectedPath?: string | null
 	isLoading?: boolean
+	onClearSelection: () => void
 }
 
 export function DragDrop({
 	onFileSelect,
 	selectedPath,
 	isLoading,
+	onClearSelection,
 }: DragDropProps) {
 	const {
 		isDragActive,
@@ -42,6 +44,7 @@ export function DragDrop({
 				showFullPath={showFullPath}
 				isLoading={isLoading || false}
 				onToggleFullPath={toggleFullPath}
+				onClearSelection={onClearSelection}
 			/>
 
 			{!selectedPath && (

web-app/src/components/sender/Dropzone.tsx

@@ -1,4 +1,4 @@
-import { ChevronDown, ChevronRight, Loader2, Upload } from 'lucide-react'
+import { ChevronDown, ChevronRight, Loader2, Upload, X } from 'lucide-react'
 import { useTranslation } from '../../i18n/react-i18next-compat'
 import type { DropzoneProps } from '../../types/sender'
 import { FolderIcon, getFileIcon } from '../illustration'
@@ -10,6 +10,7 @@ export function Dropzone({
 	showFullPath,
 	isLoading,
 	onToggleFullPath,
+	onClearSelection,
 }: DropzoneProps) {
 	const { t } = useTranslation()
 	const getDropzoneStyles = () => {
@@ -102,8 +103,21 @@ export function Dropzone({
 	return (
 		<div
 			style={getDropzoneStyles()}
-			className="border-2 border-dashed rounded-lg p-16 text-center cursor-pointer transition-all duration-200 bg-accent text-accent-foreground flex items-center justify-center min-h-48 border-border"
+			className="relative border-2 border-dashed rounded-lg p-16 text-center cursor-pointer transition-all duration-200 bg-accent text-accent-foreground flex items-center justify-center min-h-48 border-border"
 		>
+			{selectedPath && !isLoading && (
+				<button
+					type="button"
+					onClick={(e) => {
+						e.stopPropagation()
+						onClearSelection()
+					}}
+					className="absolute top-3 right-3 p-1.5 rounded-md text-muted-foreground cursor-pointer"
+					aria-label="Clear selection"
+				>
+					<X className="h-6 w-6" />
+				</button>
+			)}
 			<div className="space-y-4 w-full">
 				<div className="flex justify-center">
 					{isLoading ? (

web-app/src/components/sender/Sender.tsx

@@ -39,6 +39,7 @@ export function Sender({ onTransferStateChange }: SenderProps) {
 		isBroadcastMode,
 		activeConnectionCount,
 		handleFileSelect,
+		clearSelectedPath,
 		startSharing,
 		stopSharing,
 		copyTicket,
@@ -91,9 +92,7 @@ export function Sender({ onTransferStateChange }: SenderProps) {
 	}, [viewState, isBroadcastMode, setIsBroadcastMode])
 
 	return (
-		<div
-			className="p-6 space-y-6 relative h-112 overflow-y-auto flex flex-col"
-		>
+		<div className="p-6 space-y-6 relative h-112 overflow-y-auto flex flex-col">
 			{/* IDLE state: Show file selection UI */}
 			{viewState === 'IDLE' && (
 				<>
@@ -110,6 +109,7 @@ export function Sender({ onTransferStateChange }: SenderProps) {
 							onFileSelect={handleFileSelect}
 							selectedPath={selectedPath}
 							isLoading={isLoading}
+							onClearSelection={clearSelectedPath}
 						/>
 
 						<ShareActionCard