admindb 1.0.1 → 1.0.3

package/dist/public/js/views.js

@@ -1,176 +1,176 @@
-/* Views page: create / drop views, preview rows. */
-(function () {
-  'use strict';
-  const cfgEl = document.getElementById('views-config');
-  if (!cfgEl) return;
-
-  function escapeHtml(s) {
-    return (window.UI && UI.escapeHtml) ? UI.escapeHtml(s) : String(s == null ? '' : s);
-  }
-
-  function showError(el, msg) {
-    el.classList.remove('hidden');
-    el.innerHTML = '<div class="flex items-start gap-2.5 rounded-xl border border-error/40 bg-error/10 px-4 py-3 text-sm font-medium text-error"><span>' + escapeHtml(msg) + '</span></div>';
-  }
-
-  // ---- Editor gutter ------------------------------------------------------
-
-  const editor = document.getElementById('view-sql');
-  const gutter = document.getElementById('view-gutter');
-  function updateGutter() {
-    if (!gutter || !editor) return;
-    const lines = editor.value.split('\n').length;
-    let html = '';
-    for (let i = 1; i <= lines; i++) html += i + '\n';
-    gutter.textContent = html;
-    gutter.scrollTop = editor.scrollTop;
-  }
-  if (editor && gutter) {
-    editor.addEventListener('scroll', () => { gutter.scrollTop = editor.scrollTop; });
-    editor.addEventListener('input', updateGutter);
-    updateGutter();
-  }
-
-  // ---- New view form ------------------------------------------------------
-
-  const newBtn = document.getElementById('new-view');
-  const panel = document.getElementById('new-view-panel');
-  const nameInput = document.getElementById('view-name');
-  const sqlInput = document.getElementById('view-sql');
-  const errEl = document.getElementById('view-error');
-  const createBtn = document.getElementById('create-view');
-  const cancelBtn = document.getElementById('cancel-view');
-  const preview = document.getElementById('view-preview');
-  const previewCode = document.getElementById('view-preview-code');
-  const previewHint = document.getElementById('view-preview-hint');
-  let previewTimer = null;
-
-  function renderPreview() {
-    clearTimeout(previewTimer);
-    const name = (nameInput.value || '').trim();
-    const sql = (sqlInput.value || '').trim();
-    if (!name && !sql) {
-      preview.classList.add('hidden');
-      previewCode.textContent = '';
-      if (previewHint) previewHint.classList.remove('hidden');
-      return;
-    }
-    previewTimer = setTimeout(async () => {
-      try {
-        const data = await Api.post('/api/views/generate', { name, sql });
-        previewCode.textContent = data.sql;
-        preview.classList.remove('hidden');
-        if (previewHint) previewHint.classList.add('hidden');
-      } catch (e) {
-        preview.classList.add('hidden');
-        previewCode.textContent = '';
-        if (previewHint) previewHint.classList.remove('hidden');
-      }
-    }, 250);
-  }
-
-  if (newBtn && panel) {
-    newBtn.addEventListener('click', () => {
-      panel.classList.toggle('hidden');
-      if (!panel.classList.contains('hidden')) {
-        errEl.classList.add('hidden');
-        nameInput.focus();
-        renderPreview();
-      }
-    });
-  }
-  if (nameInput) nameInput.addEventListener('input', renderPreview);
-  if (sqlInput) sqlInput.addEventListener('input', renderPreview);
-
-  if (cancelBtn) {
-    cancelBtn.addEventListener('click', () => {
-      panel.classList.add('hidden');
-      errEl.classList.add('hidden');
-    });
-  }
-
-  if (createBtn) {
-    createBtn.addEventListener('click', async () => {
-      errEl.classList.add('hidden');
-      const name = (nameInput.value || '').trim();
-      const sql = (sqlInput.value || '').trim();
-      if (!name) return showError(errEl, 'View name is required.');
-      if (!sql) return showError(errEl, 'A SELECT statement is required.');
-      createBtn.disabled = true;
-      try {
-        const data = await Api.post('/api/views', { name, sql });
-        UI.showToast(data.message || 'View created.', 'success');
-        window.location.reload();
-      } catch (e) {
-        showError(errEl, e.message);
-      } finally {
-        createBtn.disabled = false;
-      }
-    });
-  }
-
-  // ---- Preview rows -------------------------------------------------------
-
-  document.querySelectorAll('.view-browse').forEach((btn) => {
-    btn.addEventListener('click', async () => {
-      const name = btn.dataset.view;
-      const tr = btn.closest('tr');
-      const previewTr = tr && tr.nextElementSibling;
-      if (!previewTr) return;
-      const container = previewTr.querySelector('td > div');
-      if (!container) return;
-      if (!previewTr.classList.contains('hidden')) {
-        previewTr.classList.add('hidden');
-        return;
-      }
-      container.innerHTML = '<p class="text-sm text-base-content/45">Loading…</p>';
-      try {
-        const data = await Api.get('/api/views/' + encodeURIComponent(name) + '/rows');
-        const rows = data.rows || [];
-        if (!rows.length) {
-          container.innerHTML = '<p class="text-sm text-base-content/45">View returned no rows.</p>';
-          previewTr.classList.remove('hidden');
-          return;
-        }
-        const cols = Object.keys(rows[0]);
-        let html = '<div class="overflow-x-auto rounded-lg border border-base-200"><table class="table table-xs">' +
-          '<thead><tr class="bg-base-200/70">' + cols.map((c) => '<th class="font-mono text-[11px]">' + escapeHtml(c) + '</th>').join('') + '</tr></thead><tbody>';
-        const shown = rows.slice(0, 50);
-        for (const row of shown) {
-          html += '<tr>' + cols.map((c) => {
-            const v = row[c];
-            const s = v == null ? '' : String(v);
-            const display = v == null ? '<span class="text-base-content/30">NULL</span>' : (s.length > 120 ? escapeHtml(s.slice(0, 120)) + '…' : escapeHtml(s));
-            return '<td class="max-w-xs truncate font-mono text-[12px]">' + display + '</td>';
-          }).join('') + '</tr>';
-        }
-        html += '</tbody></table></div>';
-        if (rows.length > shown.length) {
-          html += '<p class="mt-2 text-xs text-base-content/45">Showing first ' + shown.length + ' of ' + rows.length + ' row(s).</p>';
-        }
-        container.innerHTML = html;
-        previewTr.classList.remove('hidden');
-      } catch (e) {
-        container.innerHTML = '<p class="text-sm font-medium text-error">' + escapeHtml(e.message) + '</p>';
-        previewTr.classList.remove('hidden');
-      }
-    });
-  });
-
-  // ---- Drop view ----------------------------------------------------------
-
-  document.querySelectorAll('.view-drop').forEach((btn) => {
-    btn.addEventListener('click', async () => {
-      const name = btn.dataset.view;
-      if (!name) return;
-      if (!window.confirm('Drop view "' + name + '" permanently?')) return;
-      try {
-        const data = await Api.del('/api/views/' + encodeURIComponent(name));
-        UI.showToast(data.message || 'View dropped.', 'success');
-        window.location.reload();
-      } catch (e) {
-        UI.showError(e.message);
-      }
-    });
-  });
-})();
+/* Views page: create / drop views, preview rows. */
+(function () {
+  'use strict';
+  const cfgEl = document.getElementById('views-config');
+  if (!cfgEl) return;
+
+  function escapeHtml(s) {
+    return (window.UI && UI.escapeHtml) ? UI.escapeHtml(s) : String(s == null ? '' : s);
+  }
+
+  function showError(el, msg) {
+    el.classList.remove('hidden');
+    el.innerHTML = '<div class="flex items-start gap-2.5 rounded-xl border border-error/40 bg-error/10 px-4 py-3 text-sm font-medium text-error"><span>' + escapeHtml(msg) + '</span></div>';
+  }
+
+  // ---- Editor gutter ------------------------------------------------------
+
+  const editor = document.getElementById('view-sql');
+  const gutter = document.getElementById('view-gutter');
+  function updateGutter() {
+    if (!gutter || !editor) return;
+    const lines = editor.value.split('\n').length;
+    let html = '';
+    for (let i = 1; i <= lines; i++) html += i + '\n';
+    gutter.textContent = html;
+    gutter.scrollTop = editor.scrollTop;
+  }
+  if (editor && gutter) {
+    editor.addEventListener('scroll', () => { gutter.scrollTop = editor.scrollTop; });
+    editor.addEventListener('input', updateGutter);
+    updateGutter();
+  }
+
+  // ---- New view form ------------------------------------------------------
+
+  const newBtn = document.getElementById('new-view');
+  const panel = document.getElementById('new-view-panel');
+  const nameInput = document.getElementById('view-name');
+  const sqlInput = document.getElementById('view-sql');
+  const errEl = document.getElementById('view-error');
+  const createBtn = document.getElementById('create-view');
+  const cancelBtn = document.getElementById('cancel-view');
+  const preview = document.getElementById('view-preview');
+  const previewCode = document.getElementById('view-preview-code');
+  const previewHint = document.getElementById('view-preview-hint');
+  let previewTimer = null;
+
+  function renderPreview() {
+    clearTimeout(previewTimer);
+    const name = (nameInput.value || '').trim();
+    const sql = (sqlInput.value || '').trim();
+    if (!name && !sql) {
+      preview.classList.add('hidden');
+      previewCode.textContent = '';
+      if (previewHint) previewHint.classList.remove('hidden');
+      return;
+    }
+    previewTimer = setTimeout(async () => {
+      try {
+        const data = await Api.post('/api/views/generate', { name, sql });
+        previewCode.textContent = data.sql;
+        preview.classList.remove('hidden');
+        if (previewHint) previewHint.classList.add('hidden');
+      } catch (e) {
+        preview.classList.add('hidden');
+        previewCode.textContent = '';
+        if (previewHint) previewHint.classList.remove('hidden');
+      }
+    }, 250);
+  }
+
+  if (newBtn && panel) {
+    newBtn.addEventListener('click', () => {
+      panel.classList.toggle('hidden');
+      if (!panel.classList.contains('hidden')) {
+        errEl.classList.add('hidden');
+        nameInput.focus();
+        renderPreview();
+      }
+    });
+  }
+  if (nameInput) nameInput.addEventListener('input', renderPreview);
+  if (sqlInput) sqlInput.addEventListener('input', renderPreview);
+
+  if (cancelBtn) {
+    cancelBtn.addEventListener('click', () => {
+      panel.classList.add('hidden');
+      errEl.classList.add('hidden');
+    });
+  }
+
+  if (createBtn) {
+    createBtn.addEventListener('click', async () => {
+      errEl.classList.add('hidden');
+      const name = (nameInput.value || '').trim();
+      const sql = (sqlInput.value || '').trim();
+      if (!name) return showError(errEl, 'View name is required.');
+      if (!sql) return showError(errEl, 'A SELECT statement is required.');
+      createBtn.disabled = true;
+      try {
+        const data = await Api.post('/api/views', { name, sql });
+        UI.showToast(data.message || 'View created.', 'success');
+        window.location.reload();
+      } catch (e) {
+        showError(errEl, e.message);
+      } finally {
+        createBtn.disabled = false;
+      }
+    });
+  }
+
+  // ---- Preview rows -------------------------------------------------------
+
+  document.querySelectorAll('.view-browse').forEach((btn) => {
+    btn.addEventListener('click', async () => {
+      const name = btn.dataset.view;
+      const tr = btn.closest('tr');
+      const previewTr = tr && tr.nextElementSibling;
+      if (!previewTr) return;
+      const container = previewTr.querySelector('td > div');
+      if (!container) return;
+      if (!previewTr.classList.contains('hidden')) {
+        previewTr.classList.add('hidden');
+        return;
+      }
+      container.innerHTML = '<p class="text-sm text-base-content/45">Loading…</p>';
+      try {
+        const data = await Api.get('/api/views/' + encodeURIComponent(name) + '/rows');
+        const rows = data.rows || [];
+        if (!rows.length) {
+          container.innerHTML = '<p class="text-sm text-base-content/45">View returned no rows.</p>';
+          previewTr.classList.remove('hidden');
+          return;
+        }
+        const cols = Object.keys(rows[0]);
+        let html = '<div class="overflow-x-auto rounded-lg border border-base-200"><table class="table table-xs">' +
+          '<thead><tr class="bg-base-200/70">' + cols.map((c) => '<th class="font-mono text-[11px]">' + escapeHtml(c) + '</th>').join('') + '</tr></thead><tbody>';
+        const shown = rows.slice(0, 50);
+        for (const row of shown) {
+          html += '<tr>' + cols.map((c) => {
+            const v = row[c];
+            const s = v == null ? '' : String(v);
+            const display = v == null ? '<span class="text-base-content/30">NULL</span>' : (s.length > 120 ? escapeHtml(s.slice(0, 120)) + '…' : escapeHtml(s));
+            return '<td class="max-w-xs truncate font-mono text-[12px]">' + display + '</td>';
+          }).join('') + '</tr>';
+        }
+        html += '</tbody></table></div>';
+        if (rows.length > shown.length) {
+          html += '<p class="mt-2 text-xs text-base-content/45">Showing first ' + shown.length + ' of ' + rows.length + ' row(s).</p>';
+        }
+        container.innerHTML = html;
+        previewTr.classList.remove('hidden');
+      } catch (e) {
+        container.innerHTML = '<p class="text-sm font-medium text-error">' + escapeHtml(e.message) + '</p>';
+        previewTr.classList.remove('hidden');
+      }
+    });
+  });
+
+  // ---- Drop view ----------------------------------------------------------
+
+  document.querySelectorAll('.view-drop').forEach((btn) => {
+    btn.addEventListener('click', async () => {
+      const name = btn.dataset.view;
+      if (!name) return;
+      if (!window.confirm('Drop view "' + name + '" permanently?')) return;
+      try {
+        const data = await Api.del('/api/views/' + encodeURIComponent(name));
+        UI.showToast(data.message || 'View dropped.', 'success');
+        window.location.reload();
+      } catch (e) {
+        UI.showError(e.message);
+      }
+    });
+  });
+})();

package/dist/views/layouts/main.hbs

@@ -1,49 +1,49 @@
-<!DOCTYPE html>
-<html lang="en" data-theme="admindb">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>{{title}} · AdminDB</title>
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
-  <link rel="stylesheet" href="{{basePath}}/css/app.css" />
-  <script>
-    window.APP = { basePath: {{{json basePath}}}, readonly: {{{json readonly}}} };
-    // Apply the saved theme before first paint to avoid a flash.
-    (function () {
-      try {
-        var t = localStorage.getItem('admindb-theme');
-        if (t === 'dark') document.documentElement.setAttribute('data-theme', 'admindbDark');
-      } catch (e) {}
-    })();
-  </script>
-  <script src="{{basePath}}/js/api.js" defer></script>
-  <script src="{{basePath}}/js/app.js" defer></script>
-</head>
-<body class="min-h-screen bg-base-200 text-base-content">
-  {{#if readonly}}
-    <div class="flex items-center justify-center gap-2 bg-warning/15 px-4 py-2 text-center text-sm font-semibold text-warning">
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
-      Read-only mode — this database is open without write access. All writes are disabled.
-    </div>
-  {{/if}}
-  <div class="drawer lg:drawer-open">
-    <input id="sidebar-toggle" type="checkbox" class="drawer-toggle" />
-    <div class="drawer-content flex min-h-screen flex-col">
-      {{> navbar}}
-      <main class="mx-auto w-full max-w-[1500px] flex-1 px-4 py-6 sm:px-6 lg:px-8 lg:py-8">
-        {{{body}}}
-      </main>
-      <footer class="border-t border-base-300 px-6 py-4 text-center text-xs text-base-content/40">
-        AdminDB · a browser tool for SQLite databases
-      </footer>
-    </div>
-    <div class="drawer-side z-40">
-      <label for="sidebar-toggle" aria-label="close sidebar" class="drawer-overlay"></label>
-      {{> sidebar}}
-    </div>
-  </div>
-  <div id="toast-container" class="pointer-events-none fixed inset-x-0 top-4 z-50 flex flex-col items-center gap-2 px-4"></div>
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="en" data-theme="admindb">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>{{title}} · AdminDB</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="{{basePath}}/css/app.css" />
+  <script>
+    window.APP = { basePath: {{{json basePath}}}, readonly: {{{json readonly}}} };
+    // Apply the saved theme before first paint to avoid a flash.
+    (function () {
+      try {
+        var t = localStorage.getItem('admindb-theme');
+        if (t === 'dark') document.documentElement.setAttribute('data-theme', 'admindbDark');
+      } catch (e) {}
+    })();
+  </script>
+  <script src="{{basePath}}/js/api.js" defer></script>
+  <script src="{{basePath}}/js/app.js" defer></script>
+</head>
+<body class="min-h-screen bg-base-200 text-base-content">
+  {{#if readonly}}
+    <div class="flex items-center justify-center gap-2 bg-warning/15 px-4 py-2 text-center text-sm font-semibold text-warning">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
+      Read-only mode — this database is open without write access. All writes are disabled.
+    </div>
+  {{/if}}
+  <div class="drawer lg:drawer-open">
+    <input id="sidebar-toggle" type="checkbox" class="drawer-toggle" />
+    <div class="drawer-content flex min-h-screen flex-col">
+      {{> navbar}}
+      <main class="mx-auto w-full max-w-[1500px] flex-1 px-4 py-6 sm:px-6 lg:px-8 lg:py-8">
+        {{{body}}}
+      </main>
+      <footer class="border-t border-base-300 px-6 py-4 text-center text-xs text-base-content/40">
+        AdminDB · a browser tool for SQLite databases
+      </footer>
+    </div>
+    <div class="drawer-side z-40">
+      <label for="sidebar-toggle" aria-label="close sidebar" class="drawer-overlay"></label>
+      {{> sidebar}}
+    </div>
+  </div>
+  <div id="toast-container" class="pointer-events-none fixed inset-x-0 top-4 z-50 flex flex-col items-center gap-2 px-4"></div>
+</body>
+</html>