grain.social is a photo sharing platform built on atproto.
grain.social
atproto
photography
appview
feat: make story viewer author link to profile
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
+16
-6
+16
-6
app/lib/components/organisms/StoryViewer.svelte
+16
-6
app/lib/components/organisms/StoryViewer.svelte
···
1
1
<script lang="ts">
2
2
import { createQuery, useQueryClient } from '@tanstack/svelte-query'
3
3
import { X, MapPin, Trash2 } from 'lucide-svelte'
4
+
import { goto } from '$app/navigation'
4
5
import { callXrpc } from '$hatk/client'
5
6
import { storiesQuery, storyAuthorsQuery } from '$lib/queries'
6
7
import { viewer as viewerStore } from '$lib/stores'
···
203
204
{#if currentStory}
204
205
<div class="story-header">
205
206
<div class="author-info">
206
-
{#if currentStory.creator.avatar}
207
-
<img class="author-avatar" src={currentStory.creator.avatar} alt="" />
208
-
{/if}
209
-
<span class="author-name">
210
-
{currentStory.creator.displayName ?? currentStory.creator.handle}
211
-
</span>
207
+
<a class="author-link" href="/profile/{currentStory.creator.did}" onclick={(e) => { e.stopPropagation(); onclose(); goto(`/profile/${currentStory.creator.did}`) }}>
208
+
{#if currentStory.creator.avatar}
209
+
<img class="author-avatar" src={currentStory.creator.avatar} alt="" />
210
+
{/if}
211
+
<span class="author-name">
212
+
{currentStory.creator.displayName ?? currentStory.creator.handle}
213
+
</span>
214
+
</a>
212
215
<span class="story-time">
213
216
{timeAgo(currentStory.createdAt)}
214
217
</span>
···
311
314
display: flex;
312
315
align-items: center;
313
316
gap: 8px;
317
+
}
318
+
.author-link {
319
+
display: flex;
320
+
align-items: center;
321
+
gap: 8px;
322
+
text-decoration: none;
323
+
color: inherit;
314
324
}
315
325
.author-avatar {
316
326
width: 32px;