From 60f6d716156da41dfbe911b51798b7aee2e0455a Mon Sep 17 00:00:00 2001
From: louispaulb <louis.targo@gmail.com>
Date: Sun, 19 Jul 2026 20:00:39 -0400
Subject: [PATCH] =?UTF-8?q?chore(ops):=20commit=20ThemeEditor.vue=20(extra?=
 =?UTF-8?q?it=20de=20l'ex-page=20/theme,=20consolid=C3=A9=20dans=20Param?=
 =?UTF-8?q?=C3=A8tres)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Composant autonome créé lors de la consolidation Thème→Paramètres (redirect routeur /theme→/settings déjà commité en
23f0f72). Fichier 100% mien, sans mélange → seul élément sûr à commiter de l'audit ; le point de montage (import dans
SettingsPage.vue) reste non commité car ce fichier est co-édité (voir rapport d'audit).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../ops/src/components/shared/ThemeEditor.vue | 78 +++++++++++++++++++
 1 file changed, 78 insertions(+)
 create mode 100644 apps/ops/src/components/shared/ThemeEditor.vue

diff --git a/apps/ops/src/components/shared/ThemeEditor.vue b/apps/ops/src/components/shared/ThemeEditor.vue
new file mode 100644
index 0000000..c03e3bf
--- /dev/null
+++ b/apps/ops/src/components/shared/ThemeEditor.vue
@@ -0,0 +1,78 @@
+<!--
+  ThemeEditor — éditeur de thème (palette --ops-*) EXTRAIT de l'ex-page /theme pour être monté DANS les Paramètres
+  (consolidation : une entrée de nav en moins). Logique dans composables/useTheme ; appliqué au boot par App.vue (indépendant).
+  Autonome : presets + groupes de couleurs + aperçu + Enregistrer/Réinitialiser (localStorage, ce navigateur).
+-->
+<template>
+  <div>
+    <div class="row items-center q-mb-sm">
+      <div class="text-caption text-grey-7 col">
+        Couleurs principales regroupées — modif en direct (aperçu immédiat) puis « Enregistrer ». Les éléments qui utilisent
+        les variables <code>--ops-*</code> suivent automatiquement. Enregistré dans ce navigateur.
+      </div>
+      <q-btn flat dense no-caps icon="restart_alt" label="Réinitialiser" @click="reset" class="q-mr-sm" />
+      <q-btn unelevated dense no-caps color="primary" icon="save" label="Enregistrer" @click="save" />
+    </div>
+
+    <div class="q-mb-md">
+      <div class="text-subtitle2 q-mb-xs">Palettes de départ</div>
+      <q-btn outline no-caps color="green-7" icon="eco" label="Moderne (défaut)" @click="applyPreset('default')" class="q-mr-sm q-mb-xs"><q-tooltip>Vert accessible + neutres — palette par défaut de la marque</q-tooltip></q-btn>
+      <q-btn outline no-caps color="green-6" icon="bolt" label="Vif (lime)" @click="applyPreset('vif')" class="q-mr-sm q-mb-xs"><q-tooltip>Vert lime éclatant — plus vibrant</q-tooltip></q-btn>
+      <q-btn outline no-caps color="primary" icon="palette" label="Classique (indigo)" @click="applyPreset('indigo')" class="q-mb-xs" />
+    </div>
+
+    <div class="row q-col-gutter-md">
+      <div v-for="g in groups" :key="g.title" class="col-12 col-md-6">
+        <q-card flat bordered>
+          <q-card-section>
+            <div class="text-subtitle1 text-weight-bold">{{ g.title }}</div>
+            <div v-if="g.hint" class="text-caption text-grey-6 q-mb-sm">{{ g.hint }}</div>
+            <div v-for="t in g.tokens" :key="t.var" class="row items-center q-py-xs no-wrap" style="gap:10px">
+              <input type="color" :value="work[t.var]" @input="e => set(t, e.target.value)"
+                style="width:40px;height:34px;border:1px solid var(--ops-border);border-radius:8px;padding:2px;background:none;cursor:pointer;flex:0 0 auto" />
+              <div class="col"><div class="text-body2">{{ t.label }}</div><code class="text-caption text-grey-6">{{ t.var }}</code></div>
+              <q-input dense outlined v-model="work[t.var]" @update:model-value="v => set(t, v)" style="width:104px;flex:0 0 auto" />
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+    <q-card flat bordered class="q-mt-md">
+      <q-card-section>
+        <div class="text-subtitle1 text-weight-bold q-mb-sm">Aperçu</div>
+        <div class="row items-center q-gutter-sm">
+          <q-btn unelevated color="primary" no-caps label="Bouton accent" />
+          <q-btn outline color="primary" no-caps label="Contour" />
+          <span class="ops-badge active">Actif</span>
+          <span class="ops-badge open">Ouvert</span>
+          <span class="ops-badge inactive">Inactif</span>
+          <q-badge color="positive" label="Succès" />
+          <q-badge color="warning" label="Attention" />
+          <q-badge color="negative" label="Erreur" />
+          <a href="#" @click.prevent style="color:var(--ops-accent);font-weight:600">Lien accent</a>
+        </div>
+        <div class="q-mt-sm" style="background:var(--ops-bg);border:1px solid var(--ops-border);border-radius:8px;padding:10px">
+          <span style="color:var(--ops-text)">Texte principal sur fond de page.</span>
+          <span style="color:var(--ops-text-muted)"> · texte discret</span>
+        </div>
+      </q-card-section>
+    </q-card>
+  </div>
+</template>
+
+<script setup>
+import { reactive, onMounted } from 'vue'
+import { useQuasar } from 'quasar'
+import { THEME_GROUPS, PRESETS, applyTheme, saveTheme, resetTheme, currentValues } from 'src/composables/useTheme'
+
+const $q = useQuasar()
+const groups = THEME_GROUPS
+const work = reactive({})
+onMounted(() => { Object.assign(work, currentValues()) })
+
+function set (t, val) { if (!val) return; work[t.var] = val; applyTheme({ ...work }) }
+function applyPreset (name) { Object.assign(work, PRESETS[name]); applyTheme({ ...work }) }
+function save () { saveTheme({ ...work }); $q.notify({ type: 'positive', message: 'Thème enregistré (ce navigateur)' }) }
+function reset () { resetTheme(); Object.assign(work, currentValues()); $q.notify({ type: 'info', message: 'Thème réinitialisé (défaut)' }) }
+</script>