@scalar/api-client 3.2.2 → 3.3.0

package/dist/v2/features/app/components/AppSidebar.vue.script.js

@@ -1,323 +1,489 @@
-import ScalarAsciiArt_default from "../../../../components/ScalarAsciiArt.vue.js";
-import Sidebar_default from "../../../components/sidebar/Sidebar.vue.js";
-import rabbit_default from "../../../../assets/rabbit.ascii.virtual.js";
-import rabbitjump_default from "../../../../assets/rabbitjump.ascii.virtual.js";
+import Resize_default from "../../../components/resize/Resize.vue.js";
+import DocumentSearchModal_default from "../../search/components/DocumentSearchModal.vue.js";
 import DeleteSidebarListElement_default from "../../../../components/Sidebar/Actions/DeleteSidebarListElement.vue.js";
-import DownloadAppButton_default from "./DownloadAppButton.vue.js";
 import { createTempOperation } from "../helpers/create-temp-operation.js";
 import SidebarItemMenu_default from "./SidebarItemMenu.vue.js";
+import { loadRegistryDocument } from "../helpers/load-registry-document.js";
+import { useDocumentFilter } from "../hooks/use-document-filter.js";
+import { useSidebarContextMenu } from "../hooks/use-sidebar-context-menu.js";
+import { useSidebarDocuments } from "../hooks/use-sidebar-documents.js";
 import { dragHandleFactory } from "../../../helpers/drag-handle-factory.js";
-import { Fragment, capitalize, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, mergeModels, nextTick, normalizeClass, openBlock, ref, renderSlot, toDisplayString, unref, useModel, withCtx, withKeys, withModifiers } from "vue";
-import { ScalarButton, ScalarIconButton, ScalarModal, ScalarSidebarItem, useModal } from "@scalar/components";
-import { ScalarIconDotsThree, ScalarIconGearSix, ScalarIconPlus } from "@scalar/icons";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, isRef, mergeModels, normalizeClass, normalizeStyle, onBeforeMount, onBeforeUnmount, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useModel, withCtx, withKeys, withModifiers } from "vue";
+import { ScalarIconButton, ScalarModal, ScalarSidebar, ScalarSidebarButton, ScalarSidebarItem, ScalarSidebarItems, ScalarSidebarNestedItems, ScalarSidebarSearchInput, ScalarSidebarSection, useModal } from "@scalar/components";
+import { ScalarIconCaretLeft, ScalarIconDotsThree, ScalarIconFolderDashed, ScalarIconFunnel, ScalarIconGearSix, ScalarIconMagnifyingGlass, ScalarIconPlus } from "@scalar/icons";
+import { useToasts } from "@scalar/use-toasts";
+import { SidebarItem, filterItems } from "@scalar/sidebar";
 import { getParentEntry } from "@scalar/workspace-store/navigation";
-import { LibraryIcon } from "@scalar/icons/library";
-import { isMacOS } from "@scalar/helpers/general/is-mac-os";
 //#region src/v2/features/app/components/AppSidebar.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "flex" };
-var _hoisted_2 = { class: "flex items-center gap-0.5" };
-var _hoisted_3 = {
+var _hoisted_1 = { class: "flex flex-1" };
+var _hoisted_2 = {
 	key: 0,
-	class: "relative flex items-center"
+	class: "flex flex-col gap-1.5 p-(--scalar-sidebar-padding)"
 };
-var _hoisted_4 = {
+var _hoisted_3 = { class: "flex items-center gap-1" };
+var _hoisted_4 = { class: "custom-scroll flex flex-1 flex-col" };
+var _hoisted_5 = {
 	key: 0,
-	class: "empty-sidebar-item-content overflow-hidden px-2.5 py-2.5"
+	class: "text-c-3 flex flex-1 flex-col items-center justify-center gap-2 p-6 text-center select-none"
+};
+var _hoisted_6 = { class: "flex items-center gap-1" };
+var _hoisted_7 = {
+	key: 1,
+	class: "text-c-3 px-3 py-1 text-xs"
 };
-var _hoisted_5 = { class: "rabbit-ascii relative m-auto mt-2 h-[68px] w-[60px]" };
-var _hoisted_6 = { class: "flex flex-col gap-1.5 p-2" };
-var _hoisted_7 = { class: "text-sidebar-c-2 rounded border px-1.25 py-1 text-xs leading-none font-medium uppercase" };
 var AppSidebar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "AppSidebar",
 	props: /* @__PURE__ */ mergeModels({
-		layout: {},
-		sidebarState: {},
-		isWorkspaceOpen: { type: Boolean },
-		activeWorkspace: {},
-		workspaces: {},
-		eventBus: {},
-		store: {}
+		app: {},
+		indent: { default: 20 },
+		registryDocuments: { default: () => ({
+			status: "success",
+			documents: []
+		}) },
+		fetchRegistryDocument: { type: Function }
 	}, {
-		"isSidebarOpen": {
-			type: Boolean,
-			required: true
-		},
-		"isSidebarOpenModifiers": {},
 		"sidebarWidth": {
 			required: true,
 			default: 288
 		},
 		"sidebarWidthModifiers": {}
 	}),
-	emits: /* @__PURE__ */ mergeModels([
-		"click:workspace",
-		"selectItem",
-		"select:workspace",
-		"create:workspace"
-	], ["update:isSidebarOpen", "update:sidebarWidth"]),
-	setup(__props, { emit: __emit }) {
-		const emit = __emit;
-		/** The label for the workspace button in the sidebar */
-		const workspaceLabel = computed(() => capitalize(__props.activeWorkspace.label));
-		/** Controls the visibility of the sidebar */
-		const isSidebarOpen = useModel(__props, "isSidebarOpen");
-		/** Controls the width of the sidebar */
-		const sidebarWidth = useModel(__props, "sidebarWidth");
-		/** Calculate if we should show the getting started section */
-		const showGettingStarted = computed(() => __props.sidebarState.items.value.length <= 1);
-		const dragHandlers = computed(() => dragHandleFactory({
-			store: __props.store,
-			sidebarState: __props.sidebarState
-		}));
-		const handleDragEnd = (draggingItem, hoveredItem) => {
-			return dragHandlers.value.handleDragEnd(draggingItem, hoveredItem);
-		};
-		const isDroppable = (draggingItem, hoveredItem) => {
-			return dragHandlers.value.isDroppable(draggingItem, hoveredItem);
-		};
-		/** The current target for the dropdown menu */
-		const menuTarget = ref(null);
-		const deleteModalState = useModal();
-		/** Computes the message for the delete modal */
-		const deleteMessage = computed(() => {
-			const item = menuTarget.value?.item;
-			if (item?.type === "document") return "This cannot be undone. You're about to delete the document and all tags and operations inside it.";
-			return `Are you sure you want to delete this ${item?.type ?? "item"}? This action cannot be undone.`;
+	emits: ["update:sidebarWidth"],
+	setup(__props) {
+		const { toast } = useToasts();
+		/**
+		* Whether the caller is still fetching the list of registry documents. We
+		* only surface the loading state on team workspaces because local workspaces
+		* never consult the registry
+		*/
+		const isLoadingRegistry = computed(() => __props.registryDocuments.status === "loading" && __props.app.workspace.isTeamWorkspace.value);
+		const { rest } = useSidebarDocuments({
+			app: __props.app,
+			managedDocs: () => __props.registryDocuments.documents ?? []
 		});
-		/** Deletes an item from the sidebar by emitting the appropriate event */
-		const handleDelete = () => {
-			const item = menuTarget.value?.item;
-			if (!item) return;
-			const result = __props.sidebarState.getEntryById(item.id);
-			const document = getParentEntry("document", result);
-			const operation = getParentEntry("operation", result);
-			if (!document) return;
-			if (item.type === "document") __props.eventBus.emit("document:delete:document", { name: document.name });
-			else if (item.type === "tag") __props.eventBus.emit("tag:delete:tag", {
-				documentName: document.name,
-				name: item.name
+		/**
+		* Whether the workspace truly has no documents to show. Distinct from the
+		* filter producing no results: we only surface the "No APIs yet" empty state
+		* when the workspace is genuinely empty so users see a clear call-to-action
+		* instead of a confusing blank space.
+		*/
+		const isEmpty = computed(() => !isLoadingRegistry.value && rest.value.length === 0);
+		/**
+		* Fuzzy filter over the top-level documents. Owns its own input visibility,
+		* query string and Fuse index. See `use-document-filter.ts` for details.
+		*/
+		const { isVisible: isFilterVisible, query: filterQuery, filteredItems: filteredRest, toggle: toggleFilter } = useDocumentFilter(rest);
+		const sidebarState = __props.app.sidebar.state;
+		/** Which registry documents are currently being fetched. */
+		const loadingKeys = ref({});
+		/**
+		* Check if the given {@link SidebarDocumentItem} is the currently active document (from the sidebar state).
+		*/
+		const isDocActive = (item) => {
+			if (!item.navigation) return false;
+			return sidebarState.selectedItem.value === item.navigation.id || Boolean(sidebarState.selectedItems.value[item.navigation.id]);
+		};
+		const handleDocumentClick = async (item) => {
+			if (item.navigation) {
+				__props.app.sidebar.handleSelectItem(item.navigation.id);
+				return;
+			}
+			if (!item.registry || !__props.app.store.value) {
+				console.warn("Document does not have a sidebar navigation, skipping...");
+				return;
+			}
+			if (!__props.fetchRegistryDocument) {
+				console.warn("You need to provide a fetchRegistryDocument function to load registry documents");
+				return;
+			}
+			if (loadingKeys.value[item.key]) return;
+			loadingKeys.value[item.key] = true;
+			const result = await loadRegistryDocument({
+				fetcher: __props.fetchRegistryDocument,
+				workspaceStore: __props.app.store.value,
+				namespace: item.registry.namespace,
+				slug: item.registry.slug
 			});
-			else if (item.type === "operation") {
-				if (!operation) return;
-				__props.eventBus.emit("operation:delete:operation", {
-					meta: {
-						method: operation.method,
-						path: operation.path
-					},
-					documentName: document.name
-				});
-			} else if (item.type === "example") {
-				if (!operation) return;
-				__props.eventBus.emit("operation:delete:example", {
-					meta: {
-						method: operation.method,
-						path: operation.path,
-						exampleKey: item.name
-					},
-					documentName: document.name
-				});
+			loadingKeys.value[item.key] = false;
+			if (!result.ok) {
+				toast(result.error, "error");
+				return;
 			}
-			/** Clean up after deletion */
-			deleteModalState.hide();
-			menuTarget.value = null;
+			__props.app.eventBus.emit("ui:navigate", {
+				page: "document",
+				path: "overview",
+				documentSlug: result.documentName
+			});
 		};
-		/** Opens the dropdown menu for the given item */
-		const openMenu = async (event, item) => {
-			if (menuTarget.value?.showMenu) return;
-			menuTarget.value = {
-				item,
-				el: event.currentTarget,
-				showMenu: true
-			};
-			await nextTick();
-			const cloned = event instanceof MouseEvent ? new MouseEvent(event.type, event) : new KeyboardEvent(event.type, event);
-			menuTarget.value?.el.dispatchEvent(cloned);
+		const isSelected = (id) => sidebarState.isSelected(id);
+		const isExpanded = (id) => sidebarState.isExpanded(id);
+		const handleSelectItem = (id) => {
+			__props.app.sidebar.handleSelectItem(id);
 		};
-		/** Closes the dropdown menu */
-		const closeMenu = () => {
-			if (menuTarget.value) menuTarget.value.showMenu = false;
+		const handleToggleGroup = (id) => {
+			sidebarState.setExpanded(id, !sidebarState.isExpanded(id));
 		};
 		/**
-		* Creates a new operation directly from the empty folder slot.
-		* Uses a unique temporary path to avoid conflicts, then navigates to the operation,
-		* updates the path to `/`, and focuses the address bar so the user can immediately start typing.
+		* Drag-and-drop handlers for sidebar items. The factory reads from the live
+		* workspace store and shared sidebar state, so it reflects the latest
+		* navigation tree on every drag. Mirrors the behaviour of the old
+		* `AppSidebar.vue` (documents, tags, and operations can be reordered, and
+		* operations can be moved between tags/documents).
+		*/
+		const dragHandlers = computed(() => dragHandleFactory({
+			store: __props.app.store,
+			sidebarState
+		}));
+		const handleDragEnd = (draggingItem, hoveredItem) => dragHandlers.value.handleDragEnd(draggingItem, hoveredItem);
+		const isDroppable = (draggingItem, hoveredItem) => dragHandlers.value.isDroppable(draggingItem, hoveredItem);
+		/**
+		* Contextual "more" dropdown for tags, operations and examples, together
+		* with the shared delete-confirmation modal it triggers.
+		*/
+		const { menuTarget, deleteModalState, deleteMessage, openMenu, closeMenu, handleDelete } = useSidebarContextMenu({
+			eventBus: __props.app.eventBus,
+			sidebarState
+		});
+		/**
+		* Create a new operation from an empty folder slot inside a tag or document.
+		* If the entry is a tag, the new operation inherits that tag so it stays
+		* grouped under the same folder.
 		*/
 		const handleAddEmptyFolder = (item) => {
-			const itemWithParent = __props.sidebarState.getEntryById(item.id);
+			const itemWithParent = sidebarState.getEntryById(item.id);
 			const documentName = getParentEntry("document", itemWithParent)?.name;
 			const tagName = getParentEntry("tag", itemWithParent)?.name;
-			if (!documentName) {
+			const store = __props.app.store.value;
+			if (!documentName || !store) {
 				console.error("Document name not found");
 				return;
 			}
 			createTempOperation(documentName, {
-				existingPaths: new Set(Object.keys(__props.store.workspace.documents[documentName]?.paths ?? {})),
-				eventBus: __props.eventBus,
+				existingPaths: new Set(Object.keys(store.workspace.documents[documentName]?.paths ?? {})),
+				eventBus: __props.app.eventBus,
 				tags: tagName ? [tagName] : void 0
 			});
 		};
+		const handleCreate = () => {
+			__props.app.eventBus.emit("ui:open:command-palette", {
+				action: "create-openapi-document",
+				payload: void 0
+			});
+		};
 		/**
-		* Navigates to the operations page for the provided operation item.
-		* Emits a navigation event for the operation overview page.
+		* Create a new operation inside the given document and immediately navigate to
+		* it. Uses `createTempOperation` so the operation gets a unique `/temp…` path,
+		* then the sidebar focuses the new example and the address bar is focused so
+		* the user can start typing the real path right away.
 		*/
-		const navigateToOperationsPage = (item) => {
-			const documentSlug = getParentEntry("document", __props.sidebarState.getEntryById(item.id))?.name;
-			__props.eventBus.emit("ui:navigate", {
-				page: "operation",
-				path: "overview",
-				operationPath: item.path,
-				method: item.method,
-				documentSlug
+		const handleCreateOperation = (item) => {
+			const documentName = item.documentName;
+			const store = __props.app.store.value;
+			if (!documentName || !store) {
+				console.warn("Cannot create an operation: no document loaded");
+				return;
+			}
+			createTempOperation(documentName, {
+				existingPaths: new Set(Object.keys(store.workspace.documents[documentName]?.paths ?? {})),
+				eventBus: __props.app.eventBus
+			});
+		};
+		/**
+		* Navigates back to the workspace "Get started" page.
+		*/
+		const handleBack = () => {
+			__props.app.eventBus.emit("ui:navigate", {
+				page: "workspace",
+				path: "get-started"
 			});
 		};
+		/**
+		* True when the user is currently viewing a document (any of its subpages).
+		* When inside a document, the sidebar actions are scoped to that document:
+		* the gear icon opens the document (collection) settings and the filter icon
+		* becomes a search icon that focuses the search input.
+		*/
+		const isOnDocumentPage = computed(() => Boolean(__props.app.activeEntities.documentSlug.value));
+		const handleOpenSettings = () => {
+			if (isOnDocumentPage.value) {
+				__props.app.eventBus.emit("ui:navigate", {
+					page: "document",
+					path: "settings",
+					documentSlug: __props.app.activeEntities.documentSlug.value
+				});
+				return;
+			}
+			__props.app.eventBus.emit("ui:navigate", {
+				page: "workspace",
+				path: "settings"
+			});
+		};
+		/**
+		* Controls the per-document search modal. Only used when the user is drilled
+		* into a single document and clicks the magnifying-glass icon.
+		*/
+		const searchModal = useModal();
+		/**
+		* The OpenAPI document currently selected in the workspace. The search modal
+		* scopes its Fuse index to this document so results never leak across
+		* collections.
+		*/
+		const activeDocument = computed(() => __props.app.store.value?.workspace.activeDocument);
+		const handleFilterOrSearch = () => {
+			if (isOnDocumentPage.value) {
+				searchModal.show();
+				return;
+			}
+			toggleFilter();
+		};
+		/**
+		* Handle the `ui:focus:search` event. Dispatch is driven by the shared
+		* `handleHotkeys` helper (Cmd/Ctrl+J) or by programmatic callers such as the
+		* workspace "Get started" page. When a `KeyboardEvent` is included we
+		* preventDefault to override the browser's Cmd+J (downloads panel), then
+		* delegate to `handleFilterOrSearch`, which already branches on whether the
+		* user is viewing a document or the workspace root.
+		*/
+		const handleSearchHotkey = (payload) => {
+			payload?.event.preventDefault();
+			handleFilterOrSearch();
+		};
+		/**
+		* Handle the `ui:open:settings` event (Cmd/Ctrl+I). Same delegation model as
+		* `handleSearchHotkey`: preventDefault on the originating keyboard event (if
+		* any) and hand off to `handleOpenSettings`, which routes to the document-
+		* level settings page when a document is active and the workspace-level
+		* settings page otherwise.
+		*/
+		const handleSettingsHotkey = (payload) => {
+			payload?.event.preventDefault();
+			handleOpenSettings();
+		};
+		onBeforeMount(() => {
+			__props.app.eventBus.on("ui:focus:search", handleSearchHotkey);
+			__props.app.eventBus.on("ui:open:settings", handleSettingsHotkey);
+		});
+		onBeforeUnmount(() => {
+			__props.app.eventBus.off("ui:focus:search", handleSearchHotkey);
+			__props.app.eventBus.off("ui:open:settings", handleSettingsHotkey);
+		});
+		/**
+		* Navigate to the selected search result. `scroll-to:nav-item` is already
+		* wired up through the app event bus to update the sidebar + route, matching
+		* the behaviour used elsewhere in the app.
+		*/
+		const handleSearchSelect = (id) => {
+			__props.app.eventBus.emit("scroll-to:nav-item", { id });
+		};
+		/** Controls the width of the sidebar */
+		const sidebarWidth = useModel(__props, "sidebarWidth");
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1, [
-				createVNode(unref(Sidebar_default), {
-					sidebarWidth: sidebarWidth.value,
-					"onUpdate:sidebarWidth": _cache[3] || (_cache[3] = ($event) => sidebarWidth.value = $event),
-					activeWorkspace: __props.activeWorkspace,
-					class: normalizeClass(["max-md:inset-y-0 max-md:z-2 max-md:w-full!", isSidebarOpen.value ? "max-md:absolute! max-md:flex!" : "max-md:hidden!"]),
-					documents: Object.values(__props.store.workspace.documents),
-					isDroppable,
-					layout: __props.layout,
-					sidebarState: __props.sidebarState,
-					workspaces: __props.workspaces,
-					"onCreate:workspace": _cache[4] || (_cache[4] = ($event) => emit("create:workspace")),
-					"onNavigate:to:settings": _cache[5] || (_cache[5] = ($event) => __props.eventBus.emit("ui:navigate", {
-						page: "workspace",
-						path: "settings"
-					})),
-					onReorder: _cache[6] || (_cache[6] = (draggingItem, hoveredItem) => handleDragEnd(draggingItem, hoveredItem)),
-					"onSelect:workspace": _cache[7] || (_cache[7] = (id) => emit("select:workspace", id)),
-					onSelectItem: _cache[8] || (_cache[8] = (id) => emit("selectItem", id))
-				}, createSlots({
-					sidebarMenuActions: withCtx(() => [renderSlot(_ctx.$slots, "sidebarMenuActions", {}, void 0, true)]),
-					workspaceButton: withCtx(() => [createVNode(unref(ScalarSidebarItem), {
-						is: "button",
-						active: __props.isWorkspaceOpen,
-						onClick: _cache[0] || (_cache[0] = ($event) => emit("click:workspace"))
+			return openBlock(), createBlock(unref(Resize_default), {
+				width: sidebarWidth.value,
+				"onUpdate:width": _cache[3] || (_cache[3] = ($event) => sidebarWidth.value = $event),
+				class: normalizeClass(["flex flex-col max-md:inset-y-0 max-md:z-2 max-md:w-full!", {
+					"max-md:absolute! max-md:flex!": __props.app.sidebar.isOpen.value,
+					"max-md:hidden!": !__props.app.sidebar.isOpen.value
+				}])
+			}, {
+				default: withCtx(() => [
+					createElementVNode("div", _hoisted_1, [createVNode(unref(ScalarSidebar), {
+						class: "flex min-h-0 flex-1 flex-col max-md:pt-12",
+						style: normalizeStyle({ "--scalar-sidebar-indent": __props.indent + "px" })
 					}, {
-						default: withCtx(() => [createTextVNode(toDisplayString(workspaceLabel.value), 1)]),
-						_: 1
-					}, 8, ["active"])]),
-					decorator: withCtx(({ item }) => [createElementVNode("div", _hoisted_2, [item.type === "operation" ? (openBlock(), createBlock(unref(ScalarIconButton), {
+						default: withCtx(() => [
+							!isOnDocumentPage.value ? (openBlock(), createElementBlock("div", _hoisted_2, [createElementVNode("div", _hoisted_3, [
+								createVNode(unref(ScalarSidebarButton), {
+									is: "div",
+									class: "text-sidebar-c-1 font-sidebar-active flex-1",
+									disabled: ""
+								}, {
+									default: withCtx(() => [..._cache[4] || (_cache[4] = [createTextVNode(" All Documents ", -1)])]),
+									_: 1
+								}),
+								createVNode(unref(ScalarIconButton), {
+									icon: unref(ScalarIconGearSix),
+									label: "Workspace settings",
+									size: "sm",
+									onClick: handleOpenSettings
+								}, null, 8, ["icon"]),
+								createVNode(unref(ScalarIconButton), {
+									icon: unref(ScalarIconFunnel),
+									label: "Filter documents",
+									size: "sm",
+									onClick: handleFilterOrSearch
+								}, null, 8, ["icon"]),
+								createVNode(unref(ScalarIconButton), {
+									class: "rounded-full border",
+									icon: unref(ScalarIconPlus),
+									label: "Add document",
+									size: "sm",
+									onClick: handleCreate
+								}, null, 8, ["icon"])
+							]), unref(isFilterVisible) ? (openBlock(), createBlock(unref(ScalarSidebarSearchInput), {
+								key: 0,
+								modelValue: unref(filterQuery),
+								"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(filterQuery) ? filterQuery.value = $event : null),
+								autofocus: ""
+							}, null, 8, ["modelValue"])) : createCommentVNode("", true)])) : createCommentVNode("", true),
+							createElementVNode("div", _hoisted_4, [isEmpty.value && !isOnDocumentPage.value ? (openBlock(), createElementBlock("div", _hoisted_5, [createVNode(unref(ScalarIconFolderDashed), {
+								class: "size-10",
+								weight: "light"
+							}), _cache[5] || (_cache[5] = createElementVNode("p", { class: "text-sm font-medium" }, "No APIs yet", -1))])) : (openBlock(), createBlock(unref(ScalarSidebarItems), { key: 1 }, {
+								default: withCtx(() => [createVNode(unref(ScalarSidebarSection), null, {
+									items: withCtx(() => [isLoadingRegistry.value && !isOnDocumentPage.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, renderList(4, (n) => {
+										return createElementVNode("li", {
+											key: `registry-skeleton-${n}`,
+											"aria-hidden": "true",
+											class: "sidebar-skeleton-row px-(--scalar-sidebar-padding) py-1"
+										}, [..._cache[6] || (_cache[6] = [createElementVNode("span", { class: "bg-b-3 block h-6 rounded-md" }, null, -1)])]);
+									}), 64)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(filteredRest), (item) => {
+										return openBlock(), createBlock(unref(ScalarSidebarNestedItems), {
+											key: item.key,
+											active: isDocActive(item),
+											controlled: "",
+											open: isDocActive(item),
+											onBack: handleBack,
+											onClick: ($event) => handleDocumentClick(item)
+										}, createSlots({
+											back: withCtx(() => [createElementVNode("div", _hoisted_6, [
+												createVNode(unref(ScalarSidebarButton), {
+													is: "button",
+													class: "text-sidebar-c-1 font-sidebar-active hover:text-sidebar-c-1 flex-1",
+													onClick: handleBack
+												}, {
+													icon: withCtx(() => [createVNode(unref(ScalarIconCaretLeft), { class: "text-sidebar-c-2 -m-px size-4" })]),
+													default: withCtx(() => [_cache[8] || (_cache[8] = createTextVNode(" Back ", -1))]),
+													_: 1
+												}),
+												createVNode(unref(ScalarIconButton), {
+													icon: unref(ScalarIconGearSix),
+													label: "Collection settings",
+													size: "sm",
+													onClick: handleOpenSettings
+												}, null, 8, ["icon"]),
+												createVNode(unref(ScalarIconButton), {
+													icon: unref(ScalarIconMagnifyingGlass),
+													label: "Search collection",
+													size: "sm",
+													onClick: handleFilterOrSearch
+												}, null, 8, ["icon"]),
+												createVNode(unref(ScalarIconButton), {
+													class: "rounded-full border",
+													icon: unref(ScalarIconPlus),
+													label: "Add operation",
+													size: "sm",
+													onClick: ($event) => handleCreateOperation(item)
+												}, null, 8, ["icon", "onClick"])
+											])]),
+											items: withCtx(() => [item.navigation?.children?.length ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(unref(filterItems)("client", item.navigation.children), (child) => {
+												return openBlock(), createBlock(unref(SidebarItem), {
+													key: child.id,
+													isDroppable,
+													isExpanded,
+													isSelected,
+													item: child,
+													layout: "client",
+													onOnDragEnd: handleDragEnd,
+													onSelectItem: handleSelectItem,
+													onToggleGroup: handleToggleGroup
+												}, {
+													decorator: withCtx(({ item: entry }) => [createVNode(unref(ScalarIconButton), {
+														"aria-expanded": "false",
+														"aria-haspopup": "menu",
+														class: "bg-b-2",
+														icon: unref(ScalarIconDotsThree),
+														label: "More options",
+														size: "sm",
+														variant: "ghost",
+														weight: "bold",
+														onClick: withModifiers((e) => unref(openMenu)(e, entry), ["stop"]),
+														onKeydown: [
+															withKeys(withModifiers((e) => unref(openMenu)(e, entry), ["stop"]), ["down"]),
+															withKeys(withModifiers((e) => unref(openMenu)(e, entry), ["stop"]), ["enter"]),
+															withKeys(withModifiers((e) => unref(openMenu)(e, entry), ["stop"]), ["space"]),
+															withKeys(withModifiers((e) => unref(openMenu)(e, entry), ["stop"]), ["up"])
+														]
+													}, null, 8, [
+														"icon",
+														"onClick",
+														"onKeydown"
+													])]),
+													empty: withCtx(({ item: emptyItem }) => [createVNode(unref(ScalarSidebarItem), {
+														is: "button",
+														onClick: ($event) => handleAddEmptyFolder(emptyItem)
+													}, {
+														icon: withCtx(() => [createVNode(unref(ScalarIconPlus))]),
+														default: withCtx(() => [..._cache[9] || (_cache[9] = [createTextVNode("Add operation", -1)])]),
+														_: 1
+													}, 8, ["onClick"])]),
+													_: 1
+												}, 8, ["item"]);
+											}), 128)) : (openBlock(), createElementBlock("li", _hoisted_7, " Empty document "))]),
+											default: withCtx(() => [createElementVNode("span", null, toDisplayString(item.title), 1)]),
+											_: 2
+										}, [loadingKeys.value[item.key] ? {
+											name: "aside",
+											fn: withCtx(() => [_cache[7] || (_cache[7] = createElementVNode("span", { class: "text-c-3 text-xs" }, "Loading…", -1))]),
+											key: "0"
+										} : void 0]), 1032, [
+											"active",
+											"open",
+											"onClick"
+										]);
+									}), 128))]),
+									default: withCtx(() => [_cache[10] || (_cache[10] = createTextVNode(" All documents ", -1))]),
+									_: 1
+								})]),
+								_: 1
+							}))]),
+							renderSlot(_ctx.$slots, "footer", {}, void 0, true)
+						]),
+						_: 3
+					}, 8, ["style"])]),
+					createVNode(unref(DocumentSearchModal_default), {
+						document: activeDocument.value,
+						modalState: unref(searchModal),
+						onSelect: handleSearchSelect
+					}, null, 8, ["document", "modalState"]),
+					__props.app.store.value && unref(menuTarget)?.showMenu ? (openBlock(), createBlock(SidebarItemMenu_default, {
 						key: 0,
-						icon: unref(ScalarIconGearSix),
-						label: "Operation settings",
-						size: "sm",
-						weight: "bold",
-						onClick: withModifiers(($event) => navigateToOperationsPage(item), ["stop"]),
-						onKeydown: [withKeys(withModifiers(($event) => navigateToOperationsPage(item), ["stop"]), ["enter"]), withKeys(withModifiers(($event) => navigateToOperationsPage(item), ["stop"]), ["space"])]
-					}, null, 8, [
-						"icon",
-						"onClick",
-						"onKeydown"
-					])) : createCommentVNode("", true), createVNode(unref(ScalarIconButton), {
-						"aria-expanded": "false",
-						"aria-haspopup": "menu",
-						icon: unref(ScalarIconDotsThree),
-						label: "More options",
-						size: "sm",
-						weight: "bold",
-						onClick: withModifiers((e) => openMenu(e, item), ["stop"]),
-						onKeydown: [
-							withKeys(withModifiers((e) => openMenu(e, item), ["stop"]), ["down"]),
-							withKeys(withModifiers((e) => openMenu(e, item), ["stop"]), ["enter"]),
-							withKeys(withModifiers((e) => openMenu(e, item), ["stop"]), ["space"]),
-							withKeys(withModifiers((e) => openMenu(e, item), ["stop"]), ["up"])
-						]
+						eventBus: __props.app.eventBus,
+						item: unref(menuTarget).item,
+						sidebarState: unref(sidebarState),
+						target: unref(menuTarget).el,
+						workspaceStore: __props.app.store.value,
+						onCloseMenu: unref(closeMenu),
+						onShowDeleteModal: _cache[1] || (_cache[1] = ($event) => unref(deleteModalState).show())
 					}, null, 8, [
-						"icon",
-						"onClick",
-						"onKeydown"
-					])])]),
-					icon: withCtx(({ item }) => [item.type === "document" && __props.store.workspace.documents[item.name]?.["x-scalar-is-dirty"] === true ? (openBlock(), createElementBlock("div", _hoisted_3, [createVNode(unref(LibraryIcon), {
-						class: "block",
-						src: "icon" in item && item.icon || "interface-content-folder"
-					}, null, 8, ["src"]), _cache[11] || (_cache[11] = createElementVNode("div", { class: "bg-c-accent absolute -top-0.5 -right-0.5 size-1.5 rounded-full" }, [createElementVNode("span", { class: "sr-only" }, "Unsaved changes")], -1))])) : createCommentVNode("", true)]),
-					empty: withCtx(({ item }) => [createVNode(unref(ScalarSidebarItem), {
-						is: "button",
-						onClick: ($event) => handleAddEmptyFolder(item)
+						"eventBus",
+						"item",
+						"sidebarState",
+						"target",
+						"workspaceStore",
+						"onCloseMenu"
+					])) : createCommentVNode("", true),
+					unref(menuTarget) ? (openBlock(), createBlock(unref(ScalarModal), {
+						key: 1,
+						size: "xxs",
+						state: unref(deleteModalState),
+						title: `Delete ${unref(menuTarget).item.title}`
 					}, {
-						icon: withCtx(() => [createVNode(unref(ScalarIconPlus))]),
-						default: withCtx(() => [..._cache[12] || (_cache[12] = [createTextVNode("Add operation", -1)])]),
+						default: withCtx(() => [createVNode(DeleteSidebarListElement_default, {
+							variableName: unref(menuTarget).item.title,
+							warningMessage: unref(deleteMessage),
+							onClose: _cache[2] || (_cache[2] = ($event) => unref(deleteModalState).hide()),
+							onDelete: unref(handleDelete)
+						}, null, 8, [
+							"variableName",
+							"warningMessage",
+							"onDelete"
+						])]),
 						_: 1
-					}, 8, ["onClick"])]),
-					_: 2
-				}, [__props.layout !== "modal" ? {
-					name: "footer",
-					fn: withCtx(() => [createElementVNode("div", { class: normalizeClass({ "empty-sidebar-item border-t": showGettingStarted.value }) }, [showGettingStarted.value ? (openBlock(), createElementBlock("div", _hoisted_4, [createElementVNode("div", _hoisted_5, [createVNode(ScalarAsciiArt_default, {
-						art: unref(rabbit_default),
-						class: "rabbitsit font-bold"
-					}, null, 8, ["art"]), createVNode(ScalarAsciiArt_default, {
-						art: unref(rabbitjump_default),
-						class: "rabbitjump absolute top-0 left-0 font-bold"
-					}, null, 8, ["art"])]), _cache[13] || (_cache[13] = createElementVNode("div", { class: "mt-2 mb-2 text-center text-sm text-balance" }, [createElementVNode("b", { class: "font-medium" }, "Let's Get Started"), createElementVNode("p", { class: "mt-2 leading-5" }, " Create request, folder, collection or import from OpenAPI/Postman ")], -1))])) : createCommentVNode("", true), createElementVNode("div", _hoisted_6, [
-						showGettingStarted.value ? (openBlock(), createBlock(unref(ScalarButton), {
-							key: 0,
-							class: "w-full",
-							size: "sm",
-							onClick: _cache[1] || (_cache[1] = ($event) => __props.eventBus.emit("ui:open:command-palette", {
-								action: "import-from-openapi-swagger-postman-curl",
-								payload: void 0
-							}))
-						}, {
-							default: withCtx(() => [..._cache[14] || (_cache[14] = [createTextVNode(" Import Collection ", -1)])]),
-							_: 1
-						})) : createCommentVNode("", true),
-						createVNode(unref(ScalarButton), {
-							class: "w-full",
-							hotkey: "K",
-							size: "sm",
-							variant: "outlined",
-							onClick: _cache[2] || (_cache[2] = ($event) => __props.eventBus.emit("ui:open:command-palette"))
-						}, {
-							default: withCtx(() => [_cache[20] || (_cache[20] = createTextVNode(" Add Item \xA0 ", -1)), createElementVNode("span", _hoisted_7, [unref(isMacOS)() ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [_cache[15] || (_cache[15] = createElementVNode("span", { class: "sr-only" }, "Command", -1)), _cache[16] || (_cache[16] = createElementVNode("span", { "aria-hidden": "true" }, "⌘", -1))], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [_cache[17] || (_cache[17] = createElementVNode("span", { class: "sr-only" }, "CTRL", -1)), _cache[18] || (_cache[18] = createElementVNode("span", { "aria-hidden": "true" }, "⌃", -1))], 64)), _cache[19] || (_cache[19] = createTextVNode(" K ", -1))])]),
-							_: 1
-						}),
-						__props.layout === "web" ? (openBlock(), createBlock(DownloadAppButton_default, { key: 1 })) : createCommentVNode("", true)
-					])], 2)]),
-					key: "0"
-				} : void 0]), 1032, [
-					"sidebarWidth",
-					"activeWorkspace",
-					"class",
-					"documents",
-					"layout",
-					"sidebarState",
-					"workspaces"
+					}, 8, ["state", "title"])) : createCommentVNode("", true)
 				]),
-				menuTarget.value?.showMenu ? (openBlock(), createBlock(SidebarItemMenu_default, {
-					key: 0,
-					eventBus: __props.eventBus,
-					item: menuTarget.value.item,
-					sidebarState: __props.sidebarState,
-					target: menuTarget.value.el,
-					workspaceStore: __props.store,
-					onCloseMenu: closeMenu,
-					onShowDeleteModal: _cache[9] || (_cache[9] = ($event) => unref(deleteModalState).show())
-				}, null, 8, [
-					"eventBus",
-					"item",
-					"sidebarState",
-					"target",
-					"workspaceStore"
-				])) : createCommentVNode("", true),
-				menuTarget.value ? (openBlock(), createBlock(unref(ScalarModal), {
-					key: 1,
-					size: "xxs",
-					state: unref(deleteModalState),
-					title: `Delete ${menuTarget.value.item.title}`
-				}, {
-					default: withCtx(() => [createVNode(DeleteSidebarListElement_default, {
-						variableName: menuTarget.value.item.title,
-						warningMessage: deleteMessage.value,
-						onClose: _cache[10] || (_cache[10] = ($event) => unref(deleteModalState).hide()),
-						onDelete: handleDelete
-					}, null, 8, ["variableName", "warningMessage"])]),
-					_: 1
-				}, 8, ["state", "title"])) : createCommentVNode("", true)
-			]);
+				_: 3
+			}, 8, ["width", "class"]);
 		};
 	}
 });