admindb 2.4.1 → 2.6.0

package/dist/views/pages/home.hbs

@@ -1 +1 @@
-<div class="space-y-8">
  <div class="page-header">
    <div class="page-header-row">
      <div>
        <div class="page-pretitle">Overview</div>
        <h1 class="page-title">Database</h1>
        <p class="mt-0.5 text-xs text-base-content/60">Browse, edit, and query the connected database from your browser.</p>
      </div>
      <div class="page-actions">
        <a href="{{basePath}}/query/{{encodeUri dbId}}" class="btn btn-ghost btn-sm gap-1.5">
          {{{icon "query" class="h-4 w-4"}}}
          Query
        </a>
        {{#unless readonly}}
          <a href="{{basePath}}/designer/{{encodeUri dbId}}" class="btn btn-primary btn-sm gap-1.5">
            {{{icon "plus" class="h-4 w-4"}}}
            New table
          </a>
        {{/unless}}
      </div>
    </div>
  </div>
  <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
    <div class="stat-card">
      <span class="stat-icon bg-primary/10 text-primary">
        {{{icon "table" class="h-6 w-6"}}}
      </span>
      <div>
        <div class="text-2xl font-extrabold tabular-nums">{{tables.length}}</div>
        <div class="text-[13px] text-base-content/50">Tables</div>
      </div>
    </div>
    <div class="stat-card">
      <span class="stat-icon bg-secondary/10 text-secondary">
        {{{icon "stats" class="h-6 w-6"}}}
      </span>
      <div>
        <div class="text-2xl font-extrabold tabular-nums">{{totalRows}}</div>
        <div class="text-[13px] text-base-content/50">Total rows</div>
      </div>
    </div>
    <div class="stat-card">
      <span class="stat-icon bg-accent/10 text-accent">
        {{{icon "seed" class="h-6 w-6"}}}
      </span>
      <div>
        <div class="text-2xl font-extrabold tabular-nums">{{savedQueries}}</div>
        <div class="text-[13px] text-base-content/50">Saved queries</div>
      </div>
    </div>
    <div class="stat-card">
      <span class="stat-icon {{#if isPostgres}}bg-info/10 text-info{{else}}bg-emerald-500/10 text-emerald-500{{/if}}">
        {{{icon "database" class="h-6 w-6"}}}
      </span>
      <div>
        <div class="flex items-center gap-1.5">
          <span class="text-xl font-extrabold">{{dialectName}}</span>
          {{#if readonly}}
            <span class="rounded bg-warning/20 px-1.5 py-0.5 text-[10px] font-bold uppercase text-warning">Read-only</span>
          {{else}}
            <span class="rounded bg-success/20 px-1.5 py-0.5 text-[10px] font-bold uppercase text-success">Writable</span>
          {{/if}}
        </div>
        <div class="truncate font-mono text-xs text-base-content/50" title="{{dbPath}}">{{dbPath}}</div>
      </div>
    </div>
  </div>
  <div>
    <div class="mb-3 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
      <div class="flex items-center gap-2">
        <h2 class="text-lg font-bold">Tables</h2>
        <span id="home-table-count" class="text-sm text-base-content/45">
          <span id="home-table-count-text">{{tables.length}} total</span>
        </span>
      </div>
      {{#if tables.length}}
      <div class="relative w-full sm:w-64">
        <span class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-base-content/40">
          {{{icon "search" class="h-4 w-4"}}}
        </span>
        <input id="home-table-search" type="text" placeholder="Search tables…" autocomplete="off" spellcheck="false"
          class="field-input text-xs sm:text-sm !py-1.5 !pl-9 !pr-8 w-full" />
        <button id="home-table-search-clear" type="button" class="hidden absolute right-2.5 top-1/2 -translate-y-1/2 text-base-content/40 hover:text-base-content focus:outline-none" title="Clear search">
          {{{icon "x" class="h-3.5 w-3.5"}}}
        </button>
      </div>
      {{/if}}
    </div>
    {{#if tables.length}}
      {{#unless readonly}}
      <div id="home-bulk-toolbar"
        style="max-height: 0; overflow: hidden; transition: max-height 0.22s cubic-bezier(0.4,0,0.2,1), opacity 0.18s ease; opacity: 0;"
        aria-hidden="true">
        <div class="mb-3 flex flex-wrap items-center gap-3 rounded-xl border border-base-300 bg-base-100 px-4 py-3 shadow-soft">
          <span id="home-bulk-count"
            class="inline-flex items-center gap-1.5 rounded-full bg-primary/10 px-3 py-1 text-xs font-bold text-primary">
            <span id="home-bulk-count-num">0</span> selected
          </span>
          <div class="h-4 w-px bg-base-300"></div>
          <div class="dropdown dropdown-bottom" id="home-dd-clear">
            <button tabindex="0" id="home-btn-clear"
              class="btn btn-sm btn-warning gap-1.5 font-semibold">
              {{{icon "refresh" class="h-3.5 w-3.5"}}}
              Clear Rows
              {{{icon "chevronDown" class="h-3 w-3 opacity-60"}}}
            </button>
            <ul tabindex="0"
              class="dropdown-content menu bg-base-100 rounded-xl border border-base-300 shadow-lift z-30 mt-1 w-64 p-2 text-sm">
              <li>
                <button id="home-clear-normal" class="flex items-start gap-2.5 rounded-lg px-3 py-2.5 hover:bg-base-200 text-left w-full">
                  <span class="mt-0.5 text-warning shrink-0">{{{icon "warning" class="h-4 w-4"}}}</span>
                  <span>
                    <span class="block font-semibold">Clear rows</span>
                    <span class="block text-xs text-base-content/50">Deletes all rows; fails if FK references exist</span>
                  </span>
                </button>
              </li>
              <li>
                <button id="home-clear-force" class="flex items-start gap-2.5 rounded-lg px-3 py-2.5 hover:bg-error/10 text-left w-full text-error">
                  <span class="mt-0.5 shrink-0">{{{icon "warning" class="h-4 w-4"}}}</span>
                  <span>
                    <span class="block font-semibold">Force Clear <span class="text-[10px] font-bold uppercase tracking-wide rounded bg-error/15 px-1 py-0.5 ml-1">ignore FK</span></span>
                    <span class="block text-xs text-error/60">Disables FK checks; deletes regardless of references</span>
                  </span>
                </button>
              </li>
            </ul>
          </div>
          <div class="dropdown dropdown-bottom" id="home-dd-drop">
            <button tabindex="0" id="home-btn-drop"
              class="btn btn-sm btn-error gap-1.5 font-semibold text-white">
              {{{icon "warning" class="h-3.5 w-3.5"}}}
              Drop Tables
              {{{icon "chevronDown" class="h-3 w-3 opacity-60"}}}
            </button>
            <ul tabindex="0"
              class="dropdown-content menu bg-base-100 rounded-xl border border-base-300 shadow-lift z-30 mt-1 w-64 p-2 text-sm">
              <li>
                <button id="home-drop-normal" class="flex items-start gap-2.5 rounded-lg px-3 py-2.5 hover:bg-base-200 text-left w-full">
                  <span class="mt-0.5 text-error shrink-0">{{{icon "warning" class="h-4 w-4"}}}</span>
                  <span>
                    <span class="block font-semibold">Drop tables</span>
                    <span class="block text-xs text-base-content/50">Permanently deletes tables and all data</span>
                  </span>
                </button>
              </li>
              <li>
                <button id="home-drop-force" class="flex items-start gap-2.5 rounded-lg px-3 py-2.5 hover:bg-error/10 text-left w-full text-error">
                  <span class="mt-0.5 shrink-0">{{{icon "warning" class="h-4 w-4"}}}</span>
                  <span>
                    <span class="block font-semibold">Force Drop <span class="text-[10px] font-bold uppercase tracking-wide rounded bg-error/15 px-1 py-0.5 ml-1">ignore FK</span></span>
                    <span class="block text-xs text-error/60">Drops with FK checks disabled; cascades on Postgres</span>
                  </span>
                </button>
              </li>
            </ul>
          </div>
          <div class="ml-auto">
            <button id="home-bulk-deselect"
              class="btn btn-ghost btn-sm gap-1 text-base-content/50 hover:text-base-content">
              {{{icon "x" class="h-3.5 w-3.5"}}}
              Deselect all
            </button>
          </div>
        </div>
      </div>
      {{/unless}}
      <div class="app-card overflow-hidden">
        <div class="overflow-x-auto">
          <table class="table table-sm" id="home-tables-table">
            <thead>
              <tr class="bg-base-200/70 text-xs uppercase tracking-wide text-base-content/50">
                {{#unless readonly}}
                <th class="w-10">
                  <input type="checkbox" id="home-select-all"
                    class="checkbox checkbox-sm checkbox-primary"
                    title="Select all tables" />
                </th>
                {{/unless}}
                <th class="font-semibold">Table</th>
                <th class="text-right font-semibold">Columns</th>
                <th class="text-right font-semibold">Rows</th>
                <th class="text-right font-semibold">Actions</th>
              </tr>
            </thead>
            <tbody id="home-tables-tbody">
              {{#each tables}}
                <tr class="group hover:bg-base-200/50 home-table-row" data-table="{{this}}">
                  {{#unless ../readonly}}
                  <td class="w-10">
                    <input type="checkbox"
                      class="checkbox checkbox-sm checkbox-primary home-table-checkbox"
                      data-table="{{this}}"
                      title="Select {{this}}" />
                  </td>
                  {{/unless}}
                  <td>
                    <a href="{{../basePath}}/tables/{{encodeUri ../dbId}}/{{encodeUri this}}" class="inline-flex items-center gap-2.5 font-medium">
                      <span class="grid h-8 w-8 place-items-center rounded-lg bg-primary/10 text-primary transition-colors group-hover:bg-primary/20">
                        {{{icon "table" class="h-4 w-4"}}}
                      </span>
                      <span class="font-mono text-[13.5px]">{{this}}</span>
                    </a>
                  </td>
                  <td class="text-right tabular-nums text-base-content/60">{{lookup ../cols this}}</td>
                  <td class="text-right tabular-nums text-base-content/60">{{lookup ../counts this}}</td>
                  <td class="text-right">
                    <a href="{{../basePath}}/tables/{{encodeUri ../dbId}}/{{encodeUri this}}" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary">
                      Browse
                      {{{icon "arrowRight" class="h-3.5 w-3.5"}}}
                    </a>
                  </td>
                </tr>
              {{/each}}
              <tr id="home-no-tables-match" class="hidden">
                <td colspan="{{#if readonly}}4{{else}}5{{/if}}" class="py-12 text-center text-sm text-base-content/50">
                  <div class="flex flex-col items-center justify-center gap-2">
                    {{{icon "search" class="h-6 w-6 text-base-content/30"}}}
                    <p>No tables matching "<span id="home-search-query-text" class="font-semibold font-mono text-base-content/80"></span>"</p>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    {{else}}
      <div class="empty-state">
        <span class="empty-icon">
          {{{icon "table" class="h-7 w-7"}}}
        </span>
        <p class="text-sm font-medium text-base-content/70">No tables yet</p>
        <p class="max-w-sm text-sm text-base-content/45">Create one with the table designer, or run a SQL statement in the query editor to get started.</p>
        <div class="mt-2 flex gap-2">
          {{#unless readonly}}
            <a href="{{basePath}}/designer/{{encodeUri dbId}}" class="btn btn-primary btn-sm">New table</a>
          {{/unless}}
          <a href="{{basePath}}/query/{{encodeUri dbId}}" class="btn btn-outline btn-sm">Query editor</a>
        </div>
      </div>
    {{/if}}
  </div>
+<div class="space-y-8">
  <div class="page-header">
    <div class="page-header-row">
      <div>
        <div class="page-pretitle">Overview</div>
        <h1 class="page-title">Database</h1>
        <p class="mt-0.5 text-xs text-base-content/60">Browse, edit, and query the connected database from your browser.</p>
      </div>
      <div class="page-actions">
        <a href="{{basePath}}/query/{{encodeUri dbId}}" class="btn btn-ghost btn-sm gap-1.5">
          {{{icon "query" class="h-4 w-4"}}}
          Query
        </a>
        {{#unless readonly}}
          <a href="{{basePath}}/designer/{{encodeUri dbId}}" class="btn btn-primary btn-sm gap-1.5">
            {{{icon "plus" class="h-4 w-4"}}}
            New table
          </a>
        {{/unless}}
      </div>
    </div>
  </div>
  <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
    <div class="stat-card">
      <span class="stat-icon bg-primary/10 text-primary">
        {{{icon "table" class="h-6 w-6"}}}
      </span>
      <div>
        <div class="text-2xl font-extrabold tabular-nums">{{tables.length}}</div>
        <div class="text-[13px] text-base-content/50">Tables</div>
      </div>
    </div>
    <div class="stat-card">
      <span class="stat-icon bg-secondary/10 text-secondary">
        {{{icon "stats" class="h-6 w-6"}}}
      </span>
      <div>
        <div class="text-2xl font-extrabold tabular-nums">{{totalRows}}</div>
        <div class="text-[13px] text-base-content/50">Total rows</div>
      </div>
    </div>
    <div class="stat-card">
      <span class="stat-icon bg-accent/10 text-accent">
        {{{icon "seed" class="h-6 w-6"}}}
      </span>
      <div>
        <div class="text-2xl font-extrabold tabular-nums" id="stat-saved-queries">0</div>
        <div class="text-[13px] text-base-content/50">Saved queries</div>
      </div>
    </div>
    <div class="stat-card">
      <span class="stat-icon {{#if isPostgres}}bg-info/10 text-info{{else}}bg-emerald-500/10 text-emerald-500{{/if}}">
        {{{icon "database" class="h-6 w-6"}}}
      </span>
      <div>
        <div class="flex items-center gap-1.5">
          <span class="text-xl font-extrabold">{{dialectName}}</span>
          {{#if readonly}}
            <span class="rounded bg-warning/20 px-1.5 py-0.5 text-[10px] font-bold uppercase text-warning">Read-only</span>
          {{else}}
            <span class="rounded bg-success/20 px-1.5 py-0.5 text-[10px] font-bold uppercase text-success">Writable</span>
          {{/if}}
        </div>
        <div class="truncate font-mono text-xs text-base-content/50" title="{{dbPath}}">{{dbPath}}</div>
      </div>
    </div>
  </div>
  <div>
    <div class="mb-3 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
      <div class="flex items-center gap-2">
        <h2 class="text-lg font-bold">Tables</h2>
        <span id="home-table-count" class="text-sm text-base-content/45">
          <span id="home-table-count-text">{{tables.length}} total</span>
        </span>
      </div>
      {{#if tables.length}}
      <div class="relative w-full sm:w-64">
        <span class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-base-content/40">
          {{{icon "search" class="h-4 w-4"}}}
        </span>
        <input id="home-table-search" type="text" placeholder="Search tables…" autocomplete="off" spellcheck="false"
          class="field-input text-xs sm:text-sm !py-1.5 !pl-9 !pr-8 w-full" />
        <button id="home-table-search-clear" type="button" class="hidden absolute right-2.5 top-1/2 -translate-y-1/2 text-base-content/40 hover:text-base-content focus:outline-none" title="Clear search">
          {{{icon "x" class="h-3.5 w-3.5"}}}
        </button>
      </div>
      {{/if}}
    </div>
    {{#if tables.length}}
      {{#unless readonly}}
      <div id="home-bulk-toolbar"
        style="max-height: 0; overflow: hidden; transition: max-height 0.22s cubic-bezier(0.4,0,0.2,1), opacity 0.18s ease; opacity: 0;"
        aria-hidden="true">
        <div class="mb-3 flex flex-wrap items-center gap-3 rounded-xl border border-base-300 bg-base-100 px-4 py-3 shadow-soft">
          <span id="home-bulk-count"
            class="inline-flex items-center gap-1.5 rounded-full bg-primary/10 px-3 py-1 text-xs font-bold text-primary">
            <span id="home-bulk-count-num">0</span> selected
          </span>
          <div class="h-4 w-px bg-base-300"></div>
          <div class="dropdown dropdown-bottom" id="home-dd-clear">
            <button tabindex="0" id="home-btn-clear"
              class="btn btn-sm btn-warning gap-1.5 font-semibold">
              {{{icon "refresh" class="h-3.5 w-3.5"}}}
              Clear Rows
              {{{icon "chevronDown" class="h-3 w-3 opacity-60"}}}
            </button>
            <ul tabindex="0"
              class="dropdown-content menu bg-base-100 rounded-xl border border-base-300 shadow-lift z-30 mt-1 w-64 p-2 text-sm">
              <li>
                <button id="home-clear-normal" class="flex items-start gap-2.5 rounded-lg px-3 py-2.5 hover:bg-base-200 text-left w-full">
                  <span class="mt-0.5 text-warning shrink-0">{{{icon "warning" class="h-4 w-4"}}}</span>
                  <span>
                    <span class="block font-semibold">Clear rows</span>
                    <span class="block text-xs text-base-content/50">Deletes all rows; fails if FK references exist</span>
                  </span>
                </button>
              </li>
              <li>
                <button id="home-clear-force" class="flex items-start gap-2.5 rounded-lg px-3 py-2.5 hover:bg-error/10 text-left w-full text-error">
                  <span class="mt-0.5 shrink-0">{{{icon "warning" class="h-4 w-4"}}}</span>
                  <span>
                    <span class="block font-semibold">Force Clear <span class="text-[10px] font-bold uppercase tracking-wide rounded bg-error/15 px-1 py-0.5 ml-1">ignore FK</span></span>
                    <span class="block text-xs text-error/60">Disables FK checks; deletes regardless of references</span>
                  </span>
                </button>
              </li>
            </ul>
          </div>
          <div class="dropdown dropdown-bottom" id="home-dd-drop">
            <button tabindex="0" id="home-btn-drop"
              class="btn btn-sm btn-error gap-1.5 font-semibold text-white">
              {{{icon "warning" class="h-3.5 w-3.5"}}}
              Drop Tables
              {{{icon "chevronDown" class="h-3 w-3 opacity-60"}}}
            </button>
            <ul tabindex="0"
              class="dropdown-content menu bg-base-100 rounded-xl border border-base-300 shadow-lift z-30 mt-1 w-64 p-2 text-sm">
              <li>
                <button id="home-drop-normal" class="flex items-start gap-2.5 rounded-lg px-3 py-2.5 hover:bg-base-200 text-left w-full">
                  <span class="mt-0.5 text-error shrink-0">{{{icon "warning" class="h-4 w-4"}}}</span>
                  <span>
                    <span class="block font-semibold">Drop tables</span>
                    <span class="block text-xs text-base-content/50">Permanently deletes tables and all data</span>
                  </span>
                </button>
              </li>
              <li>
                <button id="home-drop-force" class="flex items-start gap-2.5 rounded-lg px-3 py-2.5 hover:bg-error/10 text-left w-full text-error">
                  <span class="mt-0.5 shrink-0">{{{icon "warning" class="h-4 w-4"}}}</span>
                  <span>
                    <span class="block font-semibold">Force Drop <span class="text-[10px] font-bold uppercase tracking-wide rounded bg-error/15 px-1 py-0.5 ml-1">ignore FK</span></span>
                    <span class="block text-xs text-error/60">Drops with FK checks disabled; cascades on Postgres</span>
                  </span>
                </button>
              </li>
            </ul>
          </div>
          <div class="ml-auto">
            <button id="home-bulk-deselect"
              class="btn btn-ghost btn-sm gap-1 text-base-content/50 hover:text-base-content">
              {{{icon "x" class="h-3.5 w-3.5"}}}
              Deselect all
            </button>
          </div>
        </div>
      </div>
      {{/unless}}
      <div class="app-card overflow-hidden">
        <div class="overflow-x-auto">
          <table class="table table-sm" id="home-tables-table">
            <thead>
              <tr class="bg-base-200/70 text-xs uppercase tracking-wide text-base-content/50">
                {{#unless readonly}}
                <th class="w-10">
                  <input type="checkbox" id="home-select-all"
                    class="checkbox checkbox-sm checkbox-primary"
                    title="Select all tables" />
                </th>
                {{/unless}}
                <th class="font-semibold">Table</th>
                <th class="text-right font-semibold">Columns</th>
                <th class="text-right font-semibold">Rows</th>
                <th class="text-right font-semibold">Actions</th>
              </tr>
            </thead>
            <tbody id="home-tables-tbody">
              {{#each tables}}
                <tr class="group hover:bg-base-200/50 home-table-row" data-table="{{this}}">
                  {{#unless ../readonly}}
                  <td class="w-10">
                    <input type="checkbox"
                      class="checkbox checkbox-sm checkbox-primary home-table-checkbox"
                      data-table="{{this}}"
                      title="Select {{this}}" />
                  </td>
                  {{/unless}}
                  <td>
                    <a href="{{../basePath}}/tables/{{encodeUri ../dbId}}/{{encodeUri this}}" class="inline-flex items-center gap-2.5 font-medium">
                      <span class="grid h-8 w-8 place-items-center rounded-lg bg-primary/10 text-primary transition-colors group-hover:bg-primary/20">
                        {{{icon "table" class="h-4 w-4"}}}
                      </span>
                      <span class="font-mono text-[13.5px]">{{this}}</span>
                    </a>
                  </td>
                  <td class="text-right tabular-nums text-base-content/60">{{lookup ../cols this}}</td>
                  <td class="text-right tabular-nums text-base-content/60">{{lookup ../counts this}}</td>
                  <td class="text-right">
                    <a href="{{../basePath}}/tables/{{encodeUri ../dbId}}/{{encodeUri this}}" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary">
                      Browse
                      {{{icon "arrowRight" class="h-3.5 w-3.5"}}}
                    </a>
                  </td>
                </tr>
              {{/each}}
              <tr id="home-no-tables-match" class="hidden">
                <td colspan="{{#if readonly}}4{{else}}5{{/if}}" class="py-12 text-center text-sm text-base-content/50">
                  <div class="flex flex-col items-center justify-center gap-2">
                    {{{icon "search" class="h-6 w-6 text-base-content/30"}}}
                    <p>No tables matching "<span id="home-search-query-text" class="font-semibold font-mono text-base-content/80"></span>"</p>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    {{else}}
      <div class="empty-state">
        <span class="empty-icon">
          {{{icon "table" class="h-7 w-7"}}}
        </span>
        <p class="text-sm font-medium text-base-content/70">No tables yet</p>
        <p class="max-w-sm text-sm text-base-content/45">Create one with the table designer, or run a SQL statement in the query editor to get started.</p>
        <div class="mt-2 flex gap-2">
          {{#unless readonly}}
            <a href="{{basePath}}/designer/{{encodeUri dbId}}" class="btn btn-primary btn-sm">New table</a>
          {{/unless}}
          <a href="{{basePath}}/query/{{encodeUri dbId}}" class="btn btn-outline btn-sm">Query editor</a>
        </div>
      </div>
    {{/if}}
  </div>
  (function () {
    try {
      var currentDbId = '{{dbId}}';
      var raw = localStorage.getItem('admindb_saved_queries_' + currentDbId);
      var count = raw ? JSON.parse(raw).length : 0;
      var el = document.getElementById('stat-saved-queries');
      if (el) el.textContent = String(count);
    } catch (_) {}
  })();