Remove web of trust numbers

coracle-social · Sep 18, 2024 · 0c397cf · 0c397cf
1 parent 7107c53
commit 0c397cf
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 26 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,8 @@
 - [x] Add profile picture to DMs
 - [x] Add pubkey to profile name, fix wot info on mobile (zmjohnson)
 - [x] Render highlight comments
+- [x] Improve initial load and search performance
+- [x] Remove web of trust numbers
 
 # 0.4.9
 

diff --git a/src/app/shared/PersonName.svelte b/src/app/shared/PersonName.svelte
@@ -37,25 +37,27 @@
 
 <div class={cx("flex gap-1", $$props.class)}>
   <div class="flex flex-col overflow-hidden text-ellipsis">
-    <span class="cy-person-name">{$profileDisplay}</span>
+    <div class="flex gap-2 items-center">
+      <span class="cy-person-name">{$profileDisplay}</span>
+      {#if $session}
+        <div on:click|stopPropagation>
+          <Popover triggerType="mouseenter" opts={{hideOnClick: true}}>
+            <div slot="trigger">
+              <WotScore score={wotScore} max={$maxWot} {accent} />
+            </div>
+            <Anchor modal slot="tooltip" class="flex items-center gap-1" href="/help/web-of-trust">
+              <i class="fa fa-info-circle" />
+              WoT Score
+            </Anchor>
+          </Popover>
+        </div>
+      {/if}
+    </div>
     <div class="flex flex-row items-center text-sm">
       <small>{npubDisplay}</small>
       {#if displayNpubCopyButton}
         <CopyValueSimple class="pl-1" value={npub} label="Npub" />
       {/if}
     </div>
   </div>
-  {#if $session}
-    <div class="flex gap-1 font-normal" on:click|stopPropagation>
-      <Popover triggerType="mouseenter" opts={{hideOnClick: true}}>
-        <div slot="trigger">
-          <WotScore score={wotScore} max={$maxWot} {accent} />
-        </div>
-        <Anchor modal slot="tooltip" class="flex items-center gap-1" href="/help/web-of-trust">
-          <i class="fa fa-info-circle" />
-          WoT Score
-        </Anchor>
-      </Popover>
-    </div>
-  {/if}
 </div>
diff --git a/src/partials/Popover.svelte b/src/partials/Popover.svelte
@@ -3,6 +3,7 @@
   import "tippy.js/dist/tippy.css"
   import "tippy.js/animations/shift-away.css"
   import tippy from "tippy.js"
+  import cx from 'classnames'
   import {onMount} from "svelte"
   import {isMobile} from "src/util/html"
 
@@ -76,7 +77,7 @@
     }
   }} />
 
-<div bind:this={trigger} class={$$props.class}>
+<div bind:this={trigger} class={cx($$props.class, "cursor-pointer")}>
   <slot name="trigger" />
 </div>
 

diff --git a/src/partials/WotScore.svelte b/src/partials/WotScore.svelte
@@ -13,29 +13,33 @@
 </style>
 
 <script lang="ts">
+  import {clamp} from '@welshman/lib'
   import {themeColors} from "src/partials/state"
 
   export let score
   export let max = 100
   export let accent = false
 
-  $: superMaxWot = max * 1.5
-  $: dashOffset = 100 - (Math.max(superMaxWot / 20, score) / superMaxWot) * 100
-  $: style = `transform: rotate(${dashOffset * 1.8 - 50}deg)`
+  const radius = 7
+  const center = radius + 1
+  const pathLength = radius * 2 * Math.PI
+
+  $: normalizedScore = clamp([max / 20, max], score) / max
+  $: dashOffset = 100 - 44 * normalizedScore
+  $: style = `transform: rotate(${135 - normalizedScore * 180}deg)`
   $: stroke = $themeColors[accent ? 'accent' : 'neutral-200']
 </script>
 
-<span class="relative flex h-10 w-10 items-center justify-center whitespace-nowrap px-4 text-xs">
-  <svg height="32" width="32" class="absolute">
-    <circle class="wot-background" cx="16" cy="16" r="15" />
+<div class="relative h-4 w-4">
+  <svg height="16" width="16" class="absolute">
+    <circle class="wot-background" cx={center} cy={center} r={radius} />
     <circle
-      cx="16"
-      cy="16"
-      r="15"
+      cx={center}
+      cy={center}
+      r={radius}
       class="wot-highlight"
       stroke-dashoffset={dashOffset}
       {style}
       {stroke} />
   </svg>
-  {score}
-</span>
+</div>