Merge pull request #275 from gitbutlerapp/ian/gb-276-cmdk-ux-improvements-after-first

Ian/gb 276 cmdk ux improvements after first

src/app.postcss

@@ -32,6 +32,27 @@ input:focus {
 	cursor: default;
 }
 
+.outline-none-important {
+	@apply outline-none focus:outline-none active:outline-none;
+	outline: none;
+}
+.outline-none-important:focus {
+	outline: none;
+	-webkit-appearance: none;
+	outline: 0;
+	outline-offset: 0;
+	box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, rgba(37, 99, 235, 0) 0px 0px 0px 2px,
+		rgba(0, 0, 0, 0) 0px 0px 0px 0px;
+}
+.outline-none-important::before {
+	outline: none;
+	-webkit-appearance: none;
+	outline: 0;
+	outline-offset: 0;
+	box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, rgba(37, 99, 235, 0) 0px 0px 0px 2px,
+		rgba(0, 0, 0, 0) 0px 0px 0px 0px;
+}
+
 /* SCROLL BAR STYLING */
 
 /* width */

src/lib/components/QuickCommitModal.svelte

@@ -3,7 +3,8 @@
 	import { Status, type Project, git } from '$lib/api';
 	import type { CloudApi, User } from '$lib/api';
 	import { Button, Modal, Link } from '$lib/components';
-	import { IconGitBranch } from './icons';
+	import Tooltip from './Tooltip/Tooltip.svelte';
+	import { IconGitBranch, IconSparkle } from './icons';
 
 	export const show = () => modal.show();
 
@@ -125,37 +126,41 @@
 		on:submit|preventDefault={onCommit}
 	>
 		<header class="flex w-full items-center justify-between p-4">
-			<h2 class="flex items-center gap-4">
-				<IconGitBranch class="h-5 w-5" />
-				<span class="line-height-5 text-white">{head}</span>
+			<h2 class="flex items-center gap-2">
+				<IconGitBranch class="h-5 w-5 text-zinc-400" />
+				<span class="line-height-5 text-zinc-300">{head}</span>
 			</h2>
-
-			<Button
-				role="purple"
-				height="small"
-				disabled={isCommitting || !project.api?.sync}
-				loading={isAutowriting}
-				on:click={onAutowrite}
-			>
-				Autowrite
-			</Button>
 		</header>
 
 		<div class="flex flex-col px-4">
 			<!-- svelte-ignore a11y-autofocus -->
-			<input
-				autocomplete="off"
-				autocorrect="off"
-				spellcheck="true"
-				autofocus
-				name="commit-message"
-				class="overflow-auto border-0 border-none bg-transparent p-1 text-xl text-zinc-100"
-				type="text"
-				placeholder="Commit message (required)"
-				disabled={isAutowriting || isCommitting}
-				bind:value={summary}
-				required
-			/>
+			<div class="flex w-full items-center justify-between gap-2">
+				<input
+					autocomplete="off"
+					autocorrect="off"
+					spellcheck="true"
+					autofocus
+					name="commit-message"
+					contenteditable="true"
+					class="quick-commit-input break-word outline-none-important w-full overflow-auto border-0 border-none bg-transparent p-1 text-xl text-zinc-100"
+					type="text"
+					placeholder="Commit message (required)"
+					disabled={isAutowriting || isCommitting}
+					bind:value={summary}
+					required
+				/>
+
+				<Button
+					role="purple"
+					filled={false}
+					outlined={true}
+					disabled={isCommitting || !project.api?.sync}
+					loading={isAutowriting}
+					on:click={onAutowrite}
+				>
+					<IconSparkle class="h-5 w-5" />
+				</Button>
+			</div>
 
 			<textarea
 				autocomplete="off"
@@ -163,7 +168,7 @@
 				spellcheck="true"
 				bind:value={description}
 				name="commit-description"
-				class="resize-none border-none bg-transparent p-1 text-lg text-zinc-400"
+				class="quick-commit-input outline-none-important resize-none border-none bg-transparent p-1 text-lg text-zinc-400"
 				placeholder="Commit description (optional)"
 				disabled={isAutowriting || isCommitting}
 				rows="6"
@@ -206,7 +211,17 @@
 	</form>
 </Modal>
 
-<style>
+<style lang="postcss">
+	.quick-commit-input {
+		@apply outline-none focus:outline-none active:outline-none;
+		outline: none;
+	}
+	.quick-commit-input:focus {
+		outline: 0;
+		outline-offset: 0;
+		box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, rgba(37, 99, 235, 0) 0px 0px 0px 2px,
+			rgba(0, 0, 0, 0) 0px 0px 0px 0px;
+	}
 	footer {
 		box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.1);
 	}

src/lib/components/icons/IconHome.svelte

@@ -5,14 +5,16 @@
 
 <svg
 	class={className}
-	width="14"
-	height="14"
-	viewBox="0 0 14 14"
+	width="20"
+	height="20"
+	viewBox="0 0 20 20"
 	fill="none"
 	xmlns="http://www.w3.org/2000/svg"
 >
 	<path
-		d="M7.5547 0.16795C7.2188 -0.0559832 6.7812 -0.0559832 6.4453 0.16795L0.8906 3.87108C0.334202 4.24201 0 4.86648 0 5.53518V12C0 13.1046 0.895431 14 2 14H4C4.55228 14 5 13.5523 5 13V9H9V13C9 13.5523 9.44771 14 10 14H12C13.1046 14 14 13.1046 14 12V5.53518C14 4.86648 13.6658 4.24202 13.1094 3.87108L7.5547 0.16795Z"
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M2.12121 0C0.949699 0 0 0.949699 0 2.12121V6.9697C0 8.14121 0.949699 9.09091 2.12121 9.09091H6.9697C8.14121 9.09091 9.09091 8.14121 9.09091 6.9697V2.12121C9.09091 0.949699 8.14121 0 6.9697 0H2.12121ZM1.81818 2.12121C1.81818 1.95385 1.95385 1.81818 2.12121 1.81818H6.9697C7.13706 1.81818 7.27273 1.95385 7.27273 2.12121V6.9697C7.27273 7.13706 7.13706 7.27273 6.9697 7.27273H2.12121C1.95385 7.27273 1.81818 7.13706 1.81818 6.9697V2.12121ZM13.0303 0C11.8588 0 10.9091 0.949699 10.9091 2.12121V6.9697C10.9091 8.14121 11.8588 9.09091 13.0303 9.09091H17.8788C19.0503 9.09091 20 8.14121 20 6.9697V2.12121C20 0.949699 19.0503 0 17.8788 0H13.0303ZM12.7273 2.12121C12.7273 1.95385 12.863 1.81818 13.0303 1.81818H17.8788C18.0462 1.81818 18.1818 1.95385 18.1818 2.12121V6.9697C18.1818 7.13706 18.0462 7.27273 17.8788 7.27273H13.0303C12.863 7.27273 12.7273 7.13706 12.7273 6.9697V2.12121ZM0 13.0303C0 11.8588 0.949699 10.9091 2.12121 10.9091H6.9697C8.14121 10.9091 9.09091 11.8588 9.09091 13.0303V17.8788C9.09091 19.0503 8.14121 20 6.9697 20H2.12121C0.949699 20 0 19.0503 0 17.8788V13.0303ZM2.12121 12.7273C1.95385 12.7273 1.81818 12.8629 1.81818 13.0303V17.8788C1.81818 18.0461 1.95385 18.1818 2.12121 18.1818H6.9697C7.13706 18.1818 7.27273 18.0461 7.27273 17.8788V13.0303C7.27273 12.8629 7.13706 12.7273 6.9697 12.7273H2.12121ZM13.0303 10.9091C11.8588 10.9091 10.9091 11.8588 10.9091 13.0303V17.8788C10.9091 19.0503 11.8588 20 13.0303 20H17.8788C19.0503 20 20 19.0503 20 17.8788V13.0303C20 11.8588 19.0503 10.9091 17.8788 10.9091H13.0303ZM12.7273 13.0303C12.7273 12.8629 12.863 12.7273 13.0303 12.7273H17.8788C18.0462 12.7273 18.1818 12.8629 18.1818 13.0303V17.8788C18.1818 18.0461 18.0462 18.1818 17.8788 18.1818H13.0303C12.863 18.1818 12.7273 18.0461 12.7273 17.8788V13.0303Z"
 		fill="currentColor"
 	/>
 </svg>

src/lib/components/icons/IconSparkle.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	let className = '';
+	export { className as class };
+</script>
+
+<svg
+	class={className}
+	xmlns="http://www.w3.org/2000/svg"
+	width="20"
+	height="20"
+	viewBox="0 0 20 20"
+	fill="none"
+>
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M11.9572 4.05509C11.7745 3.95585 11.6048 3.83459 11.4531 3.69517C11.1468 3.41352 10.9032 3.05324 10.7291 2.62445L10.4758 2L10.2225 2.62445C10.0484 3.05322 9.80486 3.41349 9.49856 3.69517C9.34614 3.83529 9.17678 3.95655 8.99481 4.05544L8.57141 4.28572L8.99481 4.516C9.17678 4.6149 9.34614 4.73615 9.49856 4.87627C9.80485 5.15757 10.0484 5.51784 10.2225 5.94699L10.4758 6.57143L10.7291 5.94699C10.9032 5.51823 11.1468 5.15795 11.4531 4.87627C11.6055 4.73615 11.7748 4.61489 11.9572 4.516L12.3809 4.28537L11.9572 4.05509ZM14.5614 12.4667C14.3108 12.3264 14.0786 12.1554 13.8712 11.9586C13.4477 11.557 13.1091 11.0402 12.8663 10.4224L12.1828 8.68643L11.4994 10.4224C11.2561 11.0402 10.918 11.557 10.4945 11.9586C10.2861 12.1563 10.0539 12.3273 9.80476 12.4672L8.66333 13.1079L9.80476 13.7481C10.0539 13.8879 10.2861 14.0589 10.494 14.2566C10.918 14.6582 11.2561 15.1756 11.4989 15.7928L12.1823 17.5288L12.8658 15.7928C13.1091 15.175 13.4472 14.6582 13.8707 14.2566C14.0791 14.0589 14.3113 13.8874 14.5609 13.7481L15.7029 13.1074L14.5614 12.4667ZM7.88429 8.16578C8.08878 8.35958 8.31754 8.52812 8.56381 8.66607L9.13502 8.98615L8.56381 9.30672C8.31804 9.44417 8.08975 9.61272 7.88429 9.80749C7.47142 10.199 7.14308 10.6998 6.90848 11.2958L6.56702 12.1637L6.22556 11.2958C5.99094 10.6993 5.66261 10.1985 5.24974 9.80749C5.04429 9.61272 4.81601 9.44419 4.57071 9.30672L4 8.98664L4.57071 8.66655C4.816 8.5291 5.04429 8.36055 5.24974 8.16578C5.66262 7.77426 5.99096 7.27349 6.22556 6.67751L6.56702 5.80952L6.90848 6.67751C7.14309 7.27351 7.47143 7.7743 7.88429 8.16578Z"
+		fill="currentColor"
+	/>
+</svg>

src/lib/components/icons/index.ts

@@ -19,5 +19,6 @@ export { default as IconDiscord } from './IconDiscord.svelte';
 export { default as IconExternalLink } from './IconExternalLink.svelte';
 export { default as IconFeedback } from './IconFeedback.svelte';
 export { default as IconSearch } from './IconSearch.svelte';
+export { default as IconSparkle } from './IconSparkle.svelte';
 export { default as IconArrowLeft } from './IconArrowLeft.svelte';
 export { default as IconArrowRight } from './IconArrowRight.svelte';

src/routes/+layout.svelte

@@ -56,10 +56,10 @@
 		data-tauri-drag-region
 		class="flex flex-row items-center border-b border-zinc-700 pt-1 pb-1 text-zinc-400"
 	>
-		<div class="ml-24">
+		<div class="breadkcrumb-back-forward-container ml-24">
 			<BackForwardButtons />
 		</div>
-		<div class="ml-6">
+		<div class="breadcrumb-project-container ml-6">
 			<Breadcrumbs project={$project} />
 		</div>
 		<div class="flex-grow" />