enh: show extracted file content

src/lib/components/common/FileItem.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
 	import { createEventDispatcher, getContext } from 'svelte';
+	import { formatFileSize } from '$lib/utils';
+
+	import FileItemModal from './FileItemModal.svelte';
 
 	const i18n = getContext('i18n');
 	const dispatch = createEventDispatcher();
@@ -11,30 +14,26 @@
 	export let dismissible = false;
 	export let status = 'processed';
 
+	export let file = null;
+	export let enableModal = true;
+
 	export let name: string;
 	export let type: string;
 	export let size: number;
 
-	const formatSize = (size) => {
-		if (size == null) return 'Unknown size';
-		if (typeof size !== 'number' || size < 0) return 'Invalid size';
-		if (size === 0) return '0 B';
-		const units = ['B', 'KB', 'MB', 'GB', 'TB'];
-		let unitIndex = 0;
-
-		while (size >= 1024 && unitIndex < units.length - 1) {
-			size /= 1024;
-			unitIndex++;
-		}
-		return `${size.toFixed(1)} ${units[unitIndex]}`;
-	};
+	let showModal = false;
 </script>
 
+{#if file}
+	<FileItemModal bind:show={showModal} {file} />
+{/if}
+
 <div class="relative group">
 	<button
 		class="h-14 {className} flex items-center space-x-3 {colorClassName} rounded-xl border border-gray-100 dark:border-gray-800 text-left"
 		type="button"
 		on:click={async () => {
+			showModal = !showModal;
 			dispatch('click');
 		}}
 	>
@@ -111,7 +110,7 @@
 					<span class=" capitalize">{type}</span>
 				{/if}
 				{#if size}
-					<span class="capitalize">{formatSize(size)}</span>
+					<span class="capitalize">{formatFileSize(size)}</span>
 				{/if}
 			</div>
 		</div>

src/lib/components/common/FileItemModal.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import { getContext, onMount } from 'svelte';
+	import { formatFileSize, getLineCount } from '$lib/utils';
+
+	const i18n = getContext('i18n');
+
+	import Modal from './Modal.svelte';
+	import XMark from '../icons/XMark.svelte';
+	import Info from '../icons/Info.svelte';
+
+	export let file;
+	export let show = false;
+
+	onMount(() => {
+		console.log(file);
+	});
+</script>
+
+<Modal bind:show size="md">
+	<div class="font-primary px-6 py-6 w-full flex flex-col justify-center dark:text-gray-400">
+		<div class="flex items-start justify-between pb-2">
+			<div>
+				<div class=" font-medium text-lg line-clamp-1 dark:text-gray-100">
+					{file?.name ?? 'File'}
+				</div>
+
+				<div>
+					<div class=" flex text-sm gap-1 text-gray-500">
+						{#if file.size}
+							<div class="capitalize">{formatFileSize(file.size)}</div>
+							•
+						{/if}
+
+						{#if file.content}
+							<div class="capitalize">{getLineCount(file.content)} extracted lines</div>
+
+							<div class="flex items-center gap-1">
+								<Info />
+
+								Formatting may be inconsistent from source.
+							</div>
+						{/if}
+					</div>
+				</div>
+			</div>
+
+			<div>
+				<button
+					on:click={() => {
+						show = false;
+					}}
+				>
+					<XMark />
+				</button>
+			</div>
+		</div>
+
+		<div class="max-h-96 overflow-scroll scrollbar-hidden text-xs whitespace-pre-wrap">
+			{file?.content ?? 'No content'}
+		</div>
+	</div>
+</Modal>