@adecore/database 0.17.0 → 0.18.1

package/dist/value/ValuePanel.js

@@ -1,103 +1,12 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from 'react';
 import clsx from 'clsx';
-import { Copy, Ellipsis, MousePointerClick, WrapText, X } from 'lucide-react';
+import { MousePointerClick, X } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { Button, copyText, EmptyState, FormError, IconButton, isApplePlatform, KEY_SHORTCUTS, matchesShortcut, Menu, PanelHeader, Segmented, TextArea, Tooltip } from '@adecore/ui';
-import { formatBytes, formatNumber } from '@adecore/ui/format';
-import { editValueOf, sameDraft, sameSource, sourceOf } from './draft.js';
-import { hexDumpLines, parseHex } from './hex.js';
-import { renderView, sizeOf, viewsOf } from './views.js';
-const WRAPPING_VIEWS = new Set(['text', 'formatted', 'utf8']);
-const READING = 'min-h-0 flex-1 overflow-auto rounded-lg border border-border bg-surface p-2 font-mono text-code text-text';
+import { EmptyState, IconButton, PanelHeader } from '@adecore/ui';
+import { ValueEditor } from './ValueEditor.js';
 /* The whole value of the focused cell beside the grid, to read and edit what a cell is too small for. */
 export function ValuePanel({ column, value, loading, editable, onCommit, onClose, className, ref }) {
     const { t } = useTranslation('database');
     const ready = column !== null && !loading && value !== undefined;
     return (_jsxs("div", { ref: ref, className: clsx('flex h-full min-h-0 min-w-0 flex-col', className), children: [_jsxs(PanelHeader, { title: column === null ? t('value.title') : undefined, children: [column !== null && (_jsxs(_Fragment, { children: [_jsx("span", { className: "min-w-0 truncate text-sm font-medium text-text", children: column.name }), column.type !== '' && _jsx("span", { className: "min-w-0 shrink-0 truncate text-xs text-text-faint", children: column.type })] })), _jsx(IconButton, { icon: X, size: "sm", label: t('value.close'), className: "ml-auto", onClick: onClose })] }), ready ? (_jsx(ValueEditor, { column: column, value: value, editable: editable, onCommit: onCommit })) : (_jsx("div", { className: "grid min-h-0 grow place-items-center", children: _jsx(EmptyState, { icon: column === null ? MousePointerClick : undefined, busy: column !== null && loading, children: column === null ? t('value.selectCell') : loading ? t('value.loading') : t('value.notLoaded') }) }))] }));
 }
-function ValueEditor({ column, value, editable, onCommit }) {
-    const { t } = useTranslation('database');
-    const { name, type, kind } = column;
-    const source = useMemo(() => sourceOf({ name, type, kind }, value), [name, type, kind, value]);
-    const [seen, setSeen] = useState(source);
-    const [draft, setDraft] = useState(source.original);
-    const [choice, setChoice] = useState(null);
-    const [problem, setProblem] = useState(null);
-    const [wrap, setWrap] = useState(true);
-    // A new cell, or the same cell with a new value, starts over from that value.
-    if (!sameSource(seen, source)) {
-        setSeen(source);
-        setDraft(source.original);
-        setChoice(null);
-        setProblem(null);
-    }
-    const views = viewsOf(source, draft);
-    const view = choice !== null && views.includes(choice) ? choice : views[0];
-    const dirty = !sameDraft(draft, source.original);
-    const rendered = useMemo(() => (view === 'text' ? null : renderView(view, draft)), [view, draft]);
-    const hex = source.binary && draft.mode === 'value' ? parseHex(draft.text) : null;
-    const shownProblem = problem ?? (hex !== null && !hex.ok ? { kind: 'hex', problem: hex.problem } : null);
-    const size = sizeOf(source, draft);
-    const placeholder = draft.mode === 'null' ? 'NULL' : draft.mode === 'default' ? 'DEFAULT' : undefined;
-    const change = (next) => {
-        setDraft(next);
-        setProblem(null);
-    };
-    const apply = () => {
-        if (!editable || onCommit === undefined || !dirty) {
-            return;
-        }
-        const conversion = editValueOf(draft, source);
-        if (conversion.ok) {
-            onCommit(conversion.value);
-        }
-        else {
-            setProblem(conversion.problem);
-        }
-    };
-    const handleKeyDown = (event) => {
-        if (!event.nativeEvent.isComposing && matchesShortcut(KEY_SHORTCUTS.modEnter, event.nativeEvent, isApplePlatform())) {
-            event.preventDefault();
-            apply();
-        }
-    };
-    const copy = () => {
-        if (view === 'hex' && hex !== null && hex.ok) {
-            copyText(hexDumpLines(hex.hex).join('\n'));
-        }
-        else if (rendered !== null && rendered.kind === 'text') {
-            copyText(rendered.text);
-        }
-        else {
-            copyText(draft.mode === 'value' ? draft.text : draft.mode === 'null' ? 'NULL' : 'DEFAULT');
-        }
-    };
-    const editor = (extra) => (_jsx(TextArea, { mono: true, "aria-label": t(source.binary ? 'value.hexEditor' : 'value.editor', { column: column.name }), wrap: wrap || source.binary ? 'soft' : 'off', spellCheck: false, readOnly: !editable, placeholder: placeholder, value: draft.mode === 'value' ? draft.text : '', className: extra, onChange: (event) => change({ text: event.target.value, mode: 'value' }), onKeyDown: handleKeyDown }));
-    const problemText = (found) => found.kind === 'json'
-        ? t('value.invalidJson', { reason: found.reason })
-        : t(found.problem === 'odd' ? 'value.invalidHexOdd' : 'value.invalidHexCharacters');
-    const reading = (content, wrapped) => {
-        if (content.kind === 'empty') {
-            return _jsx(Faint, { children: placeholder });
-        }
-        if (content.kind === 'problem') {
-            return _jsx(Faint, { children: problemText(content.problem) });
-        }
-        return (_jsxs(_Fragment, { children: [_jsx("pre", { className: clsx(READING, wrapped ? 'break-words whitespace-pre-wrap' : 'whitespace-pre'), children: content.text }), content.truncated && (_jsx("p", { className: "shrink-0 text-xs text-text-faint", children: t('value.dumpTruncated', { shown: formatNumber(content.truncated.shown), total: formatNumber(content.truncated.total) }) }))] }));
-    };
-    const body = () => {
-        if (view === 'text') {
-            return editor('min-h-0 flex-1');
-        }
-        if (view === 'hex' && editable) {
-            return (_jsxs(_Fragment, { children: [draft.mode === 'value' && rendered !== null && reading(rendered, false), editor(draft.mode === 'value' ? 'flex-none' : 'min-h-0 flex-1')] }));
-        }
-        return rendered === null ? null : reading(rendered, wrap && WRAPPING_VIEWS.has(view));
-    };
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex h-10 shrink-0 items-center gap-2 px-2", children: [views.length > 1 && (_jsx(Segmented, { value: view, onValueChange: (id) => setChoice(id), label: t('value.views'), options: views.map((id) => ({ id, label: t(`value.view.${id}`) })) })), _jsxs("div", { className: "ml-auto flex items-center gap-1", children: [WRAPPING_VIEWS.has(view) && (_jsx(IconButton, { icon: WrapText, size: "sm", label: t('value.wrap'), "aria-pressed": wrap, active: wrap, onClick: () => setWrap(!wrap) })), _jsx(IconButton, { icon: Copy, size: "sm", label: t('value.copy'), onClick: copy })] })] }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col gap-2 px-2 pb-2", children: body() }), shownProblem !== null && _jsx(FormError, { className: "shrink-0 px-3 pb-2 text-xs", children: problemText(shownProblem) }), editable && (_jsxs("div", { className: "flex shrink-0 items-center gap-1.5 border-t border-border p-2", children: [_jsxs(Menu.Root, { children: [_jsx(IconButton, { icon: Ellipsis, size: "sm", label: t('value.more'), render: _jsx(Menu.Trigger, {}) }), _jsxs(Menu.Popup, { children: [column.nullable !== false && (_jsx(Menu.Item, { disabled: draft.mode === 'null', onClick: () => change({ text: '', mode: 'null' }), children: t('value.setNull') })), _jsx(Menu.Item, { disabled: draft.mode === 'default', onClick: () => change({ text: '', mode: 'default' }), children: t('value.setDefault') })] })] }), _jsxs("span", { className: "ml-auto flex items-center gap-1.5", children: [_jsx(Button, { size: "xs", disabled: !dirty, onClick: () => change(source.original), children: t('value.revert') }), _jsx(Tooltip, { label: t('value.applyHint'), kbd: KEY_SHORTCUTS.modEnter, children: _jsx(Button, { size: "xs", variant: "primary", disabled: !dirty || onCommit === undefined, onClick: apply, children: t('value.apply') }) })] })] })), _jsx("footer", { className: "flex h-8 shrink-0 items-center border-t border-border px-3 text-xs text-text-muted tabular-nums", children: size !== null &&
-                    (size.unit === 'bytes' ? formatBytes(size.count) : t('value.characters', { count: size.count, formatted: formatNumber(size.count) })) })] }));
-}
-function Faint({ children }) {
-    return _jsx("div", { className: "grid min-h-0 flex-1 place-items-center font-mono text-code text-text-faint", children: children });
-}

package/dist/workbench/DatabaseWorkbench.js

@@ -3,10 +3,10 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import clsx from 'clsx';
 import { PencilRuler, Settings2, SquareTerminal, Table, TableProperties } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { Button, ColumnResizeHandle, Dialog, EmptyState, Icon, IconButton, PromptDialog, Segmented, Tabs, isApplePlatform, matchesShortcut, shortcut, useColumnResize } from '@adecore/ui';
+import { Button, CloseButton, ColumnResizeHandle, Dialog, EmptyState, Icon, IconButton, PromptDialog, Segmented, Tabs, isApplePlatform, matchesShortcut, shortcut, useColumnResize } from '@adecore/ui';
 import { formatNumber } from '@adecore/ui/format';
 import { DatabaseProvider } from '../DatabaseProvider.js';
-import { useDatabaseAction, useDatabaseClient, useDatabaseFiles, useDatabaseStorage, useNumberNotation } from '../client-context.js';
+import { useDatabaseAction, useDatabaseStorage } from '../client-context.js';
 import { ConnectionManager } from '../connections/ConnectionManager.js';
 import { QueryConsole } from '../console/QueryConsole.js';
 import { DatabaseExplorer } from '../explorer/DatabaseExplorer.js';
@@ -23,11 +23,8 @@ const MIN_WIDTH = 200;
  */
 export function DatabaseWorkbench({ connections, onConnectionsChange, className, ref }) {
     const { t } = useTranslation('database');
-    const client = useDatabaseClient();
     const outer = useDatabaseAction();
     const storage = useDatabaseStorage();
-    const files = useDatabaseFiles();
-    const numberNotation = useNumberNotation();
     const column = useRef(null);
     const [state, setState] = useState(() => parseState(storage?.get(STORAGE_KEY) ?? null));
     const [selection, setSelection] = useState(null);
@@ -160,7 +157,7 @@ export function DatabaseWorkbench({ connections, onConnectionsChange, className,
     const canOpenConsole = consoleContext() !== null;
     const closingTab = state.tabs.find((tab) => tab.id === closing);
     const closingTable = closingTab?.kind === 'table' ? closingTab.ref.table : '';
-    return (_jsx(DatabaseProvider, { client: client, onAction: onAction, storage: storage, files: files, numberNotation: numberNotation, children: _jsxs("div", { ref: ref, className: clsx('flex h-full min-h-0 min-w-0 bg-surface text-text', className), onKeyDown: onKeyDown, children: [_jsxs("aside", { ref: column, className: "relative flex shrink-0 flex-col border-r border-border", style: { width }, children: [_jsxs("header", { className: "flex h-9 shrink-0 items-center justify-between border-b border-border pr-2 pl-3", children: [_jsx("h2", { className: "text-sm font-semibold text-text", children: t('workbench.title') }), canManage && (_jsx(IconButton, { icon: Settings2, size: "sm", label: t('workbench.manage'), onClick: () => {
+    return (_jsx(DatabaseProvider, { onAction: onAction, children: _jsxs("div", { ref: ref, className: clsx('flex h-full min-h-0 min-w-0 bg-surface text-text', className), onKeyDown: onKeyDown, children: [_jsxs("aside", { ref: column, className: "relative flex shrink-0 flex-col border-r border-border", style: { width }, children: [_jsxs("header", { className: "flex h-9 shrink-0 items-center justify-between border-b border-border pr-2 pl-3", children: [_jsx("h2", { className: "text-sm font-semibold text-text", children: t('workbench.title') }), canManage && (_jsx(IconButton, { icon: Settings2, size: "sm", label: t('workbench.manage'), onClick: () => {
                                         setManaged(null);
                                         setManaging(true);
                                     } }))] }), _jsx(DatabaseExplorer, { connections: connections, value: selection, onValueChange: setSelection, className: "min-h-0 flex-1" }), _jsx(ColumnResizeHandle, { from: "left", onPointerDown: startResize })] }), _jsxs(Tabs.Root, { value: active?.id ?? null, onValueChange: (id) => setState((current) => focusTab(current, String(id))), className: "flex min-h-0 min-w-0 flex-1 flex-col", children: [_jsx(Tabs.List, { "aria-label": t('workbench.tabs'), className: "px-2", end: _jsxs(_Fragment, { children: [active?.kind === 'table' && (_jsx(Segmented, { label: t('workbench.views'), value: active.view, onValueChange: (view) => setState((current) => setTableView(current, active.id, view)), options: [
@@ -175,5 +172,5 @@ export function DatabaseWorkbench({ connections, onConnectionsChange, className,
                         if (!open) {
                             setClosing(null);
                         }
-                    } }), onConnectionsChange !== undefined && (_jsx(Dialog.Root, { open: managing, onOpenChange: setManaging, children: _jsxs(Dialog.Popup, { className: "flex h-[560px] w-[900px] flex-col overflow-hidden", children: [_jsx("div", { className: "border-b border-border px-4 py-3", children: _jsx(Dialog.Title, { children: t('workbench.connections') }) }), _jsx(ConnectionManager, { value: connections, onValueChange: onConnectionsChange, selected: managed, onSelectedChange: setManaged, className: "min-h-0 flex-1" }), _jsx(Dialog.Footer, { children: _jsx(Dialog.Close, { render: _jsx(Button, { variant: "secondary" }), children: t('workbench.close') }) })] }) }))] }) }));
+                    } }), onConnectionsChange !== undefined && (_jsx(Dialog.Root, { open: managing, onOpenChange: setManaging, children: _jsxs(Dialog.Popup, { className: "flex h-[640px] w-[800px] flex-col overflow-hidden", children: [_jsxs("div", { className: "flex items-center gap-4 border-b border-border px-5 py-4", children: [_jsx(Dialog.Title, { className: "grow", children: t('workbench.connections') }), _jsx(CloseButton, { label: t('workbench.close'), dialog: true })] }), _jsx(ConnectionManager, { value: connections, onValueChange: onConnectionsChange, selected: managed, onSelectedChange: setManaged, className: "min-h-0 flex-1" }), _jsx("div", { className: "flex shrink-0 justify-end border-t border-border px-5 py-3", children: _jsx(Dialog.Close, { render: _jsx(Button, { variant: "secondary" }), children: t('workbench.close') }) })] }) }))] }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/database",
-  "version": "0.17.0",
+  "version": "0.18.1",
   "description": "Browse, query and edit SQLite and MySQL databases: React views for the page, a host for the backend and a native helper that talks to the server.",
   "license": "FSL-1.1-MIT",
   "author": "Bas Milius",
@@ -61,13 +61,13 @@
     "lucide-react": "^1.47.0"
   },
   "optionalDependencies": {
-    "@adecore/database-darwin-arm64": "0.17.0",
-    "@adecore/database-linux-arm64": "0.17.0",
-    "@adecore/database-linux-x64": "0.17.0",
-    "@adecore/database-win32-x64": "0.17.0"
+    "@adecore/database-darwin-arm64": "0.18.1",
+    "@adecore/database-linux-arm64": "0.18.1",
+    "@adecore/database-linux-x64": "0.18.1",
+    "@adecore/database-win32-x64": "0.18.1"
   },
   "peerDependencies": {
-    "@adecore/ui": "^0.17.0",
+    "@adecore/ui": "^0.18.1",
     "i18next": "^26.4.2",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",

package/src/DatabaseProvider.tsx

@@ -1,15 +1,18 @@
-import { useMemo, useState, type ReactNode } from 'react';
+import { use, useMemo, useState, type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
-import type { DatabaseAction, DatabaseFiles, DatabaseStorage } from './actions.ts';
+import type { DatabaseAction, DatabaseFiles, DatabaseNotice, DatabaseStorage } from './actions.ts';
 import type { DatabaseClient } from './client/types.ts';
 import { DatabaseContext } from './client-context.ts';
 import type { NumberNotation } from './grid/display.ts';
 import { addDatabaseResources } from './locales.ts';
 
 export interface DatabaseProviderProps {
-    client: DatabaseClient;
+    /* Required on the outermost provider. A provider inside another takes every prop it leaves out from the one above. */
+    client?: DatabaseClient;
     /* Where a table, a console or the designer a view asks for opens. Without it the views offer none of those. */
     onAction?(action: DatabaseAction): void;
+    /* Where a view's passing news goes, such as an export that finished. Without it each view shows its own above its content. */
+    onNotice?(notice: DatabaseNotice): void;
     storage?: DatabaseStorage;
     files?: DatabaseFiles;
     /*
@@ -22,8 +25,9 @@ export interface DatabaseProviderProps {
 }
 
 /* Hands every view below it the client and the app's hooks, and adds the package's words to the i18next the app's `UIProvider` was given. Mount it inside that provider. */
-export function DatabaseProvider({ client, onAction, storage, files, numberNotation = 'database', children }: DatabaseProviderProps) {
+export function DatabaseProvider({ client, onAction, onNotice, storage, files, numberNotation, children }: DatabaseProviderProps) {
     const { i18n } = useTranslation();
+    const outer = use(DatabaseContext);
     const [added, setAdded] = useState<typeof i18n | null>(null);
     // In render, as `UIProvider` does, so the first view already reads its words.
     if (added !== i18n) {
@@ -31,7 +35,22 @@ export function DatabaseProvider({ client, onAction, storage, files, numberNotat
         setAdded(i18n);
     }
 
-    const value = useMemo(() => ({ client, onAction, storage, files, numberNotation }), [client, onAction, storage, files, numberNotation]);
+    const ownClient = client ?? outer?.client;
+    const ownAction = onAction ?? outer?.onAction;
+    const ownNotice = onNotice ?? outer?.onNotice;
+    const ownStorage = storage ?? outer?.storage;
+    const ownFiles = files ?? outer?.files;
+    const ownNotation = numberNotation ?? outer?.numberNotation ?? 'database';
+    const value = useMemo(
+        () =>
+            ownClient === undefined
+                ? null
+                : { client: ownClient, onAction: ownAction, onNotice: ownNotice, storage: ownStorage, files: ownFiles, numberNotation: ownNotation },
+        [ownClient, ownAction, ownNotice, ownStorage, ownFiles, ownNotation]
+    );
+    if (value === null) {
+        throw new Error('A DatabaseProvider needs a client, or a DatabaseProvider above it to take one from.');
+    }
 
     return <DatabaseContext value={value}>{children}</DatabaseContext>;
 }

package/src/KeyIcon.tsx

@@ -0,0 +1,15 @@
+import clsx from 'clsx';
+import { KeyRound } from 'lucide-react';
+import { Icon } from '@adecore/ui';
+import type { ColumnKeys } from './column-keys.ts';
+
+/*
+ * The key of a column, yellow on a primary key and blue on a foreign key, the same in the tree and the
+ * grid. A column that is both shows the primary key, since that is what names its row; the tooltip says both.
+ */
+export function KeyIcon({ primaryKey, foreignKey, size }: ColumnKeys & { size: 12 | 14 }) {
+    if (!primaryKey && !foreignKey) {
+        return null;
+    }
+    return <Icon icon={KeyRound} size={size} className={clsx('shrink-0', primaryKey ? 'text-(--file-icon-yellow)' : 'text-(--file-icon-blue)')} />;
+}

package/src/actions.ts

@@ -1,18 +1,44 @@
 import type { TableRef } from './client/types.ts';
+import type { TableKind } from './protocol/index.ts';
 
 /*
  * Something a view asks the app to open. The views draw no tabs and no windows of their own: the app
  * decides where a table, a console or the designer lands, such as a tab beside its file tabs.
  */
 export type DatabaseAction =
-    /* `where` opens the table filtered, as a jump along a foreign key does. */
-    | { readonly kind: 'open-table'; readonly ref: TableRef; readonly view: 'data' | 'structure'; readonly where?: string }
+    | {
+          readonly kind: 'open-table';
+          readonly ref: TableRef;
+          readonly view: 'data' | 'structure';
+          /* Opens the table filtered, as a jump along a foreign key does. */
+          readonly where?: string;
+          /* Whether `ref` is a table or a view, where the sender knows it. */
+          readonly tableKind?: TableKind;
+          /*
+           * Only from an explorer that opens on a click: `true` for that click, a look a person may move on from, and
+           * `false` for a double click or Enter, which mean to keep the table open.
+           */
+          readonly preview?: boolean;
+      }
     | { readonly kind: 'open-console'; readonly connectionId: string; readonly schema?: string; readonly sql?: string }
     | { readonly kind: 'new-table'; readonly connectionId: string; readonly schema: string }
     | { readonly kind: 'edit-table'; readonly ref: TableRef }
     /* The app opens its connection manager on this connection. */
     | { readonly kind: 'manage-connection'; readonly connectionId: string };
 
+/*
+ * Something a view tells a person that passes, such as an export that finished or failed, for the app to show
+ * where it shows such news. What stays part of a view, such as a conflict or a read-only reason, is no notice.
+ */
+export interface DatabaseNotice {
+    readonly tone: 'success' | 'error';
+    /* What happened in a few words, such as "Exported 1,884 rows." or "Export failed". */
+    readonly title: string;
+    /* Why it failed, as the server or the file system said it. */
+    readonly description?: string;
+    readonly action?: { readonly label: string; run(): void };
+}
+
 /* What is selected in the explorer: a connection, a schema in it, or a table in that schema. */
 export interface ExplorerSelection {
     readonly connectionId: string;

package/src/client-context.ts

@@ -1,11 +1,12 @@
 import { createContext, use } from 'react';
-import type { DatabaseAction, DatabaseFiles, DatabaseStorage } from './actions.ts';
+import type { DatabaseAction, DatabaseFiles, DatabaseNotice, DatabaseStorage } from './actions.ts';
 import type { DatabaseClient } from './client/types.ts';
 import type { NumberNotation } from './grid/display.ts';
 
 export interface DatabaseContextValue {
     readonly client: DatabaseClient;
     readonly onAction: ((action: DatabaseAction) => void) | undefined;
+    readonly onNotice: ((notice: DatabaseNotice) => void) | undefined;
     readonly storage: DatabaseStorage | undefined;
     readonly files: DatabaseFiles | undefined;
     readonly numberNotation: NumberNotation;
@@ -26,6 +27,9 @@ export const useDatabaseClient = (): DatabaseClient => useDatabaseContext().clie
 /* Hands an action to the app, or `undefined` when the app takes none, so a view can leave out what would go nowhere. */
 export const useDatabaseAction = (): ((action: DatabaseAction) => void) | undefined => useDatabaseContext().onAction;
 
+/* Hands a notice to the app, or `undefined` when the app takes none and the view shows it itself. */
+export const useDatabaseNotice = (): ((notice: DatabaseNotice) => void) | undefined => useDatabaseContext().onNotice;
+
 export const useDatabaseStorage = (): DatabaseStorage | undefined => useDatabaseContext().storage;
 
 /* The app's file dialogs; export and import stay hidden without them. */

package/src/code-text.ts

@@ -0,0 +1,2 @@
+/* Code a person reads as code (values, statements, DDL), at the size the app gives its code through `--code-font-size` and `--code-line-height`. */
+export const CODE_TEXT = 'font-mono text-(length:--code-font-size) leading-(--code-line-height)';

package/src/column-keys.ts

@@ -0,0 +1,8 @@
+export interface ColumnKeys {
+    readonly primaryKey: boolean;
+    readonly foreignKey: boolean;
+}
+
+/* The words that name what a key column is, for its tooltip. */
+export const keyLabelOf = ({ primaryKey, foreignKey }: ColumnKeys): 'explorer.primaryAndForeignKey' | 'explorer.primaryKey' | 'explorer.foreignKey' =>
+    primaryKey && foreignKey ? 'explorer.primaryAndForeignKey' : primaryKey ? 'explorer.primaryKey' : 'explorer.foreignKey';

package/src/connections/ConnectionManager.tsx

@@ -1,14 +1,15 @@
-import { useState, type Ref } from 'react';
+import { useState, type ReactNode, type Ref } from 'react';
+import clsx from 'clsx';
 import { CircleAlert, CircleCheck, Container, Database, Plus, Trash2, Unplug } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { Banner, Button, EmptyState, Icon, Menu, messageOf, PromptDialog, Spinner } from '@adecore/ui';
-import { DetailHeader, MasterDetail, MasterItem } from '@adecore/ui/settings';
+import { Banner, Button, CloseButton, EmptyState, Icon, Menu, messageOf, PromptDialog, Spinner } from '@adecore/ui';
+import { DetailHeader, MasterItem } from '@adecore/ui/settings';
 import { useDatabaseClient } from '../client-context.ts';
 import type { Connection } from '../client/types.ts';
 import type { ConnectionConfig, DockerContainer, Engine, ServerInfo } from '../protocol/index.ts';
 import { defaultConfig, isValidConfig, targetOf } from './connection-config.ts';
 import { ConnectionForm } from './ConnectionForm.tsx';
-import { composeNameOf, connectionFromContainer, isMysqlContainer } from './docker.ts';
+import { connectionFromContainer, containerTitle, isMysqlContainer } from './docker.ts';
 import { useDockerContainers } from './use-docker-containers.ts';
 import { ENGINE_ICONS } from './engine-icons.ts';
 import { EngineIcon } from './EngineIcon.tsx';
@@ -24,20 +25,33 @@ export interface ConnectionManagerProps {
     onSelectedChange?(id: string | null): void;
     /* Opens the app's file dialog for a database file or an SSH identity file; without it the path is typed. See `ConnectionForm`. */
     onBrowse?(purpose: 'database' | 'identity'): Promise<string | null>;
+    /* The app's own settings of the picked connection, drawn after the form's fields and in their rhythm, such as a horizontal `Field`. */
+    renderFields?(connection: Connection): ReactNode;
     className?: string;
     ref?: Ref<HTMLDivElement>;
 }
 
-type TestOutcome = { readonly config: ConnectionConfig; readonly info: ServerInfo } | { readonly config: ConnectionConfig; readonly error: string };
+/* What the server answered a test, for the connection and the config that were tested. */
+type TestOutcome = { readonly connectionId: string; readonly config: ConnectionConfig } & ({ readonly info: ServerInfo } | { readonly error: string });
 
-/* The saved connections beside the form of the one picked, for a settings pane or a view of its own. */
-export function ConnectionManager({ value, onValueChange, selected, onSelectedChange, onBrowse, className, ref }: ConnectionManagerProps) {
+/*
+ * The saved connections beside the form of the one picked, for a dialog, a settings pane or a view of its own. The list
+ * scrolls on its own with New connection under it, and the detail scrolls beside it; in a narrow window they stack.
+ */
+export function ConnectionManager({ value, onValueChange, selected, onSelectedChange, onBrowse, renderFields, className, ref }: ConnectionManagerProps) {
     const { t } = useTranslation('database');
     const [own, setOwn] = useState<string | null>(null);
     const [deleting, setDeleting] = useState(false);
+    const [outcome, setOutcome] = useState<TestOutcome | null>(null);
     const client = useDatabaseClient();
     const pickedId = selected === undefined ? own : selected;
     const current = value.find((connection) => connection.id === pickedId) ?? value[0] ?? null;
+    // The answer of one connection is gone once another is picked, so coming back does not bring it back.
+    if (outcome !== null && outcome.connectionId !== current?.id) {
+        setOutcome(null);
+    }
+    // An answer to an older config is never shown for a newer one.
+    const shown = outcome !== null && current !== null && outcome.config === current.config ? outcome : null;
 
     const select = (id: string | null): void => {
         if (selected === undefined) {
@@ -71,41 +85,46 @@ export function ConnectionManager({ value, onValueChange, selected, onSelectedCh
     };
 
     const list = (
-        <>
-            <Menu.Root>
-                <Menu.Trigger render={<Button variant="secondary" size="sm" className="mb-2" />}>
-                    <Icon icon={Plus} size={14} />
-                    {t('connections.new')}
-                </Menu.Trigger>
-                <Menu.Popup>
-                    {ENGINES.map((engine) => (
-                        <Menu.Item key={engine} onClick={() => add(engine)}>
-                            <Icon icon={ENGINE_ICONS[engine]} size={14} />
-                            {t(`engine.${engine}`)}
-                        </Menu.Item>
-                    ))}
-                    <Menu.Separator />
-                    <Menu.SubmenuRoot>
-                        <Menu.SubmenuTrigger>
-                            <Icon icon={Container} size={14} />
-                            {t('connections.fromDocker.label')}
-                        </Menu.SubmenuTrigger>
-                        <Menu.Popup>
-                            <DockerMenuItems onPick={addFromContainer} />
-                        </Menu.Popup>
-                    </Menu.SubmenuRoot>
-                </Menu.Popup>
-            </Menu.Root>
-            {value.map((connection) => (
-                <MasterItem key={connection.id} selected={connection.id === current?.id} onSelect={() => select(connection.id)}>
-                    <EngineIcon engine={connection.config.engine} size={16} className="shrink-0 text-text-muted" />
-                    <span className="flex min-w-0 flex-col">
-                        <span className="truncate">{connection.name || t('connections.untitled')}</span>
-                        <span className="truncate text-xs text-text-faint">{targetOf(connection)}</span>
-                    </span>
-                </MasterItem>
-            ))}
-        </>
+        <div className="flex w-56 shrink-0 flex-col border-r border-border max-[640px]:max-h-60 max-[640px]:w-auto max-[640px]:border-r-0 max-[640px]:border-b">
+            <nav aria-label={t('connections.list')} className="flex min-h-0 grow flex-col gap-0.5 overflow-y-auto p-2">
+                {value.length === 0 && <p className="px-2 py-1.5 text-xs text-text-faint">{t('connections.empty')}</p>}
+                {value.map((connection) => (
+                    <MasterItem key={connection.id} selected={connection.id === current?.id} onSelect={() => select(connection.id)}>
+                        <EngineIcon engine={connection.config.engine} size={16} className="shrink-0 text-text-muted" />
+                        <span className="flex min-w-0 flex-col">
+                            <span className="truncate">{connection.name || t('connections.untitled')}</span>
+                            <span className="truncate text-xs text-text-faint">{targetOf(connection)}</span>
+                        </span>
+                    </MasterItem>
+                ))}
+            </nav>
+            <div className="flex shrink-0 flex-col gap-1 border-t border-border p-2">
+                <Menu.Root>
+                    <Menu.Trigger render={<Button variant="ghost" size="sm" className="justify-start" />}>
+                        <Icon icon={Plus} size={14} />
+                        {t('connections.new')}
+                    </Menu.Trigger>
+                    <Menu.Popup>
+                        {ENGINES.map((engine) => (
+                            <Menu.Item key={engine} onClick={() => add(engine)}>
+                                <Icon icon={ENGINE_ICONS[engine]} size={14} />
+                                {t(`engine.${engine}`)}
+                            </Menu.Item>
+                        ))}
+                        <Menu.Separator />
+                        <Menu.SubmenuRoot>
+                            <Menu.SubmenuTrigger>
+                                <Icon icon={Container} size={14} />
+                                {t('connections.fromDocker.label')}
+                            </Menu.SubmenuTrigger>
+                            <Menu.Popup>
+                                <DockerMenuItems onPick={addFromContainer} />
+                            </Menu.Popup>
+                        </Menu.SubmenuRoot>
+                    </Menu.Popup>
+                </Menu.Root>
+            </div>
+        </div>
     );
 
     const detail =
@@ -113,6 +132,20 @@ export function ConnectionManager({ value, onValueChange, selected, onSelectedCh
             <EmptyState icon={Database}>{t('connections.empty')}</EmptyState>
         ) : (
             <>
+                {shown !== null && (
+                    <Banner
+                        icon={'info' in shown ? CircleCheck : CircleAlert}
+                        tone={'info' in shown ? 'neutral' : 'error'}
+                        className="sticky top-0 z-10"
+                        message={
+                            'info' in shown
+                                ? t('connections.test.success', { server: `${t(`engine.flavor.${shown.info.flavor}`)} ${shown.info.version}` })
+                                : shown.error
+                        }
+                    >
+                        <CloseButton size="sm" label={t('connections.test.dismiss')} onClick={() => setOutcome(null)} />
+                    </Banner>
+                )}
                 <DetailHeader
                     mark={<EngineIcon engine={current.config.engine} size={20} className="mt-0.5 shrink-0 text-text-muted" />}
                     title={current.name || t('connections.untitled')}
@@ -124,8 +157,11 @@ export function ConnectionManager({ value, onValueChange, selected, onSelectedCh
                         </Button>
                     }
                 />
-                <ConnectionForm value={current} onValueChange={change} onBrowse={onBrowse} />
-                <ConnectionTest key={current.id} connection={current} />
+                <div className="flex flex-col gap-4">
+                    <ConnectionForm value={current} onValueChange={change} onBrowse={onBrowse} />
+                    {renderFields?.(current)}
+                </div>
+                <ConnectionTest key={current.id} connection={current} onOutcome={setOutcome} />
                 <PromptDialog
                     open={deleting}
                     danger
@@ -141,7 +177,14 @@ export function ConnectionManager({ value, onValueChange, selected, onSelectedCh
             </>
         );
 
-    return <MasterDetail ref={ref} className={className} list={list} listWidth={280} listLabel={t('connections.list')} detail={detail} />;
+    return (
+        <div ref={ref} className={clsx('flex min-h-0 min-w-0 grow max-[640px]:flex-col', className)}>
+            {list}
+            <div className="min-h-0 min-w-0 grow overflow-y-auto">
+                <div className="flex min-w-0 flex-col gap-6 px-5 py-4">{detail}</div>
+            </div>
+        </div>
+    );
 }
 
 /* The containers Docker is running as menu items. The submenu mounts this when it opens, so Docker is asked only then. */
@@ -175,50 +218,37 @@ function DockerMenuItems({ onPick }: { onPick(container: DockerContainer): void
     return containers.map((container) => (
         <Menu.Item key={container.id} onClick={() => onPick(container)}>
             <span className="flex min-w-0 flex-col">
-                <span className="truncate">{composeNameOf(container) ?? container.name}</span>
+                <span className="truncate">{containerTitle(container)}</span>
                 <span className="truncate text-xs text-text-faint">{container.image}</span>
             </span>
         </Menu.Item>
     ));
 }
 
-/* The button that asks the server who it is, and what it answered; an answer to an older config is not shown. */
-function ConnectionTest({ connection }: { connection: Connection }) {
+/* The button that asks the server who it is. The manager shows the answer at the top of the detail. */
+function ConnectionTest({ connection, onOutcome }: { connection: Connection; onOutcome(outcome: TestOutcome): void }) {
     const { t } = useTranslation('database');
     const client = useDatabaseClient();
     const [busy, setBusy] = useState(false);
-    const [outcome, setOutcome] = useState<TestOutcome | null>(null);
-    const shown = outcome !== null && outcome.config === connection.config ? outcome : null;
 
     const test = async (): Promise<void> => {
         const config = connection.config;
         setBusy(true);
         try {
-            setOutcome({ config, info: await client.test(config) });
+            onOutcome({ connectionId: connection.id, config, info: await client.test(config) });
         } catch (e) {
-            setOutcome({ config, error: messageOf(e, t('connections.test.failed')) });
+            onOutcome({ connectionId: connection.id, config, error: messageOf(e, t('connections.test.failed')) });
         } finally {
             setBusy(false);
         }
     };
 
     return (
-        <div className="flex flex-col gap-3">
-            <div>
-                <Button variant="secondary" disabled={busy || !isValidConfig(connection.config)} onClick={() => void test()}>
-                    {busy ? <Spinner size={14} /> : <Icon icon={Unplug} size={14} />}
-                    {t('connections.test.action')}
-                </Button>
-            </div>
-            {shown !== null && 'info' in shown && (
-                <Banner
-                    icon={CircleCheck}
-                    tone="neutral"
-                    className="w-full"
-                    message={t('connections.test.success', { server: `${t(`engine.flavor.${shown.info.flavor}`)} ${shown.info.version}` })}
-                />
-            )}
-            {shown !== null && 'error' in shown && <Banner icon={CircleAlert} tone="error" className="w-full" message={shown.error} />}
+        <div>
+            <Button variant="secondary" disabled={busy || !isValidConfig(connection.config)} onClick={() => void test()}>
+                {busy ? <Spinner size={14} /> : <Icon icon={Unplug} size={14} />}
+                {t('connections.test.action')}
+            </Button>
         </div>
     );
 }

package/src/connections/connection-config.ts

@@ -82,8 +82,10 @@ const mysqlProblems = (config: MysqlConnectionConfig): ConfigProblems => {
     return problems;
 };
 
+/* What is wrong with a config, field by field: the codes the form shows. Empty for a config with nothing to fix. */
 export const configProblems = (config: ConnectionConfig): ConfigProblems => (config.engine === 'sqlite' ? sqliteProblems(config) : mysqlProblems(config));
 
+/* Whether a connection can be saved, rather than a draft a person is still filling in. */
 export const isValidConfig = (config: ConnectionConfig): boolean => Object.keys(configProblems(config)).length === 0;
 
 const lastSegment = (path: string): string => {