AcadeDoc/apps/client/src/features/acadenice/database-view/extension/database-view.module.css
Corentin 71c2abad8a feat(client): add database-view Tiptap extension for R3.1.c
- Tiptap Node extension (database-view) with attrs tableId/viewId/viewType/bridgeUrl
- NodeViewWrapper dispatches on viewType: grid/table -> TableRenderer, other -> PlaceholderRenderer
- TableRenderer (HTML table, TanStack Table v8 migration-ready - dep not yet installed)
- InsertDatabaseModal (Mantine, 2-step: table -> view selection)
- useDatabaseRealtimeUpdates SSE hook (EventSource + exponential backoff + React Query invalidation)
- bridge-client.ts (axios wrapper, per-origin singleton, cookie Bearer passthrough)
- Slash command /database registered in menu-items CommandGroups
- DatabaseViewExtension wired in mainExtensions array
- i18n: 22 keys added in en-US and fr-FR
- 41 Vitest tests across 5 suites (extension schema, component dispatch, renderer states, modal steps, SSE hook)

Upstream patches: extensions.ts (+2 lines), menu-items.ts (+4 lines), 2 translation files

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-08 00:07:33 +02:00

67 lines
1.5 KiB
CSS

.wrapper {
border: 1px solid var(--mantine-color-gray-3);
border-radius: var(--mantine-radius-sm);
overflow: hidden;
margin: 4px 0;
transition: border-color 100ms ease;
background-color: var(--mantine-color-white);
}
[data-mantine-color-scheme="dark"] .wrapper {
border-color: var(--mantine-color-dark-4);
background-color: var(--mantine-color-dark-7);
}
.wrapper:hover {
border-color: var(--mantine-color-gray-4);
}
[data-mantine-color-scheme="dark"] .wrapper:hover {
border-color: var(--mantine-color-dark-3);
}
/* ProseMirror node selection state */
.wrapper.selected {
border-color: var(--mantine-color-blue-5);
box-shadow: 0 0 0 2px var(--mantine-color-blue-2);
outline: none;
}
[data-mantine-color-scheme="dark"] .wrapper.selected {
border-color: var(--mantine-color-blue-4);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--mantine-color-blue-4) 30%, transparent);
}
.header {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-bottom: 1px solid var(--mantine-color-gray-2);
background-color: var(--mantine-color-gray-0);
font-size: var(--mantine-font-size-xs);
color: var(--mantine-color-gray-6);
font-weight: 500;
}
[data-mantine-color-scheme="dark"] .header {
border-bottom-color: var(--mantine-color-dark-5);
background-color: var(--mantine-color-dark-6);
color: var(--mantine-color-dark-2);
}
.headerIcon {
flex-shrink: 0;
color: var(--mantine-color-gray-5);
}
.headerTitle {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.content {
padding: 0;
}