mongoku 2.4.6 → 2.4.7-compat

package/src/lib/components/JsonValue.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
 	import { resolve } from "$app/paths";
+	import IconExternalLink from "$lib/icons/IconExternalLink.svelte";
 	import type { MongoDocument } from "$lib/types";
 	import JsonValue from "./JsonValue.svelte";
 	import Tooltip from "./Tooltip.svelte";
 
 	const INDENT = "    ";
 
+	import type { Mappings } from "$lib/types";
+
 	interface Props {
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		value: any;
@@ -24,6 +27,8 @@
 		) => Promise<{ document: MongoDocument | null; url: string | null; collection: string | null }>;
 		/** full path to current key (e.g., "user.address.city") */
 		keyPath?: string;
+		/** The mappings object */
+		mappings?: Mappings;
 	}
 
 	let {
@@ -35,6 +40,7 @@
 		isKeyMapped,
 		fetchMappedDocument,
 		keyPath = "",
+		mappings,
 	}: Props = $props();
 
 	function getIndent(level: number): string {
@@ -57,6 +63,12 @@
 	// Check if current key has a mapping
 	const currentKeyPath = $derived([keyPath, key].filter(Boolean).join("."));
 
+	// Helper to interpolate URL template with value
+	function interpolateUrl(template: string, val: unknown): string {
+		const strValue = String(val);
+		return template.replace(/\{value\}/g, strValue);
+	}
+
 	async function handleMouseEnter() {
 		if (!hasMappings || !fetchMappedDocument) return;
 
@@ -146,7 +158,6 @@
 
 	const hasMappings = $derived(
 		!!isKeyMapped &&
-			!!fetchMappedDocument &&
 			key === undefined &&
 			isKeyMapped(currentKeyPath) &&
 			value !== null &&
@@ -155,6 +166,25 @@
 			valueType !== "object",
 	);
 
+	const hasCollectionMappings = $derived(hasMappings && !!fetchMappedDocument);
+
+	// Get URL mappings for current path
+	const urlMappings = $derived.by(() => {
+		if (!hasMappings || !mappings || !mappings[currentKeyPath]) {
+			return [];
+		}
+		const pathMappings = mappings[currentKeyPath];
+		const mappingsArray = Array.isArray(pathMappings) ? pathMappings : [pathMappings];
+		return mappingsArray.filter((m): m is { type: "url"; template: string } => {
+			if ("type" in m) {
+				return m.type === "url";
+			}
+			return false;
+		});
+	});
+
+	const hasUrlMappings = $derived(urlMappings.length > 0);
+
 	let isCollapsible = $derived(valueType === "array" || valueType === "object");
 	let isEmpty = $derived(
 		(valueType === "array" && value.length === 0) || (valueType === "object" && Object.keys(value).length === 0),
@@ -189,6 +219,7 @@
 					{isKeyMapped}
 					{fetchMappedDocument}
 					keyPath={currentKeyPath}
+					{mappings}
 				/>
 			</span>
 		{:else}
@@ -218,6 +249,7 @@
 					{isKeyMapped}
 					{fetchMappedDocument}
 					keyPath={currentKeyPath}
+					{mappings}
 				/>
 			</span>
 		{/if}
@@ -231,6 +263,7 @@
 				{isKeyMapped}
 				{fetchMappedDocument}
 				keyPath={currentKeyPath}
+				{mappings}
 			/>
 		</span>
 	{/if}
@@ -281,6 +314,7 @@
 									keyPath={currentKeyPath}
 									{isKeyMapped}
 									{fetchMappedDocument}
+									{mappings}
 								/>{/each}
 							<br />{getIndent(depth)}
 						</span>{:else}
@@ -304,6 +338,7 @@
 									{isKeyMapped}
 									{fetchMappedDocument}
 									keyPath={currentKeyPath}
+									{mappings}
 								/>{/each}
 						</span>{/if}{#if collapsed}
 						<span class="collapsed-summary"
@@ -318,7 +353,21 @@
 			<span>{String(value)}</span>
 		{/if}
 	{/snippet}
-	{#if hasMappings}
+	{#if hasUrlMappings}
+		<!-- Render as external URL link(s) -->
+		<span class="string mapped url">
+			{#each urlMappings as urlMapping, i (i)}
+				{#if i > 0}
+					|
+				{/if}
+				<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
+				<a href={interpolateUrl(urlMapping.template, value)} target="_blank" class="inline-flex items-center gap-1">
+					{@render valueSnippet?.()}
+					<IconExternalLink class="w-3 h-3 inline-block opacity-70" />
+				</a>
+			{/each}
+		</span>
+	{:else if hasCollectionMappings}
 		<Tooltip
 			show={showTooltip}
 			tooltipClass="max-w-[600px] max-h-[400px] overflow-auto whitespace-pre-wrap"
@@ -403,10 +452,6 @@
 
 	.collapsible-content {
 		white-space: pre;
-
-		&.hidden {
-			display: none;
-		}
 	}
 
 	.collapsed-summary {

package/src/lib/components/Modal.svelte

@@ -5,11 +5,12 @@
 		show: boolean;
 		onclose: () => void;
 		title?: string;
+		wide?: boolean;
 		children?: Snippet;
 		footer?: Snippet;
 	}
 
-	let { show = false, onclose, title, children, footer }: Props = $props();
+	let { show = false, onclose, title, wide = false, children, footer }: Props = $props();
 
 	function handleOverlayClick() {
 		onclose();
@@ -28,7 +29,7 @@
 	<!-- 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()}>
+		<div class="modal" class:modal-wide={wide} onclick={(e) => e.stopPropagation()}>
 			{#if title}
 				<div class="modal-header">
 					<h3 style="color: var(--text);">{title}</h3>
@@ -56,4 +57,8 @@
 		font-size: 1.375rem;
 		font-weight: 600;
 	}
+
+	.modal-wide {
+		max-width: 800px;
+	}
 </style>

package/src/lib/components/Notifications.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import IconClose from "$lib/icons/IconClose.svelte";
 	import { notificationStore } from "$lib/stores/notifications.svelte";
 </script>
 
@@ -7,20 +8,7 @@
 		<div class="notification notification-{notification.type}">
 			<span>{notification.message}</span>
 			<button onclick={() => notificationStore.remove(notification.id)} aria-label="Dismiss notification">
-				<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"
-				>
-					<line x1="18" y1="6" x2="6" y2="18"></line>
-					<line x1="6" y1="6" x2="18" y2="18"></line>
-				</svg>
+				<IconClose class="w-[18px] h-[18px]" />
 			</button>
 		</div>
 	{/each}
@@ -80,7 +68,7 @@
 	}
 
 	.notification-success {
-		background-color: #32d74b;
+		background-color: var(--button-success);
 		color: white;
 	}
 

package/src/lib/components/PrettyJson.svelte

@@ -245,7 +245,7 @@
 <Panel class="group relative" title={json._id ? title : undefined} {actions} bind:ref={panelRef}>
 	<div bind:this={contentContainerRef} class="relative p-4 sm:p-6">
 		<div class="font-mono text-[13px] sm:text-[14px] leading-relaxed whitespace-pre-wrap break-words overflow-x-auto">
-			<JsonValue value={json} {autoCollapse} collapsed={false} {isKeyMapped} {fetchMappedDocument} />
+			<JsonValue value={json} {autoCollapse} collapsed={false} {isKeyMapped} {fetchMappedDocument} {mappings} />
 		</div>
 
 		{#if removing}

package/src/lib/components/SearchBox.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { countDocumentsByTimeRange } from "$api/servers.remote";
 	import { goto } from "$app/navigation";
 	import { resolve } from "$app/paths";
 	import { page } from "$app/state";
@@ -8,15 +9,30 @@
 	import IconChevronDown from "$lib/icons/IconChevronDown.svelte";
 	import IconEdit from "$lib/icons/IconEdit.svelte";
 	import type { SearchParams } from "$lib/types";
+	import { formatNumber } from "$lib/utils/filters";
 	import { tick } from "svelte";
 
 	interface Props {
 		params: SearchParams;
 		editMode?: boolean;
 		readonly: boolean;
+		explainLoading?: boolean;
+		onexplain?: () => void;
+		server?: string;
+		database?: string;
+		collection?: string;
 	}
 
-	let { params = $bindable(), editMode = $bindable(false), readonly = $bindable(false) }: Props = $props();
+	let {
+		params = $bindable(),
+		editMode = $bindable(false),
+		readonly = $bindable(false),
+		explainLoading = false,
+		onexplain,
+		server,
+		database,
+		collection,
+	}: Props = $props();
 
 	// Show optional fields - start with all hidden
 	let showOptionalFields = $state(
@@ -103,6 +119,83 @@
 	}
 
 	let form = $state<HTMLFormElement | undefined>(undefined);
+
+	// New Docs dropdown state
+	const TIME_RANGES = [
+		{ label: "Last 24 hours", days: 1 },
+		{ label: "Last 7 days", days: 7 },
+		{ label: "Last 30 days", days: 30 },
+		{ label: "Last 90 days", days: 90 },
+		{ label: "Last 180 days", days: 180 },
+	];
+
+	let showNewDocsDropdown = $state(false);
+	let newDocsButtonElement = $state<HTMLButtonElement>();
+	let newDocsDropdownPosition = $state({ left: "0px", top: "0px", minWidth: "200px" });
+	let isStatsLoading = $state(false);
+	let stats = $state<Array<{ label: string; days: number; count: number | null; error: string | null }> | null>(null);
+
+	// Calculate New Docs dropdown position when shown
+	$effect(() => {
+		if (showNewDocsDropdown && newDocsButtonElement) {
+			tick().then(() => {
+				if (!newDocsButtonElement) return;
+				const rect = newDocsButtonElement.getBoundingClientRect();
+				newDocsDropdownPosition = {
+					left: `${rect.right - 200}px`,
+					top: `${rect.bottom + 5}px`,
+					minWidth: "200px",
+				};
+			});
+		}
+	});
+
+	async function loadStats() {
+		if (!server || !database || !collection || isStatsLoading) return;
+
+		isStatsLoading = true;
+		try {
+			const result = await countDocumentsByTimeRange({
+				server,
+				database,
+				collection,
+				timeRanges: TIME_RANGES,
+			});
+
+			if (!result.error) {
+				stats = result.data;
+			}
+		} finally {
+			isStatsLoading = false;
+		}
+	}
+
+	function toggleNewDocsDropdown() {
+		showNewDocsDropdown = !showNewDocsDropdown;
+		if (showNewDocsDropdown && stats === null) {
+			loadStats();
+		}
+	}
+
+	function selectTimeRange(days: number) {
+		// Calculate the ObjectId for X days ago
+		const now = Date.now();
+		const daysInMs = days * 24 * 60 * 60 * 1000;
+		const timestamp = Math.floor((now - daysInMs) / 1000);
+
+		// Create ObjectId hex string from timestamp (first 4 bytes are timestamp)
+		const objectIdHex = timestamp.toString(16).padStart(8, "0") + "0000000000000000";
+
+		// Set the query with the ObjectId filter
+		params.query = `{_id: {$gte: ObjectId("${objectIdHex}")}}`;
+		params.mode = "query";
+		showNewDocsDropdown = false;
+
+		tick().then(() => {
+			// Submit the form
+			form?.requestSubmit();
+		});
+	}
 </script>
 
 <div class="rounded-2xl border border-[var(--border-color)] bg-[var(--light-background)]/70 shadow-sm p-3 sm:p-4">
@@ -161,6 +254,19 @@
 			<input type="hidden" value={counter} name="v" />
 
 			<div class="flex items-center gap-2">
+				{#if server && database && collection}
+					<button
+						type="button"
+						bind:this={newDocsButtonElement}
+						class="h-9 px-3 rounded-xl border border-[var(--border-color)] bg-[var(--light-background)] hover:bg-[var(--color-3)] transition cursor-pointer text-[13px] font-medium flex items-center gap-1"
+						style="color: var(--text-secondary);"
+						title="Filter by document creation time"
+						onclick={toggleNewDocsDropdown}
+					>
+						<span>📊</span>
+						<IconChevronDown class="w-3 h-3" />
+					</button>
+				{/if}
 				<button
 					type="button"
 					class="h-9 px-3 rounded-xl border border-[var(--border-color)] bg-[var(--light-background)] hover:bg-[var(--color-3)] text-[15px] font-semibold leading-none transition cursor-pointer"
@@ -186,10 +292,21 @@
 						<IconEdit class="w-4 h-4" />
 					</button>
 				{/if}
-				<button
-					type="submit"
-					class="h-9 px-4 rounded-xl bg-[var(--button-success)] text-white font-semibold transition cursor-pointer hover:bg-[var(--button-success-l)] active:brightness-95"
-				>
+				{#if onexplain}
+					<button
+						type="button"
+						class="h-9 px-3 rounded-xl border border-[var(--border-color)] bg-[var(--light-background)] hover:bg-[var(--color-3)] transition disabled:opacity-50 cursor-pointer text-[13px] font-medium"
+						style="color: var(--link);"
+						title={params.mode === "distinct"
+							? "Explain not available for distinct queries"
+							: "Show query execution plan"}
+						disabled={params.mode === "distinct" || explainLoading}
+						onclick={onexplain}
+					>
+						{explainLoading ? "..." : "Explain"}
+					</button>
+				{/if}
+				<button type="submit" class="h-9 px-4 py-0 rounded-xl btn btn-success text-lg font-semibold transition">
 					Go
 				</button>
 			</div>
@@ -335,6 +452,44 @@
 	</div>
 {/if}
 
+<!-- New Docs dropdown (rendered via portal to avoid overflow issues) -->
+{#if showNewDocsDropdown}
+	<div
+		use:portal
+		use:clickOutside={() => (showNewDocsDropdown = false)}
+		class="fixed z-[1000] rounded-lg border border-[var(--border-color)] bg-[var(--light-background)] shadow-lg overflow-hidden"
+		style:left={newDocsDropdownPosition.left}
+		style:top={newDocsDropdownPosition.top}
+		style:min-width={newDocsDropdownPosition.minWidth}
+	>
+		{#if isStatsLoading}
+			<div class="px-3 py-2 text-[13px]" style="color: var(--text-secondary);">Loading...</div>
+		{:else if stats && stats.length > 0}
+			{#each stats as stat (stat.label)}
+				<button
+					type="button"
+					class="w-full px-3 py-2 text-left text-[13px] hover:bg-[var(--color-3)] transition cursor-pointer flex justify-between items-center"
+					style="color: var(--text);"
+					onclick={() => selectTimeRange(stat.days)}
+				>
+					<span>{stat.label}</span>
+					<span class="font-medium tabular-nums" style="color: var(--text-secondary);">
+						{#if stat.error}
+							⚠️
+						{:else if stat.count !== null}
+							{formatNumber(stat.count)}
+						{:else}
+							—
+						{/if}
+					</span>
+				</button>
+			{/each}
+		{:else}
+			<div class="px-3 py-2 text-[13px]" style="color: var(--text-secondary);">No data available</div>
+		{/if}
+	</div>
+{/if}
+
 <style lang="postcss">
 	input[type="text"],
 	input[type="number"],

package/src/lib/components/TimeRangeStats.svelte

@@ -0,0 +1,269 @@
+<script lang="ts">
+	import { countDocumentsByTimeRange } from "$api/servers.remote";
+	import IconChevronDown from "$lib/icons/IconChevronDown.svelte";
+	import { formatNumber } from "$lib/utils/filters";
+
+	interface Props {
+		server: string;
+		database: string;
+		collection: string;
+	}
+
+	let { server, database, collection }: Props = $props();
+
+	const TIME_RANGES = [
+		{ label: "Last 24 hours", days: 1 },
+		{ label: "Last 7 days", days: 7 },
+		{ label: "Last 30 days", days: 30 },
+		{ label: "Last 90 days", days: 90 },
+	];
+
+	let isOpen = $state(false);
+	let isLoading = $state(false);
+	let stats = $state<Array<{ label: string; days: number; count: number | null; error: string | null }> | null>(null);
+	let loadError = $state<string | null>(null);
+
+	async function loadStats() {
+		if (stats !== null || isLoading) return;
+
+		isLoading = true;
+		loadError = null;
+
+		try {
+			const result = await countDocumentsByTimeRange({
+				server,
+				database,
+				collection,
+				timeRanges: TIME_RANGES,
+			});
+
+			if (result.error) {
+				loadError = result.error;
+			} else {
+				stats = result.data;
+			}
+		} catch (err) {
+			loadError = err instanceof Error ? err.message : String(err);
+		} finally {
+			isLoading = false;
+		}
+	}
+
+	function toggle() {
+		isOpen = !isOpen;
+		if (isOpen && stats === null) {
+			loadStats();
+		}
+	}
+
+	function refresh() {
+		stats = null;
+		loadStats();
+	}
+</script>
+
+<div class="time-range-stats">
+	<button class="toggle-btn" onclick={toggle} aria-expanded={isOpen} aria-label="Toggle new documents statistics">
+		<span class="icon">📊</span>
+		<span class="label">New Documents</span>
+		<IconChevronDown class="chevron {isOpen ? 'rotate' : ''}" />
+	</button>
+
+	{#if isOpen}
+		<div class="stats-panel">
+			{#if isLoading}
+				<div class="loading">
+					<span class="spinner"></span>
+					<span>Loading statistics...</span>
+				</div>
+			{:else if loadError}
+				<div class="error">
+					<span>⚠️ {loadError}</span>
+					<button class="retry-btn" onclick={refresh}>Retry</button>
+				</div>
+			{:else if stats}
+				<div class="stats-grid">
+					{#each stats as stat (stat.label)}
+						<div class="stat-item">
+							<div class="stat-label">{stat.label}</div>
+							<div class="stat-value">
+								{#if stat.error}
+									<span class="stat-error" title={stat.error}>⚠️</span>
+								{:else if stat.count !== null}
+									<span class="count">{formatNumber(stat.count)}</span>
+									<span class="docs">docs</span>
+								{:else}
+									<span class="stat-error">—</span>
+								{/if}
+							</div>
+						</div>
+					{/each}
+				</div>
+				<button class="refresh-btn" onclick={refresh} title="Refresh statistics"> 🔄 </button>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.time-range-stats {
+		position: relative;
+		margin-bottom: 1rem;
+	}
+
+	.toggle-btn {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.5rem 1rem;
+		background: var(--light-background);
+		border: 1px solid var(--border-color);
+		border-radius: 0.75rem;
+		color: var(--text);
+		cursor: pointer;
+		font-size: 0.875rem;
+		font-weight: 500;
+		transition: all 0.2s ease;
+	}
+
+	.toggle-btn:hover {
+		background: var(--color-3);
+	}
+
+	.icon {
+		font-size: 1rem;
+	}
+
+	.label {
+		color: var(--text);
+	}
+
+	:global(.chevron) {
+		width: 1rem;
+		height: 1rem;
+		transition: transform 0.2s ease;
+		color: var(--text-secondary);
+	}
+
+	:global(.chevron.rotate) {
+		transform: rotate(180deg);
+	}
+
+	.stats-panel {
+		position: absolute;
+		top: 100%;
+		left: 0;
+		z-index: 50;
+		margin-top: 0.5rem;
+		padding: 1rem;
+		background: var(--background);
+		border: 1px solid var(--border-color);
+		border-radius: 0.75rem;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+		min-width: 280px;
+	}
+
+	.loading {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		color: var(--text-secondary);
+		font-size: 0.875rem;
+	}
+
+	.spinner {
+		width: 1rem;
+		height: 1rem;
+		border: 2px solid var(--border-color);
+		border-top-color: var(--link);
+		border-radius: 50%;
+		animation: spin 0.8s linear infinite;
+	}
+
+	@keyframes spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	.error {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.75rem;
+		color: var(--error);
+		font-size: 0.875rem;
+	}
+
+	.retry-btn {
+		padding: 0.25rem 0.75rem;
+		background: var(--color-3);
+		border: 1px solid var(--border-color);
+		border-radius: 0.5rem;
+		color: var(--text);
+		cursor: pointer;
+		font-size: 0.75rem;
+		transition: background 0.2s ease;
+	}
+
+	.retry-btn:hover {
+		background: var(--light-background);
+	}
+
+	.stats-grid {
+		display: grid;
+		grid-template-columns: repeat(2, 1fr);
+		gap: 0.75rem;
+	}
+
+	.stat-item {
+		padding: 0.75rem;
+		background: var(--color-3);
+		border-radius: 0.5rem;
+	}
+
+	.stat-label {
+		font-size: 0.75rem;
+		color: var(--text-secondary);
+		margin-bottom: 0.25rem;
+	}
+
+	.stat-value {
+		display: flex;
+		align-items: baseline;
+		gap: 0.25rem;
+	}
+
+	.count {
+		font-size: 1.25rem;
+		font-weight: 600;
+		color: var(--text);
+		font-variant-numeric: tabular-nums;
+	}
+
+	.docs {
+		font-size: 0.75rem;
+		color: var(--text-secondary);
+	}
+
+	.stat-error {
+		color: var(--error);
+	}
+
+	.refresh-btn {
+		position: absolute;
+		top: 0.5rem;
+		right: 0.5rem;
+		padding: 0.25rem;
+		background: transparent;
+		border: none;
+		cursor: pointer;
+		font-size: 0.875rem;
+		opacity: 0.6;
+		transition: opacity 0.2s ease;
+	}
+
+	.refresh-btn:hover {
+		opacity: 1;
+	}
+</style>