admindb 1.2.0 → 2.0.0

package/dist/public/css/input.css

@@ -88,16 +88,23 @@
 
   /* Inline (spreadsheet-style) cell editing */
   .js-inline-cell {
-    cursor: text;
+    cursor: cell;
     position: relative;
+    transition: background-color 0.12s ease, box-shadow 0.12s ease;
   }
   .js-inline-cell:hover {
     box-shadow: inset 0 0 0 1px oklch(var(--p) / 0.45);
   }
+  .js-inline-cell.cell-focused {
+    box-shadow: inset 0 0 0 2px oklch(var(--p) / 0.95);
+    background: color-mix(in oklab, oklch(var(--b1)) 85%, oklch(var(--p) / 0.14));
+    z-index: 5;
+  }
   .js-inline-cell.js-editing {
-    box-shadow: inset 0 0 0 2px oklch(var(--p) / 0.85);
+    box-shadow: inset 0 0 0 2px oklch(var(--p) / 0.95);
     cursor: default;
-    background: color-mix(in oklab, oklch(var(--b1)) 88%, oklch(var(--p) / 0.16));
+    background: color-mix(in oklab, oklch(var(--b1)) 88%, oklch(var(--p) / 0.18));
+    z-index: 10;
   }
   .js-inline-cell.js-editing .js-cell-value {
     display: none;
@@ -106,22 +113,78 @@
     opacity: 0.55;
   }
 
-  /* Pending (staged) edit — highlighted until the user presses Apply.
-     Uses the theme's base color (--b1) + a primary tint so it renders
-     correctly in both the light and dark (black) themes. */
+  /* Pending (staged) edit — highlighted until the user presses Apply. */
   .js-inline-cell.cell-dirty {
-    background: color-mix(in oklab, oklch(var(--b1)) 90%, oklch(var(--p) / 0.14));
-    box-shadow: inset 0 0 0 1px oklch(var(--p) / 0.75);
+    background: color-mix(in oklab, oklch(var(--b1)) 88%, oklch(var(--wa) / 0.18));
+    box-shadow: inset 0 0 0 1.5px oklch(var(--wa) / 0.85);
   }
   .js-inline-cell.cell-dirty::after {
     content: '';
     position: absolute;
-    top: 4px;
-    right: 4px;
+    top: 2px;
+    right: 2px;
     width: 6px;
     height: 6px;
     border-radius: 999px;
-    background: oklch(var(--p));
+    background: oklch(var(--wa));
+    box-shadow: 0 0 6px oklch(var(--wa) / 0.8);
+  }
+
+  .cell-revert-btn {
+    display: inline-grid;
+    place-items: center;
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    color: oklch(var(--wa));
+    background: transparent;
+    opacity: 0;
+    transition: opacity 0.15s ease, background-color 0.15s ease;
+    border: none;
+    cursor: pointer;
+  }
+  .cell-revert-btn:hover {
+    background: oklch(var(--wa) / 0.2);
+  }
+  td:hover .cell-revert-btn,
+  tr:hover .cell-revert-btn {
+    opacity: 1;
+  }
+
+  /* Compact table mode */
+  .table-compact th,
+  .table-compact td {
+    padding-top: 0.35rem !important;
+    padding-bottom: 0.35rem !important;
+    font-size: 12px !important;
+  }
+
+  /* Sticky Actions Column */
+  .sticky-col-actions {
+    @apply sticky right-0 bg-base-100/95 backdrop-blur-sm;
+    box-shadow: -3px 0 6px -2px rgba(0,0,0,0.06);
+    z-index: 10;
+  }
+  [data-theme='admindbDark'] .sticky-col-actions {
+    box-shadow: -3px 0 8px -2px rgba(0,0,0,0.35);
+  }
+
+  /* Elevate table row and action cell stacking context when dropdown is active */
+  tr:has(.dropdown:focus-within),
+  tr:focus-within {
+    position: relative;
+    z-index: 40;
+  }
+  td.sticky-col-actions:has(.dropdown:focus-within),
+  td.sticky-col-actions:focus-within {
+    z-index: 50;
+  }
+  .dropdown:focus-within {
+    z-index: 50;
+  }
+  .dropdown:focus-within > .dropdown-content {
+    z-index: 100 !important;
   }
 
   /* Sortable column headers */
@@ -172,12 +235,19 @@
 
   /* Stat cards */
   .stat-card {
-    @apply flex items-center gap-4 rounded-2xl border border-base-300/70 bg-base-100 p-5 shadow-soft;
+    @apply flex items-center gap-4 rounded-2xl border border-base-300/70 bg-base-100 p-5 shadow-soft min-w-0;
   }
   .stat-icon {
-    @apply grid h-11 w-11 shrink-0 place-items-center rounded-xl;
+    @apply inline-flex items-center justify-center shrink-0 w-11 h-11 rounded-xl;
   }
 
+  .stat-card > div {
+    @apply min-w-0 flex-1;
+  }
+
+  .stat-card > div > div:last-child {
+    @apply break-words;
+  }
   /* SQL editor (query page) */
   .sql-editor-wrap {
     @apply flex overflow-hidden rounded-xl border border-base-300 bg-base-100 shadow-soft transition duration-150 focus-within:border-primary/60 focus-within:ring-4 focus-within:ring-primary/10;

package/dist/public/js/app.js

@@ -106,6 +106,147 @@
     });
   }
 
+  // ---- Universal Confirm Dialog -------------------------------------------
+
+  function confirmDialog(options) {
+    return new Promise(function (resolve) {
+      if (typeof options === 'string') {
+        options = { message: options };
+      }
+      options = options || {};
+      var title = options.title || 'Confirm action';
+      var message = options.message || 'Are you sure you want to proceed?';
+      var confirmText = options.confirmText || (options.danger !== false ? 'Delete' : 'Confirm');
+      var cancelText = options.cancelText || 'Cancel';
+      var isDanger = options.danger !== false;
+      var requireMatch = options.requireInputMatch ? String(options.requireInputMatch).trim() : null;
+
+      var overlay = document.createElement('div');
+      overlay.className =
+        'fixed inset-0 z-[100] flex items-center justify-center bg-black/60 backdrop-blur-xs p-4 opacity-0 transition-opacity duration-200';
+      overlay.setAttribute('role', 'dialog');
+      overlay.setAttribute('aria-modal', 'true');
+
+      var card = document.createElement('div');
+      card.className =
+        'app-card w-full max-w-lg overflow-hidden shadow-2xl border border-base-300 transform scale-95 transition-transform duration-200';
+
+      var badgeColor = isDanger ? 'bg-error/10 text-error border-error/20' : 'bg-warning/10 text-warning border-warning/20';
+      var confirmBtnClass = isDanger ? 'btn-error text-white' : 'btn-primary';
+
+      var itemHtml = '';
+      if (options.item) {
+        var itemTypeLabel = options.itemType ? escapeHtml(options.itemType) + ': ' : '';
+        itemHtml =
+          '<div class="mb-3.5 flex items-center gap-2 rounded-xl border border-base-300 bg-base-200/60 px-3.5 py-2.5">' +
+          '<span class="text-xs font-semibold uppercase tracking-wider text-base-content/50">' + itemTypeLabel + '</span>' +
+          '<span class="font-mono text-sm font-bold text-base-content break-all">' + escapeHtml(options.item) + '</span>' +
+          '</div>';
+      }
+
+      var inputMatchHtml = '';
+      if (requireMatch) {
+        inputMatchHtml =
+          '<div class="mt-4 space-y-1.5">' +
+          '<label class="text-xs font-medium text-base-content/70">To confirm, type <span class="font-mono font-bold text-base-content select-all">' + escapeHtml(requireMatch) + '</span> below:</label>' +
+          '<input type="text" class="field-input font-mono js-confirm-input" placeholder="' + escapeHtml(options.requireInputPlaceholder || requireMatch) + '" autocomplete="off" spellcheck="false" />' +
+          '</div>';
+      }
+
+      var detailsHtml = options.detailsHtml ? '<div class="mt-3.5 max-h-48 overflow-y-auto rounded-xl border border-base-200 bg-base-200/40 p-3 text-xs leading-relaxed text-base-content/75">' + options.detailsHtml + '</div>' : '';
+
+      card.innerHTML =
+        '<div class="flex items-start justify-between gap-3 border-b border-base-200 px-6 py-4">' +
+        '  <div class="flex items-center gap-3">' +
+        '    <div class="grid h-10 w-10 shrink-0 place-items-center rounded-xl border ' + badgeColor + '">' +
+        (isDanger ? ICONS.warning : ICONS.info) +
+        '    </div>' +
+        '    <div>' +
+        '      <h3 class="text-base font-bold text-base-content">' + escapeHtml(title) + '</h3>' +
+        '      <p class="text-xs text-base-content/50 font-medium">' + (isDanger ? 'Destructive Action' : 'Action Confirmation') + '</p>' +
+        '    </div>' +
+        '  </div>' +
+        '  <button type="button" class="btn btn-ghost btn-xs btn-circle js-modal-cancel text-base-content/40 hover:text-base-content" aria-label="Close">&times;</button>' +
+        '</div>' +
+        '<div class="px-6 py-5">' +
+        itemHtml +
+        '  <p class="text-sm text-base-content/80 leading-relaxed">' + escapeHtml(message) + '</p>' +
+        detailsHtml +
+        inputMatchHtml +
+        '</div>' +
+        '<div class="flex flex-wrap items-center justify-end gap-2.5 border-t border-base-200 bg-base-200/30 px-6 py-4">' +
+        '  <button type="button" class="btn btn-ghost btn-sm js-modal-cancel">' + escapeHtml(cancelText) + '</button>' +
+        '  <button type="button" class="btn ' + confirmBtnClass + ' btn-sm js-modal-confirm" ' + (requireMatch ? 'disabled' : '') + '>' + escapeHtml(confirmText) + '</button>' +
+        '</div>';
+
+      overlay.appendChild(card);
+      document.body.appendChild(overlay);
+
+      requestAnimationFrame(function () {
+        overlay.classList.remove('opacity-0');
+        overlay.classList.add('opacity-100');
+        card.classList.remove('scale-95');
+        card.classList.add('scale-100');
+      });
+
+      var confirmBtn = card.querySelector('.js-modal-confirm');
+      var cancelBtns = card.querySelectorAll('.js-modal-cancel');
+      var inputEl = card.querySelector('.js-confirm-input');
+
+      if (inputEl) {
+        inputEl.addEventListener('input', function () {
+          var val = inputEl.value.trim();
+          confirmBtn.disabled = val !== requireMatch;
+        });
+        inputEl.addEventListener('keydown', function (e) {
+          if (e.key === 'Enter' && !confirmBtn.disabled) {
+            e.preventDefault();
+            finish(true);
+          }
+        });
+        setTimeout(function () { inputEl.focus(); }, 50);
+      } else {
+        var cancelBtn = card.querySelector('.js-modal-cancel');
+        if (cancelBtn) setTimeout(function () { cancelBtn.focus(); }, 50);
+      }
+
+      var finished = false;
+      function finish(result) {
+        if (finished) return;
+        finished = true;
+        document.removeEventListener('keydown', onKeyDown);
+        overlay.classList.remove('opacity-100');
+        overlay.classList.add('opacity-0');
+        card.classList.remove('scale-100');
+        card.classList.add('scale-95');
+        setTimeout(function () {
+          overlay.remove();
+          resolve(result);
+        }, 180);
+      }
+
+      function onKeyDown(e) {
+        if (e.key === 'Escape') {
+          e.preventDefault();
+          finish(false);
+        }
+      }
+      document.addEventListener('keydown', onKeyDown);
+
+      cancelBtns.forEach(function (btn) {
+        btn.addEventListener('click', function () { finish(false); });
+      });
+
+      confirmBtn.addEventListener('click', function () {
+        if (!confirmBtn.disabled) finish(true);
+      });
+
+      overlay.addEventListener('click', function (e) {
+        if (e.target === overlay) finish(false);
+      });
+    });
+  }
+
   document.addEventListener('DOMContentLoaded', function () {
     initTheme();
     initTableFilter();
@@ -115,6 +256,7 @@
     escapeHtml: escapeHtml,
     showToast: showToast,
     showError: function (message) { showToast(message, 'error'); },
+    confirm: confirmDialog,
     applyTheme: applyTheme,
   };
 })();