Radish alpha
r
rad:z4V1sjrXqjvFdnCUbxPFqd5p4DtH5
Radicle web interface
Radicle
Git
Fix serialization reactions tooltip
Merged did:key:z6MkkfM3...sVz5 opened 2 years ago

Display the alias of the reaction author or fallback to their nid

check check-visual check-unit-test check-httpd-api-unit-test check-e2e check-build

👉 Preview
👉 Workflow runs
👉 Branch on GitHub

1 file changed +22 -16 8ba5d4e7 1d250334
modified src/components/Reactions.svelte
@@ -10,6 +10,10 @@
        reaction: string,
      ) => Promise<void>)
    | undefined;
+

+
  function authorsToTooltip(authors: Comment["reactions"][0]["authors"]) {
+
    return authors.map(a => a.alias ?? a.id).join("\n");
+
  }
</script>

<style>
@@ -28,23 +32,25 @@

<div class="reactions">
  {#each reactions as { emoji, authors }}
-
    {#if handleReaction}
-
      <IconButton
-
        on:click={async () => {
-
          if (handleReaction) {
-
            await handleReaction(authors, emoji);
-
          }
-
        }}>
-
        <div class="reaction txt-tiny">
+
    <div title={authorsToTooltip(authors)}>
+
      {#if handleReaction}
+
        <IconButton
+
          on:click={async () => {
+
            if (handleReaction) {
+
              await handleReaction(authors, emoji);
+
            }
+
          }}>
+
          <div class="reaction txt-tiny">
+
            <span>{emoji}</span>
+
            <span>{authors.length}</span>
+
          </div>
+
        </IconButton>
+
      {:else}
+
        <div class="reaction txt-tiny" style="padding: 2px 4px;">
          <span>{emoji}</span>
-
          <span title={authors.join("\n")}>{authors.length}</span>
+
          <span>{authors.length}</span>
        </div>
-
      </IconButton>
-
    {:else}
-
      <div class="reaction txt-tiny" style="padding: 2px 4px;">
-
        <span>{emoji}</span>
-
        <span title={authors.join("\n")}>{authors.length}</span>
-
      </div>
-
    {/if}
+
      {/if}
+
    </div>
  {/each}
</div>