mongoku 2.0.4 → 2.1.0

package/src/lib/components/JsonValue.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
+	import { resolve } from "$app/paths";
+	import type { MongoDocument } from "$lib/types";
 	import JsonValue from "./JsonValue.svelte";
+	import Tooltip from "./Tooltip.svelte";
 
 	const INDENT = "    ";
 
@@ -12,14 +15,27 @@
 		/** is it collapsed at top level */
 		collapsed?: boolean;
 		depth?: number;
-		localTopLevel?: boolean;
+		/** Function to check if a key path has a mapping */
+		isKeyMapped?: (path: string) => boolean;
+		/** Function to fetch a mapped document and get its URL */
+		fetchMappedDocument?: (
+			path: string,
+			value: unknown,
+		) => Promise<{ document: MongoDocument | null; url: string | null; collection: string | null }>;
+		/** full path to current key (e.g., "user.address.city") */
+		keyPath?: string;
 	}
 
-	let { value, key, autoCollapse = false, collapsed = false, localTopLevel = true, depth = 0 }: Props = $props();
-
-	function toggleCollapse() {
-		collapsed = !collapsed;
-	}
+	let {
+		value,
+		key,
+		autoCollapse = false,
+		collapsed = false,
+		depth = 0,
+		isKeyMapped,
+		fetchMappedDocument,
+		keyPath = "",
+	}: Props = $props();
 
 	function getIndent(level: number): string {
 		return INDENT.repeat(level);
@@ -29,6 +45,49 @@
 		return /^https?:\/\/[^\s]+$/.test(str);
 	}
 
+	// Mapping-related state and functions
+	let showTooltip = $state(false);
+	let fetchedDocument = $state<MongoDocument | null>(null);
+	let fetchedUrl = $state<string | null>(null);
+	let fetchedCollection = $state<string | null>(null);
+	let isFetching = $state(false);
+	let fetchError = $state<string | null>(null);
+
+	// Check if current key has a mapping
+	const currentKeyPath = $derived([keyPath, key].filter(Boolean).join("."));
+
+	async function handleMouseEnter() {
+		if (!hasMappings || !fetchMappedDocument) return;
+
+		showTooltip = true;
+
+		// If already fetched, don't fetch again
+		if (fetchedDocument || isFetching) return;
+
+		isFetching = true;
+		fetchError = null;
+
+		try {
+			const result = await fetchMappedDocument(currentKeyPath, value);
+
+			if (!result.document) {
+				fetchError = "Document not found";
+			} else {
+				fetchedDocument = result.document;
+				fetchedUrl = result.url;
+				fetchedCollection = result.collection;
+			}
+		} catch (err) {
+			fetchError = err instanceof Error ? err.message : "Failed to fetch document";
+		} finally {
+			isFetching = false;
+		}
+	}
+
+	function handleMouseLeave() {
+		showTooltip = false;
+	}
+
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	function getValueType(val: any): string {
 		if (val === null) return "null";
@@ -57,56 +116,129 @@
 		}
 	}
 
-	let valueType = $derived(getValueType(value));
+	const valueType = $derived(getValueType(value));
+
+	const hasMappings = $derived(
+		!!isKeyMapped &&
+			!!fetchMappedDocument &&
+			key === undefined &&
+			isKeyMapped(currentKeyPath) &&
+			value !== null &&
+			value !== undefined &&
+			valueType !== "array" &&
+			valueType !== "object",
+	);
+
 	let isCollapsible = $derived(valueType === "array" || valueType === "object");
 	let isEmpty = $derived(
 		(valueType === "array" && value.length === 0) || (valueType === "object" && Object.keys(value).length === 0),
 	);
+	let innerCollapsed = $state(autoCollapse);
+
+	function toggleInnerCollapse() {
+		innerCollapsed = !innerCollapsed;
+	}
 </script>
 
 {#if key !== undefined}
-	<span class="prop" class:collapsible={isCollapsible && !isEmpty} class:collapsed>
-		{getIndent(depth + 1)}<var>{key}</var>: <JsonValue
-			{value}
-			{autoCollapse}
-			collapsed={autoCollapse}
-			depth={depth + 1}
-			localTopLevel={false}
-		/>
-	</span>
-{:else}
-	<!-- Root value rendering -->
-	{#if valueType === "string"}
-		<span class="value quoted">
-			"<span class="string" class:url={isUrl(value)}>
-				{#if isUrl(value)}
-					<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
-					<a href={value} target="_blank">{value}</a>
-				{:else}
+	{#if isCollapsible && !isEmpty}
+		{#if innerCollapsed}
+			<span
+				class="prop collapsible collapsed"
+				onclick={toggleInnerCollapse}
+				role="button"
+				tabindex="0"
+				onkeydown={(e) => {
+					if (e.key === "Enter" || e.key === " ") {
+						e.preventDefault();
+						toggleInnerCollapse();
+					}
+				}}
+			>
+				{getIndent(depth + 1)}<span class="collapse-arrow"> ▶ </span><var>{key}</var>: <JsonValue
 					{value}
-				{/if}
-			</span>"
-		</span>
-	{:else if valueType === "number"}
-		<span class="value number">{value}</span>
-	{:else if valueType === "boolean"}
-		<span class="value boolean">{value}</span>
-	{:else if valueType === "null"}
-		<span class="value null">null</span>
-	{:else if valueType === "objectid"}
-		<span class="call function">ObjectId("<span class="string">{value.$value}</span>")</span>
-	{:else if valueType === "date"}
-		<span class="call function">Date("<span class="string">{value.$value}</span>")</span>
-	{:else if valueType === "regexp"}
-		<span class="value regexp">/{value.$value.$pattern}/{value.$value.$flags}</span>
-	{:else if valueType === "array"}
-		{#if isEmpty}
-			<span class="value array">[]</span>
+					{autoCollapse}
+					collapsed={innerCollapsed}
+					depth={depth + 1}
+					{isKeyMapped}
+					{fetchMappedDocument}
+					keyPath={currentKeyPath}
+				/>
+			</span>
 		{:else}
-			<span class="collapsible-wrapper" class:collapsed class:expanded={!collapsed}>
-				<button class="collapse-toggle" onclick={toggleCollapse}>
-					{collapsed ? "▶" : "▼"}
-				</button><span class="value array">
+			<span class="prop collapsible">
+				{getIndent(depth + 1)}<span
+					class="collapse-arrow arrow-only"
+					onclick={(e) => {
+						e.stopPropagation();
+						toggleInnerCollapse();
+					}}
+					role="button"
+					tabindex="0"
+					onkeydown={(e) => {
+						if (e.key === "Enter" || e.key === " ") {
+							e.preventDefault();
+							e.stopPropagation();
+							toggleInnerCollapse();
+						}
+					}}
+				>
+					▼
+				</span><var>{key}</var>: <JsonValue
+					{value}
+					{autoCollapse}
+					collapsed={innerCollapsed}
+					depth={depth + 1}
+					{isKeyMapped}
+					{fetchMappedDocument}
+					keyPath={currentKeyPath}
+				/>
+			</span>
+		{/if}
+	{:else}
+		<span class="prop">
+			{getIndent(depth + 1)}<var>{key}</var>: <JsonValue
+				{value}
+				{autoCollapse}
+				collapsed={innerCollapsed}
+				depth={depth + 1}
+				{isKeyMapped}
+				{fetchMappedDocument}
+				keyPath={currentKeyPath}
+			/>
+		</span>
+	{/if}
+{:else}
+	{#snippet valueSnippet()}
+		<!-- Root value rendering -->
+		{#if valueType === "string"}
+			<span class="value quoted">
+				"<span class="string" class:url={isUrl(value)}>
+					{#if isUrl(value)}
+						<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
+						<a href={value} target="_blank">{value}</a>
+					{:else}
+						{value}
+					{/if}
+				</span>"
+			</span>
+		{:else if valueType === "number"}
+			<span class="value number">{value}</span>
+		{:else if valueType === "boolean"}
+			<span class="value boolean">{value}</span>
+		{:else if valueType === "null"}
+			<span class="value null">null</span>
+		{:else if valueType === "objectid"}
+			<span class="call function">ObjectId("<span class="string">{value.$value}</span>")</span>
+		{:else if valueType === "date"}
+			<span class="call function">Date("<span class="string">{value.$value}</span>")</span>
+		{:else if valueType === "regexp"}
+			<span class="value regexp">/{value.$value.$pattern}/{value.$value.$flags}</span>
+		{:else if valueType === "array"}
+			{#if isEmpty}
+				<span class="value array">[]</span>
+			{:else}
+				<span class="value array">
 					[<span class="collapsible-content" class:hidden={collapsed}>
 						{#each value as item, i (i)}
 							<br />{getIndent(depth + 1)}<JsonValue
@@ -114,25 +246,33 @@
 								{autoCollapse}
 								collapsed={false}
 								depth={depth + 1}
+								keyPath={currentKeyPath}
+								{isKeyMapped}
+								{fetchMappedDocument}
 							/>{/each}
 						<br />{getIndent(depth)}
 					</span>{#if collapsed}
 						<span class="collapsed-summary">... {value.length} item{value.length !== 1 ? "s" : ""}</span>
 					{/if}]
 				</span>
-			</span>
-		{/if}
-	{:else if valueType === "object"}
-		{#if isEmpty}
-			<span class="value object">{"{}"}</span>
-		{:else}
-			<span class="collapsible-wrapper" class:collapsed class:expanded={!collapsed}>
-				{#if depth !== 0}<button class="collapse-toggle" class:local-top-level={localTopLevel} onclick={toggleCollapse}>
-						{collapsed ? "▶" : "▼"}
-					</button>{/if}<span class="value object">
+			{/if}
+		{:else if valueType === "object"}
+			{#if isEmpty}
+				<span class="value object">{"{}"}</span>
+			{:else}
+				<span class="value object">
 					{"{"}<span class="collapsible-content" class:hidden={collapsed}
 						>{#each Object.keys(value) as objKey (objKey)}
-							<JsonValue value={value[objKey]} key={objKey} {autoCollapse} collapsed={autoCollapse} {depth} />{/each}
+							<JsonValue
+								value={value[objKey]}
+								key={objKey}
+								{autoCollapse}
+								collapsed={autoCollapse}
+								{depth}
+								{isKeyMapped}
+								{fetchMappedDocument}
+								keyPath={currentKeyPath}
+							/>{/each}
 					</span>{#if collapsed}
 						<span class="collapsed-summary"
 							>... {Object.keys(value).length} key{Object.keys(value).length !== 1 ? "s" : ""}</span
@@ -141,10 +281,51 @@
 						{getIndent(depth)}
 					{/if}}
 				</span>
-			</span>
+			{/if}
+		{:else}
+			<span>{String(value)}</span>
 		{/if}
+	{/snippet}
+	{#if hasMappings}
+		<Tooltip show={showTooltip} tooltipClass="max-w-[600px] max-h-[400px] overflow-auto whitespace-pre-wrap">
+			{#snippet trigger()}
+				<span
+					class="string mapped"
+					class:url={isUrl(value)}
+					onmouseenter={handleMouseEnter}
+					onmouseleave={handleMouseLeave}
+					role="button"
+					tabindex="0"
+				>
+					{#if fetchedUrl}
+						<!-- eslint-disable-next-line @typescript-eslint/no-explicit-any -->
+						<a href={resolve(fetchedUrl as any)}>{@render valueSnippet?.()}</a>
+					{:else}
+						{@render valueSnippet?.()}
+					{/if}
+				</span>
+			{/snippet}
+			{#snippet content()}
+				{#if isFetching}
+					<div class="text-[var(--text-secondary)]">Loading...</div>
+				{:else if fetchError}
+					<div class="text-[var(--danger,#f44336)]">{fetchError}</div>
+				{:else if fetchedDocument}
+					<!-- prettier-ignore -->
+					<div>
+						{#if fetchedCollection}<div
+								class="px-2 py-1 pt-2 border-b border-[var(--border-color)] bg-[var(--color-4)] font-bold"
+							>
+								{fetchedCollection}
+							</div>{/if}<div class="font-mono text-sm p-2">
+							<JsonValue value={fetchedDocument} autoCollapse={true} collapsed={false} />
+						</div>
+					</div>
+				{/if}
+			{/snippet}
+		</Tooltip>
 	{:else}
-		<span>{String(value)}</span>
+		{@render valueSnippet?.()}
 	{/if}{#if depth !== 0},{/if}
 {/if}
 
@@ -152,40 +333,35 @@
 	.prop {
 		position: relative;
 		display: block;
+
+		&.collapsible {
+			&.collapsed {
+				cursor: pointer;
+				user-select: none;
+
+				&:hover .collapse-arrow {
+					color: var(--text, #fff);
+				}
+			}
+		}
 	}
 
-	.collapsible-wrapper {
-		display: inline;
-		position: relative;
+	.collapse-arrow {
+		display: inline-block;
+		width: 16px;
+		color: var(--text-secondary, #888);
+		font-size: 12px;
+		margin-right: 4px;
+		margin-left: -20px;
+		transition: color 0.2s;
 
-		.collapse-toggle {
-			display: inline-block;
-			width: 16px;
+		&.arrow-only {
 			cursor: pointer;
-			user-select: none;
-			color: var(--text-secondary, #888);
-			font-size: 12px;
-			margin-right: 4px;
-			transition: color 0.2s;
-			background: none;
-			border: none;
-			padding: 0;
-			font-family: inherit;
-
-			&.local-top-level {
-				position: absolute;
-				left: -18px;
-				margin-top: 4px;
-			}
 
 			&:hover {
 				color: var(--text, #fff);
 			}
 		}
-
-		&.collapsed .collapsible-content {
-			display: none;
-		}
 	}
 
 	.collapsible-content {
@@ -245,4 +421,22 @@
 		color: var(--code-namespace);
 		font-style: normal;
 	}
+
+	/* Mapped value styles */
+	.mapped {
+		text-decoration: underline;
+		text-decoration-style: dotted;
+		text-decoration-color: var(--code-links, #61afef);
+		text-underline-offset: 2px;
+		cursor: pointer;
+
+		a {
+			color: inherit;
+			text-decoration: inherit;
+
+			&:hover {
+				color: var(--code-links, #61afef);
+			}
+		}
+	}
 </style>

package/src/lib/components/Modal.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		show: boolean;
+		onclose: () => void;
+		title?: string;
+		children?: Snippet;
+		footer?: Snippet;
+	}
+
+	let { show = false, onclose, title, children, footer }: Props = $props();
+
+	function handleOverlayClick() {
+		onclose();
+	}
+
+	function handleKeyDown(e: KeyboardEvent) {
+		if (e.key === "Escape" && show) {
+			onclose();
+		}
+	}
+</script>
+
+<svelte:window on:keydown={handleKeyDown} />
+
+{#if show}
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div class="modal-overlay" onclick={handleOverlayClick}>
+		<div class="modal" onclick={(e) => e.stopPropagation()}>
+			{#if title}
+				<div class="modal-header">
+					<h3>{title}</h3>
+				</div>
+			{/if}
+			<div class="modal-body">
+				{@render children?.()}
+			</div>
+			{#if footer}
+				<div class="modal-footer">
+					{@render footer()}
+				</div>
+			{/if}
+		</div>
+	</div>
+{/if}
+
+<style lang="postcss">
+	.modal-header {
+		padding: 20px 20px 0;
+	}
+
+	.modal-header h3 {
+		margin: 0;
+		font-size: 1.25rem;
+		font-weight: 500;
+	}
+</style>

package/src/lib/components/OriginWarning.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+	import { browser } from "$app/environment";
+	import { page } from "$app/state";
+
+	let { serverOrigin, readOnly } = $props<{
+		serverOrigin: string;
+		readOnly: boolean;
+	}>();
+
+	const STORAGE_KEY = "mongoku:origin-warning-dismissed";
+
+	let showOriginWarning = $state(false);
+
+	// Check if we should show the origin warning
+	$effect(() => {
+		if (browser && serverOrigin !== page.url.origin) {
+			const dismissed = sessionStorage.getItem(STORAGE_KEY);
+			showOriginWarning = !dismissed;
+		}
+	});
+
+	function dismissWarning() {
+		sessionStorage.setItem(STORAGE_KEY, "true");
+		showOriginWarning = false;
+	}
+</script>
+
+{#if showOriginWarning}
+	<div class="warning-banner">
+		<div class="warning-content">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="20"
+				height="20"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+				<line x1="12" y1="9" x2="12" y2="13" />
+				<line x1="12" y1="17" x2="12.01" y2="17" />
+			</svg>
+			<span>
+				To enable {readOnly ? "server configuration" : "write operations"}, set the <code>MONGOKU_SERVER_ORIGIN</code>
+				environment variable to
+				<code>{page.url.origin}</code>. Current server origin is <code>{serverOrigin}</code>
+			</span>
+			<button class="dismiss-button" onclick={dismissWarning} aria-label="Dismiss warning">&times;</button>
+		</div>
+	</div>
+{/if}
+
+<style lang="postcss">
+	.warning-banner {
+		background-color: #f59e0b;
+		color: #111827;
+		padding: 12px 24px;
+		border-bottom: 1px solid #d97706;
+	}
+
+	.warning-content {
+		display: flex;
+		align-items: center;
+		gap: 12px;
+		max-width: 1400px;
+		margin: 0 auto;
+
+		svg {
+			flex-shrink: 0;
+		}
+
+		span {
+			flex: 1;
+			font-size: 14px;
+			line-height: 1.5;
+		}
+
+		code {
+			background-color: rgba(0, 0, 0, 0.1);
+			padding: 2px 6px;
+			border-radius: 3px;
+			font-family: monospace;
+			font-size: 13px;
+		}
+	}
+
+	.dismiss-button {
+		background: none;
+		border: none;
+		font-size: 24px;
+		cursor: pointer;
+		opacity: 0.7;
+		padding: 0;
+		width: 24px;
+		height: 24px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		color: #111827;
+
+		&:hover {
+			opacity: 1;
+		}
+	}
+</style>

package/src/lib/components/PageSwitcher.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { resolve } from "$app/paths";
+	import { page } from "$app/state";
+
+	const { class: className }: { class: string } = $props();
+
+	const categories = $derived(
+		((page.data.categories ?? []) as Array<{ key: string; label: string }>).map((x) => ({
+			...x,
+			href: page.url.pathname.split("/").slice(0, -1).join("/") + "/" + x.key,
+		})),
+	);
+	const currentPath = $derived(page.url.pathname.split("/").pop());
+</script>
+
+{#if categories.length}
+	<div class="flex {className}">
+		{#each categories as category, index (category.key)}
+			{@const isActive = currentPath === category.key}
+			{@const sharedClasses = `btn btn-default btn-sm uppercase
+				${index === 0 ? "" : "rounded-l-none"}
+				${index === categories.length - 1 ? "" : "rounded-r-none"}
+				${index > 0 ? "-ml-px" : ""}
+				${isActive ? "opacity-100 cursor-default !bg-[var(--color-3)]" : ""}`}
+			{#if isActive}
+				<span class={sharedClasses}>
+					{category.label}
+				</span>
+			{:else}
+				<!-- eslint-disable-next-line @typescript-eslint/no-explicit-any -->
+				<a href={resolve(category.href as any)} class={sharedClasses}>
+					{category.label}
+				</a>
+			{/if}
+		{/each}
+	</div>
+{/if}

package/src/lib/components/Panel.svelte

@@ -31,7 +31,7 @@
 
 <style lang="postcss">
 	.panel {
-		background-color: var(--color-2);
+		background-color: var(--light-background);
 		border: var(--border);
 	}
 </style>