@adecore/database 0.16.0-beta.0 → 0.17.0-beta.1

package/dist/explorer/DatabaseExplorer.js

@@ -1,9 +1,9 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
-import { ChevronRight, CircleAlert, Database, Eye, Folder, KeyRound, Link2, Lock, RectangleVertical, Search, Table } from 'lucide-react';
+import { CircleAlert, Database, Eye, Folder, KeyRound, Link2, Lock, RectangleVertical, Search, Table } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { Button, ContextMenu, EmptyState, Icon, Input, Spinner, Tooltip } from '@adecore/ui';
+import { Button, ContextMenu, EmptyState, Icon, Input, Spinner, Tooltip, Tree } from '@adecore/ui';
 import { formatNumber } from '@adecore/ui/format';
 import { useDatabaseAction, useDatabaseClient } from '../client-context.js';
 import { EngineIcon } from '../connections/EngineIcon.js';
@@ -13,10 +13,6 @@ import { connectionKey, flattenTree, hasMenu, isExpandable, isFolderKey, isSelec
 import { useExplorerLoads } from './use-explorer-loads.js';
 import { usePopupPress } from '../use-popup-press.js';
 import { useStoredExpansion } from './use-stored-expansion.js';
-const INDENT = 16;
-/* Where the chevron slot of the first level starts inside a row. */
-const BASE_INDENT = 4;
-const CHEVRON_SIZE = 16;
 /*
  * The connections, their schemas and their tables as a tree, loaded as each node opens. Every row
  * selects; a double click or Enter on a table asks the app to open it through `useDatabaseAction`.
@@ -174,18 +170,17 @@ export function DatabaseExplorer({ connections, value, defaultValue = null, onVa
         const menu = connection !== undefined && hasMenu(row) ? (_jsx(RowMenu, { row: row, connection: connection, onRefresh: refresh, onDisconnect: disconnect, onRequest: setRequest })) : null;
         const selectedRow = isSelected(row);
         const props = {
-            role: 'treeitem',
-            'aria-level': row.level,
+            level: row.level,
+            selected: selectedRow,
+            joinedStart: selectedRow && isSelected(rows[index - 1]),
+            joinedEnd: selectedRow && isSelected(rows[index + 1]),
+            interactive: row.focusable,
             'aria-setsize': row.setSize,
             'aria-posinset': row.posInSet,
             'aria-expanded': isExpandable(row) ? row.expanded : undefined,
             'aria-selected': isSelectable(row) ? selectedRow : undefined,
             'aria-busy': row.kind === 'loading' ? true : undefined,
             tabIndex: row.focusable ? (row.key === stop ? 0 : -1) : undefined,
-            className: clsx(
-            // The line box is the row's height, so the text lands on whole pixels in a row of an odd height.
-            'focus-ring relative mx-2 flex h-[25px] min-w-0 items-center gap-1.5 rounded-md pr-2 text-xs leading-[25px] text-text focus-visible:-outline-offset-2', selectedRow ? 'bg-surface-active' : row.focusable && 'hover:bg-surface-hover', selectedRow && isSelected(rows[index - 1]) && 'rounded-t-none', selectedRow && isSelected(rows[index + 1]) && 'rounded-b-none'),
-            style: { paddingInlineStart: BASE_INDENT + (row.level - 1) * INDENT },
             ref: (element) => {
                 if (element === null) {
                     rowElements.current.delete(row.key);
@@ -202,50 +197,40 @@ export function DatabaseExplorer({ connections, value, defaultValue = null, onVa
                 }
             }
         };
-        const content = (_jsxs(_Fragment, { children: [Array.from({ length: row.level - 1 }, (_, i) => (_jsx("span", { "aria-hidden": true, className: "pointer-events-none absolute inset-y-0 w-px bg-border", style: { insetInlineStart: BASE_INDENT + i * INDENT + CHEVRON_SIZE / 2 - 1 } }, i))), _jsx(RowContent, { row: row, onToggle: isExpandable(row) ? () => toggle(row) : undefined })] }));
+        const content = _jsx(RowContent, { row: row, onToggle: isExpandable(row) ? () => toggle(row) : undefined });
         if (menu === null) {
-            return (_jsx("div", { ...props, children: content }, row.key));
+            return (_jsx(Tree.Row, { ...props, children: content }, row.key));
         }
-        return (_jsxs(ContextMenu.Root, { children: [_jsx(ContextMenu.Trigger, { render: _jsx("div", { ...props }), children: content }), _jsx(ContextMenu.Popup, { children: menu })] }, row.key));
+        return (_jsxs(ContextMenu.Root, { children: [_jsx(ContextMenu.Trigger, { render: _jsx(Tree.Row, { ...props }), children: content }), _jsx(ContextMenu.Popup, { children: menu })] }, row.key));
     };
     return (_jsxs("div", { ref: ref, className: clsx('flex min-h-0 min-w-0 flex-col', className), children: [_jsx("div", { className: "shrink-0 border-b border-border p-2", children: _jsx(Input, { size: "sm", icon: Search, type: "search", value: filter, placeholder: t('explorer.filter'), "aria-label": t('explorer.filter'), spellCheck: false, onChange: (e) => setFilter(e.target.value), onKeyDown: (e) => {
                         if (e.key === 'Escape') {
                             setFilter('');
                         }
-                    } }) }), connections.length === 0 ? (_jsx(EmptyState, { icon: Database, children: t('explorer.noConnections') })) : rows.length === 0 ? (_jsx(EmptyState, { icon: Search, children: t('explorer.noMatches', { query: filter.trim() }) })) : (_jsx("div", { role: "tree", "aria-label": t('explorer.label'), className: "min-h-0 grow overflow-y-auto py-2", onKeyDown: onKeyDown, children: rows.map(renderRow) })), request !== null && _jsx(TableDialog, { request: request, onClose: () => setRequest(null), onDone: finish })] }));
+                    } }) }), connections.length === 0 ? (_jsx(EmptyState, { icon: Database, children: t('explorer.noConnections') })) : rows.length === 0 ? (_jsx(EmptyState, { icon: Search, children: t('explorer.noMatches', { query: filter.trim() }) })) : (_jsx(Tree.Root, { "aria-label": t('explorer.label'), className: "min-h-0 grow overflow-y-auto py-2", onKeyDown: onKeyDown, children: rows.map(renderRow) })), request !== null && _jsx(TableDialog, { request: request, onClose: () => setRequest(null), onDone: finish })] }));
 }
 function RowContent({ row, onToggle }) {
     const { t } = useTranslation('database');
     switch (row.kind) {
         case 'connection':
-            return (_jsxs(_Fragment, { children: [_jsx(Chevron, { open: row.expanded, onToggle: onToggle }), _jsx(EngineIcon, { engine: row.connection.config.engine, size: 16, className: "shrink-0 text-text-muted" }), _jsx("span", { className: "min-w-0 truncate", children: row.connection.name || t('connections.untitled') }), row.connection.config.readOnly === true && (_jsx(Tooltip, { label: t('explorer.readOnly'), children: _jsx("span", { className: "inline-flex shrink-0 text-text-faint", children: _jsx(Icon, { icon: Lock, size: 12 }) }) })), row.version !== null && _jsx("span", { className: "min-w-0 shrink-[2] truncate text-text-faint", children: row.version }), row.schemaCount !== null && _jsx(SchemaCount, { shown: row.schemaCount.shown, total: row.schemaCount.total })] }));
+            return (_jsxs(_Fragment, { children: [_jsx(Tree.Chevron, { expanded: row.expanded, onExpandedChange: onToggle }), _jsx(EngineIcon, { engine: row.connection.config.engine, size: 16, className: "shrink-0 text-text-muted" }), _jsx(Tree.Label, { children: row.connection.name || t('connections.untitled') }), row.connection.config.readOnly === true && (_jsx(Tooltip, { label: t('explorer.readOnly'), children: _jsx("span", { className: "inline-flex shrink-0 text-text-faint", children: _jsx(Icon, { icon: Lock, size: 12 }) }) })), row.version !== null && _jsx("span", { className: "min-w-0 shrink-[2] truncate text-text-faint", children: row.version }), row.schemaCount !== null && _jsx(SchemaCount, { shown: row.schemaCount.shown, total: row.schemaCount.total })] }));
         case 'schema':
-            return (_jsxs(_Fragment, { children: [_jsx(Chevron, { open: row.expanded, onToggle: onToggle }), _jsx(Icon, { icon: Database, size: 16, className: "shrink-0 text-text-muted" }), _jsx("span", { className: "min-w-0 truncate", children: row.schema })] }));
+            return (_jsxs(_Fragment, { children: [_jsx(Tree.Chevron, { expanded: row.expanded, onExpandedChange: onToggle }), _jsx(Icon, { icon: Database, size: 16, className: "shrink-0 text-text-muted" }), _jsx(Tree.Label, { children: row.schema })] }));
         case 'folder':
-            return (_jsxs(_Fragment, { children: [_jsx(Chevron, { open: row.expanded, onToggle: onToggle }), _jsx(Icon, { icon: Folder, size: 16, className: "shrink-0 text-text-muted" }), _jsx("span", { className: "min-w-0 truncate", children: t(row.group === 'view' ? 'explorer.views' : 'explorer.tables') }), _jsx("span", { className: "shrink-0 text-text-faint tabular-nums", children: formatNumber(row.count) })] }));
+            return (_jsxs(_Fragment, { children: [_jsx(Tree.Chevron, { expanded: row.expanded, onExpandedChange: onToggle }), _jsx(Icon, { icon: Folder, size: 16, className: "shrink-0 text-text-muted" }), _jsx(Tree.Label, { children: t(row.group === 'view' ? 'explorer.views' : 'explorer.tables') }), _jsx("span", { className: "shrink-0 text-text-faint tabular-nums", children: formatNumber(row.count) })] }));
         case 'table':
-            return (_jsxs(_Fragment, { children: [_jsx(Chevron, { open: row.expanded, onToggle: onToggle }), _jsx(Icon, { icon: row.table.kind === 'view' ? Eye : Table, size: 16, className: "shrink-0 text-text-muted" }), _jsx("span", { className: "min-w-0 truncate", children: row.table.name })] }));
+            return (_jsxs(_Fragment, { children: [_jsx(Tree.Chevron, { expanded: row.expanded, onExpandedChange: onToggle }), _jsx(Icon, { icon: row.table.kind === 'view' ? Eye : Table, size: 16, className: "shrink-0 text-text-muted" }), _jsx(Tree.Label, { children: row.table.name })] }));
         case 'column':
-            return (_jsxs(_Fragment, { children: [_jsx(ChevronSlot, {}), _jsx(ColumnIcon, { primaryKey: row.primaryKey, foreignKey: row.foreignKey }), _jsx("span", { className: "min-w-0 truncate", children: row.column.name }), row.column.type !== '' && _jsx("span", { className: "min-w-0 shrink-[2] truncate text-text-faint", children: row.column.type })] }));
+            return (_jsxs(_Fragment, { children: [_jsx(Tree.ChevronSlot, {}), _jsx(ColumnIcon, { primaryKey: row.primaryKey, foreignKey: row.foreignKey }), _jsx(Tree.Label, { children: row.column.name }), row.column.type !== '' && _jsx("span", { className: "min-w-0 shrink-[2] truncate text-text-faint", children: row.column.type })] }));
         case 'loading':
-            return (_jsxs(_Fragment, { children: [_jsx(ChevronSlot, {}), _jsx(Spinner, { size: 12 }), _jsx("span", { className: "text-text-faint", children: t('explorer.loading') })] }));
+            return (_jsxs(_Fragment, { children: [_jsx(Tree.ChevronSlot, {}), _jsx(Spinner, { size: 12 }), _jsx("span", { className: "text-text-faint", children: t('explorer.loading') })] }));
         case 'error':
             return _jsx(ErrorContent, { row: row });
         case 'empty':
-            return (_jsxs(_Fragment, { children: [_jsx(ChevronSlot, {}), _jsx("span", { className: "text-text-faint", children: t(EMPTY_WORDS[row.of]) })] }));
+            return (_jsxs(_Fragment, { children: [_jsx(Tree.ChevronSlot, {}), _jsx("span", { className: "text-text-faint", children: t(EMPTY_WORDS[row.of]) })] }));
     }
 }
 const EMPTY_WORDS = { schemas: 'explorer.noSchemas', tables: 'explorer.noTables', columns: 'explorer.noColumns' };
-/* Where a chevron would be, so a row without one lines up with its siblings that have one. */
-function ChevronSlot() {
-    return _jsx("span", { className: "size-4 shrink-0" });
-}
-function Chevron({ open, onToggle }) {
-    return (_jsx("span", { className: "grid size-4 shrink-0 place-items-center text-text-muted", onClick: (e) => {
-            e.stopPropagation();
-            onToggle?.();
-        }, onDoubleClick: (e) => e.stopPropagation(), children: _jsx(Icon, { icon: ChevronRight, size: 12, className: clsx('transition-transform', open && 'rotate-90') }) }));
-}
 function SchemaCount({ shown, total }) {
     const { t } = useTranslation('database');
     const counts = { shown: formatNumber(shown), total: formatNumber(total) };
@@ -260,5 +245,5 @@ function ColumnIcon({ primaryKey, foreignKey }) {
 }
 function ErrorContent({ row }) {
     const { t } = useTranslation('database');
-    return (_jsxs(_Fragment, { children: [_jsx(ChevronSlot, {}), _jsx(Icon, { icon: CircleAlert, size: 16, className: "shrink-0 text-status-error" }), _jsx(Tooltip, { label: row.message, children: _jsx("span", { className: "min-w-0 truncate text-status-error", children: row.message }) }), _jsx(Button, { size: "xs", variant: "ghost", className: "ml-auto", tabIndex: -1, children: t('explorer.retry') })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Tree.ChevronSlot, {}), _jsx(Icon, { icon: CircleAlert, size: 16, className: "shrink-0 text-status-error" }), _jsx(Tooltip, { label: row.message, children: _jsx("span", { className: "min-w-0 truncate text-status-error", children: row.message }) }), _jsx(Button, { size: "xs", variant: "ghost", className: "ml-auto", tabIndex: -1, children: t('explorer.retry') })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/database",
-  "version": "0.16.0-beta.0",
+  "version": "0.17.0-beta.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": "MIT",
   "author": "Bas Milius",
@@ -61,13 +61,13 @@
     "lucide-react": "^1.47.0"
   },
   "optionalDependencies": {
-    "@adecore/database-darwin-arm64": "0.16.0-beta.0",
-    "@adecore/database-linux-arm64": "0.16.0-beta.0",
-    "@adecore/database-linux-x64": "0.16.0-beta.0",
-    "@adecore/database-win32-x64": "0.16.0-beta.0"
+    "@adecore/database-darwin-arm64": "0.17.0-beta.1",
+    "@adecore/database-linux-arm64": "0.17.0-beta.1",
+    "@adecore/database-linux-x64": "0.17.0-beta.1",
+    "@adecore/database-win32-x64": "0.17.0-beta.1"
   },
   "peerDependencies": {
-    "@adecore/ui": "^0.16.0-beta.0",
+    "@adecore/ui": "^0.17.0-beta.1",
     "i18next": "^26.4.2",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",

package/src/explorer/DatabaseExplorer.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useRef, useState, type KeyboardEvent, type ReactNode, type Ref } from 'react';
 import clsx from 'clsx';
-import { ChevronRight, CircleAlert, Database, Eye, Folder, KeyRound, Link2, Lock, RectangleVertical, Search, Table } from 'lucide-react';
+import { CircleAlert, Database, Eye, Folder, KeyRound, Link2, Lock, RectangleVertical, Search, Table } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { Button, ContextMenu, EmptyState, Icon, Input, Spinner, Tooltip } from '@adecore/ui';
+import { Button, ContextMenu, EmptyState, Icon, Input, Spinner, Tooltip, Tree } from '@adecore/ui';
 import { formatNumber } from '@adecore/ui/format';
 import type { ExplorerSelection } from '../actions.ts';
 import { useDatabaseAction, useDatabaseClient } from '../client-context.ts';
@@ -32,11 +32,6 @@ import { useExplorerLoads } from './use-explorer-loads.ts';
 import { usePopupPress } from '../use-popup-press.ts';
 import { useStoredExpansion } from './use-stored-expansion.ts';
 
-const INDENT = 16;
-/* Where the chevron slot of the first level starts inside a row. */
-const BASE_INDENT = 4;
-const CHEVRON_SIZE = 16;
-
 export interface DatabaseExplorerProps {
     connections: readonly Connection[];
     /* The selected connection, schema or table. Without it the explorer keeps the selection itself, starting at `defaultValue`. */
@@ -221,22 +216,17 @@ export function DatabaseExplorer({ connections, value, defaultValue = null, onVa
             ) : null;
         const selectedRow = isSelected(row);
         const props = {
-            role: 'treeitem',
-            'aria-level': row.level,
+            level: row.level,
+            selected: selectedRow,
+            joinedStart: selectedRow && isSelected(rows[index - 1]),
+            joinedEnd: selectedRow && isSelected(rows[index + 1]),
+            interactive: row.focusable,
             'aria-setsize': row.setSize,
             'aria-posinset': row.posInSet,
             'aria-expanded': isExpandable(row) ? row.expanded : undefined,
             'aria-selected': isSelectable(row) ? selectedRow : undefined,
             'aria-busy': row.kind === 'loading' ? true : undefined,
             tabIndex: row.focusable ? (row.key === stop ? 0 : -1) : undefined,
-            className: clsx(
-                // The line box is the row's height, so the text lands on whole pixels in a row of an odd height.
-                'focus-ring relative mx-2 flex h-[25px] min-w-0 items-center gap-1.5 rounded-md pr-2 text-xs leading-[25px] text-text focus-visible:-outline-offset-2',
-                selectedRow ? 'bg-surface-active' : row.focusable && 'hover:bg-surface-hover',
-                selectedRow && isSelected(rows[index - 1]) && 'rounded-t-none',
-                selectedRow && isSelected(rows[index + 1]) && 'rounded-b-none'
-            ),
-            style: { paddingInlineStart: BASE_INDENT + (row.level - 1) * INDENT },
             ref: (element: HTMLElement | null) => {
                 if (element === null) {
                     rowElements.current.delete(row.key);
@@ -252,29 +242,17 @@ export function DatabaseExplorer({ connections, value, defaultValue = null, onVa
                 }
             }
         };
-        const content = (
-            <>
-                {Array.from({ length: row.level - 1 }, (_, i) => (
-                    <span
-                        key={i}
-                        aria-hidden
-                        className="pointer-events-none absolute inset-y-0 w-px bg-border"
-                        style={{ insetInlineStart: BASE_INDENT + i * INDENT + CHEVRON_SIZE / 2 - 1 }}
-                    />
-                ))}
-                <RowContent row={row} onToggle={isExpandable(row) ? () => toggle(row) : undefined} />
-            </>
-        );
+        const content = <RowContent row={row} onToggle={isExpandable(row) ? () => toggle(row) : undefined} />;
         if (menu === null) {
             return (
-                <div key={row.key} {...props}>
+                <Tree.Row key={row.key} {...props}>
                     {content}
-                </div>
+                </Tree.Row>
             );
         }
         return (
             <ContextMenu.Root key={row.key}>
-                <ContextMenu.Trigger render={<div {...props} />}>{content}</ContextMenu.Trigger>
+                <ContextMenu.Trigger render={<Tree.Row {...props} />}>{content}</ContextMenu.Trigger>
                 <ContextMenu.Popup>{menu}</ContextMenu.Popup>
             </ContextMenu.Root>
         );
@@ -304,9 +282,9 @@ export function DatabaseExplorer({ connections, value, defaultValue = null, onVa
             ) : rows.length === 0 ? (
                 <EmptyState icon={Search}>{t('explorer.noMatches', { query: filter.trim() })}</EmptyState>
             ) : (
-                <div role="tree" aria-label={t('explorer.label')} className="min-h-0 grow overflow-y-auto py-2" onKeyDown={onKeyDown}>
+                <Tree.Root aria-label={t('explorer.label')} className="min-h-0 grow overflow-y-auto py-2" onKeyDown={onKeyDown}>
                     {rows.map(renderRow)}
-                </div>
+                </Tree.Root>
             )}
             {request !== null && <TableDialog request={request} onClose={() => setRequest(null)} onDone={finish} />}
         </div>
@@ -319,9 +297,9 @@ function RowContent({ row, onToggle }: { row: TreeRow; onToggle?: () => void })
         case 'connection':
             return (
                 <>
-                    <Chevron open={row.expanded} onToggle={onToggle} />
+                    <Tree.Chevron expanded={row.expanded} onExpandedChange={onToggle} />
                     <EngineIcon engine={row.connection.config.engine} size={16} className="shrink-0 text-text-muted" />
-                    <span className="min-w-0 truncate">{row.connection.name || t('connections.untitled')}</span>
+                    <Tree.Label>{row.connection.name || t('connections.untitled')}</Tree.Label>
                     {row.connection.config.readOnly === true && (
                         <Tooltip label={t('explorer.readOnly')}>
                             <span className="inline-flex shrink-0 text-text-faint">
@@ -336,41 +314,41 @@ function RowContent({ row, onToggle }: { row: TreeRow; onToggle?: () => void })
         case 'schema':
             return (
                 <>
-                    <Chevron open={row.expanded} onToggle={onToggle} />
+                    <Tree.Chevron expanded={row.expanded} onExpandedChange={onToggle} />
                     <Icon icon={Database} size={16} className="shrink-0 text-text-muted" />
-                    <span className="min-w-0 truncate">{row.schema}</span>
+                    <Tree.Label>{row.schema}</Tree.Label>
                 </>
             );
         case 'folder':
             return (
                 <>
-                    <Chevron open={row.expanded} onToggle={onToggle} />
+                    <Tree.Chevron expanded={row.expanded} onExpandedChange={onToggle} />
                     <Icon icon={Folder} size={16} className="shrink-0 text-text-muted" />
-                    <span className="min-w-0 truncate">{t(row.group === 'view' ? 'explorer.views' : 'explorer.tables')}</span>
+                    <Tree.Label>{t(row.group === 'view' ? 'explorer.views' : 'explorer.tables')}</Tree.Label>
                     <span className="shrink-0 text-text-faint tabular-nums">{formatNumber(row.count)}</span>
                 </>
             );
         case 'table':
             return (
                 <>
-                    <Chevron open={row.expanded} onToggle={onToggle} />
+                    <Tree.Chevron expanded={row.expanded} onExpandedChange={onToggle} />
                     <Icon icon={row.table.kind === 'view' ? Eye : Table} size={16} className="shrink-0 text-text-muted" />
-                    <span className="min-w-0 truncate">{row.table.name}</span>
+                    <Tree.Label>{row.table.name}</Tree.Label>
                 </>
             );
         case 'column':
             return (
                 <>
-                    <ChevronSlot />
+                    <Tree.ChevronSlot />
                     <ColumnIcon primaryKey={row.primaryKey} foreignKey={row.foreignKey} />
-                    <span className="min-w-0 truncate">{row.column.name}</span>
+                    <Tree.Label>{row.column.name}</Tree.Label>
                     {row.column.type !== '' && <span className="min-w-0 shrink-[2] truncate text-text-faint">{row.column.type}</span>}
                 </>
             );
         case 'loading':
             return (
                 <>
-                    <ChevronSlot />
+                    <Tree.ChevronSlot />
                     <Spinner size={12} />
                     <span className="text-text-faint">{t('explorer.loading')}</span>
                 </>
@@ -380,7 +358,7 @@ function RowContent({ row, onToggle }: { row: TreeRow; onToggle?: () => void })
         case 'empty':
             return (
                 <>
-                    <ChevronSlot />
+                    <Tree.ChevronSlot />
                     <span className="text-text-faint">{t(EMPTY_WORDS[row.of])}</span>
                 </>
             );
@@ -389,26 +367,6 @@ function RowContent({ row, onToggle }: { row: TreeRow; onToggle?: () => void })
 
 const EMPTY_WORDS = { schemas: 'explorer.noSchemas', tables: 'explorer.noTables', columns: 'explorer.noColumns' } as const;
 
-/* Where a chevron would be, so a row without one lines up with its siblings that have one. */
-function ChevronSlot() {
-    return <span className="size-4 shrink-0" />;
-}
-
-function Chevron({ open, onToggle }: { open: boolean; onToggle?: () => void }) {
-    return (
-        <span
-            className="grid size-4 shrink-0 place-items-center text-text-muted"
-            onClick={(e) => {
-                e.stopPropagation();
-                onToggle?.();
-            }}
-            onDoubleClick={(e) => e.stopPropagation()}
-        >
-            <Icon icon={ChevronRight} size={12} className={clsx('transition-transform', open && 'rotate-90')} />
-        </span>
-    );
-}
-
 function SchemaCount({ shown, total }: { shown: number; total: number }) {
     const { t } = useTranslation('database');
     const counts = { shown: formatNumber(shown), total: formatNumber(total) };
@@ -437,7 +395,7 @@ function ErrorContent({ row }: { row: ErrorRow }) {
     const { t } = useTranslation('database');
     return (
         <>
-            <ChevronSlot />
+            <Tree.ChevronSlot />
             <Icon icon={CircleAlert} size={16} className="shrink-0 text-status-error" />
             <Tooltip label={row.message}>
                 <span className="min-w-0 truncate text-status-error">{row.message}</span>