grain.social is a photo sharing platform built on atproto.
grain.social
atproto
photography
appview
feat: show "View on Bluesky" link when profile not found
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
+17
-2
+17
-2
app/routes/profile/[did]/+page.svelte
+17
-2
app/routes/profile/[did]/+page.svelte
···
146
146
147
147
{#if profile.isError}
148
148
<DetailHeader label="Not Found" />
149
-
<div class="not-found">This profile doesn't exist.</div>
149
+
<div class="not-found">
150
+
<p>This user doesn't have a Grain profile yet.</p>
151
+
<a class="bsky-link" href="https://bsky.app/profile/{did}" target="_blank" rel="noopener noreferrer">
152
+
View on Bluesky <ArrowUpRight size={14} />
153
+
</a>
154
+
</div>
150
155
{:else}
151
156
{#if lightboxSrc}
152
157
<AvatarLightbox src={lightboxSrc} onclose={() => (lightboxSrc = null)} />
···
272
277
.toggle-btn:hover { color: var(--text-secondary); }
273
278
.toggle-btn.active { color: var(--text-primary); }
274
279
.toggle-btn.active::after { background: var(--grain); }
275
-
.not-found { text-align: center; color: var(--text-muted); padding: 48px 16px; font-size: 14px; }
280
+
.not-found { text-align: center; color: var(--text-muted); padding: 48px 16px; font-size: 14px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
281
+
.bsky-link {
282
+
display: inline-flex;
283
+
align-items: center;
284
+
gap: 4px;
285
+
color: var(--grain);
286
+
text-decoration: none;
287
+
font-size: 13px;
288
+
font-weight: 500;
289
+
}
290
+
.bsky-link:hover { text-decoration: underline; }
276
291
</style>