This patch moves the revision list from the tab bar drop-down to a sidebar on wide screens and above the current revision on narrow screens. This way all revisions are visible at all times.
We also move and nest the revision reviews into that list so that one can see whether there's anything actionable at a glance.
Other tweaks:
- added comment counts to revisions and reviews
- displayed unresolved comment thread counts per review
- swapped icons for accepted/rejected and neutral reviews to avoid clashing with resolved/unresolved comment icons
- made label and assignee sections more compact with hover-triggered "+" buttons
- added author and status sections to the sidebar
- enabled patch state changes from the title bar
- made "Review revision" the primary action and "Checkout patch" secondary
- added "Draft" label to draft patches
- capitalized all badges for consistent UI text
Woodpecker pipeline #966 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/517
Woodpecker pipeline #966 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/517
Woodpecker pipeline #966 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/517
Woodpecker pipeline #966 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/517
Woodpecker pipeline #966 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/517
Woodpecker pipeline #966 completed with status: failure. ❌
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/517
Woodpecker pipeline #998 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/530
Woodpecker pipeline #998 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/530
Woodpecker pipeline #998 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/530
Woodpecker pipeline #998 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/530
Woodpecker pipeline #998 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/530
Woodpecker pipeline #998 completed with status: failure. ❌
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/530
Woodpecker pipeline #1004 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/533
Woodpecker pipeline #1004 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/533
Woodpecker pipeline #1004 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/533
Woodpecker pipeline #1004 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/533
Woodpecker pipeline #1004 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/533
Woodpecker pipeline #1004 completed with status: failure. ❌
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/533
Squash
Woodpecker pipeline #1024 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/543
Woodpecker pipeline #1024 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/543
Woodpecker pipeline #1024 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/543
Woodpecker pipeline #1024 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/543
Woodpecker pipeline #1024 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/543
Squash
Woodpecker pipeline #1025 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/544
Woodpecker pipeline #1025 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/544
Woodpecker pipeline #1025 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/544
Woodpecker pipeline #1025 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/544
Woodpecker pipeline #1025 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/544
Woodpecker pipeline #1024 completed with status: failure. ❌
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/543
Woodpecker pipeline #1025 completed with status: failure. ❌
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/544
Rebase
Woodpecker pipeline #1026 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/545
Woodpecker pipeline #1026 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/545
Woodpecker pipeline #1026 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/545
Woodpecker pipeline #1026 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/545
Woodpecker pipeline #1026 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/545
Woodpecker pipeline #1026 completed with status: success. ✅
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/545
Fixup
Woodpecker pipeline #1027 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/546
Woodpecker pipeline #1027 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/546
Woodpecker pipeline #1027 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/546
Woodpecker pipeline #1027 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/546
Woodpecker pipeline #1027 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/546
Fixup
Woodpecker pipeline #1028 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/547
Woodpecker pipeline #1028 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/547
Woodpecker pipeline #1028 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/547
Woodpecker pipeline #1028 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/547
Woodpecker pipeline #1028 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/547
Woodpecker pipeline #1027 completed with status: failure. ❌
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/546
Woodpecker pipeline #1028 completed with status: success. ✅
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/547
Improve draft ux
Woodpecker pipeline #1029 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/548
Woodpecker pipeline #1029 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/548
Woodpecker pipeline #1029 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/548
Woodpecker pipeline #1029 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/548
Woodpecker pipeline #1029 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/548
Woodpecker pipeline #1029 completed with status: success. ✅
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/548
Rebase
Woodpecker pipeline #1038 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/556
Woodpecker pipeline #1038 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/556
Woodpecker pipeline #1038 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/556
Woodpecker pipeline #1038 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/556
Woodpecker pipeline #1038 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/556
Woodpecker pipeline #1038 completed with status: success. ✅
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/556
Fixup
Woodpecker pipeline #1041 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/557
Woodpecker pipeline #1041 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/557
Woodpecker pipeline #1041 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/557
Woodpecker pipeline #1041 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/557
Woodpecker pipeline #1041 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/557
Woodpecker pipeline #1041 completed with status: failure. ❌
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/557
Fixup
Woodpecker pipeline #1049 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/560
Woodpecker pipeline #1049 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/560
Woodpecker pipeline #1049 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/560
Woodpecker pipeline #1049 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/560
Woodpecker pipeline #1049 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/560
Woodpecker pipeline #1049 completed with status: failure. ❌
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/560
Cleanup
Woodpecker pipeline #1050 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/561
Woodpecker pipeline #1050 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/561
Woodpecker pipeline #1050 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/561
Woodpecker pipeline #1050 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/561
Woodpecker pipeline #1050 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/561
Woodpecker pipeline #1050 completed with status: failure. ❌
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/561
Extract
Woodpecker pipeline #1052 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/562
Woodpecker pipeline #1052 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/562
Woodpecker pipeline #1052 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/562
Woodpecker pipeline #1052 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/562
Woodpecker pipeline #1052 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/562
Rename
Woodpecker pipeline #1053 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/563
Woodpecker pipeline #1053 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/563
Woodpecker pipeline #1053 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/563
Woodpecker pipeline #1053 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/563
Woodpecker pipeline #1053 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/563
Woodpecker pipeline #1052 completed with status: failure. ❌
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/562
Woodpecker pipeline #1053 completed with status: success. ✅
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/563
Reword
Woodpecker pipeline #1054 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/564
Woodpecker pipeline #1054 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/564
Woodpecker pipeline #1054 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/564
Woodpecker pipeline #1054 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/564
Woodpecker pipeline #1054 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/564
Woodpecker pipeline #1054 completed with status: failure. ❌
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/564
Fix theme spec
Woodpecker pipeline #1056 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/565
Woodpecker pipeline #1056 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/565
Woodpecker pipeline #1056 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/565
Woodpecker pipeline #1056 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/565
Woodpecker pipeline #1056 current status: created. ⏳
- Details: https://woodpecker.radworks.garden/repos/6/pipeline/565
Nice work, works as intended and improves patch revision navigation.
Don't really see the need for the PatchStateButtonCompact component, came this up in user tests, did users try to click the label?
Here some diffs with some changes that I think make sense:
- Since the
PatchMetadatacan now host really long labels on the right side of the app and we don't have the entire screen, we should make sure labels overflow into a text-ellipsis.
diff --git a/src/components/LabelInput.svelte b/src/components/LabelInput.svelte
index c0a3813..42139f0 100644
--- a/src/components/LabelInput.svelte
+++ b/src/components/LabelInput.svelte
@@ -181,10 +181,12 @@
{#if allowedToEdit}
{#each updatedLabels as label}
<button
- class="txt-small"
+ class="global-counter txt-small"
+ style:background-color="var(--color-fill-counter)"
+ style:padding="0 0.5rem"
style:max-width="10rem"
onclick={() => (removeToggles[label] = !removeToggles[label])}>
- <div class="txt-overflow global-counter" title={label}>{label}</div>
+ <div class="txt-overflow" title={label}>{label}</div>
{#if removeToggles[label]}
<span style:margin-right="0.5rem">
<Icon name="cross" onclick={() => removeLabel(label)} />
- Move logic out of the svelte markup and some other stylistic ideas, feel free to ignore.
diff --git a/src/components/AssigneeInput.svelte b/src/components/AssigneeInput.svelte
index 3456784..126c461 100644
--- a/src/components/AssigneeInput.svelte
+++ b/src/components/AssigneeInput.svelte
@@ -157,7 +157,7 @@
{#if !showInput && allowedToEdit}
<span class="add-icon">
- <Icon name="add"></Icon>
+ <Icon name="add" />
</span>
{/if}
</button>
diff --git a/src/components/RevisionReviews.svelte b/src/components/RevisionReviews.svelte
index 36ee8d5..3504374 100644
--- a/src/components/RevisionReviews.svelte
+++ b/src/components/RevisionReviews.svelte
@@ -38,6 +38,12 @@
...(revision.reviews ?? []),
].filter((review): review is Review | DraftReview => Boolean(review)),
);
+
+ function unresolvedCommentsCount(review: Review | DraftReview) {
+ return review.comments.filter(t => {
+ return t.resolved === false && t.location !== null && t.replyTo === null;
+ }).length;
+ }
</script>
<style>
@@ -98,13 +104,7 @@
{/if}
<div class="global-flex" style:margin-left="auto">
{#if review.comments.length > 0}
- {@const unresolved = review.comments.filter(t => {
- return (
- t.resolved === false &&
- t.location !== null &&
- t.replyTo === null
- );
- }).length}
+ {@const unresolved = unresolvedCommentsCount(review)}
{#if unresolved > 0}
<div class="global-flex" style:gap="0.25rem">
<Icon name="comment-cross" />
diff --git a/src/components/Revisions.svelte b/src/components/Revisions.svelte
index fbe51c4..7ba1b77 100644
--- a/src/components/Revisions.svelte
+++ b/src/components/Revisions.svelte
@@ -38,16 +38,10 @@
const revisionAuthors = $derived(
orderBy(
uniqBy(
- revisions.map(r => {
- return r.author;
- }),
+ revisions.map(r => r.author),
"did",
),
- [
- o => {
- return o.did === patch.author.did;
- },
- ],
+ [o => o.did === patch.author.did],
["desc"],
),
);
Apply review comments