From b35bee4fe36ced927db010e56e82f24ff6c95eb8 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Fri, 28 Nov 2025 11:25:37 +0100
Subject: [PATCH] feat: replace checkbox with toggle switch in StylesheetViewer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace the checkbox input with a proper toggle switch component for
mode édition control. The toggle provides better visual feedback with
an animated switch and color transitions (gray when off, blue when on).

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/StylesheetViewer.vue | 102 +++++++++++++++++++++++++++-
 1 file changed, 99 insertions(+), 3 deletions(-)

diff --git a/src/components/StylesheetViewer.vue b/src/components/StylesheetViewer.vue
index 4e1bcd0..5782ddc 100644
--- a/src/components/StylesheetViewer.vue
+++ b/src/components/StylesheetViewer.vue
@@ -1,7 +1,18 @@
 <template>
   <aside id="stylesheet-viewer">
-    <h3>Stylesheet</h3>
+    <div class="header">
+      <h3>Stylesheet</h3>
+      <label class="toggle">
+        <span class="toggle-label">Mode édition</span>
+        <input type="checkbox" v-model="isEditable" />
+        <span class="toggle-switch"></span>
+      </label>
+    </div>
+
+    <pre v-if="!isEditable" class="readonly"><code class="hljs language-css" v-html="highlightedCss"></code></pre>
+
     <textarea
+      v-else
       :value="stylesheetStore.content"
       @input="handleInput"
       spellcheck="false"
@@ -10,11 +21,23 @@
 </template>
 
 <script setup>
+import { ref, computed } from 'vue';
 import { useStylesheetStore } from '../stores/stylesheet';
+import hljs from 'highlight.js/lib/core';
+import css from 'highlight.js/lib/languages/css';
+import 'highlight.js/styles/atom-one-dark.css';
+
+hljs.registerLanguage('css', css);
 
 const stylesheetStore = useStylesheetStore();
+const isEditable = ref(false);
 let debounceTimer = null;
 
+const highlightedCss = computed(() => {
+  if (!stylesheetStore.content) return '';
+  return hljs.highlight(stylesheetStore.content, { language: 'css' }).value;
+});
+
 const handleInput = (event) => {
   const newContent = event.target.value;
 
@@ -42,14 +65,87 @@ const handleInput = (event) => {
   color: #fff;
 }
 
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
 h3 {
-  margin-top: 0;
+  margin: 0;
   color: #fff;
 }
 
+.toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  font-size: 0.875rem;
+  color: #abb2bf;
+  position: relative;
+}
+
+.toggle-label {
+  user-select: none;
+}
+
+.toggle input[type="checkbox"] {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.toggle-switch {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 20px;
+  background: #4a5568;
+  border-radius: 20px;
+  transition: background 0.2s ease;
+}
+
+.toggle-switch::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  background: white;
+  border-radius: 50%;
+  transition: transform 0.2s ease;
+}
+
+.toggle input[type="checkbox"]:checked + .toggle-switch {
+  background: #61afef;
+}
+
+.toggle input[type="checkbox"]:checked + .toggle-switch::after {
+  transform: translateX(20px);
+}
+
+.readonly {
+  margin: 0;
+  height: calc(100vh - 5rem);
+  overflow-y: auto;
+  padding: 0.5rem;
+  background: #1e1e1e;
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+.readonly code {
+  background: transparent;
+}
+
 textarea {
   width: 100%;
-  height: calc(100vh - 4rem);
+  height: calc(100vh - 5rem);
   background: #1e1e1e;
   color: #abb2bf;
   border: none;