From 7ed57d000be299a191007cb34490d6846a3d4572 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Thu, 4 Dec 2025 13:34:33 +0100
Subject: [PATCH] refactor: integrate StylesheetViewer into EditorPanel code
 tab
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Move StylesheetViewer from standalone fixed panel to integrated component
within EditorPanel's "code" tab. Maintains full functionality including:
- Bidirectional sync with Pinia store and PagedJS preview
- Toggle between read/edit modes
- CSS syntax highlighting
- Debounced updates

Changes:
- EditorPanel.vue: Import and render StylesheetViewer in code tab
- EditorPanel.vue: Add flexbox layout for proper height management
- StylesheetViewer.vue: Convert from fixed positioning to flex container
- App.vue: Remove standalone StylesheetViewer component

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/App.vue                           | 21 +++++-----
 src/components/StylesheetViewer.vue   | 19 ++++-----
 src/components/editor/EditorPanel.vue | 55 +++++++++++++++------------
 3 files changed, 49 insertions(+), 46 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index b5d616a..89efbfc 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,6 @@
 <script setup>
 import PagedJsWrapper from './components/PagedJsWrapper.vue';
 import EditorPanel from './components/editor/EditorPanel.vue';
-import StylesheetViewer from './components/StylesheetViewer.vue';
 import ElementPopup from './components/ElementPopup.vue';
 import { onMounted, ref, watch } from 'vue';
 import { useStylesheetStore } from './stores/stylesheet';
@@ -42,7 +41,10 @@ const renderPreview = async (shouldReloadFromFile = false) => {
   `;
 
   iframe.onload = () => {
-    iframe.contentDocument.addEventListener('click', elementPopup.value.handleIframeClick);
+    iframe.contentDocument.addEventListener(
+      'click',
+      elementPopup.value.handleIframeClick
+    );
 
     setTimeout(() => {
       const scrollHeight = iframe.contentDocument.documentElement.scrollHeight;
@@ -55,9 +57,12 @@ const renderPreview = async (shouldReloadFromFile = false) => {
   };
 };
 
-watch(() => stylesheetStore.content, () => {
-  renderPreview();
-});
+watch(
+  () => stylesheetStore.content,
+  () => {
+    renderPreview();
+  }
+);
 
 onMounted(() => renderPreview(true));
 </script>
@@ -71,8 +76,6 @@ onMounted(() => renderPreview(true));
 
   <iframe ref="previewFrame" id="preview-frame"></iframe>
 
-  <StylesheetViewer :stylesheet="stylesheetStore.content" />
-
   <ElementPopup ref="elementPopup" :iframeRef="previewFrame" />
 </template>
 
@@ -80,8 +83,8 @@ onMounted(() => renderPreview(true));
 #preview-frame {
   position: fixed;
   top: 0;
-  left: 250px;
-  width: calc(100% - 600px);
+  left: 0;
+  width: 100vw;
   height: 100vh;
   border: none;
 }
diff --git a/src/components/StylesheetViewer.vue b/src/components/StylesheetViewer.vue
index 5782ddc..012f251 100644
--- a/src/components/StylesheetViewer.vue
+++ b/src/components/StylesheetViewer.vue
@@ -1,5 +1,5 @@
 <template>
-  <aside id="stylesheet-viewer">
+  <div id="stylesheet-viewer">
     <div class="header">
       <h3>Stylesheet</h3>
       <label class="toggle">
@@ -17,7 +17,7 @@
       @input="handleInput"
       spellcheck="false"
     ></textarea>
-  </aside>
+  </div>
 </template>
 
 <script setup>
@@ -53,14 +53,9 @@ const handleInput = (event) => {
 
 <style scoped>
 #stylesheet-viewer {
-  position: fixed;
-  top: 0;
-  right: 0;
-  width: 350px;
-  height: 100vh;
-  padding: 1rem;
-  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
-  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
   background: #282c34;
   color: #fff;
 }
@@ -130,7 +125,7 @@ h3 {
 
 .readonly {
   margin: 0;
-  height: calc(100vh - 5rem);
+  flex: 1;
   overflow-y: auto;
   padding: 0.5rem;
   background: #1e1e1e;
@@ -145,7 +140,7 @@ h3 {
 
 textarea {
   width: 100%;
-  height: calc(100vh - 5rem);
+  flex: 1;
   background: #1e1e1e;
   color: #abb2bf;
   border: none;
diff --git a/src/components/editor/EditorPanel.vue b/src/components/editor/EditorPanel.vue
index 4207ce3..76bd422 100644
--- a/src/components/editor/EditorPanel.vue
+++ b/src/components/editor/EditorPanel.vue
@@ -3,6 +3,7 @@
     <nav class="tabs">
       <button
         type="button"
+        class="tab"
         :class="{ active: activeTab === 'document' }"
         @click="activeTab = 'document'"
       >
@@ -10,6 +11,7 @@
       </button>
       <button
         type="button"
+        class="tab"
         :class="{ active: activeTab === 'code' }"
         @click="activeTab = 'code'"
       >
@@ -17,6 +19,7 @@
       </button>
       <button
         type="button"
+        class="tab"
         :class="{ active: activeTab === 'contenu' }"
         @click="activeTab = 'contenu'"
       >
@@ -31,7 +34,7 @@
       </div>
 
       <div v-else-if="activeTab === 'code'" class="tab-panel">
-        <!-- Code tab content -->
+        <StylesheetViewer />
       </div>
 
       <div v-else-if="activeTab === 'contenu'" class="tab-panel">
@@ -45,40 +48,42 @@
 import { ref } from 'vue';
 import PageSettings from './PageSettings.vue';
 import TextSettings from './TextSettings.vue';
+import StylesheetViewer from '../StylesheetViewer.vue';
 
 // Tab management
 const activeTab = ref('document');
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 #editor-panel {
+  padding: 1rem;
   position: fixed;
   top: 0;
   left: 0;
-  width: 250px;
+  width: 25rem;
   height: 100vh;
-  background: #f5f5f5;
-  padding: 1rem;
-  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+  z-index: 2;
+
+  background-color: var(--color-panel-bg);
+  box-shadow: -5px 0px 12px;
+}
+
+nav {
+  margin-bottom: 2rem;
+
+  display: flex;
+  gap: 0.5rem;
+}
+
+.tab-content {
+  flex: 1;
+  overflow: hidden;
+}
+
+.tab-panel {
+  height: 100%;
   overflow-y: auto;
 }
-
-h3 {
-  margin-top: 0;
-}
-
-.control {
-  margin-bottom: 1rem;
-}
-
-.control label {
-  display: block;
-  margin-bottom: 0.25rem;
-  font-size: 0.875rem;
-}
-
-.control input {
-  width: 80px;
-  padding: 0.25rem;
-}
 </style>