sqlite-hub 0.3.2 → 0.4.0

package/{js → frontend/js}/views/structure.js

@@ -6,8 +6,8 @@ function renderEntryGroup(title, entries, activeName, options = {}) {
   const { compact = false, showMeta = true } = options;
 
   return `
-    <section class="shell-section p-5">
-      <div class="mb-4 text-[10px] font-bold uppercase tracking-[0.25em] text-primary-container">
+    <section class="shell-section flex flex-col p-5">
+      <div class="mb-4 shrink-0 text-[10px] font-bold uppercase tracking-[0.25em] text-primary-container">
         ${escapeHtml(title)}
       </div>
       ${
@@ -209,10 +209,6 @@ function renderGraphSurface(structure, selectedName, detail, detailLoading) {
               type="search"
             />
           </label>
-          <div class="structure-graph__toolbar-meta">
-            ${escapeHtml(formatNumber(graph.tables?.length ?? 0))} TABLES //
-            ${escapeHtml(formatNumber(graph.relationshipCount ?? 0))} RELATIONSHIPS
-          </div>
         </div>
         <div class="structure-graph__toolbar-actions">
           <button
@@ -293,8 +289,8 @@ export function renderStructureView(state) {
 
   return {
     main: `
-      <section class="view-surface min-h-full bg-surface-container">
-        <div class="view-frame space-y-8">
+      <section class="view-surface flex h-full min-h-0 flex-col bg-surface-container">
+        <div class="view-frame flex h-full min-h-0 flex-col">
           ${renderPageHeader({
             title: "Structure",
             subtitle: "Schema graph, foreign-key paths, raw DDL, and object metadata",
@@ -303,7 +299,7 @@ export function renderStructureView(state) {
           ${
             state.structure.loading && !structure
               ? `
-                <div class="flex min-h-[280px] items-center justify-center border border-outline-variant/10 bg-surface-container-low">
+                <div class="flex min-h-0 flex-1 items-center justify-center border border-outline-variant/10 bg-surface-container-low">
                   <div class="text-center text-on-surface-variant/40">
                     <span class="material-symbols-outlined mb-3 text-4xl">progress_activity</span>
                     <p class="font-mono text-[10px] uppercase tracking-[0.22em]">LOADING_STRUCTURE</p>
@@ -312,7 +308,7 @@ export function renderStructureView(state) {
               `
               : state.structure.error
                 ? `
-                    <div class="border border-error/20 bg-error-container/10 px-6 py-5 text-sm text-on-surface">
+                    <div class="min-h-0 flex-1 border border-error/20 bg-error-container/10 px-6 py-5 text-sm text-on-surface">
                       <div class="font-headline text-xs font-bold uppercase tracking-[0.18em] text-error">
                         ${escapeHtml(state.structure.error.code)}
                       </div>
@@ -321,8 +317,9 @@ export function renderStructureView(state) {
                   `
                 : structure
                   ? `
-                      <section class="grid grid-cols-1 gap-6 xl:grid-cols-[18.5rem_minmax(0,1fr)] 2xl:grid-cols-[19.5rem_minmax(0,1fr)]">
-                        <div class="space-y-6">
+                      <section class="grid min-h-0 flex-1 grid-cols-1 gap-6 xl:grid-cols-[18.5rem_minmax(0,1fr)] 2xl:grid-cols-[19.5rem_minmax(0,1fr)]">
+                        <div class="custom-scrollbar min-h-0 overflow-y-auto pr-1">
+                          <div class="space-y-6">
                           ${renderEntryGroup(
                             "Tables",
                             structure.grouped.tables,
@@ -345,6 +342,7 @@ export function renderStructureView(state) {
                             structure.grouped.triggers,
                             state.structure.selectedName
                           )}
+                          </div>
                         </div>
                         ${renderGraphSurface(
                           structure,

package/{styles → frontend/styles}/structure-graph.css

@@ -3,7 +3,8 @@
   border: 1px solid rgba(138, 123, 52, 0.26);
   display: flex;
   flex-direction: column;
-  min-height: 760px;
+  height: 100%;
+  min-height: 0;
   overflow: hidden;
 }
 
@@ -100,14 +101,6 @@
   appearance: none;
 }
 
-.structure-graph__toolbar-meta {
-  color: rgba(231, 223, 189, 0.64);
-  font-family: var(--font-family-mono);
-  font-size: 0.625rem;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-}
-
 .structure-graph__button {
   align-items: center;
   background: rgba(17, 17, 15, 0.94);
@@ -193,8 +186,10 @@
 .structure-graph__inspector {
   background: linear-gradient(to bottom, rgba(26, 25, 23, 0.98), rgba(11, 11, 10, 0.99));
   border-left: 1px solid rgba(138, 123, 52, 0.24);
+  height: 100%;
   min-height: 0;
-  overflow: auto;
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 
 .structure-graph.is-inspector-hidden .structure-graph__inspector {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "sqlite-hub",
-    "version": "0.3.2",
+    "version": "0.4.0",
     "description": "SQLite-only local management app backend and SPA shell",
     "main": "server/server.js",
     "bin": {
@@ -9,7 +9,7 @@
     "scripts": {
         "start": "node bin/sqlite-hub.js",
         "dev": "node --watch server/server.js --port:4180",
-        "publish": "bash publish_brew.sh && bash publish_npm.sh"
+        "publish": "bash scripts/publish_brew.sh && sleep 10 && npm login --auth-type=web && bash scripts/publish_npm.sh"
     },
     "dependencies": {
         "better-sqlite3": "^11.8.1",

package/{publish_brew.sh → scripts/publish_brew.sh}

@@ -2,7 +2,7 @@
 
 set -euo pipefail
 
-ROOT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+ROOT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
 cd "$ROOT_DIR"
 
 DRY_RUN=0
@@ -17,7 +17,7 @@ GH_REMOTE="origin"
 usage() {
   cat <<'EOF'
 Usage:
-  ./publish.sh [options]
+  ./scripts/publish_brew.sh [options]
 
 Options:
   --version X.Y.Z      Override the package.json version for this publish run.

package/{publish_npm.sh → scripts/publish_npm.sh}

@@ -2,7 +2,7 @@
 
 set -euo pipefail
 
-ROOT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+ROOT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
 cd "$ROOT_DIR"
 
 DRY_RUN=0
@@ -15,7 +15,7 @@ GH_REMOTE="origin"
 usage() {
   cat <<'EOF'
 Usage:
-  ./publish_npm.sh [options]
+  ./scripts/publish_npm.sh [options]
 
 Options:
   --tag NAME          Publish to a custom npm dist-tag instead of `latest`.

package/server/routes/connections.js

@@ -113,6 +113,8 @@ function createConnectionsRouter({ connectionManager, importService, backupServi
         filePath: req.body.path,
         label: req.body.label,
         readOnly: Boolean(req.body.readOnly),
+        logoUpload: req.body.logoUpload ?? null,
+        clearLogo: Boolean(req.body.clearLogo),
       });
 
       res.json(

package/server/server.js

@@ -20,7 +20,10 @@ const { createSettingsRouter } = require("./routes/settings");
 const { createExportRouter } = require("./routes/export");
 
 const PACKAGE_ROOT = path.resolve(__dirname, "..");
+const FRONTEND_ROOT = path.join(PACKAGE_ROOT, "frontend");
+const FRONTEND_ENTRYPOINT = path.join(FRONTEND_ROOT, "index.html");
 const {
+  appStateDirectory: APP_STATE_DIRECTORY,
   appStateDbPath: APP_STATE_DB_PATH,
   legacyStatePath: LEGACY_STATE_PATH,
   legacyDatabasePaths: LEGACY_DATABASE_PATHS,
@@ -83,11 +86,11 @@ app.get("/favicon.ico", (req, res) => {
 });
 
 app.get("/", (req, res) => {
-  res.sendFile(path.resolve(__dirname, "..", "index.html"));
+  res.sendFile(FRONTEND_ENTRYPOINT);
 });
 
 app.get("/index.html", (req, res) => {
-  res.sendFile(path.resolve(__dirname, "..", "index.html"));
+  res.sendFile(FRONTEND_ENTRYPOINT);
 });
 
 app.use(
@@ -102,9 +105,8 @@ app.use(
   "/vendor/elkjs",
   express.static(path.resolve(__dirname, "..", "node_modules", "elkjs"))
 );
-app.use("/js", express.static(path.resolve(__dirname, "..", "js")));
-app.use("/styles", express.static(path.resolve(__dirname, "..", "styles")));
-app.use("/assets", express.static(path.resolve(__dirname, "..", "assets")));
+app.use(express.static(FRONTEND_ROOT));
+app.use("/db_logos", express.static(path.join(APP_STATE_DIRECTORY, "db_logos")));
 app.use(errorMiddleware);
 
 function parsePortArgument(argv = process.argv.slice(2)) {

package/server/services/sqlite/connectionManager.js

@@ -44,6 +44,7 @@ class ConnectionManager {
         filePath: recent.path,
         label: recent.label,
         id: recent.id,
+        logoPath: recent.logoPath ?? null,
         makeActive: true,
       });
     } catch (error) {
@@ -54,17 +55,26 @@ class ConnectionManager {
 
   buildConnectionRecord(filePath, options = {}) {
     const metadata = getFileMetadata(filePath);
+    const id =
+      options.id ??
+      `conn_${crypto.createHash("sha1").update(filePath).digest("hex").slice(0, 16)}`;
+    const existingConnection = this.appStateStore
+      .getRecentConnections()
+      .find((connection) => connection.id === id);
+    const logoPath = Object.prototype.hasOwnProperty.call(options, "logoPath")
+      ? options.logoPath
+      : (existingConnection?.logoPath ?? null);
 
     return {
-      id:
-        options.id ??
-        `conn_${crypto.createHash("sha1").update(filePath).digest("hex").slice(0, 16)}`,
+      id,
       label: options.label?.trim() || path.basename(filePath),
       path: filePath,
       lastOpenedAt: new Date().toISOString(),
       lastModifiedAt: metadata.lastModifiedAt,
       sizeBytes: metadata.sizeBytes,
       readOnly: options.readOnly ?? !isWritable(filePath),
+      logoPath,
+      logoUrl: this.appStateStore.getConnectionLogoUrl(logoPath),
     };
   }
 
@@ -94,7 +104,7 @@ class ConnectionManager {
     this.current = null;
   }
 
-  openConnection({ filePath, label, id, makeActive = true, readOnly = false }) {
+  openConnection({ filePath, label, id, makeActive = true, readOnly = false, logoPath }) {
     const resolvedPath = validateSqlitePath(filePath, { mustExist: true });
     const db = this.openRawDatabase(resolvedPath, {
       fileMustExist: true,
@@ -103,11 +113,17 @@ class ConnectionManager {
 
     this.closeCurrent();
 
-    const connection = this.buildConnectionRecord(resolvedPath, {
+    const connectionOptions = {
       id,
       label,
       readOnly,
-    });
+    };
+
+    if (logoPath !== undefined) {
+      connectionOptions.logoPath = logoPath;
+    }
+
+    const connection = this.buildConnectionRecord(resolvedPath, connectionOptions);
 
     this.current = {
       ...connection,
@@ -186,6 +202,7 @@ class ConnectionManager {
       id: recent.id,
       makeActive: true,
       readOnly: recent.readOnly,
+      logoPath: recent.logoPath ?? null,
     });
   }
 
@@ -199,7 +216,7 @@ class ConnectionManager {
     return state.recentConnections;
   }
 
-  updateRecentConnection(id, { filePath, label, readOnly = false }) {
+  updateRecentConnection(id, { filePath, label, readOnly = false, logoUpload = null, clearLogo = false }) {
     const recentConnections = this.appStateStore.getRecentConnections();
     const existing = recentConnections.find((connection) => connection.id === id);
 
@@ -218,40 +235,58 @@ class ConnectionManager {
 
     const normalizedLabel = label?.trim() || path.basename(resolvedPath);
     const normalizedReadOnly = Boolean(readOnly);
+    let nextLogoPath = clearLogo ? null : existing.logoPath ?? null;
+    let createdLogoPath = null;
 
-    if (this.current?.id === id) {
-      return this.openConnection({
-        filePath: resolvedPath,
-        label: normalizedLabel,
-        id,
-        makeActive: true,
+    if (logoUpload) {
+      createdLogoPath = this.appStateStore.saveConnectionLogo(id, logoUpload);
+      nextLogoPath = createdLogoPath;
+    }
+
+    try {
+      if (this.current?.id === id) {
+        return this.openConnection({
+          filePath: resolvedPath,
+          label: normalizedLabel,
+          id,
+          makeActive: true,
+          readOnly: normalizedReadOnly,
+          logoPath: nextLogoPath,
+        });
+      }
+
+      const db = this.openRawDatabase(resolvedPath, {
+        fileMustExist: true,
         readOnly: normalizedReadOnly,
       });
-    }
 
-    const db = this.openRawDatabase(resolvedPath, {
-      fileMustExist: true,
-      readOnly: normalizedReadOnly,
-    });
+      db.close();
 
-    db.close();
+      const metadata = getFileMetadata(resolvedPath);
+      const nextConnection = {
+        ...existing,
+        label: normalizedLabel,
+        path: resolvedPath,
+        lastModifiedAt: metadata.lastModifiedAt,
+        sizeBytes: metadata.sizeBytes,
+        readOnly: normalizedReadOnly,
+        logoPath: nextLogoPath,
+      };
 
-    const metadata = getFileMetadata(resolvedPath);
-    const nextConnection = {
-      ...existing,
-      label: normalizedLabel,
-      path: resolvedPath,
-      lastModifiedAt: metadata.lastModifiedAt,
-      sizeBytes: metadata.sizeBytes,
-      readOnly: normalizedReadOnly,
-    };
+      this.appStateStore.updateRecentConnection(id, () => nextConnection);
 
-    this.appStateStore.updateRecentConnection(id, () => nextConnection);
+      return {
+        ...nextConnection,
+        logoUrl: this.appStateStore.getConnectionLogoUrl(nextLogoPath),
+        isActive: false,
+      };
+    } catch (error) {
+      if (createdLogoPath) {
+        this.appStateStore.deleteConnectionLogo(createdLogoPath);
+      }
 
-    return {
-      ...nextConnection,
-      isActive: false,
-    };
+      throw error;
+    }
   }
 
   getActiveConnection() {