forked from coracle/flotilla
92 lines
2.0 KiB
Svelte
92 lines
2.0 KiB
Svelte
<style>
|
|
.wot-background {
|
|
fill: transparent;
|
|
stroke: var(--base-content);
|
|
opacity: 30%;
|
|
}
|
|
|
|
.wot-highlight {
|
|
fill: transparent;
|
|
stroke-width: 1.5;
|
|
stroke-dasharray: 100 100;
|
|
transform-origin: center;
|
|
}
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import {clamp} from "@welshman/lib"
|
|
import {
|
|
pubkey,
|
|
followLists,
|
|
muteLists,
|
|
getFollows,
|
|
getMutes,
|
|
deriveUserWotScore,
|
|
} from "@welshman/app"
|
|
import {bootstrapPubkeys} from "@app/core/state"
|
|
|
|
interface Props {
|
|
pubkey: string
|
|
}
|
|
|
|
const {pubkey: target}: Props = $props()
|
|
|
|
const max = 100
|
|
const radius = 6
|
|
const center = radius + 1
|
|
|
|
const userScore = deriveUserWotScore(target)
|
|
const follows = $derived.by(() => {
|
|
const lists = $followLists
|
|
|
|
if (!lists.length || !$pubkey) {
|
|
return []
|
|
}
|
|
|
|
return getFollows($pubkey)
|
|
})
|
|
const hasUserFollows = $derived(follows.length > 0)
|
|
const fallbackScore = $derived.by(() => {
|
|
const lists = $followLists
|
|
const mutes = $muteLists
|
|
|
|
if (!lists.length && !mutes.length) {
|
|
return 0
|
|
}
|
|
|
|
let score = 0
|
|
|
|
for (const seed of $bootstrapPubkeys) {
|
|
if (getFollows(seed).includes(target)) {
|
|
score += 1
|
|
}
|
|
|
|
if (getMutes(seed).includes(target)) {
|
|
score -= 1
|
|
}
|
|
}
|
|
|
|
return score
|
|
})
|
|
const score = $derived(hasUserFollows ? $userScore : fallbackScore)
|
|
const active = $derived(follows.includes(target))
|
|
const normalizedScore = $derived(clamp([0, max], score) / max)
|
|
const dashOffset = $derived(100 - 44 * normalizedScore)
|
|
const style = $derived(`transform: rotate(${135 - normalizedScore * 180}deg)`)
|
|
const stroke = $derived(active ? "var(--primary)" : "var(--base-content)")
|
|
</script>
|
|
|
|
<div class="relative h-[14px] w-[14px]">
|
|
<svg height="14" width="14" class="absolute">
|
|
<circle class="wot-background" cx={center} cy={center} r={radius} />
|
|
<circle
|
|
cx={center}
|
|
cy={center}
|
|
r={radius}
|
|
class="wot-highlight"
|
|
stroke-dashoffset={dashOffset}
|
|
{style}
|
|
{stroke} />
|
|
</svg>
|
|
</div>
|