Highly ambitious ATProtocol AppView service and sdks
fix avatar input on the profile settings form
+148
-58
+1
-1
frontend/src/features/docs/templates/DocsIndexPage.tsx
+1
-1
frontend/src/features/docs/templates/DocsIndexPage.tsx
···
15
15
export function DocsIndexPage({ docs, currentUser }: DocsIndexPageProps) {
16
16
return (
17
17
<Layout title="Documentation - Slices" currentUser={currentUser}>
18
-
<div className="max-w-4xl mx-auto py-8 px-4">
18
+
<div className="py-8 px-4">
19
19
<div className="mb-8">
20
20
<h1 className="text-3xl font-bold text-zinc-900 mb-2">
21
21
Documentation
+1
-1
frontend/src/features/docs/templates/DocsPage.tsx
+1
-1
frontend/src/features/docs/templates/DocsPage.tsx
···
18
18
export function DocsPage({ title, content, docs, currentSlug, currentUser }: DocsPageProps) {
19
19
return (
20
20
<Layout title={`${title} - Slices`} currentUser={currentUser}>
21
-
<div className="max-w-6xl mx-auto py-4 sm:py-8 px-4">
21
+
<div className="py-4 sm:py-8 px-4">
22
22
{/* Mobile navigation dropdown */}
23
23
<div className="sm:hidden mb-6">
24
24
<label htmlFor="docs-nav" className="block text-sm font-medium text-zinc-700 mb-2">
+4
-1
frontend/src/features/settings/handlers.tsx
+4
-1
frontend/src/features/settings/handlers.tsx
···
6
6
import { buildAtUri } from "../../utils/at-uri.ts";
7
7
import type { SocialSlicesActorProfile } from "../../client.ts";
8
8
import { SettingsPage } from "./templates/SettingsPage.tsx";
9
+
import { recordBlobToCdnUrl } from "@slices/client";
9
10
10
11
async function handleSettingsPage(req: Request): Promise<Response> {
11
12
const context = await withAuth(req);
···
39
40
profile = {
40
41
displayName: profileRecord.value.displayName,
41
42
description: profileRecord.value.description,
42
-
avatar: profileRecord.value.avatar?.toString(),
43
+
avatar: profileRecord.value.avatar
44
+
? recordBlobToCdnUrl(profileRecord, profileRecord.value.avatar, "avatar")
45
+
: undefined,
43
46
};
44
47
}
45
48
} catch (error) {
+4
-12
frontend/src/features/settings/templates/fragments/SettingsForm.tsx
+4
-12
frontend/src/features/settings/templates/fragments/SettingsForm.tsx
···
1
1
import { Input } from "../../../../shared/fragments/Input.tsx";
2
2
import { Textarea } from "../../../../shared/fragments/Textarea.tsx";
3
3
import { Button } from "../../../../shared/fragments/Button.tsx";
4
+
import { AvatarInput } from "../../../../shared/fragments/AvatarInput.tsx";
4
5
5
6
interface SettingsFormProps {
6
7
profile?: {
7
8
displayName?: string;
8
9
description?: string;
9
10
avatar?: string;
11
+
handle?: string;
10
12
};
11
13
}
12
14
···
24
26
hx-encoding="multipart/form-data"
25
27
className="space-y-4"
26
28
>
29
+
<AvatarInput profile={profile} />
30
+
27
31
<Input
28
32
type="text"
29
33
name="displayName"
···
39
43
placeholder="Free-form profile description text"
40
44
defaultValue={profile?.description || ""}
41
45
/>
42
-
43
-
<div>
44
-
<label className="block text-sm font-medium text-zinc-700 mb-2">
45
-
Avatar
46
-
</label>
47
-
<input
48
-
type="file"
49
-
name="avatar"
50
-
accept="image/*"
51
-
className="block w-full border border-zinc-300 rounded-md px-3 py-2"
52
-
/>
53
-
</div>
54
46
55
47
<Button
56
48
type="submit"
+36
-21
frontend/src/routes/middleware.ts
+36
-21
frontend/src/routes/middleware.ts
···
1
1
import { sessionStore, atprotoClient } from "../config.ts";
2
2
import { recordBlobToCdnUrl } from "@slices/client";
3
+
import { getSliceActor } from "../lib/api.ts";
3
4
4
5
export interface AuthenticatedUser {
5
6
handle?: string;
6
7
sub?: string;
7
8
isAuthenticated: boolean;
8
9
avatar?: string;
10
+
displayName?: string;
9
11
}
10
12
11
13
export interface RouteContext {
···
16
18
// Get current user info from session store
17
19
const currentUser = await sessionStore.getCurrentUser(req);
18
20
19
-
// If user is authenticated, try to fetch their Bluesky profile avatar
21
+
// If user is authenticated, try to fetch their profile data
20
22
if (currentUser.isAuthenticated && currentUser.sub) {
21
23
try {
22
-
// Try to get the user's Bluesky profile from external collections
23
-
const profileRecords =
24
-
await atprotoClient.app.bsky.actor.profile.getRecords({
25
-
where: {
26
-
did: { eq: currentUser.sub },
27
-
},
28
-
limit: 1,
29
-
});
24
+
// Get the user's profile from network.slices.actor.profile
25
+
const profile = await getSliceActor(atprotoClient, currentUser.sub);
26
+
if (profile) {
27
+
currentUser.displayName = profile.displayName;
28
+
currentUser.avatar = profile.avatar;
29
+
}
30
+
} catch (error) {
31
+
console.log("Could not fetch user profile:", error);
32
+
// Continue without profile data - this is non-critical
33
+
}
34
+
35
+
// Fallback to Bluesky profile for avatar if not found in slices profile
36
+
if (!currentUser.avatar) {
37
+
try {
38
+
const profileRecords =
39
+
await atprotoClient.app.bsky.actor.profile.getRecords({
40
+
where: {
41
+
did: { eq: currentUser.sub },
42
+
},
43
+
limit: 1,
44
+
});
30
45
31
-
if (profileRecords.records && profileRecords.records.length > 0) {
32
-
const profileRecord = profileRecords.records[0];
33
-
if (profileRecord.value.avatar) {
34
-
// Convert BlobRef to CDN URL for avatar
35
-
currentUser.avatar = recordBlobToCdnUrl(
36
-
profileRecord,
37
-
profileRecord.value.avatar,
38
-
"avatar"
39
-
);
46
+
if (profileRecords.records && profileRecords.records.length > 0) {
47
+
const profileRecord = profileRecords.records[0];
48
+
if (profileRecord.value.avatar) {
49
+
currentUser.avatar = recordBlobToCdnUrl(
50
+
profileRecord,
51
+
profileRecord.value.avatar,
52
+
"avatar"
53
+
);
54
+
}
40
55
}
56
+
} catch (error) {
57
+
console.log("Could not fetch user avatar:", error);
58
+
// Continue without avatar - this is non-critical
41
59
}
42
-
} catch (error) {
43
-
console.log("Could not fetch user avatar:", error);
44
-
// Continue without avatar - this is non-critical
45
60
}
46
61
}
47
62