@antelopejs/dms-database 0.1.2 → 0.2.0

package/README.md

@@ -25,7 +25,7 @@ instance, `all` for every instance, otherwise the instance's name.
 - **Query console**: AQL with completion of the workspace's schemas, a library of past, saved and
   shared queries, and a dry run before any query that changes data.
 
-The module requires `@antelopejs/dms` 0.7.2 or later and `@antelopejs/dms-frontend` 0.5.2.
+The module requires `@antelopejs/dms` 0.9 (`@antelopejs/interface-dms` 0.7) and `@antelopejs/dms-frontend` 0.6.
 
 ## Installation
 

package/frontend-vue/app/build/composables/useDataBrowserGrid.ts

@@ -1,7 +1,7 @@
 import { type BrowserTab, DEFAULT_INSTANCE_VALUE } from './useDataBrowserTabs'
-// Per-tab grid state (paging, sort, filters, column widths) and a data cache
-// so switching tabs restores instantly without a refetch. Keyed by
-// BrowserTab.id.
+// Per-tab grid state (paging, sort, filters, column widths), keyed by
+// BrowserTab.id. The rows themselves are `useApiData`'s: a tab switched back
+// to shows its last page at once and reads it again.
 
 export interface ColumnFilterState {
 	mode: 'is' | 'contains'
@@ -31,9 +31,6 @@ export interface GridData {
 	rows: Record<string, unknown>[]
 	total: number
 	primaryKey: string | null
-	// Serialised query parameters that produced this payload; lets the grid
-	// skip refetching when nothing changed.
-	paramsKey: string
 }
 
 export const GRID_PAGE_SIZES = [25, 50, 100, 200]
@@ -55,32 +52,15 @@ export function useDataBrowserGrid() {
 		'dms-database-grid-states',
 		() => ({}),
 	)
-	const cache = useDmsState<Record<string, GridData>>(
-		'dms-database-grid-cache',
-		() => ({}),
-	)
 
 	function getState(tabId: string): GridState {
 		if (!states.value[tabId]) states.value[tabId] = defaultGridState()
 		return states.value[tabId]
 	}
 
-	function getCache(tabId: string): GridData | null {
-		return cache.value[tabId] ?? null
-	}
-
-	function setCache(tabId: string, data: GridData) {
-		cache.value[tabId] = data
-	}
-
-	function invalidate(tabId: string) {
-		Reflect.deleteProperty(cache.value, tabId)
-	}
-
 	// Forget everything about a closed tab.
 	function drop(tabId: string) {
 		Reflect.deleteProperty(states.value, tabId)
-		Reflect.deleteProperty(cache.value, tabId)
 	}
 
 	// A tab switched to another instance keeps what the user narrowed the
@@ -94,10 +74,9 @@ export function useDataBrowserGrid() {
 			columnWidths: { ...from.columnWidths },
 			page: 0,
 		}
-		Reflect.deleteProperty(cache.value, toId)
 	}
 
-	return { getState, getCache, setCache, invalidate, drop, carry }
+	return { getState, drop, carry }
 }
 
 // --- query helpers shared by the grid ---
@@ -162,16 +141,3 @@ export function browseListQuery(
 	}
 	return query
 }
-
-// Everything that changes the server payload (column widths deliberately not).
-export function browseParamsKey(tab: BrowserTab, state: GridState): string {
-	return JSON.stringify([
-		tab.id,
-		state.page,
-		state.pageSize,
-		state.sortKey,
-		state.sortDirection,
-		state.search,
-		activeFilterEntries(state),
-	])
-}

package/frontend-vue/app/build/composables/useDatabaseHealth.ts

@@ -34,11 +34,14 @@ const EMPTY_HEALTH: OverviewHealth = {
 	storage: [],
 }
 
-export function useDatabaseHealth() {
-	const { useFetchAuth } = useAuthFetch()
-	const { data, pending, error, refresh } = useFetchAuth<OverviewHealth>(
+/** `refreshInterval` probes again on that interval while the page shows it. */
+export function useDatabaseHealth(options: { refreshInterval?: number } = {}) {
+	const { data, pending, error, refresh } = useApiData<OverviewHealth>(
 		HEALTH_ENDPOINT,
-		{ default: () => ({ ...EMPTY_HEALTH }) },
+		{
+			default: () => ({ ...EMPTY_HEALTH }),
+			refreshInterval: options.refreshInterval,
+		},
 	)
 
 	return {

package/frontend-vue/app/build/composables/useDatabaseSchemas.ts

@@ -110,8 +110,7 @@ export function inboundRelationsIn(
 }
 
 export function useDatabaseSchemas() {
-	const { useFetchAuth } = useAuthFetch()
-	const { data, pending, error, status, refresh } = useFetchAuth<{
+	const { data, pending, error, status, refresh } = useApiData<{
 		schemas: SchemaSummary[]
 	}>(SCHEMAS_ENDPOINT, { default: () => EMPTY_SCHEMAS })
 

package/frontend-vue/app/build/composables/useDiagramPersistence.ts

@@ -32,6 +32,13 @@ export type DiagramNoteUpdate = Partial<
 	Pick<DiagramNote, 'text' | 'x' | 'y' | 'width' | 'height' | 'color'>
 >
 
+/** A schema's diagram as stored: its layout and its notes. */
+export interface StoredDiagram {
+	schema: string
+	positions: DiagramPositions
+	notes: DiagramNote[]
+}
+
 const BASE = '/api/database/diagram'
 // A request that hangs fails after this (ofetch's own `timeout`), so the
 // canvas shows the error and its "Try again" instead of "Saving…" forever.
@@ -40,12 +47,47 @@ const REQUEST_TIMEOUT_MS = 15_000
 export function useDiagramPersistence() {
 	const { $authFetch } = useAuthFetch()
 
-	async function fetchLayout(schema: string): Promise<DiagramPositions> {
-		const res = await $authFetch<{ positions: DiagramPositions }>(
-			`${BASE}/layout/${encodeURIComponent(schema)}`,
-			{ timeout: REQUEST_TIMEOUT_MS },
-		)
-		return res.positions ?? {}
+	// The schema whose diagram is read: in the browser only, when the canvas
+	// asks, since it draws and edits a working copy of it.
+	const readSchema = shallowRef<string | null>(null)
+	const stored = useApiData<StoredDiagram>(
+		() =>
+			readSchema.value ? `dms-database:diagram:${readSchema.value}` : null,
+		async ({ $authFetch: read, signal }) => {
+			const schema = readSchema.value as string
+			const [layout, notes] = await Promise.all([
+				read<{ positions: DiagramPositions }>(
+					`${BASE}/layout/${encodeURIComponent(schema)}`,
+					{ timeout: REQUEST_TIMEOUT_MS, signal },
+				),
+				read<{ items: DiagramNote[] }>(`${BASE}/notes`, {
+					query: { schema },
+					timeout: REQUEST_TIMEOUT_MS,
+					signal,
+				}),
+			])
+			return {
+				schema,
+				positions: layout.positions ?? {},
+				notes: notes.items ?? [],
+			}
+		},
+		{
+			immediate: false,
+			server: false,
+			watch: false,
+			refreshOnPageRefresh: false,
+		},
+	)
+
+	/** Reads a schema's layout and notes; throws when they cannot be read. */
+	async function readDiagram(schema: string): Promise<StoredDiagram> {
+		readSchema.value = schema
+		await stored.execute()
+		const diagram = stored.data.value
+		if (stored.error.value || diagram?.schema !== schema)
+			throw stored.error.value ?? new Error('Diagram not read')
+		return diagram
 	}
 
 	async function saveLayout(
@@ -62,14 +104,6 @@ export function useDiagramPersistence() {
 		)
 	}
 
-	async function fetchNotes(schema: string): Promise<DiagramNote[]> {
-		const res = await $authFetch<{ items: DiagramNote[] }>(`${BASE}/notes`, {
-			query: { schema },
-			timeout: REQUEST_TIMEOUT_MS,
-		})
-		return res.items ?? []
-	}
-
 	async function createNote(payload: DiagramNoteCreate): Promise<DiagramNote> {
 		return $authFetch<DiagramNote>(`${BASE}/notes`, {
 			method: 'POST',
@@ -97,9 +131,8 @@ export function useDiagramPersistence() {
 	}
 
 	return {
-		fetchLayout,
+		readDiagram,
 		saveLayout,
-		fetchNotes,
 		createNote,
 		updateNote,
 		deleteNote,

package/frontend-vue/app/build/composables/useQueryStore.ts

@@ -1,5 +1,4 @@
 export type QueryLanguage = 'aql'
-export type QueryScope = 'me' | 'shared'
 
 export interface SavedQuery {
 	id: string
@@ -68,31 +67,61 @@ import { HISTORY_KEPT } from '../query/runs'
 
 const QUERY_BASE = '/api/database/query'
 
+/**
+ * The query console's library and requests. The library (the caller's saved
+ * queries, the team's shared ones, the runs the server keeps) is read as the
+ * console sets up: a server render reads it and hands it over with the page.
+ * Every write is a request of its own, after which the console refreshes
+ * the part of the library it changed.
+ */
 export function useQueryStore() {
 	const { $authFetch } = useAuthFetch()
 
-	const savedQueries = ref<SavedQuery[]>([])
-	const historyItems = ref<HistoryEntry[]>([])
-
-	async function fetchSaved(scope: QueryScope): Promise<void> {
-		const response = await $authFetch<{ items: SavedQuery[] }>(
-			`${QUERY_BASE}/saved`,
-			{ query: { scope } },
-		)
-		savedQueries.value = response.items ?? []
+	const saved = useApiData<{ items: SavedQuery[] }>(`${QUERY_BASE}/saved`, {
+		query: { scope: 'me' },
+	})
+	const shared = useApiData<{ items: SavedQuery[] }>(`${QUERY_BASE}/saved`, {
+		query: { scope: 'shared' },
+	})
+	const history = useApiData<{ items: HistoryEntry[] }>(
+		`${QUERY_BASE}/history`,
+		{ query: { limit: HISTORY_KEPT } },
+	)
+	const reads = [saved, shared, history]
+
+	/** The saved queries and the shared ones, read again. */
+	async function refreshSaved(): Promise<void> {
+		await Promise.all([saved.refresh(), shared.refresh()])
 	}
 
+	// A run a link names (`?history=`), read when the console opens it.
+	const entryId = shallowRef<string | null>(null)
+	const entry = useApiData<HistoryEntry>(
+		() =>
+			entryId.value
+				? `${QUERY_BASE}/history/${encodeURIComponent(entryId.value)}`
+				: null,
+		{
+			immediate: false,
+			server: false,
+			watch: false,
+			refreshOnPageRefresh: false,
+		},
+	)
+
 	async function fetchHistoryEntry(id: string): Promise<HistoryEntry> {
-		return $authFetch<HistoryEntry>(
-			`${QUERY_BASE}/history/${encodeURIComponent(id)}`,
-		)
+		entryId.value = id
+		await entry.execute()
+		if (entry.error.value || !entry.data.value)
+			throw entry.error.value ?? new Error('History entry not read')
+		return entry.data.value
 	}
 
 	async function clearHistory(): Promise<void> {
 		await $authFetch<{ success: boolean }>(`${QUERY_BASE}/history`, {
 			method: 'DELETE',
 		})
-		historyItems.value = []
+		history.data.value = { items: [] }
 	}
 
 	async function dryRun(query: Record<string, unknown>): Promise<DryRunResult> {
@@ -102,15 +131,6 @@ export function useQueryStore() {
 		})
 	}
 
-	/** Every run the server keeps, at once. */
-	async function fetchHistory(): Promise<void> {
-		const response = await $authFetch<{ items: HistoryEntry[] }>(
-			`${QUERY_BASE}/history`,
-			{ query: { limit: HISTORY_KEPT } },
-		)
-		historyItems.value = response.items ?? []
-	}
-
 	async function executeQuery(
 		query: Record<string, unknown>,
 		source: string,
@@ -147,10 +167,22 @@ export function useQueryStore() {
 	}
 
 	return {
-		savedQueries,
-		historyItems,
-		fetchSaved,
-		fetchHistory,
+		/** The caller's saved queries. A failed refresh keeps the last list. */
+		savedQueries: computed(() => saved.data.value?.items ?? []),
+		/** The queries shared with the team, the caller's own included. */
+		sharedQueries: computed(() => shared.data.value?.items ?? []),
+		/** Every run the server keeps, newest first. */
+		historyItems: computed(() => history.data.value?.items ?? []),
+		/** The library's first read is still running. */
+		libraryLoading: computed(() =>
+			reads.some(
+				(read) => read.data.value === null && read.status.value !== 'error',
+			),
+		),
+		/** Settles once the library's first read did, failed or not. */
+		libraryRead: Promise.all(reads).then(() => undefined),
+		refreshSaved,
+		refreshHistory: () => history.refresh(),
 		fetchHistoryEntry,
 		clearHistory,
 		dryRun,

package/frontend-vue/app/build/composables/useTableCounts.ts

@@ -0,0 +1,50 @@
+import type { Ref } from 'vue'
+import { isFilterToken } from './useDataBrowserGrid'
+import { DEFAULT_INSTANCE_VALUE } from './useDataBrowserTabs'
+
+const TABLES_ENDPOINT = '/api/database/browse/tables'
+
+interface TableEntry {
+	name: string
+	elementCount: number
+}
+
+/**
+ * The rows of each table of a schema in one instance, for the data browser's
+ * table list. A server render reads them and hands them over with the page;
+ * another schema or instance is read once picked. No count shows while they
+ * load, nor once they failed: `failed` says so.
+ */
+export function useTableCounts(
+	schema: Ref<string | null>,
+	instance: Ref<string>,
+) {
+	const { data, status } = useApiData<{ items: TableEntry[] }>(
+		() => (schema.value ? TABLES_ENDPOINT : null),
+		{
+			query: () => {
+				const query: Record<string, string> = {
+					filter_schema: isFilterToken(schema.value ?? ''),
+				}
+				if (instance.value !== DEFAULT_INSTANCE_VALUE)
+					query.filter_instance = isFilterToken(instance.value)
+				return query
+			},
+		},
+	)
+
+	return {
+		/** Rows by table name. */
+		counts: computed<Record<string, number>>(() =>
+			status.value === 'success'
+				? Object.fromEntries(
+						(data.value?.items ?? []).map((item) => [
+							item.name,
+							item.elementCount,
+						]),
+					)
+				: {},
+		),
+		failed: computed(() => status.value === 'error'),
+	}
+}

package/frontend-vue/app/build/query/runs.ts

@@ -33,19 +33,20 @@ export interface DayGroup<T> {
 	items: T[]
 }
 
-function dayKey(date: Date): string {
-	return `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`
-}
-
-/** Entries by local calendar day, newest day first, in their given order. */
+/**
+ * Entries by calendar day, newest day first, in their given order. `dayOf`
+ * names a date's day: the reader's (`regionalDayKey`), so that a server
+ * render groups as the browser does.
+ */
 export function groupByDay<T>(
 	entries: T[],
 	dateOf: (entry: T) => string,
+	dayOf: (date: Date) => string,
 ): DayGroup<T>[] {
 	const groups = new Map<string, DayGroup<T>>()
 	for (const entry of entries) {
 		const date = new Date(dateOf(entry))
-		const key = dayKey(date)
+		const key = dayOf(date)
 		const group = groups.get(key) ?? { key, date, items: [] }
 		group.items.push(entry)
 		groups.set(key, group)
@@ -53,27 +54,6 @@ export function groupByDay<T>(
 	return [...groups.values()]
 }
 
-const DAY_MS = 86_400_000
-
-/** "Today", "Yesterday" or the date, in the interface language. */
-export function dayLabel(
-	date: Date,
-	locale: string,
-	words: { today: string; yesterday: string },
-): string {
-	const today = new Date()
-	today.setHours(0, 0, 0, 0)
-	const day = new Date(date)
-	day.setHours(0, 0, 0, 0)
-	const days = Math.round((today.getTime() - day.getTime()) / DAY_MS)
-	if (days === 0) return words.today
-	if (days === 1) return words.yesterday
-	return new Intl.DateTimeFormat(locale, {
-		day: 'numeric',
-		month: 'short',
-	}).format(date)
-}
-
 export type UnknownKind = 'schema' | 'instance' | 'table'
 
 /** A name a query used that its schema does not know. */

package/frontend-vue/app/build/schemas/useSchemasListing.ts

@@ -1,4 +1,4 @@
-import { computed, ref, watch } from 'vue'
+import { computed } from 'vue'
 import {
 	readFilterState,
 	sourceQuery,
@@ -16,47 +16,24 @@ interface SourceResponse {
 	all?: number
 }
 
-type ListingStatus = 'idle' | 'pending' | 'success' | 'error'
-
 export function useSchemasListing() {
 	const route = useDmsRoute()
-	const { $authFetch } = useAuthFetch()
 	const state = computed<SchemasFilterState>(() => readFilterState(route.query))
-	const query = computed(() => sourceQuery(state.value))
-
-	// The counts of the last answer stay while the next one loads.
-	const total = ref(0)
-	const all = ref<number | null>(null)
-	const status = ref<ListingStatus>('idle')
-	let latest = 0
 
-	async function load() {
-		const request = ++latest
-		status.value = 'pending'
-		try {
-			const response = await $authFetch<SourceResponse>(TABLES_SOURCE, {
-				query: query.value,
-			})
-			if (request !== latest) return
-			total.value = response.total
-			all.value = response.all ?? null
-			status.value = 'success'
-		} catch {
-			if (request === latest) status.value = 'error'
-		}
-	}
-
-	// In the browser only: the server renders no count.
-	if (typeof window !== 'undefined') {
-		watch(() => JSON.stringify(query.value), load, { immediate: true })
-	}
+	// Rendered on the server and handed over, the counts only (not the rows
+	// the route lists); the counts of the last answer stay while the next one
+	// loads.
+	const { data, status } = useApiData<SourceResponse>(TABLES_SOURCE, {
+		query: () => sourceQuery(state.value),
+		pick: ['total', 'all'],
+	})
 
 	return {
 		state,
 		/** Tables the bar's filters list. */
-		total,
+		total: computed(() => data.value?.total ?? 0),
 		/** Registered tables before any filter; null until known. */
-		all,
+		all: computed(() => data.value?.all ?? null),
 		status,
 	}
 }

package/frontend-vue/app/components/ConnectionStatus.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useDatabaseHealth } from '../build/composables/useDatabaseHealth'
-import { useIntervalFn, useNow } from '@vueuse/core'
+import { useNow } from '@vueuse/core'
 
 // The overview's health hero: whether the database answers, how fast, and
 // what it holds. The probe runs again every PROBE_INTERVAL_MS while the page
@@ -10,10 +10,16 @@ const SECOND_MS = 1000
 const MINUTE_S = 60
 
 const { t, n, locale } = useI18n()
-const { health, isLoading, error, refresh } = useDatabaseHealth()
-const now = useNow({ interval: SECOND_MS })
-
-useIntervalFn(() => refresh(), PROBE_INTERVAL_MS)
+const { health, isLoading, error, refresh } = useDatabaseHealth({
+	refreshInterval: PROBE_INTERVAL_MS,
+})
+const clock = useNow({ interval: SECOND_MS })
+// The probe's own time until the page is mounted: the server renders the age
+// a few seconds before the browser hydrates it, and both must write the same.
+const mounted = ref(false)
+onMounted(() => {
+	mounted.value = true
+})
 
 // A failed health request is a lost connection too: the route answers
 // whenever the backend is up.
@@ -24,12 +30,9 @@ const isDown = computed(
 const checkedAgo = computed(() => {
 	const checkedAt = health.value.checkedAt
 	if (!checkedAt) return ''
-	const seconds = Math.max(
-		0,
-		Math.round(
-			(now.value.getTime() - new Date(checkedAt).getTime()) / SECOND_MS,
-		),
-	)
+	const checked = new Date(checkedAt).getTime()
+	const now = mounted.value ? clock.value.getTime() : checked
+	const seconds = Math.max(0, Math.round((now - checked) / SECOND_MS))
 	return seconds < MINUTE_S
 		? t('dms_database.overview.connection.checked_seconds', { count: seconds })
 		: t('dms_database.overview.connection.checked_minutes', {

package/frontend-vue/app/components/DataBrowserSidebar.vue

@@ -6,10 +6,11 @@ import {
 	tabInstanceOf,
 	useDataBrowserTabs,
 } from '../build/composables/useDataBrowserTabs'
-import { isFilterToken } from '../build/composables/useDataBrowserGrid'
+import { useTableCounts } from '../build/composables/useTableCounts'
 import type { InstanceChoice } from '../build/data/instanceOptions'
 import { onKeyStroke } from '@vueuse/core'
 import type { SchemaSummary } from '../build/composables/useDatabaseSchemas'
+import { instanceFromUrl } from '../build/utils/databaseLinks'
 import InstancePicker from './InstancePicker.vue'
 import SchemaPicker from './SchemaPicker.vue'
 
@@ -20,13 +21,6 @@ import SchemaPicker from './SchemaPicker.vue'
 // table open in a tab carries a hollow ring, the active one included: the
 // fill of the row says which is shown.
 
-const TABLES_ENDPOINT = '/api/database/browse/tables'
-
-interface TableEntry {
-	name: string
-	elementCount: number
-}
-
 const props = defineProps<{
 	schemas: SchemaSummary[]
 	/** The schema list is being read. */
@@ -38,7 +32,6 @@ const props = defineProps<{
 const emit = defineEmits<{ retry: [] }>()
 
 const { t, n } = useI18n()
-const { $authFetch } = useAuthFetch()
 const { tabs, activeId, activeTab, activations, openTab } = useDataBrowserTabs()
 const route = useDmsRoute()
 
@@ -49,13 +42,17 @@ const filterInput = useTemplateRef<{ inputRef?: HTMLInputElement }>(
 	'filterInput',
 )
 
-// A schema-only link (?schema=X with no table) picks the schema; otherwise
-// the active tab leads, then the first schema. A schema or instance picked
-// here holds until the user goes to a tab (another one, or the same again).
+// The schema a link names (?schema=X) leads, else the first one; once a tab
+// is active, it leads. A table link (?schema=X&table=Y) opens its tab once
+// mounted, in the instance it names: that scope is shown from the start, so
+// the server renders the counts the browser keeps. A schema or instance
+// picked here holds until the user goes to a tab (another one, or the same
+// again).
 const linkedSchema =
-	typeof route.query.schema === 'string' && !route.query.table
-		? route.query.schema
-		: null
+	typeof route.query.schema === 'string' ? route.query.schema : null
+const linkedInstance = route.query.table
+	? tabInstanceOf(instanceFromUrl(route.query.instance))
+	: DEFAULT_INSTANCE_VALUE
 
 watch(
 	[activeId, activations],
@@ -74,6 +71,7 @@ watch(
 		if (schemaId.value || list.length === 0) return
 		const linked = list.find((schema) => schema.id === linkedSchema)
 		schemaId.value = linked?.id ?? list[0]?.id ?? null
+		if (linked) instance.value = linkedInstance
 	},
 	{ immediate: true },
 )
@@ -111,32 +109,7 @@ const instanceName = computed(() => {
 })
 
 // --- tables and their counts in the picked instance ---
-const counts = ref<Record<string, number>>({})
-const countsFailed = ref(false)
-
-watch(
-	[schemaId, instance],
-	async ([id, picked]) => {
-		counts.value = {}
-		countsFailed.value = false
-		if (!id) return
-		const query: Record<string, string> = { filter_schema: isFilterToken(id) }
-		if (picked !== DEFAULT_INSTANCE_VALUE)
-			query.filter_instance = isFilterToken(picked)
-		try {
-			const res = await $authFetch<{ items: TableEntry[] }>(TABLES_ENDPOINT, {
-				query,
-			})
-			if (schemaId.value !== id || instance.value !== picked) return
-			counts.value = Object.fromEntries(
-				res.items.map((item) => [item.name, item.elementCount]),
-			)
-		} catch {
-			if (schemaId.value === id) countsFailed.value = true
-		}
-	},
-	{ immediate: true },
-)
+const { counts, failed: countsFailed } = useTableCounts(schemaId, instance)
 
 const openIds = computed(() => new Set(tabs.value.map((tab) => tab.id)))
 
@@ -327,7 +300,12 @@ onKeyStroke('t', (event) => {
 			<span v-if="countsFailed">
 				{{ t('dms_database.data.scope.counts_failed') }}
 			</span>
-			<i18n-t v-else keypath="dms_database.data.scope.counts_for" tag="span">
+			<i18n-t
+				v-else
+				keypath="dms_database.data.scope.counts_for"
+				tag="span"
+				scope="global"
+			>
 				<template #instance>
 					<span class="text-primary font-mono">{{ instanceName }}</span>
 				</template>

package/frontend-vue/app/components/DataBrowserTabBar.vue

@@ -248,7 +248,7 @@ async function close(tab: BrowserTab) {
 			v-if="hasPreview"
 			class="text-dimmed hidden shrink-0 self-center whitespace-nowrap px-3 pb-1 pt-1.5 text-[11px] lg:inline"
 		>
-			<i18n-t keypath="dms_database.data.tabs.hint" tag="span">
+			<i18n-t keypath="dms_database.data.tabs.hint" tag="span" scope="global">
 				<template #italic>
 					<em>{{ t('dms_database.data.tabs.italic') }}</em>
 				</template>