refac

src/lib/components/chat/FileNav.svelte

@@ -750,6 +750,34 @@
 					</Tooltip>
 				{:else if isHtml}
 					<!-- HTML preview mode: no edit/save buttons -->
+				{:else if isMarkdown && showRaw}
+					<Tooltip content={$i18n.t('Save')}>
+						<button
+							class="shrink-0 p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400"
+							on:click={() => filePreviewRef?.saveCodeFile()}
+							disabled={saving}
+							aria-label={$i18n.t('Save')}
+						>
+							{#if saving}
+								<Spinner className="size-3.5" />
+							{:else}
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									viewBox="0 0 20 20"
+									fill="currentColor"
+									class="size-3.5"
+								>
+									<path
+										fill-rule="evenodd"
+										d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
+										clip-rule="evenodd"
+									/>
+								</svg>
+							{/if}
+						</button>
+					</Tooltip>
+				{:else if isMarkdown}
+					<!-- Markdown preview mode: no edit/save buttons -->
 				{:else if isCode}
 					<Tooltip content={$i18n.t('Save')}>
 						<button

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

@@ -244,6 +244,12 @@
 	export let showRaw = false;
 	$: selectedFile, (showRaw = false); // reset to preview mode when switching files
 
+	// Auto-switch to raw/editor mode for empty previewable files so the user
+	// can start editing immediately instead of seeing a blank preview.
+	$: if (fileContent !== null && fileContent.trim() === '' && (isMarkdown || isCsv || isJson)) {
+		showRaw = true;
+	}
+
 	let pzInstance: PanZoom | null = null;
 
 	const initImagePanzoom = (node: HTMLElement) => {
@@ -424,6 +430,15 @@
 			<div bind:this={markdownEl} class="prose dark:prose-invert max-w-full text-sm p-3">
 				{@html renderedHtml}
 			</div>
+		{:else if isMarkdown && showRaw}
+			<div class="h-full">
+				<FileCodeEditor
+					bind:this={fileCodeEditorRef}
+					value={fileContent ?? ''}
+					filePath={selectedFile}
+					{onSave}
+				/>
+			</div>
 		{:else if isCsv && !showRaw && csvRows.length > 0}
 			<div class="absolute inset-0 overflow-auto px-3 pb-3">
 				<table class="csv-table text-xs font-mono border-collapse">