@myrialabs/clopen 0.2.4 → 0.2.6

package/frontend/components/files/FileViewer.svelte

@@ -2,15 +2,16 @@
 	import type { FileNode } from '$shared/types/filesystem';
 	import LoadingSpinner from '../common/feedback/LoadingSpinner.svelte';
 	import MonacoEditor from '../common/editor/MonacoEditor.svelte';
+	import MediaPreview from '../common/media/MediaPreview.svelte';
 	import { themeStore } from '$frontend/stores/ui/theme.svelte';
 	import Icon from '$frontend/components/common/display/Icon.svelte';
 	import { getFileIcon } from '$frontend/utils/file-icon-mappings';
 	import { getFolderIcon } from '$frontend/utils/folder-icon-mappings';
-	import { onMount, onDestroy } from 'svelte';
+	import { isImageFile, isSvgFile, isPdfFile, isAudioFile, isVideoFile, isBinaryFile, isBinaryContent, isPreviewableFile, formatFileSize } from '$frontend/utils/file-type';
+	import { onMount } from 'svelte';
 	import type { IconName } from '$shared/types/ui/icons';
 	import type { editor } from 'monaco-editor';
 	import { debug } from '$shared/utils/logger';
-	import ws from '$frontend/utils/ws';
 
 	// Interface untuk MonacoEditor component
 	interface MonacoEditorComponent {
@@ -38,6 +39,8 @@
 		onToggleWordWrap?: () => void;
 		externallyChanged?: boolean;
 		onForceReload?: () => void;
+		isBinary?: boolean;
+		projectPath?: string;
 	}
 
 	const {
@@ -53,9 +56,20 @@
 		wordWrap = false,
 		onToggleWordWrap,
 		externallyChanged = false,
-		onForceReload
+		onForceReload,
+		isBinary = false,
+		projectPath = ''
 	}: Props = $props();
 
+	// Relative path for display
+	const displayPath = $derived.by(() => {
+		if (!file) return '';
+		if (projectPath && file.path.startsWith(projectPath)) {
+			return file.path.slice(projectPath.length).replace(/^[/\\]/, '');
+		}
+		return file.path;
+	});
+
 	// Theme state
 	const isDark = $derived(themeStore.isDark);
 	const monacoTheme = $derived(isDark ? 'vs-dark' : 'vs-light');
@@ -76,15 +90,9 @@
 	// Line highlighting state
 	let currentDecorations: string[] = $state([]);
 
-	// Image/binary blob URL state
-	let blobUrl = $state<string | null>(null);
-
 	// SVG view mode
 	let svgViewMode = $state<'visual' | 'code'>('visual');
 
-	// PDF blob URL
-	let pdfBlobUrl = $state<string | null>(null);
-
 	// Keyboard shortcut for save
 	onMount(() => {
 		function handleKeyDown(e: KeyboardEvent) {
@@ -103,61 +111,6 @@
 		};
 	});
 
-	// Cleanup blob URLs on destroy
-	onDestroy(() => {
-		if (blobUrl) {
-			URL.revokeObjectURL(blobUrl);
-		}
-		if (pdfBlobUrl) {
-			URL.revokeObjectURL(pdfBlobUrl);
-		}
-	});
-
-	// Load binary content (images, PDF) via WebSocket when file changes
-	$effect(() => {
-		if (file && (isImageFile(file.name) || isPdfFile(file.name))) {
-			loadBinaryContent();
-		} else {
-			// Cleanup if not binary
-			if (blobUrl) {
-				URL.revokeObjectURL(blobUrl);
-				blobUrl = null;
-			}
-			if (pdfBlobUrl) {
-				URL.revokeObjectURL(pdfBlobUrl);
-				pdfBlobUrl = null;
-			}
-		}
-	});
-
-	async function loadBinaryContent() {
-		if (!file) return;
-
-		try {
-			const response = await ws.http('files:read-content', { path: file.path });
-
-			if (response.content) {
-				// Decode base64 to binary
-				const binaryString = atob(response.content);
-				const bytes = new Uint8Array(binaryString.length);
-				for (let i = 0; i < binaryString.length; i++) {
-					bytes[i] = binaryString.charCodeAt(i);
-				}
-				const blob = new Blob([bytes], { type: response.contentType || 'application/octet-stream' });
-
-				if (isPdfFile(file.name)) {
-					if (pdfBlobUrl) URL.revokeObjectURL(pdfBlobUrl);
-					pdfBlobUrl = URL.createObjectURL(blob);
-				} else {
-					if (blobUrl) URL.revokeObjectURL(blobUrl);
-					blobUrl = URL.createObjectURL(blob);
-				}
-			}
-		} catch (error) {
-			debug.error('file', 'Failed to load binary content:', error);
-		}
-	}
-
 	// Reference content for change detection (use savedContent if provided)
 	const referenceContent = $derived(savedContentProp !== undefined ? savedContentProp : content);
 
@@ -298,38 +251,6 @@
 		return getFileIcon(fileName);
 	}
 
-	function isImageFile(fileName: string): boolean {
-		const extension = fileName.substring(fileName.lastIndexOf('.')).toLowerCase();
-		return ['.png', '.jpg', '.jpeg', '.gif', '.webp', '.ico', '.bmp'].includes(extension);
-	}
-
-	function isSvgFile(fileName: string): boolean {
-		return fileName.toLowerCase().endsWith('.svg');
-	}
-
-	function isPdfFile(fileName: string): boolean {
-		return fileName.toLowerCase().endsWith('.pdf');
-	}
-
-	function isBinaryFile(fileName: string): boolean {
-		const extension = fileName.substring(fileName.lastIndexOf('.')).toLowerCase();
-		return ['.doc', '.docx', '.xls', '.xlsx', '.zip', '.tar', '.gz', '.exe', '.dll',
-			'.ppt', '.pptx', '.7z', '.rar', '.bz2', '.woff', '.woff2', '.ttf', '.eot', '.otf',
-			'.mp3', '.mp4', '.wav', '.avi', '.mkv', '.flv', '.sqlite', '.db'].includes(extension);
-	}
-
-	function isVisualFile(fileName: string): boolean {
-		return isImageFile(fileName) || isSvgFile(fileName) || isPdfFile(fileName);
-	}
-
-	function formatFileSize(bytes: number): string {
-		if (bytes === 0) return '0 B';
-		const k = 1024;
-		const sizes = ['B', 'KB', 'MB', 'GB'];
-		const i = Math.floor(Math.log(bytes) / Math.log(k));
-		return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
-	}
-
 	function copyToClipboard() {
 		if (editableContent) {
 			navigator.clipboard.writeText(editableContent);
@@ -363,7 +284,7 @@
 						{file.name}
 					</h3>
 					<p class="text-xs text-slate-600 dark:text-slate-400 truncate mt-0.5">
-						<span class="hidden sm:inline">{file.path} • </span> {formatFileSize(file.size || 0)}
+						<span class="hidden sm:inline">{displayPath} • </span> {formatFileSize(file.size || 0)}
 					</p>
 				</div>
 			</div>
@@ -406,7 +327,7 @@
 				{/if}
 
 				<!-- Actions for editable files -->
-				{#if file && file.type === 'file' && !isImageFile(file.name) && !isBinaryFile(file.name) && !isPdfFile(file.name) && !(isSvgFile(file.name) && svgViewMode === 'visual')}
+				{#if file && file.type === 'file' && !isBinary && !isBinaryContent(content) && !isImageFile(file.name) && !isBinaryFile(file.name) && !isPdfFile(file.name) && !isAudioFile(file.name) && !isVideoFile(file.name) && !(isSvgFile(file.name) && svgViewMode === 'visual')}
 					<!-- Word Wrap toggle -->
 					{#if onToggleWordWrap}
 						<button
@@ -496,38 +417,9 @@
 						This is a directory. Select a file to view its content.
 					</p>
 				</div>
-			{:else if isImageFile(file.name)}
-				<!-- Image preview -->
-				<div class="flex items-center justify-center h-full p-4 overflow-hidden">
-					{#if blobUrl}
-						<img
-							src={blobUrl}
-							alt={file.name}
-							class="max-w-full max-h-full object-contain"
-						/>
-					{:else}
-						<LoadingSpinner size="lg" />
-					{/if}
-				</div>
 			{:else if isSvgFile(file.name)}
-				<!-- SVG: visual or code view -->
 				{#if svgViewMode === 'visual'}
-					<div class="flex items-center justify-center h-full p-4 overflow-auto bg-[url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Crect%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22%23f0f0f0%22%2F%3E%3Crect%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%23e0e0e0%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%2210%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%23e0e0e0%22%2F%3E%3C%2Fsvg%3E')]">
-						{#if blobUrl}
-							<img
-								src={blobUrl}
-								alt={file.name}
-								class="max-w-full max-h-full object-contain"
-							/>
-						{:else if content}
-							<!-- Render SVG from content directly -->
-							<div class="max-w-full max-h-full flex items-center justify-center">
-								{@html content}
-							</div>
-						{:else}
-							<LoadingSpinner size="lg" />
-						{/if}
-					</div>
+					<MediaPreview fileName={file.name} filePath={file.path} svgContent={content} />
 				{:else}
 					<!-- SVG code view (editable) -->
 					<div class="h-full flex flex-col bg-slate-50 dark:bg-slate-950">
@@ -561,22 +453,9 @@
 						{/if}
 					</div>
 				{/if}
-			{:else if isPdfFile(file.name)}
-				<!-- PDF preview -->
-				<div class="h-full w-full">
-					{#if pdfBlobUrl}
-						<iframe
-							src={pdfBlobUrl}
-							title={file.name}
-							class="w-full h-full border-0"
-						></iframe>
-					{:else}
-						<div class="flex items-center justify-center h-full">
-							<LoadingSpinner size="lg" />
-						</div>
-					{/if}
-				</div>
-			{:else if isBinaryFile(file.name)}
+			{:else if isPreviewableFile(file.name)}
+				<MediaPreview fileName={file.name} filePath={file.path} />
+			{:else if isBinary || isBinaryFile(file.name) || isBinaryContent(content)}
 				<div class="flex flex-col items-center justify-center h-full p-8">
 					<Icon name="lucide:file-text" class="w-16 h-16 text-slate-400 mb-4" />
 					<h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">

package/frontend/components/git/DiffViewer.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
-	import { onMount, onDestroy, untrack } from 'svelte';
+	import { onDestroy, untrack } from 'svelte';
 	import Icon from '$frontend/components/common/display/Icon.svelte';
+	import MediaPreview from '$frontend/components/common/media/MediaPreview.svelte';
 	import { getFileIcon } from '$frontend/utils/file-icon-mappings';
+	import { isPreviewableFile } from '$frontend/utils/file-type';
 	import { getGitStatusBadgeLabel, getGitStatusBadgeColor } from '$frontend/utils/git-status';
 	import { themeStore } from '$frontend/stores/ui/theme.svelte';
 	import { projectState } from '$frontend/stores/core/projects.svelte';
@@ -11,7 +13,8 @@
 	import type { GitFileDiff } from '$shared/types/git';
 	import type { IconName } from '$shared/types/ui/icons';
 	import { debug } from '$shared/utils/logger';
-	import ws from '$frontend/utils/ws';
+	import { requestRevealFile } from '$frontend/stores/core/files.svelte';
+	import { getVisiblePanels, workspaceState } from '$frontend/stores/ui/workspace.svelte';
 
 	interface Props {
 		diff: GitFileDiff | null;
@@ -32,91 +35,21 @@
 	let monacoInstance: typeof import('monaco-editor') | null = null;
 	const isDark = $derived(themeStore.isDark);
 
-	// Binary file preview state
-	let blobUrl = $state<string | null>(null);
-	let pdfBlobUrl = $state<string | null>(null);
-	let isBinaryLoading = $state(false);
-
-	// File type detection helpers
-	function isImageFile(fileName: string): boolean {
-		const ext = fileName.substring(fileName.lastIndexOf('.')).toLowerCase();
-		return ['.png', '.jpg', '.jpeg', '.gif', '.webp', '.ico', '.bmp'].includes(ext);
-	}
-
-	function isSvgFile(fileName: string): boolean {
-		return fileName.toLowerCase().endsWith('.svg');
-	}
-
-	function isPdfFile(fileName: string): boolean {
-		return fileName.toLowerCase().endsWith('.pdf');
-	}
-
-	function isPreviewableBinary(fileName: string): boolean {
-		return isImageFile(fileName) || isSvgFile(fileName) || isPdfFile(fileName);
-	}
-
-	// Load binary content for preview
-	async function loadBinaryPreview(filePath: string) {
+	// Derive absolute path for binary preview
+	const binaryPreviewPath = $derived.by(() => {
+		if (!activeDiff?.isBinary || activeDiff.status === 'D') return null;
+		const filePath = activeDiff.newPath || activeDiff.oldPath;
+		if (!filePath) return null;
+		const fileName = getFileName(filePath);
+		if (!isPreviewableFile(fileName)) return null;
 		const projectPath = projectState.currentProject?.path;
-		if (!projectPath) return;
-
-		const absolutePath = `${projectPath}/${filePath}`;
-		isBinaryLoading = true;
-
-		try {
-			const response = await ws.http('files:read-content', { path: absolutePath });
-
-			if (response.content) {
-				const binaryString = atob(response.content);
-				const bytes = new Uint8Array(binaryString.length);
-				for (let i = 0; i < binaryString.length; i++) {
-					bytes[i] = binaryString.charCodeAt(i);
-				}
-				const blob = new Blob([bytes], { type: response.contentType || 'application/octet-stream' });
-
-				if (isPdfFile(filePath)) {
-					if (pdfBlobUrl) URL.revokeObjectURL(pdfBlobUrl);
-					pdfBlobUrl = URL.createObjectURL(blob);
-				} else {
-					if (blobUrl) URL.revokeObjectURL(blobUrl);
-					blobUrl = URL.createObjectURL(blob);
-				}
-			}
-		} catch (err) {
-			debug.error('git', 'Failed to load binary preview:', err);
-		} finally {
-			isBinaryLoading = false;
-		}
-	}
-
-	function cleanupBlobUrls() {
-		if (blobUrl) {
-			URL.revokeObjectURL(blobUrl);
-			blobUrl = null;
-		}
-		if (pdfBlobUrl) {
-			URL.revokeObjectURL(pdfBlobUrl);
-			pdfBlobUrl = null;
-		}
-	}
+		if (!projectPath) return null;
+		return `${projectPath}/${filePath}`;
+	});
 
-	// Load binary preview when activeDiff changes to a binary file
-	$effect(() => {
-		const currentDiff = activeDiff;
-		if (currentDiff?.isBinary) {
-			const filePath = currentDiff.newPath || currentDiff.oldPath;
-			if (filePath && isPreviewableBinary(getFileName(filePath))) {
-				// Status 'D' means file is deleted, can't preview
-				if (currentDiff.status !== 'D') {
-					untrack(() => {
-						cleanupBlobUrls();
-						loadBinaryPreview(filePath);
-					});
-				}
-			}
-		} else {
-			untrack(() => cleanupBlobUrls());
-		}
+	const binaryFileName = $derived.by(() => {
+		if (!activeDiff) return '';
+		return getFileName(activeDiff.newPath || activeDiff.oldPath);
 	});
 
 	// Build full content from hunks
@@ -162,6 +95,19 @@
 		return path.split(/[\\/]/).pop() || path;
 	}
 
+	function openInFilesPanel() {
+		if (!activeDiff) return;
+		const visiblePanels = getVisiblePanels(workspaceState.layout);
+		if (!visiblePanels.includes('files')) return;
+		const basePath = projectState.currentProject?.path;
+		if (!basePath) return;
+		const relativePath = activeDiff.newPath || activeDiff.oldPath;
+		const separator = basePath.includes('\\') ? '\\' : '/';
+		requestRevealFile(`${basePath}${separator}${relativePath}`);
+	}
+
+	const isFilesPanelVisible = $derived(getVisiblePanels(workspaceState.layout).includes('files'));
+
 	async function initDiffEditor() {
 		if (!containerRef || !activeDiff) return;
 
@@ -273,7 +219,6 @@
 			diffEditorInstance.dispose();
 			diffEditorInstance = null;
 		}
-		cleanupBlobUrls();
 	});
 </script>
 
@@ -288,20 +233,30 @@
 			<span>Select a file to view diff</span>
 		</div>
 	{:else}
-		<!-- File header (like FileViewer) -->
+		<!-- File header -->
 		<div class="flex-shrink-0 flex items-center justify-between px-4 py-2.5 border-b border-slate-200 dark:border-slate-700">
-			<div class="flex items-center gap-2 min-w-0 flex-1">
-				<Icon name={getFileIcon(getFileName(activeDiff.newPath || activeDiff.oldPath)) as IconName} class="w-5 h-5 shrink-0" />
+			<div class="flex items-center gap-2 sm:gap-3 min-w-0 flex-1">
+				<Icon name={getFileIcon(getFileName(activeDiff.newPath || activeDiff.oldPath)) as IconName} class="w-7 h-7 shrink-0" />
 				<div class="min-w-0 flex-1">
-					<h3 class="text-xs font-bold text-slate-900 dark:text-slate-100 truncate">
+					<h3 class="text-xs sm:text-sm font-bold text-slate-900 dark:text-slate-100 truncate">
 						{getFileName(activeDiff.newPath || activeDiff.oldPath)}
 					</h3>
-					<p class="text-3xs text-slate-500 dark:text-slate-400 truncate mt-0.5">
+					<p class="text-xs text-slate-600 dark:text-slate-400 truncate mt-0.5">
 						{activeDiff.newPath || activeDiff.oldPath}
 					</p>
 				</div>
 			</div>
-			<div class="flex items-center gap-2 shrink-0">
+			<div class="flex items-center gap-1.5 sm:gap-1 flex-shrink-0">
+				{#if isFilesPanelVisible && activeDiff.status !== 'D'}
+					<button
+						type="button"
+						class="flex p-2 text-slate-600 dark:text-slate-400 hover:text-violet-600 dark:hover:text-violet-400 hover:bg-violet-50 dark:hover:bg-violet-900/30 rounded-lg transition-all duration-200 cursor-pointer"
+						onclick={openInFilesPanel}
+						title="Open in Files panel"
+					>
+						<Icon name="lucide:file-symlink" class="w-4 h-4" />
+					</button>
+				{/if}
 				<span class="text-3xs font-bold px-1.5 py-0.5 rounded {getGitStatusBadgeColor(activeDiff.status)}">
 					{getGitStatusBadgeLabel(activeDiff.status)}
 				</span>
@@ -309,7 +264,6 @@
 		</div>
 
 		{#if activeDiff.isBinary}
-			{@const fileName = getFileName(activeDiff.newPath || activeDiff.oldPath)}
 			{@const isDeleted = activeDiff.status === 'D'}
 			{#if isDeleted}
 				<!-- Deleted binary file -->
@@ -320,43 +274,9 @@
 						This binary file has been deleted and cannot be previewed.
 					</p>
 				</div>
-			{:else if isImageFile(fileName) || isSvgFile(fileName)}
-				<!-- Image / SVG preview -->
-				<div class="flex-1 flex items-center justify-center p-4 overflow-hidden bg-[url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Crect%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22%23f0f0f0%22%2F%3E%3Crect%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%23e0e0e0%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%2210%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%23e0e0e0%22%2F%3E%3C%2Fsvg%3E')]">
-					{#if isBinaryLoading}
-						<div class="w-5 h-5 border-2 border-slate-200 dark:border-slate-700 border-t-violet-600 rounded-full animate-spin"></div>
-					{:else if blobUrl}
-						<img
-							src={blobUrl}
-							alt={fileName}
-							class="max-w-full max-h-full object-contain"
-						/>
-					{:else}
-						<div class="flex flex-col items-center gap-2 text-slate-500 text-xs">
-							<Icon name="lucide:image-off" class="w-8 h-8 opacity-40" />
-							<span>Failed to load preview</span>
-						</div>
-					{/if}
-				</div>
-			{:else if isPdfFile(fileName)}
-				<!-- PDF preview -->
-				<div class="flex-1 h-full w-full">
-					{#if isBinaryLoading}
-						<div class="flex items-center justify-center h-full">
-							<div class="w-5 h-5 border-2 border-slate-200 dark:border-slate-700 border-t-violet-600 rounded-full animate-spin"></div>
-						</div>
-					{:else if pdfBlobUrl}
-						<iframe
-							src={pdfBlobUrl}
-							title={fileName}
-							class="w-full h-full border-0"
-						></iframe>
-					{:else}
-						<div class="flex flex-col items-center justify-center h-full gap-2 text-slate-500 text-xs">
-							<Icon name="lucide:file-x" class="w-8 h-8 opacity-40" />
-							<span>Failed to load PDF preview</span>
-						</div>
-					{/if}
+			{:else if binaryPreviewPath}
+				<div class="flex-1 overflow-hidden">
+					<MediaPreview fileName={binaryFileName} filePath={binaryPreviewPath} />
 				</div>
 			{:else}
 				<!-- Generic binary file -->

package/frontend/components/git/FileChangeItem.svelte

@@ -4,6 +4,9 @@
 	import { getGitStatusLabel, getGitStatusColor } from '$frontend/utils/git-status';
 	import type { GitFileChange } from '$shared/types/git';
 	import type { IconName } from '$shared/types/ui/icons';
+	import { requestRevealFile } from '$frontend/stores/core/files.svelte';
+	import { getVisiblePanels, workspaceState } from '$frontend/stores/ui/workspace.svelte';
+	import { projectState } from '$frontend/stores/core/projects.svelte';
 
 	interface Props {
 		file: GitFileChange;
@@ -28,6 +31,15 @@
 		return parts.join('/');
 	});
 	const fileIcon = $derived(getFileIcon(fileName) as IconName);
+	const isFilesPanelVisible = $derived(getVisiblePanels(workspaceState.layout).includes('files'));
+
+	function openInFilesPanel(e: MouseEvent) {
+		e.stopPropagation();
+		const basePath = projectState.currentProject?.path;
+		if (!basePath) return;
+		const separator = basePath.includes('\\') ? '\\' : '/';
+		requestRevealFile(`${basePath}${separator}${file.path}`);
+	}
 </script>
 
 <div
@@ -57,6 +69,16 @@
 
 	<!-- Actions - always visible -->
 	<div class="flex items-center gap-0.5 shrink-0">
+		{#if isFilesPanelVisible && statusCode !== 'D'}
+			<button
+				type="button"
+				class="flex items-center justify-center w-6 h-6 rounded-md text-slate-400 hover:bg-violet-500/10 hover:text-violet-500 transition-colors bg-transparent border-none cursor-pointer"
+				onclick={openInFilesPanel}
+				title="Open in Files panel"
+			>
+				<Icon name="lucide:file-symlink" class="w-3.5 h-3.5" />
+			</button>
+		{/if}
 		{#if section === 'staged'}
 			<button
 				type="button"

package/frontend/components/preview/browser/BrowserPreview.svelte

@@ -160,6 +160,7 @@
 		if (currentProjectId && currentProjectId !== previousProjectId && previousProjectId !== '') {
 			debug.log('preview', `🔄 Project changed: ${previousProjectId} → ${currentProjectId}`);
 			previousProjectId = currentProjectId;
+			sessionsRecovered = false; // Reset for new project (enables empty tab creation if needed)
 			coordinator.switchProject();
 		}
 	});