Merge remote-tracking branch 'origin/main' into feat/backend

packages/ui/src/components/base/KeybindingChips.vue

@@ -0,0 +1,23 @@
+<template>
+	<span class="inline-flex flex-wrap items-center gap-1">
+		<kbd
+			v-for="(part, index) in parts"
+			:key="`${index}-${part}`"
+			aria-hidden="true"
+			class="rounded-md border border-solid border-surface-4 bg-surface-3 px-2 py-0.5 font-mono text-sm text-[var(--color-text-primary)]"
+		>
+			{{ part }}
+		</kbd>
+		<span class="sr-only">{{ text }}</span>
+	</span>
+</template>
+
+<script setup lang="ts">
+import { useBindingParts, useBindingText } from '../../composables/use-keybinding-labels'
+import type { KeyBinding } from '../../utils/keybinding'
+
+const props = defineProps<{ binding: KeyBinding }>()
+
+const parts = useBindingParts(() => props.binding)
+const text = useBindingText(() => props.binding)
+</script>

packages/ui/src/components/base/index.ts

@@ -118,3 +118,4 @@ export { default as TimeFramePicker } from './TimeFramePicker.vue'
 export { default as Timeline } from './Timeline.vue'
 export { default as Toggle } from './Toggle.vue'
 export { default as UnsavedChangesPopup } from './UnsavedChangesPopup.vue'
+export { default as KeybindingChips } from './KeybindingChips.vue'

packages/ui/src/components/modal/KeybindingChoiceTree.vue

@@ -0,0 +1,256 @@
+<template>
+	<div
+		ref="treeRef"
+		role="tree"
+		:aria-label="formatMessage(messages.treeLabel)"
+		class="max-h-[18rem] overflow-y-auto rounded-lg border border-solid border-surface-4 bg-surface-2 p-1"
+		@keydown="handleKeydown"
+	>
+		<div
+			v-for="(row, index) in visibleRows"
+			:key="row.id"
+			:ref="(element) => setRowRef(row.id, element)"
+			role="treeitem"
+			:tabindex="index === activeIndex ? 0 : -1"
+			:aria-level="row.level + 1"
+			:aria-expanded="row.expandable ? row.expanded : undefined"
+			:aria-selected="row.kind === 'item' ? row.selected : undefined"
+			:aria-disabled="row.disabled ? true : undefined"
+			class="flex cursor-pointer items-center gap-2 rounded-md py-2 pr-2 text-sm transition-colors duration-150"
+			:class="[
+				row.disabled ? 'cursor-not-allowed opacity-50' : 'hover:bg-surface-3',
+				row.selected
+					? 'bg-brand-highlight text-[var(--color-text-primary)]'
+					: 'text-[var(--color-text-default)]',
+				row.kind === 'item' ? '' : 'font-semibold text-[var(--color-text-primary)]',
+			]"
+			:style="{ paddingLeft: `${row.level * 1.25 + 0.5}rem` }"
+			@click="activateRow(row)"
+			@focus="activeIndex = index"
+		>
+			<ChevronRightIcon
+				v-if="row.expandable"
+				class="h-4 w-4 shrink-0 text-[var(--color-text-tertiary)] transition-transform duration-150"
+				:class="{ 'rotate-90': row.expanded }"
+				aria-hidden="true"
+			/>
+			<span v-else class="w-4 shrink-0" aria-hidden="true" />
+			<span class="min-w-0 flex-1 truncate">{{ row.label }}</span>
+			<span v-if="row.disabledReason" class="shrink-0 text-xs text-[var(--color-text-tertiary)]">
+				{{ row.disabledReason }}
+			</span>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ChevronRightIcon } from '@modrinth/assets'
+import { computed, nextTick, ref } from 'vue'
+
+import { defineMessages, useVIntl } from '../../composables/i18n'
+import { type KeyBinding, type KeyBindingDevice, keyCodeLabel } from '../../utils/keybinding'
+import { KEYBINDING_CATALOG, type KeybindingCatalogItem } from '../../utils/keybinding-catalog'
+
+const props = withDefaults(
+	defineProps<{
+		/** The combination being assembled, used to mark the chosen input. */
+		binding: KeyBinding | null
+		/** Reasons an input may not be used, keyed by code. */
+		disabledCodes?: Map<string, string>
+	}>(),
+	{ disabledCodes: () => new Map() },
+)
+
+const emit = defineEmits<{
+	select: [{ device: KeyBindingDevice; code: string }]
+	escape: []
+}>()
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	treeLabel: {
+		id: 'ui.keybinding-modal.tree-label',
+		defaultMessage: 'Inputs a shortcut can use',
+	},
+})
+
+interface TreeRow {
+	id: string
+	kind: 'device' | 'group' | 'item'
+	level: number
+	label: string
+	expandable: boolean
+	expanded: boolean
+	selected: boolean
+	disabled: boolean
+	disabledReason?: string
+	item?: KeybindingCatalogItem
+}
+
+const expanded = ref(new Set<string>(['keyboard']))
+const activeIndex = ref(0)
+const rowRefs = new Map<string, HTMLElement>()
+
+function groupRowId(deviceId: string, groupId: string) {
+	return `${deviceId}:${groupId}`
+}
+
+function itemRowId(deviceId: string, groupId: string, code: string) {
+	return `${deviceId}:${groupId}:${code}`
+}
+
+function itemLabel(item: KeybindingCatalogItem) {
+	return item.label ? formatMessage(item.label) : keyCodeLabel(item.code)
+}
+
+function itemState(item: KeybindingCatalogItem) {
+	const reason = props.disabledCodes.get(item.code)
+	return { disabled: Boolean(reason), disabledReason: reason }
+}
+
+const visibleRows = computed<TreeRow[]>(() => {
+	const rows: TreeRow[] = []
+
+	for (const device of KEYBINDING_CATALOG) {
+		const deviceExpanded = expanded.value.has(device.id)
+		rows.push({
+			id: device.id,
+			kind: 'device',
+			level: 0,
+			label: formatMessage(device.label),
+			expandable: true,
+			expanded: deviceExpanded,
+			selected: false,
+			disabled: false,
+		})
+		if (!deviceExpanded) continue
+
+		for (const group of device.groups) {
+			const rowId = groupRowId(device.id, group.id)
+			const groupExpanded = expanded.value.has(rowId)
+			rows.push({
+				id: rowId,
+				kind: 'group',
+				level: 1,
+				label: formatMessage(group.label),
+				expandable: true,
+				expanded: groupExpanded,
+				selected: false,
+				disabled: false,
+			})
+			if (!groupExpanded) continue
+
+			for (const item of group.items) {
+				const state = itemState(item)
+				rows.push({
+					id: itemRowId(device.id, group.id, item.code),
+					kind: 'item',
+					level: 2,
+					label: itemLabel(item),
+					expandable: false,
+					expanded: false,
+					selected: props.binding?.device === item.device && props.binding?.code === item.code,
+					item,
+					...state,
+				})
+			}
+		}
+	}
+
+	return rows
+})
+
+function setRowRef(id: string, element: unknown) {
+	if (element instanceof HTMLElement) rowRefs.set(id, element)
+	else rowRefs.delete(id)
+}
+
+function focusRow(index: number) {
+	const row = visibleRows.value[index]
+	if (!row) return
+	activeIndex.value = index
+	void nextTick(() => rowRefs.get(row.id)?.focus())
+}
+
+function toggle(row: TreeRow) {
+	if (!row.expandable) return
+	const next = new Set(expanded.value)
+	if (next.has(row.id)) next.delete(row.id)
+	else next.add(row.id)
+	expanded.value = next
+
+	// Collapsing can leave the active row past the end, which would stop the
+	// keyboard from moving anywhere.
+	const lastIndex = visibleRows.value.length - 1
+	if (activeIndex.value > lastIndex) focusRow(lastIndex)
+}
+
+function parentIndexOf(row: TreeRow) {
+	for (let index = visibleRows.value.indexOf(row) - 1; index >= 0; index -= 1) {
+		if (visibleRows.value[index].level < row.level) return index
+	}
+	return -1
+}
+
+function activateRow(row: TreeRow) {
+	if (row.kind === 'item') {
+		if (row.disabled || !row.item) return
+		emit('select', { device: row.item.device, code: row.item.code })
+		return
+	}
+	toggle(row)
+}
+
+function handleKeydown(event: KeyboardEvent) {
+	const row = visibleRows.value[activeIndex.value]
+	if (!row) return
+
+	switch (event.key) {
+		case 'ArrowDown':
+			event.preventDefault()
+			focusRow(Math.min(activeIndex.value + 1, visibleRows.value.length - 1))
+			break
+		case 'ArrowUp':
+			event.preventDefault()
+			focusRow(Math.max(activeIndex.value - 1, 0))
+			break
+		case 'ArrowRight':
+			event.preventDefault()
+			if (row.expandable && !row.expanded) toggle(row)
+			else if (row.expandable) focusRow(activeIndex.value + 1)
+			break
+		case 'ArrowLeft': {
+			event.preventDefault()
+			if (row.expandable && row.expanded) {
+				toggle(row)
+				break
+			}
+			const parent = parentIndexOf(row)
+			if (parent !== -1) focusRow(parent)
+			break
+		}
+		case 'Home':
+			event.preventDefault()
+			focusRow(0)
+			break
+		case 'End':
+			event.preventDefault()
+			focusRow(visibleRows.value.length - 1)
+			break
+		case 'Enter':
+		case ' ':
+			event.preventDefault()
+			activateRow(row)
+			break
+		case 'Escape':
+			// Handled here so escape leaves the picker instead of the whole dialog.
+			event.preventDefault()
+			event.stopPropagation()
+			emit('escape')
+			break
+		default:
+			break
+	}
+}
+</script>

packages/ui/src/components/modal/KeybindingModal.vue

@@ -0,0 +1,574 @@
+<template>
+	<NewModal
+		ref="modal"
+		:header="headerText"
+		max-width="540px"
+		:on-hide="handleModalHide"
+		:close-on-click-outside="false"
+	>
+		<div class="flex min-w-0 flex-col gap-4">
+			<div class="flex flex-wrap items-center justify-between gap-3">
+				<div class="flex min-w-0 flex-col gap-1">
+					<span class="text-sm text-[var(--color-text-tertiary)]">{{
+						formatMessage(messages.current)
+					}}</span>
+					<KeybindingChips v-if="props.binding" :binding="props.binding" />
+					<span v-else class="text-sm text-[var(--color-text-tertiary)]">{{
+						formatMessage(messages.unset)
+					}}</span>
+				</div>
+				<Button v-if="canRestoreDefault" type="outlined" size="2xs" @click="restoreDefault"
+					>{{ formatMessage(messages.restoreDefault) }}
+				</Button>
+			</div>
+
+			<button
+				v-if="phase !== 'tree'"
+				type="button"
+				class="flex min-h-[7rem] cursor-pointer flex-col items-center justify-center gap-3 rounded-xl border-2 border-dashed p-4 transition-colors duration-200"
+				:class="
+					phase === 'listening'
+						? 'border-brand bg-brand-highlight'
+						: 'border-surface-4 bg-surface-2 hover:border-brand'
+				"
+				:disabled="phase !== 'idle'"
+				@click="beginListening"
+			>
+				<template v-if="phase === 'listening'">
+					<span class="text-base font-semibold text-[var(--color-text-primary)]">
+						{{ formatMessage(messages.listeningTitle) }}
+					</span>
+					<span v-if="liveParts.length" class="flex flex-wrap items-center justify-center gap-1">
+						<kbd
+							v-for="(part, index) in liveParts"
+							:key="`${index}-${part}`"
+							class="rounded-md border border-solid border-surface-4 bg-surface-3 px-2 py-0.5 font-mono text-sm text-[var(--color-text-primary)]"
+						>
+							{{ part }}
+						</kbd>
+					</span>
+					<span v-else class="text-sm text-[var(--color-text-tertiary)]">
+						{{ formatMessage(messages.listeningHint) }}
+					</span>
+					<span class="block h-1 w-full max-w-[16rem] overflow-hidden rounded-full bg-surface-4">
+						<span
+							:key="captureRun"
+							class="keybinding-capture-bar block h-full rounded-full bg-brand"
+							:style="{ animationDuration: `${props.listenDurationMs}ms` }"
+						/>
+					</span>
+				</template>
+				<template v-else-if="phase === 'verifying'">
+					<span class="text-base font-semibold text-[var(--color-text-primary)]">
+						{{ formatMessage(verified ? messages.verifiedTitle : messages.verifyingTitle) }}
+					</span>
+					<KeybindingChips v-if="candidate" :binding="candidate" />
+					<span v-if="!verified" class="text-sm text-[var(--color-text-tertiary)]">
+						{{ formatMessage(messages.verifyingHint) }}
+					</span>
+				</template>
+				<template v-else>
+					<span class="text-base font-semibold text-[var(--color-text-primary)]">
+						{{ formatMessage(messages.captureTitle) }}
+					</span>
+					<span class="text-sm text-[var(--color-text-tertiary)]">{{
+						formatMessage(messages.captureHint)
+					}}</span>
+				</template>
+			</button>
+
+			<template v-else>
+				<div
+					class="flex flex-col gap-2 rounded-xl border border-solid border-surface-4 bg-surface-2 p-3"
+				>
+					<span class="text-sm font-semibold text-[var(--color-text-primary)]">
+						{{ formatMessage(messages.modifiers) }}
+					</span>
+					<div class="flex flex-wrap gap-2">
+						<Button
+							v-for="modifier in modifierOptions"
+							:key="modifier.field"
+							size="2xs"
+							:type="modifierState[modifier.field] ? 'highlight' : 'outlined'"
+							:aria-pressed="modifierState[modifier.field]"
+							@click="modifierState[modifier.field] = !modifierState[modifier.field]"
+						>
+							{{ modifier.label }}
+						</Button>
+					</div>
+				</div>
+
+				<KeybindingChoiceTree
+					:binding="treeBinding"
+					:disabled-codes="treeDisabledCodes"
+					@select="selectTreeInput"
+					@escape="phase = 'idle'"
+				/>
+			</template>
+
+			<div class="flex flex-col gap-1" aria-live="polite">
+				<p v-if="issueText" class="m-0 text-sm text-red">{{ issueText }}</p>
+				<p v-else-if="mismatchText" class="m-0 text-sm text-orange">{{ mismatchText }}</p>
+				<p v-else-if="verified" class="m-0 text-sm text-green">
+					{{ formatMessage(messages.verifiedHint) }}
+				</p>
+				<p v-else-if="nothingCapturedText" class="m-0 text-sm text-[var(--color-text-tertiary)]">
+					{{ nothingCapturedText }}
+				</p>
+			</div>
+
+			<div class="flex flex-wrap items-center gap-2">
+				<Button v-if="phase === 'tree'" type="outlined" @click="leaveTree"
+					>{{ formatMessage(messages.useCapture) }}
+				</Button>
+				<Button v-else type="outlined" @click="enterTree"
+					>{{ formatMessage(messages.useSpecial) }}
+				</Button>
+				<span v-if="phase === 'tree'" class="text-xs text-[var(--color-text-tertiary)]">
+					{{ formatMessage(messages.specialHint) }}
+				</span>
+			</div>
+		</div>
+
+		<template #actions>
+			<div class="flex justify-end gap-2">
+				<Button type="outlined" @click="cancel">{{ formatMessage(messages.cancel) }}</Button>
+				<Button type="colored" color="brand" :disabled="!canSave" @click="save"
+					>{{ formatMessage(messages.save) }}
+				</Button>
+			</div>
+		</template>
+	</NewModal>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, reactive, ref, watch } from 'vue'
+
+import { defineMessages, useVIntl } from '../../composables/i18n'
+import { useKeybindingLabels } from '../../composables/use-keybinding-labels'
+import {
+	type BindingConflict,
+	bindingFromKeyboardEvent,
+	bindingsEqual,
+	isModifierCode,
+	type KeyBinding,
+	keyCodeLabel,
+	validateBinding,
+} from '../../utils/keybinding'
+import { KEYBINDING_CATALOG } from '../../utils/keybinding-catalog'
+import Button from '../base/buttons/Button.vue'
+import KeybindingChips from '../base/KeybindingChips.vue'
+import KeybindingChoiceTree from './KeybindingChoiceTree.vue'
+import NewModal from './NewModal.vue'
+
+const props = withDefaults(
+	defineProps<{
+		/** The action being configured, shown in the title. */
+		actionLabel?: string
+		/** The combination the action answers to right now. */
+		binding?: KeyBinding | null
+		/** The combination the action ships with, offered as a way back. */
+		defaultBinding?: KeyBinding | null
+		/** Combinations that belong to something else. */
+		conflicts?: BindingConflict[]
+		/** How long a recording may run before it settles on its own. */
+		listenDurationMs?: number
+		/** How long after the last key is released a recording settles. */
+		settleMs?: number
+	}>(),
+	{
+		actionLabel: undefined,
+		binding: null,
+		defaultBinding: null,
+		conflicts: () => [],
+		listenDurationMs: 5000,
+		settleMs: 700,
+	},
+)
+
+const emit = defineEmits<{
+	save: [binding: KeyBinding]
+	cancel: []
+}>()
+
+const { formatMessage } = useVIntl()
+const labels = useKeybindingLabels()
+
+const messages = defineMessages({
+	title: { id: 'ui.keybinding-modal.title', defaultMessage: 'Set a shortcut' },
+	titleFor: {
+		id: 'ui.keybinding-modal.title-for',
+		defaultMessage: 'Shortcut for {action}',
+	},
+	current: { id: 'ui.keybinding-modal.current', defaultMessage: 'Current shortcut' },
+	unset: { id: 'ui.keybinding-modal.unset', defaultMessage: 'Not set' },
+	restoreDefault: {
+		id: 'ui.keybinding-modal.restore-default',
+		defaultMessage: 'Restore default',
+	},
+	captureTitle: {
+		id: 'ui.keybinding-modal.capture-title',
+		defaultMessage: 'Click here to record',
+	},
+	captureHint: {
+		id: 'ui.keybinding-modal.capture-hint',
+		defaultMessage: 'Then press the keys you want this shortcut to use.',
+	},
+	listeningTitle: {
+		id: 'ui.keybinding-modal.listening-title',
+		defaultMessage: 'Listening\u2026',
+	},
+	listeningHint: {
+		id: 'ui.keybinding-modal.listening-hint',
+		defaultMessage: 'Press the keys you want to use.',
+	},
+	verifyingTitle: {
+		id: 'ui.keybinding-modal.verifying-title',
+		defaultMessage: 'Press it again to confirm',
+	},
+	verifyingHint: {
+		id: 'ui.keybinding-modal.verifying-hint',
+		defaultMessage: 'This checks the combination was recorded correctly.',
+	},
+	verifiedTitle: {
+		id: 'ui.keybinding-modal.verified-title',
+		defaultMessage: 'Confirmed',
+	},
+	verifiedHint: {
+		id: 'ui.keybinding-modal.verified-hint',
+		defaultMessage: 'Confirmed. Save to use this shortcut.',
+	},
+	issueConflict: {
+		id: 'ui.keybinding-modal.issue-conflict',
+		defaultMessage: 'Already used by {label}.',
+	},
+	issueReserved: {
+		id: 'ui.keybinding-modal.issue-reserved',
+		defaultMessage: '{label} is reserved by the launcher.',
+	},
+	issueNeedsModifier: {
+		id: 'ui.keybinding-modal.issue-needs-modifier',
+		defaultMessage: 'Hold Ctrl/Cmd, Alt or Shift as well, or pick a function or navigation key.',
+	},
+	mismatch: {
+		id: 'ui.keybinding-modal.mismatch',
+		defaultMessage: 'That was a different combination, so recording started again.',
+	},
+	nothingCaptured: {
+		id: 'ui.keybinding-modal.nothing-captured',
+		defaultMessage: 'No key was recorded.',
+	},
+	useSpecial: {
+		id: 'ui.keybinding-modal.use-special',
+		defaultMessage: 'Pick an input another way',
+	},
+	useCapture: {
+		id: 'ui.keybinding-modal.use-capture',
+		defaultMessage: 'Record a combination instead',
+	},
+	specialHint: {
+		id: 'ui.keybinding-modal.special-hint',
+		defaultMessage: 'Mouse buttons, the wheel and combinations with them can only be picked here.',
+	},
+	modifiers: { id: 'ui.keybinding-modal.modifiers', defaultMessage: 'Modifiers' },
+	save: { id: 'ui.keybinding-modal.save', defaultMessage: 'Save' },
+	cancel: { id: 'ui.keybinding-modal.cancel', defaultMessage: 'Cancel' },
+})
+
+type Phase = 'idle' | 'listening' | 'verifying' | 'tree'
+
+const modal = ref<InstanceType<typeof NewModal>>()
+const phase = ref<Phase>('idle')
+const candidate = ref<KeyBinding | null>(null)
+const livePressed = ref<KeyBinding | null>(null)
+const captured = ref<KeyBinding | null>(null)
+const mismatch = ref<KeyBinding | null>(null)
+const nothingCaptured = ref(false)
+const verified = ref(false)
+const captureRun = ref(0)
+const treeInput = ref<{ device: KeyBinding['device']; code: string } | null>(null)
+const modifierState = reactive({ mod: false, shift: false, alt: false })
+
+let listenTimer: number | undefined
+let settleTimer: number | undefined
+
+const headerText = computed(() =>
+	props.actionLabel
+		? formatMessage(messages.titleFor, { action: props.actionLabel })
+		: formatMessage(messages.title),
+)
+
+const modifierOptions = computed(() => [
+	{ field: 'mod' as const, label: labels.value.mod },
+	{ field: 'alt' as const, label: labels.value.alt },
+	{ field: 'shift' as const, label: labels.value.shift },
+])
+
+const liveParts = computed(() => {
+	const pressed = livePressed.value
+	if (!pressed) return []
+	const parts: string[] = []
+	if (pressed.mod) parts.push(labels.value.mod)
+	if (pressed.alt) parts.push(labels.value.alt)
+	if (pressed.shift) parts.push(labels.value.shift)
+	if (!isModifierCode(pressed.code)) parts.push(keyCodeLabel(pressed.code))
+	return parts
+})
+
+const treeBinding = computed<KeyBinding | null>(() =>
+	treeInput.value ? { ...treeInput.value, ...modifierState } : null,
+)
+
+const proposed = computed(() => (phase.value === 'tree' ? treeBinding.value : candidate.value))
+
+const canRestoreDefault = computed(
+	() =>
+		Boolean(props.defaultBinding) &&
+		(!props.binding || !bindingsEqual(props.binding, props.defaultBinding as KeyBinding)),
+)
+
+const issue = computed(() =>
+	proposed.value ? validateBinding(proposed.value, props.conflicts) : null,
+)
+
+const issueText = computed(() => {
+	const value = issue.value
+	if (!value) return null
+	if (value.kind === 'needs-modifier') return formatMessage(messages.issueNeedsModifier)
+	return formatMessage(value.reserved ? messages.issueReserved : messages.issueConflict, {
+		label: value.label,
+	})
+})
+
+const mismatchText = computed(() => (mismatch.value ? formatMessage(messages.mismatch) : null))
+const nothingCapturedText = computed(() =>
+	nothingCaptured.value ? formatMessage(messages.nothingCaptured) : null,
+)
+
+const isVerified = computed(() => phase.value === 'tree' || verified.value)
+const canSave = computed(() => Boolean(proposed.value) && !issue.value && isVerified.value)
+
+/** Inputs the picker must refuse, keyed by code, with the reason to show. */
+const treeDisabledCodes = computed(() => {
+	const disabled = new Map<string, string>()
+	for (const device of KEYBINDING_CATALOG) {
+		for (const group of device.groups) {
+			for (const item of group.items) {
+				const found = validateBinding(
+					{ device: item.device, code: item.code, ...modifierState },
+					props.conflicts,
+				)
+				if (found?.kind === 'conflict') {
+					disabled.set(
+						item.code,
+						formatMessage(found.reserved ? messages.issueReserved : messages.issueConflict, {
+							label: found.label,
+						}),
+					)
+				}
+			}
+		}
+	}
+	return disabled
+})
+
+function clearTimers() {
+	window.clearTimeout(listenTimer)
+	window.clearTimeout(settleTimer)
+	listenTimer = undefined
+	settleTimer = undefined
+}
+
+function beginListening() {
+	clearTimers()
+	candidate.value = null
+	livePressed.value = null
+	captured.value = null
+	nothingCaptured.value = false
+	verified.value = false
+	captureRun.value += 1
+	phase.value = 'listening'
+	listenTimer = window.setTimeout(finishListening, props.listenDurationMs)
+}
+
+function finishListening() {
+	clearTimers()
+	if (!captured.value) {
+		nothingCaptured.value = true
+		phase.value = 'idle'
+		return
+	}
+	candidate.value = captured.value
+	mismatch.value = null
+	verified.value = false
+	phase.value = 'verifying'
+}
+
+function handleKeydown(event: KeyboardEvent) {
+	if (event.key === 'Escape') {
+		// Leaving the recording is a step back, not closing the dialog.
+		event.preventDefault()
+		// Immediate: the dialog's own escape handler sits on the same node.
+		event.stopImmediatePropagation()
+		clearTimers()
+		phase.value = 'idle'
+		return
+	}
+
+	if (phase.value === 'listening') {
+		event.preventDefault()
+		event.stopImmediatePropagation()
+		livePressed.value = {
+			device: 'keyboard',
+			code: event.code,
+			mod: event.ctrlKey || event.metaKey,
+			shift: event.shiftKey,
+			alt: event.altKey,
+		}
+		const combination = bindingFromKeyboardEvent(event)
+		if (combination) {
+			captured.value = combination
+			window.clearTimeout(settleTimer)
+			settleTimer = undefined
+		}
+		return
+	}
+
+	if (phase.value === 'verifying') {
+		event.preventDefault()
+		event.stopImmediatePropagation()
+		const attempt = bindingFromKeyboardEvent(event)
+		if (!attempt || !candidate.value) return
+		if (bindingsEqual(attempt, candidate.value)) {
+			verified.value = true
+			mismatch.value = null
+			return
+		}
+		mismatch.value = attempt
+		beginListening()
+	}
+}
+
+function handleKeyup(event: KeyboardEvent) {
+	if (phase.value !== 'listening') return
+	event.stopPropagation()
+	const stillHeld = event.ctrlKey || event.metaKey || event.shiftKey || event.altKey
+	if (stillHeld || !captured.value) return
+	// Nothing is held any more, so the combination is as complete as it gets.
+	window.clearTimeout(settleTimer)
+	settleTimer = window.setTimeout(finishListening, props.settleMs)
+}
+
+function attachListeners() {
+	window.addEventListener('keydown', handleKeydown, true)
+	window.addEventListener('keyup', handleKeyup, true)
+}
+
+function detachListeners() {
+	window.removeEventListener('keydown', handleKeydown, true)
+	window.removeEventListener('keyup', handleKeyup, true)
+}
+
+watch(phase, (value) => {
+	if (value === 'listening' || value === 'verifying') attachListeners()
+	else detachListeners()
+})
+
+onBeforeUnmount(() => {
+	clearTimers()
+	detachListeners()
+})
+
+function enterTree() {
+	const source = candidate.value ?? props.binding
+	modifierState.mod = source?.mod ?? false
+	modifierState.alt = source?.alt ?? false
+	modifierState.shift = source?.shift ?? false
+	treeInput.value = source ? { device: source.device, code: source.code } : null
+	phase.value = 'tree'
+}
+
+function leaveTree() {
+	treeInput.value = null
+	phase.value = 'idle'
+}
+
+function selectTreeInput(input: { device: KeyBinding['device']; code: string }) {
+	treeInput.value = input
+}
+
+function restoreDefault() {
+	if (!props.defaultBinding) return
+	candidate.value = props.defaultBinding
+	mismatch.value = null
+	nothingCaptured.value = false
+	verified.value = true
+	phase.value = 'verifying'
+}
+
+function reset() {
+	clearTimers()
+	phase.value = 'idle'
+	candidate.value = null
+	livePressed.value = null
+	captured.value = null
+	mismatch.value = null
+	nothingCaptured.value = false
+	verified.value = false
+	treeInput.value = null
+	modifierState.mod = false
+	modifierState.alt = false
+	modifierState.shift = false
+}
+
+function handleModalHide() {
+	reset()
+}
+
+function show() {
+	reset()
+	modal.value?.show()
+}
+
+function hide() {
+	modal.value?.hide()
+}
+
+function save() {
+	const value = proposed.value
+	if (!value || !canSave.value) return
+	emit('save', value)
+	modal.value?.hide()
+}
+
+function cancel() {
+	emit('cancel')
+	modal.value?.hide()
+}
+
+defineExpose({ show, hide })
+</script>
+
+<style scoped>
+@keyframes keybinding-capture-drain {
+	from {
+		width: 100%;
+	}
+	to {
+		width: 0%;
+	}
+}
+
+.keybinding-capture-bar {
+	animation-name: keybinding-capture-drain;
+	animation-timing-function: linear;
+	animation-fill-mode: forwards;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.keybinding-capture-bar {
+		animation: none;
+		width: 100%;
+	}
+}
+</style>

packages/ui/src/components/modal/index.ts

@@ -8,3 +8,4 @@ export { default as ShareModal } from './ShareModal.vue'
 export type { Tab as TabbedModalTab } from './TabbedModal.vue'
 export { default as TabbedModal } from './TabbedModal.vue'
 export { default as UploadProgressModal } from './UploadProgressModal.vue'
+export { default as KeybindingModal } from './KeybindingModal.vue'