From 70f76633a9fd3e1d5e8428383b8ec95a44075ab9 Mon Sep 17 00:00:00 2001
From: Md Bayazid  Bostame <bostame@bostame-2349.local>
Date: Sat, 28 Mar 2026 12:37:54 +0100
Subject: [PATCH] snapshot: unify shared admin editor components

---
 .../static/workflows/css/design_system.css    | 86 +++++++++++++++++++
 .../workflows/branding_settings.html          |  2 +-
 .../workflows/integrations_setup.html         |  6 +-
 .../templates/workflows/intro_builder.html    | 22 ++---
 .../templates/workflows/trial_management.html | 10 +--
 5 files changed, 106 insertions(+), 20 deletions(-)

diff --git a/backend/workflows/static/workflows/css/design_system.css b/backend/workflows/static/workflows/css/design_system.css
index eb8028c..ab73c31 100644
--- a/backend/workflows/static/workflows/css/design_system.css
+++ b/backend/workflows/static/workflows/css/design_system.css
@@ -165,6 +165,26 @@ body {
   gap: 14px;
 }
 
+.app-editor-shell {
+  display: grid;
+  grid-template-columns: 260px minmax(0, 1fr);
+  gap: 18px;
+  align-items: start;
+}
+
+.app-editor-sidebar {
+  position: sticky;
+  top: 18px;
+  display: grid;
+  gap: 14px;
+}
+
+.app-editor-main {
+  min-width: 0;
+  display: grid;
+  gap: 14px;
+}
+
 .app-sidebar-card {
   padding: 16px;
   border: 1px solid rgba(216, 226, 239, 0.94);
@@ -252,6 +272,32 @@ body {
   gap: 12px;
 }
 
+.app-stat-grid {
+  display: grid;
+  gap: 12px;
+}
+
+.app-stat-card {
+  display: grid;
+  gap: 2px;
+  padding: 14px;
+  border: 1px solid rgba(216, 226, 239, 0.94);
+  border-radius: 16px;
+  background: linear-gradient(180deg, #fbfdff, #ffffff);
+}
+
+.app-stat-card strong {
+  font-size: 22px;
+  line-height: 1;
+  color: #163566;
+}
+
+.app-stat-card span {
+  color: var(--ds-muted);
+  font-size: 12px;
+  font-weight: 700;
+}
+
 .app-side-stat {
   display: grid;
   gap: 2px;
@@ -409,6 +455,33 @@ table th {
   flex-wrap: wrap;
 }
 
+.app-action-row {
+  margin-top: 12px;
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.app-action-row.is-sticky {
+  position: sticky;
+  bottom: 14px;
+  z-index: 4;
+  padding-top: 12px;
+  border-top: 1px solid #dbe5f2;
+  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.98));
+}
+
+.app-note-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  margin-top: 18px;
+}
+
 .app-module-link,
 .tab {
   display: inline-flex;
@@ -499,6 +572,19 @@ table th {
   .page-stack {
     padding: 18px;
   }
+
+  .app-editor-shell {
+    grid-template-columns: 1fr;
+  }
+
+  .app-editor-sidebar {
+    position: static;
+  }
+
+  .app-action-row {
+    align-items: stretch;
+    flex-direction: column;
+  }
 }
 
 @media (max-width: 760px) {
diff --git a/backend/workflows/templates/workflows/branding_settings.html b/backend/workflows/templates/workflows/branding_settings.html
index 2c541fa..ba937bb 100644
--- a/backend/workflows/templates/workflows/branding_settings.html
+++ b/backend/workflows/templates/workflows/branding_settings.html
@@ -190,7 +190,7 @@
     </section>
     {% endfor %}
 
-    <div class="toolbar" style="margin-top:1.25rem;">
+    <div class="toolbar app-note-row">
       <div class="hint">{% trans "Die aktuell gesetzte Deployment-Branding bleibt erhalten, bis hier Werte geändert oder Dateien hochgeladen werden." %}</div>
     </div>
   </div>
diff --git a/backend/workflows/templates/workflows/integrations_setup.html b/backend/workflows/templates/workflows/integrations_setup.html
index 853f75a..b82a0e6 100644
--- a/backend/workflows/templates/workflows/integrations_setup.html
+++ b/backend/workflows/templates/workflows/integrations_setup.html
@@ -59,7 +59,7 @@
             <input id="sync_interval" name="sync_interval_seconds" type="number" min="10" step="1" value="{{ workflow_config.sync_interval_seconds }}" />
           </div>
         </div>
-        <div class="actions">
+        <div class="actions app-action-row">
           <button class="btn btn-primary" type="submit">{% trans "Nextcloud speichern" %}</button>
           <button class="btn btn-secondary" type="submit" formaction="/test/nextcloud/" data-progress-title="{% trans 'Nextcloud-Test läuft' %}" data-progress-copy="{% trans 'Bitte warten. Verbindung und Upload in das konfigurierte Ziel werden geprüft.' %}">{% trans "Nextcloud-Test starten" %}</button>
         </div>
@@ -121,7 +121,7 @@
           <label><input type="checkbox" name="smtp_use_ssl" {% if workflow_config.smtp_use_ssl %}checked{% endif %} /> {% trans "SMTP SSL" %}</label>
           <label><input type="checkbox" name="smtp_use_tls" {% if workflow_config.smtp_use_tls %}checked{% endif %} /> {% trans "SMTP TLS" %}</label>
         </div>
-        <div class="actions">
+        <div class="actions app-action-row">
           <button class="btn btn-primary" type="submit">{% trans "Mail speichern" %}</button>
           <button class="btn btn-secondary" type="submit" formaction="/test/email/" data-progress-title="{% trans 'SMTP-Test läuft' %}" data-progress-copy="{% trans 'Bitte warten. SMTP-Verbindung und Testversand werden geprüft.' %}">{% trans "SMTP-Test starten" %}</button>
         </div>
@@ -196,7 +196,7 @@
           </div>
         {% endfor %}
 
-        <div class="actions">
+        <div class="actions app-action-row">
           <button class="btn btn-primary" type="submit">{% trans "E-Mail Routing & Vorlagen speichern" %}</button>
         </div>
       </form>
diff --git a/backend/workflows/templates/workflows/intro_builder.html b/backend/workflows/templates/workflows/intro_builder.html
index acca81b..7e2d367 100644
--- a/backend/workflows/templates/workflows/intro_builder.html
+++ b/backend/workflows/templates/workflows/intro_builder.html
@@ -25,24 +25,24 @@
 
     {% include 'workflows/includes/messages.html' %}
 
-    <section class="intro-builder-shell">
-      <aside class="intro-builder-sidebar">
-        <section class="card intro-side-card">
+    <section class="intro-builder-shell app-editor-shell">
+      <aside class="intro-builder-sidebar app-editor-sidebar">
+        <section class="card intro-side-card app-sidebar-card">
           <span class="page-eyebrow intro-eyebrow">{% trans "Übersicht" %}</span>
-          <div class="intro-side-stats">
-            <div class="intro-side-stat">
+          <div class="intro-side-stats app-stat-grid">
+            <div class="intro-side-stat app-stat-card">
               <strong>{{ intro_summary.total_items }}</strong>
               <span>{% trans "Punkte gesamt" %}</span>
             </div>
-            <div class="intro-side-stat">
+            <div class="intro-side-stat app-stat-card">
               <strong>{{ intro_summary.active_items }}</strong>
               <span>{% trans "aktiv" %}</span>
             </div>
-            <div class="intro-side-stat">
+            <div class="intro-side-stat app-stat-card">
               <strong>{{ intro_summary.conditional_items }}</strong>
               <span>{% trans "mit Bedingung" %}</span>
             </div>
-            <div class="intro-side-stat">
+            <div class="intro-side-stat app-stat-card">
               <strong>{{ intro_summary.section_count }}</strong>
               <span>{% trans "genutzte Abschnitte" %}</span>
             </div>
@@ -58,7 +58,7 @@
         </nav>
       </aside>
 
-      <div class="intro-builder-main">
+      <div class="intro-builder-main app-editor-main">
         <form class="card intro-builder-form-card" method="post" action="/admin-tools/intro-builder/">
           {% csrf_token %}
           <input type="hidden" name="builder_action" value="add_item" />
@@ -86,7 +86,7 @@
               <input id="label_en" name="label_en" placeholder="{% trans 'e.g. Nextcloud folder structure explained' %}" />
             </div>
           </div>
-          <div class="intro-builder-actions">
+          <div class="intro-builder-actions app-action-row">
             <button class="btn btn-primary" type="submit">{% trans "Punkt hinzufügen" %}</button>
             <span class="hint">{% trans "Bedingungen und Sortierung können anschließend im Editor gepflegt werden." %}</span>
           </div>
@@ -180,7 +180,7 @@
             {% endfor %}
           </div>
 
-          <div class="intro-builder-actions intro-builder-actions-sticky">
+          <div class="intro-builder-actions intro-builder-actions-sticky app-action-row is-sticky">
             <button class="btn btn-primary" type="submit">{% trans "Checkliste speichern" %}</button>
             <span class="hint">{% trans "Die Reihenfolge folgt aktuell der gespeicherten Listenreihenfolge innerhalb der Abschnitte." %}</span>
           </div>
diff --git a/backend/workflows/templates/workflows/trial_management.html b/backend/workflows/templates/workflows/trial_management.html
index fa6b33a..437b53d 100644
--- a/backend/workflows/templates/workflows/trial_management.html
+++ b/backend/workflows/templates/workflows/trial_management.html
@@ -29,8 +29,8 @@
       <h2>{% trans "Übersicht" %}</h2>
       <p>{% trans "Aktueller Trial-Status und die daraus resultierende Systemwirkung." %}</p>
     </div>
-    <div class="trial-summary-grid">
-      <div class="trial-summary-card">
+    <div class="trial-summary-grid app-stat-grid">
+      <div class="trial-summary-card app-stat-card">
         <span class="trial-summary-label">{% trans "Status" %}</span>
         <strong class="trial-summary-value {% if portal_trial_enabled %}{% if portal_trial_expired %}is-expired{% else %}is-active{% endif %}{% else %}is-inactive{% endif %}">
           {% if portal_trial_enabled %}
@@ -40,19 +40,19 @@
           {% endif %}
         </strong>
       </div>
-      <div class="trial-summary-card">
+      <div class="trial-summary-card app-stat-card">
         <span class="trial-summary-label">{% trans "Ende" %}</span>
         <strong class="trial-summary-value">
           {% if portal_trial_expires_at %}{{ portal_trial_expires_at|date:"d.m.Y H:i" }}{% else %}{% trans "Nicht gesetzt" %}{% endif %}
         </strong>
       </div>
-      <div class="trial-summary-card">
+      <div class="trial-summary-card app-stat-card">
         <span class="trial-summary-label">{% trans "Nextcloud effektiv" %}</span>
         <strong class="trial-summary-value {% if portal_trial_restrict_integrations and portal_trial_enabled %}is-inactive{% else %}is-active{% endif %}">
           {% if portal_trial_restrict_integrations and portal_trial_enabled %}{% trans "Deaktiviert" %}{% else %}{% trans "Unverändert" %}{% endif %}
         </strong>
       </div>
-      <div class="trial-summary-card">
+      <div class="trial-summary-card app-stat-card">
         <span class="trial-summary-label">{% trans "E-Mail effektiv" %}</span>
         <strong class="trial-summary-value {% if portal_trial_restrict_integrations and portal_trial_enabled %}is-warn{% else %}is-active{% endif %}">
           {% if portal_trial_restrict_integrations and portal_trial_enabled %}{% trans "Testmodus" %}{% else %}{% trans "Unverändert" %}{% endif %}