mongoku 2.0.1 → 2.0.3

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,187 @@
+<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>();
+
+	// 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);
+		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 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}
+				class="w-full min-h-[300px] 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>

package/src/lib/components/SearchBox.svelte

@@ -0,0 +1,160 @@
+<script lang="ts">
+	import { goto } from "$app/navigation";
+	import { resolve } from "$app/paths";
+	import { page } from "$app/state";
+	import type { SearchParams } from "$lib/types";
+
+	interface Props {
+		params: SearchParams;
+	}
+
+	let { params = $bindable() }: Props = $props();
+
+	// Show optional fields - start with all hidden
+	let showOptionalFields = $state(
+		params.sort !== "{}" || params.project !== "{}" || params.skip !== 0 || params.limit !== 20,
+	);
+
+	let counter = $state(Math.random());
+
+	let queryInput: HTMLInputElement | undefined;
+
+	$effect(() => {
+		if (queryInput) {
+			queryInput.setSelectionRange(1, 1 /* queryInput.value.length - 1 */);
+			queryInput.focus();
+		}
+	});
+
+	async function submit(event: SubmitEvent) {
+		event.preventDefault();
+		counter++;
+		const formData = new FormData(form);
+		await goto(
+			resolve(
+				(page.url.pathname +
+					"?" +
+					[...formData.entries()]
+						.map((e) => encodeURIComponent(e[0]) + "=" + encodeURIComponent(e[1] as string))
+						// eslint-disable-next-line @typescript-eslint/no-explicit-any
+						.join("&")) as any,
+			),
+			{
+				keepFocus: true,
+			},
+		);
+	}
+
+	let form: HTMLFormElement | undefined;
+</script>
+
+<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 h-10">
+			<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"
+			>
+				Query:
+			</div>
+			<input
+				type="text"
+				bind:this={queryInput}
+				bind:value={params.query}
+				placeholder={"{}"}
+				name="query"
+				class="flex-grow border-0 bg-[var(--color-3)] pl-2.5 font-mono"
+			/>
+		</div>
+
+		<input type="hidden" value={counter} name="v" />
+		<!-- Sort input -->
+		{#if showOptionalFields}
+			<div class="flex items-stretch w-full h-10">
+				<div
+					class="min-w-[100px] flex justify-center items-center border border-[var(--color-4)] border-b-0 bg-[var(--color-1)]"
+				>
+					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"
+				/>
+			</div>
+
+			<!-- Skip input -->
+			<div class="flex items-stretch w-full h-10">
+				<div
+					class="min-w-[100px] flex justify-center items-center border border-[var(--color-4)] border-b-0 bg-[var(--color-1)]"
+				>
+					Skip:
+				</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"
+				/>
+			</div>
+
+			<!-- Limit input -->
+			<div class="flex items-stretch w-full h-10">
+				<div
+					class="min-w-[100px] flex justify-center items-center border border-[var(--color-4)] border-b-0 bg-[var(--color-1)]"
+				>
+					Limit:
+				</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"
+				/>
+			</div>
+
+			<!-- Project input -->
+			<div class="flex items-stretch w-full h-10">
+				<div
+					class="min-w-[100px] flex justify-center items-center border border-[var(--color-4)] border-b bg-[var(--color-1)] rounded-bl-md"
+				>
+					Project:
+				</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"
+				/>
+			</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>
+
+	<!-- Search button -->
+	<button class="btn btn-success !rounded-l-none !rounded-r-md font-bold !py-1.5" type="submit"> GO! </button>
+</form>
+
+<style lang="postcss">
+	input {
+		border-radius: 0;
+	}
+</style>

package/src/lib/components/TooltipTable.svelte

@@ -0,0 +1,137 @@
+<script lang="ts">
+	import { tick, type Snippet } from "svelte";
+
+	interface TableColumn {
+		header: string;
+		key: string;
+		align?: "left" | "right" | "center";
+	}
+
+	interface TableRow {
+		[key: string]: unknown;
+	}
+
+	let {
+		columns,
+		rows,
+		children,
+		hideHeader,
+	}: {
+		columns: TableColumn[];
+		rows: TableRow[];
+		children: Snippet;
+		hideHeader?: boolean;
+	} = $props();
+
+	let showTooltip = $state(false);
+	let tooltipElement = $state<HTMLDivElement>();
+	let containerElement = $state<HTMLDivElement>();
+
+	let tooltipPosition = $state({
+		left: "",
+		right: "",
+		top: "",
+		bottom: "",
+		marginTop: "",
+		marginBottom: "",
+	});
+
+	function handleMouseEnter() {
+		showTooltip = true;
+	}
+
+	function handleMouseLeave() {
+		showTooltip = false;
+	}
+
+	$effect(() => {
+		if (showTooltip && tooltipElement && containerElement) {
+			tick().then(() => {
+				if (!containerElement || !tooltipElement) return;
+
+				const tooltipRect = tooltipElement.getBoundingClientRect();
+				const viewportWidth = window.innerWidth;
+				const viewportHeight = window.innerHeight;
+
+				// Reset positioning
+				tooltipPosition = {
+					left: "",
+					right: "",
+					top: "",
+					bottom: "",
+					marginTop: "",
+					marginBottom: "",
+				};
+
+				// Position horizontally
+				if (tooltipRect.right > viewportWidth) {
+					tooltipPosition.right = "0";
+				} else {
+					tooltipPosition.left = "0";
+				}
+
+				// Position vertically
+				if (tooltipRect.bottom > viewportHeight) {
+					tooltipPosition.bottom = "100%";
+					tooltipPosition.marginBottom = "5px";
+				} else {
+					tooltipPosition.top = "100%";
+					tooltipPosition.marginTop = "5px";
+				}
+			});
+		}
+	});
+</script>
+
+<div class="relative inline-block" bind:this={containerElement}>
+	<button class="dotted text-center" onmouseenter={handleMouseEnter} onmouseleave={handleMouseLeave}>
+		{@render children?.()}
+	</button>
+	{#if showTooltip}
+		<div
+			class="absolute bg-[var(--color-2)] border border-[var(--color-3)] rounded p-0 z-[1000] whitespace-nowrap shadow-lg"
+			bind:this={tooltipElement}
+			style:left={tooltipPosition.left}
+			style:right={tooltipPosition.right}
+			style:top={tooltipPosition.top}
+			style:bottom={tooltipPosition.bottom}
+			style:margin-top={tooltipPosition.marginTop}
+			style:margin-bottom={tooltipPosition.marginBottom}
+		>
+			<table class="w-full border-collapse text-base font-medium">
+				{#if !hideHeader}
+					<thead>
+						<tr>
+							{#each columns as column, index (index)}
+								<th
+									class="px-2 py-1 border-b border-[var(--color-3)] bg-[var(--color-4)] font-bold"
+									class:text-left={column.align === "left" || !column.align}
+									class:text-right={column.align === "right"}
+									class:text-center={column.align === "center"}
+								>
+									{column.header}
+								</th>
+							{/each}
+						</tr>
+					</thead>
+				{/if}
+				<tbody>
+					{#each rows as row, index (index)}
+						<tr>
+							{#each columns as column, index (index)}
+								<td
+									class="px-2 py-1 border-b border-[var(--color-3)]"
+									class:text-left={column.align === "left" || !column.align}
+									class:text-right={column.align === "right"}
+									class:text-center={column.align === "center"}
+								>
+									{row[column.key]}
+								</td>
+							{/each}
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		</div>
+	{/if}
+</div>

package/src/lib/server/HostsManager.ts

@@ -0,0 +1,105 @@
+import * as fs from "node:fs";
+import * as os from "node:os";
+import * as path from "node:path";
+
+export interface Host {
+	path: string;
+	_id: string;
+}
+
+const DEFAULT_HOSTS = process.env.MONGOKU_DEFAULT_HOST
+	? process.env.MONGOKU_DEFAULT_HOST.split(";")
+	: ["localhost:27017"];
+const DATABASE_FILE = process.env.MONGOKU_DATABASE_FILE || path.join(os.homedir(), ".mongoku.db");
+
+export class HostsManager {
+	private _hosts: Map<string, string> = new Map(); // path -> _id
+
+	async load() {
+		let first = false;
+		try {
+			await fs.promises.stat(DATABASE_FILE);
+		} catch {
+			first = true;
+		}
+
+		if (!first) {
+			await this._loadFromFile();
+		}
+
+		if (first || this._hosts.size === 0) {
+			// Initialize with default hosts
+			for (const hostname of DEFAULT_HOSTS) {
+				this._hosts.set(hostname, this._generateId());
+			}
+			await this._saveToFile();
+		}
+	}
+
+	private async _loadFromFile(): Promise<void> {
+		const content = await fs.promises.readFile(DATABASE_FILE, "utf8");
+		const lines = content
+			.trim()
+			.split("\n")
+			.filter((line) => line.trim());
+
+		const newHosts = new Map<string, string>();
+		for (const line of lines) {
+			const host = JSON.parse(line);
+			if (host && typeof host.path === "string") {
+				// Use existing _id if available, generate new one if not
+				const id = host._id || this._generateId();
+				newHosts.set(host.path, id);
+			}
+		}
+		this._hosts = newHosts;
+	}
+
+	private async _saveToFile(): Promise<void> {
+		const lines = Array.from(this._hosts).map(([hostPath, id]) => JSON.stringify({ path: hostPath, _id: id }));
+		await fs.promises.writeFile(DATABASE_FILE, lines.join("\n") + "\n", "utf8");
+	}
+
+	private _generateId(): string {
+		// Generate a NeDB-compatible ID (16 characters, alphanumeric)
+		const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+		let result = "";
+		for (let i = 0; i < 16; i++) {
+			result += chars.charAt(Math.floor(Math.random() * chars.length));
+		}
+		return result;
+	}
+
+	async getHosts(): Promise<Host[]> {
+		return Array.from(this._hosts).map(([hostPath, id]) => ({ path: hostPath, _id: id }));
+	}
+
+	async add(hostPath: string): Promise<string> {
+		// Use existing ID if host already exists, generate new one if not
+		let id = this._hosts.get(hostPath);
+		if (!id) {
+			id = this._generateId();
+			this._hosts.set(hostPath, id);
+		}
+		await this._saveToFile();
+		return id;
+	}
+
+	async remove(hostPath: string): Promise<void> {
+		// Remove exact matches and regex pattern matches
+		const toRemove = Array.from(this._hosts.keys()).filter((existingPath) => {
+			try {
+				const regex = new RegExp(hostPath);
+				return existingPath === hostPath || regex.test(existingPath);
+			} catch {
+				// If hostPath is not a valid regex, just do exact match
+				return existingPath === hostPath;
+			}
+		});
+
+		for (const host of toRemove) {
+			this._hosts.delete(host);
+		}
+		await this._saveToFile();
+	}
+}