admindb 1.0.3 → 1.1.0

package/dist/views/pages/table.hbs

@@ -52,34 +52,31 @@
     </div>
   </div>
 
-  <!-- Row filters -->
-  <form id="filter-form" class="app-card p-4">
-    <div class="mb-3 flex flex-wrap items-center justify-between gap-2">
+  <!-- Row filters (collapsed by default; auto-expands when filters are active) -->
+  <details class="app-card overflow-hidden" {{#if filterQS}}open{{/if}}>
+    <summary class="group flex cursor-pointer list-none items-center justify-between gap-2 px-4 py-3 transition hover:bg-base-200/40 [&::-webkit-details-marker]:hidden">
       <span class="flex items-center gap-2 text-sm font-semibold uppercase tracking-wide text-base-content/45">
         <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414A1 1 0 0014 15.414V20a1 1 0 01-1 1h-2a1 1 0 01-1-1v-4.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" /></svg>
         Filter rows
+        {{#if filterQS}}<span class="chip chip-pk">active</span>{{/if}}
       </span>
-      <span class="text-xs text-base-content/40">Tip: <code>=exact</code> · <code>&gt;5</code> · <code>&lt;=10</code> · <code>pre*</code> starts with · plain text = contains</span>
-    </div>
-    <div class="grid grid-cols-2 gap-2 md:grid-cols-3 xl:grid-cols-4">
-      {{#each colNames}}
-        <label class="block">
-          <span class="field-label !mb-1 font-mono">{{this}}</span>
-          <input type="text" class="field-input filter-input !py-1.5 !text-[13px]" name="{{this}}" value="{{lookup ../filters this}}" placeholder="filter…" autocomplete="off" spellcheck="false" />
-        </label>
-      {{/each}}
-    </div>
-    <div class="mt-3 flex flex-wrap items-center gap-2">
-      <button type="submit" class="btn btn-primary btn-sm gap-1.5">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
-        Apply filter
-      </button>
-      <button type="button" id="clear-filter" class="btn btn-ghost btn-sm">Clear</button>
-      {{#if filterQS}}
-        <span class="text-xs text-base-content/50">Filtering <b class="tabular-nums">{{count}}</b> row(s).</span>
-      {{/if}}
-    </div>
-  </form>
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 shrink-0 text-base-content/40 transition-transform group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" /></svg>
+    </summary>
+    <form id="filter-form" class="border-t border-base-200 p-4">
+      <p class="mb-3 text-xs text-base-content/40">Filters adapt to each column's type: foreign keys, booleans, dates and numbers get dedicated controls. Text columns keep the operator syntax — <code>=exact</code> · <code>&gt;5</code> · <code>pre*</code> starts with · plain text = contains.</p>
+      <div id="filter-fields" class="grid grid-cols-2 gap-2 md:grid-cols-3 xl:grid-cols-4"></div>
+      <div class="mt-3 flex flex-wrap items-center gap-2">
+        <button type="submit" class="btn btn-primary btn-sm gap-1.5">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
+          Apply filter
+        </button>
+        <button type="button" id="clear-filter" class="btn btn-ghost btn-sm">Clear</button>
+        {{#if filterQS}}
+          <span class="text-xs text-base-content/50">Filtering <b class="tabular-nums">{{count}}</b> row(s).</span>
+        {{/if}}
+      </div>
+    </form>
+  </details>
 
   <!-- CSV import -->
   <div id="import-panel" class="app-card hidden p-4">
@@ -113,10 +110,37 @@
         </label>
       </div>
 
+      <!-- Bulk selection bar -->
+      <div id="bulk-bar" class="hidden items-center justify-between gap-2 border-b border-base-200 bg-primary/[0.04] px-4 py-2.5">
+        <span class="text-sm font-medium text-base-content/80">
+          <b id="bulk-count" class="tabular-nums text-primary">0</b> row(s) selected
+        </span>
+        <div class="flex flex-wrap items-center gap-1.5">
+          <button id="bulk-export-csv" type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
+            Export CSV
+          </button>
+          <button id="bulk-export-json" type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
+            Export JSON
+          </button>
+          <button id="bulk-delete" type="button" class="btn btn-error btn-xs gap-1" {{#if readonly}}disabled{{/if}}>
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
+            Delete
+          </button>
+          <button id="bulk-clear" type="button" class="btn btn-ghost btn-xs text-base-content/60">Clear</button>
+        </div>
+      </div>
+
       <div class="overflow-x-auto">
         <table class="table table-sm table-pin-rows">
           <thead>
             <tr class="bg-base-200/70 text-xs uppercase tracking-wide text-base-content/50">
+              {{#if hasPk}}
+                <th class="w-10 text-center font-semibold">
+                  <input type="checkbox" id="select-all-rows" class="checkbox checkbox-primary checkbox-xs" title="Select all rows on this page" />
+                </th>
+              {{/if}}
               {{#each colHeaders}}
                 <th class="whitespace-nowrap font-semibold">
                   <a href="{{this.href}}" class="sort-link {{#if this.active}}active{{/if}}" title="Sort by {{this.name}}">
@@ -127,17 +151,30 @@
                 </th>
               {{/each}}
               <th class="text-right font-semibold">Actions</th>
+              {{#each refColumns}}
+                <th class="whitespace-nowrap text-right font-semibold" title="Rows in {{this.table}} where {{this.from}} references {{this.to}}">
+                  <span class="font-mono normal-case">{{this.table}}</span>
+                </th>
+              {{/each}}
             </tr>
           </thead>
           <tbody>
             {{#each rows}}
-              <tr class="group hover:bg-primary/[0.04]">
+              <tr class="group hover:bg-primary/[0.04]" data-table="{{../table}}" data-pk="{{this.pkEncoded}}">
+                {{#if ../hasPk}}
+                  <td class="w-10 text-center align-middle">
+                    {{#if this.pkEncoded}}
+                      <input type="checkbox" class="row-checkbox checkbox checkbox-primary checkbox-xs" value="{{this.pkEncoded}}" aria-label="Select this row" />
+                    {{/if}}
+                  </td>
+                {{/if}}
                 {{#each this.cells}}
-                  <td class="max-w-xs align-middle">
+                  <td class="max-w-xs align-middle cell-editable {{#unless ../../readonly}}js-inline-cell{{/unless}}"
+                      data-col="{{this.name}}" data-null="{{this.isNull}}" data-value="{{this.display}}">
                     {{#if this.isNull}}
-                      <span class="chip chip-null">NULL</span>
+                      <span class="chip chip-null js-cell-value">NULL</span>
                     {{else}}
-                      <span class="block max-w-xs truncate font-mono text-[13px]" title="{{this.display}}">{{truncate this.display 120}}</span>
+                      <span class="js-cell-value block max-w-xs truncate font-mono text-[13px]" title="{{this.display}}">{{truncate this.display 120}}</span>
                     {{/if}}
                   </td>
                 {{/each}}
@@ -160,6 +197,21 @@
                     {{/if}}
                   {{/unless}}
                 </td>
+                {{#each this.refs}}
+                  <td class="whitespace-nowrap text-right align-middle">
+                    {{#if this.value}}
+                      <button type="button" class="js-ref-toggle inline-flex items-center gap-1.5 rounded-lg border border-base-300 bg-base-100 px-2 py-1 text-xs font-medium text-base-content/70 shadow-soft transition hover:border-primary/50 hover:text-primary {{#unless this.count}}opacity-50{{/unless}}"
+                        data-table="{{../../table}}" data-pk="{{../pkEncoded}}" data-ref-table="{{this.table}}"
+                        aria-expanded="false" title="View {{this.table}} rows where {{this.from}} = {{this.value}}">
+                        <span class="font-mono normal-case">{{this.table}}</span>
+                        <span class="rounded-md bg-primary/10 px-1.5 py-0.5 font-semibold tabular-nums text-primary">{{this.count}}</span>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="js-ref-chevron h-3 w-3 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" /></svg>
+                      </button>
+                    {{else}}
+                      <span class="text-xs text-base-content/35">&mdash;</span>
+                    {{/if}}
+                  </td>
+                {{/each}}
               </tr>
             {{/each}}
           </tbody>
@@ -200,4 +252,5 @@
     </div>
   {{/if}}
 </div>
+<script type="application/json" id="browse-config">{{{json browseConfig}}}</script>
 <script src="{{basePath}}/js/browse.js" defer></script>

package/dist/views/partials/sidebar.hbs

@@ -55,18 +55,6 @@
             Query editor
           </a>
         </li>
-        <li>
-          <a href="{{basePath}}/views" class="side-link {{#if (startsWith currentPath '/views')}}active{{/if}}">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" /></svg>
-            Views
-          </a>
-        </li>
-        <li>
-          <a href="{{basePath}}/triggers" class="side-link {{#if (startsWith currentPath '/triggers')}}active{{/if}}">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
-            Triggers
-          </a>
-        </li>
         {{#unless readonly}}
           <li>
             <a href="{{basePath}}/designer" class="side-link {{#if (startsWith currentPath '/designer')}}active{{/if}}">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "admindb",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "Browser-based SQLite database administration tool — embed it in your Express app or run it standalone.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/dist/public/js/triggers.js

@@ -1,155 +0,0 @@
-/* Triggers page: create / drop triggers with a live SQL preview. */
-(function () {
-  'use strict';
-  const cfgEl = document.getElementById('triggers-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('trigger-body');
-  const gutter = document.getElementById('trigger-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 trigger form ---------------------------------------------------
-
-  const newBtn = document.getElementById('new-trigger');
-  const panel = document.getElementById('new-trigger-panel');
-  const nameInput = document.getElementById('trigger-name');
-  const tableInput = document.getElementById('trigger-table');
-  const timingInput = document.getElementById('trigger-timing');
-  const eventInput = document.getElementById('trigger-event');
-  const whenInput = document.getElementById('trigger-when');
-  const bodyInput = document.getElementById('trigger-body');
-  const errEl = document.getElementById('trigger-error');
-  const createBtn = document.getElementById('create-trigger');
-  const cancelBtn = document.getElementById('cancel-trigger');
-  const preview = document.getElementById('trigger-preview');
-  const previewCode = document.getElementById('trigger-preview-code');
-  const previewHint = document.getElementById('trigger-preview-hint');
-  let previewTimer = null;
-
-  function currentEvent() {
-    return eventInput ? eventInput.value : 'INSERT';
-  }
-
-  function renderPreview() {
-    clearTimeout(previewTimer);
-    const name = (nameInput.value || '').trim();
-    const table = tableInput.value || '';
-    const event = currentEvent();
-    if (!name && !table && !(bodyInput.value || '').trim()) {
-      preview.classList.add('hidden');
-      previewCode.textContent = '';
-      if (previewHint) previewHint.classList.remove('hidden');
-      return;
-    }
-    previewTimer = setTimeout(async () => {
-      try {
-        const data = await Api.post('/api/triggers/generate', {
-          name,
-          table,
-          timing: timingInput.value,
-          event,
-          when: (whenInput.value || '').trim() || undefined,
-          body: bodyInput.value,
-        });
-        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();
-      }
-    });
-  }
-  [nameInput, tableInput, timingInput, eventInput, whenInput, bodyInput].forEach((el) => {
-    if (el) el.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 table = tableInput.value || '';
-      const body = (bodyInput.value || '').trim();
-      const event = currentEvent();
-      if (!name) return showError(errEl, 'Trigger name is required.');
-      if (!table) return showError(errEl, 'Select a table for the trigger.');
-      if (!body) return showError(errEl, 'Trigger body is required.');
-      createBtn.disabled = true;
-      try {
-        const data = await Api.post('/api/triggers', {
-          name,
-          table,
-          timing: timingInput.value,
-          event,
-          when: (whenInput.value || '').trim() || undefined,
-          body,
-        });
-        UI.showToast(data.message || 'Trigger created.', 'success');
-        window.location.reload();
-      } catch (e) {
-        showError(errEl, e.message);
-      } finally {
-        createBtn.disabled = false;
-      }
-    });
-  }
-
-  // ---- Drop trigger -------------------------------------------------------
-
-  document.querySelectorAll('.trigger-drop').forEach((btn) => {
-    btn.addEventListener('click', async () => {
-      const name = btn.dataset.trigger;
-      if (!name) return;
-      if (!window.confirm('Drop trigger "' + name + '" permanently?')) return;
-      try {
-        const data = await Api.del('/api/triggers/' + encodeURIComponent(name));
-        UI.showToast(data.message || 'Trigger dropped.', 'success');
-        window.location.reload();
-      } catch (e) {
-        UI.showError(e.message);
-      }
-    });
-  });
-})();

package/dist/public/js/views.js

@@ -1,176 +0,0 @@
-/* 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);
-      }
-    });
-  });
-})();