From bcc0e8252eb8f012662134622908f33ab2d60b6f Mon Sep 17 00:00:00 2001
From: Wild Karl-Heinz <kh.wild@wicom.li>
Date: Wed, 2 Sep 2026 15:41:15 +0200
Subject: [PATCH] Toolbar: insert/functions buttons as icon-only pictograms
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Tabelle/Diagramm/Text/Funktionen now show only their glyph (▦ ▤ ¶ 𝑓,
matching the icons already used for object kinds in CanvasObject.vue)
instead of a text label, with title + aria-label tooltips for
accessibility. New shared .icon-btn style for the compact square shape.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/components/AppToolbar.vue | 30 +++++++++++++++++++++++++-----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/components/AppToolbar.vue b/src/components/AppToolbar.vue
index da1da9e..d4cebbe 100644
--- a/src/components/AppToolbar.vue
+++ b/src/components/AppToolbar.vue
@@ -230,13 +230,24 @@ function onReset() {
     </button>
 
     <span class="divider" />
-    <button class="btn accent" @click="insertTable">＋ Tabelle</button>
-    <button class="btn accent" @click="insertChart">＋ Diagramm</button>
-    <button class="btn accent" @click="insertText">＋ Text</button>
+    <button class="btn accent icon-btn" title="Tabelle einfügen" aria-label="Tabelle einfügen" @click="insertTable">
+      ▦
+    </button>
+    <button class="btn accent icon-btn" title="Diagramm einfügen" aria-label="Diagramm einfügen" @click="insertChart">
+      ▤
+    </button>
+    <button class="btn accent icon-btn" title="Text einfügen" aria-label="Text einfügen" @click="insertText">
+      ¶
+    </button>
 
     <span class="divider" />
-    <button class="btn" title="Benutzerdefinierte Funktionen" @click="functionsOpen = true">
-      𝑓 Funktionen
+    <button
+      class="btn accent icon-btn"
+      title="Benutzerdefinierte Funktionen"
+      aria-label="Benutzerdefinierte Funktionen"
+      @click="functionsOpen = true"
+    >
+      𝑓
     </button>
 
     <div class="spacer" />
@@ -537,6 +548,15 @@ function onReset() {
   color: var(--accent);
   font-weight: 600;
 }
+.icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  padding: 6px 0;
+  font-size: 14px;
+  line-height: 1;
+}
 .menu-wrap {
   position: relative;
 }