@consilioweb/payload-support 0.12.0 → 0.13.0

package/dist/styles/TicketDetail.module.scss

@@ -71,16 +71,19 @@
   }
 }
 
-// detail__title (maquette) : h1 20px/1.3, 600
+// detail__title (maquette) : h1 20px/1.3, 600, text-wrap: pretty
+// Multi-ligne autorisee, on tronque a 2 lignes via line-clamp pour eviter de pousser le header
 .ticketSubject {
   font-size: 20px;
   font-weight: 600;
   line-height: 1.3;
   color: var(--theme-text);
   margin: 0;
+  text-wrap: pretty;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
   overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 .topBarRight {
@@ -198,12 +201,12 @@
   align-items: center;
 }
 
-// dl/dt/dd (kv maquette) — grid 100px 1fr, gap 8px/12px
+// dl/dt/dd (kv maquette) — grid 100px 1fr, label aligné gauche, value étirée
 .sideField {
-  display: flex;
-  justify-content: space-between;
+  display: grid;
+  grid-template-columns: 100px 1fr;
   align-items: center;
-  gap: 8px;
+  gap: 8px 12px;
   padding: 4px 0;
   font-size: 13px;
   line-height: 1.5;
@@ -219,11 +222,14 @@
   display: flex;
   align-items: center;
   gap: 8px;
+  min-width: 0;
 }
 
 // Inline select for sidebar editable fields (kv__edit maquette)
+// Left-aligned dans la grid (la valeur s'aligne au début de la colonne 2)
 .sideSelect {
   padding: 2px 8px;
+  margin: -2px -8px -2px 0;
   border-radius: 4px;
   border: 1px solid transparent;
   background: transparent;
@@ -232,8 +238,10 @@
   color: var(--theme-text);
   cursor: pointer;
   transition: background 80ms ease;
-  text-align: right;
-  max-width: 160px;
+  text-align: left;
+  max-width: 100%;
+  width: 100%;
+  justify-self: start;
 
   &:hover { background: var(--theme-elevation-100); }
   &:focus {
@@ -687,6 +695,18 @@
     cursor: pointer;
     font-weight: 500;
     user-select: none;
+    transition: color 120ms ease;
+  }
+
+  // Note interne (1er label) : warning quand cochee
+  // Notifier (2e label) : info quand cochee
+  // Approximation via :has() — supportee Chrome/Safari/FF >= 121
+  > label:nth-of-type(1):has(input:checked) {
+    color: var(--theme-warning-500, #c97a0a);
+    input[type="checkbox"]:checked { background: var(--theme-warning-500, #c97a0a); }
+  }
+  > label:nth-of-type(2):has(input:checked) {
+    color: var(--theme-info-500, #2a6bd8);
   }
 
   // Toggle switch (toggle__sw maquette) : 28×16, info-500 quand checked
@@ -838,23 +858,49 @@
   &.timerActive { color: var(--theme-error-500, #c4392c); }
 }
 
-// Bouton Go / Pause / Save : 30px height, micro typo 600
+// Bouton Go / Pause / Save (tt__go maquette) :
+//  - "paused" (Go) : bg theme-text, color theme-bg (carré sombre, contrasté)
+//  - "running" (Pause) : bg error-500, color white (stop visible)
+//  - "save" (💾) : ghost neutre theme-bg + border elevation-200
+// Approximation : on neutralise par défaut, et les classes appellantes appliquent le style.
 .timerBtn {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   gap: 6px;
   height: 30px;
   padding: 0 12px;
   border-radius: 4px;
-  border: 1px solid var(--theme-elevation-200, var(--theme-input-border));
-  background: var(--theme-bg);
+  border: 1px solid var(--theme-text);
+  background: var(--theme-text);
+  color: var(--theme-bg, #fff);
   font-size: 12px;
-  font-weight: 500;
-  line-height: 1;
-  color: var(--theme-text);
+  font-weight: 600;
   cursor: pointer;
-  transition: background 80ms ease;
-  &:hover { background: var(--theme-elevation-100); }
+  transition: background 80ms ease, border-color 80ms ease;
+  white-space: nowrap;
+  &:hover { background: var(--theme-elevation-800); border-color: var(--theme-elevation-800); }
+  &:disabled { opacity: 0.5; cursor: not-allowed; }
+}
+
+// Variante running (tt__go--running maquette) : bg error-500 quand le timer tourne
+.timerBtnRunning {
+  background: var(--theme-error-500, #c4392c);
+  border-color: var(--theme-error-500, #c4392c);
+  color: #fff;
+  &:hover {
+    background: color-mix(in srgb, var(--theme-error-500, #c4392c) 85%, black);
+    border-color: color-mix(in srgb, var(--theme-error-500, #c4392c) 85%, black);
+  }
+}
+
+// Variante "ghost" pour les boutons secondaires (Save / + Ajouter) : neutre, evite le carre noir partout
+.timerBtnGhost {
+  background: var(--theme-bg);
+  border-color: var(--theme-elevation-200, var(--theme-input-border));
+  color: var(--theme-text);
+  font-weight: 500;
+  &:hover { background: var(--theme-elevation-100); border-color: var(--theme-elevation-200, var(--theme-input-border)); }
 }
 
 // Activity in sidebar

package/dist/views/TicketDetailView/client.cjs

@@ -1257,8 +1257,8 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
                 ":",
                 String(timerSeconds % 60).padStart(2, "0")
               ] }),
-              !timerRunning ? /* @__PURE__ */ jsxRuntime.jsx("button", { className: s__default.default.timerBtn, onClick: () => setTimerRunning(true), "aria-label": "D\xE9marrer le timer", children: timerSeconds > 0 ? "\u25B6" : "\u25B6 Go" }) : /* @__PURE__ */ jsxRuntime.jsx("button", { className: s__default.default.timerBtn, onClick: () => setTimerRunning(false), "aria-label": "Mettre en pause le timer", children: "\u23F8 Pause" }),
-              timerSeconds >= 60 && !timerRunning && /* @__PURE__ */ jsxRuntime.jsxs("button", { className: s__default.default.timerBtn, onClick: () => {
+              !timerRunning ? /* @__PURE__ */ jsxRuntime.jsx("button", { className: s__default.default.timerBtn, onClick: () => setTimerRunning(true), "aria-label": "D\xE9marrer le timer", children: timerSeconds > 0 ? "\u25B6" : "\u25B6 Go" }) : /* @__PURE__ */ jsxRuntime.jsx("button", { className: `${s__default.default.timerBtn} ${s__default.default.timerBtnRunning}`, onClick: () => setTimerRunning(false), "aria-label": "Mettre en pause le timer", children: "\u23F8 Pause" }),
+              timerSeconds >= 60 && !timerRunning && /* @__PURE__ */ jsxRuntime.jsxs("button", { className: `${s__default.default.timerBtn} ${s__default.default.timerBtnGhost}`, onClick: () => {
                 handleTimerSave();
                 localStorage.removeItem(`timer-sec-${ticketId}`);
                 localStorage.removeItem(`timer-run-${ticketId}`);
@@ -1271,7 +1271,7 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.timerBar, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.timerBarFill, style: { width: `${Math.min(100, (totalMin + Math.floor(timerSeconds / 60)) / 120 * 100)}%` } }) }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 6, marginTop: 8, alignItems: "center" }, children: [
               /* @__PURE__ */ jsxRuntime.jsx("input", { type: "number", min: "1", placeholder: "min", style: { width: 60, padding: "4px 8px", borderRadius: 6, border: "1px solid var(--theme-elevation-200)", fontSize: 12, color: "var(--theme-text)", background: "var(--theme-elevation-0)" }, id: "manual-time-input" }),
-              /* @__PURE__ */ jsxRuntime.jsx("button", { className: s__default.default.timerBtn, onClick: async () => {
+              /* @__PURE__ */ jsxRuntime.jsx("button", { className: `${s__default.default.timerBtn} ${s__default.default.timerBtnGhost}`, onClick: async () => {
                 const input = document.getElementById("manual-time-input");
                 const mins = Number(input?.value);
                 if (!mins || mins < 1 || !ticketId) return;

package/dist/views/TicketDetailView/client.js

@@ -1250,8 +1250,8 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
                 ":",
                 String(timerSeconds % 60).padStart(2, "0")
               ] }),
-              !timerRunning ? /* @__PURE__ */ jsx("button", { className: s.timerBtn, onClick: () => setTimerRunning(true), "aria-label": "D\xE9marrer le timer", children: timerSeconds > 0 ? "\u25B6" : "\u25B6 Go" }) : /* @__PURE__ */ jsx("button", { className: s.timerBtn, onClick: () => setTimerRunning(false), "aria-label": "Mettre en pause le timer", children: "\u23F8 Pause" }),
-              timerSeconds >= 60 && !timerRunning && /* @__PURE__ */ jsxs("button", { className: s.timerBtn, onClick: () => {
+              !timerRunning ? /* @__PURE__ */ jsx("button", { className: s.timerBtn, onClick: () => setTimerRunning(true), "aria-label": "D\xE9marrer le timer", children: timerSeconds > 0 ? "\u25B6" : "\u25B6 Go" }) : /* @__PURE__ */ jsx("button", { className: `${s.timerBtn} ${s.timerBtnRunning}`, onClick: () => setTimerRunning(false), "aria-label": "Mettre en pause le timer", children: "\u23F8 Pause" }),
+              timerSeconds >= 60 && !timerRunning && /* @__PURE__ */ jsxs("button", { className: `${s.timerBtn} ${s.timerBtnGhost}`, onClick: () => {
                 handleTimerSave();
                 localStorage.removeItem(`timer-sec-${ticketId}`);
                 localStorage.removeItem(`timer-run-${ticketId}`);
@@ -1264,7 +1264,7 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
             /* @__PURE__ */ jsx("div", { className: s.timerBar, "aria-hidden": true, children: /* @__PURE__ */ jsx("div", { className: s.timerBarFill, style: { width: `${Math.min(100, (totalMin + Math.floor(timerSeconds / 60)) / 120 * 100)}%` } }) }),
             /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6, marginTop: 8, alignItems: "center" }, children: [
               /* @__PURE__ */ jsx("input", { type: "number", min: "1", placeholder: "min", style: { width: 60, padding: "4px 8px", borderRadius: 6, border: "1px solid var(--theme-elevation-200)", fontSize: 12, color: "var(--theme-text)", background: "var(--theme-elevation-0)" }, id: "manual-time-input" }),
-              /* @__PURE__ */ jsx("button", { className: s.timerBtn, onClick: async () => {
+              /* @__PURE__ */ jsx("button", { className: `${s.timerBtn} ${s.timerBtnGhost}`, onClick: async () => {
                 const input = document.getElementById("manual-time-input");
                 const mins = Number(input?.value);
                 if (!mins || mins < 1 || !ticketId) return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consilioweb/payload-support",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "Payload CMS plugin — professional support & ticketing system with AI, SLA, time tracking, live chat, and more",
   "type": "module",
   "main": "./dist/index.cjs",

package/src/styles/TicketDetail.module.scss

@@ -71,16 +71,19 @@
   }
 }
 
-// detail__title (maquette) : h1 20px/1.3, 600
+// detail__title (maquette) : h1 20px/1.3, 600, text-wrap: pretty
+// Multi-ligne autorisee, on tronque a 2 lignes via line-clamp pour eviter de pousser le header
 .ticketSubject {
   font-size: 20px;
   font-weight: 600;
   line-height: 1.3;
   color: var(--theme-text);
   margin: 0;
+  text-wrap: pretty;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
   overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 .topBarRight {
@@ -198,12 +201,12 @@
   align-items: center;
 }
 
-// dl/dt/dd (kv maquette) — grid 100px 1fr, gap 8px/12px
+// dl/dt/dd (kv maquette) — grid 100px 1fr, label aligné gauche, value étirée
 .sideField {
-  display: flex;
-  justify-content: space-between;
+  display: grid;
+  grid-template-columns: 100px 1fr;
   align-items: center;
-  gap: 8px;
+  gap: 8px 12px;
   padding: 4px 0;
   font-size: 13px;
   line-height: 1.5;
@@ -219,11 +222,14 @@
   display: flex;
   align-items: center;
   gap: 8px;
+  min-width: 0;
 }
 
 // Inline select for sidebar editable fields (kv__edit maquette)
+// Left-aligned dans la grid (la valeur s'aligne au début de la colonne 2)
 .sideSelect {
   padding: 2px 8px;
+  margin: -2px -8px -2px 0;
   border-radius: 4px;
   border: 1px solid transparent;
   background: transparent;
@@ -232,8 +238,10 @@
   color: var(--theme-text);
   cursor: pointer;
   transition: background 80ms ease;
-  text-align: right;
-  max-width: 160px;
+  text-align: left;
+  max-width: 100%;
+  width: 100%;
+  justify-self: start;
 
   &:hover { background: var(--theme-elevation-100); }
   &:focus {
@@ -687,6 +695,18 @@
     cursor: pointer;
     font-weight: 500;
     user-select: none;
+    transition: color 120ms ease;
+  }
+
+  // Note interne (1er label) : warning quand cochee
+  // Notifier (2e label) : info quand cochee
+  // Approximation via :has() — supportee Chrome/Safari/FF >= 121
+  > label:nth-of-type(1):has(input:checked) {
+    color: var(--theme-warning-500, #c97a0a);
+    input[type="checkbox"]:checked { background: var(--theme-warning-500, #c97a0a); }
+  }
+  > label:nth-of-type(2):has(input:checked) {
+    color: var(--theme-info-500, #2a6bd8);
   }
 
   // Toggle switch (toggle__sw maquette) : 28×16, info-500 quand checked
@@ -838,23 +858,49 @@
   &.timerActive { color: var(--theme-error-500, #c4392c); }
 }
 
-// Bouton Go / Pause / Save : 30px height, micro typo 600
+// Bouton Go / Pause / Save (tt__go maquette) :
+//  - "paused" (Go) : bg theme-text, color theme-bg (carré sombre, contrasté)
+//  - "running" (Pause) : bg error-500, color white (stop visible)
+//  - "save" (💾) : ghost neutre theme-bg + border elevation-200
+// Approximation : on neutralise par défaut, et les classes appellantes appliquent le style.
 .timerBtn {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   gap: 6px;
   height: 30px;
   padding: 0 12px;
   border-radius: 4px;
-  border: 1px solid var(--theme-elevation-200, var(--theme-input-border));
-  background: var(--theme-bg);
+  border: 1px solid var(--theme-text);
+  background: var(--theme-text);
+  color: var(--theme-bg, #fff);
   font-size: 12px;
-  font-weight: 500;
-  line-height: 1;
-  color: var(--theme-text);
+  font-weight: 600;
   cursor: pointer;
-  transition: background 80ms ease;
-  &:hover { background: var(--theme-elevation-100); }
+  transition: background 80ms ease, border-color 80ms ease;
+  white-space: nowrap;
+  &:hover { background: var(--theme-elevation-800); border-color: var(--theme-elevation-800); }
+  &:disabled { opacity: 0.5; cursor: not-allowed; }
+}
+
+// Variante running (tt__go--running maquette) : bg error-500 quand le timer tourne
+.timerBtnRunning {
+  background: var(--theme-error-500, #c4392c);
+  border-color: var(--theme-error-500, #c4392c);
+  color: #fff;
+  &:hover {
+    background: color-mix(in srgb, var(--theme-error-500, #c4392c) 85%, black);
+    border-color: color-mix(in srgb, var(--theme-error-500, #c4392c) 85%, black);
+  }
+}
+
+// Variante "ghost" pour les boutons secondaires (Save / + Ajouter) : neutre, evite le carre noir partout
+.timerBtnGhost {
+  background: var(--theme-bg);
+  border-color: var(--theme-elevation-200, var(--theme-input-border));
+  color: var(--theme-text);
+  font-weight: 500;
+  &:hover { background: var(--theme-elevation-100); border-color: var(--theme-elevation-200, var(--theme-input-border)); }
 }
 
 // Activity in sidebar

package/src/views/TicketDetailView/client.tsx

@@ -1202,10 +1202,10 @@ const [clientTyping, setClientTyping] = useState(false)
                 {!timerRunning ? (
                   <button className={s.timerBtn} onClick={() => setTimerRunning(true)} aria-label="Démarrer le timer">{timerSeconds > 0 ? '▶' : '▶ Go'}</button>
                 ) : (
-                  <button className={s.timerBtn} onClick={() => setTimerRunning(false)} aria-label="Mettre en pause le timer">⏸ Pause</button>
+                  <button className={`${s.timerBtn} ${s.timerBtnRunning}`} onClick={() => setTimerRunning(false)} aria-label="Mettre en pause le timer">⏸ Pause</button>
                 )}
                 {timerSeconds >= 60 && !timerRunning && (
-                  <button className={s.timerBtn} onClick={() => { handleTimerSave(); localStorage.removeItem(`timer-sec-${ticketId}`); localStorage.removeItem(`timer-run-${ticketId}`) }} aria-label="Sauvegarder le temps">💾 {Math.round(timerSeconds / 60)}m</button>
+                  <button className={`${s.timerBtn} ${s.timerBtnGhost}`} onClick={() => { handleTimerSave(); localStorage.removeItem(`timer-sec-${ticketId}`); localStorage.removeItem(`timer-run-${ticketId}`) }} aria-label="Sauvegarder le temps">💾 {Math.round(timerSeconds / 60)}m</button>
                 )}
               </div>
               {/* Progress bar (tt__bar maquette) — full = 120 min reference */}
@@ -1215,7 +1215,7 @@ const [clientTyping, setClientTyping] = useState(false)
               {/* Manual time entry */}
               <div style={{ display: 'flex', gap: 6, marginTop: 8, alignItems: 'center' }}>
                 <input type="number" min="1" placeholder="min" style={{ width: 60, padding: '4px 8px', borderRadius: 6, border: '1px solid var(--theme-elevation-200)', fontSize: 12, color: 'var(--theme-text)', background: 'var(--theme-elevation-0)' }} id="manual-time-input" />
-                <button className={s.timerBtn} onClick={async () => {
+                <button className={`${s.timerBtn} ${s.timerBtnGhost}`} onClick={async () => {
                   const input = document.getElementById('manual-time-input') as HTMLInputElement
                   const mins = Number(input?.value)
                   if (!mins || mins < 1 || !ticketId) return