refac

src/lib/components/chat/FileNav/FileEntryRow.svelte

@@ -2,6 +2,7 @@
 	import { getContext } from 'svelte';
 	import { DropdownMenu } from 'bits-ui';
 	import { flyAndScale } from '$lib/utils/transitions';
+	import { formatFileSize } from '$lib/utils';
 	import type { FileEntry } from '$lib/apis/terminal';
 	import Folder from '../../icons/Folder.svelte';
 	import EllipsisHorizontal from '../../icons/EllipsisHorizontal.svelte';
@@ -17,8 +18,6 @@
 	export let onOpen: (entry: FileEntry) => void = () => {};
 	export let onDownload: (path: string) => void = () => {};
 	export let onDelete: (path: string, name: string) => void = () => {};
-
-	export let formatSize: (bytes?: number) => string = () => '';
 </script>
 
 <li class="group">
@@ -62,7 +61,7 @@
 				{entry.name}
 			</span>
 			{#if entry.type === 'file' && entry.size !== undefined}
-				<span class="text-xs text-gray-400 shrink-0">{formatSize(entry.size)}</span>
+				<span class="text-xs text-gray-400 shrink-0">{formatFileSize(entry.size)}</span>
 			{/if}
 		</button>
 

src/lib/components/chat/FileNav/FilePreview.svelte

@@ -19,15 +19,16 @@
 	export let onDownload: () => void = () => {};
 
 	const MD_EXTS = new Set(['md', 'markdown', 'mdx']);
-	$: isMarkdown = MD_EXTS.has(selectedFile?.split('.').pop()?.toLowerCase() ?? '');
+	const getExt = (path: string | null) => path?.split('.').pop()?.toLowerCase() ?? '';
+
+	$: isMarkdown = MD_EXTS.has(getExt(selectedFile));
 	$: renderedHtml =
 		isMarkdown && fileContent
 			? DOMPurify.sanitize(marked.parse(fileContent, { async: false }) as string)
 			: '';
 
 	let showRaw = false;
-	// Reset to preview mode when switching files
-	$: if (selectedFile) showRaw = false;
+	$: selectedFile, (showRaw = false); // reset to preview mode when switching files
 
 	let pzInstance: PanZoom | null = null;