From 6e4b7d4dbafa702f1fef95f4575fc9931291f931 Mon Sep 17 00:00:00 2001
From: Julius Knorr <jus@bitgrid.net>
Date: Wed, 31 Dec 2025 11:28:11 +0100
Subject: [PATCH] feat: Implement a command palette with Ctrl-K shortcut

Signed-off-by: Julius Knorr <jus@bitgrid.net>
---
 src/CollectivesApp.vue                       |  27 ++
 src/components/CommandPalette.vue            | 379 +++++++++++++++++++
 src/components/Page/PageActionMenu.vue       |  11 +
 src/composables/useCommandPaletteActions.js  | 157 ++++++++
 src/composables/useCommandPaletteCommands.js | 211 +++++++++++
 src/composables/useCommandPaletteSearch.js   | 128 +++++++
 src/stores/commandPalette.js                 |  35 ++
 7 files changed, 948 insertions(+)
 create mode 100644 src/components/CommandPalette.vue
 create mode 100644 src/composables/useCommandPaletteActions.js
 create mode 100644 src/composables/useCommandPaletteCommands.js
 create mode 100644 src/composables/useCommandPaletteSearch.js
 create mode 100644 src/stores/commandPalette.js

diff --git a/src/CollectivesApp.vue b/src/CollectivesApp.vue
index 062d472e4..50082b27d 100644
--- a/src/CollectivesApp.vue
+++ b/src/CollectivesApp.vue
@@ -22,17 +22,20 @@
 		<CollectiveSettings
 			v-if="showCollectiveSettings"
 			:collective="settingsCollective" />
+		<CommandPalette />
 	</NcContent>
 </template>
 
 <script>
 import { NcContent } from '@nextcloud/vue'
 import { mapActions, mapState } from 'pinia'
+import CommandPalette from './components/CommandPalette.vue'
 import CollectiveSettings from './components/Nav/CollectiveSettings.vue'
 import NavigationBar from './components/NavigationBar.vue'
 import PageSidebar from './components/PageSidebar.vue'
 import { useNetworkState } from './composables/useNetworkState.js'
 import { useCollectivesStore } from './stores/collectives.js'
+import { useCommandPaletteStore } from './stores/commandPalette.js'
 import { usePagesStore } from './stores/pages.js'
 import { useRootStore } from './stores/root.js'
 import { useSettingsStore } from './stores/settings.js'
@@ -43,6 +46,7 @@ export default {
 
 	components: {
 		CollectiveSettings,
+		CommandPalette,
 		NcContent,
 		NavigationBar,
 		PageSidebar,
@@ -102,6 +106,11 @@ export default {
 
 	mounted() {
 		this.getCollectivesAndSettings()
+		this.setupKeyboardShortcuts()
+	},
+
+	beforeDestroy() {
+		this.removeKeyboardShortcuts()
 	},
 
 	methods: {
@@ -111,6 +120,8 @@ export default {
 			'getTrashCollectives',
 		]),
 
+		...mapActions(useCommandPaletteStore, { toggleCommandPalette: 'toggle' }),
+
 		async getCollectivesAndSettings() {
 			this.loadPending = true
 			if (!this.networkOnline) {
@@ -137,6 +148,22 @@ export default {
 
 			this.loadPending = false
 		},
+
+		setupKeyboardShortcuts() {
+			document.addEventListener('keydown', this.handleGlobalKeyDown)
+		},
+
+		removeKeyboardShortcuts() {
+			document.removeEventListener('keydown', this.handleGlobalKeyDown)
+		},
+
+		handleGlobalKeyDown(event) {
+			// Check for Cmd+K (Mac) or Ctrl+K (Windows/Linux)
+			if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
+				event.preventDefault()
+				this.toggleCommandPalette()
+			}
+		},
 	},
 
 }
diff --git a/src/components/CommandPalette.vue b/src/components/CommandPalette.vue
new file mode 100644
index 000000000..b5b147e64
--- /dev/null
+++ b/src/components/CommandPalette.vue
@@ -0,0 +1,379 @@
+<!--
+  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<NcDialog
+		v-if="isOpen"
+		:name="t('collectives', 'Command Palette')"
+		size="normal"
+		class="command-palette"
+		@closing="close">
+		<div class="command-palette__content">
+			<div class="command-palette__search">
+				<NcTextField
+					ref="searchInput"
+					v-model="searchQuery"
+					:label="t('collectives', 'Search pages, collectives, or commands…')"
+					:placeholder="t('collectives', 'Type to search…')"
+					trailing-button-icon="close"
+					:show-trailing-button="searchQuery.length > 0"
+					@trailing-button-click="searchQuery = ''">
+					<MagnifyIcon :size="20" />
+				</NcTextField>
+			</div>
+
+			<div class="command-palette__results">
+				<ul
+					v-if="filteredItems.length > 0"
+					ref="resultsList"
+					class="command-palette__list">
+					<li
+						v-for="(item, index) in filteredItems"
+						:key="item.id"
+						:class="{ 'command-palette__item--selected': index === selectedIndex }"
+						class="command-palette__item"
+						@click="executeItem(item)"
+						@mouseenter="selectedIndex = index">
+						<div class="command-palette__item-icon">
+							<component
+								:is="item.icon"
+								v-if="item.icon"
+								:size="20" />
+							<span v-else-if="item.emoji" class="command-palette__item-emoji">
+								{{ item.emoji }}
+							</span>
+						</div>
+						<div class="command-palette__item-content">
+							<div class="command-palette__item-title">
+								{{ item.title }}
+							</div>
+							<div v-if="item.subtitle" class="command-palette__item-subtitle">
+								{{ item.subtitle }}
+							</div>
+						</div>
+						<div v-if="item.badge" class="command-palette__item-badge">
+							{{ item.badge }}
+						</div>
+					</li>
+				</ul>
+				<NcEmptyContent
+					v-else
+					:name="t('collectives', 'No results found')"
+					:description="t('collectives', 'Try a different search term')">
+					<template #icon>
+						<MagnifyIcon />
+					</template>
+				</NcEmptyContent>
+			</div>
+		</div>
+	</NcDialog>
+</template>
+
+<script>
+import { showError } from '@nextcloud/dialogs'
+import { NcDialog, NcEmptyContent, NcTextField } from '@nextcloud/vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useRouter } from 'vue-router/composables'
+import MagnifyIcon from 'vue-material-design-icons/Magnify.vue'
+import { useCommandPaletteActions } from '../composables/useCommandPaletteActions.js'
+import { useCommandPaletteCommands } from '../composables/useCommandPaletteCommands.js'
+import { useCommandPaletteSearch } from '../composables/useCommandPaletteSearch.js'
+import { useCollectivesStore } from '../stores/collectives.js'
+import { useCommandPaletteStore } from '../stores/commandPalette.js'
+import { usePagesStore } from '../stores/pages.js'
+import { useRootStore } from '../stores/root.js'
+
+export default {
+	name: 'CommandPalette',
+
+	components: {
+		NcDialog,
+		NcEmptyContent,
+		NcTextField,
+		MagnifyIcon,
+	},
+
+	setup() {
+		const router = useRouter()
+		const commandPaletteStore = useCommandPaletteStore()
+		const collectivesStore = useCollectivesStore()
+		const pagesStore = usePagesStore()
+		const rootStore = useRootStore()
+
+		// Reactive state
+		const searchQuery = ref('')
+		const selectedIndex = ref(0)
+		const searchInput = ref(null)
+		const resultsList = ref(null)
+
+		// Setup composables
+		const context = {
+			router,
+			t: window.t,
+			isPublic: computed(() => rootStore.isPublic),
+			collectives: computed(() => collectivesStore.collectives),
+			pages: computed(() => pagesStore.pages),
+			allPages: computed(() => pagesStore.allPages),
+			currentCollective: computed(() => collectivesStore.currentCollective),
+			currentPage: computed(() => pagesStore.currentPage),
+			currentPageDavUrl: computed(() => pagesStore.currentPageDavUrl),
+			rootPage: computed(() => pagesStore.rootPage),
+			currentCollectiveCanEdit: computed(() => collectivesStore.currentCollectiveCanEdit),
+			currentCollectiveCanShare: computed(() => collectivesStore.currentCollectiveCanShare),
+			isTextEdit: computed(() => pagesStore.isTextEdit),
+			hasOutline: computed(() => pagesStore.hasOutline),
+			hasSubpages: computed(() => pagesStore.hasSubpages),
+			isFavoritePage: computed(() => collectivesStore.isFavoritePage),
+			pagePath: pagesStore.pagePath,
+			collectivePath: collectivesStore.collectivePath,
+			pagesForCollective: computed(() => pagesStore.pagesForCollective),
+			setTextEdit: pagesStore.setTextEdit,
+			setTextView: pagesStore.setTextView,
+			toggleOutline: pagesStore.toggleOutline,
+			setNewPageParentId: pagesStore.setNewPageParentId,
+			setFullWidthView: pagesStore.setFullWidthView,
+			trashPage: pagesStore.trashPage,
+			toggleFavoritePage: collectivesStore.toggleFavoritePage,
+			show: rootStore.show,
+			setActiveSidebarTab: rootStore.setActiveSidebarTab,
+		}
+
+		const actions = useCommandPaletteActions(context)
+		const commandsComposable = useCommandPaletteCommands({ ...context, actions })
+		const searchComposable = useCommandPaletteSearch({ ...context, actions })
+
+		const filteredItems = computed(() => {
+			const items = []
+			const query = searchQuery.value.toLowerCase().trim()
+
+			items.push(...commandsComposable.getCommands(query))
+
+			if (!rootStore.isPublic) {
+				items.push(...searchComposable.getCollectives(query))
+			}
+
+			if (collectivesStore.currentCollective) {
+				items.push(...searchComposable.getPages(query))
+			}
+
+			items.sort((a, b) => (a.title.toLowerCase() === query) - (b.title.toLowerCase() === query) || 0)
+
+			return items
+		})
+
+		const scrollToSelected = () => {
+			nextTick(() => {
+				const list = resultsList.value
+				const items = list?.querySelectorAll('.command-palette__item')
+				const selectedItem = items?.[selectedIndex.value]
+
+				if (selectedItem && list) {
+					const listRect = list.getBoundingClientRect()
+					const itemRect = selectedItem.getBoundingClientRect()
+
+					if (itemRect.bottom > listRect.bottom) {
+						selectedItem.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
+					} else if (itemRect.top < listRect.top) {
+						selectedItem.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
+					}
+				}
+			})
+		}
+
+		const executeItem = async (item) => {
+			if (!item?.action) {
+				return
+			}
+
+			try {
+				await Promise.resolve(item.action())
+				commandPaletteStore.close()
+			} catch (e) {
+				console.error(e)
+				showError(window.t('collectives', 'Command failed'))
+			}
+		}
+
+		const handleKeyDown = (event) => {
+			if (!commandPaletteStore.isOpen) {
+				return
+			}
+
+			switch (event.key) {
+				case 'ArrowDown':
+					event.preventDefault()
+					selectedIndex.value = Math.min(
+						selectedIndex.value + 1,
+						filteredItems.value.length - 1,
+					)
+					scrollToSelected()
+					break
+
+				case 'ArrowUp':
+					event.preventDefault()
+					selectedIndex.value = Math.max(selectedIndex.value - 1, 0)
+					scrollToSelected()
+					break
+
+				case 'Enter':
+					event.preventDefault()
+					if (filteredItems.value[selectedIndex.value]) {
+						executeItem(filteredItems.value[selectedIndex.value])
+					}
+					break
+
+				case 'Escape':
+					event.preventDefault()
+					commandPaletteStore.close()
+					break
+			}
+		}
+
+		watch(() => commandPaletteStore.isOpen, (newVal) => {
+			if (newVal) {
+				searchQuery.value = ''
+				selectedIndex.value = 0
+				nextTick(() => {
+					searchInput.value?.$el?.querySelector('input')?.focus()
+				})
+			}
+		})
+
+		watch(searchQuery, () => {
+			selectedIndex.value = 0
+		})
+
+		watch(filteredItems, () => {
+			if (selectedIndex.value >= filteredItems.value.length) {
+				selectedIndex.value = Math.max(0, filteredItems.value.length - 1)
+			}
+		})
+
+		onMounted(() => {
+			document.addEventListener('keydown', handleKeyDown)
+		})
+
+		onBeforeUnmount(() => {
+			document.removeEventListener('keydown', handleKeyDown)
+		})
+
+		return {
+			searchQuery,
+			selectedIndex,
+			searchInput,
+			resultsList,
+
+			isOpen: computed(() => commandPaletteStore.isOpen),
+			filteredItems,
+
+			close: commandPaletteStore.close,
+			executeItem,
+		}
+	},
+}
+</script>
+
+<style scoped lang="scss">
+.command-palette {
+	:deep(.modal-container) {
+		height: 400px;
+		max-height: min(100vh, 400px);
+	}
+
+	:deep(.dialog__name) {
+		display: none;
+	}
+
+	:deep(.modal-wrapper .modal-container__content) {
+		padding: 0;
+		overflow: hidden;
+	}
+
+	&__content {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+	}
+
+	&__search {
+		padding: calc(var(--default-grid-baseline) * 4);
+		border-bottom: 1px solid var(--color-border);
+		flex-shrink: 0;
+	}
+
+	&__results {
+		flex: 1;
+		overflow-y: auto;
+	}
+
+	&__list {
+		list-style: none;
+		margin: 0;
+		padding: calc(var(--default-grid-baseline) * 2) 0;
+	}
+
+	&__item {
+		display: flex;
+		align-items: center;
+		gap: calc(var(--default-grid-baseline) * 3);
+		padding: calc(var(--default-grid-baseline) * 2) calc(var(--default-grid-baseline) * 4);
+		cursor: pointer;
+		transition: background-color 0.1s ease;
+
+		&:hover,
+		&--selected {
+			background-color: var(--color-background-hover);
+		}
+
+		&-icon {
+			flex-shrink: 0;
+			width: 32px;
+			height: 32px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			background-color: var(--color-background-dark);
+			border-radius: var(--border-radius-large);
+		}
+
+		&-emoji {
+			font-size: 20px;
+			line-height: 1;
+		}
+
+		&-content {
+			flex: 1;
+			min-width: 0;
+			overflow: hidden;
+		}
+
+		&-title {
+			font-weight: 500;
+			color: var(--color-main-text);
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+
+		&-subtitle {
+			font-size: 12px;
+			color: var(--color-text-maxcontrast);
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+
+		&-badge {
+			flex-shrink: 0;
+			padding: 2px 8px;
+			border-radius: var(--border-radius-pill);
+			background-color: var(--color-primary-element-light);
+			color: var(--color-primary-element-text);
+			font-size: 11px;
+			font-weight: 500;
+		}
+	}
+}
+</style>
diff --git a/src/components/Page/PageActionMenu.vue b/src/components/Page/PageActionMenu.vue
index b27a99225..0d54d8006 100644
--- a/src/components/Page/PageActionMenu.vue
+++ b/src/components/Page/PageActionMenu.vue
@@ -156,6 +156,7 @@
 
 <script>
 import { emit } from '@nextcloud/event-bus'
+import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { NcActionButton, NcActionCheckbox, NcActionLink, NcActions, NcActionSeparator } from '@nextcloud/vue'
 import { useIsMobile } from '@nextcloud/vue/composables/useIsMobile'
 import { mapActions, mapState } from 'pinia'
@@ -319,6 +320,16 @@ export default {
 		},
 	},
 
+	mounted() {
+		subscribe('collectives:page:open-tags-modal', this.onOpenTagsModal)
+		subscribe('collectives:page:open-move-or-copy-modal', this.onOpenMoveOrCopyModal)
+	},
+
+	beforeDestroy() {
+		unsubscribe('collectives:page:open-tags-modal', this.onOpenTagsModal)
+		unsubscribe('collectives:page:open-move-or-copy-modal', this.onOpenMoveOrCopyModal)
+	},
+
 	methods: {
 		...mapActions(useRootStore, [
 			'setActiveSidebarTab',
diff --git a/src/composables/useCommandPaletteActions.js b/src/composables/useCommandPaletteActions.js
new file mode 100644
index 000000000..34c83b375
--- /dev/null
+++ b/src/composables/useCommandPaletteActions.js
@@ -0,0 +1,157 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { showError, showSuccess } from '@nextcloud/dialogs'
+import { emit } from '@nextcloud/event-bus'
+
+/**
+ * Command palette action handlers
+ *
+ * @param {object} context The context object
+ */
+export function useCommandPaletteActions(context) {
+	const {
+		router,
+		currentCollective,
+		currentPage,
+		currentPageDavUrl,
+		rootPage,
+		pagePath,
+		collectivePath,
+		setTextEdit,
+		setTextView,
+		toggleOutline,
+		setNewPageParentId,
+		setFullWidthView,
+		trashPage,
+		toggleFavoritePage,
+		show,
+		setActiveSidebarTab,
+	} = context
+
+	const navigateToPage = (page) => {
+		const path = pagePath(page)
+		router.push(path)
+	}
+
+	const buildPagePath = (page, collective) => {
+		const collectiveBasePath = collectivePath(collective)
+
+		if (!page || page.parentId === 0) {
+			return collectiveBasePath
+		}
+
+		if (!page.slug) {
+			const { filePath, fileName, title, id } = page
+			const titlePart = fileName !== 'Readme.md' && title
+
+			const pagePath = [...filePath.split('/'), titlePart]
+				.filter(Boolean).map(encodeURIComponent).join('/')
+			return pagePath
+				? `${collectiveBasePath}/${pagePath}?fileId=${id}`
+				: collectiveBasePath
+		}
+
+		return `${collectiveBasePath}/${page.slug}-${page.id}`
+	}
+
+	const navigateToPageInCollective = (page, collective) => {
+		const pagePath = buildPagePath(page, collective)
+		router.push(pagePath)
+	}
+
+	const navigateToCollective = (collective) => {
+		const path = collectivePath(collective)
+		router.push(path)
+	}
+
+	const createNewPage = () => {
+		const parentId = currentPage.value && currentPage.value.id !== rootPage.value?.id
+			? currentPage.value.parentId
+			: (rootPage.value?.id || 0)
+		setNewPageParentId(parentId)
+	}
+
+	const createNewCollective = () => {
+		emit('open-new-collective-modal')
+	}
+
+	const toggleFullWidthAction = () => {
+		setFullWidthView({
+			pageId: currentPage.value.id,
+			fullWidthView: !currentPage.value.isFullWidth,
+		})
+	}
+
+	const toggleFavoriteAction = () => {
+		toggleFavoritePage({
+			id: currentCollective.value.id,
+			pageId: currentPage.value.id,
+		})
+	}
+
+	const openShareTab = () => {
+		show('sidebar')
+		setActiveSidebarTab('sharing')
+	}
+
+	const gotoPageEmojiPicker = () => {
+		emit('collectives:page:open-emoji-picker')
+	}
+
+	const openTagsModal = () => {
+		emit('collectives:page:open-tags-modal')
+	}
+
+	const openMoveOrCopyModal = () => {
+		emit('collectives:page:open-move-or-copy-modal')
+	}
+
+	const downloadPage = () => {
+		const link = document.createElement('a')
+		link.href = currentPageDavUrl.value
+		link.download = currentPage.value.fileName
+		link.click()
+	}
+
+	const deleteCurrentPage = async () => {
+		const pageId = currentPage.value.id
+		const currentPageId = currentPage.value?.id
+
+		try {
+			await trashPage({ pageId })
+		} catch (e) {
+			console.error(e)
+			showError(window.t('collectives', 'Could not delete the page'))
+			return
+		}
+
+		if (currentPageId === pageId) {
+			router.push(`/${encodeURIComponent(currentCollective.value.name)}`)
+		}
+
+		emit('collectives:page-list:page-trashed')
+		showSuccess(window.t('collectives', 'Page deleted'))
+	}
+
+	return {
+		navigateToPage,
+		navigateToPageInCollective,
+		navigateToCollective,
+		createNewPage,
+		createNewCollective,
+		setTextEdit,
+		setTextView,
+		toggleOutline,
+		toggleFullWidthAction,
+		toggleFavoriteAction,
+		openShareTab,
+		gotoPageEmojiPicker,
+		openTagsModal,
+		openMoveOrCopyModal,
+		downloadPage,
+		deleteCurrentPage,
+	}
+}
diff --git a/src/composables/useCommandPaletteCommands.js b/src/composables/useCommandPaletteCommands.js
new file mode 100644
index 000000000..c54a497cc
--- /dev/null
+++ b/src/composables/useCommandPaletteCommands.js
@@ -0,0 +1,211 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import FullscreenIcon from 'vue-material-design-icons/ArrowExpandAll.vue'
+import EmoticonIcon from 'vue-material-design-icons/EmoticonOutline.vue'
+import EyeIcon from 'vue-material-design-icons/Eye.vue'
+import FormatListBulletedIcon from 'vue-material-design-icons/FormatListBulleted.vue'
+import OpenInNewIcon from 'vue-material-design-icons/OpenInNew.vue'
+import PencilIcon from 'vue-material-design-icons/Pencil.vue'
+import PlusIcon from 'vue-material-design-icons/Plus.vue'
+import ShareVariantIcon from 'vue-material-design-icons/ShareVariantOutline.vue'
+import StarOffIcon from 'vue-material-design-icons/StarOffOutline.vue'
+import StarIcon from 'vue-material-design-icons/StarOutline.vue'
+import TagMultipleIcon from 'vue-material-design-icons/TagMultiple.vue'
+import DeleteIcon from 'vue-material-design-icons/TrashCanOutline.vue'
+import DownloadIcon from 'vue-material-design-icons/TrayArrowDown.vue'
+
+/**
+ * Command palette command definitions
+ *
+ * @param {object} context The context object
+ */
+export function useCommandPaletteCommands(context) {
+	const {
+		t,
+		isPublic,
+		currentCollective,
+		currentPage,
+		rootPage,
+		isTextEdit,
+		hasOutline,
+		hasSubpages,
+		isFavoritePage,
+		currentCollectiveCanEdit,
+		currentCollectiveCanShare,
+		currentPageDavUrl,
+		actions,
+	} = context
+
+	const addPageCommands = (commands) => {
+		if (isTextEdit.value) {
+			commands.push({
+				id: 'command-view-mode',
+				type: 'command',
+				title: t('collectives', 'Switch to view mode'),
+				subtitle: t('collectives', 'View the current page'),
+				icon: EyeIcon,
+				action: actions.setTextView,
+			})
+		} else {
+			commands.push({
+				id: 'command-edit-mode',
+				type: 'command',
+				title: t('collectives', 'Switch to edit mode'),
+				subtitle: t('collectives', 'Edit the current page'),
+				icon: PencilIcon,
+				action: actions.setTextEdit,
+			})
+		}
+
+		const outlineTitle = hasOutline.value(currentPage.value.id)
+			? t('collectives', 'Hide outline')
+			: t('collectives', 'Show outline')
+		commands.push({
+			id: 'command-toggle-outline',
+			type: 'command',
+			title: outlineTitle,
+			subtitle: t('collectives', 'Toggle page outline visibility'),
+			icon: FormatListBulletedIcon,
+			action: () => actions.toggleOutline(currentPage.value.id),
+		})
+
+		const fullWidthTitle = currentPage.value.isFullWidth
+			? t('collectives', 'Disable full width')
+			: t('collectives', 'Enable full width')
+		commands.push({
+			id: 'command-full-width',
+			type: 'command',
+			title: fullWidthTitle,
+			subtitle: t('collectives', 'Toggle full width view'),
+			icon: FullscreenIcon,
+			action: actions.toggleFullWidthAction,
+		})
+
+		if (currentPage.value.id !== rootPage.value?.id) {
+			const isFavorite = isFavoritePage.value(currentCollective.value.id, currentPage.value.id)
+			commands.push({
+				id: 'command-favorite-page',
+				type: 'command',
+				title: isFavorite
+					? t('collectives', 'Remove from favorites')
+					: t('collectives', 'Add to favorites'),
+				subtitle: t('collectives', 'Toggle page favorite status'),
+				icon: isFavorite ? StarOffIcon : StarIcon,
+				action: actions.toggleFavoriteAction,
+			})
+		}
+
+		if (currentCollectiveCanShare.value && currentPage.value.id !== rootPage.value?.id) {
+			commands.push({
+				id: 'command-share-page',
+				type: 'command',
+				title: t('collectives', 'Share page'),
+				subtitle: t('collectives', 'Open sharing options'),
+				icon: ShareVariantIcon,
+				action: actions.openShareTab,
+			})
+		}
+
+		if (currentCollectiveCanEdit.value && currentPage.value.id !== rootPage.value?.id) {
+			commands.push({
+				id: 'command-page-emoji',
+				type: 'command',
+				title: t('collectives', 'Select page emoji'),
+				subtitle: t('collectives', 'Choose an emoji for the page'),
+				icon: EmoticonIcon,
+				action: actions.gotoPageEmojiPicker,
+			})
+		}
+
+		if (currentCollectiveCanEdit.value) {
+			commands.push({
+				id: 'command-manage-tags',
+				type: 'command',
+				title: t('collectives', 'Manage tags'),
+				subtitle: t('collectives', 'Add or remove page tags'),
+				icon: TagMultipleIcon,
+				action: actions.openTagsModal,
+			})
+		}
+
+		if (currentCollectiveCanEdit.value && currentPage.value.id !== rootPage.value?.id) {
+			commands.push({
+				id: 'command-move-copy',
+				type: 'command',
+				title: t('collectives', 'Move or copy page'),
+				subtitle: t('collectives', 'Relocate or duplicate the page'),
+				icon: OpenInNewIcon,
+				action: actions.openMoveOrCopyModal,
+			})
+		}
+
+		if (currentPageDavUrl.value) {
+			commands.push({
+				id: 'command-download',
+				type: 'command',
+				title: t('collectives', 'Download page'),
+				subtitle: t('collectives', 'Download page as markdown'),
+				icon: DownloadIcon,
+				action: actions.downloadPage,
+			})
+		}
+
+		if (currentCollectiveCanEdit.value && currentPage.value.id !== rootPage.value?.id) {
+			const deleteTitle = hasSubpages.value(currentPage.value.id)
+				? t('collectives', 'Delete page and subpages')
+				: t('collectives', 'Delete page')
+			commands.push({
+				id: 'command-delete-page',
+				type: 'command',
+				title: deleteTitle,
+				subtitle: t('collectives', 'Remove page permanently'),
+				icon: DeleteIcon,
+				action: actions.deleteCurrentPage,
+			})
+		}
+	}
+
+	const getCommands = (query) => {
+		const commands = []
+
+		if (!isPublic.value) {
+			commands.push({
+				id: 'command-new-collective',
+				type: 'command',
+				title: t('collectives', 'Create new collective'),
+				subtitle: t('collectives', 'Start a new collective'),
+				icon: PlusIcon,
+				action: actions.createNewCollective,
+			})
+		}
+
+		if (currentCollective.value && !isPublic.value) {
+			commands.push({
+				id: 'command-new-page',
+				type: 'command',
+				title: t('collectives', 'Create new page'),
+				subtitle: t('collectives', 'Add a new page to current collective'),
+				icon: PlusIcon,
+				action: actions.createNewPage,
+			})
+		}
+
+		if (currentCollective.value && currentPage.value) {
+			addPageCommands(commands)
+		}
+
+		if (query) {
+			return commands.filter((cmd) => cmd.title.toLowerCase().includes(query)
+				|| cmd.subtitle?.toLowerCase().includes(query))
+		}
+
+		return commands
+	}
+
+	return {
+		getCommands,
+	}
+}
diff --git a/src/composables/useCommandPaletteSearch.js b/src/composables/useCommandPaletteSearch.js
new file mode 100644
index 000000000..973efb278
--- /dev/null
+++ b/src/composables/useCommandPaletteSearch.js
@@ -0,0 +1,128 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import CollectivesIcon from '../components/Icon/CollectivesIcon.vue'
+import PageIcon from '../components/Icon/PageIcon.vue'
+
+/**
+ * Command palette search and filtering logic
+ *
+ * @param {object} context The context object
+ */
+export function useCommandPaletteSearch(context) {
+	const {
+		t,
+		isPublic,
+		currentCollective,
+		collectives,
+		pages,
+		rootPage,
+		allPages,
+		pagesForCollective,
+		actions,
+	} = context
+
+	const getPages = (query) => {
+		const normalizedQuery = query?.toLowerCase().trim()
+		const currentCollectiveItems = []
+		const otherCollectiveItems = []
+
+		if (currentCollective.value) {
+			const visiblePages = pages.value.filter((p) => p.id !== rootPage.value?.id)
+
+			for (const page of visiblePages) {
+				const title = page.title || page.fileName
+				const matchesQuery = !normalizedQuery
+					|| title.toLowerCase().includes(normalizedQuery)
+					|| page.fileName?.toLowerCase().includes(normalizedQuery)
+				if (matchesQuery) {
+					currentCollectiveItems.push({
+						id: `page-${page.id}`,
+						type: 'page',
+						title,
+						subtitle: t('collectives', 'Page'),
+						emoji: page.emoji,
+						icon: page.emoji ? null : PageIcon,
+						badge: null,
+						action: () => actions.navigateToPage(page),
+					})
+				}
+			}
+		}
+
+		if (!isPublic.value && allPages.value) {
+			for (const collective of collectives.value) {
+				if (collective.id === currentCollective.value?.id) {
+					continue
+				}
+
+				const collectivePages = pagesForCollective.value(collective)
+				if (!collectivePages || collectivePages.length === 0) {
+					continue
+				}
+
+				const collectiveRootPage = collectivePages.find((p) => p.parentId === 0)
+
+				for (const page of collectivePages) {
+					if (page.id === collectiveRootPage?.id) {
+						continue
+					}
+
+					const title = page.title || page.fileName
+					const matchesQuery = !normalizedQuery
+						|| title.toLowerCase().includes(normalizedQuery)
+						|| page.fileName?.toLowerCase().includes(normalizedQuery)
+						|| collective.name.toLowerCase().includes(normalizedQuery)
+					if (matchesQuery) {
+						otherCollectiveItems.push({
+							id: `page-${collective.id}-${page.id}`,
+							type: 'page-other',
+							title,
+							subtitle: collective.name,
+							emoji: page.emoji,
+							icon: page.emoji ? null : PageIcon,
+							badge: collective.emoji || null,
+							action: () => actions.navigateToPageInCollective(page, collective),
+							collective,
+							page,
+						})
+					}
+				}
+			}
+		}
+
+		return [...currentCollectiveItems, ...otherCollectiveItems]
+	}
+
+	const getCollectives = (query) => {
+		const normalizedQuery = query?.toLowerCase().trim()
+		const items = []
+
+		for (const collective of collectives.value) {
+			const matchesQuery = !normalizedQuery
+				|| collective.name.toLowerCase().includes(normalizedQuery)
+
+			if (matchesQuery) {
+				items.push({
+					id: `collective-${collective.id}`,
+					type: 'collective',
+					title: collective.name,
+					subtitle: t('collectives', 'Collective'),
+					emoji: collective.emoji,
+					icon: collective.emoji ? null : CollectivesIcon,
+					badge: null,
+					action: () => actions.navigateToCollective(collective),
+				})
+			}
+		}
+
+		return items
+	}
+
+	return {
+		getPages,
+		getCollectives,
+	}
+}
diff --git a/src/stores/commandPalette.js b/src/stores/commandPalette.js
new file mode 100644
index 000000000..b81767941
--- /dev/null
+++ b/src/stores/commandPalette.js
@@ -0,0 +1,35 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { defineStore } from 'pinia'
+
+export const useCommandPaletteStore = defineStore('commandPalette', {
+	state: () => ({
+		isOpen: false,
+	}),
+
+	actions: {
+		/**
+		 * Open the command palette
+		 */
+		open() {
+			this.isOpen = true
+		},
+
+		/**
+		 * Close the command palette
+		 */
+		close() {
+			this.isOpen = false
+		},
+
+		/**
+		 * Toggle the command palette open/closed
+		 */
+		toggle() {
+			this.isOpen = !this.isOpen
+		},
+	},
+})