Convert CommitList to svelte5 component

This commit is contained in:
Mattias Granlund 2024-09-11 20:14:36 +02:00
parent 6a7ae9dcb3
commit bd7be6a759

View File

@ -30,7 +30,10 @@
import { LineManagerFactory } from '@gitbutler/ui/commitLines/lineManager'; import { LineManagerFactory } from '@gitbutler/ui/commitLines/lineManager';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
export let isUnapplied: boolean; interface Props {
isUnapplied: boolean;
}
const { isUnapplied }: Props = $props();
const branch = getContextStore(VirtualBranch); const branch = getContextStore(VirtualBranch);
const localCommits = getLocalCommits(); const localCommits = getLocalCommits();
@ -49,26 +52,36 @@
const reorderDropzoneManagerFactory = getContext(ReorderDropzoneManagerFactory); const reorderDropzoneManagerFactory = getContext(ReorderDropzoneManagerFactory);
const gitHost = getGitHost(); const gitHost = getGitHost();
// TODO: Why does eslint-svelte-plugin complain about enum?
// eslint-disable-next-line svelte/valid-compile
enum LineSpacer { enum LineSpacer {
Remote = 'remote-spacer', Remote = 'remote-spacer',
Local = 'local-spacer', Local = 'local-spacer',
LocalAndRemote = 'local-and-remote-spacer' LocalAndRemote = 'local-and-remote-spacer'
} }
$: mappedRemoteCommits = const mappedRemoteCommits = $derived(
$remoteCommits.length > 0 $remoteCommits.length > 0
? [...$remoteCommits.map(transformAnyCommit), { id: LineSpacer.Remote }] ? [...$remoteCommits.map(transformAnyCommit), { id: LineSpacer.Remote }]
: []; : []
$: mappedLocalCommits = );
const mappedLocalCommits = $derived(
$localCommits.length > 0 $localCommits.length > 0
? [...$localCommits.map(transformAnyCommit), { id: LineSpacer.Local }] ? [...$localCommits.map(transformAnyCommit), { id: LineSpacer.Local }]
: []; : []
$: mappedLocalAndRemoteCommits = );
const mappedLocalAndRemoteCommits = $derived(
$localAndRemoteCommits.length > 0 $localAndRemoteCommits.length > 0
? [...$localAndRemoteCommits.map(transformAnyCommit), { id: LineSpacer.LocalAndRemote }] ? [...$localAndRemoteCommits.map(transformAnyCommit), { id: LineSpacer.LocalAndRemote }]
: []; : []
);
$: lineManager = lineManagerFactory.build( const forkPoint = $derived($branch.forkPoint);
const upstreamForkPoint = $derived($branch.upstreamData?.forkPoint);
const isRebased = $derived(!!forkPoint && !!upstreamForkPoint && forkPoint !== upstreamForkPoint);
const lineManager = $derived(
lineManagerFactory.build(
{ {
remoteCommits: mappedRemoteCommits, remoteCommits: mappedRemoteCommits,
localCommits: mappedLocalCommits, localCommits: mappedLocalCommits,
@ -76,33 +89,28 @@
integratedCommits: $integratedCommits.map(transformAnyCommit) integratedCommits: $integratedCommits.map(transformAnyCommit)
}, },
!isRebased !isRebased
)
); );
// Force the "base" commit lines to update when $branch updates. // Force the "base" commit lines to update when $branch updates.
let tsKey: number | undefined; let tsKey = $state<number | undefined>(undefined);
$: { $effect(() => {
$branch; $branch;
tsKey = Date.now(); tsKey = Date.now();
} });
$: hasCommits = $branch.commits && $branch.commits.length > 0; const hasCommits = $derived($branch.commits && $branch.commits.length > 0);
$: headCommit = $branch.commits.at(0); const headCommit = $derived($branch.commits.at(0));
$: hasRemoteCommits = $remoteCommits.length > 0; const hasRemoteCommits = $derived($remoteCommits.length > 0);
$: reorderDropzoneManager = reorderDropzoneManagerFactory.build($branch, [ const reorderDropzoneManager = $derived(
...$localCommits, reorderDropzoneManagerFactory.build($branch, [...$localCommits, ...$localAndRemoteCommits])
...$localAndRemoteCommits );
]);
$: forkPoint = $branch.forkPoint; let isPushingCommits = $state(false);
$: upstreamForkPoint = $branch.upstreamData?.forkPoint; let isIntegratingCommits = $state(false);
$: isRebased = !!forkPoint && !!upstreamForkPoint && forkPoint !== upstreamForkPoint; let baseIsUnfolded = $state(false);
$: isPushingCommits = false;
$: isIntegratingCommits = false;
let baseIsUnfolded = false;
function insertBlankCommit(commitId: string, location: 'above' | 'below' = 'below') { function insertBlankCommit(commitId: string, location: 'above' | 'below' = 'below') {
if (!$branch || !$baseBranch) { if (!$branch || !$baseBranch) {
@ -127,8 +135,10 @@
return 0; return 0;
} }
$: localCommitsConflicted = $localCommits.some((commit) => commit.conflicted); const localCommitsConflicted = $derived($localCommits.some((commit) => commit.conflicted));
$: localAndRemoteCommitsConflicted = $localAndRemoteCommits.some((commit) => commit.conflicted); const localAndRemoteCommitsConflicted = $derived(
$localAndRemoteCommits.some((commit) => commit.conflicted)
);
async function push() { async function push() {
isPushingCommits = true; isPushingCommits = true;
@ -347,8 +357,11 @@
class="base-row" class="base-row"
tabindex="0" tabindex="0"
role="button" role="button"
on:click|stopPropagation={() => (baseIsUnfolded = !baseIsUnfolded)} onclick={(e) => {
on:keydown={(e) => e.key === 'Enter' && (baseIsUnfolded = !baseIsUnfolded)} e.stopPropagation();
baseIsUnfolded = !baseIsUnfolded;
}}
onkeydown={(e) => e.key === 'Enter' && (baseIsUnfolded = !baseIsUnfolded)}
> >
<div class="base-row__lines"> <div class="base-row__lines">
{#key tsKey} {#key tsKey}
@ -359,7 +372,7 @@
<span class="text-11 base-row__text" <span class="text-11 base-row__text"
>Base commit <button >Base commit <button
class="base-row__commit-link" class="base-row__commit-link"
on:click={async () => await goto(`/${project.id}/base`)} onclick={async () => await goto(`/${project.id}/base`)}
> >
{$branch.forkPoint ? $branch.forkPoint.slice(0, 7) : ''} {$branch.forkPoint ? $branch.forkPoint.slice(0, 7) : ''}
</button> </button>