Move reload/restart/shutdown into an Acties menu in the top bar

The actions are now on every page in the same place instead of a button
row that differed per page.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/voxip_kiosk/web/templates/_macros.html

@@ -2,10 +2,10 @@
 <span class="badge badge-{{ status }}" {% if field %}data-badge="{{ field }}"{% endif %}><span class="dot" aria-hidden="true"></span><span data-badge-label>{{ label }}</span></span>
 {%- endmacro %}
 
-{% macro action(url, label, cls="btn-primary", confirm=None, confirm_title=None, big=False) -%}
-<form method="post" action="{{ url }}" class="inline-form" {% if confirm %}data-confirm="{{ confirm }}" data-confirm-title="{{ confirm_title or label }}"{% endif %}>
+{% macro menu_action(url, label, confirm=None, confirm_title=None, danger=False) -%}
+<form method="post" action="{{ url }}" {% if confirm %}data-confirm="{{ confirm }}" data-confirm-title="{{ confirm_title or label }}"{% endif %}>
   <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
-  <button type="submit" class="btn {{ cls }}{% if big %} btn-big{% endif %}">{{ label }}</button>
+  <button type="submit"{% if danger %} class="danger"{% endif %}>{{ label }}</button>
 </form>
 {%- endmacro %}
 

src/voxip_kiosk/web/templates/base.html

@@ -1,3 +1,4 @@
+{% from "_macros.html" import menu_action with context %}
 <!doctype html>
 <html lang="nl">
 <head>
@@ -27,6 +28,16 @@
         <a href="{{ url_for('ui.network') }}" {% if active == 'network' %}aria-current="page"{% endif %}>Netwerk</a>
         <a href="{{ url_for('ui.logs') }}" {% if active == 'logs' %}aria-current="page"{% endif %}>Logboek</a>
         <a href="{{ url_for('ui.change_password') }}" {% if active == 'account' %}aria-current="page"{% endif %}>Wachtwoord</a>
+        <details class="nav-menu" data-nav-menu>
+          <summary>Acties <span aria-hidden="true">▾</span></summary>
+          <div class="nav-menu-list">
+            {{ menu_action(url_for('ui.kiosk_reload'), "Pagina herladen") }}
+            {{ menu_action(url_for('ui.kiosk_restart'), "Chromium herstarten", confirm="Chromium wordt afgesloten en opnieuw gestart. Het scherm is enkele seconden zwart.") }}
+            <hr>
+            {{ menu_action(url_for('ui.system_reboot'), "Raspberry Pi herstarten", confirm="De Raspberry Pi herstart. Het scherm en de beheerinterface zijn ongeveer een minuut niet beschikbaar.", danger=True) }}
+            {{ menu_action(url_for('ui.system_poweroff'), "Veilig uitschakelen", confirm="De Raspberry Pi wordt uitgeschakeld. Daarna kan hij alleen weer aan door de stroom los en weer vast te maken.", confirm_title="Raspberry Pi uitschakelen", danger=True) }}
+          </div>
+        </details>
         <form method="post" action="{{ url_for('ui.logout') }}" class="nav-logout">
           <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
           <button type="submit">Uitloggen</button>

src/voxip_kiosk/web/templates/dashboard.html

@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% from "_macros.html" import badge, action, meter with context %}
+{% from "_macros.html" import badge, meter with context %}
 {% set title = "Dashboard" %}
 {% block content %}
 <div class="page-head">
@@ -7,11 +7,6 @@
   <p class="muted">Ververst automatisch elke 5 seconden.</p>
 </div>
 
-<section class="actions-row" aria-label="Snelle acties">
-  {{ action(url_for('ui.kiosk_reload'), "Pagina herladen", "btn-primary", big=True) }}
-  {{ action(url_for('ui.kiosk_restart'), "Chromium herstarten", "btn-secondary", confirm="Chromium wordt afgesloten en opnieuw gestart. Het scherm is enkele seconden zwart.", big=True) }}
-  {{ action(url_for('ui.system_reboot'), "Raspberry Pi herstarten", "btn-danger", confirm="De Raspberry Pi herstart. Het scherm en de beheerinterface zijn ongeveer een minuut niet beschikbaar.", big=True) }}
-</section>
 
 <div class="grid" data-live-status="{{ url_for('ui.api_status') }}">
   <section class="card">

src/voxip_kiosk/web/templates/kiosk.html

@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% from "_macros.html" import badge, action, csrf with context %}
+{% from "_macros.html" import badge, csrf with context %}
 {% set title = "Kiosk" %}
 {% block content %}
 <div class="page-head">
@@ -7,10 +7,6 @@
   {{ badge(s.browser.status, s.browser.label) }}
 </div>
 
-<section class="actions-row">
-  {{ action(url_for('ui.kiosk_reload'), "Pagina herladen", "btn-primary", big=True) }}
-  {{ action(url_for('ui.kiosk_restart'), "Chromium herstarten", "btn-secondary", confirm="Chromium wordt afgesloten en opnieuw gestart.", big=True) }}
-</section>
 
 <div class="grid grid-2">
   <section class="card">

src/voxip_kiosk/web/templates/system.html

@@ -1,14 +1,9 @@
 {% extends "base.html" %}
-{% from "_macros.html" import action, csrf with context %}
+{% from "_macros.html" import csrf with context %}
 {% set title = "Systeem" %}
 {% block content %}
 <div class="page-head"><h1>Systeembeheer</h1></div>
 
-<section class="actions-row">
-  {{ action(url_for('ui.kiosk_restart'), "Chromium herstarten", "btn-secondary", confirm="Chromium wordt afgesloten en opnieuw gestart.", big=True) }}
-  {{ action(url_for('ui.system_reboot'), "Raspberry Pi herstarten", "btn-danger", confirm="De Raspberry Pi herstart. Het scherm en de beheerinterface zijn ongeveer een minuut niet beschikbaar.", big=True) }}
-  {{ action(url_for('ui.system_poweroff'), "Veilig uitschakelen", "btn-secondary", confirm="De Raspberry Pi wordt uitgeschakeld. Daarna kan hij alleen weer aan door de stroom los en weer vast te maken.", confirm_title="Raspberry Pi uitschakelen", big=True) }}
-</section>
 
 <div class="grid grid-2">
   <section class="card">