feat(db-manager): move the view toggle into the drawer header

The Data/Diagram toggle sat above the tree's search box, where it read as a
filter over the tree rather than a choice about the pane beside it. It now
sits with the manager's other header controls, left of the worker tag.

The mode moves with it: the drawer holds it and the manager is told which
view to show, clamping it for a database that has no diagram. Holding it
outside the key that remounts the manager also means picking another data
table or role no longer drops the user back into the data view.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MXECAKye6KgN13wznsuRzP

frontend/src/lib/components/DBManager.svelte

@@ -7,7 +7,6 @@
 		EditIcon,
 		Loader2,
 		Plus,
-		Network,
 		Table2,
 		Database as DatabaseIcon,
 		Folder as FolderIcon,
@@ -45,11 +44,8 @@
 	import { ADMIN_DATATABLE_ROLE, datatableNameTakesRole, type DatatableRowAction } from './dbTypes'
 	import TextInput from './text_input/TextInput.svelte'
 	import Checkbox from './common/checkbox/Checkbox.svelte'
-	import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte'
-	import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
 	import DbSchemaDiagram from './dbdiagram/DbSchemaDiagram.svelte'
 	import type { DbRelation } from './dbRelations'
-	import { logFeatureUsage } from '$lib/utils/featureUsage'
 
 	/** Represents a selected table with its schema */
 	export interface SelectedTable {
@@ -77,6 +73,11 @@
 	export type DbManagerViewMode = 'data' | 'diagram'
 
 	type Props = {
+		/** Which of the two views the right pane shows. Owned by whoever renders the
+		 * control that switches it; ignored for a database with no diagram. */
+		requestedViewMode?: DbManagerViewMode
+		/** Asked for from inside, e.g. opening a table from the diagram. */
+		onViewMode?: (mode: DbManagerViewMode) => void
 		/** Identifies the database this is connected to, stable across reloads of
 		 * it. A string rather than one of the objects read from it: those are
 		 * replaced as the manager re-reads, which says nothing about the database
@@ -129,6 +130,8 @@
 		onImport?: (mode: 'schema_and_data' | 'schema_only') => void
 	}
 	let {
+		requestedViewMode = 'data',
+		onViewMode,
 		databaseKey,
 		dbType,
 		dbSchema,
@@ -164,16 +167,14 @@
 	// cannot be renamed.
 	const SCHEMA_RENAME_DB_TYPES: DbType[] = ['postgresql', 'snowflake']
 
-	let requestedViewMode = $state<DbManagerViewMode>('data')
-
 	// PostgreSQL is the only database whose foreign keys can be read for the whole
 	// database in one query; the others would need one job per table. A caller
 	// already using the tree's checkboxes to collect tables keeps them.
 	let supportsDiagram = $derived(dbType === 'postgresql' && !multiSelectMode)
 
-	// The manager is not always remounted when the database under it changes, so a
-	// move away from PostgreSQL would otherwise leave the diagram on screen with no
-	// toggle left to leave it by.
+	// The mode is asked for from outside, where the control that sets it lives, so
+	// a database this manager cannot draw has to be clamped here rather than left
+	// showing a diagram with no control in reach to leave it by.
 	let viewMode = $derived(supportsDiagram ? requestedViewMode : 'data')
 
 	// Everything the diagram remembers, against the database it is about. The
@@ -875,18 +876,6 @@
 <Splitpanes>
 	<Pane size={28} class="relative flex flex-col">
 		<div class="mx-3 mt-3 flex flex-col gap-2">
-			{#if supportsDiagram}
-				<ToggleButtonGroup
-					bind:selected={requestedViewMode}
-					noWFull
-					onSelected={(v) => logFeatureUsage('db_manager', 'view_mode', { key: v })}
-				>
-					{#snippet children({ item })}
-						<ToggleButton value="data" label="Data" icon={Table2} {item} />
-						<ToggleButton value="diagram" label="Diagram" icon={Network} {item} />
-					{/snippet}
-				</ToggleButtonGroup>
-			{/if}
 			<TextInput bind:value={search} inputProps={{ placeholder: 'Search table or schema...' }} />
 		</div>
 		<div class="overflow-x-clip overflow-y-auto relative mt-1.5 flex-1">
@@ -1177,7 +1166,7 @@
 				loading={relations.loading}
 				error={relationsError}
 				onOpenTable={({ schema, table }) => {
-					requestedViewMode = 'data'
+					onViewMode?.('data')
 					selectTable(currentDatatable, schema, table)
 				}}
 			/>

frontend/src/lib/components/DBManagerContent.svelte

@@ -27,7 +27,7 @@
 	import { schemaCacheKey } from './dbSchemaCache'
 	import { getDbSchemas, loadAllTablesMetaData } from './apps/components/display/dbtable/metadata'
 
-	import type { PendingRowAction, SelectedTable } from './DBManager.svelte'
+	import type { DbManagerViewMode, PendingRowAction, SelectedTable } from './DBManager.svelte'
 	import { getDbFeatures } from './apps/components/display/dbtable/dbFeatures'
 	import { resource } from 'runed'
 	import ConfirmationModal from './common/confirmationModal/ConfirmationModal.svelte'
@@ -64,6 +64,9 @@
 		/** Worker tag every job of this manager runs on, overriding the database
 		 *  language's native tag. Bound so the hints below can offer to set it. */
 		workerTag?: string
+		/** Which view the right pane shows, set by the control the caller renders. */
+		requestedViewMode?: DbManagerViewMode
+		onViewMode?: (mode: DbManagerViewMode) => void
 	}
 
 	let {
@@ -84,7 +87,9 @@
 		disabledTables = [],
 		onImport,
 		workspace = undefined,
-		workerTag = $bindable()
+		workerTag = $bindable(),
+		requestedViewMode,
+		onViewMode
 	}: Props = $props()
 
 	let ws = $derived(workspace ?? $workspaceStore)
@@ -302,6 +307,8 @@
 				{/if}
 			</div>
 			<DbManager
+				{requestedViewMode}
+				{onViewMode}
 				databaseKey={schemaCacheKey(ws, _input)}
 				dbSupportsSchemas={dbSupportsSchemas(dbType)}
 				databaseIsEmpty={!loadError &&

frontend/src/lib/components/DBManagerDrawer.svelte

@@ -6,9 +6,23 @@
 	import Drawer from './common/drawer/Drawer.svelte'
 	import DrawerContent from './common/drawer/DrawerContent.svelte'
 	import Select from './select/Select.svelte'
-	import { ArrowLeft, Copy, Download, Expand, Minimize, RefreshCcw, Upload } from 'lucide-svelte'
+	import {
+		ArrowLeft,
+		Copy,
+		Download,
+		Expand,
+		Minimize,
+		Network,
+		RefreshCcw,
+		Table2,
+		Upload
+	} from 'lucide-svelte'
 	import DBManagerContent from './DBManagerContent.svelte'
-	import type { PendingRowAction } from './DBManager.svelte'
+	import type { DbManagerViewMode, PendingRowAction } from './DBManager.svelte'
+	import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte'
+	import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
+	import { logFeatureUsage } from '$lib/utils/featureUsage'
+	import { getDbType } from './dbOps'
 	import DataTableMigrationsButton from './workspaceSettings/DataTableMigrationsButton.svelte'
 	import DataTablePermissionsButton from './workspaceSettings/DataTablePermissionsButton.svelte'
 	import { resource } from 'runed'
@@ -177,6 +191,16 @@
 
 	let hasReplResult = $state(false)
 
+	// Which view the manager shows. Held here, beside the control that switches it
+	// and outside the key that remounts the manager, so picking another data table
+	// or role stays on the view the user was reading.
+	let requestedViewMode = $state<DbManagerViewMode>('data')
+	// Only PostgreSQL has a diagram; the manager clamps the mode itself, and this
+	// keeps the control off the header for a database that cannot show one.
+	let diagramSupported = $derived(
+		!!uriState.effectiveInput && getDbType(uriState.effectiveInput) === 'postgresql'
+	)
+
 	// Export/Import state
 	let exportDrawerOpen = $state(false)
 	let exportResult = $state('')
@@ -311,6 +335,8 @@
 			{#key `${selectedDatatable}~${selectedRole ?? ''}`}
 				<DBManagerContent
 					bind:this={dbManagerContent}
+					{requestedViewMode}
+					onViewMode={(mode) => (requestedViewMode = mode)}
 					input={contentInput}
 					workspace={uriState.workspace}
 					datatableTree={uriState.isDatatableInput ? datatables.current : undefined}
@@ -352,6 +378,18 @@
 					Import
 				</Button>
 			{/if}
+			{#if diagramSupported}
+				<ToggleButtonGroup
+					bind:selected={requestedViewMode}
+					noWFull
+					onSelected={(v) => logFeatureUsage('db_manager', 'view_mode', { key: v })}
+				>
+					{#snippet children({ item })}
+						<ToggleButton value="data" label="Data" icon={Table2} {item} />
+						<ToggleButton value="diagram" label="Diagram" icon={Network} {item} />
+					{/snippet}
+				</ToggleButtonGroup>
+			{/if}
 			{#if uriState.effectiveInput && ws}
 				<DbWorkerTagButton
 					bind:tag={() => workerTag.tag, (v) => (workerTag.tag = v)}