add footer and fix tooltips

components/chat-editor.js

@@ -1,6 +1,7 @@
 import { store } from './store.js';
 import './message-card.js';
 import './icon-arrow.js';
+import { initTooltips } from '../utils/tooltip.js';
 import { html } from '../utils/template.js';
 
 class ChatEditor extends HTMLElement {
@@ -121,16 +122,16 @@ class ChatEditor extends HTMLElement {
 			</style>
 			<div class="wrapper">
 				<div class="editor-header">
-					<button id="export-json" title="Export chat as JSON">Export</button>
-					<button id="import-json" title="Import chat from JSON">Import</button>
-					<button id="clear-chat" title="Clear all messages">Clear</button>
-					<button
-						id="toggle-theme"
-						title="Toggle theme"
-						aria-label="Toggle theme"
-					>
-						Theme
+					<button id="export-json" data-tooltip="Export chat as JSON">
+						Export
 					</button>
+					<button id="import-json" data-tooltip="Import chat from JSON">
+						Import
+					</button>
+					<button id="clear-chat" data-tooltip="Clear all messages">
+						Clear
+					</button>
+					<button id="toggle-theme" data-tooltip="Toggle theme">Theme</button>
 					<icon-arrow
 						text="Preview"
 						activates-mode="preview"
@@ -279,6 +280,7 @@ class ChatEditor extends HTMLElement {
 		store.load();
 		this.#syncRecipientInputs(store.getRecipient());
 		this.#render(store.getMessages());
+		initTooltips(this.shadowRoot, this);
 	}
 
 	disconnectedCallback() {
@@ -339,7 +341,6 @@ class ChatEditor extends HTMLElement {
 		const next = current === 'dark' ? 'light' : 'dark';
 		btn.textContent = next === 'dark' ? 'Dark' : 'Light';
 		btn.title = `Switch to ${next} theme`;
-		btn.setAttribute('aria-label', `Switch to ${next} theme`);
 	}
 
 	_onStoreChange(e) {

index.html

@@ -78,6 +78,18 @@
 				<chat-preview></chat-preview>
 			</section>
 		</main>
+		<footer class="footer">
+			<p>
+				Made by
+				<a href="https://peterchinman.com" target="_blank">Peter Chinman</a>.
+				See this project on GitHub
+				<a
+					href="https://github.com/peterchinman/message-simulator"
+					target="_blank"
+					>here</a
+				>.
+			</p>
+		</footer>
 		<script type="module" src="./components/chat-editor.js"></script>
 		<script type="module" src="./components/chat-preview.js"></script>
 	</body>

styles.css

@@ -110,25 +110,49 @@ html {
 
 body {
 	height: calc(var(--vh, 1dvh) * 100);
+	max-height: calc(var(--vh, 1dvh) * 100);
 	max-width: 100dvw;
 	overflow: hidden;
 	overscroll-behavior: none;
-
 	font-family: var(--font-base);
 	color: var(--color-ink);
+
+	display: flex;
+	flex-direction: column;
 }
 
 .app-container {
-	width: 100%;
-	height: 100%;
+	flex: 1 1 auto;
+	min-height: 0;
 	display: grid;
 	grid-template-columns: 1fr;
 }
 
+footer {
+	display: none;
+	background: var(--color-header);
+	/* border-top: 1px solid var(--color-edge); */
+	width: 100%;
+	flex: 0 0 auto;
+	color: var(--color-ink-subdued);
+	align-items: center;
+	justify-content: flex-start;
+	padding-inline: 4vw;
+	padding-block: 0.5rem;
+
+	a {
+		color: var(--color-bubble-self);
+	}
+}
+
 @media (min-width: 900px) {
 	.app-container {
 		grid-template-columns: 1fr 1fr;
 	}
+
+	footer {
+		display: flex;
+	}
 }
 .pane--editor,
 .pane--preview {
@@ -172,11 +196,8 @@ body {
 }
 
 @media (min-width: 900px) {
-	body {
-		padding: 4dvw;
-	}
-
 	.app-container {
+		padding: 4dvw;
 		gap: 4dvw;
 	}
 
@@ -200,14 +221,12 @@ body {
 
 	.pane {
 		min-height: 0;
-		height: 100%;
 	}
 
 	.pane--editor chat-editor,
 	.pane--preview chat-preview {
 		display: block;
 		min-height: 0;
-		height: 100%;
 		background: var(--color-page);
 
 		border-radius: calc(18rem / 14);

utils/tooltip.js

@@ -59,7 +59,6 @@ const TOOLTIP_CSS_TEXT = /* css */ `
 		font-size: calc(12rem / 14);
 		line-height: calc(16rem / 14);
 		opacity: 0;
-		transition: opacity 0.15s ease-in-out;
 		display: flex;
 		flex-direction: column;
 		gap: calc(4rem / 14);
@@ -232,7 +231,6 @@ export function initTooltips(root = document, hostElement = null) {
 
 		if (bubble) {
 			bubble.classList.toggle('has-subtext', Boolean(subtext));
-			// Match previous UX: delay before showing, but not before hiding
 			bubble.style.transitionDelay = '0.5s';
 		}