webui: address review feedback from allozaur

Author: ServeurpersoCom

tools/server/webui/src/lib/components/app/misc/CodePreviewDialog.svelte

@@ -2,10 +2,12 @@
 	import { Dialog as DialogPrimitive } from 'bits-ui';
 	import XIcon from '@lucide/svelte/icons/x';
 
+	import type { PreviewLanguage } from '$lib/enums/files';
+
 	interface Props {
 		open: boolean;
 		code: string;
-		language: string;
+		language: PreviewLanguage;
 		onOpenChange?: (open: boolean) => void;
 	}
 

tools/server/webui/src/lib/components/app/misc/MarkdownContent.svelte

@@ -14,6 +14,7 @@
 	import githubDarkCss from 'highlight.js/styles/github-dark.css?inline';
 	import githubLightCss from 'highlight.js/styles/github.css?inline';
 	import { mode } from 'mode-watcher';
+	import { PREVIEW_DIALOG_DEFAULTS, PreviewLanguage } from '$lib/enums/files';
 	import { remarkLiteralHtml } from '$lib/markdown/literal-html';
 	import CodePreviewDialog from './CodePreviewDialog.svelte';
 
@@ -26,11 +27,10 @@
 
 	let containerRef = $state<HTMLDivElement>();
 	let processedHtml = $state('');
-	let previewDialogOpen = $state(false);
-	let previewCode = $state('');
-	let previewLanguage = $state('text');
 
-	const previewableLanguages = new Set(['html', 'htm', 'javascript', 'js']);
+	let previewDialogOpen = $state<boolean>(PREVIEW_DIALOG_DEFAULTS.dialogOpen);
+	let previewCode = $state<string>(PREVIEW_DIALOG_DEFAULTS.code);
+	let previewLanguage = $state<PreviewLanguage>(PREVIEW_DIALOG_DEFAULTS.language);
 
 	function loadHighlightTheme(isDark: boolean) {
 		if (!browser) return;
@@ -124,10 +124,17 @@
 			const rawCode = codeElement.textContent || '';
 			const codeId = `code-${Date.now()}-${index}`;
 			const normalizedLanguage = language.toLowerCase();
+			let previewLanguage: PreviewLanguage = PREVIEW_DIALOG_DEFAULTS.language;
+
+			if (normalizedLanguage === PreviewLanguage.HTML) {
+				previewLanguage = PreviewLanguage.HTML;
+			} else if (normalizedLanguage === PreviewLanguage.JAVASCRIPT) {
+				previewLanguage = PreviewLanguage.JAVASCRIPT;
+			}
 
 			codeElement.setAttribute('data-code-id', codeId);
 			codeElement.setAttribute('data-raw-code', rawCode);
-			codeElement.setAttribute('data-language', normalizedLanguage);
+			codeElement.setAttribute('data-language', previewLanguage);
 
 			const wrapper = document.createElement('div');
 			wrapper.className = 'code-block-wrapper';
@@ -154,7 +161,7 @@
 
 			actions.appendChild(copyButton);
 
-			if (previewableLanguages.has(normalizedLanguage)) {
+			if (previewLanguage !== PREVIEW_DIALOG_DEFAULTS.language) {
 				const previewButton = document.createElement('button');
 				previewButton.className = 'preview-code-btn';
 				previewButton.setAttribute('data-code-id', codeId);
@@ -207,7 +214,12 @@
 		}
 	}
 
-	function getCodeInfoFromTarget(target: HTMLElement) {
+	type CodeInfo = {
+		rawCode: string;
+		language: PreviewLanguage;
+	};
+
+	function getCodeInfoFromTarget(target: HTMLElement): CodeInfo | null {
 		const wrapper = target.closest('.code-block-wrapper');
 
 		if (!wrapper) {
@@ -229,7 +241,8 @@
 			return null;
 		}
 
-		const language = codeElement.getAttribute('data-language') || 'text';
+		const languageAttribute = codeElement.getAttribute('data-language') as PreviewLanguage | null;
+		const language = languageAttribute ?? PREVIEW_DIALOG_DEFAULTS.language;
 
 		return { rawCode, language };
 	}
@@ -303,8 +316,8 @@
 		previewDialogOpen = open;
 
 		if (!open) {
-			previewCode = '';
-			previewLanguage = 'text';
+			previewCode = PREVIEW_DIALOG_DEFAULTS.code;
+			previewLanguage = PREVIEW_DIALOG_DEFAULTS.language;
 		}
 	}
 

tools/server/webui/src/lib/enums/files.ts

@@ -182,3 +182,16 @@ export enum MimeTypeText {
 	LATEX = 'text/x-tex',
 	BIBTEX = 'text/x-bibtex'
 }
+
+// Preview dialog enums and helpers
+export enum PreviewLanguage {
+	TEXT = 'text',
+	HTML = 'html',
+	JAVASCRIPT = 'javascript'
+}
+
+export const PREVIEW_DIALOG_DEFAULTS = {
+	dialogOpen: false,
+	code: '',
+	language: PreviewLanguage.TEXT
+} as const;