sqlite-hub 0.16.0 → 0.17.0

package/frontend/styles/views.css

@@ -218,6 +218,428 @@
     min-height: 0;
 }
 
+.documents-view-surface {
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.documents-view-frame {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.documents-view {
+    background: var(--color-surface);
+    border: 1px solid var(--border-medium);
+    display: flex;
+    flex: 1;
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.documents-view__sidebar {
+    background: var(--color-surface-low);
+    border-right: 1px solid var(--border-medium);
+    display: flex;
+    flex: 0 0 clamp(17rem, 23vw, 21rem);
+    flex-direction: column;
+    min-height: 100%;
+    overflow: hidden;
+    width: clamp(17rem, 23vw, 21rem);
+}
+
+.documents-view__sidebar-header {
+    align-items: center;
+    border-bottom: 1px solid var(--border-medium);
+    display: flex;
+    justify-content: space-between;
+    padding: var(--spacing-5);
+}
+
+.documents-view__sidebar-body {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: var(--spacing-2);
+    min-height: 0;
+    overflow: hidden;
+    padding: var(--spacing-3);
+}
+
+.documents-list-item {
+    align-items: flex-start;
+    background: var(--color-surface-lowest);
+    border: 1px solid rgb(var(--rgb-outline) / 0.12);
+    color: var(--color-on-surface);
+    display: flex;
+    gap: var(--spacing-3);
+    min-width: 0;
+    padding: var(--spacing-3);
+    text-align: left;
+    transition:
+        background-color var(--transition-fast),
+        border-color var(--transition-fast),
+        color var(--transition-fast);
+}
+
+.documents-list-item:hover,
+.documents-list-item.is-selected {
+    background: var(--color-surface-container);
+    border-color: var(--primary-alpha-24);
+}
+
+.documents-list-item.is-selected {
+    box-shadow: inset 2px 0 0 var(--color-primary-container);
+}
+
+.documents-list-item__icon {
+    color: var(--color-primary-container);
+    font-size: 1.1rem;
+    line-height: 1.25;
+}
+
+.documents-list-item__body {
+    display: block;
+    min-width: 0;
+}
+
+.documents-list-item__title {
+    display: block;
+    font-family: var(--font-family-mono);
+    font-size: 0.75rem;
+    font-weight: 700;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.documents-list-item__meta,
+.documents-list-empty {
+    color: rgb(var(--rgb-on-surface-variant) / 0.55);
+    display: block;
+    font-family: var(--font-family-mono);
+    font-size: 0.625rem;
+    margin-top: 0.25rem;
+    text-transform: uppercase;
+}
+
+.documents-list-empty {
+    padding: var(--spacing-4);
+}
+
+.documents-view__detail {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-height: 0;
+    min-width: 0;
+    overflow: hidden;
+}
+
+.documents-toolbar {
+    align-items: center;
+    border-bottom: 1px solid var(--border-medium);
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-4);
+    justify-content: space-between;
+    padding: var(--spacing-4);
+}
+
+.documents-filename-field {
+    display: flex;
+    flex-direction: column;
+    padding: var(--spacing-4);
+    padding-bottom: 0;
+    max-width: 32rem;
+    min-width: min(100%, 14rem);
+}
+
+.documents-filename-field span {
+    color: rgb(var(--rgb-on-surface-variant) / 0.6);
+    font-family: var(--font-family-mono);
+    font-size: 0.625rem;
+    font-weight: 700;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+}
+
+.documents-filename-field .control-input {
+    background: var(--color-surface-lowest);
+    border: 1px solid rgb(var(--rgb-outline) / 0.18);
+    color: var(--color-on-surface);
+    height: var(--control-height);
+    padding: 0 var(--spacing-3);
+}
+
+.documents-filename-field .control-input:focus {
+    border-color: var(--color-primary-container);
+}
+
+.documents-filename-field .control-input:disabled {
+    color: rgb(var(--rgb-on-surface-variant) / 0.72);
+    opacity: 1;
+}
+
+.documents-toolbar__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-2);
+    justify-content: flex-end;
+}
+
+.documents-workspace {
+    display: grid;
+    flex: 1;
+    grid-template-columns: 1fr;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.documents-workspace--split {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+}
+
+.documents-pane {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    min-width: 0;
+    overflow: hidden;
+}
+
+.documents-pane + .documents-pane {
+    border-left: 1px solid var(--border-medium);
+}
+
+.documents-pane__header {
+    align-items: center;
+    background: var(--color-surface-low);
+    border-bottom: 1px solid var(--border-medium);
+    color: rgb(var(--rgb-on-surface-variant) / 0.62);
+    display: flex;
+    font-family: var(--font-family-mono);
+    font-size: 0.625rem;
+    font-weight: 700;
+    justify-content: space-between;
+    letter-spacing: 0.18em;
+    padding: var(--spacing-3) var(--spacing-4);
+    text-transform: uppercase;
+}
+
+.documents-editor-input {
+    background: var(--color-surface-lowest);
+    border: 0;
+    color: var(--color-on-surface);
+    flex: 1;
+    font-family: var(--font-family-mono);
+    font-size: 0.875rem;
+    height: 100%;
+    line-height: 1.7;
+    min-height: 0;
+    outline: none;
+    overflow-y: auto;
+    padding: var(--spacing-5);
+    resize: none;
+}
+
+.documents-editor-input:focus {
+    box-shadow: inset 0 0 0 1px var(--color-primary-container);
+}
+
+.document-markdown-preview {
+    background: var(--color-surface-lowest);
+    color: var(--color-on-surface);
+    flex: 1;
+    font-size: 0.9375rem;
+    line-height: 1.7;
+    min-height: 0;
+    overflow-y: auto;
+    padding: var(--spacing-6);
+}
+
+.document-markdown-preview > * + * {
+    margin-top: 1rem;
+}
+
+.document-markdown-preview h1,
+.document-markdown-preview h2,
+.document-markdown-preview h3 {
+    color: var(--color-primary-container);
+    font-family: var(--font-family-headline);
+    font-weight: 900;
+    letter-spacing: 0;
+    line-height: 1.1;
+    text-transform: uppercase;
+}
+
+.document-markdown-preview h1 {
+    font-size: 2.25rem;
+}
+
+.document-markdown-preview h2 {
+    font-size: 1.5rem;
+}
+
+.document-markdown-preview h3 {
+    font-size: 1.15rem;
+}
+
+.document-markdown-preview a {
+    color: var(--color-primary-container);
+    text-decoration: underline;
+    text-underline-offset: 0.18em;
+}
+
+.document-markdown-preview code {
+    background: var(--color-surface-container);
+    color: var(--color-primary-container);
+    font-family: var(--font-family-mono);
+    font-size: 0.85em;
+    padding: 0.1rem 0.25rem;
+}
+
+.document-markdown-preview pre {
+    background: var(--color-surface-low);
+    border: 1px solid rgb(var(--rgb-outline) / 0.12);
+    overflow-x: auto;
+    padding: var(--spacing-4);
+}
+
+.document-markdown-preview pre code {
+    background: transparent;
+    color: inherit;
+    padding: 0;
+}
+
+.document-markdown-preview blockquote {
+    border-left: 2px solid var(--color-primary-container);
+    color: rgb(var(--rgb-on-surface) / 0.72);
+    padding-left: var(--spacing-4);
+}
+
+.document-markdown-preview table {
+    border-collapse: collapse;
+    width: 100%;
+}
+
+.document-markdown-preview th,
+.document-markdown-preview td {
+    border: 1px solid rgb(var(--rgb-outline) / 0.16);
+    padding: 0.5rem 0.75rem;
+    text-align: left;
+}
+
+.document-markdown-preview ul,
+.document-markdown-preview ol {
+    padding-left: 1.5rem;
+}
+
+.document-markdown-preview ul {
+    list-style: disc outside;
+}
+
+.document-markdown-preview ol {
+    list-style: decimal outside;
+}
+
+.document-markdown-preview li + li {
+    margin-top: 0.35rem;
+}
+
+.document-markdown-task-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-2);
+    list-style: none;
+    padding-left: 0;
+}
+
+.document-markdown-task-label {
+    align-items: flex-start;
+    cursor: pointer;
+    display: flex;
+    gap: var(--spacing-3);
+}
+
+.document-markdown-task-checkbox {
+    accent-color: var(--color-primary-container);
+    margin-top: 0.35rem;
+}
+
+.document-markdown-task-item.is-checked .document-markdown-task-text {
+    color: rgb(var(--rgb-on-surface-variant) / 0.64);
+    text-decoration: line-through;
+}
+
+.document-markdown-empty,
+.documents-empty-state {
+    color: rgb(var(--rgb-on-surface-variant) / 0.55);
+}
+
+.documents-empty-state {
+    align-items: center;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    justify-content: center;
+    padding: var(--spacing-8);
+    text-align: center;
+}
+
+.documents-empty-state .material-symbols-outlined {
+    color: rgb(var(--rgb-on-surface-variant) / 0.28);
+    font-size: 3.5rem;
+    margin-bottom: var(--spacing-3);
+}
+
+.documents-error {
+    background: rgb(var(--rgb-error) / 0.08);
+    border-bottom: 1px solid rgb(var(--rgb-error) / 0.28);
+    color: var(--color-error);
+    font-size: 0.8125rem;
+    padding: var(--spacing-3) var(--spacing-4);
+}
+
+@media (max-width: 980px) {
+    .documents-view {
+        min-height: 0;
+    }
+
+    .documents-view,
+    .documents-workspace--split {
+        grid-template-columns: 1fr;
+    }
+
+    .documents-view {
+        flex-direction: column;
+    }
+
+    .documents-view__sidebar {
+        border-bottom: 1px solid var(--border-medium);
+        border-right: 0;
+        flex: 0 0 auto;
+        max-height: 18rem;
+        min-height: 18rem;
+        width: 100%;
+    }
+
+    .documents-pane + .documents-pane {
+        border-left: 0;
+        border-top: 1px solid var(--border-medium);
+    }
+
+    .documents-editor-input,
+    .document-markdown-preview {
+        min-height: 0;
+    }
+}
+
 .structure-sidebar__section + .structure-sidebar__section {
     margin-top: 1.5rem;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "sqlite-hub",
-    "version": "0.16.0",
+    "version": "0.17.0",
     "description": "SQLite-only local management app backend and SPA shell",
     "main": "server/server.js",
     "bin": {
@@ -26,6 +26,7 @@
         "express": "^5.2.1",
         "express-rate-limit": "^8.5.2",
         "helmet": "^8.2.0",
+        "marked": "^18.0.5",
         "material-symbols": "^0.44.9"
     },
     "devDependencies": {

package/server/routes/documents.js

@@ -0,0 +1,163 @@
+const express = require("express");
+const path = require("node:path");
+const { DatabaseRequiredError, route, successResponse } = require("../utils/errors");
+
+function getActiveDatabaseKey(connectionManager) {
+  return connectionManager.getActiveConnection()?.id ?? null;
+}
+
+function requireActiveDatabaseKey(connectionManager) {
+  const databaseKey = getActiveDatabaseKey(connectionManager);
+
+  if (!databaseKey) {
+    throw new DatabaseRequiredError();
+  }
+
+  return databaseKey;
+}
+
+function resolveActiveDatabaseDocumentName(connection) {
+  const label = String(connection?.label ?? "").trim();
+
+  if (label) {
+    return label;
+  }
+
+  const basename = path.basename(String(connection?.path ?? "").trim());
+  return basename || "Database";
+}
+
+function buildInitialDocumentPayload(connection) {
+  const databaseName = resolveActiveDatabaseDocumentName(connection);
+
+  return {
+    title: databaseName,
+    filename: databaseName,
+    content: `# ${databaseName}\n`,
+  };
+}
+
+function pickDocumentPatch(body = {}) {
+  const patch = {};
+
+  for (const field of ["title", "filename", "content"]) {
+    if (Object.prototype.hasOwnProperty.call(body, field)) {
+      patch[field] = body[field];
+    }
+  }
+
+  return patch;
+}
+
+function ensureDatabaseDocuments({ appStateStore, connectionManager, databaseKey }) {
+  let items = appStateStore.listDatabaseDocuments(databaseKey);
+
+  if (items.length > 0) {
+    return items;
+  }
+
+  appStateStore.createDatabaseDocument(
+    databaseKey,
+    buildInitialDocumentPayload(connectionManager.getActiveConnection())
+  );
+
+  return appStateStore.listDatabaseDocuments(databaseKey);
+}
+
+function createDocumentsRouter({ appStateStore, connectionManager }) {
+  const router = express.Router();
+
+  router.get(
+    "/",
+    route((req, res) => {
+      const databaseKey = requireActiveDatabaseKey(connectionManager);
+
+      res.json(
+        successResponse({
+          data: {
+            items: ensureDatabaseDocuments({ appStateStore, connectionManager, databaseKey }),
+          },
+          metadata: { databaseKey },
+        })
+      );
+    })
+  );
+
+  router.post(
+    "/",
+    route((req, res) => {
+      const databaseKey = requireActiveDatabaseKey(connectionManager);
+      const document = appStateStore.createDatabaseDocument(databaseKey, {
+        title: req.body?.title,
+        filename: req.body?.filename,
+        content: req.body?.content,
+      });
+
+      res.status(201).json(
+        successResponse({
+          message: "Document created.",
+          data: document,
+          metadata: { databaseKey },
+        })
+      );
+    })
+  );
+
+  router.get(
+    "/:documentId",
+    route((req, res) => {
+      const databaseKey = requireActiveDatabaseKey(connectionManager);
+
+      res.json(
+        successResponse({
+          data: appStateStore.getDatabaseDocument(databaseKey, req.params.documentId),
+          metadata: { databaseKey },
+        })
+      );
+    })
+  );
+
+  router.patch(
+    "/:documentId",
+    route((req, res) => {
+      const databaseKey = requireActiveDatabaseKey(connectionManager);
+
+      res.json(
+        successResponse({
+          message: "Document saved.",
+          data: appStateStore.updateDatabaseDocument(
+            databaseKey,
+            req.params.documentId,
+            pickDocumentPatch(req.body)
+          ),
+          metadata: { databaseKey },
+        })
+      );
+    })
+  );
+
+  router.delete(
+    "/:documentId",
+    route((req, res) => {
+      const databaseKey = requireActiveDatabaseKey(connectionManager);
+
+      res.json(
+        successResponse({
+          message: "Document deleted.",
+          data: appStateStore.deleteDatabaseDocument(databaseKey, req.params.documentId),
+          metadata: { databaseKey },
+        })
+      );
+    })
+  );
+
+  return router;
+}
+
+module.exports = {
+  buildInitialDocumentPayload,
+  createDocumentsRouter,
+  ensureDatabaseDocuments,
+  pickDocumentPatch,
+  resolveActiveDatabaseDocumentName,
+};

package/server/routes/settings.js

@@ -1,4 +1,5 @@
 const express = require("express");
+const Database = require("better-sqlite3");
 const fs = require("node:fs");
 const path = require("node:path");
 const { route, successResponse } = require("../utils/errors");
@@ -9,6 +10,23 @@ function readAppVersion() {
   return packageJson.version ?? "0.0.0";
 }
 
+function readSqliteVersion() {
+  const db = new Database(":memory:");
+
+  try {
+    return db.prepare("SELECT sqlite_version() AS version").get().version ?? "unknown";
+  } finally {
+    db.close();
+  }
+}
+
+function readSettingsMetadata() {
+  return {
+    appVersion: readAppVersion(),
+    sqliteVersion: readSqliteVersion(),
+  };
+}
+
 function createSettingsRouter({ appStateStore }) {
   const router = express.Router();
 
@@ -18,9 +36,7 @@ function createSettingsRouter({ appStateStore }) {
       res.json(
         successResponse({
           data: appStateStore.getSettings(),
-          metadata: {
-            appVersion: readAppVersion(),
-          },
+          metadata: readSettingsMetadata(),
         })
       );
     })
@@ -34,9 +50,7 @@ function createSettingsRouter({ appStateStore }) {
         successResponse({
           message: "Settings updated.",
           data: settings,
-          metadata: {
-            appVersion: readAppVersion(),
-          },
+          metadata: readSettingsMetadata(),
         })
       );
     })
@@ -47,4 +61,6 @@ function createSettingsRouter({ appStateStore }) {
 
 module.exports = {
   createSettingsRouter,
+  readSettingsMetadata,
+  readSqliteVersion,
 };

package/server/server.js

@@ -25,6 +25,7 @@ const { createTableDesignerRouter } = require("./routes/tableDesigner");
 const { createMediaTaggingRouter } = require("./routes/mediaTagging");
 const { createSettingsRouter } = require("./routes/settings");
 const { createExportRouter } = require("./routes/export");
+const { createDocumentsRouter } = require("./routes/documents");
 
 const PACKAGE_ROOT = path.resolve(__dirname, "..");
 const FRONTEND_ROOT = path.join(PACKAGE_ROOT, "frontend");
@@ -107,6 +108,7 @@ app.use("/api/table-designer", createTableDesignerRouter({ tableDesignerService
 app.use("/api/media-tagging", createMediaTaggingRouter({ mediaTaggingService }));
 app.use("/api/settings", createSettingsRouter({ appStateStore }));
 app.use("/api/export", createExportRouter({ exportService }));
+app.use("/api/documents", createDocumentsRouter({ appStateStore, connectionManager }));
 
 // auth: public favicon response; it exposes no application data.
 app.get("/favicon.ico", (req, res) => {
@@ -143,6 +145,10 @@ app.use(
   "/vendor/material-symbols",
   express.static(path.resolve(__dirname, "..", "node_modules", "material-symbols"))
 );
+app.use(
+  "/vendor/marked",
+  express.static(path.resolve(__dirname, "..", "node_modules", "marked"))
+);
 app.use(express.static(FRONTEND_ROOT));
 app.use("/db_logos", express.static(path.join(APP_STATE_DIRECTORY, "db_logos")));
 app.use(errorMiddleware);