diff --git a/public/js/ui.js b/public/js/ui.js
new file mode 100644
index 0000000..223cb9c
--- /dev/null
+++ b/public/js/ui.js
@@ -0,0 +1,42 @@
+import { tr, ldoc } from './i18n.js';
+import { state } from './state.js';
+
+export function tpl(id) {
+  const el = document.getElementById(id).content.cloneNode(true).firstElementChild;
+  el.querySelectorAll('[data-t]').forEach(n => { n.textContent = tr(n.dataset.t); });
+  el.querySelectorAll('[data-ph]').forEach(n => { n.placeholder = tr(n.dataset.ph); });
+  el.querySelectorAll('[data-val]').forEach(n => { n.value = tr(n.dataset.val); });
+  return el;
+}
+
+export function showToast(msg) {
+  const t = document.createElement('div');
+  t.className = 'toast';
+  t.textContent = msg;
+  document.body.appendChild(t);
+  setTimeout(() => t.remove(), 3000);
+}
+
+const OV_CSS = 'display:flex;position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.5);align-items:flex-end;justify-content:center;animation:fi .2s ease';
+
+export function closeOv() {
+  const o = document.getElementById('ov');
+  o.style.display = 'none';
+  o.innerHTML = '';
+}
+
+export function showSheet(content, dismissable) {
+  const o = document.getElementById('ov');
+  o.style.cssText = OV_CSS;
+  const sheet = tpl('tpl-sheet');
+  sheet.appendChild(content);
+  o.innerHTML = '';
+  o.appendChild(sheet);
+  o.onclick = dismissable !== false ? e => { if (e.target === o) closeOv(); } : null;
+}
+
+export function updateHeader() {
+  document.getElementById('tlbl').textContent = state.TODAY.toLocaleDateString(
+    ldoc(), { weekday: 'long', day: 'numeric', month: 'long' }
+  );
+}