Anpassung Menü

2026-08-09 18:44:21 +02:00
parent b80e2d5a6c
commit 8ffbda875e
13 changed files with 365 additions and 58 deletions
--- a/web/html/js/views/admin.js
+++ b/web/html/js/views/admin.js
@@ -4,6 +4,7 @@
 import { del, get, post, put } from "../api.js";
 import { el, mount } from "../dom.js";
 import { state } from "../store.js";
+import { appBar } from "../appbar.js";

 let openId = null;

@@ -361,8 +362,10 @@ export async function adminView(root, { back }) {

  function render() {
    mount(root,
-      el("header.bar", {},
-        el("button.linklike", { type: "button", onclick: back }, "‹ Zurück")),
+      appBar({
+        back: { label: "Einstellungen", onClick: back },
+        title: "Benutzerverwaltung",
+      }),

      banner ? el(banner.kind === "error" ? "p.error" : "p.notice", {}, banner.message) : null,

--- a/web/html/js/views/articles.js
+++ b/web/html/js/views/articles.js
@@ -6,6 +6,7 @@ import { del, get, patch, post } from "../api.js";
 import { el, mount } from "../dom.js";
 import { set, state } from "../store.js";
 import { cameraAvailable, scanBarcode } from "./scanner.js";
+import { appBar } from "../appbar.js";

 let editingId = null;
 let query = "";
@@ -261,9 +262,7 @@ export async function articlesView(root, { listId, back }) {
    });

    mount(root,
-      el("header.bar", {},
-        el("button.linklike", { type: "button", onclick: back },
-          "‹ Zurück zur Liste")),
+      appBar({ back: { label: "Zurück", onClick: back }, title: "Artikel" }),

      banner ? el(banner.kind === "error" ? "p.error" : "p.notice", {}, banner.message) : null,

--- a/web/html/js/views/list-detail.js
+++ b/web/html/js/views/list-detail.js
@@ -19,6 +19,7 @@ import { set, state } from "../store.js";
 import { composeView, flush, pull, syncNow, watch } from "../sync.js";
 import { confirmScan } from "./scan-result.js";
 import { cameraAvailable, scanBarcode } from "./scanner.js";
+import { appBar } from "../appbar.js";

 let openMenuId = null;

@@ -639,26 +640,30 @@ export async function listDetailView(
        (n, c) => n + c.items.filter((i) => i.status === "bought").length, 0), 0);

    mount(root, 
-      el("header.bar", {},
-        el("button.linklike", { type: "button", onclick: back }, "‹ Listen"),
-        el("span.bar-actions", {},
+      appBar({
+        back: { label: "Listen", onClick: back },
+        title: view.list_name,
+        actions: [
+          { label: "Märkte & Gruppen", onClick: () => manage(listId),
+            hint: "Reihenfolge im Laden" },
+          { label: "Artikel", onClick: () => articles(listId),
+            hint: "Stammdaten, Strichcodes" },
+          { label: "Preise", onClick: () => prices(listId),
+            hint: "Vergleich zwischen Märkten" },
+          meta && meta.may_share_public
+            ? {
+                label: meta.member_count > 1
+                  ? `Teilen (${meta.member_count})` : "Teilen",
+                onClick: () => share(listId),
+                hint: "Personen und öffentliche Links",
+              }
+            : null,
          // Serverseitiger Ausdruck: eigene Seite, damit auch ohne
          // geöffnete App gedruckt werden kann.
-          el("a.linklike", {
-            href: `/api/lists/${listId}/print`,
-            target: "_blank",
-            rel: "noopener",
-          }, "Drucken"),
-          el("button.linklike", { type: "button", onclick: () => prices(listId) },
-            "Preise"),
-          el("button.linklike", { type: "button", onclick: () => articles(listId) },
-            "Artikel"),
-          el("button.linklike", { type: "button", onclick: () => manage(listId) },
-            "Märkte & Gruppen"),
-          meta && meta.may_share_public
-            ? el("button.linklike", { type: "button", onclick: () => share(listId) },
-                meta.member_count > 1 ? `Teilen (${meta.member_count})` : "Teilen")
-            : null)),
+          { label: "Drucken", href: `/api/lists/${listId}/print`,
+            hint: "A4, nach Märkten gegliedert" },
+        ],
+      }),

      statusLine(),
      banner ? el("p.error", {}, banner) : null,
--- a/web/html/js/views/lists.js
+++ b/web/html/js/views/lists.js
@@ -5,6 +5,7 @@ import { del, get, patch, post } from "../api.js";
 import * as db from "../db.js";
 import { clear, el, mount } from "../dom.js";
 import { set, state } from "../store.js";
+import { appBar } from "../appbar.js";

 // Welche Zeile hat gerade ihr Menü offen
 let openMenuId = null;
@@ -244,11 +245,14 @@ export async function listsView(root, { openList, onLogout, settings }) {

  function render() {
    mount(root,
-      el("header.bar", {},
-        el("span.who", {}, state.user.display_name || state.user.email),
-        el("span.bar-actions", {},
-          el("button.linklike", { type: "button", onclick: settings }, "Einstellungen"),
-          el("button.linklike", { type: "button", onclick: onLogout }, "Abmelden"))),
+      appBar({
+        title: state.user.display_name || state.user.email,
+        actions: [
+          { label: "Einstellungen", onClick: settings,
+            hint: "Benachrichtigungen, Passwort" },
+          { label: "Abmelden", onClick: onLogout, danger: true },
+        ],
+      }),

      banner ? el(banner.kind === "error" ? "p.error" : "p.notice", {}, banner.message) : null,

--- a/web/html/js/views/manage.js
+++ b/web/html/js/views/manage.js
@@ -9,6 +9,7 @@ import { del, get, post, put } from "../api.js";
 import { clear, el, mount } from "../dom.js";
 import { makeSortable } from "../sortable.js";
 import { set, state } from "../store.js";
+import { appBar } from "../appbar.js";

 const STEP = 10;

@@ -148,10 +149,7 @@ export async function manageView(root, { listId, back }) {

  function render() {
    mount(root,
-      el("header.bar", {},
-        el("button.linklike", { type: "button", onclick: back },
-          "‹ Zurück zur Liste"),
-        listName ? el("span.who", {}, listName) : null),
+      appBar({ back: { label: "Zurück", onClick: back }, title: listName }),

      banner ? el(banner.kind === "error" ? "p.error" : "p.notice", {}, banner.message) : null,

--- a/web/html/js/views/prices.js
+++ b/web/html/js/views/prices.js
@@ -8,6 +8,7 @@

 import { get } from "../api.js";
 import { el, euro, formatQuantity, mount } from "../dom.js";
+import { appBar } from "../appbar.js";

 let expandedId = null;

@@ -127,9 +128,7 @@ export async function pricesView(root, { listId, back }) {
    const savings = withSpread.reduce((sum, r) => sum + r.spread_cents, 0);

    mount(root,
-      el("header.bar", {},
-        el("button.linklike", { type: "button", onclick: back },
-          "‹ Zurück zur Liste")),
+      appBar({ back: { label: "Zurück", onClick: back }, title: "Preise" }),

      banner ? el("p.error", {}, banner) : null,

--- a/web/html/js/views/settings.js
+++ b/web/html/js/views/settings.js
@@ -6,6 +6,7 @@ import { del, patch, post } from "../api.js";
 import { el, mount } from "../dom.js";
 import * as push from "../push.js";
 import { set, state } from "../store.js";
+import { appBar } from "../appbar.js";

 function formatDate(iso) {
  return new Date(iso).toLocaleDateString("de-DE", {
@@ -205,22 +206,24 @@ export async function settingsView(root, { back, admin }) {

  function render() {
    mount(root,
-      el("header.bar", {},
-        el("button.linklike", { type: "button", onclick: back }, "‹ Zurück"),
-        el("span.who", {}, state.user.display_name || state.user.email)),
+      appBar({
+        back: { label: "Listen", onClick: back },
+        title: "Einstellungen",
+        actions: state.user.is_admin
+          ? [{ label: "Benutzerverwaltung", onClick: admin,
+               hint: "Konten, Einladungen, Bereinigung" }]
+          : [],
+      }),

      banner ? el(banner.kind === "error" ? "p.error" : "p.notice", {}, banner.message) : null,

+      // Die Benutzerverwaltung steht im Menü der Kopfleiste - nur für
+      // Administratoren, und der Endpunkt prüft zusätzlich.
      el("section.card", {},
-        el("h1", {}, "Einstellungen"),
-        // Nur für Administratoren sichtbar - der Endpunkt prüft
-        // zusätzlich, die Oberfläche allein wäre kein Schutz.
-        state.user.is_admin
-          ? el("div", {},
-              el("p.lead", {}, "Du hast Administratorrechte."),
-              el("button.secondary", { type: "button", onclick: admin },
-                "Benutzerverwaltung"))
-          : null),
+        el("h1", {}, state.user.display_name || state.user.email),
+        el("p.lead", {},
+          state.user.email,
+          state.user.is_admin ? " · Administrator" : "")),
      pushSection(),
      profileSection(),
      passwordSection()
--- a/web/html/js/views/share.js
+++ b/web/html/js/views/share.js
@@ -4,6 +4,7 @@

 import { del, get, post, put } from "../api.js";
 import { clear, el, mount } from "../dom.js";
+import { appBar } from "../appbar.js";

 const ROLE_LABEL = { owner: "Eigentümer", editor: "Bearbeiter", viewer: "Nur lesen" };

@@ -352,9 +353,10 @@ export async function shareView(root, { listId, back }) {
    const openInvites = invites.filter((i) => i.status === "pending");

    mount(root, 
-      el("header.bar", {},
-        el("button.linklike", { type: "button", onclick: back }, "‹ Zurück zur Liste")
-      ),
+      appBar({
+        back: { label: "Zurück", onClick: back },
+        title: list ? list.name : "Teilen",
+      }),
      banner ? el(banner.kind === "error" ? "p.error" : "p.notice", {}, banner.message) : null,

      el("section.card", {},