Port PDF/Office support, message editor, overlays, key setter

2025-10-01 17:31:13 +02:00
parent b67c10dfb1
commit b3a7b35ec5
17 changed files with 2462 additions and 18 deletions
@@ -0,0 +1,53 @@
+import { html } from "@mariozechner/mini-lit";
+import { LitElement } from "lit";
+import { property } from "lit/decorators.js";
+
+export class ModeToggle extends LitElement {
+	@property({ type: Array }) modes: string[] = ["Mode 1", "Mode 2"];
+	@property({ type: Number }) selectedIndex = 0;
+
+	protected override createRenderRoot(): HTMLElement | DocumentFragment {
+		return this;
+	}
+
+	private setMode(index: number) {
+		if (this.selectedIndex !== index && index >= 0 && index < this.modes.length) {
+			this.selectedIndex = index;
+			this.dispatchEvent(
+				new CustomEvent<{ index: number; mode: string }>("mode-change", {
+					detail: { index, mode: this.modes[index] },
+					bubbles: true,
+				}),
+			);
+		}
+	}
+
+	override render() {
+		if (this.modes.length < 2) return html``;
+
+		return html`
+			<div class="inline-flex items-center h-7 rounded-md overflow-hidden border border-border bg-muted/60">
+				${this.modes.map(
+					(mode, index) => html`
+						<button
+							class="px-3 h-full flex items-center text-sm font-medium transition-colors ${
+								index === this.selectedIndex
+									? "bg-card text-foreground shadow-sm"
+									: "text-muted-foreground hover:text-accent-foreground"
+							}"
+							@click=${() => this.setMode(index)}
+							title="${mode}"
+						>
+							${mode}
+						</button>
+					`,
+				)}
+			</div>
+		`;
+	}
+}
+
+// Register the custom element only once
+if (!customElements.get("mode-toggle")) {
+	customElements.define("mode-toggle", ModeToggle);
+}