::selection {

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

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

}

.global-syntax.operator,

.global-syntax.keyword\.repeat,

.global-syntax.keyword {

.global-syntax.type {

.global-syntax.property,

.global-syntax.variable\.parameter {

.global-syntax.punctuation\.delimiter {

.global-syntax.punctuation\.bracket {

.global-syntax.attribute {

.global-syntax.number,

.global-syntax.constant,

.global-syntax.type\.builtin,

.global-syntax.constant\.builtin,

.global-syntax.variable\.builtin,

.global-syntax.function {

.global-syntax.comment,

.global-syntax.comment\.documentation {

.global-syntax.string {

.global-syntax.string.special {

.global-syntax.function\.method {

.global-syntax.type.builtin {

.global-syntax.punctuation.bracket {

.global-syntax.punctuation.delimiter {

.global-syntax.punctuation.special {

.global-syntax.text.literal {

.global-syntax.text.title {

.global-syntax.variable {

.global-syntax.attribute {

.global-syntax.label {

.global-syntax.type {

.global-syntax.variable.parameter {

.global-syntax.constructor {

.global-syntax.tag\.delimiter {

    onclick?: (e: MouseEvent) => void;

  import type { CodeComments } from "./Diff.svelte";

    codeComments?: CodeComments;

  let {

    patchId,

    revision,

    rid,

    showCommits = true,

    codeComments,

  }: Props = $props();

        unified: 3,

    <Changeset

      expanded={filesExpanded}

      head={revision.head}

      {diff}

      {codeComments} />

  import type { CodeComments } from "./Diff.svelte";

  import FileDiffComponent from "./FileDiff.svelte";

    codeComments?: CodeComments;

    head: string;

  const { codeComments, diff, expanded = true, head }: Props = $props();

      <FileDiffComponent {codeComments} {expanded} {file} {head} />

    font-family: var(--font-family-sans-serif);

    onclick={e => {

      e.preventDefault();

      e.stopPropagation();

<script lang="ts" module>

  export interface CodeComments {

    threads: Thread<CodeLocation>[];

    config: Config;

    createComment: (

      body: string,

      embeds: Embed[],

      replyTo?: string,

      location?: CodeLocation,

    ) => Promise<void>;

    editComment: (

      commentId: string,

      body: string,

      embeds: Embed[],

    ) => Promise<void>;

    reactOnComment: (

      publicKey: string,

      commentId: string,

      authors: Author[],

      reaction: string,

    ) => Promise<void>;

    repoDelegates: Author[];

    rid: string;

  }

</script>

<script lang="ts">

  type Side = "left" | "right";

  type SelectionAnchor = { side: Side; lineNumber: number };

  type SelectionRange = { start: SelectionAnchor; end?: SelectionAnchor };

  interface Selection {

    file: string;

    start: SelectionAnchor;

    end: SelectionAnchor;

    lineIdx: number;

    hunkIdx: number;

    codeLocation: CodeLocation;

  }

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

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

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

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

  import type { FileDiff } from "@bindings/diff/FileDiff";

  import type { Modification } from "@bindings/diff/Modification";

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

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

  import escape from "lodash/escape";

  import partial from "lodash/partial";

  import CommentToggleInput from "./CommentToggleInput.svelte";

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

  import ThreadComponent from "@app/components/Thread.svelte";

  interface Props {

    codeComments?: CodeComments;

    file: FileDiff;

    head: string;

  }

  const { file, head, codeComments }: Props = $props();

  let selection: Selection | undefined = $state(undefined);

  function lineNumber(line: Modification, side: Side): number | undefined {

    if (side === "left") {

      if (line.type === "context") {

        return line.lineNoOld;

      }

      if (line.type === "deletion") {

        return line.lineNo;

      }

    } else {

      if (line.type === "context") {

        return line.lineNoNew;

      }

      if (line.type === "addition") {

        return line.lineNo;

      }

    }

  }

  function findLineThread(line: Modification) {

    return codeComments?.threads.find(t => {

      if (line.type === "addition") {

        return t.root.location?.new?.range.end === line.lineNo + 1;

      } else if (line.type === "deletion") {

        return t.root.location?.old?.range.end === line.lineNo + 1;

      } else if (line.type === "context") {

        return (

          t.root.location?.new?.range.end === line.lineNoNew + 1 ||

          t.root.location?.old?.range.end === line.lineNoOld + 1

        );

      }

    });

  }

  function determineSelectedAnchor(

    side: Side,

    line: Modification,

  ): SelectionAnchor {

    // When a user tries to select a side with no changes, use opposite side.

    if (side === "left" && line.type === "addition") {

      return { side: "right", lineNumber: line.lineNo };

    } else if (side === "right" && line.type === "deletion") {

      return { side: "left", lineNumber: line.lineNo };

    } else {

      return side === "left"

        ? { side: "left", lineNumber: lineNumber(line, "left") as number }

        : { side: "right", lineNumber: lineNumber(line, "right") as number };

    }

  }

  function filePath(file: FileDiff, side: Side): string {

    if (file.status === "moved" || file.status === "copied") {

      if (side === "left") {

        return file.oldPath;

      } else {

        return file.newPath;

      }

    } else {

      return file.path;

    }

  }

  function selectLine(

    e: MouseEvent,

    file: FileDiff,

    side: Side,

    line: Modification,

    hunkIdx: number,

    lineIdx: number,

  ) {

    e.preventDefault();

    e.stopPropagation();

    selection = {

      file: filePath(file, side),

      start: determineSelectedAnchor(side, line),

      end: determineSelectedAnchor(side, line),

      hunkIdx: hunkIdx,

      lineIdx: lineIdx,

      codeLocation: {

        commit: head,

        path: filePath(file, side),

        old:

          side === "left"

            ? {

                type: "lines",

                range: {

                  start: lineNumber(line, "left") as number,

                  end: (lineNumber(line, "left") as number) + 1,

                },

              }

            : null,

        new:

          side === "right"

            ? {

                type: "lines",

                range: {

                  start: lineNumber(line, "right") as number,

                  end: (lineNumber(line, "right") as number) + 1,

                },

              }

            : null,

      },

    };

  }

  function isSelected(file: string, hunkIdx: number, lineIdx: number) {

    return (

      selection &&

      selection.file === file &&

      selection.hunkIdx === hunkIdx &&

      selection.lineIdx === lineIdx

    );

  }

  function rangeAnchorsFromCodeLocation(

    location: CodeLocation | null,

  ): SelectionRange | undefined {

    if (location?.old?.type === "lines") {

      return {

        start: { side: "left", lineNumber: location.old.range.start },

      };

    } else if (location?.new?.type === "lines") {

      return {

        start: { side: "right", lineNumber: location.new.range.start },

      };

    }

  }

</script>

<style>

  .container {

    /* Make space for the box-shadow border, otherwise it gets cut off due to

       overflow: hide on the container. */

    padding: 8px 1px;

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

    font-family: var(--font-family-monospace);

  }

  .line {

    display: flex;

    position: relative;

    white-space: pre-wrap;

  }

  .hunk-header {

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

  }

  .hunk-header > .left,

  .hunk-header > .right {

    cursor: default;

  }

  .addition {

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

  }

  .deletion {

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

  }

  .addition > .left,

  .addition > .right,

  .addition > .sign {

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

  }

  .deletion > .left,

  .deletion > .right,

  .deletion > .sign {

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

  }

  .context > .left,

  .context > .right,

  .context > .sign {

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

  }

  .marker {

    color: var(--color-foreground-contrast) !important;

  }

  .selected {

    box-shadow: 0 0 0 1px var(--color-fill-secondary);

    z-index: 1;

  }

  .left,

  .right {

    min-width: 3rem;

    text-align: center;

    position: relative;

    cursor: cell;

  }

  .left:hover,

  .right:hover,

  .left:active,

  .right:active {

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

  }

  .sign {

    min-width: 1.5rem;

  }

  .code {

    -webkit-touch-callout: initial;

    -webkit-user-select: text;

    user-select: text;

    width: 100%;

    word-break: break-word;

  }

  .comment-icon {

    margin-left: auto;

    margin-right: 1rem;

    margin-top: 3px;

    align-self: flex-start;

  }

  .thread {

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

    padding: 0.5rem;

    margin-bottom: 1rem;

  }

  .comment-form {

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

    font-family: var(--font-family-sans-serif);

    display: flex;

    flex-direction: column;

    padding: 1rem;

    margin-bottom: 1rem;

  }

  .comment-header {

    display: flex;

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

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

    padding: 0 8px;

    width: fit-content;

  }

</style>

{#snippet commentHeader(filePath?: string, selectionRange?: SelectionRange)}

  {#if filePath && selectionRange}

    <div class="comment-header">

      {filePath.split("/").length > 1 ? "…/" : ""}{filePath

        .split("/")

        .slice(-1)}:{selectionRange.start.side === "left"

        ? "L"

        : "R"}{selectionRange.start.lineNumber}

      {#if selectionRange.end}

        ->

        {selectionRange.end.side === "left" ? "L" : "R"}{selectionRange.end

          .lineNumber}

      {/if}

    </div>

  {/if}

{/snippet}

<div class="container">

  {#if file.diff.type === "plain"}

    {#each file.diff.hunks as hunk, hunkIdx}

      <div class="line hunk-header">

        <div class="left"></div>

        <div class="right"></div>

        <div class="sign"></div>

        <div class="code">{hunk.header}</div>

      </div>

      <div>

        {#each hunk.lines as line, lineIdx}

          {@const thread = findLineThread(line)}

          <div

            class="line"

            class:addition={line.type === "addition"}

            class:deletion={line.type === "deletion"}

            class:context={line.type === "context"}

            class:selected={!thread &&

              isSelected(filePath(file, "left"), hunkIdx, lineIdx)}>

            <div

              class="left"

              class:marker={selection?.start.side === "left" &&

                selection.start.lineNumber === lineNumber(line, "left")}

              onpointerdown={e => {

                if (codeComments?.createComment && !thread) {

                  selectLine(e, file, "left", line, hunkIdx, lineIdx);

                }

              }}>

              {lineNumber(line, "left")}

            </div>

            <div

              class="right"

              class:marker={selection?.start.side === "right" &&

                selection.start.lineNumber === lineNumber(line, "right")}

              onpointerdown={e => {

                if (codeComments?.createComment && !thread) {

                  selectLine(e, file, "right", line, hunkIdx, lineIdx);

                }

              }}>

              {lineNumber(line, "right")}

            </div>

            <div class="sign">

              {#if line.type === "addition"}

                +

              {:else if line.type === "deletion"}

                -

              {/if}

            </div>

            {#if line.highlight && line.highlight.items.length > 0}

              <div class="code">

                {@html line.highlight.items

                  .map(

                    paint =>

                      `<span class="global-syntax ${paint.style}">${escape(paint.item)}</span>`,

                  )

                  .join("")}

              </div>

            {:else if line.line !== ""}

              <div class="code">{line.line}</div>

            {:else}

              <div class="code"><br /></div>

            {/if}

            <div class="global-flex comment-icon">

              {#if thread}

                {#if thread.root.resolved && thread.replies.every(r => r.resolved)}

                  <Icon name="comment-checkmark" />

                {:else}

                  <Icon name="comment" />

                {/if}

              {/if}

            </div>

          </div>

          {#if codeComments && thread}

            <div class="thread">

              <div style:padding="0.5rem">

                {@render commentHeader(

                  thread.root.location?.path,

                  rangeAnchorsFromCodeLocation(thread.root.location),

                )}

              </div>

              <ThreadComponent

                inline

                rid={codeComments.rid}

                {thread}

                reactOnComment={codeComments.config &&

                  partial(

                    codeComments.reactOnComment,

                    codeComments.config.publicKey,

                  )}

                createReply={async (body, embeds) => {

                  await codeComments.createComment(

                    body,

                    embeds,

                    thread.root.id,

                  );

                }}

                editComment={codeComments.editComment}

                canEditComment={partial(

                  roles.isDelegateOrAuthor,

                  codeComments.config.publicKey,

                  codeComments.repoDelegates.map(delegate => delegate.did),

                )} />

            </div>

          {/if}

          {#if codeComments && selection && selection.hunkIdx === hunkIdx && selection.lineIdx === lineIdx && selection.codeLocation}

            <div

              class="comment-form"

              onpointerdown={e => {

                e.stopPropagation();

              }}>

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

                {@render commentHeader(selection.file, {

                  start: selection.start,

                })}

              </div>

              <CommentToggleInput

                disallowEmptyBody

                rid={codeComments.rid}

                onclose={() => {

                  selection = undefined;

                }}

                focus

                placeholder="Leave a comment"

                submit={async (body, embeds) => {

                  if (selection?.codeLocation) {

                    try {

                      await codeComments.createComment(

                        body,

                        embeds,

                        undefined,

                        selection.codeLocation,

                      );

                    } catch (e) {

                      console.error("Comment creation failed", e);

                    } finally {

                      selection = undefined;

                    }

                  }

                }} />

            </div>

          {/if}

        {/each}

      </div>

    {/each}

  {/if}

</div>

    font-family: var(--font-family-sans-serif);

    leftHeader: Snippet;

    rightHeader?: Snippet;

    sticky?: boolean;

  let {

    children,

    expanded,

    leftHeader,

    rightHeader,

    sticky = true,

  }: Props = $props();

  {#if rightHeader}

    <div

      class="global-flex"

      style:gap="1rem"

      style:margin-left="auto"

      style:margin-right="1rem">

      {@render rightHeader()}

    </div>

  {/if}

<script lang="ts">

  import type { FileDiff } from "@bindings/diff/FileDiff";

  import type { CodeComments } from "./Diff.svelte";

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

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

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

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

  interface Props {

    expanded: boolean;

    file: FileDiff;

    head: string;

    codeComments?: CodeComments;

  }

  const { expanded, file, head, codeComments }: Props = $props();

  // Pass down only the comments that apply to the given diff.

  function filterThreadsByFilePath() {

    if (codeComments) {

      if (

        file.status === "added" ||

        file.status === "deleted" ||

        file.status === "modified"

      ) {

        return {

          ...codeComments,

          threads:

            codeComments.threads.filter(t => {

              return t.root.location?.path === file.path;

            }) ?? [],

        };

      } else {

        return { ...codeComments, threads: [] };

      }

    } else {

      return undefined;

    }

  }

  const commentsOfThisFile = $derived(filterThreadsByFilePath());

</script>

<style>

  .added {

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

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

  }

  .deleted {

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

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

  }

  .moved,

  .copied {

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

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

  }

  .stats {

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

    font-family: var(--font-family-monospace);

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

  }

</style>

{#snippet emptyPlaceholder()}

  <div class="global-flex" style:margin="1rem 0" style:justify-content="center">

    <Icon name="none" />Empty file

  </div>

{/snippet}

<File {expanded}>

  {#snippet leftHeader()}

    {#if file.status === "moved" || file.status === "copied"}

      <span style="display: flex; align-items: center; flex-wrap: wrap;">

        <Path fullPath={file.oldPath} />

        <span style:padding="0 0.5rem">→</span>

        <Path fullPath={file.newPath} />

      </span>

    {:else}

      <Path fullPath={file.path} />

    {/if}

    {#if file.status === "added"}

      <span class="global-counter added">added</span>

    {:else if file.status === "deleted"}

      <span class="global-counter deleted">deleted</span>

    {:else if file.status === "moved"}

      <span class="global-counter moved">moved</span>

    {:else if file.status === "copied"}

      <span class="global-counter copied">copied</span>

    {/if}

  {/snippet}

  {#snippet rightHeader()}

    {#if file.diff.type === "plain" && file.diff.hunks.length > 0}

      <div class="stats">

        <span style:color="var(--color-foreground-success)">

          +{file.diff.stats.additions}

        </span>

        <span style:color="var(--color-foreground-red)">

          -{file.diff.stats.deletions}

        </span>

      </div>

    {/if}

    {#if commentsOfThisFile && commentsOfThisFile.threads.length > 0}

      <Icon name="comment" />

    {/if}

  {/snippet}

  {#if file.diff.type === "plain"}

    {#if file.diff.hunks.length > 0}

      <Diff {file} {head} codeComments={commentsOfThisFile} />

    {:else}

      {@render emptyPlaceholder()}

    {/if}

  {:else if file.diff.type === "binary"}

    <div

      class="global-flex"

      style:margin="1rem 0"

      style:justify-content="center">

      <Icon name="binary" />Binary file

    </div>

  {:else}

    {@render emptyPlaceholder()}

  {/if}

</File>

      | "binary"

  {:else if name === "binary"}

    <path d="M10 3.5H11V4.5H10V3.5Z" />

    <path d="M11 4.5L12 4.5V5.5H11V4.5Z" />

    <path d="M10 5.5L12 5.5V6.5H10V5.5Z" />

    <path d="M9 5.5H10V6.5H9V5.5Z" />

    <path d="M8 4.5H9V5.5L8 5.5V4.5Z" />

    <path d="M8 2.5H9L9 4.5H8L8 2.5Z" />

    <path d="M9 2.5L10 2.5V3.5H9V2.5Z" />

    <path d="M4 13.5H12V14.5H4V13.5Z" />

    <path d="M4 1.5H9V2.5L4 2.5V1.5Z" />

    <path d="M13 5.5V13.5L12 13.5L12 5.5L13 5.5Z" />

    <path d="M4 2.5L4 13.5H3L3 2.5L4 2.5Z" />

    <path d="M5 9.5H6V11.5H5V9.5Z" />

    <path d="M7 9.5H8V11.5H7V9.5Z" />

    <path d="M6 11.5H7L7 12.5H6L6 11.5Z" />

    <path d="M6 8.5H7V9.5L6 9.5L6 8.5Z" />

    <path d="M9 9.5H10V10.5H9V9.5Z" />

    <path d="M10 8.5H11V12.5H10V8.5Z" />

    <path d="M5 4.5H6V5.5H5V4.5Z" />

    <path d="M6 3.5H7V7.5H6V3.5Z" />

<script lang="ts">

  interface Props {

    fullPath: string;

  }

  const { fullPath }: Props = $props();

</script>

<style>

  .container {

    white-space: nowrap;

    -webkit-touch-callout: initial;

    -webkit-user-select: text;

    user-select: text;

  }

  .path {

    color: var(--color-fill-gray);

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

  }

  .filename {

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

  }

</style>

<!-- prettier-ignore -->

<span class="txt-small container">

  <span class="path">

    {fullPath

      .match(/^.*\/|/)

      ?.values()

      .next().value}

  </span><span class="filename">

    {fullPath.split("/").slice(-1)}

  </span>

</span>

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

            (!comment.location &&

              comment.id !== review.id &&

              !comment.replyTo) ||

  const codeCommentThreads = $derived(

    ((review.comments &&

      review.comments

        .filter(

          comment =>

            (comment.location &&

              comment.id !== review.id &&

              !comment.replyTo) ||

            comment.replyTo === review.id,

        )

        .map(thread => {

          return {

            root: thread,

            replies:

              review.comments &&

              review.comments

                .filter(comment => comment.replyTo === thread.id)

                .sort((a, b) => a.edits[0].timestamp - b.edits[0].timestamp),

          };

        }, [])) as Thread<CodeLocation>[]) || [],

  );

    location?: CodeLocation,

          location,

  <Changes

    codeComments={{

      config,

      createComment,

      editComment,

      reactOnComment,

      repoDelegates: repo.delegates,

      rid: repo.rid,

      threads: codeCommentThreads,

    }}

    rid={repo.rid}

    showCommits={false}

    {patchId}

    {revision} />

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

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

    thread: Thread<CodeLocation>;

    inline?: boolean;

    inline = false,

    font-family: var(--font-family-sans-serif);

{#snippet repliesSnippet()}

  <div style:width="100%">

    {#if replies.length > 0}

      {#each replies as reply}

        <CommentComponent

          disallowEmptyBody

          {rid}

          lastEdit={reply.edits.length > 1 ? reply.edits.at(-1) : undefined}

          id={reply.id}

          author={reply.author}

          caption="replied"

          reactions={reply.reactions}

          timestamp={reply.edits[0].timestamp}

          body={reply.edits.slice(-1)[0].body}

          editComment={editComment &&

            canEditComment(reply.author.did) &&

            partial(editComment, reply.id)}

          reactOnComment={reactOnComment &&

            partial(reactOnComment, reply.id)} />

      {/each}

    {/if}

    {#if createReply && showReplyForm}

      <div id={`reply-${root.id}`} style:padding="1rem">

        <ExtendedTextarea

          disallowEmptyBody

          {submitInProgress}

          {rid}

          placeholder="Reply to comment"

          submitCaption="Reply"

          focus

          close={() => (showReplyForm = false)}

          submit={async ({ comment, embeds }) => {

            try {

              submitInProgress = true;

              await createReply(comment, Array.from(embeds.values()), root.id);

            } finally {

              showReplyForm = false;

              submitInProgress = false;

            }

          }} />

      </div>

    {/if}

  </div>

{/snippet}

  <div class:top-level-comment={!inline}>

        {#if createReply}

          <Icon name="reply" onclick={toggleReply} />

        {/if}

    {#if inline}

      <div style:background-color="var(--color-background-float)">

        {@render repliesSnippet()}

    {:else}

      <Border variant="float" styleOverflow="hidden" flatTop={!inline}>

        {@render repliesSnippet()}

      </Border>

    {/if}

  function findReviewRevision(review: Review): Revision {

    // Every review is guaranteed to have a revision according to the protocol

    // model, so using type assertions here is safe.

    return revisions.find(revision => {

      return revision.reviews!.find(rev => {

        return rev.id === review.id;

      });

    }) as Revision;

  }

      revision={findReviewRevision(review)}