mongoku 2.2.4 → 2.3.0

package/src/lib/components/SearchBox.svelte

@@ -61,18 +61,18 @@
 	let form = $state<HTMLFormElement | undefined>(undefined);
 </script>
 
-<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="rounded-2xl border border-[var(--border-color)] bg-[var(--light-background)]/70 shadow-sm p-3 sm:p-4">
+	<form class="flex flex-col gap-3" method="GET" action="?" onsubmit={submit} bind:this={form}>
+		<!-- Query input (always shown) -->
+		<div class="flex items-stretch gap-2">
+			<div
+				class="flex-1 flex items-stretch rounded-xl border border-[var(--border-color)] overflow-hidden bg-[var(--color-3)]/50"
+			>
 				<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"
+					class="px-3 flex items-center text-[13px] border-r border-[var(--border-color)]"
+					style="color: var(--text-secondary);"
 				>
-					{isAggregation ? "Aggregation:" : "Query:"}
+					{isAggregation ? "Aggregation" : "Query"}
 				</div>
 				{#if isAggregation}
 					<textarea
@@ -82,7 +82,8 @@
 						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"
+						class="w-full px-3 py-2 bg-transparent outline-none font-mono text-[13px] resize-y"
+						style="color: var(--text);"
 					></textarea>
 				{:else}
 					<input
@@ -91,134 +92,154 @@
 						bind:value={params.query}
 						placeholder={"{}"}
 						name="query"
-						class="flex-grow border-0 bg-[var(--color-3)] pl-2.5 font-mono"
+						class="w-full h-9 px-3 bg-transparent outline-none font-mono text-[13px] border-0 !rounded-none"
+						style="color: var(--text);"
 					/>
 				{/if}
 			</div>
 
 			<input type="hidden" value={counter} name="v" />
-			<!-- Sort input -->
-			{#if showOptionalFields}
-				<div class="flex items-stretch w-full h-10">
+
+			<div class="flex items-center gap-2">
+				<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"
+					style="color: var(--text);"
+					title="Toggle optional fields"
+					onclick={() => {
+						showOptionalFields = !showOptionalFields;
+					}}
+				>
+					{showOptionalFields ? "−" : "+"}
+				</button>
+				{#if !readonly}
+					<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"
+						style="color: var(--text);"
+						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="16"
+							height="16"
+							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}
+				<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"
+				>
+					Go
+				</button>
+			</div>
+		</div>
+
+		<!-- Optional fields -->
+		{#if showOptionalFields}
+			<div class="grid gap-2 sm:grid-cols-2">
+				<!-- Sort -->
+				<div class="rounded-xl border border-[var(--border-color)] overflow-hidden bg-[var(--color-3)]/50">
 					<div
-						class="min-w-[100px] flex justify-center items-center border border-[var(--color-4)] border-b-0 bg-[var(--color-1)]"
+						class="px-3 py-1.5 text-[12px] border-b border-[var(--border-color)]"
+						style="color: var(--text-secondary);"
 					>
-						Sort:
+						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"
+						class="w-full h-9 px-3 bg-transparent outline-none font-mono text-[13px] border-0 !rounded-none"
+						style="color: var(--text);"
 					/>
 				</div>
 
-				<!-- Skip input -->
-				<div class="flex items-stretch w-full h-10">
+				<!-- Project -->
+				<div class="rounded-xl border border-[var(--border-color)] overflow-hidden bg-[var(--color-3)]/50">
 					<div
-						class="min-w-[100px] flex justify-center items-center border border-[var(--color-4)] border-b-0 bg-[var(--color-1)]"
+						class="px-3 py-1.5 text-[12px] border-b border-[var(--border-color)]"
+						style="color: var(--text-secondary);"
 					>
-						Skip:
+						Project
 					</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"
+						type="text"
+						bind:value={params.project}
+						name="project"
+						placeholder={"{}"}
+						class="w-full h-9 px-3 bg-transparent outline-none font-mono text-[13px] border-0 !rounded-none"
+						style="color: var(--text);"
 					/>
 				</div>
 
-				<!-- Limit input -->
-				<div class="flex items-stretch w-full h-10">
+				<!-- Skip -->
+				<div class="rounded-xl border border-[var(--border-color)] overflow-hidden bg-[var(--color-3)]/50">
 					<div
-						class="min-w-[100px] flex justify-center items-center border border-[var(--color-4)] border-b-0 bg-[var(--color-1)]"
+						class="px-3 py-1.5 text-[12px] border-b border-[var(--border-color)]"
+						style="color: var(--text-secondary);"
 					>
-						Limit:
+						Skip
 					</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"
+						bind:value={params.skip}
+						name="skip"
+						min="0"
+						class="w-full h-9 px-3 bg-transparent outline-none font-mono text-[13px] border-0 !rounded-none"
+						style="color: var(--text);"
 					/>
 				</div>
 
-				<!-- Project input -->
-				<div class="flex items-stretch w-full h-10">
+				<!-- Limit -->
+				<div class="rounded-xl border border-[var(--border-color)] overflow-hidden bg-[var(--color-3)]/50">
 					<div
-						class="min-w-[100px] flex justify-center items-center border border-[var(--color-4)] border-b bg-[var(--color-1)] rounded-bl-md"
+						class="px-3 py-1.5 text-[12px] border-b border-[var(--border-color)]"
+						style="color: var(--text-secondary);"
 					>
-						Project:
+						Limit
 					</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"
+						type="number"
+						bind:value={params.limit}
+						name="limit"
+						min="1"
+						class="w-full h-9 px-3 bg-transparent outline-none font-mono text-[13px] border-0 !rounded-none"
+						style="color: var(--text);"
 					/>
 				</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>
+			</div>
 		{/if}
 
-		<!-- Search button -->
-		<button class="btn btn-success !rounded-l-none !rounded-r-md font-bold !py-1.5" type="submit"> GO! </button>
+		<!-- Help text -->
+		{#if !showOptionalFields && !isAggregation && params.query === "{}"}
+			<div class="text-xs" style="color: var(--text-secondary);">
+				Tip: Use <code class="px-1.5 py-0.5 rounded bg-[var(--color-3)] border border-[var(--border-color)] font-mono"
+					>[{"{...}"}]</code
+				> to switch to aggregation mode
+			</div>
+		{/if}
 	</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[type="text"],
+	input[type="number"],
 	textarea {
-		border-radius: 0;
+		border-radius: 0 !important;
 	}
 </style>

package/src/lib/components/ThemeSwitcher.svelte

@@ -1,13 +1,29 @@
 <script lang="ts">
 	type Theme = "system" | "light" | "dark";
 
-	let currentTheme = $state<Theme>("dark");
+	let currentTheme = $state<Theme>("system");
+	let systemTheme = $state<"light" | "dark">("light");
 
-	// Load theme from localStorage on mount
+	// Load theme from localStorage on mount and listen for system theme changes
 	$effect(() => {
 		if (typeof window !== "undefined") {
 			const stored = localStorage.getItem("theme") as Theme | null;
-			currentTheme = stored || "dark";
+			currentTheme = stored || "system";
+
+			// Detect system theme
+			const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+			systemTheme = mediaQuery.matches ? "dark" : "light";
+
+			// Listen for system theme changes
+			const handler = (e: MediaQueryListEvent) => {
+				systemTheme = e.matches ? "dark" : "light";
+				if (currentTheme === "system") {
+					setTheme("system");
+				}
+			};
+			mediaQuery.addEventListener("change", handler);
+
+			return () => mediaQuery.removeEventListener("change", handler);
 		}
 	});
 
@@ -20,47 +36,186 @@
 		if (theme === "system") {
 			const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
 			root.setAttribute("data-theme", prefersDark ? "dark" : "light");
+			// Also add/remove dark class for Tailwind
+			if (prefersDark) {
+				root.classList.add("dark");
+			} else {
+				root.classList.remove("dark");
+			}
 		} else {
 			root.setAttribute("data-theme", theme);
+			// Also add/remove dark class for Tailwind
+			if (theme === "dark") {
+				root.classList.add("dark");
+			} else {
+				root.classList.remove("dark");
+			}
 		}
-	}
 
-	function cycleTheme() {
-		const themes: Theme[] = ["system", "light", "dark"];
-		const currentIndex = themes.indexOf(currentTheme);
-		const nextTheme = themes[(currentIndex + 1) % themes.length];
-		setTheme(nextTheme);
+		// Set theme mode for CSS-based rendering
+		root.setAttribute("data-theme-mode", theme);
 	}
 
-	const icon = $derived.by(() => {
-		switch (currentTheme) {
-			case "light":
-				return "☀️";
-			case "dark":
-				return "🌙";
-			case "system":
-				return "💻";
-		}
-	});
+	const oppositeTheme = $derived(systemTheme === "dark" ? "light" : "dark");
 
-	const label = $derived.by(() => {
-		switch (currentTheme) {
-			case "light":
-				return "Light";
-			case "dark":
-				return "Dark";
-			case "system":
-				return "System";
+	function toggleTheme() {
+		if (currentTheme === "system") {
+			setTheme(oppositeTheme);
+		} else {
+			// Toggle between light and dark
+			setTheme(currentTheme === "light" ? "dark" : "light");
 		}
-	});
+	}
 </script>
 
-<button
-	onclick={cycleTheme}
-	class="btn btn-default btn-sm flex items-center gap-2"
-	title="Change theme (current: {label})"
-	aria-label="Change theme"
+{#snippet sunIcon()}
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		class="h-4 w-4"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="1.6"
+	>
+		<circle cx="12" cy="12" r="4"></circle>
+		<path
+			d="M12 2v2m0 16v2m10-10h-2M4 12H2m15.364-7.364-1.414 1.414M8.05 16.95l-1.414 1.414m0-12.728L8.05 6.364m10.607 10.607 1.414 1.414"
+		></path>
+	</svg>
+{/snippet}
+
+{#snippet moonIcon()}
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		class="h-4 w-4"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="1.6"
+	>
+		<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+	</svg>
+{/snippet}
+
+{#snippet systemIcon()}
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		class="h-4 w-4"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="1.6"
+	>
+		<rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
+		<line x1="8" y1="21" x2="16" y2="21"></line>
+		<line x1="12" y1="17" x2="12" y2="21"></line>
+	</svg>
+{/snippet}
+
+<div
+	class="theme-switcher inline-flex rounded-lg border border-[var(--border-color)] bg-[var(--light-background)] overflow-hidden text-sm font-medium"
+	style="color: var(--text);"
 >
-	<span class="text-base">{icon}</span>
-	<span class="hidden sm:inline">{label}</span>
-</button>
+	<!-- Left side -->
+	<button
+		onclick={toggleTheme}
+		class="inline-flex items-center gap-2 px-2.5 py-1.5 hover:bg-[var(--color-3)] transition cursor-pointer"
+		aria-label="Toggle theme"
+	>
+		<!-- Light mode selected -->
+		<span class="theme-content theme-light inline-flex items-center gap-2">
+			{@render sunIcon()}
+			<span class="hidden sm:inline text-[13px]" style="color: var(--text-secondary);">Light</span>
+		</span>
+
+		<!-- Dark mode selected -->
+		<span class="theme-content theme-dark inline-flex items-center gap-2">
+			{@render moonIcon()}
+			<span class="hidden sm:inline text-[13px]" style="color: var(--text-secondary);">Dark</span>
+		</span>
+
+		<!-- System mode + light actual theme -->
+		<span class="theme-content theme-system-light inline-flex items-center gap-2">
+			{@render sunIcon()}
+		</span>
+
+		<!-- System mode + dark actual theme -->
+		<span class="theme-content theme-system-dark inline-flex items-center gap-2">
+			{@render moonIcon()}
+		</span>
+	</button>
+
+	<!-- Divider -->
+	<div class="w-px bg-[var(--border-color)]"></div>
+
+	<!-- Right side -->
+	<button
+		onclick={() => setTheme("system")}
+		class="inline-flex items-center gap-2 px-2.5 py-1.5 hover:bg-[var(--color-3)] transition cursor-pointer"
+		aria-label="Switch to system theme"
+	>
+		{@render systemIcon()}
+		<span class="theme-text-system hidden sm:inline text-[13px]" style="color: var(--text-secondary);"> System </span>
+	</button>
+</div>
+
+<style>
+	/* Hide all theme content by default */
+	.theme-content {
+		display: none;
+	}
+
+	/* Show light mode when selected */
+	:global(html[data-theme-mode="light"]) .theme-light {
+		display: inline-flex;
+		opacity: 1;
+	}
+
+	/* Show dark mode when selected */
+	:global(html[data-theme-mode="dark"]) .theme-dark {
+		display: inline-flex;
+		opacity: 1;
+	}
+
+	/* Show system mode icons based on actual theme */
+	:global(html[data-theme-mode="system"][data-theme="light"]) .theme-system-light {
+		display: inline-flex;
+		opacity: 0.6;
+	}
+
+	:global(html[data-theme-mode="system"][data-theme="dark"]) .theme-system-dark {
+		display: inline-flex;
+		opacity: 0.6;
+	}
+
+	/* Show System text only when system mode is selected */
+	.theme-text-system {
+		display: none;
+	}
+
+	:global(html[data-theme-mode="system"]) .theme-text-system {
+		display: inline;
+	}
+
+	/* Opacity for left button when not system mode */
+	:global(html[data-theme-mode="light"]) .theme-switcher button:first-child,
+	:global(html[data-theme-mode="dark"]) .theme-switcher button:first-child {
+		opacity: 1;
+	}
+
+	/* Opacity for left button when system mode */
+	:global(html[data-theme-mode="system"]) .theme-switcher button:first-child {
+		opacity: 0.6;
+	}
+
+	/* Opacity for right button when system mode */
+	:global(html[data-theme-mode="system"]) .theme-switcher button:last-child {
+		opacity: 1;
+	}
+
+	/* Opacity for right button when not system mode */
+	:global(html[data-theme-mode="light"]) .theme-switcher button:last-child,
+	:global(html[data-theme-mode="dark"]) .theme-switcher button:last-child {
+		opacity: 0.6;
+	}
+</style>

package/src/lib/components/Tooltip.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { portal } from "$lib/actions/portal";
 	import { tick, type Snippet } from "svelte";
 
 	interface Props {
@@ -10,9 +11,13 @@
 		show?: boolean;
 		/** Additional class for the tooltip container */
 		tooltipClass?: string;
+		/** Callback when mouse enters the tooltip content */
+		onTooltipMouseEnter?: () => void;
+		/** Callback when mouse leaves the tooltip content */
+		onTooltipMouseLeave?: () => void;
 	}
 
-	let { trigger, content, show = false, tooltipClass = "" }: Props = $props();
+	let { trigger, content, show = false, tooltipClass = "", onTooltipMouseEnter, onTooltipMouseLeave }: Props = $props();
 
 	let tooltipElement = $state<HTMLDivElement>();
 	let containerElement = $state<HTMLDivElement>();
@@ -67,16 +72,20 @@
 	});
 </script>
 
-<div class="relative inline-block" bind:this={containerElement}>
-	{@render trigger()}{#if show}
-		<div
-			class="fixed 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}
-		>
-			{@render content()}
-		</div>
-	{/if}
-</div>
+<!-- The formatting is intentional to avoid adding extra spaces around the trigger -->
+<div class="relative inline-block" bind:this={containerElement}>{@render trigger()}</div>{#if show}
+	<div
+		use:portal
+		role="tooltip"
+		class="fixed bg-[var(--light-background)] border border-[var(--border-color)] rounded-2xl z-[1000] shadow-xl backdrop-blur-md {tooltipClass}"
+		bind:this={tooltipElement}
+		style:left={tooltipPosition.left}
+		style:right={tooltipPosition.right}
+		style:top={tooltipPosition.top}
+		style="color: var(--text);"
+		onmouseenter={onTooltipMouseEnter}
+		onmouseleave={onTooltipMouseLeave}
+	>
+		{@render content()}
+	</div>
+{/if}

package/src/routes/+layout.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { resolve } from "$app/paths";
+	import { createPortal } from "$lib/actions/portal";
 	import Breadcrumbs from "$lib/components/Breadcrumbs.svelte";
 	import Notifications from "$lib/components/Notifications.svelte";
 	import OriginWarning from "$lib/components/OriginWarning.svelte";
@@ -15,26 +16,44 @@
 </svelte:head>
 
 <div style="min-height: 100vh">
-	<nav class="navbar px-6 py-4 flex items-center">
-		<a href={resolve("/")} class="text-2xl font-medium">Mongoku</a>
-		<Breadcrumbs />
-		<div class="ml-auto flex items-center gap-2">
-			<PageSwitcher class="" />
-			<ThemeSwitcher />
+	<!-- App bar -->
+	<header class="sticky top-0 z-50 border-b border-[var(--border-color)] bg-[var(--background-color)]/80">
+		<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+			<div class="h-14 flex items-center gap-3">
+				<!-- Logo -->
+				<a href={resolve("/")} class="inline-flex items-center gap-2 group no-underline hover:no-underline">
+					<span
+						class="inline-flex items-center justify-center w-7 h-7 rounded-md bg-black dark:bg-white text-white dark:text-black text-sm font-semibold select-none"
+					>
+						M
+					</span>
+					<span class="text-lg font-semibold tracking-tight" style="color: var(--text);">Mongoku</span>
+				</a>
+
+				<div class="hidden md:block w-px h-5 bg-[var(--border-color)]"></div>
+
+				<!-- Breadcrumbs -->
+				<Breadcrumbs />
+
+				<div class="ml-auto flex items-center gap-2">
+					<!-- View tabs -->
+					<PageSwitcher class="" />
+					<ThemeSwitcher />
+				</div>
+			</div>
 		</div>
-	</nav>
+	</header>
 
 	<OriginWarning serverOrigin={data.serverOrigin} readOnly={data.readOnly} />
 
-	<div class="px-6 py-6 flex flex-col gap-6">
+	<!-- Main -->
+	<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 md:py-10">
 		<Notifications />
-		{@render children()}
-	</div>
-</div>
+		<div class="flex flex-col gap-6">
+			{@render children()}
+		</div>
+	</main>
 
-<style lang="postcss">
-	.navbar {
-		background-color: var(--light-background);
-		border-bottom: var(--border);
-	}
-</style>
+	<!-- Portal container for tooltips and other overlay content -->
+	<div use:createPortal></div>
+</div>

package/src/routes/servers/+page.svelte

@@ -171,7 +171,7 @@
 								{/if}
 							{/await}
 						</td>
-						<td style="width: 200px">
+						<td style="width: 250px">
 							<div class="flex gap-2 justify-end">
 								{#await server.details then details}
 									{#if "error" in details && details.error}