mongoku 2.2.4 → 2.4.0

package/src/lib/components/Modal.svelte

@@ -31,10 +31,10 @@
 		<div class="modal" onclick={(e) => e.stopPropagation()}>
 			{#if title}
 				<div class="modal-header">
-					<h3>{title}</h3>
+					<h3 style="color: var(--text);">{title}</h3>
 				</div>
 			{/if}
-			<div class="modal-body">
+			<div class="modal-body" style="color: var(--text);">
 				{@render children?.()}
 			</div>
 			{#if footer}
@@ -48,12 +48,12 @@
 
 <style lang="postcss">
 	.modal-header {
-		padding: 20px 20px 0;
+		padding: 24px 24px 0;
 	}
 
 	.modal-header h3 {
 		margin: 0;
-		font-size: 1.25rem;
-		font-weight: 500;
+		font-size: 1.375rem;
+		font-weight: 600;
 	}
 </style>

package/src/lib/components/Notifications.svelte

@@ -6,7 +6,22 @@
 	{#each notificationStore.items as notification (notification.id)}
 		<div class="notification notification-{notification.type}">
 			<span>{notification.message}</span>
-			<button onclick={() => notificationStore.remove(notification.id)}>&times;</button>
+			<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>
+			</button>
 		</div>
 	{/each}
 </div>
@@ -14,63 +29,69 @@
 <style lang="postcss">
 	.notifications {
 		position: fixed;
-		top: 80px;
+		top: 90px;
 		right: 20px;
-		z-index: 1000;
+		/* Show above modal overlay */
+		z-index: 1001;
 		display: flex;
 		flex-direction: column;
-		gap: 10px;
+		gap: 12px;
 	}
 
 	.notification {
-		padding: 15px 20px;
-		border-radius: 4px;
-		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+		padding: 14px 18px;
+		border-radius: 1rem;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+		backdrop-filter: blur(10px);
 		display: flex;
 		align-items: center;
-		gap: 15px;
-		min-width: 300px;
-		max-width: 500px;
-		animation: slideIn 0.3s ease-out;
+		gap: 12px;
+		min-width: 320px;
+		max-width: 480px;
+		animation: slideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+		border: 1px solid rgba(255, 255, 255, 0.1);
+		font-size: 14px;
 
 		button {
-			background: none;
+			background: rgba(255, 255, 255, 0.2);
 			border: none;
-			font-size: 24px;
+			border-radius: 8px;
 			cursor: pointer;
-			opacity: 0.7;
+			opacity: 0.8;
 			margin-left: auto;
-			padding: 0;
-			width: 24px;
-			height: 24px;
+			padding: 4px;
+			width: 28px;
+			height: 28px;
 			display: flex;
 			align-items: center;
 			justify-content: center;
+			transition: all 0.2s;
 
 			&:hover {
 				opacity: 1;
+				background: rgba(255, 255, 255, 0.3);
 			}
 		}
 	}
 
 	.notification-error {
-		background-color: #dc3545;
+		background-color: #ff453a;
 		color: white;
 	}
 
 	.notification-success {
-		background-color: #28a745;
+		background-color: #32d74b;
 		color: white;
 	}
 
 	.notification-info {
-		background-color: #17a2b8;
+		background-color: #0a84ff;
 		color: white;
 	}
 
 	@keyframes slideIn {
 		from {
-			transform: translateX(400px);
+			transform: translateX(450px);
 			opacity: 0;
 		}
 		to {

package/src/lib/components/PageSwitcher.svelte

@@ -14,21 +14,27 @@
 </script>
 
 {#if categories.length}
-	<div class="flex {className}">
-		{#each categories as category, index (category.key)}
+	<div
+		class="hidden sm:flex rounded-lg border border-[var(--border-color)] overflow-hidden bg-[var(--light-background)] shadow-sm {className}"
+	>
+		{#each categories as category (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}>
+				<span
+					class="px-3 py-1.5 text-[13px] font-medium bg-[var(--color-1)] shadow-[inset_0_-1px_0_rgba(0,0,0,0.06)] cursor-default"
+					style="color: var(--text);"
+				>
 					{category.label}
 				</span>
 			{:else}
-				<!-- eslint-disable-next-line @typescript-eslint/no-explicit-any -->
-				<a href={resolve(category.href as any)} class={sharedClasses}>
+				<!-- eslint-disable @typescript-eslint/no-explicit-any -->
+				<!-- data-sveltekit-reload because sometimes, when on documents pages and switching to indexes page, I get an error -->
+				<a
+					data-sveltekit-reload
+					href={resolve(category.href as any)}
+					class="px-3 py-1.5 text-[13px] hover:bg-[var(--color-3)] transition no-underline"
+					style="color: var(--text-secondary);"
+				>
 					{category.label}
 				</a>
 			{/if}

package/src/lib/components/Panel.svelte

@@ -4,21 +4,32 @@
 	interface Props {
 		children?: Snippet;
 		title?: string | Snippet;
+		titleClass?: string;
 		actions?: Snippet;
 		class?: string;
+		ref?: HTMLDivElement;
 	}
 
-	let { children, title, actions, class: className }: Props = $props();
+	let { children, title, titleClass, actions, class: className, ref = $bindable() }: Props = $props();
 </script>
 
-<div class="panel rounded-md {className}">
+<div
+	bind:this={ref}
+	class="rounded-2xl border border-[var(--border-color)] bg-[var(--light-background)]/70 shadow-sm {className}"
+>
 	{#if title}
-		<div class="px-4 py-2 flex justify-between items-center text-lg uppercase font-medium">
-			{#if typeof title === "string"}
-				<span>{title}</span>
-			{:else}
-				{@render title()}
-			{/if}
+		<div
+			class="px-3 sm:px-4 py-2 flex justify-between items-center {children
+				? 'border-b border-[var(--border-color)]'
+				: ''}"
+		>
+			<div class="text-sm font-medium {titleClass}" style="color: var(--text);">
+				{#if typeof title === "string"}
+					<span>{title}</span>
+				{:else}
+					{@render title()}
+				{/if}
+			</div>
 			{#if actions}
 				<div class="flex gap-2 items-center">
 					{@render actions()}
@@ -28,10 +39,3 @@
 	{/if}
 	{@render children?.()}
 </div>
-
-<style lang="postcss">
-	.panel {
-		background-color: var(--light-background);
-		border: var(--border);
-	}
-</style>

package/src/lib/components/PrettyJson.svelte

@@ -4,7 +4,7 @@
 	import { jsonTextarea } from "$lib/actions/jsonTextarea";
 	import { notificationStore } from "$lib/stores/notifications.svelte";
 	import type { Mappings, MongoDocument } from "$lib/types";
-	import { parseJSON } from "$lib/utils/jsonParser";
+	import { parseJSON, serializeForEditing } from "$lib/utils/jsonParser";
 	import JsonValue from "./JsonValue.svelte";
 	import Panel from "./Panel.svelte";
 
@@ -90,7 +90,9 @@
 	let editJson = $state("");
 	let removing = $state(false);
 	let contentContainerRef = $state<HTMLDivElement>();
-	let editorHeight = $state<string>("300px");
+	let textareaRef = $state<HTMLTextAreaElement>();
+	let panelRef = $state<HTMLDivElement>();
+	let lastSetHeight = $state<number>(0);
 
 	// Extract timestamp from ObjectId
 	function getTimestampFromObjectId(objectId: string): Date | null {
@@ -103,61 +105,8 @@
 		}
 	}
 
-	// Custom serializer that converts ObjectId objects back to new ObjectId() format
-	function serializeForEditing(obj: any, depth = 0): string {
-		const indent = "\t".repeat(depth);
-		const nextIndent = "\t".repeat(depth + 1);
-
-		if (obj === null) return "null";
-		if (obj === undefined) return "undefined";
-		if (typeof obj === "string") return JSON.stringify(obj);
-		if (typeof obj === "number") return obj.toString();
-		if (typeof obj === "boolean") return obj.toString();
-
-		if (Array.isArray(obj)) {
-			if (obj.length === 0) return "[]";
-			const items = obj.map((item) => `${nextIndent}${serializeForEditing(item, depth + 1)}`).join(",\n");
-			return `[\n${items}\n${indent}]`;
-		}
-
-		if (typeof obj === "object") {
-			// Handle special MongoDB types
-			if (obj.$type === "ObjectId") {
-				return `new ObjectId("${obj.$value}")`;
-			}
-			if (obj.$type === "Date") {
-				return `new Date("${obj.$value}")`;
-			}
-			if (obj.$type === "RegExp") {
-				return `new RegExp("${obj.$value.$pattern}", "${obj.$value.$flags}")`;
-			}
-
-			// Handle regular objects
-			const keys = Object.keys(obj);
-			if (keys.length === 0) return "{}";
-
-			const pairs = keys
-				.map((key) => {
-					const value = serializeForEditing(obj[key], depth + 1);
-					return `${nextIndent}${JSON.stringify(key)}: ${value}`;
-				})
-				.join(",\n");
-
-			return `{\n${pairs}\n${indent}}`;
-		}
-
-		return JSON.stringify(obj);
-	}
-
 	function enableEditor() {
 		editJson = serializeForEditing(json);
-
-		// Set editor height to match the full content container (including padding)
-		if (contentContainerRef) {
-			const height = contentContainerRef.offsetHeight;
-			editorHeight = `${Math.max(height, 300)}px`;
-		}
-
 		editorVisible = true;
 	}
 
@@ -168,9 +117,39 @@
 		}
 	});
 
+	// Watch for textarea resize and update panel height
+	$effect(() => {
+		if (!textareaRef || !panelRef || !editorVisible) return;
+
+		const resizeObserver = new ResizeObserver((entries) => {
+			for (const entry of entries) {
+				const newHeight = entry.borderBoxSize[0].blockSize;
+				// Only update if height changed and is different from what we last set
+				if (newHeight > 0 && Math.abs(newHeight - lastSetHeight) > 1) {
+					const totalHeight = newHeight; // Add padding for buttons
+					lastSetHeight = newHeight;
+					if (panelRef) {
+						panelRef.style.minHeight = `${totalHeight}px`;
+					}
+				}
+			}
+		});
+
+		resizeObserver.observe(textareaRef);
+
+		return () => {
+			resizeObserver.disconnect();
+		};
+	});
+
 	function disableEditor() {
 		editorVisible = false;
 		editJson = "";
+		lastSetHeight = 0;
+		// Reset panel min-height when editor closes
+		if (panelRef) {
+			panelRef.style.minHeight = "";
+		}
 	}
 
 	function save() {
@@ -209,20 +188,24 @@
 {#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>
+		<div class="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 min-w-0 flex-1">
+			<h2 class="truncate">
+				<a
+					class="text-[15px] sm:text-base font-semibold hover:underline no-underline"
+					style="color: var(--text); text-decoration-color: var(--link);"
+					href={resolve(
+						`/servers/${encodeURIComponent(server)}/databases/${encodeURIComponent(database)}/collections/${encodeURIComponent(collection)}/documents/${idValue}`,
+					)}
+				>
+					{idValue}
+				</a>
+			</h2>
 			{#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>
+					<p class="text-xs" style="color: var(--text-secondary);">
+						Created on {timestamp.toLocaleDateString()} · {timestamp.toLocaleTimeString()}
+					</p>
 				{/if}
 			{/if}
 		</div>
@@ -230,44 +213,73 @@
 {/snippet}
 
 {#snippet actions()}
-	<div class="hidden group-hover:block">
-		<button class="btn btn-outline-light btn-sm ml-2 -my-2" onclick={copyToClipboard}>Copy</button>
+	<div class="hidden group-hover:flex items-center gap-2 -my-2">
+		<button
+			class="px-3 py-1 rounded-lg border border-[var(--border-color)] bg-[var(--light-background)] hover:bg-[var(--color-3)] text-[13px] transition cursor-pointer"
+			style="color: var(--text);"
+			onclick={copyToClipboard}
+		>
+			Copy
+		</button>
 		{#if onedit}
-			<button class="btn btn-outline-light btn-sm ml-2 -my-2" onclick={enableEditor}>Edit</button>
+			<button
+				class="px-3 py-1 rounded-lg border border-[var(--border-color)] bg-[var(--light-background)] hover:bg-[var(--color-3)] text-[13px] transition cursor-pointer"
+				style="color: var(--text);"
+				onclick={enableEditor}
+			>
+				Edit
+			</button>
 		{/if}
 		{#if onremove}
-			<button class="btn btn-outline-danger btn-sm ml-2 -my-2" onclick={showRemove}>Remove</button>
+			<button
+				class="px-3 py-1 rounded-lg border border-red-200 hover:bg-red-50 text-[13px] transition cursor-pointer"
+				style="color: var(--button-danger);"
+				onclick={showRemove}
+			>
+				Delete
+			</button>
 		{/if}
 	</div>
 {/snippet}
 
-<Panel class="group" title={json._id ? title : undefined} {actions}>
-	<div bind:this={contentContainerRef} class=" relative border-t border-[var(--border-color)]">
-		<div class="font-mono text-sm leading-tight whitespace-pre-wrap break-words p-4 overflow-x-auto">
+<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} />
 		</div>
 
-		<div class="absolute h-full z-[100] w-full top-0 left-0" class:hidden={!editorVisible} class:block={editorVisible}>
-			<div class="absolute z-10 right-5 top-4">
-				<button class="btn btn-success ml-2" onclick={save}>Save</button>
-				<button class="btn btn-default ml-2" onclick={disableEditor}>Cancel</button>
+		{#if removing}
+			<div
+				class="absolute z-10 top-0 left-0 w-full h-full rounded-2xl backdrop-blur-sm flex items-center justify-center"
+				style="background-color: rgba(0, 0, 0, 0.4);"
+			>
+				<div
+					class="bg-[var(--light-background)] rounded-2xl p-6 shadow-xl border border-[var(--border-color)] max-w-sm mx-4"
+				>
+					<p class="text-lg font-semibold mb-4" style="color: var(--text);">Delete this document?</p>
+					<p class="text-sm mb-6" style="color: var(--text-secondary);">This action cannot be undone.</p>
+					<div class="flex gap-3">
+						<button class="btn btn-danger flex-1" onclick={confirmRemove}>Delete</button>
+						<button class="btn btn-default flex-1" onclick={cancelRemove}>Cancel</button>
+					</div>
+				</div>
 			</div>
+		{/if}
+	</div>
+
+	{#if editorVisible}
+		<div class="absolute inset-0 z-[100] bg-[var(--light-background)]">
 			<textarea
+				bind:this={textareaRef}
 				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"
+				class="w-full h-full font-mono text-[13px] sm:text-[14px] leading-relaxed p-4 border-0 bg-[var(--color-3)] focus:outline-none focus:ring-0"
+				style="color: var(--text);"
 			></textarea>
-		</div>
-
-		{#if removing}
-			<div class="absolute z-10 top-0 left-0 w-full h-full rounded bg-[var(--text-inverse)] opacity-70">
-				<p class="text-[var(--text)] text-center mt-5 text-2xl">Are you sure?</p>
-				<div class="absolute w-full h-full top-0 flex justify-center items-center">
-					<button class="btn btn-danger m-5" onclick={confirmRemove}>Yes - Remove</button>
-					<button class="btn btn-success m-5" onclick={cancelRemove}>No - Cancel</button>
-				</div>
+			<div class="absolute top-3 right-3 flex items-center gap-2">
+				<button class="btn btn-success" onclick={save}>Save</button>
+				<button class="btn btn-default" onclick={disableEditor}>Cancel</button>
 			</div>
-		{/if}
-	</div>
+		</div>
+	{/if}
 </Panel>

package/src/lib/components/ReplicaSetSelector.svelte

@@ -0,0 +1,144 @@
+<script lang="ts">
+	import { findBestSuffixMatch } from "$lib/utils/longestCommonSuffix";
+
+	interface Props {
+		availableNodes?: string[];
+		selectedNodes?: string[];
+		loading?: boolean;
+		primaryNode?: string | null;
+	}
+
+	let {
+		availableNodes = $bindable([]),
+		selectedNodes = $bindable([]),
+		loading = false,
+		primaryNode = null,
+	}: Props = $props();
+
+	// Track which nodes are checked - sync with selectedNodes prop
+	let nodeCheckedState = $derived.by(() =>
+		Object.fromEntries(availableNodes.map((node) => [node, selectedNodes.includes(node)])),
+	);
+
+	// Find the actual primary node by matching the longest common suffix
+	const matchedPrimaryNode = $derived.by(() => {
+		if (!primaryNode || availableNodes.length === 0) return null;
+		return findBestSuffixMatch(primaryNode, availableNodes);
+	});
+
+	function refreshSelectedNodes() {
+		selectedNodes = Object.keys(nodeCheckedState).filter((node) => nodeCheckedState[node]);
+	}
+</script>
+
+<div class="replica-set-selector">
+	<div class="selector-header">
+		<span class="selector-title">Replica Set Nodes</span>
+		<span class="selector-subtitle">Select specific nodes to fetch index stats from</span>
+	</div>
+
+	{#if loading}
+		<div class="loading-message">Loading nodes...</div>
+	{:else if availableNodes.length === 0}
+		<div class="no-nodes-message">No nodes found. Click "Fetch Usage" to load nodes.</div>
+	{:else}
+		<div class="selector-options">
+			{#each availableNodes as node (node)}
+				<label class="checkbox-label">
+					<input type="checkbox" bind:checked={nodeCheckedState[node]} onchange={refreshSelectedNodes} />
+					<span class="node-name" title={node}>
+						{node}
+						{#if node === matchedPrimaryNode}
+							<span class="primary-badge">PRIMARY</span>
+						{/if}
+					</span>
+				</label>
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<style lang="postcss">
+	.replica-set-selector {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+		padding: 16px;
+		border-radius: 8px;
+		background-color: var(--color-2);
+		border: 1px solid var(--border-color);
+	}
+
+	.selector-header {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+	}
+
+	.selector-title {
+		font-size: 14px;
+		font-weight: 600;
+		color: var(--text);
+	}
+
+	.selector-subtitle {
+		font-size: 12px;
+		color: var(--text-darker);
+	}
+
+	.selector-options {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	.checkbox-label {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		cursor: pointer;
+		font-size: 14px;
+		color: var(--text);
+		user-select: none;
+	}
+
+	.checkbox-label input[type="checkbox"] {
+		width: 16px;
+		height: 16px;
+		cursor: pointer;
+		accent-color: var(--button-primary);
+	}
+
+	.loading-message,
+	.no-nodes-message {
+		padding: 12px;
+		font-size: 13px;
+		color: var(--text-darker);
+		text-align: center;
+		background-color: var(--color-3);
+		border-radius: 4px;
+	}
+
+	.node-name {
+		font-family: monospace;
+		font-size: 13px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+
+	.primary-badge {
+		display: inline-block;
+		padding: 2px 6px;
+		background-color: hsl(210, 100%, 50%);
+		color: white;
+		border-radius: 3px;
+		font-size: 10px;
+		font-weight: 700;
+		letter-spacing: 0.5px;
+		flex-shrink: 0;
+	}
+</style>