From f2bce812a8ff3741fb2f10657da024f01adf9864 Mon Sep 17 00:00:00 2001
From: GnomeZworc <nicolas.boufidjeline@g3e.fr>
Date: Wed, 10 Jun 2026 23:12:41 +0200
Subject: [PATCH] first commit

Signed-off-by: GnomeZworc <nicolas.boufidjeline@g3e.fr>
---
 logout-button.css | 30 ++++++++++++++++++++++++++++++
 logout-button.js  | 33 +++++++++++++++++++++++++++++++++
 manifest.json     |  5 +++++
 3 files changed, 68 insertions(+)
 create mode 100644 logout-button.css
 create mode 100644 logout-button.js
 create mode 100644 manifest.json

diff --git a/logout-button.css b/logout-button.css
new file mode 100644
index 0000000..2a6aa10
--- /dev/null
+++ b/logout-button.css
@@ -0,0 +1,30 @@
+:host {
+  display: inline-flex;
+}
+
+button {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  background: transparent;
+  border: 1px solid #313244;
+  border-radius: 6px;
+  padding: 7px 12px;
+  color: #a6adc8;
+  font-size: 13px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  cursor: pointer;
+  transition: background 0.12s, color 0.12s, border-color 0.12s;
+}
+
+button:hover {
+  background: #313244;
+  color: #f38ba8;
+  border-color: #f38ba8;
+}
+
+.icon { display: flex; align-items: center; }
+
+/* compact attribute — icon only */
+:host([compact]) button { padding: 7px; }
+:host([compact]) .label { display: none; }
diff --git a/logout-button.js b/logout-button.js
new file mode 100644
index 0000000..69b651f
--- /dev/null
+++ b/logout-button.js
@@ -0,0 +1,33 @@
+const CSS = new URL('./logout-button.css', import.meta.url).href
+
+const ICON = `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>`
+
+class LogoutButton extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' })
+    this.shadowRoot.innerHTML = `
+      <link rel="stylesheet" href="${CSS}">
+      <button type="button" title="Log out">
+        <span class="icon">${ICON}</span>
+        <span class="label">Log out</span>
+      </button>
+    `
+    this.shadowRoot.querySelector('button')
+      .addEventListener('click', () => this.#logout())
+  }
+
+  #gate() {
+    return document.querySelector('login-gate, [data-auth-gate]')
+  }
+
+  #logout() {
+    const gate = this.#gate()
+    if (gate?.logout) {
+      gate.logout()
+    } else {
+      console.warn('logout-button: no auth gate with logout() found in document')
+    }
+  }
+}
+
+customElements.define('logout-button', LogoutButton)
diff --git a/manifest.json b/manifest.json
new file mode 100644
index 0000000..0abc50b
--- /dev/null
+++ b/manifest.json
@@ -0,0 +1,5 @@
+{
+  "tag": "logout-button",
+  "version": "0.1.0",
+  "description": "Drop-anywhere button that clears the session via login-gate.logout(). Reusable in header, members panel, etc."
+}