mongoku 2.0.2 → 2.0.4

package/src/lib/components/Breadcrumbs.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+	import { resolve } from "$app/paths";
+	import { page } from "$app/state";
+	import { serverName } from "$lib/utils/filters";
+
+	interface BreadcrumbItem {
+		label: string;
+		href?: string;
+	}
+
+	function getBreadcrumbs(pathname: string, params: Record<string, string>): BreadcrumbItem[] {
+		const breadcrumbs: BreadcrumbItem[] = [];
+
+		// Parse the path segments
+		const segments = pathname.split("/").filter(Boolean);
+
+		if (segments.length === 0) {
+			// We're at home, no breadcrumbs needed
+			return [];
+		}
+
+		if (segments[0] === "servers" && segments.length >= 3) {
+			const server = decodeURIComponent(params.server || "");
+			const serverDisplayName = serverName(server);
+
+			if (segments[2] === "databases") {
+				// /servers/{server}/databases
+				breadcrumbs.push({
+					label: serverDisplayName,
+					href: `/servers/${encodeURIComponent(server)}/databases`,
+				});
+
+				if (segments.length >= 5 && segments[3] && segments[4] === "collections") {
+					const database = decodeURIComponent(params.database || "");
+					// /servers/{server}/databases/{database}/collections
+					breadcrumbs.push({
+						label: database,
+						href: `/servers/${encodeURIComponent(server)}/databases/${encodeURIComponent(database)}/collections`,
+					});
+
+					if (segments.length >= 6 && segments[5]) {
+						const collection = decodeURIComponent(params.collection || "");
+
+						if (segments.length === 6) {
+							// /servers/{server}/databases/{database}/collections/{collection}
+							breadcrumbs.push({
+								label: collection,
+							});
+						} else if (segments.length >= 7 && segments[6] === "documents" && segments[7]) {
+							// /servers/{server}/databases/{database}/collections/{collection}/documents/{document}
+							breadcrumbs.push({
+								label: collection,
+								href: `/servers/${encodeURIComponent(server)}/databases/${encodeURIComponent(database)}/collections/${encodeURIComponent(collection)}`,
+							});
+
+							breadcrumbs.push({
+								label: decodeURIComponent(params.document || "[Document]"),
+							});
+						}
+					}
+				}
+			}
+		}
+
+		return breadcrumbs;
+	}
+
+	const breadcrumbs = $derived(getBreadcrumbs(page.url.pathname, page.params));
+</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>
+{/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

@@ -0,0 +1,248 @@
+<script lang="ts">
+	import JsonValue from "./JsonValue.svelte";
+
+	const INDENT = "    ";
+
+	interface Props {
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		value: any;
+		key?: string;
+		/** are sub items collapsed by default*/
+		autoCollapse?: boolean;
+		/** is it collapsed at top level */
+		collapsed?: boolean;
+		depth?: number;
+		localTopLevel?: boolean;
+	}
+
+	let { value, key, autoCollapse = false, collapsed = false, localTopLevel = true, depth = 0 }: Props = $props();
+
+	function toggleCollapse() {
+		collapsed = !collapsed;
+	}
+
+	function getIndent(level: number): string {
+		return INDENT.repeat(level);
+	}
+
+	function isUrl(str: string): boolean {
+		return /^https?:\/\/[^\s]+$/.test(str);
+	}
+
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	function getValueType(val: any): string {
+		if (val === null) return "null";
+		if (Array.isArray(val)) return "array";
+
+		switch (typeof val) {
+			case "boolean":
+				return "boolean";
+			case "number":
+				return "number";
+			case "string":
+				return "string";
+			case "object":
+				switch (val.$type) {
+					case "ObjectId":
+						return "objectid";
+					case "Date":
+						return "date";
+					case "RegExp":
+						return "regexp";
+					default:
+						return "object";
+				}
+			default:
+				return "unknown";
+		}
+	}
+
+	let valueType = $derived(getValueType(value));
+	let isCollapsible = $derived(valueType === "array" || valueType === "object");
+	let isEmpty = $derived(
+		(valueType === "array" && value.length === 0) || (valueType === "object" && Object.keys(value).length === 0),
+	);
+</script>
+
+{#if key !== undefined}
+	<span class="prop" class:collapsible={isCollapsible && !isEmpty} class:collapsed>
+		{getIndent(depth + 1)}<var>{key}</var>: <JsonValue
+			{value}
+			{autoCollapse}
+			collapsed={autoCollapse}
+			depth={depth + 1}
+			localTopLevel={false}
+		/>
+	</span>
+{:else}
+	<!-- Root value rendering -->
+	{#if valueType === "string"}
+		<span class="value quoted">
+			"<span class="string" class:url={isUrl(value)}>
+				{#if isUrl(value)}
+					<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
+					<a href={value} target="_blank">{value}</a>
+				{:else}
+					{value}
+				{/if}
+			</span>"
+		</span>
+	{:else if valueType === "number"}
+		<span class="value number">{value}</span>
+	{:else if valueType === "boolean"}
+		<span class="value boolean">{value}</span>
+	{:else if valueType === "null"}
+		<span class="value null">null</span>
+	{:else if valueType === "objectid"}
+		<span class="call function">ObjectId("<span class="string">{value.$value}</span>")</span>
+	{:else if valueType === "date"}
+		<span class="call function">Date("<span class="string">{value.$value}</span>")</span>
+	{:else if valueType === "regexp"}
+		<span class="value regexp">/{value.$value.$pattern}/{value.$value.$flags}</span>
+	{:else if valueType === "array"}
+		{#if isEmpty}
+			<span class="value array">[]</span>
+		{:else}
+			<span class="collapsible-wrapper" class:collapsed class:expanded={!collapsed}>
+				<button class="collapse-toggle" onclick={toggleCollapse}>
+					{collapsed ? "▶" : "▼"}
+				</button><span class="value array">
+					[<span class="collapsible-content" class:hidden={collapsed}>
+						{#each value as item, i (i)}
+							<br />{getIndent(depth + 1)}<JsonValue
+								value={item}
+								{autoCollapse}
+								collapsed={false}
+								depth={depth + 1}
+							/>{/each}
+						<br />{getIndent(depth)}
+					</span>{#if collapsed}
+						<span class="collapsed-summary">... {value.length} item{value.length !== 1 ? "s" : ""}</span>
+					{/if}]
+				</span>
+			</span>
+		{/if}
+	{:else if valueType === "object"}
+		{#if isEmpty}
+			<span class="value object">{"{}"}</span>
+		{:else}
+			<span class="collapsible-wrapper" class:collapsed class:expanded={!collapsed}>
+				{#if depth !== 0}<button class="collapse-toggle" class:local-top-level={localTopLevel} onclick={toggleCollapse}>
+						{collapsed ? "▶" : "▼"}
+					</button>{/if}<span class="value object">
+					{"{"}<span class="collapsible-content" class:hidden={collapsed}
+						>{#each Object.keys(value) as objKey (objKey)}
+							<JsonValue value={value[objKey]} key={objKey} {autoCollapse} collapsed={autoCollapse} {depth} />{/each}
+					</span>{#if collapsed}
+						<span class="collapsed-summary"
+							>... {Object.keys(value).length} key{Object.keys(value).length !== 1 ? "s" : ""}</span
+						>
+					{:else}
+						{getIndent(depth)}
+					{/if}}
+				</span>
+			</span>
+		{/if}
+	{:else}
+		<span>{String(value)}</span>
+	{/if}{#if depth !== 0},{/if}
+{/if}
+
+<style lang="postcss">
+	.prop {
+		position: relative;
+		display: block;
+	}
+
+	.collapsible-wrapper {
+		display: inline;
+		position: relative;
+
+		.collapse-toggle {
+			display: inline-block;
+			width: 16px;
+			cursor: pointer;
+			user-select: none;
+			color: var(--text-secondary, #888);
+			font-size: 12px;
+			margin-right: 4px;
+			transition: color 0.2s;
+			background: none;
+			border: none;
+			padding: 0;
+			font-family: inherit;
+
+			&.local-top-level {
+				position: absolute;
+				left: -18px;
+				margin-top: 4px;
+			}
+
+			&:hover {
+				color: var(--text, #fff);
+			}
+		}
+
+		&.collapsed .collapsible-content {
+			display: none;
+		}
+	}
+
+	.collapsible-content {
+		white-space: pre;
+
+		&.hidden {
+			display: none;
+		}
+	}
+
+	.collapsed-summary {
+		color: var(--text-secondary, #888);
+		font-style: italic;
+		margin: 0 4px;
+	}
+
+	.value {
+		&.number {
+			color: var(--code-numbers);
+		}
+
+		&.boolean {
+			color: var(--code-boolean);
+		}
+
+		&.null {
+			color: var(--code-null);
+		}
+
+		&.quoted {
+			.string {
+				color: var(--code-string);
+
+				&.url a {
+					color: var(--code-string);
+					text-decoration: underline;
+
+					&:hover {
+						color: var(--code-links);
+					}
+				}
+			}
+		}
+
+		&.regexp {
+			color: var(--code-regexp);
+		}
+	}
+
+	.call {
+		&.function {
+			color: var(--code-function);
+		}
+	}
+
+	var {
+		color: var(--code-namespace);
+		font-style: normal;
+	}
+</style>

package/src/lib/components/Notifications.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import { notificationStore } from "$lib/stores/notifications.svelte";
+</script>
+
+<div class="notifications">
+	{#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>
+		</div>
+	{/each}
+</div>
+
+<style lang="postcss">
+	.notifications {
+		position: fixed;
+		top: 80px;
+		right: 20px;
+		z-index: 1000;
+		display: flex;
+		flex-direction: column;
+		gap: 10px;
+	}
+
+	.notification {
+		padding: 15px 20px;
+		border-radius: 4px;
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+		display: flex;
+		align-items: center;
+		gap: 15px;
+		min-width: 300px;
+		max-width: 500px;
+		animation: slideIn 0.3s ease-out;
+
+		button {
+			background: none;
+			border: none;
+			font-size: 24px;
+			cursor: pointer;
+			opacity: 0.7;
+			margin-left: auto;
+			padding: 0;
+			width: 24px;
+			height: 24px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			&:hover {
+				opacity: 1;
+			}
+		}
+	}
+
+	.notification-error {
+		background-color: #dc3545;
+		color: white;
+	}
+
+	.notification-success {
+		background-color: #28a745;
+		color: white;
+	}
+
+	.notification-info {
+		background-color: #17a2b8;
+		color: white;
+	}
+
+	@keyframes slideIn {
+		from {
+			transform: translateX(400px);
+			opacity: 0;
+		}
+		to {
+			transform: translateX(0);
+			opacity: 1;
+		}
+	}
+</style>

package/src/lib/components/Panel.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		children?: Snippet;
+		title?: string | Snippet;
+		actions?: Snippet;
+		class?: string;
+	}
+
+	let { children, title, actions, class: className }: Props = $props();
+</script>
+
+<div class="panel rounded-md {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}
+			{#if actions}
+				<div class="flex gap-2 items-center">
+					{@render actions()}
+				</div>
+			{/if}
+		</div>
+	{/if}
+	{@render children?.()}
+</div>
+
+<style lang="postcss">
+	.panel {
+		background-color: var(--color-2);
+		border: var(--border);
+	}
+</style>

package/src/lib/components/PrettyJson.svelte

@@ -0,0 +1,197 @@
+<script lang="ts">
+	import { resolve } from "$app/paths";
+	import { notificationStore } from "$lib/stores/notifications.svelte";
+	import type { MongoDocument } from "$lib/types";
+	import { parseJSON } from "$lib/utils/jsonParser";
+	import JsonValue from "./JsonValue.svelte";
+	import Panel from "./Panel.svelte";
+
+	/* eslint-disable @typescript-eslint/no-explicit-any */
+
+	interface Props {
+		json: MongoDocument;
+		autoCollapse?: boolean;
+		readOnly?: boolean;
+		onedit?: (json: any) => void;
+		onremove?: () => void;
+		server: string;
+		database: string;
+		collection: string;
+	}
+
+	let {
+		json,
+		autoCollapse = false,
+		readOnly = false,
+		onedit,
+		onremove,
+		server,
+		database,
+		collection,
+	}: Props = $props();
+
+	let editorVisible = $state(false);
+	let editJson = $state("");
+	let removing = $state(false);
+	let editorRef = $state<HTMLTextAreaElement>();
+	let contentContainerRef = $state<HTMLDivElement>();
+	let editorHeight = $state<string>("300px");
+
+	// Extract timestamp from ObjectId
+	function getTimestampFromObjectId(objectId: string): Date | null {
+		try {
+			// ObjectId is 24 hex characters, first 8 represent timestamp
+			const timestamp = parseInt(objectId.substring(0, 8), 16);
+			return new Date(timestamp * 1000);
+		} catch {
+			return null;
+		}
+	}
+
+	// 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);
+
+		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;
+	}
+
+	function disableEditor() {
+		editorVisible = false;
+		editJson = "";
+	}
+
+	function save() {
+		try {
+			const updatedJson = parseJSON(editJson);
+			disableEditor();
+			onedit?.(updatedJson);
+		} catch (err) {
+			notificationStore.notifyError(err, "Invalid JSON");
+		}
+	}
+
+	function showRemove() {
+		removing = true;
+	}
+
+	function cancelRemove() {
+		removing = false;
+	}
+
+	function confirmRemove() {
+		onremove?.();
+	}
+</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}
+				{/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>
+		{/if}
+	{/snippet}
+
+	<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} />
+		</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>
+			</div>
+			<textarea
+				bind:this={editorRef}
+				bind:value={editJson}
+				style="height: {editorHeight};"
+				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>
+
+		{#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>
+		{/if}
+	</div>
+</Panel>