Merge pull request #3931 from gitbutlerapp/svelte-commit-card-updates

Remove non-advanced mode

app/src/lib/components/CommitCard.svelte

@@ -8,9 +8,9 @@
 	import Modal from '$lib/components/Modal.svelte';
 	import Tag from '$lib/components/Tag.svelte';
 	import { persistedCommitMessage } from '$lib/config/config';
-	import { featureAdvancedCommitOperations } from '$lib/config/uiFeatureFlags';
 	import { draggable } from '$lib/dragging/draggable';
 	import { DraggableCommit, nonDraggable } from '$lib/dragging/draggables';
+	import { copyToClipboard } from '$lib/utils/clipboard';
 	import { getContext, getContextStore } from '$lib/utils/context';
 	import { getTimeAgo } from '$lib/utils/timeAgo';
 	import { openExternalUrl } from '$lib/utils/url';
@@ -40,7 +40,6 @@
 	const branchController = getContext(BranchController);
 	const baseBranch = getContextStore(BaseBranch);
 	const project = getContext(Project);
-	const advancedCommitOperations = featureAdvancedCommitOperations();
 
 	const commitStore = createCommitStore(commit);
 	$: commitStore.set(commit);
@@ -93,13 +92,8 @@
 		branchController.reorderCommit(branch.id, commit.id, offset);
 	}
 
-	let isUndoable = false;
+	let isUndoable = !!branch?.active && commit instanceof Commit;
 
-	$: if ($advancedCommitOperations) {
-		isUndoable = !!branch?.active && commit instanceof Commit;
-	} else {
-		isUndoable = isHeadCommit;
-	}
 	const hasCommitUrl = !commit.isLocal && commitUrl;
 
 	let commitMessageModal: Modal;
@@ -197,29 +191,29 @@
 							{commit.descriptionTitle}
 						</h5>
 
-						{#if $advancedCommitOperations}
-							<div class="text-base-11 commit__subtitle">
-								<span class="commit__id">
-									{#if commit.changeId}
-										{commit.changeId.split('-')[0]}
-									{:else}
-										{commit.id.substring(0, 6)}
-									{/if}
+						<div class="text-base-11 commit__subtitle">
+							<!-- svelte-ignore a11y-click-events-have-key-events -->
+							<span
+								class="commit__id"
+								on:click|stopPropagation={() => copyToClipboard(commit.id)}
+								role="button"
+								tabindex="0"
+							>
+								{commit.id.substring(0, 7)}
 
-									{#if commit.isSigned}
-										<Icon name="locked-small" />
-									{/if}
-								</span>
+								{#if commit.isSigned}
+									<Icon name="locked-small" />
+								{/if}
+							</span>
 
-								<span class="commit__subtitle-divider">•</span>
+							<span class="commit__subtitle-divider">•</span>
 
-								<span
-									>{getTimeAgo(commit.createdAt)}{type == 'remote' || type == 'upstream'
-										? ` by ${commit.author.name}`
-										: ''}</span
-								>
-							</div>
-						{/if}
+							<span
+								>{getTimeAgo(commit.createdAt)}{type == 'remote' || type == 'upstream'
+									? ` by ${commit.author.name}`
+									: ''}</span
+							>
+						</div>
 					{/if}
 				</div>
 
@@ -240,51 +234,49 @@
 											undoCommit(commit);
 										}}>Undo</Tag
 									>
-									{#if $advancedCommitOperations}
-										<Tag
-											style="ghost"
-											kind="solid"
-											icon="edit-text"
-											clickable
-											on:click={openCommitMessageModal}>Edit message</Tag
-										>
-										<Tag
-											style="ghost"
-											kind="solid"
-											clickable
-											on:click={(e) => {
-												e.stopPropagation();
-												reorderCommit(commit, -1);
-											}}>Move Up</Tag
-										>
-										<Tag
-											style="ghost"
-											kind="solid"
-											clickable
-											on:click={(e) => {
-												e.stopPropagation();
-												reorderCommit(commit, 1);
-											}}>Move Down</Tag
-										>
-										<Tag
-											style="ghost"
-											kind="solid"
-											clickable
-											on:click={(e) => {
-												e.stopPropagation();
-												insertBlankCommit(commit, -1);
-											}}>Add Before</Tag
-										>
-										<Tag
-											style="ghost"
-											kind="solid"
-											clickable
-											on:click={(e) => {
-												e.stopPropagation();
-												insertBlankCommit(commit, 1);
-											}}>Add After</Tag
-										>
-									{/if}
+									<Tag
+										style="ghost"
+										kind="solid"
+										icon="edit-text"
+										clickable
+										on:click={openCommitMessageModal}>Edit message</Tag
+									>
+									<Tag
+										style="ghost"
+										kind="solid"
+										clickable
+										on:click={(e) => {
+											e.stopPropagation();
+											reorderCommit(commit, -1);
+										}}>Move Up</Tag
+									>
+									<Tag
+										style="ghost"
+										kind="solid"
+										clickable
+										on:click={(e) => {
+											e.stopPropagation();
+											reorderCommit(commit, 1);
+										}}>Move Down</Tag
+									>
+									<Tag
+										style="ghost"
+										kind="solid"
+										clickable
+										on:click={(e) => {
+											e.stopPropagation();
+											insertBlankCommit(commit, -1);
+										}}>Add Before</Tag
+									>
+									<Tag
+										style="ghost"
+										kind="solid"
+										clickable
+										on:click={(e) => {
+											e.stopPropagation();
+											insertBlankCommit(commit, 1);
+										}}>Add After</Tag
+									>
 								{/if}
 								{#if hasCommitUrl}
 									<Tag
@@ -443,6 +435,10 @@
 		display: flex;
 		align-items: center;
 		gap: var(--size-4);
+
+		&:hover {
+			color: var(--clr-text-1);
+		}
 	}
 
 	.commit__subtitle-divider {

app/src/lib/config/uiFeatureFlags.ts

@@ -10,8 +10,3 @@ export function featureBaseBranchSwitching(): Persisted<boolean> {
 	const key = 'featureBaseBranchSwitching';
 	return persisted(false, key);
 }
-
-export function featureAdvancedCommitOperations(): Persisted<boolean> {
-	const key = 'featureAdvancedCommitOperations';
-	return persisted(false, key);
-}

app/src/lib/utils/tooltip.ts

@@ -1,10 +1,12 @@
 export interface ToolTipOptions {
 	text: string;
+	noMaxWidth?: boolean;
 	delay?: number;
 }
 
 const defaultOptions: Partial<ToolTipOptions> = {
-	delay: 1200
+	delay: 1200,
+	noMaxWidth: false
 };
 
 export function tooltip(node: HTMLElement, optsOrString: ToolTipOptions | string | undefined) {
@@ -15,7 +17,8 @@ export function tooltip(node: HTMLElement, optsOrString: ToolTipOptions | string
 	let timeoutId: any;
 
 	// Options
-	let { text, delay } = defaultOptions;
+	// eslint-disable-next-line prefer-const
+	let { text, delay, noMaxWidth } = defaultOptions;
 
 	// Most use cases only involve passing a string, so we allow either opts of
 	// simple text.
@@ -23,7 +26,7 @@ export function tooltip(node: HTMLElement, optsOrString: ToolTipOptions | string
 		if (typeof opts == 'string') {
 			text = opts;
 		} else if (opts) {
-			({ text, delay } = opts || {});
+			({ text, delay, noMaxWidth } = opts || {});
 		}
 		if (tooltip && text) tooltip.innerText = text;
 	}
@@ -52,6 +55,7 @@ export function tooltip(node: HTMLElement, optsOrString: ToolTipOptions | string
 		tooltip = document.createElement('div') as HTMLDivElement;
 		// TODO: Can we co-locate tooltip.js & tooltip.postcss?
 		tooltip.classList.add('tooltip', 'text-base-11'); // see tooltip.postcss
+		if (noMaxWidth) tooltip.classList.add('no-max-width');
 		tooltip.innerText = text;
 		document.body.appendChild(tooltip);
 		adjustPosition();

app/src/routes/settings/experimental/+page.svelte

@@ -2,12 +2,8 @@
 	import SectionCard from '$lib/components/SectionCard.svelte';
 	import Toggle from '$lib/components/Toggle.svelte';
 	import ContentWrapper from '$lib/components/settings/ContentWrapper.svelte';
-	import {
-		featureBaseBranchSwitching,
-		featureAdvancedCommitOperations
-	} from '$lib/config/uiFeatureFlags';
+	import { featureBaseBranchSwitching } from '$lib/config/uiFeatureFlags';
 	const baseBranchSwitching = featureBaseBranchSwitching();
-	const advancedCommitOperations = featureAdvancedCommitOperations();
 </script>
 
 <ContentWrapper title="Experimental features">
@@ -29,20 +25,6 @@
 			/>
 		</svelte:fragment>
 	</SectionCard>
-	<SectionCard labelFor="advancedCommitOperations" orientation="row">
-		<svelte:fragment slot="title">Advanced commit operations</svelte:fragment>
-		<svelte:fragment slot="caption">
-			Allows for reordeing of commits, changing the message as well as undoing of commits anywhere
-			in the stack. In addition it allows for adding an empty commit between two other commits.
-		</svelte:fragment>
-		<svelte:fragment slot="actions">
-			<Toggle
-				id="advancedCommitOperations"
-				checked={$advancedCommitOperations}
-				on:change={() => ($advancedCommitOperations = !$advancedCommitOperations)}
-			/>
-		</svelte:fragment>
-	</SectionCard>
 </ContentWrapper>
 
 <style>

app/src/styles/tooltip.css

@@ -15,6 +15,10 @@
 
 	opacity: 0;
 	animation: showup-tooltip-animation 0.1s ease-out forwards;
+
+	&.no-max-width {
+		max-width: unset;
+	}
 }
 
 @keyframes showup-tooltip-animation {