add-hotkey-tip-to-create-pr (#9898)

* feat(ui/desktop): add hotkey prop to dropdown and review submit

* fix: rename DropDownButton to DropdownButton and adjust usages, plus tweak commit view height to 50vh

* feat: submit on Ctrl/CmdEnter in editor

We were able to submit using hotkey on the PR body level but it should 
be on the title as well

Author: PavelLaptev

apps/desktop/src/components/CommitView.svelte

@@ -257,7 +257,7 @@
 	.commit-view {
 		position: relative;
 		/* Limit the commit view to at most 40vh to ensure other sections remain visible */
-		max-height: 40vh;
+		max-height: 50vh;
 		background-color: var(--clr-bg-1);
 	}
 

apps/desktop/src/components/MergeButton.svelte

@@ -2,7 +2,7 @@
 	import { MergeMethod } from '$lib/forge/interface/types';
 	import { persisted, type Persisted } from '@gitbutler/shared/persisted';
 
-	import { ContextMenuItem, ContextMenuSection, DropDownButton } from '@gitbutler/ui';
+	import { ContextMenuItem, ContextMenuSection, DropdownButton } from '@gitbutler/ui';
 	import type { ButtonProps } from '@gitbutler/ui';
 
 	interface Props {
@@ -32,7 +32,7 @@
 
 	const action = persistedAction(projectId);
 
-	let dropDown: ReturnType<typeof DropDownButton> | undefined;
+	let dropDown: ReturnType<typeof DropdownButton> | undefined;
 	let loading = $state(false);
 
 	const labels = {
@@ -42,7 +42,7 @@
 	};
 </script>
 
-<DropDownButton
+<DropdownButton
 	bind:this={dropDown}
 	onclick={async () => {
 		loading = true;
@@ -73,4 +73,4 @@
 			{/each}
 		</ContextMenuSection>
 	{/snippet}
-</DropDownButton>
+</DropdownButton>

apps/desktop/src/components/ReviewCreation.svelte

@@ -386,6 +386,12 @@
 					messageEditor?.focus();
 				}
 
+				if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+					e.preventDefault();
+					createReview();
+					return true;
+				}
+
 				if (e.key === 'Escape') {
 					e.preventDefault();
 					onClose();

apps/desktop/src/components/ReviewCreationControls.svelte

@@ -5,7 +5,7 @@
 		Button,
 		ContextMenuItem,
 		ContextMenuSection,
-		DropDownButton,
+		DropdownButton,
 		TestId
 	} from '@gitbutler/ui';
 
@@ -22,7 +22,7 @@
 		$props();
 
 	const unit = $derived(reviewUnit ?? 'PR');
-	let commitButton = $state<DropDownButton>();
+	let commitButton = $state<DropdownButton>();
 
 	const createDraft = persisted<boolean>(false, 'createDraftPr');
 </script>
@@ -36,7 +36,7 @@
 		onclick={onCancel}>Cancel</Button
 	>
 
-	<DropDownButton
+	<DropdownButton
 		testId={TestId.ReviewCreateButton}
 		bind:this={commitButton}
 		onclick={() => {
@@ -47,6 +47,7 @@
 		style="pop"
 		loading={isSubmitting}
 		disabled={submitDisabled}
+		hotkey="⌘↵"
 	>
 		{$createDraft ? `Create ${unit} draft` : `Create ${unit}`}
 
@@ -70,7 +71,7 @@
 				/>
 			</ContextMenuSection>
 		{/snippet}
-	</DropDownButton>
+	</DropdownButton>
 </div>
 
 <style lang="postcss">

apps/desktop/src/components/editor/MessageEditor.svelte

@@ -24,7 +24,7 @@
 		Checkbox,
 		ContextMenuItem,
 		ContextMenuSection,
-		DropDownButton,
+		DropdownButton,
 		EmojiPickerButton,
 		Modal,
 		RichTextEditor,
@@ -416,7 +416,7 @@
 					{/if}
 				{/if}
 			</div>
-			<DropDownButton
+			<DropdownButton
 				kind="outline"
 				icon="ai-small"
 				shrinkable
@@ -448,7 +448,7 @@
 						</ContextMenuItem>
 					</ContextMenuSection>
 				{/snippet}
-			</DropDownButton>
+			</DropdownButton>
 		</div>
 	</div>
 </div>

apps/web/src/lib/components/chat/ChatInput.svelte

@@ -20,7 +20,7 @@
 		Button,
 		ContextMenuItem,
 		ContextMenuSection,
-		DropDownButton,
+		DropdownButton,
 		EmojiPickerButton,
 		Mention as MentionsPlugin,
 		RichTextEditor
@@ -169,7 +169,7 @@
 	type Action = keyof typeof actionLabels;
 
 	let action = $state<Action>('approve');
-	let dropDownButton = $state<ReturnType<typeof DropDownButton>>();
+	let dropDownButton = $state<ReturnType<typeof DropdownButton>>();
 
 	async function approve() {
 		await patchCommitService.updatePatch(branchUuid, changeId, {
@@ -312,7 +312,7 @@
 
 				<div class="chat-input__action-buttons">
 					{#if isPatchAuthor === false}
-						<DropDownButton
+						<DropdownButton
 							bind:this={dropDownButton}
 							loading={isSendingMessage || isExecuting}
 							style="neutral"
@@ -345,7 +345,7 @@
 									/>
 								</ContextMenuSection>
 							{/snippet}
-						</DropDownButton>
+						</DropdownButton>
 					{/if}
 					<Button
 						style="pop"

apps/web/src/lib/components/review/ChangeActionButton.svelte

@@ -8,7 +8,7 @@
 		CommitStatusBadge,
 		ContextMenuItem,
 		ContextMenuSection,
-		DropDownButton
+		DropdownButton
 	} from '@gitbutler/ui';
 
 	interface Props {
@@ -45,7 +45,7 @@
 	let loginModal = $state<LoginModal>();
 	let action = $state<Action>('approve');
 	let isExecuting = $state(false);
-	let dropDownButton = $state<ReturnType<typeof DropDownButton>>();
+	let dropDownButton = $state<ReturnType<typeof DropdownButton>>();
 
 	const buttonColor = $derived.by(() => {
 		switch (action) {
@@ -134,7 +134,7 @@
 		</button>
 	</div>
 {:else}
-	<DropDownButton
+	<DropdownButton
 		bind:this={dropDownButton}
 		loading={isExecuting}
 		menuPosition="top"
@@ -161,7 +161,7 @@
 				/>
 			</ContextMenuSection>
 		{/snippet}
-	</DropDownButton>
+	</DropdownButton>
 {/if}
 
 <LoginModal bind:this={loginModal}>

packages/shared/src/lib/organizations/PermissionsSelector.svelte

@@ -4,7 +4,7 @@
 	import { PROJECT_SERVICE } from '$lib/organizations/projectService';
 	import { getProjectByRepositoryId } from '$lib/organizations/projectsPreview.svelte';
 	import { ShareLevel } from '$lib/permissions';
-	import { ContextMenuItem, ContextMenuSection, DropDownButton } from '@gitbutler/ui';
+	import { ContextMenuItem, ContextMenuSection, DropdownButton } from '@gitbutler/ui';
 
 	type Props = {
 		repositoryId: string;
@@ -41,13 +41,13 @@
 		}
 	}
 
-	let dropDownButton = $state<DropDownButton>();
+	let dropDownButton = $state<DropdownButton>();
 	let dropDownEnabled = $state(true);
 </script>
 
 <Loading loadable={project.current}>
 	{#snippet children(project)}
-		<DropDownButton bind:this={dropDownButton} loading={!dropDownEnabled} kind="outline">
+		<DropdownButton bind:this={dropDownButton} loading={!dropDownEnabled} kind="outline">
 			{options.find((option) => option.key === project.permissions.shareLevel)?.label}
 
 			{#snippet contextMenuSlot()}
@@ -61,6 +61,6 @@
 					{/each}
 				</ContextMenuSection>
 			{/snippet}
-		</DropDownButton>
+		</DropdownButton>
 	{/snippet}
 </Loading>

packages/ui/src/lib/components/DropDownButton.svelte renamed to packages/ui/src/lib/components/DropdownButton.svelte

@@ -21,6 +21,7 @@
 		type?: 'button' | 'submit' | 'reset';
 		menuPosition?: 'top' | 'bottom';
 		shrinkable?: boolean;
+		hotkey?: string;
 		children?: Snippet;
 		contextMenuSlot: Snippet;
 		onclick?: (e: MouseEvent) => void;
@@ -41,6 +42,7 @@
 		tooltip,
 		menuPosition = 'bottom',
 		shrinkable,
+		hotkey,
 		children,
 		contextMenuSlot,
 		onclick
@@ -76,6 +78,7 @@
 			{shrinkable}
 			{type}
 			{width}
+			{hotkey}
 			reversedDirection
 			disabled={disabled || loading}
 			dropdownChild

packages/ui/src/lib/index.ts

@@ -11,7 +11,7 @@ export {
 export { default as ContextMenu } from '$components/ContextMenu.svelte';
 export { default as ContextMenuItem } from '$components/ContextMenuItem.svelte';
 export { default as ContextMenuSection } from '$components/ContextMenuSection.svelte';
-export { default as DropDownButton } from '$components/DropDownButton.svelte';
+export { default as DropdownButton } from '$components/DropdownButton.svelte';
 export { default as EditorLogo } from '$components/EditorLogo.svelte';
 export { default as EmptyStatePlaceholder } from '$components/EmptyStatePlaceholder.svelte';
 export { default as HunkDiff, type LineClickParams } from '$components/hunkDiff/HunkDiff.svelte';