mongoku 2.0.1 → 2.0.3

package/src/app.css

@@ -0,0 +1,228 @@
+@import "tailwindcss";
+@import "@fontsource/cuprum";
+@import "@fontsource/rajdhani";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+	--color-1: hsl(216, 26%, 15%);
+	--color-1-5: hsl(218, 25%, 18%);
+	--color-2: 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%);
+	--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%);
+
+	--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);
+}
+
+@layer base {
+	body {
+		background-color: var(--background-color);
+		font-family: "Rajdhani", sans-serif;
+		color: var(--text);
+		min-height: 100vh;
+	}
+
+	a:hover {
+		text-decoration: underline;
+	}
+
+	input[type="text"],
+	input[type="number"],
+	textarea {
+		@apply rounded-md px-2 py-1.5 text-sm;
+		background-color: var(--color-1);
+		color: var(--text);
+		border: 1px solid var(--color-4);
+	}
+
+	input[type="text"]:focus,
+	input[type="number"]:focus,
+	textarea:focus {
+		outline: none;
+		border-color: var(--link);
+	}
+}
+
+@layer utilities {
+	.dotted {
+		border-bottom: 1px dotted var(--text);
+		cursor: help;
+	}
+
+	.error {
+		color: var(--error);
+	}
+}
+
+@layer components {
+	.btn {
+		@apply px-4 py-2 rounded-md cursor-pointer font-medium transition-all duration-200 border;
+	}
+
+	.btn-sm {
+		@apply px-2 py-1.5 text-sm;
+	}
+
+	.btn-default {
+		background-color: var(--color-1);
+		color: var(--text);
+		border-color: var(--color-4);
+	}
+
+	.btn-default:hover {
+		background-color: var(--color-3);
+	}
+
+	.btn-danger {
+		background-color: var(--button-danger-l);
+		color: var(--text-lighter);
+		border-color: var(--button-danger);
+	}
+
+	.btn-danger:hover {
+		background-color: var(--button-danger);
+	}
+
+	.btn-success {
+		background-color: var(--button-success-l);
+		color: var(--text-lighter);
+		border-color: var(--button-success);
+	}
+
+	.btn-success:hover {
+		background-color: var(--button-success);
+	}
+
+	.btn-outline-danger {
+		background: transparent;
+		color: var(--button-danger);
+		border-color: var(--button-danger);
+	}
+
+	.btn-outline-danger:hover {
+		background-color: var(--button-danger-l);
+		color: var(--text-lighter);
+	}
+
+	.btn-outline-success {
+		background: transparent;
+		color: var(--button-success);
+		border-color: var(--button-success);
+	}
+
+	.btn-outline-success:hover {
+		background-color: var(--button-success-l);
+		color: var(--text-lighter);
+	}
+
+	.btn:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.table {
+		width: 100%;
+		border-collapse: collapse;
+	}
+
+	.table thead tr {
+		background-color: var(--color-3);
+	}
+
+	.table th,
+	.table td {
+		padding: 12px;
+		text-align: left;
+		border-bottom: 1px solid var(--border-color);
+	}
+
+	.table th {
+		font-weight: 500;
+		color: var(--text-lighter);
+	}
+
+	.table tbody tr:hover {
+		background-color: var(--color-1-5);
+	}
+
+	.badge {
+		display: inline-block;
+		padding: 4px 8px;
+		border-radius: 3px;
+		font-size: 12px;
+		margin-right: 8px;
+	}
+
+	.badge-danger {
+		background-color: var(--button-danger);
+		color: var(--text-lighter);
+	}
+
+	.modal-overlay {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: rgba(0, 0, 0, 0.5);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 1000;
+	}
+
+	.modal {
+		background-color: var(--color-2);
+		border: 1px solid var(--color-3);
+		border-radius: 4px;
+		max-width: 500px;
+		width: 90%;
+	}
+
+	.modal-body {
+		padding: 20px;
+	}
+
+	.modal-footer {
+		border-top: 1px solid var(--color-3);
+		padding: 15px 20px;
+		display: flex;
+		justify-content: flex-end;
+		gap: 10px;
+	}
+
+	.loading {
+		text-align: center;
+		padding: 40px;
+		color: var(--text-darker);
+	}
+}

package/src/app.d.ts

@@ -0,0 +1,16 @@
+// See https://svelte.dev/docs/kit/types#app.d.ts
+// for information about these interfaces
+declare global {
+	namespace App {
+		interface Error {
+			message: string;
+			code?: number | string;
+		}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};

package/src/app.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

package/src/hooks.server.ts

@@ -0,0 +1,34 @@
+import type { Handle, HandleServerError } from "@sveltejs/kit";
+import { MongoError } from "mongodb";
+
+// Bigger than the default 10, helpful with MongoDB errors
+Error.stackTraceLimit = 100;
+
+export const handle: Handle = async ({ event, resolve }) => {
+	return resolve(event);
+};
+
+export const handleError: HandleServerError = ({ error }) => {
+	// Log the error server-side
+	console.error(error);
+
+	// Handle MongoDB errors specifically
+	if (error instanceof MongoError) {
+		return {
+			message: error.message,
+			code: error.code,
+		};
+	}
+
+	// Handle standard errors
+	if (error instanceof Error) {
+		return {
+			message: error.message,
+		};
+	}
+
+	// Fallback for unknown error types
+	return {
+		message: "An unexpected error occurred",
+	};
+};

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>