sqlite-hub 0.11.1 → 0.16.0

package/frontend/js/components/emptyState.js

@@ -1,67 +1,61 @@
-import {
-  escapeHtml,
-  formatBytes,
-  formatDateTime,
-  truncateMiddle,
-} from "../utils/format.js";
-import { renderConnectionLogo } from "./connectionLogo.js";
+import { escapeHtml, formatBytes, formatDateTime, truncateMiddle } from '../utils/format.js';
+import { renderConnectionLogo } from './connectionLogo.js';
 
 function renderRecentConnectionButton(connection) {
-  return [
-    '<button class="control-button flex items-center gap-2 border border-outline-variant/15 bg-surface-container-low px-4 text-left text-on-surface transition-colors hover:border-primary-container/30 hover:bg-surface-container-high" data-action="select-connection" data-connection-id="',
-    escapeHtml(connection.id),
-    '" type="button">',
-    renderConnectionLogo(connection, {
-      containerClass:
-        "flex h-8 w-8 items-center justify-center overflow-hidden bg-surface-container-highest",
-      imageClassName: "h-full w-full object-cover",
-      iconClassName: "text-sm text-primary-container",
-    }),
-    '<span class="min-w-0"><span class="block truncate font-mono text-xs">',
-    escapeHtml(connection.label),
-    '</span><span class="block truncate text-[10px] text-on-surface-variant/45">',
-    escapeHtml(truncateMiddle(connection.path, 34)),
-    "</span></span></button>",
-  ].join("");
+    return [
+        '<button class="control-button flex items-center gap-2 border border-outline-variant/15 bg-surface-container-low px-4 text-left text-on-surface transition-colors hover:border-primary-container/30 hover:bg-surface-container-high" data-action="select-connection" data-connection-id="',
+        escapeHtml(connection.id),
+        '" type="button">',
+        renderConnectionLogo(connection, {
+            containerClass: 'flex h-8 w-8 items-center justify-center overflow-hidden bg-surface-container-highest',
+            imageClassName: 'h-full w-full object-cover',
+            iconClassName: 'text-sm text-primary-container',
+        }),
+        '<span class="min-w-0"><span class="block truncate font-mono text-xs">',
+        escapeHtml(connection.label),
+        '</span><span class="block truncate text-[10px] text-on-surface-variant/45">',
+        escapeHtml(truncateMiddle(connection.path, 34)),
+        '</span></span></button>',
+    ].join('');
 }
 
 function renderRecentConnections(recentConnections = []) {
-  if (!recentConnections.length) {
-    return `
+    if (!recentConnections.length) {
+        return `
       <div class="text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/40">
         No recent SQLite databases recorded yet.
       </div>
     `;
-  }
+    }
 
-  return `
+    return `
     <div class="flex flex-wrap justify-center gap-4">
       ${recentConnections
-        .slice(0, 4)
-        .map((connection) => renderRecentConnectionButton(connection))
-        .join("")}
+          .slice(0, 4)
+          .map(connection => renderRecentConnectionButton(connection))
+          .join('')}
     </div>
   `;
 }
 
 function renderActiveConnection(activeConnection) {
-  if (!activeConnection) {
-    return `
+    if (!activeConnection) {
+        return `
       <p class="font-light text-lg uppercase tracking-wide text-on-surface-variant">
         No database connected
       </p>
     `;
-  }
+    }
 
-  return `
+    return `
     <div class="mx-auto max-w-2xl border border-outline-variant/15 bg-surface-container-low px-6 py-5 text-left">
       <div class="flex flex-wrap items-start justify-between gap-4">
         <div class="flex items-start gap-4">
           ${renderConnectionLogo(activeConnection, {
-            containerClass:
-              "flex h-14 w-14 items-center justify-center overflow-hidden border border-outline-variant/15 bg-surface-container-highest",
-            imageClassName: "h-full w-full object-cover",
-            iconClassName: "text-2xl text-primary-container",
+              containerClass:
+                  'flex h-14 w-14 items-center justify-center overflow-hidden border border-outline-variant/15 bg-surface-container-highest',
+              imageClassName: 'h-full w-full object-cover',
+              iconClassName: 'text-2xl text-primary-container',
           })}
           <div>
             <p class="text-[10px] font-mono uppercase tracking-[0.24em] text-primary-container/70">
@@ -71,14 +65,14 @@ function renderActiveConnection(activeConnection) {
               ${escapeHtml(activeConnection.label)}
             </h2>
             <p class="mt-2 font-mono text-[10px] text-on-surface-variant/55">${escapeHtml(
-              truncateMiddle(activeConnection.path, 72)
+                truncateMiddle(activeConnection.path, 72),
             )}</p>
           </div>
         </div>
         <div class="text-right text-xs text-on-surface-variant/65">
           <div>${escapeHtml(formatBytes(activeConnection.sizeBytes))}</div>
           <div class="mt-1">${escapeHtml(formatDateTime(activeConnection.lastModifiedAt))}</div>
-          <div class="mt-1">${activeConnection.readOnly ? "READ_ONLY" : "READ_WRITE"}</div>
+          <div class="mt-1">${activeConnection.readOnly ? 'READ_ONLY' : 'READ_WRITE'}</div>
         </div>
       </div>
     </div>
@@ -86,9 +80,9 @@ function renderActiveConnection(activeConnection) {
 }
 
 export function renderEmptyState({ activeConnection, recentConnections = [] }) {
-  const hasActive = Boolean(activeConnection);
+    const hasActive = Boolean(activeConnection);
 
-  return `
+    return `
     <section class="landing-view machined-grid px-6">
       <div class="landing-accent landing-accent--a"></div>
       <div class="landing-accent landing-accent--b"></div>
@@ -96,12 +90,14 @@ export function renderEmptyState({ activeConnection, recentConnections = [] }) {
       <div class="empty-state-shell z-10 text-center">
         <div class="mb-2">
           <span class="font-mono text-[10px] tracking-[0.3em] text-primary-container/40">
-            SYSTEM_READY // ${hasActive ? "ACTIVE_CONTEXT" : "IDLE_STATE"}
+            SYSTEM_READY // ${hasActive ? 'ACTIVE_CONTEXT' : 'IDLE_STATE'}
           </span>
         </div>
         <h1 class="mb-4 font-headline text-7xl font-black tracking-tighter text-primary-container opacity-90 md:text-9xl">
           SQLite Hub
         </h1>
+        <p class="font-mono text-primary-container/40">The only fucking SQLite Manager you'll ever need.</p>
+        <br/>
         <div class="mx-auto mb-12 max-w-3xl space-y-4">
           ${renderActiveConnection(activeConnection)}
           <div class="h-[2px] w-12 bg-primary-container mx-auto"></div>
@@ -128,8 +124,8 @@ export function renderEmptyState({ activeConnection, recentConnections = [] }) {
           </button>
         </div>
         ${
-          hasActive
-            ? `
+            hasActive
+                ? `
               <div class="mx-auto mt-8 grid w-full max-w-3xl grid-cols-1 gap-4 px-6 md:grid-cols-3">
                 <button
                   class="standard-button"
@@ -157,7 +153,7 @@ export function renderEmptyState({ activeConnection, recentConnections = [] }) {
                 </button>
               </div>
             `
-            : ""
+                : ''
         }
         <div class="mt-16 flex flex-col items-center gap-4 opacity-70 transition-opacity hover:opacity-100">
           <p class="font-mono text-[10px] tracking-widest text-on-surface-variant">RECENT_TARGETS</p>