sqlite-hub 0.16.0 → 0.17.2

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.2",
     "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/middleware/localRequestSecurity.js

@@ -0,0 +1,84 @@
+const { AppError } = require("../utils/errors");
+
+const LOCAL_HOSTNAMES = new Set(["127.0.0.1", "localhost", "::1"]);
+const LOOPBACK_HOST = "127.0.0.1";
+const MUTATING_METHODS = new Set(["POST", "PUT", "PATCH", "DELETE"]);
+
+function parseHost(value) {
+  try {
+    return new URL(`http://${String(value ?? "").trim()}`);
+  } catch (error) {
+    return null;
+  }
+}
+
+function isLocalHostname(hostname) {
+  return LOCAL_HOSTNAMES.has(String(hostname ?? "").replace(/^\[|\]$/g, "").toLowerCase());
+}
+
+function createLocalRequestError(message) {
+  return new AppError(message, 403, {
+    code: "LOCAL_REQUEST_REQUIRED",
+  });
+}
+
+function listenOnLoopback(app, port) {
+  return app.listen(port, LOOPBACK_HOST);
+}
+
+function localRequestSecurity(req, res, next) {
+  const requestHost = parseHost(req.get("host"));
+
+  if (!requestHost || !isLocalHostname(requestHost.hostname)) {
+    next(createLocalRequestError("SQLite Hub only accepts requests addressed to localhost."));
+    return;
+  }
+
+  if (!MUTATING_METHODS.has(req.method)) {
+    next();
+    return;
+  }
+
+  if (String(req.get("sec-fetch-site") ?? "").toLowerCase() === "cross-site") {
+    next(createLocalRequestError("Cross-site API requests are not allowed."));
+    return;
+  }
+
+  const origin = String(req.get("origin") ?? "").trim();
+
+  // CLI and other non-browser clients do not send Origin. Browser requests must be same-origin.
+  if (!origin) {
+    next();
+    return;
+  }
+
+  let parsedOrigin;
+
+  try {
+    parsedOrigin = new URL(origin);
+  } catch (error) {
+    next(createLocalRequestError("API request origin is invalid."));
+    return;
+  }
+
+  if (
+    !isLocalHostname(parsedOrigin.hostname) ||
+    parsedOrigin.host.toLowerCase() !== requestHost.host.toLowerCase() ||
+    parsedOrigin.protocol !== `${req.protocol}:`
+  ) {
+    next(createLocalRequestError("Cross-origin API requests are not allowed."));
+    return;
+  }
+
+  next();
+}
+
+module.exports = {
+  LOCAL_HOSTNAMES,
+  LOOPBACK_HOST,
+  MUTATING_METHODS,
+  isLocalHostname,
+  listenOnLoopback,
+  localRequestSecurity,
+  parseHost,
+};

package/server/routes/connections.js

@@ -1,7 +1,7 @@
 const express = require("express");
 const { route, successResponse } = require("../utils/errors");
 
-function createConnectionsRouter({ connectionManager, importService, backupService }) {
+function createConnectionsRouter({ connectionManager, importService, backupService, nativeFileDialogService }) {
   const router = express.Router();
 
   router.post(
@@ -42,6 +42,23 @@ function createConnectionsRouter({ connectionManager, importService, backupServi
     })
   );
 
+  router.post(
+    "/choose-create-path",
+    route(async (req, res) => {
+      const selectedPath = await nativeFileDialogService.chooseCreateDatabasePath();
+
+      res.json(
+        successResponse({
+          message: selectedPath ? "Database path selected." : "File selection cancelled.",
+          data: {
+            cancelled: !selectedPath,
+            path: selectedPath,
+          },
+        })
+      );
+    })
+  );
+
   router.post(
     "/import-sql",
     route((req, res) => {

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,
+};