Kopfleiste: Steckplatz "aktionen" für eigene Knöpfe der Tools

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

topbar/src/topbar.ts

@@ -9,6 +9,9 @@
  * Die Höhe steht als CSS-Variable --hi-topbar-height bereit, z.B. für
  * Layouts mit height: calc(100vh - var(--hi-topbar-height, 0px)).
  *
+ * Eigene Knöpfe des Tools erscheinen rechts vor dem Avatar, wenn sie als Kind
+ * mit slot="aktionen" in <hi-topbar> stehen.
+ *
  * Voraussetzung in der CSP des Tools: script-src, connect-src und img-src
  * müssen https://portal.handy-insel.de erlauben.
  */
@@ -58,6 +61,7 @@ a { color: inherit; text-decoration: none; }
 .app-name { opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
 .sep { width: 1px; height: 18px; background: rgba(255,255,255,.3); margin: 0 4px; }
 .spacer { flex: 1; }
+::slotted(*) { flex: none; margin: 0 2px; }
 .avatar { width: 30px; height: 30px; border-radius: 50%; background: #fff; color: #2d1b69; font-size: 12px; font-weight: 700;
   display: grid; place-items: center; }
 .panel { position: absolute; top: ${HEIGHT + 6}px; background: var(--p-bg); color: var(--p-text); border-radius: 12px;
@@ -211,6 +215,7 @@ class HiTopbar extends HTMLElement {
         <a class="brand" href="${esc(links.portal)}"><img src="${PORTAL}/insel-logo.png" alt=""><span>Handy-<b>Insel</b></span></a>
         ${appName ? `<span class="sep"></span><span class="app-name">${esc(appName)}</span>` : ''}
         <span class="spacer"></span>
+        <slot name="aktionen"></slot>
         ${
           user
             ? `<button class="icon-btn" data-toggle="user" aria-haspopup="true" aria-expanded="${this.open === 'user'}" title="${esc(user.name)}"><span class="avatar">${esc(user.initials)}</span></button>`