Web frontend

web/src/components/AppHeader.tsx

@@ -0,0 +1,39 @@
+import type { ReactNode } from "react";
+
+interface Props {
+  /** Shown next to the title when the mouse is reachable but the firmware is not. */
+  status?: ReactNode;
+}
+
+export function AppHeader({ status }: Props) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 16,
+        // The status bar is translucent in standalone mode, so make room for it.
+        padding: "calc(18px + env(safe-area-inset-top)) 32px 6px",
+        flex: "none",
+      }}
+    >
+      <img
+        src="/dolphin-mascot.png"
+        alt=""
+        style={{ width: 64, height: 64, objectFit: "contain" }}
+      />
+      <div
+        style={{
+          fontSize: 34,
+          fontWeight: 900,
+          color: "var(--paper)",
+          textShadow: "0 3px 14px oklch(15% 0.05 210 / .5)",
+        }}
+      >
+        Musik Delphin
+      </div>
+      {status}
+    </div>
+  );
+}