refactor: enhance FileUpload component with improved error handling and UI updates

- Refactored the FileUpload component to improve code readability and maintainability.
- Enhanced error handling during file upload and removal processes, providing clearer feedback to users.
- Updated UI elements for better alignment and consistency, including file type previews and action buttons.
- Integrated the resolve function for help URLs to ensure proper linking.
- Streamlined file validation logic for size and type checks, improving user experience.

apps/web/src/lib/components/FileUpload.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { useConvexClient } from "convex-svelte";
+	import { useConvexClient } from 'convex-svelte';
+	import { resolve } from '$app/paths';
 	import {
 		ExternalLink,
 		FileText,
@@ -7,8 +8,8 @@
 		Upload,
 		Trash2,
 		Eye,
-    RefreshCw,
+		RefreshCw
-  } from "lucide-svelte";
+	} from 'lucide-svelte';
 
 	interface Props {
 		label: string;
@@ -27,48 +28,47 @@
 		disabled = false,
 		required = false,
 		onUpload,
-    onRemove,
+		onRemove
 	}: Props = $props();
 
-  const client = useConvexClient();
+	const client = useConvexClient() as unknown as {
+		storage: {
+			getUrl: (id: string) => Promise<string | null>;
+		};
+	};
 
 	let fileInput: HTMLInputElement;
 	let uploading = $state(false);
 	let error = $state<string | null>(null);
-  let fileName = $state<string>("");
+	let fileName = $state<string>('');
-  let fileType = $state<string>("");
+	let fileType = $state<string>('');
 	let previewUrl = $state<string | null>(null);
 	let fileUrl = $state<string | null>(null);
 
 	const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
-  const ALLOWED_TYPES = [
+	const ALLOWED_TYPES = ['application/pdf', 'image/jpeg', 'image/jpg', 'image/png'];
-    "application/pdf",
-    "image/jpeg",
-    "image/jpg",
-    "image/png",
-  ];
 
 	// Buscar URL do arquivo quando houver um storageId
 	$effect(() => {
 		if (value && !fileName) {
 			// Tem storageId mas não é um upload recente
-			loadExistingFile(value);
+			void loadExistingFile(value);
 		}
 	});
 
 	async function loadExistingFile(storageId: string) {
 		try {
-			const url = await client.storage.getUrl(storageId as any);
+			const url = await client.storage.getUrl(storageId);
 			if (url) {
-  async function handleFileSelect(event: Event) {
+				fileUrl = url;
-    const target = event.target as HTMLInputElement;
+
-    const file = target.files?.[0];
 				// Detectar tipo pelo URL ou assumir PDF
 				if (url.includes('.pdf') || url.includes('application/pdf')) {
 					fileType = 'application/pdf';
 				} else {
 					fileType = 'image/jpeg';
-					previewUrl = url; // Para imagens, a URL serve como preview
+					// Para imagens, a URL serve como preview
+					previewUrl = url;
 				}
 			}
 		} catch (err) {
@@ -76,19 +76,27 @@
 		}
 	}
 
+	async function handleFileSelect(event: Event) {
+		const target = event.target as HTMLInputElement;
+		const file = target.files?.[0];
+
+		if (!file) {
+			return;
+		}
+
 		error = null;
 
 		// Validate file size
 		if (file.size > MAX_FILE_SIZE) {
-      error = "Arquivo muito grande. Tamanho máximo: 10MB";
+			error = 'Arquivo muito grande. Tamanho máximo: 10MB';
-      target.value = "";
+			target.value = '';
 			return;
 		}
 
 		// Validate file type
 		if (!ALLOWED_TYPES.includes(file.type)) {
-      error = "Tipo de arquivo não permitido. Use PDF ou imagens (JPG, PNG)";
+			error = 'Tipo de arquivo não permitido. Use PDF ou imagens (JPG, PNG)';
-      target.value = "";
+			target.value = '';
 			return;
 		}
 
@@ -98,38 +106,52 @@
 			fileType = file.type;
 
 			// Create preview for images
-      if (file.type.startsWith("image/")) {
+			if (file.type.startsWith('image/')) {
 				const reader = new FileReader();
 				reader.onload = (e) => {
-          previewUrl = e.target?.result as string;
+					const result = e.target?.result;
+					if (typeof result === 'string') {
+						previewUrl = result;
+					}
 				};
 				reader.readAsDataURL(file);
+			} else {
+				previewUrl = null;
 			}
 
 			await onUpload(file);
-    } catch (err: any) {
+		} catch (err: unknown) {
-      error = err?.message || "Erro ao fazer upload do arquivo";
+			if (err instanceof Error) {
+				error = err.message || 'Erro ao fazer upload do arquivo';
+			} else {
+				error = 'Erro ao fazer upload do arquivo';
+			}
 			previewUrl = null;
 		} finally {
 			uploading = false;
-      target.value = "";
+			target.value = '';
 		}
 	}
 
 	async function handleRemove() {
-    if (!confirm("Tem certeza que deseja remover este arquivo?")) {
+		if (!confirm('Tem certeza que deseja remover este arquivo?')) {
 			return;
 		}
 
 		try {
 			uploading = true;
 			await onRemove();
-      fileName = "";
+			fileName = '';
-      fileType = "";
+			fileType = '';
 			previewUrl = null;
 			fileUrl = null;
-    } catch (err: any) {
+			error = null;
-      error = err?.message || "Erro ao remover arquivo";
+		} catch (err: unknown) {
+			if (err instanceof Error) {
+				error = err.message || 'Erro ao remover arquivo';
+			} else {
+				error = 'Erro ao remover arquivo';
+			}
 		} finally {
 			uploading = false;
 		}
@@ -137,7 +159,7 @@
 
 	function handleView() {
 		if (fileUrl) {
-      window.open(fileUrl, "_blank");
+			window.open(fileUrl, '_blank');
 		}
 	}
 
@@ -148,18 +170,15 @@
 
 <div class="form-control w-full">
 	<label class="label" for="file-upload-input">
-    <span class="label-text font-medium flex items-center gap-2">
+		<span class="label-text flex items-center gap-2 font-medium">
 			{label}
 			{#if required}
 				<span class="text-error">*</span>
 			{/if}
 			{#if helpUrl}
-        <div
+				<div class="tooltip tooltip-right" data-tip="Clique para acessar o link">
-          class="tooltip tooltip-right"
-          data-tip="Clique para acessar o link"
-        >
 					<a
-            href={helpUrl}
+						href={resolve(helpUrl)}
 						target="_blank"
 						rel="noopener noreferrer"
 						class="text-primary hover:text-primary-focus transition-colors"
@@ -194,17 +213,17 @@
 					</div>
 				{:else}
 					<div class="bg-success/10 flex h-12 w-12 items-center justify-center rounded">
-						<File class="text-success h-6 w-6" strokeWidth={2} />
+						<FileIcon class="text-success h-6 w-6" strokeWidth={2} />
 					</div>
 				{/if}
 			</div>
 
 			<!-- File info -->
-      <div class="flex-1 min-w-0">
+			<div class="min-w-0 flex-1">
-        <p class="text-sm font-medium truncate">
+				<p class="truncate text-sm font-medium">
-          {fileName || "Arquivo anexado"}
+					{fileName || 'Arquivo anexado'}
 				</p>
-        <p class="text-xs text-base-content/60">
+				<p class="text-base-content/60 text-xs">
 					{#if uploading}
 						Carregando...
 					{:else}