From daa813f51150422d62cfadd656a341bb07b1d330 Mon Sep 17 00:00:00 2001
From: a2nr <anggoro.dwi.nr@gmail.com>
Date: Fri, 21 Aug 2026 23:46:15 +0700
Subject: [PATCH] feat(content-editor): remove Preview tab, load
 Circuit/Velxio/Flowchart components

- Remove Preview tab (preview already shown in left content panel)
- Circuit tab loads actual CircuitEditor component with extracted initial_circuit
- Velxio tab loads velxio iframe with embed mode
- Flowchart tab loads flowchart iframe
- C/Python tabs remain as read-only CodeEditor with extracted code
---
 .../src/routes/teacher/content/+page.svelte   | 92 +++++++++++++++----
 1 file changed, 73 insertions(+), 19 deletions(-)

diff --git a/frontend/src/routes/teacher/content/+page.svelte b/frontend/src/routes/teacher/content/+page.svelte
index c1886cb..5b9f625 100644
--- a/frontend/src/routes/teacher/content/+page.svelte
+++ b/frontend/src/routes/teacher/content/+page.svelte
@@ -3,6 +3,7 @@
 	import { authIsTeacher } from '$stores/auth';
 	import { createFloatingPanel } from '$actions/floatingPanel.svelte';
 	import CodeEditor from '$components/CodeEditor.svelte';
+	import CircuitEditor from '$components/CircuitEditor.svelte';
 	import ContentFileTree from '$components/ContentFileTree.svelte';
 	import LessonContentView from '$components/LessonContentView.svelte';
 	import QuizPreviewReadonly from '$components/QuizPreviewReadonly.svelte';
@@ -14,6 +15,7 @@
 	const float = createFloatingPanel();
 
 	let editorRef = $state<any>(null);
+	let circuitEditorRef = $state<any>(null);
 
 	// Mobile: show tree or editor
 	let mobileShowTree = $state(true);
@@ -84,7 +86,6 @@
 	// Tab label map for chrome tabs
 	let allTabs = $derived([
 		{ id: 'editor', label: 'Editor' },
-		{ id: 'preview', label: 'Preview', show: !!mgr.previewHtml },
 		...dynamicTabs,
 		{ id: 'exercise', label: 'Exercise', show: hasExercise },
 		{ id: 'quiz', label: 'Quiz', show: hasQuiz },
@@ -525,21 +526,6 @@
 							{/if}
 						</div>
 
-						<!-- Preview Tab -->
-						<div class="tab-panel" class:tab-hidden={mgr.activeTab !== 'preview'}>
-							{#if mgr.previewLoading}
-								<div class="tab-empty">Memuat preview...</div>
-							{:else if mgr.previewHtml}
-								<div class="tab-content prose">
-									{@html mgr.previewHtml}
-								</div>
-							{:else}
-								<div class="tab-empty">
-									<p>Buka file materi dan edit untuk melihat preview.</p>
-								</div>
-							{/if}
-						</div>
-
 						<!-- Exercise Tab -->
 						<div class="tab-panel" class:tab-hidden={mgr.activeTab !== 'exercise'}>
 							{#if mgr.previewExerciseHtml}
@@ -565,10 +551,38 @@
 							{/if}
 						</div>
 
-						<!-- Dynamic code tabs (C, Python, Circuit, etc.) -->
+						<!-- Dynamic tabs (C, Python, Circuit, Velxio, Flowchart) -->
 						{#each dynamicTabs as dynTab}
 							<div class="tab-panel" class:tab-hidden={mgr.activeTab !== dynTab.id}>
-								{#if extractedCodes[dynTab.id]}
+								{#if dynTab.id === 'circuit'}
+									<div class="circuit-tab-content">
+										{#if extractedCodes.circuit}
+										<CircuitEditor
+											bind:this={circuitEditorRef}
+											initialCircuit={extractedCodes.circuit}
+										/>
+									{:else}
+										<div class="tab-empty"><p>Belum ada data circuit.</p></div>
+									{/if}
+								</div>
+								{:else if dynTab.id === 'velxio'}
+									<div class="velxio-tab-content">
+										<iframe
+											class="velxio-iframe"
+											src="/velxio/editor?embed=true&hideEditor=true&lockComponents=true"
+											allow="cross-origin-isolated; fullscreen"
+											allowfullscreen
+										></iframe>
+									</div>
+								{:else if dynTab.id === 'flowchart'}
+									<div class="flowchart-tab-content">
+										<iframe
+											class="flowchart-iframe"
+											src="/flowchart/?iframe=true"
+											title="Flowchart Editor"
+										></iframe>
+									</div>
+								{:else if extractedCodes[dynTab.id]}
 									<div class="code-tab-content">
 										<CodeEditor
 											code={extractedCodes[dynTab.id]}
@@ -578,7 +592,7 @@
 									</div>
 								{:else}
 									<div class="tab-empty">
-										<p>Belum ada kode {dynTab.label} di konten ini.</p>
+										<p>Belum ada konten {dynTab.label}.</p>
 									</div>
 								{/if}
 							</div>
@@ -966,6 +980,46 @@
 		height: 100%;
 	}
 
+	/* Circuit tab */
+	.circuit-tab-content {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+		min-height: 0;
+	}
+	.circuit-tab-content :global(.panel) {
+		flex: 1;
+	}
+
+	/* Velxio / Arduino tab */
+	.velxio-tab-content {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+		min-height: 0;
+	}
+	.velxio-iframe {
+		width: 100%;
+		flex: 1;
+		border: none;
+	}
+
+	/* Flowchart tab */
+	.flowchart-tab-content {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+		min-height: 0;
+	}
+	.flowchart-iframe {
+		width: 100%;
+		flex: 1;
+		border: none;
+	}
+
 	/* Asset Preview */
 	.asset-preview {
 		display: flex;