style(sql_console): improve style for frozen cell

apps/client/src/components/app_context.ts

@@ -1,6 +1,6 @@
 import type { CKTextEditor } from "@triliumnext/ckeditor5";
 import type CodeMirror from "@triliumnext/codemirror";
-import { SqlExecuteResults } from "@triliumnext/commons";
+import { SqlExecuteResponse } from "@triliumnext/commons";
 import type { NativeImage, TouchBar } from "electron";
 import { ColumnComponent } from "tabulator-tables";
 
@@ -410,7 +410,7 @@ type EventMappings = {
     addNewLabel: CommandData;
     addNewRelation: CommandData;
     sqlQueryResults: CommandData & {
-        results: SqlExecuteResults;
+        response: SqlExecuteResponse;
     };
     readOnlyTemporarilyDisabled: {
         noteContext: NoteContext;

apps/client/src/components/entrypoints.ts

@@ -1,16 +1,17 @@
-import utils from "../services/utils.js";
+import { CreateChildrenResponse, SqlExecuteResponse } from "@triliumnext/commons";
+
+import bundleService from "../services/bundle.js";
 import dateNoteService from "../services/date_notes.js";
+import froca from "../services/froca.js";
+import { t } from "../services/i18n.js";
+import linkService from "../services/link.js";
 import protectedSessionHolder from "../services/protected_session_holder.js";
 import server from "../services/server.js";
+import toastService from "../services/toast.js";
+import utils from "../services/utils.js";
+import ws from "../services/ws.js";
 import appContext, { type NoteCommandData } from "./app_context.js";
 import Component from "./component.js";
-import toastService from "../services/toast.js";
-import ws from "../services/ws.js";
-import bundleService from "../services/bundle.js";
-import froca from "../services/froca.js";
-import linkService from "../services/link.js";
-import { t } from "../services/i18n.js";
-import { CreateChildrenResponse, SqlExecuteResponse } from "@triliumnext/commons";
 
 export default class Entrypoints extends Component {
     constructor() {
@@ -187,13 +188,8 @@ export default class Entrypoints extends Component {
         } else if (note.mime.endsWith("env=backend")) {
             await server.post(`script/run/${note.noteId}`);
         } else if (note.mime === "text/x-sqlite;schema=trilium") {
-            const resp = await server.post<SqlExecuteResponse>(`sql/execute/${note.noteId}`);
-
-            if (!resp.success) {
-                toastService.showError(t("entrypoints.sql-error", { message: resp.error }));
-            }
-
-            await appContext.triggerEvent("sqlQueryResults", { ntxId: ntxId, results: resp.results });
+            const response = await server.post<SqlExecuteResponse>(`sql/execute/${note.noteId}`);
+            await appContext.triggerEvent("sqlQueryResults", { ntxId, response });
         }
 
         toastService.showMessage(t("entrypoints.note-executed"));

apps/client/src/layouts/desktop_layout.tsx

@@ -46,8 +46,6 @@ import ScrollPadding from "../widgets/scroll_padding.js";
 import SearchResult from "../widgets/search_result.jsx";
 import SharedInfo from "../widgets/shared_info.jsx";
 import RightPanelContainer from "../widgets/sidebar/RightPanelContainer.jsx";
-import SqlResults from "../widgets/sql_result.js";
-import SqlTableSchemas from "../widgets/sql_table_schemas.js";
 import TabRowWidget from "../widgets/tab_row.js";
 import TabHistoryNavigationButtons from "../widgets/TabHistoryNavigationButtons.jsx";
 import TitleBarButtons from "../widgets/title_bar_buttons.jsx";
@@ -163,11 +161,9 @@ export default class DesktopLayout {
                                                                     .child(<SharedInfo />)
                                                                 )
                                                                 .optChild(!isNewLayout, <PromotedAttributes />)
-                                                                .child(<SqlTableSchemas />)
                                                                 .child(<NoteDetail />)
                                                                 .child(<NoteList media="screen" />)
                                                                 .child(<SearchResult />)
-                                                                .child(<SqlResults />)
                                                                 .child(<ScrollPadding />)
                                                         )
                                                         .child(<ApiLog />)

apps/client/src/services/shortcuts.ts

@@ -110,8 +110,9 @@ function bindElShortcut($el: JQuery<ElementType | Element>, keyboardShortcut: st
                 }
             };
 
-            // Add the event listener
-            element.addEventListener('keydown', listener);
+            // Add the event listener in capture phase to intercept events before they reach
+            // child elements like CodeMirror
+            element.addEventListener('keydown', listener, true);
 
             // Store the binding for later cleanup
             const binding: ShortcutBinding = {
@@ -138,15 +139,16 @@ export function removeIndividualBinding(binding: ShortcutBinding) {
     if (activeBindingsInNamespace) {
         activeBindings.set(key, activeBindingsInNamespace.filter(aBinding => aBinding.handler === binding.handler));
     }
-    binding.element.removeEventListener("keydown", binding.listener);
+    // Remove listener with capture phase to match how it was added
+    binding.element.removeEventListener("keydown", binding.listener, true);
 }
 
 function removeNamespaceBindings(namespace: string) {
     const bindings = activeBindings.get(namespace);
     if (bindings) {
-        // Remove all event listeners for this namespace
         bindings.forEach(binding => {
-            binding.element.removeEventListener('keydown', binding.listener);
+            // Remove listener with capture phase to match how it was added
+            binding.element.removeEventListener('keydown', binding.listener, true);
         });
         activeBindings.delete(namespace);
     }

apps/client/src/stylesheets/table.css

@@ -14,13 +14,13 @@
     --row-moving-background-color: var(--accented-background-color);
     --row-text-color: var(--main-text-color);
     --row-delimiter-color: var(--more-accented-background-color);
-    
+
     --cell-horiz-padding-size: 8px;
     --cell-vert-padding-size: 8px;
-    
+
     --cell-editable-hover-outline-color: var(--main-border-color);
     --cell-read-only-text-color: var(--muted-text-color);
-    
+
     --cell-editing-border-color: var(--main-border-color);
     --cell-editing-border-width: 2px;
     --cell-editing-background-color: var(--ck-color-selector-focused-cell-background);
@@ -40,10 +40,42 @@
     border-bottom: var(--col-header-bottom-border);
     background: var(--col-header-background-color);
     color: var(--col-header-text-color);
-}
+    font-weight: normal;
 
-.tabulator .tabulator-col-content {
-    padding: 8px 4px !important;
+    .tabulator-col.tabulator-range-highlight {
+        background: inherit;
+        color: inherit;
+        font-weight: bold;
+    }
+
+    .tabulator-col-content {
+        padding: 0 !important;
+
+        .tabulator-col-title-holder {
+            padding: 8px 4px;
+        }
+
+        &:has(.tabulator-header-filter) {
+            .tabulator-col-title-holder {
+                padding: 4px;
+                padding-bottom: 0;
+            }
+        }
+
+        .tabulator-header-filter {
+            background: var(--main-background-color);
+            padding: 2px 1px;
+
+            input {
+                background: var(--main-background-color);
+                color: var(--main-text-color);
+                border: 1px solid var(--button-border-color);
+                border-radius: 3px;
+                outline: none;
+                padding: 2px;
+            }
+        }
+    }
 }
 
 @media (hover: hover) and (pointer: fine) {
@@ -80,7 +112,6 @@
 
 .tabulator-tableholder {
     padding-top: 10px;
-    height: unset !important; /* Don't extend on the full height */
 }
 
 /* Rows */
@@ -99,6 +130,14 @@
     border-top: none;
     border-bottom: 1px solid var(--row-delimiter-color);
     color: var(--row-text-color);
+
+    &:last-of-type {
+        border-bottom: none;
+    }
+
+    &.tabulator-range-highlight > .tabulator-cell.tabulator-frozen {
+        font-weight: bold;
+    }
 }
 
 .tabulator-row.tabulator-row-odd {
@@ -120,11 +159,14 @@
     margin-inline-end: var(--cell-editing-border-width);
 }
 
-.tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left,
 .tabulator-row .tabulator-cell {
     border-inline-end-color: transparent;
 }
 
+.tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left {
+    border-inline-end-color: var(--main-border-color);
+}
+
 .tabulator-row .tabulator-cell:not(.tabulator-editable) {
     color: var(--cell-read-only-text-color);
 }
@@ -174,10 +216,6 @@
     margin: 0;
 }
 
-.tabulator .tabulator-footer {
-    color: var(--main-text-color);
-}
-
 /* Context menus */
 
 .tabulator-popup-container {
@@ -192,8 +230,27 @@
 }
 
 /* Footer */
-
 :root .tabulator .tabulator-footer {
-    border-top: unset;
+    background: transparent;
+    color: var(--main-text-color);
+    border-top: 1px solid var(--main-border-color);
     padding: 10px 0;
-}
+
+    .tabulator-page {
+        background: var(--button-background-color);
+        color: var(--button-text-color);
+        border: 1px solid var(--button-border-color);
+        border-radius: var(--button-border-radius);
+
+        &:hover {
+            border-color: var(--hover-item-border-color);
+            color: var(--button-text-color);
+        }
+    }
+
+    select {
+        background: var(--button-background-color);
+        color: var(--input-text-color);
+        border: 1px solid var(--button-border-color);
+    }
+}

apps/client/src/translations/en/translation.json

@@ -1815,7 +1815,11 @@
     "configure_launchbar": "Configure Launchbar"
   },
   "sql_result": {
-    "no_rows": "No rows have been returned for this query"
+    "not_executed": "The query has not been executed yet.",
+    "no_rows": "No rows have been returned for this query",
+    "failed": "SQL query execution has failed",
+    "statement_result": "Statement result",
+    "execute_now": "Execute now"
   },
   "sql_table_schemas": {
     "tables": "Tables"

apps/client/src/widgets/NoteDetail.tsx

@@ -265,9 +265,13 @@ function useNoteInfo() {
     const [ note, setNote ] = useState<FNote | null | undefined>();
     const [ type, setType ] = useState<ExtendedNoteType>();
     const [ mime, setMime ] = useState<string>();
+    const refreshIdRef = useRef(0);
 
     function refresh() {
+        const refreshId = ++refreshIdRef.current;
+
         getExtendedWidgetType(actualNote, noteContext).then(type => {
+            if (refreshId !== refreshIdRef.current) return;
             setNote(actualNote);
             setType(type);
             setMime(actualNote?.mime);
@@ -318,6 +322,8 @@ export async function getExtendedWidgetType(note: FNote | null | undefined, note
         resultingType = "noteMap";
     } else if (type === "text" && (await noteContext?.isReadOnly())) {
         resultingType = "readOnlyText";
+    } else if (note.isTriliumSqlite()) {
+        resultingType = "sqlConsole";
     } else if ((type === "code" || type === "mermaid") && (await noteContext?.isReadOnly())) {
         resultingType = "readOnlyCode";
     } else if (type === "text") {
@@ -342,9 +348,8 @@ export function checkFullHeight(noteContext: NoteContext | undefined, type: Exte
 
     // https://github.com/zadam/trilium/issues/2522
     const isBackendNote = noteContext?.noteId === "_backendLog";
-    const isSqlNote = noteContext.note?.mime === "text/x-sqlite;schema=trilium";
     const isFullHeightNoteType = type && TYPE_MAPPINGS[type].isFullHeight;
-    return (!noteContext?.hasNoteList() && isFullHeightNoteType && !isSqlNote)
+    return (!noteContext?.hasNoteList() && isFullHeightNoteType)
         || noteContext?.viewScope?.viewMode === "attachments"
         || isBackendNote;
 }

apps/client/src/widgets/collections/table/index.css

@@ -4,6 +4,10 @@
     height: 100%;
     user-select: none;
     padding: 0 5px 0 10px;
+
+    .tabulator-tableholder {
+        height: unset !important;
+    }
 }
 
 .table-view-container {
@@ -68,4 +72,4 @@
     inset-inline-start: 0;
     font-size: 1.5em;
     transform: translateY(-50%);
-}
+}

apps/client/src/widgets/collections/table/tabulator.tsx

@@ -1,18 +1,20 @@
-import { useContext, useEffect, useLayoutEffect, useRef } from "preact/hooks";
-import { EventCallBackMethods, Module, Options, Tabulator as VanillaTabulator } from "tabulator-tables";
 import "tabulator-tables/dist/css/tabulator.css";
 import "../../../../src/stylesheets/table.css";
-import { ParentComponent, renderReactWidget } from "../../react/react_utils";
-import { JSX } from "preact/jsx-runtime";
+
 import { isValidElement, RefObject } from "preact";
+import { useContext, useEffect, useLayoutEffect, useRef } from "preact/hooks";
+import { JSX } from "preact/jsx-runtime";
+import { EventCallBackMethods, Module, Options, Tabulator as VanillaTabulator } from "tabulator-tables";
+
+import { ParentComponent, renderReactWidget } from "../../react/react_utils";
 
 interface TableProps<T> extends Omit<Options, "data" | "footerElement" | "index"> {
-    tabulatorRef: RefObject<VanillaTabulator>;
+    tabulatorRef?: RefObject<VanillaTabulator>;
     className?: string;
     data?: T[];
     modules?: (new (table: VanillaTabulator) => Module)[];
     events?: Partial<EventCallBackMethods>;
-    index: keyof T;
+    index?: keyof T;
     footerElement?: string | HTMLElement | JSX.Element;
     onReady?: () => void;
 }
@@ -43,7 +45,9 @@ export default function Tabulator<T>({ className, columns, data, modules, tabula
 
         tabulator.on("tableBuilt", () => {
             tabulatorRef.current = tabulator;
-            externalTabulatorRef.current = tabulator;
+            if (externalTabulatorRef) {
+                externalTabulatorRef.current = tabulator;
+            }
             onReady?.();
         });
 
@@ -62,12 +66,12 @@ export default function Tabulator<T>({ className, columns, data, modules, tabula
             for (const [ eventName, handler ] of Object.entries(events)) {
                 tabulator.off(eventName as keyof EventCallBackMethods, handler);
             }
-        }
+        };
     }, Object.values(events ?? {}));
 
     // Change in data.
-    useEffect(() => { tabulatorRef.current?.setData(data) }, [ data ]);
-    useEffect(() => { columns && tabulatorRef.current?.setColumns(columns)}, [ data]);
+    useEffect(() => { tabulatorRef.current?.setData(data); }, [ data ]);
+    useEffect(() => { columns && tabulatorRef.current?.setColumns(columns); }, [ data ]);
 
     return (
         <div ref={containerRef} className={className} />

apps/client/src/widgets/layout/InlineTitle.tsx

@@ -7,6 +7,7 @@ import { ComponentChild } from "preact";
 import { useLayoutEffect, useMemo, useRef, useState } from "preact/hooks";
 import { Trans } from "react-i18next";
 
+import FNote from "../../entities/fnote";
 import { ViewScope } from "../../services/link";
 import { formatDateTime } from "../../utils/formatters";
 import NoteIcon from "../note_icon";
@@ -22,12 +23,12 @@ const supportedNoteTypes = new Set<NoteType>([
 export default function InlineTitle() {
     const { note, parentComponent, viewScope } = useNoteContext();
     const type = useNoteProperty(note, "type");
-    const [ shown, setShown ] = useState(shouldShow(note?.noteId, type, viewScope));
+    const [ shown, setShown ] = useState(shouldShow(note, type, viewScope));
     const containerRef = useRef<HTMLDivElement>(null);
     const [ titleHidden, setTitleHidden ] = useState(false);
 
     useLayoutEffect(() => {
-        setShown(shouldShow(note?.noteId, type, viewScope));
+        setShown(shouldShow(note, type, viewScope));
     }, [ note, type, viewScope ]);
 
     useLayoutEffect(() => {
@@ -69,9 +70,10 @@ export default function InlineTitle() {
     );
 }
 
-function shouldShow(noteId: string | undefined, type: NoteType | undefined, viewScope: ViewScope | undefined) {
+function shouldShow(note: FNote | null | undefined, type: NoteType | undefined, viewScope: ViewScope | undefined) {
     if (viewScope?.viewMode !== "default") return false;
-    if (noteId?.startsWith("_options")) return true;
+    if (note?.noteId?.startsWith("_options")) return true;
+    if (note?.isTriliumSqlite()) return false;
     return type && supportedNoteTypes.has(type);
 }
 

apps/client/src/widgets/layout/NoteTypeSwitcher.tsx

@@ -39,7 +39,7 @@ export default function NoteTypeSwitcher() {
     const currentNoteTypeData = useMemo(() => NOTE_TYPES.find(t => t.type === currentNoteType), [ currentNoteType ]);
     const { builtinTemplates, collectionTemplates } = useBuiltinTemplates();
 
-    return (currentNoteType && supportedNoteTypes.has(currentNoteType) &&
+    return (currentNoteType && supportedNoteTypes.has(currentNoteType) && !note?.isTriliumSqlite() &&
         <div
             className="note-type-switcher"
             onWheel={onWheelHorizontalScroll}

apps/client/src/widgets/note_types.tsx

@@ -12,7 +12,7 @@ import { TypeWidgetProps } from "./type_widgets/type_widget";
  * A `NoteType` altered by the note detail widget, taking into consideration whether the note is editable or not and adding special note types such as an empty one,
  * for protected session or attachment information.
  */
-export type ExtendedNoteType = Exclude<NoteType, "launcher" | "text" | "code"> | "empty" | "readOnlyCode" | "readOnlyText" | "editableText" | "editableCode" | "attachmentDetail" | "attachmentList" |  "protectedSession" | "aiChat";
+export type ExtendedNoteType = Exclude<NoteType, "launcher" | "text" | "code"> | "empty" | "readOnlyCode" | "readOnlyText" | "editableText" | "editableCode" | "attachmentDetail" | "attachmentList" |  "protectedSession" | "aiChat" | "sqlConsole";
 
 export type TypeWidget = ((props: TypeWidgetProps) => VNode | JSX.Element | undefined);
 type NoteTypeView = () => (Promise<{ default: TypeWidget } | TypeWidget> | TypeWidget);
@@ -140,5 +140,10 @@ export const TYPE_MAPPINGS: Record<ExtendedNoteType, NoteTypeMapping> = {
         view: () => import("./type_widgets/AiChat"),
         className: "ai-chat-widget-container",
         isFullHeight: true
+    },
+    sqlConsole: {
+        view: () => import("./type_widgets/SqlConsole"),
+        className: "sql-console-widget-container",
+        isFullHeight: true
     }
 };

apps/client/src/widgets/react/NoItems.css

@@ -0,0 +1,18 @@
+.no-items {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-grow: 1;
+    flex-direction: column;
+    padding: 0.75em;
+    color: var(--muted-text-color);
+    height: 100%;
+
+    .tn-icon {
+        font-size: 3em;
+    }
+
+    button {
+        margin-top: 1em;
+    }
+}

apps/client/src/widgets/react/NoItems.tsx

@@ -0,0 +1,21 @@
+import "./NoItems.css";
+
+import { ComponentChildren } from "preact";
+
+import Icon from "./Icon";
+
+interface NoItemsProps {
+    icon: string;
+    text: string;
+    children?: ComponentChildren;
+}
+
+export default function NoItems({ icon, text, children }: NoItemsProps) {
+    return (
+        <div className="no-items">
+            <Icon icon={icon} />
+            {text}
+            {children}
+        </div>
+    );
+}

apps/client/src/widgets/scroll_padding.tsx

@@ -1,11 +1,14 @@
 import { useEffect, useRef, useState } from "preact/hooks";
+
 import { useNoteContext } from "./react/hooks";
 
 export default function ScrollPadding() {
     const { note, parentComponent, ntxId, viewScope } = useNoteContext();
     const ref = useRef<HTMLDivElement>(null);
     const [height, setHeight] = useState<number>(10);
-    const isEnabled = ["text", "code"].includes(note?.type ?? "") && viewScope?.viewMode === "default";
+    const isEnabled = ["text", "code"].includes(note?.type ?? "")
+        && viewScope?.viewMode === "default"
+        && !note?.isTriliumSqlite();
 
     const refreshHeight = () => {
         if (!ref.current) return;
@@ -37,6 +40,6 @@ export default function ScrollPadding() {
             style={{ height }}
             onClick={() => parentComponent.triggerCommand("scrollToEnd", { ntxId })}
         />
-        : <div></div>
-    )
+        : <div />
+    );
 }

apps/client/src/widgets/sidebar/RightPanelContainer.css

@@ -40,22 +40,4 @@ body.experimental-feature-new-layout #right-pane {
     .gutter-vertical + .card .card-header {
         padding-top: 0;
     }
-
-    .no-items {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-grow: 1;
-        flex-direction: column;
-        padding: 0.75em;
-        color: var(--muted-text-color);
-
-        .tn-icon {
-            font-size: 3em;
-        }
-
-        button {
-            margin-top: 1em;
-        }
-    }
 }

apps/client/src/widgets/sidebar/RightPanelContainer.tsx

@@ -3,7 +3,7 @@ import "./RightPanelContainer.css";
 
 import Split from "@triliumnext/split.js";
 import { VNode } from "preact";
-import { useState, useEffect, useRef, useCallback } from "preact/hooks";
+import { useCallback,useEffect, useRef, useState } from "preact/hooks";
 
 import appContext from "../../components/app_context";
 import { WidgetsByParent } from "../../services/bundle";
@@ -13,6 +13,7 @@ import { DEFAULT_GUTTER_SIZE } from "../../services/resizer";
 import Button from "../react/Button";
 import { useActiveNoteContext, useLegacyWidget, useNoteProperty, useTriliumEvent, useTriliumOptionJson } from "../react/hooks";
 import Icon from "../react/Icon";
+import NoItems from "../react/NoItems";
 import LegacyRightPanelWidget from "../right_panel_widget";
 import HighlightsList from "./HighlightsList";
 import PdfAttachments from "./pdf/PdfAttachments";
@@ -47,14 +48,15 @@ export default function RightPanelContainer({ widgetsByParent }: { widgetsByPare
                 items.length > 0 ? (
                     items
                 ) : (
-                    <div className="no-items">
-                        <Icon icon="bx bx-sidebar" />
-                        {t("right_pane.empty_message")}
+                    <NoItems
+                        icon="bx bx-sidebar"
+                        text={t("right_pane.empty_message")}
+                    >
                         <Button
                             text={t("right_pane.empty_button")}
                             triggerCommand="toggleRightPane"
                         />
-                    </div>
+                    </NoItems>
                 )
             )}
         </div>

apps/client/src/widgets/sql_result.css

@@ -1,7 +0,0 @@
-.sql-result-widget {
-    padding: 15px;
-}
-
-.sql-console-result-container td {
-    white-space: preserve;
-}

apps/client/src/widgets/sql_result.tsx

@@ -1,63 +0,0 @@
-import { SqlExecuteResults } from "@triliumnext/commons";
-import { useNoteContext, useTriliumEvent } from "./react/hooks";
-import "./sql_result.css";
-import { useState } from "preact/hooks";
-import Alert from "./react/Alert";
-import { t } from "../services/i18n";
-
-export default function SqlResults() {
-    const { note, ntxId } = useNoteContext();
-    const [ results, setResults ] = useState<SqlExecuteResults>();
-
-    useTriliumEvent("sqlQueryResults", ({ ntxId: eventNtxId, results }) => {
-        if (eventNtxId !== ntxId) return;
-        setResults(results);
-    })
-
-    const isEnabled = note?.mime === "text/x-sqlite;schema=trilium";
-    return (
-        <div className={`sql-result-widget ${!isEnabled ? "hidden-ext" : ""}`}>
-            {isEnabled && (
-                results?.length === 1 && Array.isArray(results[0]) && results[0].length === 0 ? (
-                    <Alert type="info">
-                        {t("sql_result.no_rows")}
-                    </Alert>
-                ) : (
-                    <div className="sql-console-result-container selectable-text">
-                        {results?.map(rows => {
-                            // inserts, updates
-                            if (typeof rows === "object" && !Array.isArray(rows)) {
-                                return <pre>{JSON.stringify(rows, null, "\t")}</pre>
-                            }
-
-                            // selects
-                            return <SqlResultTable rows={rows} />
-                        })}
-                    </div>
-                )
-            )}
-        </div>
-    )
-}
-
-function SqlResultTable({ rows }: { rows: object[] }) {
-    if (!rows.length) return;
-
-    return (
-        <table className="table table-striped">
-            <thead>
-                <tr>
-                    {Object.keys(rows[0]).map(key => <th>{key}</th>)}
-                </tr>
-            </thead>
-
-            <tbody>
-                {rows.map(row => (
-                    <tr>
-                        {Object.values(row).map(cell => <td>{cell}</td>)}
-                    </tr>
-                ))}
-            </tbody>
-        </table>
-    )
-}

apps/client/src/widgets/sql_table_schemas.css

@@ -1,43 +0,0 @@
-.sql-table-schemas-widget {
-    padding: 12px;
-    padding-inline-end: 10%;
-    contain: none !important;
-}
-
-.sql-table-schemas > .dropdown {
-    display: inline-block !important;
-}
-
-.sql-table-schemas button.btn {
-    padding: 0.25rem 0.4rem;
-    font-size: 0.875rem;
-    line-height: 0.5;
-    border: 1px solid var(--button-border-color);
-    border-radius: var(--button-border-radius);
-    background: var(--button-background-color);
-    color: var(--button-text-color);
-    cursor: pointer;
-}
-
-.sql-console-result-container {
-    width: 100%;
-    font-size: smaller;
-    margin-top: 10px;
-    flex-grow: 1;
-    overflow: auto;
-    min-height: 0;
-}
-
-.table-schema td {
-    padding: 5px;
-}
-
-.dropdown .table-schema {
-    font-family: var(--monospace-font-family);
-    font-size: .85em;
-}
-
-/* Data type */
-.dropdown .table-schema td:nth-child(2) {
-    color: var(--muted-text-color);
-}

apps/client/src/widgets/sql_table_schemas.tsx

@@ -1,46 +0,0 @@
-import { useEffect, useState } from "preact/hooks";
-import { t } from "../services/i18n";
-import { useNoteContext } from "./react/hooks";
-import "./sql_table_schemas.css";
-import { SchemaResponse } from "@triliumnext/commons";
-import server from "../services/server";
-import Dropdown from "./react/Dropdown";
-
-export default function SqlTableSchemas() {
-    const { note } = useNoteContext();
-    const [ schemas, setSchemas ] = useState<SchemaResponse[]>();
-
-    useEffect(() => {
-        server.get<SchemaResponse[]>("sql/schema").then(setSchemas);
-    }, []);
-
-    const isEnabled = note?.mime === "text/x-sqlite;schema=trilium" && schemas;
-    return (
-        <div className={`sql-table-schemas-widget ${!isEnabled ? "hidden-ext" : ""}`}>
-            {isEnabled && (
-                <>
-                    {t("sql_table_schemas.tables")}{": "}
-
-                    <span class="sql-table-schemas">
-                        {schemas.map(({ name, columns }) => (
-                            <>
-                                <Dropdown text={name} noSelectButtonStyle hideToggleArrow
-                                >
-                                    <table className="table-schema">
-                                        {columns.map(column => (
-                                            <tr>
-                                                <td>{column.name}</td>
-                                                <td>{column.type}</td>
-                                            </tr>
-                                        ))}
-                                    </table>
-                                </Dropdown>
-                                {" "}
-                            </>
-                        ))}
-                    </span>
-                </>
-            )}
-        </div>
-    )
-}

apps/client/src/widgets/type_widgets/SqlConsole.css

@@ -0,0 +1,81 @@
+.sql-console-widget-container {
+    .note-detail-split.split-vertical {
+        flex-direction: column-reverse;
+    }
+
+    .note-detail-split-preview {
+        overflow: auto;
+    }
+
+    .gutter {
+        background-color: var(--accented-background-color) !important;
+    }
+
+    .sql-result-widget  {
+        height: 100%;
+
+        > .sql-console-result-container {
+            width: 100%;
+            height: 100%;
+            font-size: smaller;
+            flex-grow: 1;
+            overflow: auto;
+            min-height: 0;
+
+            > .tabulator {
+                --cell-vert-padding-size: 4px;
+
+                > .tabulator-tableholder {
+                    padding: 0;
+                }
+
+                > .tabulator-footer,
+                > .tabulator-footer .tabulator-footer-contents {
+                    padding: 2px 4px;
+                }
+            }
+        }
+    }
+
+    .sql-table-schemas-widget {
+        padding: 12px;
+        padding-inline-end: 10%;
+        contain: none !important;
+
+        .sql-table-schemas {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 0.25em;
+        }
+
+        > .dropdown {
+            display: inline-block !important;
+        }
+
+        button.btn {
+            padding: 0.25rem 0.4rem;
+            font-size: 0.875rem;
+            line-height: 0.5;
+            border: 1px solid var(--button-border-color);
+            border-radius: var(--button-border-radius);
+            background: var(--button-background-color);
+            color: var(--button-text-color);
+            cursor: pointer;
+        }
+
+        .table-schema td {
+            padding: 5px;
+        }
+
+        .dropdown .table-schema {
+            font-family: var(--monospace-font-family);
+            font-size: .85em;
+        }
+
+        /* Data type */
+        .dropdown .table-schema td:nth-child(2) {
+            color: var(--muted-text-color);
+        }
+    }
+}
+

apps/client/src/widgets/type_widgets/SqlConsole.tsx

@@ -0,0 +1,182 @@
+import "./SqlConsole.css";
+
+import { SchemaResponse, SqlExecuteResponse } from "@triliumnext/commons";
+import { useEffect, useState } from "preact/hooks";
+import { Fragment } from "preact/jsx-runtime";
+import { ClipboardModule, EditModule, ExportModule, FilterModule, FormatModule, FrozenColumnsModule, KeybindingsModule, PageModule, ResizeColumnsModule, SelectRangeModule, SelectRowModule, SortModule } from "tabulator-tables";
+
+import { t } from "../../services/i18n";
+import server from "../../services/server";
+import Tabulator from "../collections/table/tabulator";
+import Button from "../react/Button";
+import Dropdown from "../react/Dropdown";
+import { useTriliumEvent } from "../react/hooks";
+import NoItems from "../react/NoItems";
+import SplitEditor from "./helpers/SplitEditor";
+import { TypeWidgetProps } from "./type_widget";
+
+export default function SqlConsole(props: TypeWidgetProps) {
+    return (
+        <>
+            <SplitEditor
+                noteType="code"
+                {...props}
+                editorBefore={<SqlTableSchemas {...props} />}
+                previewContent={<SqlResults key={props.note.noteId} {...props} />}
+                splitOptions={{
+                    sizes: [ 70, 30 ]
+                }}
+            />
+        </>
+    );
+}
+
+function SqlResults({ ntxId }: TypeWidgetProps) {
+    const [ response, setResponse ] = useState<SqlExecuteResponse>();
+
+    useTriliumEvent("sqlQueryResults", ({ ntxId: eventNtxId, response }) => {
+        if (eventNtxId !== ntxId) return;
+        setResponse(response);
+    });
+
+    // Not yet executed.
+    if (response === undefined) {
+        return (
+            <NoItems
+                icon="bx bx-data"
+                text={t("sql_result.not_executed")}
+            >
+                <Button
+                    text={t("sql_result.execute_now")}
+                    triggerCommand="runActiveNote"
+                />
+            </NoItems>
+        );
+    }
+
+    // Executed but failed.
+    if (response && !response.success) {
+        return (
+            <NoItems
+                icon="bx bx-error"
+                text={t("sql_result.failed")}
+            >
+                <pre className="sql-error-message selectable-text">{response.error}</pre>
+            </NoItems>
+        );
+    }
+
+    // Zero results.
+    if (response?.results.length === 1 && Array.isArray(response.results[0]) && response.results[0].length === 0) {
+        return (
+            <NoItems
+                icon="bx bx-rectangle"
+                text={t("sql_result.no_rows")}
+            />
+        );
+    }
+
+    return (
+        <div className="sql-result-widget">
+            <div className="sql-console-result-container selectable-text">
+                {response?.results.map((rows, index) => {
+                    // inserts, updates
+                    if (typeof rows === "object" && !Array.isArray(rows)) {
+                        return (
+                            <NoItems
+                                key={index}
+                                icon="bx bx-play"
+                                text={t("sql_result.statement_result")}
+                            >
+                                <pre key={index}>{JSON.stringify(rows, null, "\t")}</pre>
+                            </NoItems>
+                        );
+                    }
+
+                    // selects
+                    return <SqlResultTable key={index} rows={rows} />;
+                })}
+            </div>
+        </div>
+    );
+}
+
+function SqlResultTable({ rows }: { rows: object[] }) {
+    if (!rows.length) return;
+
+    return (
+        <Tabulator
+            layout="fitDataFill"
+            modules={[ ResizeColumnsModule, SortModule, SelectRangeModule, ClipboardModule, KeybindingsModule, EditModule, ExportModule, SelectRowModule, FormatModule, FrozenColumnsModule, FilterModule, PageModule ]}
+            selectableRange
+            clipboard="copy"
+            clipboardCopyRowRange="range"
+            clipboardCopyConfig={{
+                rowHeaders: false,
+                columnHeaders: false
+            }}
+            pagination
+            paginationSize={15}
+            paginationSizeSelector
+            paginationCounter="rows"
+            height="100%"
+            columns={[
+                {
+                    title: "#",
+                    formatter: "rownum",
+                    width: 60,
+                    hozAlign: "right",
+                    frozen: true
+                },
+                ...Object.keys(rows[0]).map(key => ({
+                    title: key,
+                    field: key,
+                    width: 250,
+                    minWidth: 100,
+                    widthGrow: 1,
+                    resizable: true,
+                    headerFilter: true as const
+                }))
+            ]}
+            data={rows}
+        />
+    );
+}
+
+export function SqlTableSchemas({ note }: TypeWidgetProps) {
+    const [ schemas, setSchemas ] = useState<SchemaResponse[]>();
+
+    useEffect(() => {
+        server.get<SchemaResponse[]>("sql/schema").then(setSchemas);
+    }, []);
+
+    const isEnabled = note?.mime === "text/x-sqlite;schema=trilium" && schemas;
+    return (
+        <div className={`sql-table-schemas-widget ${!isEnabled ? "hidden-ext" : ""}`}>
+            {isEnabled && (
+                <>
+                    {t("sql_table_schemas.tables")}{": "}
+
+                    <span class="sql-table-schemas">
+                        {schemas.map(({ name, columns }) => (
+                            <Fragment key={name}>
+                                <Dropdown text={name} noSelectButtonStyle hideToggleArrow
+                                >
+                                    <table className="table-schema">
+                                        {columns.map(column => (
+                                            <tr key={column.name}>
+                                                <td>{column.name}</td>
+                                                <td>{column.type}</td>
+                                            </tr>
+                                        ))}
+                                    </table>
+                                </Dropdown>
+                                {" "}
+                            </Fragment>
+                        ))}
+                    </span>
+                </>
+            )}
+        </div>
+    );
+}

apps/client/src/widgets/type_widgets/helpers/SplitEditor.tsx

@@ -1,13 +1,15 @@
+import "./SplitEditor.css";
+
+import Split from "@triliumnext/split.js";
+import { ComponentChildren } from "preact";
 import { useEffect, useRef } from "preact/hooks";
+
+import { DEFAULT_GUTTER_SIZE } from "../../../services/resizer";
 import utils, { isMobile } from "../../../services/utils";
+import ActionButton, { ActionButtonProps } from "../../react/ActionButton";
 import Admonition from "../../react/Admonition";
 import { useNoteLabelBoolean, useTriliumOption } from "../../react/hooks";
-import "./SplitEditor.css";
-import Split from "@triliumnext/split.js";
-import { DEFAULT_GUTTER_SIZE } from "../../../services/resizer";
 import { EditableCode, EditableCodeProps } from "../code/Code";
-import { ComponentChildren } from "preact";
-import ActionButton, { ActionButtonProps } from "../../react/ActionButton";
 
 export interface SplitEditorProps extends EditableCodeProps {
     className?: string;
@@ -15,6 +17,7 @@ export interface SplitEditorProps extends EditableCodeProps {
     splitOptions?: Split.Options;
     previewContent: ComponentChildren;
     previewButtons?: ComponentChildren;
+    editorBefore?: ComponentChildren;
 }
 
 /**
@@ -26,13 +29,14 @@ export interface SplitEditorProps extends EditableCodeProps {
  * - Can display errors to the user via {@link setError}.
  * - Horizontal or vertical orientation for the editor/preview split, adjustable via the switch split orientation button floating button.
  */
-export default function SplitEditor({ note, error, splitOptions, previewContent, previewButtons, className, ...editorProps }: SplitEditorProps) {
+export default function SplitEditor({ note, error, splitOptions, previewContent, previewButtons, className, editorBefore, ...editorProps }: SplitEditorProps) {
     const splitEditorOrientation = useSplitOrientation();
     const [ readOnly ] = useNoteLabelBoolean(note, "readOnly");
     const containerRef = useRef<HTMLDivElement>(null);
 
     const editor = (!readOnly &&
         <div className="note-detail-split-editor-col">
+            {editorBefore}
             <div className="note-detail-split-editor">
                 <EditableCode
                     note={note}
@@ -74,12 +78,12 @@ export default function SplitEditor({ note, error, splitOptions, previewContent,
     }, [ readOnly, splitEditorOrientation ]);
 
     return (
-        <div ref={containerRef} className={`note-detail-split note-detail-printable ${"split-" + splitEditorOrientation} ${readOnly ? "split-read-only" : ""} ${className ?? ""}`}>
+        <div ref={containerRef} className={`note-detail-split note-detail-printable ${`split-${  splitEditorOrientation}`} ${readOnly ? "split-read-only" : ""} ${className ?? ""}`}>
             {splitEditorOrientation === "horizontal"
-            ? <>{editor}{preview}</>
-            : <>{preview}{editor}</>}
+                ? <>{editor}{preview}</>
+                : <>{preview}{editor}</>}
         </div>
-    )
+    );
 }
 
 export function PreviewButton(props: Omit<ActionButtonProps, "titlePosition">) {
@@ -88,7 +92,7 @@ export function PreviewButton(props: Omit<ActionButtonProps, "titlePosition">) {
         className="tn-tool-button"
         noIconActionClass
         titlePosition="top"
-    />
+    />;
 }
 
 function useSplitOrientation() {

apps/server/src/app.ts

@@ -3,6 +3,7 @@ import "./becca/becca_loader.js";
 
 import compression from "compression";
 import cookieParser from "cookie-parser";
+import { renderFile } from "ejs";
 import express from "express";
 import { auth } from "express-openid-connect";
 import helmet from "helmet";
@@ -34,8 +35,7 @@ export default async function buildApp() {
 
     // view engine setup
     app.set("views", path.join(assetsDir, "views"));
-    const ejs = await import("ejs");
-    app.engine("ejs", (filePath, options, callback) => ejs.renderFile(filePath, options, callback));
+    app.engine("ejs", (filePath, options, callback) => renderFile(filePath, options, callback));
     app.set("view engine", "ejs");
 
     app.use((req, res, next) => {