Add emote management UI at /manage

Adds a server-side HTML management page and supporting backend for full CRUD on emotes. The /manage prefix is kept isolated so an auth middleware can be applied to it later without touching other routes. - GET /manage — serves the management UI (add, edit, delete, search) - GET /manage/emotes — admin JSON endpoint with uuid and alias included - AdminEmoteResponse model for the expanded admin representation - Client-side search filters by name or alias as you type
2026-04-28 03:14:54 +02:00
parent 6a86cc8cce
commit c13f5b9a88
6 changed files with 485 additions and 0 deletions
@@ -7,6 +7,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

 ## [Unreleased]

+### Added
+- Management UI at `GET /manage` for adding, editing, and deleting emotes.
+- `GET /manage/emotes` — admin JSON endpoint returning full emote data (uuid,
+  name, alias, url, timestamps) for use by the management UI.
+- `AdminEmoteResponse` model exposing `uuid` and `alias` fields not present in
+  the public `EmoteResponse`.
+- Client-side search on the management page filtering emotes by name or alias.
+
 ## [0.2.4] - 2026-04-11

 ### Fixed
@@ -60,6 +60,8 @@ async fn main() {
        .route("/emotes", post(routes::emotes::create_emote))
        .route("/emotes/{uuid}", put(routes::emotes::update_emote))
        .route("/emotes/{uuid}", delete(routes::emotes::delete_emote))
+        .route("/manage", get(routes::manage::manage_root))
+        .route("/manage/emotes", get(routes::manage::list_admin_emotes))
        .layer(TraceLayer::new_for_http())
        .with_state(state);

@@ -40,6 +40,17 @@ pub struct EmoteResponse {
    pub modified: DateTime<Utc>,
 }

+/// Extended JSON representation used by the management API (includes uuid and alias).
+#[derive(Debug, Serialize, Deserialize)]
+pub struct AdminEmoteResponse {
+    pub uuid: String,
+    pub name: String,
+    pub alias: Option<String>,
+    pub url: String,
+    pub created: DateTime<Utc>,
+    pub modified: DateTime<Utc>,
+}
+
 /// Payload for updating an existing emote.
 #[derive(Debug, Deserialize)]
 pub struct UpdateEmoteRequest {
@@ -0,0 +1,43 @@
+use axum::{
+    extract::State,
+    http::StatusCode,
+    response::{Html, IntoResponse, Json},
+};
+use serde_json::json;
+
+use crate::{models::AdminEmoteResponse, AppState};
+
+/// GET /manage
+/// Serves the emote management HTML page.
+pub async fn manage_root() -> impl IntoResponse {
+    Html(include_str!("../templates/manage.html"))
+}
+
+/// GET /manage/emotes
+/// Returns all emotes with full admin data (uuid, alias included).
+pub async fn list_admin_emotes(State(state): State<AppState>) -> impl IntoResponse {
+    match state.db.list_emotes().await {
+        Ok(rows) => {
+            let emotes: Vec<AdminEmoteResponse> = rows
+                .into_iter()
+                .map(|row| AdminEmoteResponse {
+                    uuid: row.uuid.clone(),
+                    name: row.name.clone(),
+                    alias: row.alias.clone(),
+                    url: state.storage.public_url(&row.image_key),
+                    created: row.created_dt(),
+                    modified: row.modified_dt(),
+                })
+                .collect();
+            (StatusCode::OK, Json(json!({"emotes": emotes}))).into_response()
+        }
+        Err(e) => {
+            tracing::error!("Failed to list emotes: {e}");
+            (
+                StatusCode::INTERNAL_SERVER_ERROR,
+                Json(json!({"error": "Failed to list emotes"})),
+            )
+                .into_response()
+        }
+    }
+}
@@ -1,3 +1,4 @@
 pub mod emotes;
 pub mod health;
+pub mod manage;
 pub mod version;
@@ -0,0 +1,420 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>MIKEBASE — Manage</title>
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body { font-family: system-ui, -apple-system, sans-serif; background: #222222; color: #ffffff; }
+  nav {
+    height: 60px; display: flex; align-items: center; justify-content: space-between;
+    padding: 0 24px; background: #171717; border-bottom: 2px solid #4a0000;
+    box-shadow: 0 2px 12px rgba(74,0,0,0.5); position: relative; z-index: 10;
+  }
+  nav .logo { font-size: 1.5rem; letter-spacing: 0.08em; color: #ffffff; }
+  nav .logo strong { font-weight: 700; color: #ff4d4d; text-shadow: 0 0 8px rgba(74,0,0,0.8); }
+  nav .logo span { font-weight: 300; }
+  nav .logo .sub { font-size: 0.7rem; font-weight: 400; color: #888; letter-spacing: 0.15em; margin-left: 8px; vertical-align: middle; }
+  nav a.back { font-size: 0.85rem; color: #888; text-decoration: none; transition: color 0.2s; }
+  nav a.back:hover { color: #ff4d4d; }
+
+  .toolbar {
+    display: flex; align-items: center; gap: 12px;
+    padding: 20px 24px 16px;
+  }
+  .search-wrap { position: relative; flex: 1; max-width: 360px; }
+  .search-wrap input {
+    width: 100%; padding: 8px 12px 8px 36px;
+    background: #171717; border: 1px solid #333; border-radius: 8px;
+    color: #fff; font-size: 0.9rem; outline: none;
+    transition: border-color 0.2s;
+  }
+  .search-wrap input:focus { border-color: #4a0000; }
+  .search-wrap input::placeholder { color: #555; }
+  .search-wrap svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); opacity: 0.4; }
+  button.add-btn {
+    margin-left: auto; padding: 8px 18px;
+    background: #4a0000; border: none; border-radius: 8px;
+    color: #fff; font-size: 0.9rem; cursor: pointer;
+    transition: background 0.2s, box-shadow 0.2s;
+  }
+  button.add-btn:hover { background: #6b0000; box-shadow: 0 0 12px rgba(74,0,0,0.6); }
+
+  .list { padding: 0 24px 40px; }
+  table { width: 100%; border-collapse: collapse; }
+  thead th {
+    text-align: left; font-size: 0.75rem; font-weight: 600;
+    letter-spacing: 0.08em; text-transform: uppercase;
+    color: #666; padding: 0 12px 10px; border-bottom: 1px solid #333;
+  }
+  tbody tr { border-bottom: 1px solid #2a2a2a; transition: background 0.15s; }
+  tbody tr:hover { background: rgba(74,0,0,0.08); }
+  tbody td { padding: 10px 12px; vertical-align: middle; }
+  td.td-img img { width: 48px; height: 48px; object-fit: contain; border-radius: 6px; }
+  td.td-name { font-size: 0.9rem; }
+  td.td-name .code { color: #ff4d4d; font-weight: 500; }
+  td.td-alias { font-size: 0.85rem; color: #888; }
+  td.td-actions { text-align: right; white-space: nowrap; }
+  .btn-edit, .btn-del, .btn-del-confirm {
+    padding: 5px 13px; border-radius: 6px; border: none;
+    font-size: 0.8rem; cursor: pointer; transition: background 0.2s;
+  }
+  .btn-edit { background: #2a2a2a; color: #ccc; margin-right: 6px; }
+  .btn-edit:hover { background: #383838; color: #fff; }
+  .btn-del { background: transparent; border: 1px solid #4a0000; color: #cc3333; }
+  .btn-del:hover { background: #4a0000; color: #fff; }
+  .btn-del-confirm { background: #8b0000; color: #fff; border: none; margin-right: 6px; }
+  .btn-del-confirm:hover { background: #a00000; }
+  .btn-cancel-del { background: transparent; border: 1px solid #444; color: #888; padding: 5px 13px; border-radius: 6px; font-size: 0.8rem; cursor: pointer; }
+  .btn-cancel-del:hover { border-color: #666; color: #ccc; }
+
+  .empty { padding: 48px; text-align: center; color: #555; }
+
+  /* Modal */
+  .overlay {
+    display: none; position: fixed; inset: 0;
+    background: rgba(0,0,0,0.7); z-index: 100;
+    align-items: center; justify-content: center;
+  }
+  .overlay.open { display: flex; }
+  .modal {
+    background: #1a1a1a; border: 1px solid #3a0000;
+    border-radius: 12px; padding: 28px 32px;
+    width: 100%; max-width: 420px;
+    box-shadow: 0 0 40px rgba(74,0,0,0.4);
+  }
+  .modal h2 { font-size: 1.1rem; margin-bottom: 20px; color: #fff; }
+  .field { margin-bottom: 16px; }
+  .field label { display: block; font-size: 0.8rem; color: #888; margin-bottom: 6px; letter-spacing: 0.05em; }
+  .field input[type=text], .field input[type=file] {
+    width: 100%; padding: 8px 12px;
+    background: #111; border: 1px solid #333; border-radius: 8px;
+    color: #fff; font-size: 0.9rem; outline: none;
+    transition: border-color 0.2s;
+  }
+  .field input[type=text]:focus { border-color: #4a0000; }
+  .field input[type=file] { color: #888; cursor: pointer; }
+  .field .hint { font-size: 0.75rem; color: #555; margin-top: 4px; }
+  .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }
+  .btn-submit {
+    padding: 8px 20px; background: #4a0000; border: none;
+    border-radius: 8px; color: #fff; font-size: 0.9rem; cursor: pointer;
+    transition: background 0.2s;
+  }
+  .btn-submit:hover { background: #6b0000; }
+  .btn-submit:disabled { opacity: 0.5; cursor: not-allowed; }
+  .btn-cancel {
+    padding: 8px 16px; background: transparent; border: 1px solid #444;
+    border-radius: 8px; color: #888; font-size: 0.9rem; cursor: pointer;
+    transition: border-color 0.2s, color 0.2s;
+  }
+  .btn-cancel:hover { border-color: #666; color: #ccc; }
+
+  /* Toast */
+  .toast {
+    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(8px);
+    background: #4a0000; color: #ffffff; padding: 10px 20px; border-radius: 8px;
+    font-size: 0.85rem; opacity: 0;
+    box-shadow: 0 0 16px rgba(74,0,0,0.7);
+    transition: opacity 0.3s ease, transform 0.3s ease;
+    pointer-events: none; z-index: 200;
+  }
+  .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
+  .toast.err { background: #5a1a1a; }
+</style>
+</head>
+<body>
+<nav>
+  <div class="logo">
+    <strong>MIKE</strong><span>BASE</span>
+    <span class="sub">MANAGE</span>
+  </div>
+  <a class="back" href="/">← Back to gallery</a>
+</nav>
+
+<div class="toolbar">
+  <div class="search-wrap">
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
+    </svg>
+    <input type="text" id="search" placeholder="Search by code or alias…" autocomplete="off">
+  </div>
+  <button class="add-btn" id="btn-add">+ Add Emote</button>
+</div>
+
+<div class="list">
+  <table id="table">
+    <thead>
+      <tr>
+        <th style="width:64px"></th>
+        <th>Code</th>
+        <th>Alias</th>
+        <th></th>
+      </tr>
+    </thead>
+    <tbody id="tbody"></tbody>
+  </table>
+  <div class="empty" id="empty" style="display:none">No emotes found.</div>
+</div>
+
+<!-- Add Modal -->
+<div class="overlay" id="overlay-add">
+  <div class="modal">
+    <h2>Add Emote</h2>
+    <form id="form-add">
+      <div class="field">
+        <label>NAME <span style="color:#555">(used as :code:)</span></label>
+        <input type="text" id="add-name" required autocomplete="off">
+      </div>
+      <div class="field">
+        <label>ALIAS <span style="color:#555">(optional)</span></label>
+        <input type="text" id="add-alias" autocomplete="off">
+      </div>
+      <div class="field">
+        <label>IMAGE</label>
+        <input type="file" id="add-file" accept="image/*" required>
+      </div>
+      <div class="modal-actions">
+        <button type="button" class="btn-cancel" id="cancel-add">Cancel</button>
+        <button type="submit" class="btn-submit" id="submit-add">Upload</button>
+      </div>
+    </form>
+  </div>
+</div>
+
+<!-- Edit Modal -->
+<div class="overlay" id="overlay-edit">
+  <div class="modal">
+    <h2>Edit Emote</h2>
+    <form id="form-edit">
+      <div class="field">
+        <label>NAME</label>
+        <input type="text" id="edit-name" required autocomplete="off">
+      </div>
+      <div class="field">
+        <label>ALIAS <span style="color:#555">(optional)</span></label>
+        <input type="text" id="edit-alias" autocomplete="off">
+        <div class="hint">To replace the image, delete this emote and re-add it.</div>
+      </div>
+      <div class="modal-actions">
+        <button type="button" class="btn-cancel" id="cancel-edit">Cancel</button>
+        <button type="submit" class="btn-submit" id="submit-edit">Save</button>
+      </div>
+    </form>
+  </div>
+</div>
+
+<div class="toast" id="toast"></div>
+
+<script>
+(function () {
+  var emotes = [];
+  var editUuid = null;
+  var toastTimer;
+
+  function showToast(msg, isErr) {
+    var t = document.getElementById('toast');
+    t.textContent = msg;
+    t.className = 'toast' + (isErr ? ' err' : '') + ' show';
+    clearTimeout(toastTimer);
+    toastTimer = setTimeout(function () { t.className = 'toast' + (isErr ? ' err' : ''); }, 2200);
+  }
+
+  // --- Data ---
+  function load() {
+    fetch('/manage/emotes')
+      .then(function (r) { if (!r.ok) throw new Error('HTTP ' + r.status); return r.json(); })
+      .then(function (data) {
+        emotes = data.emotes || [];
+        render(document.getElementById('search').value.trim().toLowerCase());
+      })
+      .catch(function (e) { showToast('Failed to load: ' + e.message, true); });
+  }
+
+  // --- Render ---
+  function render(filter) {
+    var tbody = document.getElementById('tbody');
+    var empty = document.getElementById('empty');
+    tbody.innerHTML = '';
+
+    var list = filter
+      ? emotes.filter(function (e) {
+          return e.name.toLowerCase().indexOf(filter) !== -1 ||
+            (e.alias && e.alias.toLowerCase().indexOf(filter) !== -1);
+        })
+      : emotes;
+
+    if (list.length === 0) {
+      empty.style.display = '';
+      document.getElementById('table').style.display = 'none';
+      return;
+    }
+    empty.style.display = 'none';
+    document.getElementById('table').style.display = '';
+
+    list.forEach(function (emote) {
+      var tr = document.createElement('tr');
+      tr.dataset.uuid = emote.uuid;
+
+      tr.innerHTML =
+        '<td class="td-img"><img src="' + esc(emote.url) + '" alt="' + esc(emote.name) + '" loading="lazy"></td>' +
+        '<td class="td-name"><span class="code">:' + esc(emote.name) + ':</span></td>' +
+        '<td class="td-alias">' + (emote.alias ? esc(emote.alias) : '<span style="color:#444">—</span>') + '</td>' +
+        '<td class="td-actions">' +
+          '<button class="btn-edit" data-uuid="' + esc(emote.uuid) + '" data-name="' + esc(emote.name) + '" data-alias="' + esc(emote.alias || '') + '">Edit</button>' +
+          '<button class="btn-del" data-uuid="' + esc(emote.uuid) + '">Delete</button>' +
+        '</td>';
+
+      tbody.appendChild(tr);
+    });
+  }
+
+  function esc(s) {
+    return String(s)
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;');
+  }
+
+  // --- Search ---
+  document.getElementById('search').addEventListener('input', function () {
+    render(this.value.trim().toLowerCase());
+  });
+
+  // --- Add ---
+  document.getElementById('btn-add').addEventListener('click', function () {
+    document.getElementById('form-add').reset();
+    document.getElementById('overlay-add').classList.add('open');
+    document.getElementById('add-name').focus();
+  });
+  document.getElementById('cancel-add').addEventListener('click', function () {
+    document.getElementById('overlay-add').classList.remove('open');
+  });
+  document.getElementById('overlay-add').addEventListener('click', function (e) {
+    if (e.target === this) this.classList.remove('open');
+  });
+
+  document.getElementById('form-add').addEventListener('submit', function (e) {
+    e.preventDefault();
+    var name = document.getElementById('add-name').value.trim();
+    var alias = document.getElementById('add-alias').value.trim();
+    var file = document.getElementById('add-file').files[0];
+    if (!name || !file) return;
+
+    var btn = document.getElementById('submit-add');
+    btn.disabled = true;
+    btn.textContent = 'Uploading…';
+
+    var fd = new FormData();
+    fd.append('name', name);
+    if (alias) fd.append('alias', alias);
+    fd.append('file', file);
+
+    fetch('/emotes', { method: 'POST', body: fd })
+      .then(function (r) {
+        if (!r.ok) return r.json().then(function (j) { throw new Error(j.error || 'HTTP ' + r.status); });
+        return r.json();
+      })
+      .then(function () {
+        document.getElementById('overlay-add').classList.remove('open');
+        showToast('Emote added');
+        load();
+      })
+      .catch(function (err) { showToast(err.message, true); })
+      .finally(function () { btn.disabled = false; btn.textContent = 'Upload'; });
+  });
+
+  // --- Edit ---
+  document.getElementById('cancel-edit').addEventListener('click', function () {
+    document.getElementById('overlay-edit').classList.remove('open');
+  });
+  document.getElementById('overlay-edit').addEventListener('click', function (e) {
+    if (e.target === this) this.classList.remove('open');
+  });
+
+  document.getElementById('tbody').addEventListener('click', function (e) {
+    var editBtn = e.target.closest('.btn-edit');
+    if (editBtn) {
+      editUuid = editBtn.dataset.uuid;
+      document.getElementById('edit-name').value = editBtn.dataset.name;
+      document.getElementById('edit-alias').value = editBtn.dataset.alias;
+      document.getElementById('overlay-edit').classList.add('open');
+      document.getElementById('edit-name').focus();
+      return;
+    }
+
+    var delBtn = e.target.closest('.btn-del');
+    if (delBtn) {
+      var uuid = delBtn.dataset.uuid;
+      var td = delBtn.closest('td');
+      td.innerHTML =
+        '<button class="btn-del-confirm" data-uuid="' + esc(uuid) + '">Confirm delete</button>' +
+        '<button class="btn-cancel-del">Cancel</button>';
+      return;
+    }
+
+    var confirmBtn = e.target.closest('.btn-del-confirm');
+    if (confirmBtn) {
+      var uuid = confirmBtn.dataset.uuid;
+      fetch('/emotes/' + encodeURIComponent(uuid), { method: 'DELETE' })
+        .then(function (r) {
+          if (!r.ok && r.status !== 204)
+            return r.json().then(function (j) { throw new Error(j.error || 'HTTP ' + r.status); });
+        })
+        .then(function () { showToast('Emote deleted'); load(); })
+        .catch(function (err) { showToast(err.message, true); load(); });
+      return;
+    }
+
+    var cancelDelBtn = e.target.closest('.btn-cancel-del');
+    if (cancelDelBtn) {
+      var tr = cancelDelBtn.closest('tr');
+      var uuid = tr.dataset.uuid;
+      var emote = emotes.find(function (em) { return em.uuid === uuid; });
+      if (emote) {
+        cancelDelBtn.closest('td').innerHTML =
+          '<button class="btn-edit" data-uuid="' + esc(emote.uuid) + '" data-name="' + esc(emote.name) + '" data-alias="' + esc(emote.alias || '') + '">Edit</button>' +
+          '<button class="btn-del" data-uuid="' + esc(emote.uuid) + '">Delete</button>';
+      }
+    }
+  });
+
+  document.getElementById('form-edit').addEventListener('submit', function (e) {
+    e.preventDefault();
+    if (!editUuid) return;
+    var name = document.getElementById('edit-name').value.trim();
+    var alias = document.getElementById('edit-alias').value.trim();
+    if (!name) return;
+
+    var btn = document.getElementById('submit-edit');
+    btn.disabled = true;
+    btn.textContent = 'Saving…';
+
+    var body = { name: name };
+    if (alias) body.alias = alias;
+
+    fetch('/emotes/' + encodeURIComponent(editUuid), {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body),
+    })
+      .then(function (r) {
+        if (!r.ok) return r.json().then(function (j) { throw new Error(j.error || 'HTTP ' + r.status); });
+        return r.json();
+      })
+      .then(function () {
+        document.getElementById('overlay-edit').classList.remove('open');
+        showToast('Emote updated');
+        load();
+      })
+      .catch(function (err) { showToast(err.message, true); })
+      .finally(function () { btn.disabled = false; btn.textContent = 'Save'; });
+  });
+
+  load();
+})();
+</script>
+</body>
+</html>