npm - mongoku - Versions diffs - 2.0.4 → 2.1.1 - Mend

mongoku 2.0.4 → 2.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (426) hide show

package/src/app.css CHANGED Viewed

@@ -6,10 +6,11 @@
 @tailwind components;
 @tailwind utilities;
-:root {
+/* Dark mode (default) */
+:root[data-theme="dark"] {
 	--color-1: hsl(216, 26%, 15%);
 	--color-1-5: hsl(218, 25%, 18%);
-	--color-2: hsl(220, 23%, 21%);
+	--light-background: hsl(220, 23%, 21%);
 	--color-3: hsl(217, 20%, 25%);
 	--color-4: hsl(220, 20%, 30%);
@@ -20,6 +21,7 @@
 	--text-inverse: hsl(0, 0%, 12%);
 	--text-darker: hsl(0, 0%, 57%);
 	--text-lighter: hsl(0, 0%, 100%);
+	--text-secondary: hsl(0, 0%, 60%);
 	--link: hsl(211, 100%, 89%);
 	--error: hsl(0, 78%, 28%);
@@ -29,6 +31,87 @@
 	--button-success: #008000;
 	--button-success-l: #4e994e;
 	--button-light: hsl(0, 0%, 88%);
+	--button-light-hover: hsl(0, 0%, 100%);
+	--code-namespace: #9cdcfe;
+	--code-boolean: #569cd6;
+	--code-null: #569cd6;
+	--code-numbers: #b5cea8;
+	--code-string: #ce9178;
+	--code-links: #4e94ce;
+	--code-summary: #6a9955;
+	--code-regexp: #ce696b;
+	--code-function: #dcdcaa;
+	--border: 1px solid var(--color-3);
+}
+/* Light mode */
+:root[data-theme="light"] {
+	--color-1: hsl(0, 0%, 98%);
+	--color-1-5: hsl(0, 0%, 96%);
+	--light-background: hsl(0, 0%, 94%);
+	--color-3: hsl(0, 0%, 88%);
+	--color-4: hsl(0, 0%, 80%);
+	--background-color: var(--color-1);
+	--border-color: var(--color-3);
+	--text: hsl(0, 0%, 12%);
+	--text-inverse: hsl(0, 0%, 88%);
+	--text-darker: hsl(0, 0%, 43%);
+	--text-lighter: hsl(0, 0%, 0%);
+	--text-secondary: hsl(0, 0%, 40%);
+	--link: hsl(211, 100%, 35%);
+	--error: hsl(0, 78%, 50%);
+	--button-danger: #d13438;
+	--button-danger-l: #e57373;
+	--button-success: #2e7d32;
+	--button-success-l: #66bb6a;
+	--button-light: hsl(0, 0%, 25%);
+	--button-light-hover: hsl(0, 0%, 15%);
+	--code-namespace: #0070c1;
+	--code-boolean: #0000ff;
+	--code-null: #0000ff;
+	--code-numbers: #098658;
+	--code-string: #a31515;
+	--code-links: #0451a5;
+	--code-summary: #008000;
+	--code-regexp: #d16969;
+	--code-function: #795e26;
+	--border: 1px solid var(--color-3);
+}
+/* Fallback for initial load before script runs */
+:root:not([data-theme]) {
+	--color-1: hsl(216, 26%, 15%);
+	--color-1-5: hsl(218, 25%, 18%);
+	--light-background: hsl(220, 23%, 21%);
+	--color-3: hsl(217, 20%, 25%);
+	--color-4: hsl(220, 20%, 30%);
+	--background-color: var(--color-1);
+	--border-color: var(--color-3);
+	--text: hsl(0, 0%, 88%);
+	--text-inverse: hsl(0, 0%, 12%);
+	--text-darker: hsl(0, 0%, 57%);
+	--text-lighter: hsl(0, 0%, 100%);
+	--text-secondary: hsl(0, 0%, 60%);
+	--link: hsl(211, 100%, 89%);
+	--error: hsl(0, 78%, 28%);
+	--button-danger: #a31515;
+	--button-danger-l: #a54c4c;
+	--button-success: #008000;
+	--button-success-l: #4e994e;
+	--button-light: hsl(0, 0%, 88%);
+	--button-light-hover: hsl(0, 0%, 100%);
 	--code-namespace: #9cdcfe;
 	--code-boolean: #569cd6;
@@ -49,6 +132,7 @@
 		font-family: "Rajdhani", sans-serif;
 		color: var(--text);
 		min-height: 100vh;
+		tab-size: 2;
 	}
 	a:hover {
@@ -144,6 +228,17 @@
 		color: var(--text-lighter);
 	}
+	.btn-outline-light {
+		background: transparent;
+		color: var(--button-light);
+		border-color: var(--button-light);
+	}
+	.btn-outline-light:hover {
+		background-color: var(--color-4);
+		color: var(--button-light-hover);
+	}
 	.btn:disabled {
 		opacity: 0.5;
 		cursor: not-allowed;
@@ -201,7 +296,7 @@
 	}
 	.modal {
-		background-color: var(--color-2);
+		background-color: var(--light-background);
 		border: 1px solid var(--color-3);
 		border-radius: 4px;
 		max-width: 500px;

package/src/app.html CHANGED Viewed

@@ -3,6 +3,21 @@
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<script>
+			// Immediately set theme to prevent flash
+			(function () {
+				const theme = localStorage.getItem("theme") || "dark";
+				let actualTheme;
+				if (theme === "system") {
+					actualTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+				} else {
+					actualTheme = theme;
+				}
+				document.documentElement.setAttribute("data-theme", actualTheme);
+			})();
+		</script>
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">

package/src/hooks.server.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+import { logger } from "$lib/utils/logger";
 import type { Handle, HandleServerError } from "@sveltejs/kit";
 import { MongoError } from "mongodb";
@@ -5,12 +6,28 @@ import { MongoError } from "mongodb";
 Error.stackTraceLimit = 100;
 export const handle: Handle = async ({ event, resolve }) => {
+	const authBasic = process.env.MONGOKU_AUTH_BASIC;
+	if (authBasic) {
+		const [username, password] = authBasic.split(":");
+		const basicAuth = event.request.headers.get("Authorization");
+		if (
+			!basicAuth?.toLowerCase().startsWith("basic ") ||
+			basicAuth.slice("basic ".length) !== Buffer.from(`${username}:${password}`).toString("base64")
+		) {
+			return new Response("Unauthorized", {
+				status: 401,
+				headers: {
+					"WWW-Authenticate": "Basic",
+				},
+			});
+		}
+	}
 	return resolve(event);
 };
 export const handleError: HandleServerError = ({ error }) => {
 	// Log the error server-side
-	console.error(error);
+	logger.error(error);
 	// Handle MongoDB errors specifically
 	if (error instanceof MongoError) {

package/src/lib/actions/jsonTextarea.ts ADDED Viewed

@@ -0,0 +1,395 @@
+import type { Action } from "svelte/action";
+interface JsonTextareaParams {
+	onsubmit?: () => void;
+	onescape?: () => void;
+}
+function getIndentation(text: string): string {
+	const match = text.match(/^(\s*)/);
+	return match ? match[1] : "";
+}
+function handleSkipClosing(
+	event: KeyboardEvent,
+	target: HTMLTextAreaElement,
+	textValue: string,
+	selectionStart: number,
+	selectionEnd: number,
+): boolean {
+	// Skip if any modifier keys or there's a selection
+	if (event.ctrlKey || event.altKey || event.metaKey || selectionStart !== selectionEnd) return false;
+	const closingChars = ["}", "]", ")", '"', "'", "`"];
+	if (!closingChars.includes(event.key)) return false;
+	// Check if next character is the same as what we're typing
+	const nextChar = textValue[selectionStart];
+	if (nextChar !== event.key) return false;
+	event.preventDefault();
+	// Just move cursor forward one position
+	requestAnimationFrame(() => {
+		target.setSelectionRange(selectionStart + 1, selectionStart + 1);
+	});
+	return true;
+}
+function handleAutoPairing(
+	event: KeyboardEvent,
+	target: HTMLTextAreaElement,
+	textValue: string,
+	selectionStart: number,
+	selectionEnd: number,
+): boolean {
+	// Skip if any modifier keys (except shift for shift+2 = @, etc.)
+	if (event.ctrlKey || event.altKey || event.metaKey) return false;
+	const pairs: Record<string, string> = {
+		"{": "}",
+		"[": "]",
+		"(": ")",
+		'"': '"',
+		"'": "'",
+		"`": "`",
+	};
+	const closingChar = pairs[event.key];
+	if (!closingChar) return false;
+	event.preventDefault();
+	// If there's a selection, wrap it with the pair
+	if (selectionStart !== selectionEnd) {
+		const selectedText = textValue.substring(selectionStart, selectionEnd);
+		const newValue =
+			textValue.substring(0, selectionStart) +
+			event.key +
+			selectedText +
+			closingChar +
+			textValue.substring(selectionEnd);
+		target.value = newValue;
+		target.dispatchEvent(new Event("input", { bubbles: true }));
+		// Select the wrapped text (excluding the added characters)
+		requestAnimationFrame(() => {
+			target.setSelectionRange(selectionStart + 1, selectionEnd + 1);
+		});
+		return true;
+	}
+	// Insert both opening and closing characters
+	const newValue = textValue.substring(0, selectionStart) + event.key + closingChar + textValue.substring(selectionEnd);
+	target.value = newValue;
+	target.dispatchEvent(new Event("input", { bubbles: true }));
+	// Position cursor between the pair
+	requestAnimationFrame(() => {
+		target.setSelectionRange(selectionStart + 1, selectionStart + 1);
+	});
+	return true;
+}
+function handleDeindent(target: HTMLTextAreaElement, textValue: string, selectionStart: number, selectionEnd: number) {
+	// Single cursor position
+	if (selectionStart === selectionEnd) {
+		const lineStart = textValue.lastIndexOf("\n", selectionStart - 1) + 1;
+		const lineText = textValue.substring(lineStart, selectionStart);
+		const leadingWhitespace = lineText.match(/^(\s*)/)?.[1] || "";
+		if (leadingWhitespace.length === 0) return;
+		// Remove one tab or up to 2 spaces
+		let charsToRemove = 1;
+		if (leadingWhitespace.startsWith("\t")) {
+			charsToRemove = 1;
+		} else if (leadingWhitespace.startsWith("  ")) {
+			charsToRemove = 2;
+		} else if (leadingWhitespace.startsWith(" ")) {
+			charsToRemove = 1;
+		}
+		const newValue = textValue.substring(0, lineStart) + textValue.substring(lineStart + charsToRemove);
+		target.value = newValue;
+		target.dispatchEvent(new Event("input", { bubbles: true }));
+		// Move cursor back
+		requestAnimationFrame(() => {
+			target.setSelectionRange(selectionStart - charsToRemove, selectionStart - charsToRemove);
+		});
+		return;
+	}
+	// Selection: deindent all lines
+	const beforeSelection = textValue.substring(0, selectionStart);
+	const afterSelection = textValue.substring(selectionEnd);
+	const lineStartPos = beforeSelection.lastIndexOf("\n") + 1;
+	const fullSelection = textValue.substring(lineStartPos, selectionEnd);
+	const fullLines = fullSelection.split("\n");
+	const deindentedLines = fullLines.map((line) => {
+		const leadingWhitespace = line.match(/^(\s*)/)?.[1] || "";
+		if (leadingWhitespace.length === 0) return line;
+		if (leadingWhitespace.startsWith("\t")) {
+			return line.substring(1);
+		}
+		if (leadingWhitespace.startsWith("  ")) {
+			return line.substring(2);
+		}
+		if (leadingWhitespace.startsWith(" ")) {
+			return line.substring(1);
+		}
+		return line;
+	});
+	const newValue = textValue.substring(0, lineStartPos) + deindentedLines.join("\n") + afterSelection;
+	target.value = newValue;
+	target.dispatchEvent(new Event("input", { bubbles: true }));
+	// Maintain selection
+	requestAnimationFrame(() => {
+		const newSelectionStart = lineStartPos;
+		const newSelectionEnd = lineStartPos + deindentedLines.join("\n").length;
+		target.setSelectionRange(newSelectionStart, newSelectionEnd);
+	});
+}
+function handleIndent(target: HTMLTextAreaElement, textValue: string, selectionStart: number, selectionEnd: number) {
+	// Single cursor: insert tab at cursor
+	if (selectionStart === selectionEnd) {
+		const newValue = textValue.substring(0, selectionStart) + "\t" + textValue.substring(selectionEnd);
+		target.value = newValue;
+		target.dispatchEvent(new Event("input", { bubbles: true }));
+		// Move cursor after tab
+		requestAnimationFrame(() => {
+			target.setSelectionRange(selectionStart + 1, selectionStart + 1);
+		});
+		return;
+	}
+	// Selection: indent all lines
+	const beforeSelection = textValue.substring(0, selectionStart);
+	const afterSelection = textValue.substring(selectionEnd);
+	const lineStartPos = beforeSelection.lastIndexOf("\n") + 1;
+	const fullSelection = textValue.substring(lineStartPos, selectionEnd);
+	const lines = fullSelection.split("\n");
+	const indentedLines = lines.map((line) => "\t" + line);
+	const newValue = textValue.substring(0, lineStartPos) + indentedLines.join("\n") + afterSelection;
+	target.value = newValue;
+	target.dispatchEvent(new Event("input", { bubbles: true }));
+	// Maintain selection
+	requestAnimationFrame(() => {
+		const newSelectionStart = lineStartPos;
+		const newSelectionEnd = lineStartPos + indentedLines.join("\n").length;
+		target.setSelectionRange(newSelectionStart, newSelectionEnd);
+	});
+}
+function handleEnterKey(
+	event: KeyboardEvent,
+	target: HTMLTextAreaElement,
+	textValue: string,
+	selectionStart: number,
+	selectionEnd: number,
+) {
+	event.preventDefault();
+	// Get current line
+	const lineStart = textValue.lastIndexOf("\n", selectionStart - 1) + 1;
+	const lineEnd = textValue.indexOf("\n", selectionStart);
+	const currentLine = textValue.substring(lineStart, lineEnd === -1 ? textValue.length : lineEnd);
+	// Get current indentation
+	const currentIndent = getIndentation(currentLine);
+	// Check if previous character is { or [
+	const charBeforeCursor = textValue[selectionStart - 1];
+	const charAfterCursor = textValue[selectionStart];
+	if (charBeforeCursor !== "{" && charBeforeCursor !== "[") {
+		// Just insert newline with same indentation
+		const insertion = "\n" + currentIndent;
+		const newValue = textValue.substring(0, selectionStart) + insertion + textValue.substring(selectionEnd);
+		target.value = newValue;
+		target.dispatchEvent(new Event("input", { bubbles: true }));
+		requestAnimationFrame(() => {
+			target.setSelectionRange(selectionStart + insertion.length, selectionStart + insertion.length);
+		});
+		return;
+	}
+	// Insert newline with increased indent, then another newline with current indent
+	const extraIndent = "\t";
+	let insertion = "\n" + currentIndent + extraIndent;
+	const cursorOffset = insertion.length;
+	// If next char is } or ], add closing line
+	if (charAfterCursor === "}" || charAfterCursor === "]") {
+		insertion += "\n" + currentIndent;
+	}
+	const newValue = textValue.substring(0, selectionStart) + insertion + textValue.substring(selectionEnd);
+	target.value = newValue;
+	target.dispatchEvent(new Event("input", { bubbles: true }));
+	requestAnimationFrame(() => {
+		target.setSelectionRange(selectionStart + cursorOffset, selectionStart + cursorOffset);
+	});
+}
+function handleClosingBrace(
+	event: KeyboardEvent,
+	target: HTMLTextAreaElement,
+	textValue: string,
+	selectionStart: number,
+	selectionEnd: number,
+) {
+	// Get current line up to cursor
+	const lineStart = textValue.lastIndexOf("\n", selectionStart - 1) + 1;
+	const lineBeforeCursor = textValue.substring(lineStart, selectionStart);
+	// Check if line only contains whitespace
+	if (!/^\s*$/.test(lineBeforeCursor) || lineBeforeCursor.length === 0) return;
+	event.preventDefault();
+	const closingChar = event.key; // Either } or ]
+	// Remove one level of indentation
+	const indentMatch = lineBeforeCursor.match(/^(\s*)/);
+	const indent = indentMatch ? indentMatch[1] : "";
+	if (indent.length === 0) {
+		// No indentation to remove, just insert closing character
+		const newValue = textValue.substring(0, selectionStart) + closingChar + textValue.substring(selectionEnd);
+		target.value = newValue;
+		target.dispatchEvent(new Event("input", { bubbles: true }));
+		requestAnimationFrame(() => {
+			target.setSelectionRange(selectionStart + 1, selectionStart + 1);
+		});
+		return;
+	}
+	let charsToRemove = 1;
+	if (indent.endsWith("\t")) {
+		charsToRemove = 1;
+	} else if (indent.length >= 2 && indent.endsWith("  ")) {
+		charsToRemove = 2;
+	} else if (indent.endsWith(" ")) {
+		charsToRemove = 1;
+	}
+	// Remove indentation and add closing character
+	const newValue =
+		textValue.substring(0, selectionStart - charsToRemove) + closingChar + textValue.substring(selectionEnd);
+	target.value = newValue;
+	target.dispatchEvent(new Event("input", { bubbles: true }));
+	requestAnimationFrame(() => {
+		target.setSelectionRange(selectionStart - charsToRemove + 1, selectionStart - charsToRemove + 1);
+	});
+}
+export const jsonTextarea: Action<HTMLTextAreaElement, JsonTextareaParams | undefined> = (node, params) => {
+	function handleKeydown(event: KeyboardEvent) {
+		const target = event.target as HTMLTextAreaElement;
+		const { selectionStart, selectionEnd, value: textValue } = target;
+		// Escape to blur and move to next/previous focusable element
+		if (event.key === "Escape") {
+			event.preventDefault();
+			// Call custom escape handler if provided
+			if (params?.onescape) {
+				params.onescape();
+				return;
+			}
+			target.blur();
+			// Find all focusable elements
+			const focusableElements = Array.from(
+				document.querySelectorAll<HTMLElement>(
+					'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+				),
+			).filter((el) => !el.hasAttribute("disabled") && el.offsetParent !== null);
+			const currentIndex = focusableElements.indexOf(target);
+			// Shift+Escape goes backward, Escape goes forward
+			const targetElement = event.shiftKey ? focusableElements[currentIndex - 1] : focusableElements[currentIndex + 1];
+			if (targetElement) {
+				targetElement.focus();
+			}
+			return;
+		}
+		// Ctrl+Enter to submit
+		if (event.ctrlKey && event.key === "Enter") {
+			event.preventDefault();
+			params?.onsubmit?.();
+			return;
+		}
+		// Skip over closing characters if they're already there
+		if (handleSkipClosing(event, target, textValue, selectionStart, selectionEnd)) {
+			return;
+		}
+		// Auto-pairing for quotes and braces
+		if (handleAutoPairing(event, target, textValue, selectionStart, selectionEnd)) {
+			return;
+		}
+		// Tab key handling
+		if (event.key !== "Tab" || event.ctrlKey || event.altKey || event.metaKey) {
+			// Enter key handling
+			if (event.key === "Enter" && !event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey) {
+				handleEnterKey(event, target, textValue, selectionStart, selectionEnd);
+				return;
+			}
+			// } and ] key handling - auto-deindent
+			if (
+				(event.key === "}" || event.key === "]") &&
+				!event.ctrlKey &&
+				!event.shiftKey &&
+				!event.altKey &&
+				!event.metaKey
+			) {
+				handleClosingBrace(event, target, textValue, selectionStart, selectionEnd);
+			}
+			return;
+		}
+		event.preventDefault();
+		// Shift+Tab: deindent
+		if (event.shiftKey) {
+			handleDeindent(target, textValue, selectionStart, selectionEnd);
+			return;
+		}
+		// Tab: indent
+		handleIndent(target, textValue, selectionStart, selectionEnd);
+	}
+	node.addEventListener("keydown", handleKeydown);
+	return {
+		destroy() {
+			node.removeEventListener("keydown", handleKeydown);
+		},
+	};
+};

package/src/lib/components/Breadcrumbs.svelte CHANGED Viewed

@@ -1,71 +1,20 @@
 <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[] = [];
+	const breadcrumbs = $derived.by(() => {
+		const list = (page.data.breadcrumbs ?? []) as Array<{ label: string; path: string }>;
-		// 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));
+		return list.reduce<BreadcrumbItem[]>(
+			(prev, curr) => [...prev, { label: curr.label, href: `${prev.at(-1)?.href ?? ""}${curr.path}` }],
+			[],
+		);
+	});
 </script>
 {#if breadcrumbs.length > 0}