mirror of
https://seed.radicle.dev/rad:z4V1sjrXqjvFdnCUbxPFqd5p4DtH5.git
synced 2026-10-26 07:00:38 +08:00
Extract Changes section into a separate component
This commit is contained in:
Rūdolfs Ošiņš
@@ -0,0 +1,146 @@
|
||||
<script lang="ts">
|
||||
import type { Commit } from "@bindings/repo/Commit";
|
||||
import type { Diff } from "@bindings/diff/Diff";
|
||||
import type { Revision } from "@bindings/cob/patch/Revision";
|
||||
|
||||
import { invoke } from "@app/lib/invoke";
|
||||
|
||||
import Changeset from "@app/components/Changeset.svelte";
|
||||
import CobCommitTeaser from "./CobCommitTeaser.svelte";
|
||||
import CommitsContainer from "@app/components/CommitsContainer.svelte";
|
||||
import Icon from "@app/components/Icon.svelte";
|
||||
import Id from "./Id.svelte";
|
||||
import NakedButton from "@app/components/NakedButton.svelte";
|
||||
|
||||
interface Props {
|
||||
rid: string;
|
||||
patchId: string;
|
||||
revision: Revision;
|
||||
}
|
||||
|
||||
/* eslint-disable prefer-const */
|
||||
let { rid, patchId, revision }: Props = $props();
|
||||
/* eslint-enable prefer-const */
|
||||
|
||||
let hideChanges = $state(false);
|
||||
let filesExpanded = $state(true);
|
||||
|
||||
$effect(() => {
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
|
||||
patchId;
|
||||
|
||||
hideChanges = false;
|
||||
});
|
||||
|
||||
async function loadHighlightedDiff(rid: string, base: string, head: string) {
|
||||
return invoke<Diff>("get_diff", {
|
||||
rid,
|
||||
options: {
|
||||
base,
|
||||
head,
|
||||
unified: 5,
|
||||
highlight: true,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
async function loadCommits(rid: string, base: string, head: string) {
|
||||
return invoke<Commit[]>("list_commits", {
|
||||
rid,
|
||||
base,
|
||||
head,
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.commits {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 0.875rem;
|
||||
margin-left: 0.5rem;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem 0.5rem 0.5rem 1rem;
|
||||
border-left: 1px solid var(--color-fill-separator);
|
||||
}
|
||||
.commit:last-of-type::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -18.5px;
|
||||
top: 14px;
|
||||
bottom: -0.5rem;
|
||||
border-left: 4px solid var(--color-background-default);
|
||||
}
|
||||
.commit-dot {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
position: absolute;
|
||||
top: 0.625rem;
|
||||
left: -18.5px;
|
||||
background-color: var(--color-fill-separator);
|
||||
}
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div
|
||||
class="txt-semibold global-flex"
|
||||
style:margin-bottom={hideChanges ? undefined : "1rem"}>
|
||||
<NakedButton variant="ghost" onclick={() => (hideChanges = !hideChanges)}>
|
||||
<Icon name={hideChanges ? "chevron-right" : "chevron-down"} />
|
||||
<div class="txt-semibold global-flex txt-regular">Changes</div>
|
||||
</NakedButton>
|
||||
{#if !hideChanges}
|
||||
<div style:margin-left="auto">
|
||||
<NakedButton
|
||||
variant="ghost"
|
||||
onclick={() => (filesExpanded = !filesExpanded)}>
|
||||
{#if filesExpanded === true}
|
||||
<Icon name="collapse" />
|
||||
Collapse all
|
||||
{:else}
|
||||
<Icon name="expand" />
|
||||
Expand all
|
||||
{/if}
|
||||
</NakedButton>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class:hide={hideChanges}>
|
||||
{#await loadCommits(rid, revision.base, revision.head) then commits}
|
||||
<div style:margin-bottom="1rem">
|
||||
<CommitsContainer expanded={filesExpanded}>
|
||||
{#snippet leftHeader()}
|
||||
<div class="txt-semibold">Commits</div>
|
||||
{/snippet}
|
||||
{#snippet children()}
|
||||
<div style:padding="0 1rem">
|
||||
<div
|
||||
class="global-flex txt-small"
|
||||
style:color="var(--color-foreground-dim)">
|
||||
<Icon name="branch" /><Id id={revision.base} variant="commit" />
|
||||
<div class="global-counter">base</div>
|
||||
</div>
|
||||
<div class="commits">
|
||||
{#each commits.reverse() as commit}
|
||||
<div class="commit" style:position="relative">
|
||||
<div class="commit-dot"></div>
|
||||
<CobCommitTeaser {commit} />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/snippet}
|
||||
</CommitsContainer>
|
||||
</div>
|
||||
{/await}
|
||||
|
||||
{#await loadHighlightedDiff(rid, revision.base, revision.head)}
|
||||
<span class="txt-small">Loading…</span>
|
||||
{:then diff}
|
||||
<Changeset {diff} repoId={rid} expanded={filesExpanded} />
|
||||
{/await}
|
||||
</div>
|
||||
@@ -1,8 +1,6 @@
|
||||
<script lang="ts">
|
||||
import type { Author } from "@bindings/cob/Author";
|
||||
import type { Commit } from "@bindings/repo/Commit";
|
||||
import type { Config } from "@bindings/config/Config";
|
||||
import type { Diff } from "@bindings/diff/Diff";
|
||||
import type { Embed } from "@bindings/cob/thread/Embed";
|
||||
import type { PatchStatus } from "@app/views/repo/router";
|
||||
import type { Revision } from "@bindings/cob/patch/Revision";
|
||||
@@ -18,14 +16,11 @@
|
||||
import { didFromPublicKey, publicKeyFromDid } from "@app/lib/utils";
|
||||
|
||||
import Button from "@app/components/Button.svelte";
|
||||
import Changeset from "@app/components/Changeset.svelte";
|
||||
import CobCommitTeaser from "./CobCommitTeaser.svelte";
|
||||
import Changes from "@app/components/Changes.svelte";
|
||||
import CommentComponent from "@app/components/Comment.svelte";
|
||||
import CommitsContainer from "@app/components/CommitsContainer.svelte";
|
||||
import Discussion from "./Discussion.svelte";
|
||||
import Icon from "@app/components/Icon.svelte";
|
||||
import Id from "./Id.svelte";
|
||||
import NakedButton from "./NakedButton.svelte";
|
||||
import NakedButton from "@app/components/NakedButton.svelte";
|
||||
import ReviewTeaser from "@app/components/ReviewTeaser.svelte";
|
||||
|
||||
interface Props {
|
||||
@@ -52,11 +47,9 @@
|
||||
),
|
||||
);
|
||||
|
||||
let hideChanges = $state(false);
|
||||
let hideReviews = $state(
|
||||
revision.reviews === undefined || revision.reviews.length === 0,
|
||||
);
|
||||
let filesExpanded = $state(true);
|
||||
|
||||
$effect(() => {
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
|
||||
@@ -64,7 +57,6 @@
|
||||
|
||||
hideReviews =
|
||||
revision.reviews === undefined || revision.reviews.length === 0;
|
||||
hideChanges = false;
|
||||
});
|
||||
|
||||
const commentThreads = $derived(
|
||||
@@ -226,26 +218,6 @@
|
||||
await reload();
|
||||
}
|
||||
}
|
||||
|
||||
async function loadHighlightedDiff(rid: string, base: string, head: string) {
|
||||
return invoke<Diff>("get_diff", {
|
||||
rid,
|
||||
options: {
|
||||
base,
|
||||
head,
|
||||
unified: 5,
|
||||
highlight: true,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
async function loadCommits(rid: string, base: string, head: string) {
|
||||
return invoke<Commit[]>("list_commits", {
|
||||
rid,
|
||||
base,
|
||||
head,
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@@ -269,32 +241,6 @@
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
.commits {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 0.875rem;
|
||||
margin-left: 0.5rem;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem 0.5rem 0.5rem 1rem;
|
||||
border-left: 1px solid var(--color-fill-separator);
|
||||
}
|
||||
.commit:last-of-type::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -18.5px;
|
||||
top: 14px;
|
||||
bottom: -0.5rem;
|
||||
border-left: 4px solid var(--color-background-default);
|
||||
}
|
||||
.commit-dot {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
position: absolute;
|
||||
top: 0.625rem;
|
||||
left: -18.5px;
|
||||
background-color: var(--color-fill-separator);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="txt-small patch-body">
|
||||
@@ -379,62 +325,4 @@
|
||||
{repoDelegates}
|
||||
{rid} />
|
||||
|
||||
<div
|
||||
class="txt-semibold global-flex"
|
||||
style:margin-bottom={hideChanges ? undefined : "1rem"}>
|
||||
<NakedButton variant="ghost" onclick={() => (hideChanges = !hideChanges)}>
|
||||
<Icon name={hideChanges ? "chevron-right" : "chevron-down"} />
|
||||
<div class="txt-semibold global-flex txt-regular">Changes</div>
|
||||
</NakedButton>
|
||||
{#if !hideChanges}
|
||||
<div style:margin-left="auto">
|
||||
<NakedButton
|
||||
variant="ghost"
|
||||
onclick={() => (filesExpanded = !filesExpanded)}>
|
||||
{#if filesExpanded === true}
|
||||
<Icon name="collapse" />
|
||||
Collapse all
|
||||
{:else}
|
||||
<Icon name="expand" />
|
||||
Expand all
|
||||
{/if}
|
||||
</NakedButton>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class:hide={hideChanges}>
|
||||
{#await loadCommits(rid, revision.base, revision.head) then commits}
|
||||
<div style:margin-bottom="1rem">
|
||||
<CommitsContainer expanded={filesExpanded}>
|
||||
{#snippet leftHeader()}
|
||||
<div class="txt-semibold">Commits</div>
|
||||
{/snippet}
|
||||
{#snippet children()}
|
||||
<div style:padding="0 1rem">
|
||||
<div
|
||||
class="global-flex txt-small"
|
||||
style:color="var(--color-foreground-dim)">
|
||||
<Icon name="branch" /><Id id={revision.base} variant="commit" />
|
||||
<div class="global-counter">base</div>
|
||||
</div>
|
||||
<div class="commits">
|
||||
{#each commits.reverse() as commit}
|
||||
<div class="commit" style:position="relative">
|
||||
<div class="commit-dot"></div>
|
||||
<CobCommitTeaser {commit} />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/snippet}
|
||||
</CommitsContainer>
|
||||
</div>
|
||||
{/await}
|
||||
|
||||
{#await loadHighlightedDiff(rid, revision.base, revision.head)}
|
||||
<span class="txt-small">Loading…</span>
|
||||
{:then diff}
|
||||
<Changeset {diff} repoId={rid} expanded={filesExpanded} />
|
||||
{/await}
|
||||
</div>
|
||||
<Changes {rid} {patchId} {revision} />
|
||||
|
||||
Reference in New Issue
Block a user