source = "git+https://ash.radicle.garden/z3gqcJUoA1n9HaHKufZs5FCSGazv5.git?rev=7c902b6905724345ba850eb6cca8f8becc9a9c72#7c902b6905724345ba850eb6cca8f8becc9a9c72"

source = "git+https://ash.radicle.garden/z3gqcJUoA1n9HaHKufZs5FCSGazv5.git?rev=7c902b6905724345ba850eb6cca8f8becc9a9c72#7c902b6905724345ba850eb6cca8f8becc9a9c72"

source = "git+https://ash.radicle.garden/z3gqcJUoA1n9HaHKufZs5FCSGazv5.git?rev=7c902b6905724345ba850eb6cca8f8becc9a9c72#7c902b6905724345ba850eb6cca8f8becc9a9c72"

source = "git+https://ash.radicle.garden/z3gqcJUoA1n9HaHKufZs5FCSGazv5.git?rev=7c902b6905724345ba850eb6cca8f8becc9a9c72#7c902b6905724345ba850eb6cca8f8becc9a9c72"

source = "git+https://ash.radicle.garden/z3gqcJUoA1n9HaHKufZs5FCSGazv5.git?rev=7c902b6905724345ba850eb6cca8f8becc9a9c72#7c902b6905724345ba850eb6cca8f8becc9a9c72"

radicle = { git = "https://ash.radicle.garden/z3gqcJUoA1n9HaHKufZs5FCSGazv5.git", package = "radicle", rev = "7c902b6905724345ba850eb6cca8f8becc9a9c72" }

radicle = { git = "https://ash.radicle.garden/z3gqcJUoA1n9HaHKufZs5FCSGazv5.git", package = "radicle", rev = "7c902b6905724345ba850eb6cca8f8becc9a9c72", features = ["test"] }

  labels: Array<string>;

    #[ts(as = "Vec<String>")]

    labels: Vec<cob::Label>,

            labels: review.labels().cloned().collect::<Vec<_>>(),

radicle = { git = "https://ash.radicle.garden/z3gqcJUoA1n9HaHKufZs5FCSGazv5.git", package = "radicle", rev = "7c902b6905724345ba850eb6cca8f8becc9a9c72" }

    variant: "primary" | "secondary" | "ghost" | "float" | "danger" | "success";

    beforeTimestamp?: Snippet;

    body?: string;

    emptyBodyTooltip?: string;

    styleWidth?: string;

    beforeTimestamp,

    styleWidth,

    emptyBodyTooltip,

<div class="card" {id} style:width={styleWidth}>

      {#if beforeTimestamp}

        {@render beforeTimestamp()}

      {/if}

  {#if (body === undefined || body?.trim() === "") && state === "read"}

            {emptyBodyTooltip}

            <Markdown {rid} breaks content={body ?? ""} />

  onclick={() => {

    if (disabled) {

      return;

    }

    onclick();

  }}>

    emptyBodyTooltip?: string;

    emptyBodyTooltip,

        title={emptyBodyTooltip}

    styleFontWeight?: string;

    styleFontWeight = "var(--font-weight-semibold)",

  style:font-weight={styleFontWeight}>

  import type { Stats } from "@bindings/cob/Stats";

  import DiffStatBadge from "@app/components/DiffStatBadge.svelte";

  import Icon from "@app/components/Icon.svelte";

  import Id from "@app/components/Id.svelte";

  import InlineTitle from "@app/components/InlineTitle.svelte";

  import Label from "@app/components/Label.svelte";

  import NodeId from "@app/components/NodeId.svelte";

    compact?: boolean;

    loadPatch?: (rid: string, patchId: string) => void;

    compact = false,

    loadPatch,

      void push({

        resource: "repo.patch",

        rid,

        patch: patch.id,

        status,

        reviewId: undefined,

      });

        <Label {label} />

<script lang="ts">

  import type { Config } from "@bindings/config/Config";

  import type { RepoInfo } from "@bindings/repo/RepoInfo";

  import type { Review } from "@bindings/cob/patch/Review";

  import type { Revision } from "@bindings/cob/patch/Revision";

  import partial from "lodash/partial";

  import * as roles from "@app/lib/roles";

  import { announce } from "@app/components/AnnounceSwitch.svelte";

  import { authorForNodeId, publicKeyFromDid } from "@app/lib/utils";

  import { invoke } from "@app/lib/invoke";

  import { nodeRunning } from "@app/lib/events";

  import Border from "@app/components/Border.svelte";

  import CommentComponent from "@app/components/Comment.svelte";

  import Icon from "@app/components/Icon.svelte";

  import Id from "@app/components/Id.svelte";

  import LabelInput from "@app/components/LabelInput.svelte";

  import NakedButton from "@app/components/NakedButton.svelte";

  import NodeId from "@app/components/NodeId.svelte";

  import VerdictButton from "@app/components/VerdictButton.svelte";

  import VerdictBadge from "./VerdictBadge.svelte";

  interface Props {

    config: Config;

    onNavigateBack: () => void;

    patchId: string;

    reload: (reviewId?: string) => Promise<void>;

    review: Review;

    revision: Revision;

    repo: RepoInfo;

  }

  const {

    config,

    onNavigateBack,

    patchId,

    reload,

    review,

    revision,

    repo,

  }: Props = $props();

  const contributors = [

    review.author,

    ...review.comments.map(c => {

      return c.author;

    }),

  ];

  let verdict: Review["verdict"] = $state(review.verdict);

  let labelSaveInProgress: boolean = $state(false);

  async function editReview(

    reviewId: string,

    verdict: Review["verdict"],

    labels: string[],

    summary?: string,

  ) {

    if (summary?.trim() === "") {

      summary = undefined;

    } else {

      summary = summary?.trim();

    }

    try {

      labelSaveInProgress = true;

      await invoke("edit_patch", {

        rid: repo.rid,

        cobId: patchId,

        action: {

          type: "review.edit",

          review: reviewId,

          summary,

          verdict,

          labels,

        },

        opts: { announce: $nodeRunning && $announce },

      });

    } catch (error) {

      console.error("Editing review failed: ", error);

    } finally {

      labelSaveInProgress = false;

      await reload(reviewId);

    }

  }

</script>

<style>

  .content {

    padding: 1rem 1rem 1rem 0;

  }

  .title {

    font-size: var(--font-size-medium);

    font-weight: var(--font-weight-medium);

    -webkit-user-select: text;

    user-select: text;

    display: flex;

    align-items: center;

    white-space: nowrap;

    min-height: 40px;

    gap: 0.5rem;

    margin-bottom: 0.5rem;

  }

  .metadata-divider {

    width: 2px;

    background-color: var(--color-fill-ghost);

    height: calc(100% + 4px);

    top: 0;

    position: relative;

  }

  .metadata-section {

    padding: 0.5rem;

    font-size: var(--font-size-small);

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    height: 100%;

  }

  .metadata-section-title {

    margin-bottom: 0.5rem;

    color: var(--color-foreground-dim);

  }

  .review-body {

    margin-top: 1rem;

    margin-bottom: 1rem;

    position: relative;

    z-index: 1;

  }

  /* We put the background and clip-path in a separate element to prevent

     popovers being clipped in the main element. */

  .review-body::after {

    position: absolute;

    z-index: -1;

    content: " ";

    background-color: var(--color-background-float);

    clip-path: var(--2px-corner-fill);

    width: 100%;

    height: 100%;

    top: 0;

  }

</style>

<div class="content">

  <div style:margin-bottom="0.5rem">

    <div class="title">

      <NakedButton

        variant="ghost"

        onclick={onNavigateBack}

        stylePadding="0 4px">

        <Icon name="arrow-left" />

      </NakedButton>

      <span class="global-flex" style:gap="0">

        <NodeId

          {...authorForNodeId(review.author)}

          styleFontSize="var(--font-size-medium)"

          styleFontWeight="var(--font-weight-medium)" />'s review

      </span>

    </div>

    <Border variant="ghost" styleGap="0">

      <div class="metadata-section" style:min-width="8rem">

        <div class="metadata-section-title">Verdict</div>

        {#if !!roles.isDelegateOrAuthor( config.publicKey, repo.delegates.map(delegate => delegate.did), review.author.did, )}

          <VerdictButton

            {verdict}

            summaryMissing={review.summary === undefined ||

              review.summary.trim() === ""}

            onSelect={async newVerdict => {

              verdict = newVerdict;

              await editReview(

                review.id,

                verdict,

                review.labels,

                review.summary,

              );

            }} />

        {:else}

          <VerdictBadge {verdict} />

        {/if}

      </div>

      <div class="metadata-divider"></div>

      <div class="metadata-section" style:flex="1">

        <LabelInput

          allowedToEdit={!!roles.isDelegateOrAuthor(

            config.publicKey,

            repo.delegates.map(delegate => delegate.did),

            review.author.did,

          )}

          labels={review.labels}

          submitInProgress={labelSaveInProgress}

          save={async labels => {

            await editReview(review.id, verdict, labels, review.summary);

          }} />

      </div>

      <div class="metadata-divider"></div>

      <div class="metadata-section" style:flex="1">

        <div class="metadata-section-title">Participants</div>

        {#each contributors as contributor}

          <NodeId {...authorForNodeId(contributor)} />

        {/each}

      </div>

    </Border>

    <div class="review-body">

      <CommentComponent

        rid={repo.rid}

        disallowEmptyBody={review.verdict === undefined}

        emptyBodyTooltip="Summary is mandatory when verdict is None"

        styleWidth="100%"

        caption="published review"

        id={review.id}

        author={review.author}

        timestamp={review.timestamp}

        editComment={(publicKeyFromDid(review.author.did) ===

          config.publicKey ||

          undefined) &&

          partial(async (id: string, summary: string) => {

            await editReview(id, verdict, review.labels, summary);

          }, review.id)}

        body={review.summary}>

        {#snippet beforeTimestamp()}

          on revision <Id id={revision.id} variant="oid" />

        {/snippet}

      </CommentComponent>

    </div>

  </div>

</div>

  import type { PatchStatus } from "@app/views/repo/router";

    verdictIcon,

  import { push } from "@app/lib/router";

  import Icon from "@app/components/Icon.svelte";

  import Id from "@app/components/Id.svelte";

  import Label from "@app/components/Label.svelte";

  import Markdown from "@app/components/Markdown.svelte";

    patchId: string;

    rid: string;

    status: PatchStatus | undefined;

  const { patchId, review, rid, status }: Props = $props();

    z-index: 1;

    position: relative;

  }

  /* We put the background and clip-path in a separate element to prevent

     popovers being clipped in the main element. */

  .review::after {

    position: absolute;

    z-index: -1;

    content: " ";

    background-color: var(--color-fill-float);

    clip-path: var(--2px-corner-fill);

    width: 100%;

    height: 100%;

    top: 0;

  }

  .review:hover::after {

    background-color: var(--color-fill-float-hover);

    padding: 10px 0.75rem 0.5rem 0;

  .status {

    padding: 0;

    margin: 0.5rem 0 0 0.5rem;

  }

  .accepted {

    background-color: var(--color-fill-diff-green-light);

  }

  .rejected {

    background-color: var(--color-fill-diff-red-light);

  }

  .no-verdict {

    background-color: var(--color-fill-ghost);

<!-- svelte-ignore a11y_click_events_have_key_events -->

<div

  tabindex="0"

  role="button"

  class="review"

  style:cursor="pointer"

  onclick={() => {

    void push({

      resource: "repo.patch",

      rid,

      patch: patchId,

      status,

      reviewId: review.id,

    });

  }}>

  <div

    class:accepted={review.verdict === "accept"}

    class:rejected={review.verdict === "reject"}

    class:no-verdict={review.verdict === undefined}

    class="global-counter status">

    <Icon name={verdictIcon(review.verdict)} />

        <span>published review</span>

        <Id id={review.id} variant="oid" />

      {#if review.comments.length > 0}

        <div class="global-flex" style:gap="0.25rem" style:margin-left="auto">

          <Icon name="comment" />{review.comments.length}

        </div>

      {/if}

      {#if review.labels.length > 0}

        <div class="global-flex" style:margin-left="auto">

          {#each review.labels as label}

            <Label {label} />

          {/each}

        </div>

      {/if}

  import type { PatchStatus } from "@app/views/repo/router";

    status: PatchStatus | undefined;

  let { rid, repoDelegates, patchId, revision, config, status, reload }: Props =

        <ReviewTeaser {rid} {review} {patchId} {status} />

<script lang="ts">

  import type { Review } from "@bindings/cob/patch/Review";

  import type { Snippet } from "svelte";

  import capitalize from "lodash/capitalize.js";

  import { verdictIcon, verdictIconColor } from "@app/lib/utils";

  import Icon from "@app/components/Icon.svelte";

  interface Props {

    children?: Snippet;

    verdict: Review["verdict"];

    hoverable?: boolean;

  }

  const { children, verdict, hoverable = false }: Props = $props();

</script>

<style>

  .badge {

    gap: 6px;

    padding-right: 10px;

  }

  .no-verdict {

    background-color: var(--color-fill-ghost);

  }

  .no-verdict.hoverable:hover {

    background-color: var(--color-fill-ghost-hover);

  }

  .accepted {

    background-color: var(--color-fill-diff-green-light);

  }

  .accepted.hoverable:hover {

    background-color: var(--color-fill-diff-green);

  }

  .rejected {

    background-color: var(--color-fill-diff-red-light);

  }

  .rejected.hoverable:hover {

    background-color: var(--color-fill-diff-red);

  }

</style>

<span

  class="global-counter badge"

  style:color={verdictIconColor(verdict)}

  class:hoverable

  class:no-verdict={verdict === undefined}

  class:accepted={verdict === "accept"}

  class:rejected={verdict === "reject"}>

  <Icon name={verdictIcon(verdict)} />

  {verdict ? capitalize(`${verdict}ed`) : "None"}

  {@render children?.()}

</span>

<script lang="ts">

  import type { Review } from "@bindings/cob/patch/Review";

  import capitalize from "lodash/capitalize.js";

  import { closeFocused } from "./Popover.svelte";

  import { verdictIcon, verdictIconColor } from "@app/lib/utils";

  import Border from "@app/components/Border.svelte";

  import DropdownList from "@app/components/DropdownList.svelte";

  import DropdownListItem from "@app/components/DropdownListItem.svelte";

  import Icon from "@app/components/Icon.svelte";

  import Popover from "@app/components/Popover.svelte";

  import VerdictBadge from "@app/components/VerdictBadge.svelte";

  interface Props {

    onSelect: (verdict: Review["verdict"]) => Promise<void>;

    summaryMissing: boolean;

    verdict: Review["verdict"];

  }

  const { onSelect, summaryMissing, verdict }: Props = $props();

</script>

<style>

  button {

    cursor: pointer;

    border: 0;

    background: none;

    margin: 0;

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: var(--font-size-small);

  }

</style>

<Popover popoverPadding="0" popoverPositionLeft="0" popoverPositionTop="2rem">

  {#snippet toggle(onclick)}

    <button {onclick}>

      <VerdictBadge {verdict} hoverable>

        <Icon name="chevron-down" />

      </VerdictBadge>

    </button>

  {/snippet}

  {#snippet popover()}

    <Border variant="ghost">

      <DropdownList items={[undefined, "accept", "reject"] as const}>

        {#snippet item(action)}

          <DropdownListItem

            title={action === undefined && summaryMissing

              ? "Set a summary to select verdict None"

              : undefined}

            disabled={action === undefined && summaryMissing}

            selected={verdict === action}

            onclick={async () => {

              await onSelect(action);

              closeFocused();

            }}>

            <span class="global-flex" style:color={verdictIconColor(action)}>

              <Icon name={verdictIcon(action)} />

              {action ? capitalize(`${action}ed`) : "None"}

            </span>

          </DropdownListItem>

        {/snippet}

      </DropdownList>

    </Border>

  {/snippet}

</Popover>

import type { Review } from "@bindings/cob/patch/Review";

export function verdictIcon(verdict: Review["verdict"]) {

  if (verdict === "accept") {

    return "comment-checkmark";

  } else if (verdict === "reject") {

    return "comment-cross";

  } else {

    return "comment";

  }

}

export function verdictIconColor(verdict: Review["verdict"]) {

  if (verdict === "accept") {

    return "var(--color-foreground-success)";

  } else if (verdict === "reject") {

    return "var(--color-foreground-red)";

  } else {

    return "var(--color-foreground-dim)";

  }

}

  import type { Review } from "@bindings/cob/patch/Review";

  import ReviewComponent from "@app/components/Review.svelte";

    review: Review | undefined;

    review,

    review = undefined;

  async function reload(reviewId?: string) {

    review = revisions

      .flatMap(r => r.reviews || [])

      .find(review => review.id === reviewId);

  {#if review}

    <ReviewComponent

      {config}

      patchId={patch.id}

      {repo}

      {reload}

      {review}

      revision={selectedRevision}

      onNavigateBack={() => {

        review = undefined;

      }} />

  {:else}

    <div class="content">

      <div style:margin-bottom="0.5rem">

        {#if editingTitle}

          <div class="title">

            <TextInput

              valid={updatedTitle.trim().length > 0}

              bind:value={updatedTitle}

              autofocus

              onSubmit={async () => {

                if (updatedTitle.trim().length > 0) {

                  await editTitle(repo.rid, patch.id, updatedTitle);

                }

              }}

              onDismiss={() => {

                updatedTitle = patch.title;

                editingTitle = !editingTitle;

              }} />

              <Icon

                name="checkmark"

                onclick={async () => {

                  if (updatedTitle.trim().length > 0) {

                    await editTitle(repo.rid, patch.id, updatedTitle);

                  }

                }} />

              <Icon

                name="cross"

                onclick={() => {

                  updatedTitle = patch.title;

                  editingTitle = !editingTitle;

                }} />

          </div>

        {:else}

          <div class="title">

            <div class="global-flex" style:gap="0">

              <div

                class="global-counter status"

                style:color={patchStatusColor[patch.state.status]}

                style:background-color={patchStatusBackgroundColor[

                  patch.state.status

                ]}>

                <Icon

                  name={patch.state.status === "open"

                    ? "patch"

                    : `patch-${patch.state.status}`} />

              </div>

              <InlineTitle content={patch.title} fontSize="medium" />

            </div>

            {#if roles.isDelegateOrAuthor( config.publicKey, repo.delegates.map(delegate => delegate.did), patch.author.did, )}

              <div class="title-icons">

                <Icon

                  name="pen"

                  onclick={() => (editingTitle = !editingTitle)} />

                <PatchStateButton patchState={patch.state} save={saveState} />

              </div>

            {/if}

          </div>

        {/if}

      <Border variant="ghost" styleGap="0">

        <div class="metadata-section" style:min-width="8rem">

          <div class="metadata-section-title">Status</div>

          <PatchStateBadge state={patch.state} />

        </div>

        <div class="metadata-divider"></div>

        <div class="metadata-section" style:flex="1">

          <LabelInput

            allowedToEdit={!!roles.isDelegateOrAuthor(

              config.publicKey,

              repo.delegates.map(delegate => delegate.did),

              patch.author.did,

            )}

            labels={patch.labels}

            submitInProgress={labelSaveInProgress}

            save={saveLabels} />

        </div>

        <div class="metadata-divider"></div>

        <div class="metadata-section" style:flex="1">

          <AssigneeInput

            allowedToEdit={!!roles.isDelegateOrAuthor(

              config.publicKey,

              repo.delegates.map(delegate => delegate.did),

              patch.author.did,

            )}

            assignees={patch.assignees}

            submitInProgress={assigneesSaveInProgress}

            save={saveAssignees} />

        </div>

      </Border>

      <div class="global-flex" style:gap="0.5rem" style:margin-top="1rem">

        <Border stylePosition="relative" variant="ghost" flatBottom>

          <div

            class="global-flex"

            style:z-index="10"

            style:gap="1rem"

            style:padding="0 1rem"

            style:width="100%">

            <span class="txt-small" style:color="var(--color-foreground-dim)">

              Revisions

            </span>

              active={tab === "patch"}

                tab = "patch";

              {formatOid(patch.id)}

              <span

                class="global-counter"

                style:height="24px"

                style:color="var(--color-foreground-contrast)">

                Initial

              </span>

            {#if revisions.length > 1}

              <Tab

                active={tab === "revisions"}

                onclick={() => {

                  tab = "revisions";

                }}>

                {formatOid(selectedRevision.id)}

                <div class="global-flex" style:gap="0.25rem">

                  <RevisionBadges revision={selectedRevision} {revisions} />

                  <RevisionSelector

                    {patch}

                    {revisions}

                    {selectedRevision}

                    selectRevision={rev => {

                      selectedRevision = rev;

                      tab = "revisions";

                    }} />

                </div>

              </Tab>

            {/if}

            <div style:margin-left="auto">

              <Tab

                active={tab === "timeline"}

                onclick={() => {

                  tab = "timeline";

                }}>

                <Icon name="clock" />

                Timeline

              </Tab>

            </div>

        </Border>

      </div>

      <Border

        variant="ghost"

        flatTop

        styleWidth="100%"

        stylePadding="1rem"

        styleMinWidth="0"

        styleDisplay="block"

        styleFlexDirection="column"

        styleAlignItems="flex-start">

        {#if tab === "patch"}

          <RevisionComponent

            rid={repo.rid}

            repoDelegates={repo.delegates}

            patchId={patch.id}

            {reload}

            {status}

            revision={revisions[0]}

            {config} />

        {:else if tab === "timeline"}

          <PatchTimeline {activity} patchId={patch.id} />

        {:else}

          <RevisionComponent

            rid={repo.rid}

            repoDelegates={repo.delegates}

            patchId={patch.id}

            {reload}

            {status}

            revision={selectedRevision}

            {config} />

        {/if}

  {/if}

import type { Review } from "@bindings/cob/patch/Review";

import type { Thread } from "@bindings/cob/thread/Thread";

  reviewId: string | undefined;

    review: Review | undefined;

  const review = revisions

    .flatMap(r => r.reviews || [])

    .find(review => review.id === route.reviewId);

      review,

      const reviewId = searchParams.get("reviewId") ?? undefined;

          reviewId,