admindb 1.2.1 → 2.1.0

package/dist/views/pages/home.hbs

@@ -1,19 +1,21 @@
+{{!-- Page: Database Overview Dashboard · URL: / (or /{basePath}/) --}}
 <div class="space-y-8">
+
   <!-- Header -->
   <div class="flex flex-wrap items-end justify-between gap-4">
     <div>
       <p class="text-sm font-semibold uppercase tracking-wider text-primary">Overview</p>
       <h1 class="mt-1 text-3xl font-extrabold tracking-tight">Database</h1>
-      <p class="mt-1.5 text-sm text-base-content/55">Browse, edit, and query the connected SQLite database from your browser.</p>
+      <p class="mt-1.5 text-sm text-base-content/55">Browse, edit, and query the connected database from your browser.</p>
     </div>
     <div class="flex gap-2">
       <a href="{{basePath}}/query" class="btn btn-ghost 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="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
+        {{{icon "query" class="h-4 w-4"}}}
         Query
       </a>
       {{#unless readonly}}
         <a href="{{basePath}}/designer" 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="M12 4v16m8-8H4" /></svg>
+          {{{icon "plus" class="h-4 w-4"}}}
           New table
         </a>
       {{/unless}}
@@ -24,7 +26,7 @@
   <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">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
+        {{{icon "table" class="h-6 w-6"}}}
       </span>
       <div>
         <div class="text-2xl font-extrabold tabular-nums">{{tables.length}}</div>
@@ -33,7 +35,7 @@
     </div>
     <div class="stat-card">
       <span class="stat-icon bg-secondary/10 text-secondary">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
+        {{{icon "stats" class="h-6 w-6"}}}
       </span>
       <div>
         <div class="text-2xl font-extrabold tabular-nums">{{totalRows}}</div>
@@ -42,7 +44,7 @@
     </div>
     <div class="stat-card">
       <span class="stat-icon bg-accent/10 text-accent">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" /></svg>
+        {{{icon "seed" class="h-6 w-6"}}}
       </span>
       <div>
         <div class="text-2xl font-extrabold tabular-nums">{{savedQueries}}</div>
@@ -50,12 +52,19 @@
       </div>
     </div>
     <div class="stat-card">
-      <span class="stat-icon bg-warning/10 text-warning">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 7v10c0 1.1.9 2 2 2h12a2 2 0 002-2V7M4 7c0-1.1.9-2 2-2h12a2 2 0 012 2M4 7c0 1.1.9 2 2 2h12a2 2 0 002-2" /></svg>
+      <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="truncate font-mono text-lg font-bold" title="{{dbPath}}">{{dbPath}}</div>
-        <div class="text-[13px] text-base-content/50">Database file</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>
@@ -85,7 +94,7 @@
                   <td>
                     <a href="{{../basePath}}/tables/{{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">
-                        <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 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
+                        {{{icon "table" class="h-4 w-4"}}}
                       </span>
                       <span class="font-mono text-[13.5px]">{{this}}</span>
                     </a>
@@ -95,7 +104,7 @@
                   <td class="text-right">
                     <a href="{{../basePath}}/tables/{{this}}" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary">
                       Browse
-                      <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="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
+                      {{{icon "arrowRight" class="h-3.5 w-3.5"}}}
                     </a>
                   </td>
                 </tr>
@@ -107,7 +116,7 @@
     {{else}}
       <div class="empty-state">
         <span class="empty-icon">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
+          {{{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>

package/dist/views/pages/login.hbs

@@ -0,0 +1,111 @@
+{{!-- Page: Authentication & Login · URL: /login --}}
+<div class="flex min-h-[75vh] items-center justify-center py-6 px-4">
+
+  <div class="w-full max-w-md">
+    <!-- Brand Header -->
+    <div class="mb-8 text-center">
+      <div class="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-primary/10 text-primary shadow-soft">
+        {{{icon "database" class="h-8 w-8"}}}
+      </div>
+      <h1 class="text-2xl font-extrabold tracking-tight text-base-content sm:text-3xl">
+        Admin<span class="text-primary">DB</span>
+      </h1>
+      <p class="mt-1 text-sm text-base-content/60">
+        Sign in to access your database administration console
+      </p>
+    </div>
+
+    <!-- Login Card -->
+    <div class="app-card border border-base-300/80 bg-base-100 p-6 sm:p-8 shadow-soft">
+      {{#if error}}
+        <div class="mb-6 flex items-start gap-3 rounded-xl bg-error/10 p-4 text-sm text-error border border-error/20" role="alert">
+          <span class="shrink-0 mt-0.5">
+            {{{icon "warning" class="h-5 w-5"}}}
+          </span>
+          <div class="font-medium">{{error}}</div>
+        </div>
+      {{/if}}
+
+      {{#if isDefaultPassword}}
+        <div class="mb-6 rounded-xl bg-info/10 p-3.5 text-xs text-info border border-info/20">
+          <div class="font-semibold flex items-center gap-1.5 mb-1">
+            {{{icon "warning" class="h-4 w-4 shrink-0"}}}
+            Default Credentials Active
+          </div>
+          <p class="text-base-content/70">
+            Username: <code class="font-mono font-semibold text-primary">admin</code> · Password: <code class="font-mono font-semibold text-primary">admin</code>
+          </p>
+          <p class="mt-1 text-[11px] text-base-content/50">
+            Set <code class="font-mono">ADMINDB_PASSWORD</code> in production to secure your console.
+          </p>
+        </div>
+      {{/if}}
+
+      <form method="POST" action="{{basePath}}/login" class="space-y-4">
+        {{#if next}}
+          <input type="hidden" name="next" value="{{next}}" />
+        {{/if}}
+
+        <div>
+          <label class="field-label" for="login-username">
+            <span>Username</span>
+          </label>
+          <div class="relative">
+            <input
+              id="login-username"
+              type="text"
+              name="username"
+              value="{{#if username}}{{username}}{{else}}admin{{/if}}"
+              required
+              autofocus
+              placeholder="Username"
+              class="field-input pl-10"
+              autocomplete="username"
+            />
+            <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-base-content/40">
+              {{{icon "user" class="h-5 w-5"}}}
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <label class="field-label" for="login-password">
+            <span>Password</span>
+          </label>
+          <div class="relative">
+            <input
+              id="login-password"
+              type="password"
+              name="password"
+              required
+              placeholder="••••••••"
+              class="field-input pl-10"
+              autocomplete="current-password"
+            />
+            <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-base-content/40">
+              {{{icon "lock" class="h-5 w-5"}}}
+            </div>
+          </div>
+        </div>
+
+        <div class="pt-2">
+          <button type="submit" class="btn btn-primary w-full gap-2 font-semibold shadow-soft">
+            {{{icon "logout" class="h-4 w-4 rotate-180"}}}
+            Sign In
+          </button>
+        </div>
+      </form>
+    </div>
+
+    <!-- Security & Auth Control Note -->
+    <div class="mt-6 space-y-2 text-center text-xs text-base-content/55">
+      <p class="leading-relaxed">
+        <span class="font-semibold text-base-content/80">Security Notice:</span> Built-in auth provides basic access control. For production, protect your admin routes using your own application authentication, VPN, or reverse proxy.
+      </p>
+      <p class="text-base-content/40">
+        Native authentication can be disabled via <code class="font-mono">--no-auth</code> or <code class="font-mono">auth: false</code>.
+      </p>
+    </div>
+  </div>
+</div>
+

package/dist/views/pages/query.hbs

@@ -1,4 +1,6 @@
+{{!-- Page: SQL Query Console & Workbench · URL: /query --}}
 <div class="space-y-6">
+
   <!-- Header -->
   <div class="flex flex-wrap items-center justify-between gap-3">
     <div>
@@ -9,12 +11,12 @@
     <div class="flex flex-wrap gap-2">
       {{#unless readonly}}
         <button id="save-query" type="button" class="btn btn-outline 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="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" /></svg>
+          {{{icon "save" class="h-4 w-4"}}}
           Save query
         </button>
       {{/unless}}
       <button id="run-query" type="button" 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="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" /><path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+        {{{icon "run" class="h-4 w-4"}}}
         Run
       </button>
     </div>
@@ -48,7 +50,7 @@
     <div class="flex items-center justify-between border-b border-base-200 bg-base-200/40 px-4 py-2.5">
       <span class="flex items-center gap-2 text-sm font-semibold text-base-content/60">
         <span class="grid h-5 w-5 place-items-center rounded-md bg-primary/10 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="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
+          {{{icon "query" class="h-3.5 w-3.5"}}}
         </span>
         query.sql
       </span>
@@ -68,16 +70,16 @@
     <div class="app-card overflow-hidden">
       <div class="flex items-center gap-2 border-b border-base-200 px-4 py-3">
         <span id="result-kind" class="grid h-6 w-6 place-items-center rounded-md bg-success/10 text-success">
-          <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="M5 13l4 4L19 7" /></svg>
+          {{{icon "check" class="h-4 w-4"}}}
         </span>
         <span id="result-summary" class="text-sm font-medium text-base-content/60"></span>
         <div class="ml-auto flex items-center gap-1.5">
           <button id="export-csv" type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary" disabled>
-            <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>
+            {{{icon "export" class="h-3.5 w-3.5"}}}
             CSV
           </button>
           <button id="export-json" type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary" disabled>
-            <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>
+            {{{icon "export" class="h-3.5 w-3.5"}}}
             JSON
           </button>
         </div>

package/dist/views/pages/schema.hbs

@@ -1,9 +1,11 @@
+{{!-- Page: Table Schema & Structure Inspector · URL: /tables/:table/schema --}}
 <div class="space-y-6">
+
   <!-- Header -->
   <div class="flex flex-wrap items-center justify-between gap-3">
     <div class="flex items-center gap-3.5">
       <a href="{{basePath}}/tables/{{table}}" class="btn btn-circle btn-ghost btn-sm" aria-label="Back to table">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18" /></svg>
+        {{{icon "arrowLeft" class="h-5 w-5"}}}
       </a>
       <div>
         <p class="text-sm font-semibold uppercase tracking-wider text-primary">Schema editor</p>
@@ -12,11 +14,11 @@
     </div>
     <div class="flex flex-wrap gap-2">
       <a href="{{basePath}}/tables/{{table}}" class="btn btn-ghost 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="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
+        {{{icon "table" class="h-4 w-4"}}}
         View data
       </a>
       <a href="{{basePath}}/query" class="btn btn-outline 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="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
+        {{{icon "query" class="h-4 w-4"}}}
         Query
       </a>
     </div>
@@ -30,7 +32,7 @@
         <input id="table-rename-input" class="field-input font-mono" value="{{table}}" spellcheck="false" autocomplete="off" {{#if isInternal}}disabled{{/if}} {{#if readonly}}disabled{{/if}} />
       </div>
       <button id="rename-table" type="button" class="btn btn-primary btn-sm mb-0.5" {{#if isInternal}}disabled{{/if}} {{#if readonly}}disabled{{/if}}>
-        <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg>
+        {{{icon "edit" class="h-4 w-4"}}}
         Rename table
       </button>
       {{#if isInternal}}<span class="mb-1 text-xs text-base-content/45">Internal tables cannot be renamed.</span>{{/if}}
@@ -45,20 +47,37 @@
         <span class="ml-1 rounded-md bg-base-200 px-1.5 py-0.5 text-[10px] text-base-content/50">{{schema.columns.length}}</span>
       </h2>
       <button id="add-column" type="button" class="btn btn-outline btn-sm gap-1.5" {{#if readonly}}disabled{{/if}}>
-        <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="M12 4v16m8-8H4" /></svg>
+        {{{icon "plus" class="h-4 w-4"}}}
         Add column
       </button>
     </div>
 
     <div id="add-column-panel" class="hidden border-b border-base-200 p-4">
+      <div class="mb-2 text-xs font-bold uppercase tracking-wider text-primary">Add New Column</div>
       <div id="add-column-form" class="grid grid-cols-2 items-end gap-2.5 sm:grid-cols-12"></div>
       <div id="add-column-error" class="hidden mt-3"></div>
-      <div class="mt-3 flex gap-2">
+      <div class="mt-3.5 flex gap-2">
         <button id="add-column-submit" type="button" class="btn btn-primary btn-sm">Add column</button>
         <button id="add-column-cancel" type="button" class="btn btn-ghost btn-sm">Cancel</button>
       </div>
     </div>
 
+    <div id="edit-column-panel" class="hidden border-b border-base-200 bg-base-200/30 p-4">
+      <div class="mb-2.5 flex items-center justify-between">
+        <div class="flex items-center gap-2">
+          <span class="text-xs font-bold uppercase tracking-wider text-primary">Edit Column:</span>
+          <span id="edit-column-target" class="font-mono text-sm font-bold text-base-content"></span>
+        </div>
+        <span class="text-[11px] text-base-content/45">Change data type, default value, primary key, nullability, uniqueness, or foreign key.</span>
+      </div>
+      <div id="edit-column-form" class="grid grid-cols-2 items-end gap-2.5 sm:grid-cols-12"></div>
+      <div id="edit-column-error" class="hidden mt-3"></div>
+      <div class="mt-3.5 flex gap-2">
+        <button id="edit-column-submit" type="button" class="btn btn-primary btn-sm">Save Changes</button>
+        <button id="edit-column-cancel" type="button" class="btn btn-ghost btn-sm">Cancel</button>
+      </div>
+    </div>
+
     <div class="overflow-x-auto">
       <table class="table table-sm">
         <thead>
@@ -92,12 +111,21 @@
               </td>
               <td class="whitespace-nowrap text-right align-middle">
                 <div class="flex items-center justify-end gap-1">
-                  <button type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary col-rename" {{#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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg>
-                    Rename
+                  <button type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary col-edit"
+                    data-column="{{this.name}}"
+                    data-type="{{this.type}}"
+                    data-pk="{{#if (gt this.pk 0)}}true{{else}}false{{/if}}"
+                    data-notnull="{{#if this.notnull}}true{{else}}false{{/if}}"
+                    data-unique="{{#if this.unique}}true{{else}}false{{/if}}"
+                    data-default="{{this.dflt_value}}"
+                    data-fk-table="{{this.fk.table}}"
+                    data-fk-to="{{this.fk.to}}"
+                    {{#if ../readonly}}disabled{{/if}}>
+                    {{{icon "edit" class="h-3.5 w-3.5"}}}
+                    Edit
                   </button>
                   <button type="button" class="btn btn-ghost btn-xs gap-1 text-error col-drop" {{#if ../readonly}}disabled{{/if}} {{#unless this.canDrop}}disabled title="{{join this.dropBlockers "; "}}"{{/unless}}>
-                    <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>
+                    {{{icon "trash" class="h-3.5 w-3.5"}}}
                     Delete
                   </button>
                 </div>
@@ -148,7 +176,7 @@
         <span class="ml-1 rounded-md bg-base-200 px-1.5 py-0.5 text-[10px] text-base-content/50">{{schema.indexes.length}}</span>
       </h2>
       <button id="add-index" type="button" class="btn btn-outline btn-sm gap-1.5" {{#if readonly}}disabled{{/if}}>
-        <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="M12 4v16m8-8H4" /></svg>
+        {{{icon "plus" class="h-4 w-4"}}}
         Add index
       </button>
     </div>
@@ -225,7 +253,7 @@
                 <td class="whitespace-nowrap text-right align-middle">
                   <button type="button" class="btn btn-ghost btn-xs gap-1 text-error index-drop"
                     data-index="{{this.name}}" {{#if ../readonly}}disabled{{/if}} {{#unless (eq this.origin 'c')}}disabled title="Automatic index — cannot be dropped"{{/unless}}>
-                    <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>
+                    {{{icon "trash" class="h-3.5 w-3.5"}}}
                     Drop
                   </button>
                 </td>
@@ -270,7 +298,7 @@
   {{#unless isInternal}}
     <div class="rounded-2xl border border-error/25 bg-error/[0.03] p-5">
       <h2 class="flex items-center gap-2 text-sm font-semibold uppercase tracking-wide text-error">
-        <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="M12 9v2m0 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>
+        {{{icon "warning" class="h-4 w-4"}}}
         Danger zone
       </h2>
       <p class="mt-1 text-sm text-base-content/55">Dropping this table permanently removes its schema and all of its data.</p>