Anpassung Menü

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,