Merge branch 'master' into ndom91/rm-editorconfig

2024-12-15 20:22:33 +03:00 · 2024-06-07 14:06:53 +02:00 · 2024-06-07 14:06:53 +02:00 · e6efc15f4b
commit e6efc15f4b
parent b3bebca3a2 5301181c49
38 changed files with 75 additions and 76 deletions
--- a/app/src/lib/components/AIPromptEdit/AIPromptEdit.svelte
+++ b/app/src/lib/components/AIPromptEdit/AIPromptEdit.svelte
@ -38,9 +38,7 @@
 		<h3 class="text-base-15 text-bold">
 			{promptUse === 'commits' ? 'Commit message' : 'Branch name'}
 		</h3>
-		<Button kind="solid" style="ghost" icon="plus-small" on:click={createNewPrompt}
-			>New prompt</Button
-		>
+		<Button style="ghost" outline icon="plus-small" on:click={createNewPrompt}>New prompt</Button>
 	</div>

 	<div class="content">
--- a/app/src/lib/components/AIPromptEdit/Content.svelte
+++ b/app/src/lib/components/AIPromptEdit/Content.svelte
@ -141,7 +141,7 @@
 		{#if displayMode === 'writable'}
 			<div class="actions">
 				{#if editing}
-					<Button kind="solid" style="ghost" on:click={() => cancel()}>Cancel</Button>
+					<Button style="ghost" outline on:click={() => cancel()}>Cancel</Button>
 					<Button
 						disabled={errorMessages.length > 0}
 						kind="solid"
@ -157,7 +157,7 @@
 						}}
 						icon="bin-small">Delete</Button
 					>
-					<Button kind="solid" style="ghost" icon="edit-text" on:click={() => (editing = true)}
+					<Button style="ghost" outline icon="edit-text" on:click={() => (editing = true)}
 						>Edit prompt</Button
 					>
 				{/if}
--- a/app/src/lib/components/AIPromptEdit/DialogBubble.svelte
+++ b/app/src/lib/components/AIPromptEdit/DialogBubble.svelte
@ -92,7 +92,7 @@
 					Remove example
 				</Button>
 			{/if}
-			<Button kind="solid" style="ghost" grow on:click={() => dispatcher('addExample')}
+			<Button style="ghost" outline grow on:click={() => dispatcher('addExample')}
 				>Add new example</Button
 			>
 		</div>
--- a/app/src/lib/components/ActiveBranchStatus.svelte
+++ b/app/src/lib/components/ActiveBranchStatus.svelte
@ -69,7 +69,7 @@
 		size="tag"
 		icon="open-link"
 		style="ghost"
-		kind="solid"
+		outline
 		shrinkable
 		on:click={(e) => {
 			const url = $baseBranch?.branchUrl($branch.upstream?.name);
--- a/app/src/lib/components/AppUpdater.svelte
+++ b/app/src/lib/components/AppUpdater.svelte
@ -106,7 +106,7 @@
 		<div class="buttons">
 			<Button
 				style="ghost"
-				kind="solid"
+				outline
 				on:mousedown={() => {
 					const notes = $update$?.body?.trim() || 'no release notes available';
 					showToast({
--- a/app/src/lib/components/BackButton.svelte
+++ b/app/src/lib/components/BackButton.svelte
@ -5,7 +5,7 @@

 <Button
 	style="ghost"
-	kind="solid"
+	outline
 	on:mousedown={() => {
 		if (history.length > 0) {
 			history.back();
--- a/app/src/lib/components/BaseBranch.svelte
+++ b/app/src/lib/components/BaseBranch.svelte
@ -114,7 +114,7 @@
 	</label>

 	<svelte:fragment slot="controls" let:close>
-		<Button style="ghost" kind="solid" on:click={close}>Cancel</Button>
+		<Button style="ghost" outline on:click={close}>Cancel</Button>
 		<Button
 			style="pop"
 			kind="solid"
--- a/app/src/lib/components/BaseBranchSwitch.svelte
+++ b/app/src/lib/components/BaseBranchSwitch.svelte
@ -110,7 +110,7 @@
 					<Button
 						size="cta"
 						style="ghost"
-						kind="solid"
+						outline
 						on:click={onSetBaseBranchClick}
 						id="set-base-branch"
 						loading={isSwitching}
--- a/app/src/lib/components/BranchFilesList.svelte
+++ b/app/src/lib/components/BranchFilesList.svelte
@ -63,7 +63,7 @@
 			<Button
 				icon="copy"
 				style="ghost"
-				kind="solid"
+				outline
 				on:mousedown={() => copyToClipboard(mergeDiffCommand + $commit.id.slice(0, 7))}
 			></Button>
 		</div>
--- a/app/src/lib/components/BranchHeader.svelte
+++ b/app/src/lib/components/BranchHeader.svelte
@ -96,13 +96,7 @@
 			<div class="collapsed-lane__draggable" data-drag-handle>
 				<Icon name="draggable" />
 			</div>
-			<Button
-				style="ghost"
-				kind="solid"
-				icon="unfold-lane"
-				help="Expand lane"
-				on:click={expandLane}
-			/>
+			<Button style="ghost" outline icon="unfold-lane" help="Expand lane" on:click={expandLane} />
 		</div>

 		<div class="collapsed-lane__info-wrap" bind:clientHeight={headerInfoHeight}>
@ -201,7 +195,7 @@
 						{:else}
 							<Button
 								style="ghost"
-								kind="solid"
+								outline
 								help="When selected, new changes will land here"
 								icon="target"
 								disabled={isUnapplied}
@ -220,7 +214,7 @@
 					{#if isUnapplied}
 						<Button
 							style="ghost"
-							kind="solid"
+							outline
 							help="Deletes the local virtual branch (only)"
 							icon="bin-small"
 							loading={isDeleting}
@ -241,7 +235,7 @@
 						</Button>
 						<Button
 							style="ghost"
-							kind="solid"
+							outline
 							help="Restores these changes into your working directory"
 							icon="plus-small"
 							loading={isApplying}
@ -271,7 +265,7 @@
 							<Button
 								element={meatballButton}
 								style="ghost"
-								kind="solid"
+								outline
 								icon="kebab"
 								on:mousedown={() => {
 									visible = !visible;
--- a/app/src/lib/components/BranchLanePopupMenu.svelte
+++ b/app/src/lib/components/BranchLanePopupMenu.svelte
@ -143,7 +143,7 @@
 	</svelte:fragment>

 	<svelte:fragment slot="controls" let:close>
-		<Button style="ghost" kind="solid" type="reset" on:click={close}>Cancel</Button>
+		<Button style="ghost" outline type="reset" on:click={close}>Cancel</Button>
 		<Button style="pop" kind="solid" type="submit">Rename</Button>
 	</svelte:fragment>
 </Modal>
@ -153,7 +153,7 @@
 		Deleting <code class="code-string">{branch.name}</code> cannot be undone.
 	</svelte:fragment>
 	<svelte:fragment slot="controls" let:close let:item={branch}>
-		<Button style="ghost" kind="solid" on:click={close}>Cancel</Button>
+		<Button style="ghost" outline on:click={close}>Cancel</Button>
 		<Button
 			style="error"
 			kind="solid"
--- a/app/src/lib/components/BranchPreviewHeader.svelte
+++ b/app/src/lib/components/BranchPreviewHeader.svelte
@ -55,7 +55,7 @@
 					size="tag"
 					icon="open-link"
 					style="ghost"
-					kind="solid"
+					outline
 					shrinkable
 					on:click={(e) => {
 						const url = base?.branchUrl(branch.name);
@ -72,7 +72,7 @@
 						clickable
 						icon="pr-small"
 						style="ghost"
-						kind="solid"
+						outline
 						on:click={(e) => {
 							const url = pr?.htmlUrl;
 							if (url) openExternalUrl(url);
@ -89,7 +89,7 @@
 			<div class="header__buttons">
 				<Button
 					style="ghost"
-					kind="solid"
+					outline
 					help="Restores these changes into your working directory"
 					icon="plus-small"
 					loading={isApplying}
--- a/app/src/lib/components/BranchesHeader.svelte
+++ b/app/src/lib/components/BranchesHeader.svelte
@ -27,7 +27,7 @@
 	<div class="header__filter-btn" bind:this={filterButton}>
 		<Button
 			style="ghost"
-			kind="solid"
+			outline
 			icon={filtersActive ? 'filter-applied-small' : 'filter-small'}
 			on:mousedown={onFilterClick}
 		>
--- a/app/src/lib/components/Button.svelte
+++ b/app/src/lib/components/Button.svelte
@ -25,6 +25,9 @@
 	// Style props
 	export let style: ComponentColor = 'neutral';
 	export let kind: ComponentStyleKind = 'soft';
+	export let outline = false;
+	export let dashed = false;
+	export let solidBackground = false;
 	// Additional elements
 	export let icon: keyof typeof iconsJson | undefined = undefined;
 	export let help = '';
@ -33,7 +36,10 @@
 </script>

 <button
-	class="btn focus-state {style} {kind} {size}"
+	class="btn focus-state {style} {kind} {size}-size"
+	class:outline
+	class:dashed
+	class:solidBackground
 	class:reversed-direction={reversedDirection}
 	class:shrinkable
 	class:wide
@ -162,20 +168,24 @@

 	.ghost {
 		--btn-icon-clr: oklch(from var(--clr-text-1) l c h / 0.6);
+		--btn-clr: var(--clr-text-1);
+		--btn-bg: transparent;

 		&:not(.not-clickable, &:disabled):hover {
 			--btn-bg: var(--ghost-bg-muted-1);
 			--btn-icon-clr: var(--clr-text-1);
 		}

-		&.soft,
-		&.solid {
-			--btn-clr: var(--clr-text-1);
-			--btn-bg: transparent;
+		&.outline {
+			border: 1px solid var(--clr-border-2);
 		}

-		&.solid {
-			border: 1px solid var(--clr-border-2);
+		&.dashed {
+			border-style: dashed;
+		}
+
+		&.solidBackground {
+			background: var(--clr-bg-1);
 		}
 	}

@ -276,7 +286,7 @@

 	/* SIZE MODIFIERS */

-	.btn.tag {
+	.btn.tag-size {
 		height: var(--size-tag);
 		padding: 2px 4px;

@ -285,7 +295,7 @@
 		}
 	}

-	.btn.button {
+	.btn.button-size {
 		height: var(--size-button);
 		padding: 4px 6px;

@ -294,7 +304,7 @@
 		}
 	}

-	.btn.cta {
+	.btn.cta-size {
 		height: var(--size-cta);
 		padding: 6px 8px;

@ -306,15 +316,15 @@
 	/* FIXED WIDTH */

 	.btn.fixed-width {
-		&.tag {
+		&.tag-size {
 			width: var(--size-tag);
 		}

-		&.button {
+		&.button-size {
 			width: var(--size-button);
 		}

-		&.cta {
+		&.cta-size {
 			width: var(--size-cta);
 		}
 	}
--- a/app/src/lib/components/CloudForm.svelte
+++ b/app/src/lib/components/CloudForm.svelte
@ -115,11 +115,8 @@
 			You can apply your own custom prompts to the project. By default, the project uses GitButler
 			prompts, but you can create your own prompts in the general settings.
 		</p>
-		<Button
-			style="ghost"
-			kind="solid"
-			icon="edit-text"
-			on:click={async () => await goto('/settings/ai')}>Customize prompts</Button
+		<Button style="ghost" outline icon="edit-text" on:click={async () => await goto('/settings/ai')}
+			>Customize prompts</Button
 		>
 	</SectionCard>
 </Section>
--- a/app/src/lib/components/CommitCard.svelte
+++ b/app/src/lib/components/CommitCard.svelte
@ -106,7 +106,7 @@
 <Modal bind:this={commitMessageModal}>
 	<CommitMessageInput bind:commitMessage={description} bind:valid={commitMessageValid} />
 	<svelte:fragment slot="controls">
-		<Button style="ghost" kind="solid" on:click={() => commitMessageModal.close()}>Cancel</Button>
+		<Button style="ghost" outline on:click={() => commitMessageModal.close()}>Cancel</Button>
 		<Button
 			style="pop"
 			kind="solid"
@ -211,7 +211,7 @@
 									<Button
 										size="tag"
 										style="ghost"
-										kind="solid"
+										outline
 										icon="undo-small"
 										on:click={(e) => {
 											currentCommitMessage.set(commit.description);
@ -222,7 +222,7 @@
 									<Button
 										size="tag"
 										style="ghost"
-										kind="solid"
+										outline
 										icon="edit-text"
 										on:click={openCommitMessageModal}>Edit message</Button
 									>
@ -231,7 +231,7 @@
 									<Button
 										size="tag"
 										style="ghost"
-										kind="solid"
+										outline
 										icon="open-link"
 										on:click={() => {
 											if (commitUrl) openExternalUrl(commitUrl);
--- a/app/src/lib/components/CommitDialog.svelte
+++ b/app/src/lib/components/CommitDialog.svelte
@ -55,7 +55,7 @@
 		{#if $expanded && !isCommitting}
 			<Button
 				style="ghost"
-				kind="solid"
+				outline
 				id="commit-to-branch"
 				on:click={() => {
 					$expanded = false;
--- a/app/src/lib/components/CommitMessageInput.svelte
+++ b/app/src/lib/components/CommitMessageInput.svelte
@ -191,7 +191,7 @@
 	>
 		<DropDownButton
 			style="ghost"
-			kind="solid"
+			outline
 			icon="ai-small"
 			disabled={!($aiGenEnabled && aiConfigurationValid)}
 			loading={aiLoading}
--- a/app/src/lib/components/DropDownButton.svelte
+++ b/app/src/lib/components/DropDownButton.svelte
@ -7,6 +7,7 @@
 	export let icon: keyof typeof iconsJson | undefined = undefined;
 	export let style: ComponentColor = 'neutral';
 	export let kind: ComponentStyleKind = 'soft';
+	export let outline = false;
 	export let disabled = false;
 	export let loading = false;
 	export let wide = false;
@ -38,6 +39,7 @@
 			{help}
 			{badgeLabel}
 			{badgeIcon}
+			{outline}
 			reversedDirection
 			disabled={disabled || loading}
 			isDropdownChild
@ -48,6 +50,7 @@
 			{style}
 			{kind}
 			{help}
+			{outline}
 			icon={visible ? 'chevron-up' : 'chevron-down'}
 			{loading}
 			disabled={disabled || loading}
--- a/app/src/lib/components/FileContextMenu.svelte
+++ b/app/src/lib/components/FileContextMenu.svelte
@ -114,7 +114,7 @@
 		</ul>
 	</div>
 	<svelte:fragment slot="controls" let:close let:item>
-		<Button style="ghost" kind="solid" on:click={close}>Cancel</Button>
+		<Button style="ghost" outline on:click={close}>Cancel</Button>
 		<Button
 			style="error"
 			kind="solid"
--- a/app/src/lib/components/GithubIntegration.svelte
+++ b/app/src/lib/components/GithubIntegration.svelte
@ -97,7 +97,7 @@
 			Allows you to view and create Pull Requests from GitButler.
 		</svelte:fragment>
 		{#if $user?.github_access_token}
-			<Button style="ghost" kind="solid" {disabled} icon="bin-small" on:click={forgetGitHub}
+			<Button style="ghost" outline {disabled} icon="bin-small" on:click={forgetGitHub}
 				>Forget</Button
 			>
 		{:else}
--- a/app/src/lib/components/InfoMessage.svelte
+++ b/app/src/lib/components/InfoMessage.svelte
@ -76,7 +76,7 @@
 		{#if primary || secondary}
 			<div class="info-message__actions">
 				{#if secondary}
-					<Button style="ghost" kind="solid" on:click={() => dispatch('secondary')}>
+					<Button style="ghost" outline on:click={() => dispatch('secondary')}>
 						{secondary}
 					</Button>
 				{/if}
--- a/app/src/lib/components/KeysForm.svelte
+++ b/app/src/lib/components/KeysForm.svelte
@ -171,7 +171,7 @@
 					</Button>
 					<Button
 						style="ghost"
-						kind="solid"
+						outline
 						icon="open-link"
 						on:mousedown={() => {
 							openExternalUrl('https://github.com/settings/ssh/new');
--- a/app/src/lib/components/LargeDiffMessage.svelte
+++ b/app/src/lib/components/LargeDiffMessage.svelte
@ -14,7 +14,7 @@
 <div class="large-diff-message" class:frame-box={showFrame}>
 	<p class="text-base-13">Change hidden as large diffs may slow down the UI</p>

-	<Button style="ghost" kind="solid" color="neutral" on:click={show}>Show anyways</Button>
+	<Button style="ghost" outline color="neutral" on:click={show}>Show anyways</Button>
 </div>

 <style>
--- a/app/src/lib/components/MergeButton.svelte
+++ b/app/src/lib/components/MergeButton.svelte
@ -30,7 +30,7 @@

 <DropDownButton
 	style="ghost"
-	kind="solid"
+	outline
 	{loading}
 	bind:this={dropDown}
 	{wide}
--- a/app/src/lib/components/NewBranchDropZone.svelte
+++ b/app/src/lib/components/NewBranchDropZone.svelte
@ -68,7 +68,7 @@
 		<div class="new-branch-button">
 			<Button
 				style="ghost"
-				kind="solid"
+				outline
 				icon="plus-small"
 				on:mousedown={async () => await branchController.createBranch({})}>New branch</Button
 			>
--- a/app/src/lib/components/PassphraseBox.svelte
+++ b/app/src/lib/components/PassphraseBox.svelte
@ -37,7 +37,7 @@
 		<div class="passbox__actions">
 			<Button
 				style="ghost"
-				kind="solid"
+				outline
 				disabled={isSubmitting}
 				on:click={async () => {
 					if (!prompt) return;
--- a/app/src/lib/components/ProjectSetup.svelte
+++ b/app/src/lib/components/ProjectSetup.svelte
@ -43,7 +43,7 @@
 		{@const [remoteName, branchName] = selectedBranch[0].split(/\/(.*)/s)}
 		<KeysForm {remoteName} {branchName} />
 		<div class="actions">
-			<Button style="ghost" kind="solid" on:mousedown={() => (selectedBranch[0] = '')}>Back</Button>
+			<Button style="ghost" outline on:mousedown={() => (selectedBranch[0] = '')}>Back</Button>
 			<Button style="pop" kind="solid" {loading} on:click={setTarget}>Let's go!</Button>
 		</div>
 	{:else}
--- a/app/src/lib/components/PromptModal.svelte
+++ b/app/src/lib/components/PromptModal.svelte
@ -67,9 +67,7 @@
 	<TextBox focus type="password" bind:value disabled={!!$error || loading} />

 	<svelte:fragment slot="controls">
-		<Button style="ghost" kind="solid" type="reset" disabled={loading} on:click={cancel}>
-			Cancel
-		</Button>
+		<Button style="ghost" outline type="reset" disabled={loading} on:click={cancel}>Cancel</Button>
 		<Button style="pop" kind="solid" type="submit" grow disabled={!!$error || loading} {loading}
 			>Submit</Button
 		>
--- a/app/src/lib/components/PullRequestButton.svelte
+++ b/app/src/lib/components/PullRequestButton.svelte
@ -29,7 +29,7 @@

 <DropDownButton
 	style="ghost"
-	kind="solid"
+	outline
 	{loading}
 	bind:this={dropDown}
 	on:click={() => {
--- a/app/src/lib/components/PullRequestCard.svelte
+++ b/app/src/lib/components/PullRequestCard.svelte
@ -257,7 +257,7 @@
 				icon="update-small"
 				size="tag"
 				style="ghost"
-				kind="soft"
+				outline
 				loading={isFetchingDetails || isFetchingChecks}
 				help={$lastDetailsFetch ? 'Updated ' + $lastDetailsFetch : ''}
 				on:click={async () => {
@ -294,7 +294,7 @@
 				size="tag"
 				icon="open-link"
 				style="ghost"
-				kind="solid"
+				outline
 				shrinkable
 				on:click={(e) => {
 					const url = pr?.htmlUrl;
--- a/app/src/lib/components/PullRequestPreview.svelte
+++ b/app/src/lib/components/PullRequestPreview.svelte
@ -79,7 +79,7 @@
 	</p>
 	<TextBox label="Choose a remote name" bind:value={remoteName}></TextBox>
 	<svelte:fragment slot="controls">
-		<Button style="ghost" kind="solid" on:click={closeModal}>Cancel</Button>
+		<Button style="ghost" outline on:click={closeModal}>Cancel</Button>
 		<Button style="pop" kind="solid" grow on:click={createRemoteAndBranch} {loading}>Confirm</Button
 		>
 	</svelte:fragment>
--- a/app/src/lib/components/ShareIssueModal.svelte
+++ b/app/src/lib/components/ShareIssueModal.svelte
@ -220,7 +220,7 @@
 	</div>

 	<svelte:fragment slot="controls">
-		<Button style="ghost" kind="solid" type="reset" on:click={close}>Close</Button>
+		<Button style="ghost" outline type="reset" on:click={close}>Close</Button>
 		<Button style="pop" kind="solid" type="submit">Share with GitButler</Button>
 	</svelte:fragment>
 </Modal>
--- a/app/src/lib/components/SnapshotCard.svelte
+++ b/app/src/lib/components/SnapshotCard.svelte
@ -166,7 +166,7 @@
 			<Button
 				size="tag"
 				style="ghost"
-				kind="solid"
+				outline
 				help="Restores GitButler and your files to the state before this operation. Revert actions can also be undone."
 				on:click={() => {
 					dispatch('restoreClick');
--- a/app/src/lib/components/SyncButton.svelte
+++ b/app/src/lib/components/SyncButton.svelte
@ -17,7 +17,7 @@
 	clickable
 	reversedDirection
 	style="ghost"
-	kind="solid"
+	outline
 	icon="update-small"
 	help="Last fetch from upstream"
 	loading={$baseServiceBusy$}
--- a/app/src/lib/components/settings/Sidebar.svelte
+++ b/app/src/lib/components/settings/Sidebar.svelte
@ -34,7 +34,6 @@
 					<Button
 						icon="chevron-left"
 						style="ghost"
-						kind="soft"
 						on:mousedown={() => {
 							if (history.length > 0) {
 								history.back();
--- a/app/src/routes/[projectId]/stashed/[branchId]/+page.svelte
+++ b/app/src/routes/[projectId]/stashed/[branchId]/+page.svelte
@ -35,7 +35,7 @@
 <Modal width="small" title="Merge conflicts" bind:this={applyConflictedModal}>
 	<p>Applying this branch will introduce merge conflicts.</p>
 	<svelte:fragment slot="controls" let:item let:close>
-		<Button style="ghost" kind="solid" on:click={close}>Cancel</Button>
+		<Button style="ghost" outline on:click={close}>Cancel</Button>
 		<Button
 			style="pop"
 			kind="solid"
@ -55,7 +55,7 @@
 		Deleting <code class="code-string">{item.name}</code> cannot be undone.
 	</div>
 	<svelte:fragment slot="controls" let:close let:item>
-		<Button style="ghost" kind="solid" on:mousedown={close}>Cancel</Button>
+		<Button style="ghost" outline on:mousedown={close}>Cancel</Button>
 		<Button
 			style="error"
 			kind="solid"
--- a/app/src/routes/settings/git/+page.svelte
+++ b/app/src/routes/settings/git/+page.svelte
@ -65,7 +65,7 @@
 			</Button>
 			<Button
 				style="ghost"
-				kind="solid"
+				outline
 				icon="open-link"
 				on:mousedown={() => {
 					openExternalUrl('https://github.com/settings/ssh/new');