mongoku 2.0.4 → 2.1.1

package/src/lib/components/PrettyJson.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
+	import { fetchMappedDocument as fetchMappedDocumentRemote } from "$api/servers.remote";
 	import { resolve } from "$app/paths";
+	import { jsonTextarea } from "$lib/actions/jsonTextarea";
 	import { notificationStore } from "$lib/stores/notifications.svelte";
-	import type { MongoDocument } from "$lib/types";
+	import type { Mappings, MongoDocument } from "$lib/types";
 	import { parseJSON } from "$lib/utils/jsonParser";
 	import JsonValue from "./JsonValue.svelte";
 	import Panel from "./Panel.svelte";
@@ -11,29 +13,82 @@
 	interface Props {
 		json: MongoDocument;
 		autoCollapse?: boolean;
-		readOnly?: boolean;
 		onedit?: (json: any) => void;
 		onremove?: () => void;
 		server: string;
 		database: string;
 		collection: string;
+		mappings?: Mappings;
+		startInEditMode?: boolean;
 	}
 
 	let {
 		json,
 		autoCollapse = false,
-		readOnly = false,
 		onedit,
 		onremove,
 		server,
 		database,
 		collection,
+		mappings,
+		startInEditMode = false,
 	}: Props = $props();
 
+	// Helper to get ID value from any type
+	function getIdValue(val: any): string | null {
+		if (val === null || val === undefined) return null;
+		if (typeof val === "string" || typeof val === "number") return String(val);
+		if (val.$type === "ObjectId" && val.$value) return val.$value;
+		return null;
+	}
+
+	// Check if a key path has a mapping
+	function isKeyMapped(path: string): boolean {
+		return !!mappings?.[path] && (Array.isArray(mappings[path]) ? mappings[path].length > 0 : true);
+	}
+
+	// Fetch mapped document and return it with its navigation URL
+	async function fetchMappedDocument(
+		path: string,
+		value: any,
+	): Promise<{ document: MongoDocument | null; url: string | null; collection: string | null }> {
+		if (!mappings || !mappings[path] || (Array.isArray(mappings[path]) && mappings[path].length === 0)) {
+			return { document: null, url: null, collection: null };
+		}
+
+		const idValue = getIdValue(value);
+
+		if (!idValue) {
+			return { document: null, url: null, collection: null };
+		}
+
+		// Fetch the document - remote function will try all mappings and return first match
+		try {
+			const result = await fetchMappedDocumentRemote({
+				server,
+				database,
+				mappings: Array.isArray(mappings[path]) ? mappings[path] : [mappings[path]],
+				value,
+			});
+
+			if (result.error || !result.data || !result.collection) {
+				return { document: null, url: null, collection: null };
+			}
+
+			// Generate URL for navigation
+			const url = resolve(
+				`/servers/${encodeURIComponent(server)}/databases/${encodeURIComponent(database)}/collections/${encodeURIComponent(result.collection)}/documents/${encodeURIComponent(idValue)}`,
+			);
+
+			return { document: result.data, url, collection: result.collection };
+		} catch {
+			return { document: null, url: null, collection: null };
+		}
+	}
+
 	let editorVisible = $state(false);
 	let editJson = $state("");
 	let removing = $state(false);
-	let editorRef = $state<HTMLTextAreaElement>();
 	let contentContainerRef = $state<HTMLDivElement>();
 	let editorHeight = $state<string>("300px");
 
@@ -50,8 +105,8 @@
 
 	// Custom serializer that converts ObjectId objects back to new ObjectId() format
 	function serializeForEditing(obj: any, depth = 0): string {
-		const indent = "  ".repeat(depth);
-		const nextIndent = "  ".repeat(depth + 1);
+		const indent = "\t".repeat(depth);
+		const nextIndent = "\t".repeat(depth + 1);
 
 		if (obj === null) return "null";
 		if (obj === undefined) return "undefined";
@@ -106,6 +161,13 @@
 		editorVisible = true;
 	}
 
+	// Automatically enable editor if startInEditMode is true
+	$effect(() => {
+		if (startInEditMode && !editorVisible && contentContainerRef) {
+			enableEditor();
+		}
+	});
+
 	function disableEditor() {
 		editorVisible = false;
 		editJson = "";
@@ -132,43 +194,57 @@
 	function confirmRemove() {
 		onremove?.();
 	}
+
+	async function copyToClipboard() {
+		try {
+			const jsonString = serializeForEditing(json);
+			await navigator.clipboard.writeText(jsonString);
+			notificationStore.notifySuccess("Document copied to clipboard");
+		} catch (err) {
+			notificationStore.notifyError(err, "Failed to copy to clipboard");
+		}
+	}
 </script>
 
-<Panel class="group">
-	{#snippet title()}
-		{#if json._id}
-			<div class="">
-				<a
-					type="button"
-					class="bg-transparent border-none text-[var(--text)] no-underline cursor-pointer text-xl font-inherit p-0 hover:underline"
-					href={resolve(
-						`/servers/${encodeURIComponent(server)}/databases/${encodeURIComponent(database)}/collections/${encodeURIComponent(collection)}/documents/${json._id?.$value}`,
-					)}
-				>
-					{json._id?.$value}
-				</a>
-				{#if json._id?.$value}
-					{@const timestamp = getTimestampFromObjectId(json._id.$value)}
-					{#if timestamp}
-						<span class="ml-2 text-md text-[var(--text-secondary,#888)]">{timestamp.toLocaleString()}</span>
-					{/if}
+{#snippet title()}
+	{#if json._id}
+		{@const idValue = json._id.$value ?? json._id}
+		<div class="">
+			<a
+				type="button"
+				class="bg-transparent border-none text-[var(--text)] no-underline cursor-pointer text-xl font-inherit p-0 hover:underline normal-case"
+				href={resolve(
+					`/servers/${encodeURIComponent(server)}/databases/${encodeURIComponent(database)}/collections/${encodeURIComponent(collection)}/documents/${idValue}`,
+				)}
+			>
+				{idValue}
+			</a>
+			{#if json._id.$value}
+				{@const timestamp = getTimestampFromObjectId(json._id.$value)}
+				{#if timestamp}
+					<span class="ml-2 text-md text-[var(--text-secondary,#888)]">{timestamp.toLocaleString()}</span>
 				{/if}
-			</div>
-		{/if}
-	{/snippet}
+			{/if}
+		</div>
+	{/if}
+{/snippet}
 
-	{#snippet actions()}
-		{#if !readOnly}
-			<div class="hidden group-hover:block">
-				<button class="btn btn-outline-light btn-sm ml-2 -my-2" onclick={enableEditor}>Edit</button>
-				<button class="btn btn-outline-danger btn-sm ml-2 -my-2" onclick={showRemove}>Remove</button>
-			</div>
+{#snippet actions()}
+	<div class="hidden group-hover:block">
+		<button class="btn btn-outline-light btn-sm ml-2 -my-2" onclick={copyToClipboard}>Copy</button>
+		{#if onedit}
+			<button class="btn btn-outline-light btn-sm ml-2 -my-2" onclick={enableEditor}>Edit</button>
+		{/if}
+		{#if onremove}
+			<button class="btn btn-outline-danger btn-sm ml-2 -my-2" onclick={showRemove}>Remove</button>
 		{/if}
-	{/snippet}
+	</div>
+{/snippet}
 
+<Panel class="group" title={json._id ? title : undefined} {actions}>
 	<div bind:this={contentContainerRef} class="p-4 relative border-t border-[var(--border-color)]">
 		<div class="font-mono text-sm leading-tight whitespace-pre-wrap break-words relative">
-			<JsonValue value={json} {autoCollapse} collapsed={false} />
+			<JsonValue value={json} {autoCollapse} collapsed={false} {isKeyMapped} {fetchMappedDocument} />
 		</div>
 
 		<div class="absolute h-full z-[100] w-full top-0 left-0" class:hidden={!editorVisible} class:block={editorVisible}>
@@ -177,9 +253,9 @@
 				<button class="btn btn-default ml-2" onclick={disableEditor}>Cancel</button>
 			</div>
 			<textarea
-				bind:this={editorRef}
 				bind:value={editJson}
 				style="height: {editorHeight};"
+				use:jsonTextarea={{ onsubmit: save, onescape: disableEditor }}
 				class="w-full font-mono text-sm leading-relaxed p-2.5 bg-[var(--color-1)] text-[var(--text)] border border-[var(--border-color)] rounded resize-y"
 			></textarea>
 		</div>

package/src/lib/components/SearchBox.svelte

@@ -2,13 +2,16 @@
 	import { goto } from "$app/navigation";
 	import { resolve } from "$app/paths";
 	import { page } from "$app/state";
+	import { jsonTextarea } from "$lib/actions/jsonTextarea";
 	import type { SearchParams } from "$lib/types";
 
 	interface Props {
 		params: SearchParams;
+		editMode?: boolean;
+		readonly: boolean;
 	}
 
-	let { params = $bindable() }: Props = $props();
+	let { params = $bindable(), editMode = $bindable(false), readonly = $bindable(false) }: Props = $props();
 
 	// Show optional fields - start with all hidden
 	let showOptionalFields = $state(
@@ -17,7 +20,17 @@
 
 	let counter = $state(Math.random());
 
-	let queryInput: HTMLInputElement | undefined;
+	let queryInput = $state<HTMLInputElement | HTMLTextAreaElement | undefined>(undefined);
+
+	// Detect if query is an aggregation (starts with [)
+	let isAggregation = $derived(params.query?.trimStart().startsWith("["));
+
+	// Disable edit mode when switching to aggregation mode
+	$effect(() => {
+		if (isAggregation && editMode) {
+			editMode = false;
+		}
+	});
 
 	$effect(() => {
 		if (queryInput) {
@@ -45,116 +58,167 @@
 		);
 	}
 
-	let form: HTMLFormElement | undefined;
+	let form = $state<HTMLFormElement | undefined>(undefined);
 </script>
 
-<form class="flex items-stretch w-full" method="GET" action="?" onsubmit={submit} bind:this={form}>
-	<!-- Parameters group -->
-	<div class="flex-grow">
-		<!-- Query input (always shown) -->
-		<div class="flex items-stretch w-full h-10">
-			<div
-				class="min-w-[100px] flex justify-center items-center border border-[var(--color-4)] {!showOptionalFields
-					? 'border-b rounded-bl-md'
-					: 'border-b-0'} bg-[var(--color-1)] rounded-tl-md"
-			>
-				Query:
-			</div>
-			<input
-				type="text"
-				bind:this={queryInput}
-				bind:value={params.query}
-				placeholder={"{}"}
-				name="query"
-				class="flex-grow border-0 bg-[var(--color-3)] pl-2.5 font-mono"
-			/>
-		</div>
-
-		<input type="hidden" value={counter} name="v" />
-		<!-- Sort input -->
-		{#if showOptionalFields}
-			<div class="flex items-stretch w-full h-10">
+<div>
+	<form class="flex items-stretch w-full" method="GET" action="?" onsubmit={submit} bind:this={form}>
+		<!-- Parameters group -->
+		<div class="flex-grow">
+			<!-- Query input (always shown) -->
+			<div class="flex items-stretch w-full {isAggregation ? 'min-h-10' : 'h-10'}">
 				<div
-					class="min-w-[100px] flex justify-center items-center border border-[var(--color-4)] border-b-0 bg-[var(--color-1)]"
+					class="min-w-[100px] flex justify-center items-center border border-[var(--color-4)] {!showOptionalFields
+						? 'border-b rounded-bl-md'
+						: 'border-b-0'} bg-[var(--color-1)] rounded-tl-md"
 				>
-					Sort:
+					{isAggregation ? "Aggregation:" : "Query:"}
 				</div>
-				<input
-					type="text"
-					bind:value={params.sort}
-					name="sort"
-					placeholder={"{}"}
-					class="flex-grow border-0 border-t border-[var(--color-4)] bg-[var(--color-3)] pl-2.5 font-mono"
-				/>
+				{#if isAggregation}
+					<textarea
+						bind:this={queryInput}
+						bind:value={params.query}
+						placeholder="[]"
+						name="query"
+						rows="5"
+						use:jsonTextarea={{ onsubmit: () => form?.requestSubmit() }}
+						class="flex-grow border-0 bg-[var(--color-3)] pl-2.5 font-mono py-2 resize-y"
+					></textarea>
+				{:else}
+					<input
+						type="text"
+						bind:this={queryInput}
+						bind:value={params.query}
+						placeholder={"{}"}
+						name="query"
+						class="flex-grow border-0 bg-[var(--color-3)] pl-2.5 font-mono"
+					/>
+				{/if}
 			</div>
 
-			<!-- Skip input -->
-			<div class="flex items-stretch w-full h-10">
-				<div
-					class="min-w-[100px] flex justify-center items-center border border-[var(--color-4)] border-b-0 bg-[var(--color-1)]"
-				>
-					Skip:
+			<input type="hidden" value={counter} name="v" />
+			<!-- Sort input -->
+			{#if showOptionalFields}
+				<div class="flex items-stretch w-full h-10">
+					<div
+						class="min-w-[100px] flex justify-center items-center border border-[var(--color-4)] border-b-0 bg-[var(--color-1)]"
+					>
+						Sort:
+					</div>
+					<input
+						type="text"
+						bind:value={params.sort}
+						name="sort"
+						placeholder={"{}"}
+						class="flex-grow border-0 border-t border-[var(--color-4)] bg-[var(--color-3)] pl-2.5 font-mono"
+					/>
 				</div>
-				<input
-					type="number"
-					bind:value={params.skip}
-					name="skip"
-					min="0"
-					class="flex-grow border-0 border-t border-[var(--color-4)] bg-[var(--color-3)] pl-2.5 font-mono"
-				/>
-			</div>
 
-			<!-- Limit input -->
-			<div class="flex items-stretch w-full h-10">
-				<div
-					class="min-w-[100px] flex justify-center items-center border border-[var(--color-4)] border-b-0 bg-[var(--color-1)]"
-				>
-					Limit:
+				<!-- Skip input -->
+				<div class="flex items-stretch w-full h-10">
+					<div
+						class="min-w-[100px] flex justify-center items-center border border-[var(--color-4)] border-b-0 bg-[var(--color-1)]"
+					>
+						Skip:
+					</div>
+					<input
+						type="number"
+						bind:value={params.skip}
+						name="skip"
+						min="0"
+						class="flex-grow border-0 border-t border-[var(--color-4)] bg-[var(--color-3)] pl-2.5 font-mono"
+					/>
 				</div>
-				<input
-					type="number"
-					bind:value={params.limit}
-					name="limit"
-					min="1"
-					class="flex-grow border-0 border-t border-[var(--color-4)] bg-[var(--color-3)] pl-2.5 font-mono"
-				/>
-			</div>
 
-			<!-- Project input -->
-			<div class="flex items-stretch w-full h-10">
-				<div
-					class="min-w-[100px] flex justify-center items-center border border-[var(--color-4)] border-b bg-[var(--color-1)] rounded-bl-md"
-				>
-					Project:
+				<!-- Limit input -->
+				<div class="flex items-stretch w-full h-10">
+					<div
+						class="min-w-[100px] flex justify-center items-center border border-[var(--color-4)] border-b-0 bg-[var(--color-1)]"
+					>
+						Limit:
+					</div>
+					<input
+						type="number"
+						bind:value={params.limit}
+						name="limit"
+						min="1"
+						class="flex-grow border-0 border-t border-[var(--color-4)] bg-[var(--color-3)] pl-2.5 font-mono"
+					/>
 				</div>
-				<input
-					type="text"
-					bind:value={params.project}
-					name="project"
-					placeholder={"{}"}
-					class="flex-grow border-0 border-t border-[var(--color-4)] bg-[var(--color-3)] pl-2.5 font-mono"
-				/>
-			</div>
+
+				<!-- Project input -->
+				<div class="flex items-stretch w-full h-10">
+					<div
+						class="min-w-[100px] flex justify-center items-center border border-[var(--color-4)] border-b bg-[var(--color-1)] rounded-bl-md"
+					>
+						Project:
+					</div>
+					<input
+						type="text"
+						bind:value={params.project}
+						name="project"
+						placeholder={"{}"}
+						class="flex-grow border-0 border-t border-[var(--color-4)] bg-[var(--color-3)] pl-2.5 font-mono"
+					/>
+				</div>
+			{/if}
+		</div>
+
+		<!-- Toggle optional fields button -->
+		<button
+			class="btn btn-default !w-12 !rounded-none !border-r-0 text-2xl leading-none font-bold !py-1.5"
+			type="button"
+			onclick={() => {
+				showOptionalFields = !showOptionalFields;
+			}}
+		>
+			{showOptionalFields ? "−" : "+"}
+		</button>
+
+		<!-- Edit/Update button -->
+		{#if !readonly}
+			<button
+				class="btn btn-default !w-12 !rounded-none !border-r-0 text-lg leading-none font-bold !py-1.5"
+				type="button"
+				title={isAggregation ? "Update not available in aggregation mode" : "Update multiple documents"}
+				disabled={isAggregation}
+				onclick={() => {
+					editMode = !editMode;
+				}}
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width="18"
+					height="18"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"></path>
+					<path d="m15 5 4 4"></path>
+				</svg>
+			</button>
 		{/if}
-	</div>
-
-	<!-- Toggle optional fields button -->
-	<button
-		class="btn btn-default !w-12 !rounded-none !border-r-0 text-2xl leading-none font-bold !py-1.5"
-		type="button"
-		onclick={() => {
-			showOptionalFields = !showOptionalFields;
-		}}
-	>
-		{showOptionalFields ? "−" : "+"}
-	</button>
-
-	<!-- Search button -->
-	<button class="btn btn-success !rounded-l-none !rounded-r-md font-bold !py-1.5" type="submit"> GO! </button>
-</form>
+
+		<!-- Search button -->
+		<button class="btn btn-success !rounded-l-none !rounded-r-md font-bold !py-1.5" type="submit"> GO! </button>
+	</form>
+
+	<!-- Help text when collapsed -->
+	{#if !showOptionalFields && !isAggregation && params.query === "{}"}
+		<div class="text-xs mt-1 ml-1" style="color: var(--text-secondary);">
+			Tip: Use <code class="bg-[var(--color-3)] px-1 py-0.5 rounded font-mono">[{"{...}"}]</code> to switch to aggregation
+			mode
+		</div>
+	{/if}
+</div>
 
 <style lang="postcss">
-	input {
+	input,
+	textarea {
 		border-radius: 0;
 	}
 </style>

package/src/lib/components/ThemeSwitcher.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	type Theme = "system" | "light" | "dark";
+
+	let currentTheme = $state<Theme>("dark");
+
+	// Load theme from localStorage on mount
+	$effect(() => {
+		if (typeof window !== "undefined") {
+			const stored = localStorage.getItem("theme") as Theme | null;
+			currentTheme = stored || "dark";
+		}
+	});
+
+	function setTheme(theme: Theme) {
+		currentTheme = theme;
+		localStorage.setItem("theme", theme);
+
+		const root = document.documentElement;
+
+		if (theme === "system") {
+			const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+			root.setAttribute("data-theme", prefersDark ? "dark" : "light");
+		} else {
+			root.setAttribute("data-theme", theme);
+		}
+	}
+
+	function cycleTheme() {
+		const themes: Theme[] = ["system", "light", "dark"];
+		const currentIndex = themes.indexOf(currentTheme);
+		const nextTheme = themes[(currentIndex + 1) % themes.length];
+		setTheme(nextTheme);
+	}
+
+	const icon = $derived.by(() => {
+		switch (currentTheme) {
+			case "light":
+				return "☀️";
+			case "dark":
+				return "🌙";
+			case "system":
+				return "💻";
+		}
+	});
+
+	const label = $derived.by(() => {
+		switch (currentTheme) {
+			case "light":
+				return "Light";
+			case "dark":
+				return "Dark";
+			case "system":
+				return "System";
+		}
+	});
+</script>
+
+<button
+	onclick={cycleTheme}
+	class="btn btn-default btn-sm flex items-center gap-2"
+	title="Change theme (current: {label})"
+	aria-label="Change theme"
+>
+	<span class="text-base">{icon}</span>
+	<span class="hidden sm:inline">{label}</span>
+</button>

package/src/lib/components/Tooltip.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+	import { tick, type Snippet } from "svelte";
+
+	interface Props {
+		/** Content to trigger the tooltip */
+		trigger: Snippet;
+		/** Content to display in the tooltip */
+		content: Snippet;
+		/** Whether the tooltip is visible */
+		show?: boolean;
+		/** Additional class for the tooltip container */
+		tooltipClass?: string;
+	}
+
+	let { trigger, content, show = false, tooltipClass = "" }: Props = $props();
+
+	let tooltipElement = $state<HTMLDivElement>();
+	let containerElement = $state<HTMLDivElement>();
+
+	let tooltipPosition = $state({
+		left: "",
+		right: "",
+		top: "",
+		bottom: "",
+		marginTop: "",
+		marginBottom: "",
+	});
+
+	$effect(() => {
+		if (show && tooltipElement && containerElement) {
+			tick().then(() => {
+				if (!containerElement || !tooltipElement) return;
+
+				const tooltipRect = tooltipElement.getBoundingClientRect();
+				const viewportWidth = window.innerWidth;
+				const viewportHeight = window.innerHeight;
+
+				// Reset positioning
+				tooltipPosition = {
+					left: "",
+					right: "",
+					top: "",
+					bottom: "",
+					marginTop: "",
+					marginBottom: "",
+				};
+
+				// Position horizontally
+				if (tooltipRect.right > viewportWidth) {
+					tooltipPosition.right = "0";
+				} else {
+					tooltipPosition.left = "0";
+				}
+
+				// Position vertically
+				if (tooltipRect.bottom > viewportHeight) {
+					tooltipPosition.bottom = "100%";
+					tooltipPosition.marginBottom = "5px";
+				} else {
+					tooltipPosition.top = "100%";
+					tooltipPosition.marginTop = "5px";
+				}
+			});
+		}
+	});
+</script>
+
+<div class="relative inline-block" bind:this={containerElement}>
+	{@render trigger()}{#if show}
+		<div
+			class="absolute bg-[var(--light-background)] border border-[var(--color-3)] rounded z-[1000] shadow-lg {tooltipClass}"
+			bind:this={tooltipElement}
+			style:left={tooltipPosition.left}
+			style:right={tooltipPosition.right}
+			style:top={tooltipPosition.top}
+			style:bottom={tooltipPosition.bottom}
+			style:margin-top={tooltipPosition.marginTop}
+			style:margin-bottom={tooltipPosition.marginBottom}
+		>
+			{@render content()}
+		</div>
+	{/if}
+</div>