grain.social is a photo sharing platform built on atproto.
grain.social
atproto
photography
appview
feat: show profile popover on mention hover in rich text
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
+3
-1
+3
-1
app/lib/components/atoms/RichText.svelte
+3
-1
app/lib/components/atoms/RichText.svelte
···
1
1
<script lang="ts">
2
+
import ProfilePopover from '../molecules/ProfilePopover.svelte'
3
+
2
4
type Segment =
3
5
| { type: 'text'; text: string }
4
6
| { type: 'link'; text: string; href: string }
···
77
79
const segments = $derived(parse(text))
78
80
</script>
79
81
80
-
{#each segments as seg}{#if seg.type === 'link'}<a href={seg.href} target="_blank" rel="noopener noreferrer" class="rich-link">{seg.text}</a>{:else if seg.type === 'mention'}<a href="/profile/{seg.handle}" class="rich-mention">{seg.text}</a>{:else if seg.type === 'hashtag'}<a href="/hashtags/{seg.tag}" class="rich-hashtag">{seg.text}</a>{:else}{seg.text}{/if}{/each}
82
+
{#each segments as seg}{#if seg.type === 'link'}<a href={seg.href} target="_blank" rel="noopener noreferrer" class="rich-link">{seg.text}</a>{:else if seg.type === 'mention'}<ProfilePopover did={seg.handle}><a href="/profile/{seg.handle}" class="rich-mention">{seg.text}</a></ProfilePopover>{:else if seg.type === 'hashtag'}<a href="/hashtags/{seg.tag}" class="rich-hashtag">{seg.text}</a>{:else}{seg.text}{/if}{/each}
81
83
82
84
<style>
83
85
.rich-link, .rich-mention, .rich-hashtag {