marcandClaude Opus 5
5ed4e30179
Zwei Sachen, die beim Benutzen aufgefallen sind.
- "leiste ausblenden" war eine Einbahnstraße: die Leiste verschwand ganz und
liess sich nur über die Entwicklerkonsole zurückholen. Jetzt bleibt ein
3px-Strich stehen, ein Klick darauf holt sie wieder. ?honeybar=1 an der
Adresse ist der Notausgang, falls der Strich übersehen wird.
- Die Leiste hatte ihre Farben fest eingetragen und blieb bernsteinfarben,
auch wenn der Schreibtisch auf grün stand. Genau dieser Bruch liess sie wie
etwas Angeklebtes wirken. /api/apps liefert deshalb jetzt {apps, settings};
die Leiste setzt Röhre, Glühen und Scanlines danach.
Dass das auch über Site-Grenzen geht, war so nicht erwartet: der Schlüssel
für die App-Liste trägt das Aussehen einfach mit.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
400 lines
15 KiB
JavaScript
400 lines
15 KiB
JavaScript
/*
|
||
* HoneyBar — die HoneyOS-Leiste zum Einhängen in eine fremde App.
|
||
*
|
||
* <script src="https://os.honeyy.duckdns.org/honeybar/honeybar.js"
|
||
* data-app="aether"></script>
|
||
*
|
||
* Eine Zeile, kein Build, keine Abhängigkeit. Die Leiste rendert in einem
|
||
* Shadow DOM — die Stile der Gastgeber-App kommen nicht rein, unsere nicht
|
||
* raus. Das ist der ganze Grund für die Konstruktion: Aether ist React +
|
||
* Tailwind, InkNote React + eigene Palette, und beide sollen von der Leiste
|
||
* nichts merken außer den 32 Pixeln oben.
|
||
*
|
||
* data-Attribute am <script>:
|
||
* data-app (Pflicht) id der App, in der die Leiste steckt
|
||
* data-apps URL der App-Liste; ohne das /api/apps neben dem Skript
|
||
* data-key Schlüssel für die App-Liste. Nötig, wenn HoneyOS auf einer
|
||
* anderen Site liegt als die App: dann schickt der Browser die
|
||
* HoneyOS-Sitzung nicht mit, und ohne zweiten Ausweis bliebe die
|
||
* Leiste ohne Liste.
|
||
* data-home URL des HoneyOS-Desktops
|
||
* data-push "body" (Standard) schiebt den Seiteninhalt nach unten,
|
||
* "none" legt die Leiste darüber
|
||
*
|
||
* Wichtig zu wissen: localStorage ist pro Domain. Was auf os.honeyy… steht,
|
||
* sieht diese Leiste auf notes.honeyy… nicht — die Leiste ist ein Schalter,
|
||
* kein geteilter Zustand. Gemeinsame Sitzung wäre echtes SSO und ist eine
|
||
* eigene Baustelle.
|
||
*/
|
||
(function () {
|
||
"use strict";
|
||
|
||
if (window.__honeyBar) return; // zweimal eingebunden ist kein Fehler
|
||
window.__honeyBar = true;
|
||
|
||
const script = document.currentScript;
|
||
const d = (k, fb) => (script && script.dataset[k]) || fb;
|
||
|
||
const BAR_H = 32;
|
||
const LS_HIDDEN = "honeybar.hidden";
|
||
|
||
// Notliste, falls der Server nichts herausgibt: nur der Weg zurück zum
|
||
// Schreibtisch. Erfundene App-Adressen stünden hier sonst ewig fest.
|
||
const DEFAULT_APPS = [{ id: "honeyos", name: "DESKTOP", url: "" }];
|
||
|
||
const current = d("app", "");
|
||
// Ohne data-home führt der Weg zurück dorthin, wo dieses Skript herkommt.
|
||
const homeUrl = d("home", script ? new URL("/", script.src).href : "/");
|
||
const pushMode = d("push", "body");
|
||
// Ohne data-apps fragt die Leiste den HoneyOS-Server, von dem sie selbst
|
||
// geladen wurde. Er gibt die Liste nur an angemeldete Browser heraus und
|
||
// nur an Ursprünge, die selbst als App eingetragen sind.
|
||
const appsUrl = d("apps", script ? new URL("../api/apps", script.src).href : "");
|
||
const appsKey = d("key", "");
|
||
|
||
let apps = DEFAULT_APPS;
|
||
let settings = null;
|
||
|
||
/* ── Aufbau ───────────────────────────────────────────────────────────── */
|
||
|
||
const host = document.createElement("honey-bar");
|
||
host.style.cssText = [
|
||
"position:fixed", "top:0", "left:0", "right:0",
|
||
"height:" + BAR_H + "px",
|
||
"z-index:2147483000",
|
||
"display:block",
|
||
"color-scheme:dark",
|
||
].join(";");
|
||
const root = host.attachShadow({ mode: "open" });
|
||
|
||
root.innerHTML = `
|
||
<style>
|
||
:host, * { box-sizing: border-box; }
|
||
/* Dieselben Röhren wie auf dem Schreibtisch. Welche gilt, sagt der
|
||
Server; bis seine Antwort da ist, leuchtet Bernstein. */
|
||
:host {
|
||
--p: #ffb641;
|
||
--p-mid: #c8842a;
|
||
--p-dim: #6b4718;
|
||
--p-faint: #2a1c0c;
|
||
--bg: #140d07;
|
||
--glow: 0 0 5px rgba(255, 182, 65, .4);
|
||
--scan: rgba(0, 0, 0, .13);
|
||
}
|
||
.bar {
|
||
display: flex; align-items: center; gap: 10px;
|
||
height: ${BAR_H}px; padding: 0 8px;
|
||
background: var(--bg);
|
||
border-bottom: 1px solid var(--p-dim);
|
||
color: var(--p);
|
||
font: 12px/1 ui-monospace, "SF Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
|
||
text-shadow: var(--glow);
|
||
user-select: none;
|
||
}
|
||
.bar::after {
|
||
/* Scanlines, damit die Leiste zum Desktop gehört */
|
||
content: ""; position: absolute; inset: 0; pointer-events: none;
|
||
background: repeating-linear-gradient(to bottom, var(--scan) 0 1px, transparent 1px 3px);
|
||
}
|
||
a, button {
|
||
font: inherit; color: inherit; background: none;
|
||
border: 1px solid transparent; cursor: pointer;
|
||
text-decoration: none; padding: 3px 9px; white-space: nowrap;
|
||
}
|
||
.home { letter-spacing: .14em; color: var(--p); padding-left: 2px; }
|
||
.home b { color: var(--p-mid); font-weight: 400; }
|
||
.home:hover { border-color: var(--p-dim); }
|
||
.apps { display: flex; gap: 4px; flex: 1; overflow-x: auto; scrollbar-width: none; }
|
||
.apps::-webkit-scrollbar { display: none; }
|
||
.app { color: var(--p-mid); letter-spacing: .08em; }
|
||
.app:hover { color: var(--p); border-color: var(--p-dim); }
|
||
.app[aria-current="page"] {
|
||
background: var(--p); border-color: var(--p); color: var(--bg); text-shadow: none;
|
||
}
|
||
.right { display: flex; align-items: center; gap: 8px; }
|
||
.user { color: var(--p); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.user[hidden] { display: none; }
|
||
.clock { color: var(--p-mid); font-variant-numeric: tabular-nums; }
|
||
.menu-btn { border-color: var(--p-dim); line-height: 1; padding: 3px 7px; }
|
||
.menu-btn:hover { background: var(--p-faint); }
|
||
.menu {
|
||
position: absolute; top: ${BAR_H + 2}px; right: 6px; min-width: 190px;
|
||
background: var(--bg); border: 1px solid var(--p-dim); padding: 4px;
|
||
display: none; flex-direction: column; gap: 2px;
|
||
box-shadow: 0 10px 30px rgba(0,0,0,.6);
|
||
}
|
||
.menu[data-open="1"] { display: flex; }
|
||
.menu a, .menu button { text-align: left; padding: 6px 8px; color: var(--p-mid); }
|
||
.menu a:hover, .menu button:hover { background: var(--p-faint); color: var(--p); }
|
||
.menu hr { border: 0; border-top: 1px solid var(--p-faint); margin: 3px 0; }
|
||
.menu .head {
|
||
padding: 4px 8px; font-size: 10px; letter-spacing: .18em;
|
||
text-transform: uppercase; color: var(--p-dim);
|
||
}
|
||
@media (max-width: 560px) { .clock { display: none; } }
|
||
</style>
|
||
|
||
<div class="bar">
|
||
<a class="home" id="home" title="HoneyOS">■ HONEY<b>OS</b></a>
|
||
<nav class="apps" id="apps"></nav>
|
||
<div class="right">
|
||
<span class="user" id="user" hidden></span>
|
||
<span class="clock" id="clock"></span>
|
||
<button class="menu-btn" id="menuBtn" aria-haspopup="true" aria-expanded="false">▾</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="menu" id="menu" role="menu">
|
||
<div class="head">wechseln zu</div>
|
||
<div id="menuApps"></div>
|
||
<hr />
|
||
<button id="hide" role="menuitem">leiste einklappen</button>
|
||
</div>`;
|
||
|
||
/* ── Aussehen ─────────────────────────────────────────────────────────────
|
||
* Dieselben drei Röhren wie in style.css. Sie hier zu wiederholen ist die
|
||
* bewusste Entscheidung: die Leiste soll ohne zweite Datei auskommen, damit
|
||
* sie in jeder fremden App mit einer Zeile funktioniert.
|
||
*/
|
||
const ROEHREN = {
|
||
amber: { p: "#ffb641", mid: "#c8842a", dim: "#6b4718", faint: "#2a1c0c", bg: "#140d07", glow: "255,182,65" },
|
||
green: { p: "#5cff8f", mid: "#2fa85c", dim: "#17512c", faint: "#08200f", bg: "#071206", glow: "92,255,143" },
|
||
ice: { p: "#cfe8ff", mid: "#7fa6c4", dim: "#395366", faint: "#12202a", bg: "#0a1118", glow: "207,232,255" },
|
||
};
|
||
|
||
function applySettings(s) {
|
||
if (!s) return;
|
||
const t = ROEHREN[s.phosphor] || ROEHREN.amber;
|
||
const bar = root.querySelector(".bar");
|
||
if (!bar) return;
|
||
const set = (k, v) => bar.parentNode.host.style.setProperty(k, v);
|
||
set("--p", t.p);
|
||
set("--p-mid", t.mid);
|
||
set("--p-dim", t.dim);
|
||
set("--p-faint", t.faint);
|
||
set("--bg", t.bg);
|
||
set("--glow", s.glow === "off" ? "none" : `0 0 5px rgba(${t.glow},.4)`);
|
||
set("--scan", s.scanlines === "off" ? "transparent" : "rgba(0,0,0,.13)");
|
||
}
|
||
|
||
/* ── Verhalten ────────────────────────────────────────────────────────── */
|
||
|
||
function render() {
|
||
const nav = root.getElementById("apps");
|
||
const menuApps = root.getElementById("menuApps");
|
||
nav.innerHTML = "";
|
||
menuApps.innerHTML = "";
|
||
|
||
apps.forEach((app) => {
|
||
if (app.id === "honeyos") return; // steckt schon links im Logo
|
||
|
||
const a = document.createElement("a");
|
||
a.className = "app";
|
||
a.href = app.url;
|
||
a.textContent = app.name;
|
||
if (app.id === current) a.setAttribute("aria-current", "page");
|
||
nav.appendChild(a);
|
||
|
||
const m = document.createElement("a");
|
||
m.href = app.url;
|
||
m.setAttribute("role", "menuitem");
|
||
m.textContent = (app.id === current ? "▸ " : " ") + app.name;
|
||
menuApps.appendChild(m);
|
||
});
|
||
}
|
||
|
||
/**
|
||
* Zeigt an, wer angemeldet ist. Die Leiste steckt in der App selbst, der
|
||
* Aufruf geht also an denselben Ursprung — kein CORS, keine Freigabe nötig.
|
||
* Antwortet die App nicht wie erwartet, bleibt das Feld leer und niemand
|
||
* merkt etwas: die Anzeige ist eine Zugabe, keine Zusicherung.
|
||
*/
|
||
async function showUser() {
|
||
const me = apps.find((a) => a.id === current);
|
||
if (!me || !me.me) return;
|
||
try {
|
||
const headers = {};
|
||
if (me.tokenKey) {
|
||
const tok = localStorage.getItem(me.tokenKey);
|
||
if (tok) headers.Authorization = "Bearer " + tok;
|
||
}
|
||
const res = await fetch(url(me, me.me), { credentials: "same-origin", cache: "no-store", headers });
|
||
if (!res.ok) return;
|
||
const data = await res.json();
|
||
const u = (data && (data.user || data.profile)) || data || {};
|
||
const name = u.display_name || u.displayName || u.name || u.username || u.preferred_username;
|
||
if (!name) return;
|
||
const el = root.getElementById("user");
|
||
el.textContent = name;
|
||
el.hidden = false;
|
||
} catch {
|
||
/* nicht angemeldet, kein Endpunkt, kein Netz — alles kein Grund zu lärmen */
|
||
}
|
||
}
|
||
|
||
function url(app, path) {
|
||
if (!path) return app.url;
|
||
if (/^https?:\/\//i.test(path)) return path;
|
||
return app.url.replace(/\/+$/, "") + (path.startsWith("/") ? path : "/" + path);
|
||
}
|
||
|
||
function clock() {
|
||
root.getElementById("clock").textContent = new Date().toLocaleTimeString("de-DE", {
|
||
hour: "2-digit",
|
||
minute: "2-digit",
|
||
});
|
||
}
|
||
|
||
function mount() {
|
||
document.body.appendChild(host);
|
||
|
||
// Der Seite Platz verschaffen. `--honeybar-h` steht bereit, falls eine App
|
||
// ihre eigene 100vh-Rechnung anpassen muss (siehe README).
|
||
document.documentElement.style.setProperty("--honeybar-h", BAR_H + "px");
|
||
if (pushMode === "body") {
|
||
const cs = getComputedStyle(document.body);
|
||
document.body.style.paddingTop = parseFloat(cs.paddingTop || 0) + BAR_H + "px";
|
||
}
|
||
|
||
render();
|
||
applySettings(settings);
|
||
clock();
|
||
setInterval(clock, 20000);
|
||
|
||
root.getElementById("home").href = homeUrl;
|
||
|
||
const menu = root.getElementById("menu");
|
||
const btn = root.getElementById("menuBtn");
|
||
btn.addEventListener("click", (e) => {
|
||
e.stopPropagation();
|
||
const open = menu.dataset.open === "1";
|
||
menu.dataset.open = open ? "0" : "1";
|
||
btn.setAttribute("aria-expanded", String(!open));
|
||
});
|
||
// Klick daneben schließt — das Ereignis muss die Grenze des Shadow DOM
|
||
// in beide Richtungen überleben, deshalb beide Wurzeln.
|
||
const close = () => {
|
||
menu.dataset.open = "0";
|
||
btn.setAttribute("aria-expanded", "false");
|
||
};
|
||
document.addEventListener("click", close);
|
||
root.addEventListener("click", (e) => {
|
||
if (!e.composedPath().includes(menu) && e.target !== btn) close();
|
||
});
|
||
|
||
root.getElementById("hide").addEventListener("click", () => {
|
||
try {
|
||
localStorage.setItem(LS_HIDDEN, "1");
|
||
} catch {
|
||
/* dann eben nur für diesen Aufruf */
|
||
}
|
||
unmount();
|
||
mountNub();
|
||
});
|
||
}
|
||
|
||
/**
|
||
* Eingeklappt bleibt ein 3 px hoher Strich am oberen Rand stehen. Er nimmt
|
||
* praktisch keinen Platz, liegt über dem Inhalt statt ihn zu schieben — und
|
||
* ist der Weg zurück. Ganz verschwinden darf die Leiste nicht: wer sie einmal
|
||
* weggeklickt hat, käme sonst nur noch über die Entwicklerkonsole an sie heran.
|
||
*/
|
||
let nub = null;
|
||
|
||
function mountNub() {
|
||
if (nub) return;
|
||
nub = document.createElement("honey-bar-nub");
|
||
nub.style.cssText = [
|
||
"position:fixed", "top:0", "left:0", "right:0", "height:3px",
|
||
"z-index:2147483000", "cursor:pointer", "display:block",
|
||
].join(";");
|
||
nub.title = "HoneyOS-Leiste einblenden";
|
||
const r = nub.attachShadow({ mode: "open" });
|
||
r.innerHTML = `
|
||
<style>
|
||
.strich {
|
||
height: 3px;
|
||
background: linear-gradient(90deg, #6b4718, #ffb641 50%, #6b4718);
|
||
opacity: .55;
|
||
transition: opacity .15s, height .15s;
|
||
}
|
||
:host(:hover) .strich { opacity: 1; height: 3px; }
|
||
</style>
|
||
<div class="strich"></div>`;
|
||
|
||
nub.addEventListener("click", () => {
|
||
forget();
|
||
nub.remove();
|
||
nub = null;
|
||
mount();
|
||
showUser();
|
||
});
|
||
document.body.appendChild(nub);
|
||
}
|
||
|
||
function forget() {
|
||
try {
|
||
localStorage.removeItem(LS_HIDDEN);
|
||
} catch {
|
||
/* dann gilt es nur für diesen Aufruf */
|
||
}
|
||
}
|
||
|
||
function unmount() {
|
||
host.remove();
|
||
if (pushMode === "body") {
|
||
const cs = getComputedStyle(document.body);
|
||
document.body.style.paddingTop = Math.max(0, parseFloat(cs.paddingTop || 0) - BAR_H) + "px";
|
||
}
|
||
document.documentElement.style.removeProperty("--honeybar-h");
|
||
}
|
||
|
||
async function start() {
|
||
let hidden = false;
|
||
try {
|
||
hidden = localStorage.getItem(LS_HIDDEN) === "1";
|
||
} catch {
|
||
/* kein Speicher, Leiste bleibt sichtbar */
|
||
}
|
||
// ?honeybar=1 holt sie zurück, falls der Strich einmal übersehen wird.
|
||
if (hidden && new URLSearchParams(location.search).get("honeybar") === "1") {
|
||
hidden = false;
|
||
forget();
|
||
}
|
||
if (hidden) {
|
||
if (document.body) mountNub();
|
||
else document.addEventListener("DOMContentLoaded", mountNub, { once: true });
|
||
return;
|
||
}
|
||
|
||
if (appsUrl) {
|
||
try {
|
||
// credentials: die Sitzung liegt auf der HoneyOS-Domain, und die ist
|
||
// dieselbe Site wie diese hier — sonst käme das Cookie nicht mit.
|
||
const res = await fetch(appsUrl, {
|
||
cache: "no-store",
|
||
credentials: "include",
|
||
headers: appsKey ? { "X-HoneyOS-Key": appsKey } : {},
|
||
});
|
||
if (res.ok) {
|
||
const data = await res.json();
|
||
if (Array.isArray(data.apps) && data.apps.length) {
|
||
apps = [{ id: "honeyos", name: "DESKTOP", url: homeUrl }].concat(data.apps);
|
||
}
|
||
settings = data.settings || null;
|
||
}
|
||
} catch {
|
||
/* nicht angemeldet, kein CORS, kein Netz → eingebaute Liste;
|
||
die Leiste bleibt ein Umschalter, nur ohne frische Namen */
|
||
}
|
||
}
|
||
|
||
if (document.body) mount();
|
||
else document.addEventListener("DOMContentLoaded", mount, { once: true });
|
||
|
||
showUser();
|
||
}
|
||
|
||
start();
|
||
})();
|