mongoku 2.2.4 → 2.3.0

package/src/lib/components/Breadcrumbs.svelte

@@ -18,65 +18,25 @@
 </script>
 
 {#if breadcrumbs.length > 0}
-	<nav class="breadcrumbs" aria-label="Breadcrumb">
-		<ol class="breadcrumb-list">
-			{#each breadcrumbs as crumb, index (index)}
-				<li class="breadcrumb-item">
-					{#if crumb.href && index < breadcrumbs.length - 1}
-						<!-- eslint-disable-next-line @typescript-eslint/no-explicit-any -->
-						<a href={resolve(crumb.href as any)} class="breadcrumb-link">{crumb.label}</a>
-					{:else}
-						<span class="breadcrumb-current">{crumb.label}</span>
-					{/if}
-					{#if index < breadcrumbs.length - 1}
-						<span class="breadcrumb-separator">/</span>
-					{/if}
-				</li>
-			{/each}
-		</ol>
+	<nav aria-label="Breadcrumb" class="hidden md:flex items-center gap-1 text-sm">
+		{#each breadcrumbs as crumb, index (index)}
+			{#if crumb.href && index < breadcrumbs.length - 1}
+				<!-- eslint-disable @typescript-eslint/no-explicit-any -->
+				<a
+					href={resolve(crumb.href as any)}
+					class="px-2 py-1 rounded-md hover:bg-[var(--color-3)] transition no-underline"
+					style="color: var(--text);"
+				>
+					{crumb.label}
+				</a>
+			{:else}
+				<span aria-current="page" class="px-2 py-1 rounded-md font-medium" style="color: var(--text);">
+					{crumb.label}
+				</span>
+			{/if}
+			{#if index < breadcrumbs.length - 1}
+				<span style="color: var(--text-secondary);">/</span>
+			{/if}
+		{/each}
 	</nav>
 {/if}
-
-<style lang="postcss">
-	.breadcrumbs {
-		margin-left: 20px;
-		font-size: 16px;
-	}
-
-	.breadcrumb-list {
-		display: flex;
-		align-items: center;
-		list-style: none;
-		margin: 0;
-		padding: 0;
-		gap: 8px;
-	}
-
-	.breadcrumb-item {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-	}
-
-	.breadcrumb-link {
-		color: var(--text);
-		text-decoration: none;
-		transition: color 0.2s;
-
-		&:hover {
-			color: var(--text);
-			text-decoration: underline;
-		}
-	}
-
-	.breadcrumb-current {
-		color: var(--text-darker);
-		font-weight: 500;
-	}
-
-	.breadcrumb-separator {
-		color: var(--text-darker);
-		font-weight: 300;
-		user-select: none;
-	}
-</style>

package/src/lib/components/JsonValue.svelte

@@ -52,6 +52,7 @@
 	let fetchedCollection = $state<string | null>(null);
 	let isFetching = $state(false);
 	let fetchError = $state<string | null>(null);
+	let hideTooltipTimeout: ReturnType<typeof setTimeout> | null = null;
 
 	// Check if current key has a mapping
 	const currentKeyPath = $derived([keyPath, key].filter(Boolean).join("."));
@@ -59,6 +60,12 @@
 	async function handleMouseEnter() {
 		if (!hasMappings || !fetchMappedDocument) return;
 
+		// Clear any pending hide timeout
+		if (hideTooltipTimeout) {
+			clearTimeout(hideTooltipTimeout);
+			hideTooltipTimeout = null;
+		}
+
 		showTooltip = true;
 
 		// If already fetched, don't fetch again
@@ -85,6 +92,23 @@
 	}
 
 	function handleMouseLeave() {
+		// Delay hiding to allow moving mouse to tooltip
+		hideTooltipTimeout = setTimeout(() => {
+			showTooltip = false;
+			hideTooltipTimeout = null;
+		}, 100);
+	}
+
+	function handleTooltipMouseEnter() {
+		// Cancel hiding when mouse enters tooltip
+		if (hideTooltipTimeout) {
+			clearTimeout(hideTooltipTimeout);
+			hideTooltipTimeout = null;
+		}
+	}
+
+	function handleTooltipMouseLeave() {
+		// Hide tooltip when mouse leaves tooltip content
 		showTooltip = false;
 	}
 
@@ -295,7 +319,12 @@
 		{/if}
 	{/snippet}
 	{#if hasMappings}
-		<Tooltip show={showTooltip} tooltipClass="max-w-[600px] max-h-[400px] overflow-auto whitespace-pre-wrap">
+		<Tooltip
+			show={showTooltip}
+			tooltipClass="max-w-[600px] max-h-[400px] overflow-auto whitespace-pre-wrap"
+			onTooltipMouseEnter={handleTooltipMouseEnter}
+			onTooltipMouseLeave={handleTooltipMouseLeave}
+		>
 			{#snippet trigger()}
 				<span
 					class="string mapped"

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,68 @@
 <style lang="postcss">
 	.notifications {
 		position: fixed;
-		top: 80px;
+		top: 90px;
 		right: 20px;
 		z-index: 1000;
 		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,25 @@
 </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 -->
+				<a
+					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

@@ -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 {
@@ -151,13 +153,6 @@
 
 	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 +163,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 +234,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 +259,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>