Rework forms, statistics, design and the sidebar foot in 1.15.0

Forms are an editor now: one card per field with add and remove, the
technical name derived from the label, options only for a choice, and a
new "Aussehen" section with a button label and four colours (field border
and background, button and button text) that travel to the page as one
rule per form inside the hashed style block. A live preview draws the
form with the site's default button and names the text contrast.

Statistics open with six figures (views against the same span before,
average per day, busiest day, pages, referred views, missing addresses),
a chart with grid lines and a title per bar, a weekday chart and ranked
lists with share bars. The design screen shows the palette as colour
cards with seven ready-made palettes, picks the base colours from the
palette, previews every font in itself and the typography as a sample.
The sidebar ends in an account card with role and a logout icon.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

src/Content/FontLibrary.php

@@ -34,6 +34,12 @@ final class FontLibrary
     {
     }
 
+    /** Gibt es ein Stylesheet mit lokalen Schriften - auch wenn nicht jede Schrift des Themes dabei ist? */
+    public function hasStylesheet(): bool
+    {
+        return is_file($this->directory.'/fonts.css');
+    }
+
     /** Liegen für dieses Theme fertige Dateien bereit? */
     public function hasLocal(array $theme): bool
     {

src/Content/FormRepository.php

@@ -21,6 +21,13 @@ final class FormRepository
         'consent' => 'Einwilligung',
     ];
     public const MAX_FIELDS = 25;
+    /** Die gestaltbaren Farben eines Formulars, mit ihrer Bezeichnung in der Verwaltung. */
+    public const COLORS = [
+        'fieldBorderColor' => 'den Rahmen der Felder',
+        'fieldBackgroundColor' => 'den Hintergrund der Felder',
+        'buttonColor' => 'den Button',
+        'buttonInk' => 'die Buttonschrift',
+    ];
     /** Submissions per sender per hour. Deliberately low: a contact form is not a chat. */
     public const RATE_LIMIT = 5;
     /** A human needs longer than this to fill in a form; anything faster is a script. */
@@ -165,12 +172,66 @@ final class FormRepository
             }
         }
 
-        return [
+        $clean = [
             'recipient' => $recipient,
             'subject' => mb_substr(trim((string) ($settings['subject'] ?? '')), 0, 160) ?: 'Neue Formularnachricht',
             'success' => mb_substr(trim((string) ($settings['success'] ?? '')), 0, 300) ?: 'Vielen Dank. Deine Nachricht ist angekommen.',
             'replyToField' => $replyTo,
+            'buttonLabel' => mb_substr(trim((string) ($settings['buttonLabel'] ?? '')), 0, 40) ?: 'Absenden',
         ];
+        // Das Aussehen: leer heisst "wie die Website", sonst ein Palettenschluessel oder ein
+        // Hexwert - dieselbe Regel wie fuer jede Farbe im Editor.
+        foreach (self::COLORS as $field => $label) {
+            $value = trim((string) ($settings[$field] ?? ''));
+            if ('' !== $value && 1 !== preg_match(StyleSchema::COLOR, $value)) {
+                throw new InvalidForm(sprintf('„%s“ ist kein Farbwert für %s.', $value, $label));
+            }
+            $clean[$field] = $value;
+        }
+
+        return $clean;
+    }
+
+    /**
+     * Die Gestaltung eines Formulars als Regel fuer die Seite, die es zeigt.
+     *
+     * Das Formular bekommt seine Farben als Variablen: Rahmen und Grund der Felder direkt, die
+     * Buttonfarben ueber dieselben Token, die auch der Standardbutton der Website benutzt - so
+     * behaelt der Absendeknopf Form und Darstellung aus dem Design und wechselt nur die Farbe.
+     * Nichts gesetzt, nichts geschrieben: dann gilt weiter die Website.
+     */
+    public function css(array $form, array $theme): string
+    {
+        $values = [];
+        $button = false;
+        foreach (['fieldBorderColor' => '--form-border', 'fieldBackgroundColor' => '--form-bg', 'buttonColor' => '--kb-fill', 'buttonInk' => '--kb-ink'] as $field => $variable) {
+            $value = Theme::cssColor((string) ($form['settings'][$field] ?? ''), $theme);
+            if (null === $value) {
+                continue;
+            }
+            $values[] = $variable.':'.$value;
+            if ('buttonColor' === $field) {
+                $values[] = '--kb-hover-fill:color-mix(in srgb,'.$value.' 82%,#000)';
+                $button = true;
+            }
+            if ('buttonInk' === $field) {
+                $values[] = '--kb-hover-ink:'.$value;
+                $button = true;
+            }
+        }
+        if ($button) {
+            // Die Darstellung (gefuellt, Rahmen, dezent) leitet Flaeche und Schrift aus Fuellung
+            // und Tinte ab - am Wurzelelement, mit den Werten von dort. Hier noch einmal, damit
+            // die Ableitung die Farben dieses Formulars nimmt.
+            foreach (ButtonDesign::appearance($theme['buttons']['appearance'] ?? 'solid') as $key => $value) {
+                $values[] = '--kb-'.$key.':'.$value;
+            }
+        }
+        if ([] === $values) {
+            return '';
+        }
+
+        return sprintf('.block-form[data-form="%s"]{%s}', $form['slug'], implode(';', $values));
     }
 
     /**

src/Content/Statistics.php

@@ -85,12 +85,20 @@ final class Statistics
     /**
      * The numbers for a range of days, ending today.
      *
+     * Neben den Reihen ein paar Summen, die eine Zahl einordnen: der gleich lange Zeitraum davor,
+     * der staerkste Tag, die Wochentage im Schnitt, wie viel ueber Verweise kam und wie oft eine
+     * Adresse ins Leere lief. Alles aus derselben Tabelle, nichts davon braucht ein Merkmal, das
+     * eine Person wiedererkennbar macht.
+     *
      * @return array{
      *     days: list<array{day: string, count: int}>,
-     *     total: int, pages: list<array{path: string, count: int}>,
+     *     total: int, previousTotal: int, busiestDay: ?string,
+     *     pages: list<array{path: string, count: int}>,
      *     referrers: list<array{host: string, count: int}>,
      *     missing: list<array{path: string, count: int}>,
      *     hours: list<array{hour: int, count: int}>,
+     *     weekdays: list<array{weekday: int, count: int, average: float}>,
+     *     missingTotal: int, referred: int, pageCount: int,
      *     range: int, from: string, compactedBefore: string, busiest: int
      * }
      */
@@ -132,10 +140,40 @@ final class Statistics
             $hours[(int) $row['hour']] = (int) $row['total'];
         }
 
+        $sum = fn (string $extra): int => (int) $this->db->fetchOne(
+            'SELECT COALESCE(SUM(count), 0) FROM stat_hit WHERE '.$where.' '.$extra,
+            $params,
+        );
+        // Der gleich lange Zeitraum davor: erst der Vergleich macht aus einer Zahl eine Aussage.
+        $previousTotal = (int) $this->db->fetchOne(
+            'SELECT COALESCE(SUM(count), 0) FROM stat_hit WHERE website_id = ? AND day >= ? AND day < ? AND status = 200',
+            ['default', $now->modify(sprintf('-%d days', 2 * $range - 1))->format('Y-m-d'), $from],
+        );
+        $weekdays = array_fill(1, 7, ['count' => 0, 'days' => 0]);
+        $busiestDay = null;
+        foreach ($days as $entry) {
+            $weekday = (int) (new \DateTimeImmutable($entry['day'], new \DateTimeZone('UTC')))->format('N');
+            $weekdays[$weekday]['count'] += $entry['count'];
+            ++$weekdays[$weekday]['days'];
+            if ($entry['count'] > 0 && (null === $busiestDay || $entry['count'] > $perDay[$busiestDay])) {
+                $busiestDay = $entry['day'];
+            }
+        }
+
         return [
             'days' => $days,
             'total' => array_sum(array_column($days, 'count')),
+            'previousTotal' => $previousTotal,
             'busiest' => max(1, max(array_column($days, 'count'))),
+            'busiestDay' => $busiestDay,
+            'weekdays' => array_map(static fn (int $weekday): array => [
+                'weekday' => $weekday,
+                'count' => $weekdays[$weekday]['count'],
+                'average' => $weekdays[$weekday]['days'] > 0 ? round($weekdays[$weekday]['count'] / $weekdays[$weekday]['days'], 1) : 0.0,
+            ], range(1, 7)),
+            'missingTotal' => $sum('AND status = 404'),
+            'referred' => $sum("AND status = 200 AND referrer_host <> ''"),
+            'pageCount' => (int) $this->db->fetchOne('SELECT COUNT(DISTINCT path) FROM stat_hit WHERE '.$where.' AND status = 200', $params),
             'pages' => $rows('path', 'AND status = 200', 'path'),
             'referrers' => $rows('referrer_host', "AND status = 200 AND referrer_host <> ''", 'referrer_host'),
             'missing' => $rows('path', 'AND status = 404', 'path'),

src/Content/Theme.php

@@ -25,6 +25,25 @@ final class Theme
         'system-ui' => 'Systemschrift',
     ];
 
+    /**
+     * Fertige Paletten zum Übernehmen. Dieselben fünf Schlüssel wie die Voreinstellung, damit
+     * Grundfarben und Blöcke, die auf die Schlüssel ink oder link zeigen, stimmen nach dem Wechsel weiter.
+     * Die Linkfarbe erreicht auf dem Papierton jeweils mindestens 4,5:1 - eine Palette, die
+     * ihre eigenen Links unlesbar macht, wäre keine Hilfe.
+     */
+    public const PALETTES = [
+        ['name' => 'Wald', 'colors' => ['paper' => '#f6f7f4', 'ink' => '#203b34', 'mint' => '#e4efb9', 'accent' => '#b55b12', 'link' => '#a4510f']],
+        ['name' => 'Ozean', 'colors' => ['paper' => '#f5f8fa', 'ink' => '#12283a', 'mint' => '#d6ecf3', 'accent' => '#0e7490', 'link' => '#0b5f78']],
+        ['name' => 'Sand', 'colors' => ['paper' => '#faf6ef', 'ink' => '#3b2f24', 'mint' => '#f1e4cf', 'accent' => '#b8672a', 'link' => '#9a5320']],
+        ['name' => 'Koralle', 'colors' => ['paper' => '#fffaf8', 'ink' => '#2b2320', 'mint' => '#ffe4dc', 'accent' => '#d9483b', 'link' => '#b83a2f']],
+        ['name' => 'Schiefer', 'colors' => ['paper' => '#f4f5f7', 'ink' => '#1f2937', 'mint' => '#e2e8f0', 'accent' => '#4f46e5', 'link' => '#4338ca']],
+        ['name' => 'Olive', 'colors' => ['paper' => '#f7f7f2', 'ink' => '#2a2f23', 'mint' => '#e6ead3', 'accent' => '#6b7a2e', 'link' => '#55621f']],
+        ['name' => 'Nacht', 'colors' => ['paper' => '#14181d', 'ink' => '#eef1f4', 'mint' => '#262e38', 'accent' => '#7cc4ff', 'link' => '#9ad2ff']],
+    ];
+
+    /** Die Namen der Palettenfarben, wie sie in einer neuen Palette heißen. */
+    public const COLOR_NAMES = ['paper' => 'Papier', 'ink' => 'Tinte', 'mint' => 'Mint', 'accent' => 'Akzent', 'link' => 'Links'];
+
     public const DEFAULTS = [
         'colors' => [
             ['key' => 'paper', 'name' => 'Papier', 'value' => '#f6f7f4'],
@@ -351,5 +370,4 @@ final class Theme
             $headings,
         ).ButtonDesign::css($theme['buttons'] ?? ButtonDesign::defaults($base));
     }
-
 }

src/Controller/FormAdminController.php

@@ -2,7 +2,9 @@
 
 namespace App\Controller;
 
+use App\Content\ButtonDesign;
 use App\Content\FormRepository;
+use App\Content\Theme;
 use App\Domain\InvalidForm;
 use App\Domain\StaleWrite;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
@@ -12,17 +14,23 @@ use Symfony\Component\Routing\Attribute\Route;
 
 final class FormAdminController extends AbstractController
 {
-    public function __construct(private FormRepository $forms)
+    public function __construct(private FormRepository $forms, private Theme $theme)
     {
     }
 
     #[Route('/%kant.admin_path%/forms', name: 'admin_forms', methods: ['GET'])]
     public function index(Request $request): Response
     {
+        $theme = $this->theme->load();
+
         return $this->render('admin/forms.html.twig', [
             'forms' => $this->forms->all(),
             'types' => FormRepository::TYPES,
+            'colors' => FormRepository::COLORS,
             'submissions' => $this->forms->submissions($request->query->getInt('seite', 1)),
+            // Die Vorschau zeichnet den Absendeknopf mit dem Standardbutton der Website und
+            // kennt die Palette, damit eine Farbe gewaehlt statt getippt wird.
+            'schema' => ['colors' => $theme['colors'], 'fonts' => $theme['fonts'], 'buttons' => $theme['buttons'] ?? ButtonDesign::defaults($theme['base']), 'base' => $theme['base']],
         ]);
     }
 
@@ -57,6 +65,8 @@ final class FormAdminController extends AbstractController
                     'subject' => $request->request->getString('subject'),
                     'success' => $request->request->getString('success'),
                     'replyToField' => $request->request->getString('replyToField'),
+                    'buttonLabel' => $request->request->getString('buttonLabel'),
+                    ...array_map(fn (string $field): string => $request->request->getString($field), array_combine(array_keys(FormRepository::COLORS), array_keys(FormRepository::COLORS))),
                 ],
                 $request->request->getInt('expectedVersion', -1),
             );

src/Controller/PageController.php

@@ -86,6 +86,15 @@ final class PageController extends AbstractController
         foreach ([...array_values($areas), ...array_values($sections)] as $extra) {
             $styles .= $this->styles->compileDocument($extra).$this->code->compileDocument($extra);
         }
+        // Die Farben jedes Formulars auf der Seite - nach dem Theme, damit sie es uebersteuern.
+        $forms = $this->formStates($page, $request->query->getString('gesendet'), $request);
+        $styled = [];
+        foreach ($forms as $state) {
+            if (null !== $state['form'] && !isset($styled[$state['form']['slug']])) {
+                $styled[$state['form']['slug']] = true;
+                $styles .= $this->forms->css($state['form'], $theme);
+            }
+        }
         // Schriften kommen ausschliesslich vom eigenen Server. Fehlen die Dateien, zeigt die
         // Website die Ersatzschrift des Themes - nie ein Stylesheet von fonts.googleapis.com:
         // das gaebe die IP-Adresse jedes Besuchers an einen Dritten weiter und haengt den
@@ -114,7 +123,7 @@ final class PageController extends AbstractController
             // Own scripts arrive as one file per page, never inline, so the policy can stay
             // hash based and no page without a script loses its strict setting.
             'pageScript' => [] === $this->code->scriptsOf($page['document']) ? null : '/assets/seite/'.$page['id'].'.js',
-            'forms' => $this->formStates($page, $request->query->getString('gesendet'), $request),
+            'forms' => $forms,
             'breadcrumbs' => $status >= 400 ? [] : $this->breadcrumbs($page),
             'socialImage' => $this->socialImage($page),
             'structuredData' => $status >= 400 ? [] : $this->structuredData($page),

src/Controller/ThemeController.php

@@ -30,6 +30,10 @@ final class ThemeController extends AbstractController
             'buttonPresets' => ButtonDesign::PRESETS,
             'fontsLocal' => $this->fonts->hasLocal($theme),
             'fontsMissing' => $this->fonts->missing($theme),
+            // Die Vorschau der Schriften nutzt die Dateien, die schon hier liegen.
+            'fontsStylesheet' => $this->fonts->hasStylesheet(),
+            'palettes' => Theme::PALETTES,
+            'colorNames' => Theme::COLOR_NAMES,
         ]);
     }