Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Add file path and line for comments with code locations
Sebastian Martinez committed 10 months ago
commit 18afaa1251f974ccf9fb6a2e7c16ff296cf95758
parent 0603f63cdf547c433515bae36f86813ddbdd82ee
2 files changed +47 -0
modified src/components/Comment.svelte
@@ -3,6 +3,10 @@


  import * as utils from "@app/lib/utils";
+ 
  type Side = "left" | "right";
+ 
  type SelectionAnchor = { side: Side; lineNumber: number };
+ 
  type SelectionRange = { start: SelectionAnchor; end?: SelectionAnchor };
+ 


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

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

  import NodeId from "@app/components/NodeId.svelte";
@@ -14,12 +18,28 @@
  export let baseUrl: BaseUrl;

  export let body: string;

  export let reactions: Comment["reactions"] | undefined = undefined;
+ 
  export let location: Comment["location"] | undefined = undefined;

  export let caption = "commented";

  export let rawPath: string;

  export let timestamp: number;

  export let isReply: boolean = false;

  export let isLastReply: boolean = false;

  export let lastEdit: Comment["edits"][0] | undefined = undefined;
+
+ 
  function rangeAnchorsFromCodeLocation(
+ 
    location: Comment["location"] | 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 },
+ 
      };
+ 
    }
+ 
  }
+ 
  $: selectionRange = rangeAnchorsFromCodeLocation(location);

</script>



<style>
@@ -42,6 +62,13 @@
    gap: 0.5rem;

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

  }
+ 
  .code-location {
+ 
    font-family: var(--font-family-monospace);
+ 
    background-color: var(--color-fill-ghost);
+ 
    font-size: var(--font-size-tiny);
+ 
    border-radius: var(--border-radius-tiny);
+ 
    padding: 0.125rem 0.25rem;
+ 
  }

  .reply-dot {

    border-radius: var(--border-radius-round);

    width: 4px;
@@ -108,6 +135,25 @@
      <NodeId {baseUrl} nodeId={authorId} alias={authorAlias} />

      <slot name="caption">{caption}</slot>

      <Id {id} />
+ 
      {#if location}
+ 
        on change
+ 
        <div class="code-location">
+ 
          {#if location.path && selectionRange}
+ 
            <div class="comment-header">
+ 
              {location.path.split("/").length > 1 ? "…/" : ""}{location.path
+ 
                .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}
+ 
        </div>
+ 
      {/if}

      <span class="timestamp" title={utils.absoluteTimestamp(timestamp)}>

        {utils.formatTimestamp(timestamp)}

      </span>
modified src/components/Thread.svelte
@@ -50,6 +50,7 @@
      lastEdit={root.edits.length > 1 ? root.edits.at(-1) : undefined}

      authorId={root.author.id}

      authorAlias={root.author.alias}
+ 
      location={root.location}

      reactions={root.reactions}

      timestamp={root.timestamp}

      body={root.body}>