whey.party
+1
-1
README.md
+1
-1
README.md
···
8
## running dev and build
9
in the `vite.config.ts` file you should change these values
10
```ts
11
-
const PROD_URL = "https://reddwarf.whey.party"
12
const DEV_URL = "https://local3768forumtest.whey.party"
13
```
14
the PROD_URL is what will compile your oauth client metadata so it is very important to change that. same for DEV_URL if you are using a tunnel for dev work
···
8
## running dev and build
9
in the `vite.config.ts` file you should change these values
10
```ts
11
+
const PROD_URL = "https://reddwarf.app"
12
const DEV_URL = "https://local3768forumtest.whey.party"
13
```
14
the PROD_URL is what will compile your oauth client metadata so it is very important to change that. same for DEV_URL if you are using a tunnel for dev work
+3
package-lock.json
+3
package-lock.json
···
8
"dependencies": {
9
"@atproto/api": "^0.16.6",
10
"@atproto/oauth-client-browser": "^0.3.33",
11
"@radix-ui/react-dropdown-menu": "^2.1.16",
12
"@radix-ui/react-slider": "^1.3.6",
13
"@tailwindcss/vite": "^4.0.6",
14
"@tanstack/query-sync-storage-persister": "^5.85.6",
···
2401
"version": "1.1.15",
2402
"resolved": "https://registry.npmjs.org/@radix-ui/react-hover-card/-/react-hover-card-1.1.15.tgz",
2403
"integrity": "sha512-qgTkjNT1CfKMoP0rcasmlH2r1DAiYicWsDsufxl940sT2wHNEWWv6FMWIQXWhVdmC1d/HYfbhQx60KYyAtKxjg==",
2404
"dependencies": {
2405
"@radix-ui/primitive": "1.1.3",
2406
"@radix-ui/react-compose-refs": "1.1.2",
···
8
"dependencies": {
9
"@atproto/api": "^0.16.6",
10
"@atproto/oauth-client-browser": "^0.3.33",
11
+
"@radix-ui/react-dialog": "^1.1.15",
12
"@radix-ui/react-dropdown-menu": "^2.1.16",
13
+
"@radix-ui/react-hover-card": "^1.1.15",
14
"@radix-ui/react-slider": "^1.3.6",
15
"@tailwindcss/vite": "^4.0.6",
16
"@tanstack/query-sync-storage-persister": "^5.85.6",
···
2403
"version": "1.1.15",
2404
"resolved": "https://registry.npmjs.org/@radix-ui/react-hover-card/-/react-hover-card-1.1.15.tgz",
2405
"integrity": "sha512-qgTkjNT1CfKMoP0rcasmlH2r1DAiYicWsDsufxl940sT2wHNEWWv6FMWIQXWhVdmC1d/HYfbhQx60KYyAtKxjg==",
2406
+
"license": "MIT",
2407
"dependencies": {
2408
"@radix-ui/primitive": "1.1.3",
2409
"@radix-ui/react-compose-refs": "1.1.2",
+2
package.json
+2
package.json
···
12
"dependencies": {
13
"@atproto/api": "^0.16.6",
14
"@atproto/oauth-client-browser": "^0.3.33",
15
+
"@radix-ui/react-dialog": "^1.1.15",
16
"@radix-ui/react-dropdown-menu": "^2.1.16",
17
+
"@radix-ui/react-hover-card": "^1.1.15",
18
"@radix-ui/react-slider": "^1.3.6",
19
"@tailwindcss/vite": "^4.0.6",
20
"@tanstack/query-sync-storage-persister": "^5.85.6",
+153
-107
src/components/Composer.tsx
+153
-107
src/components/Composer.tsx
···
1
-
import { RichText } from "@atproto/api";
2
import { useAtom } from "jotai";
3
import { useEffect, useRef, useState } from "react";
4
5
import { useAuth } from "~/providers/UnifiedAuthProvider";
···
9
import { ProfileThing } from "./Login";
10
import { UniversalPostRendererATURILoader } from "./UniversalPostRenderer";
11
12
-
const MAX_POST_LENGTH = 300
13
14
export function Composer() {
15
const [composerState, setComposerState] = useAtom(composerAtom);
···
31
composerState.kind === "reply"
32
? composerState.parent
33
: composerState.kind === "quote"
34
-
? composerState.subject
35
-
: undefined;
36
37
-
const { data: parentPost, isLoading: isParentLoading } = useQueryPost(parentUri);
38
39
async function handlePost() {
40
if (!agent || !postText.trim() || postText.length > MAX_POST_LENGTH) return;
···
46
const rt = new RichText({ text: postText });
47
await rt.detectFacets(agent);
48
49
const record: Record<string, unknown> = {
50
$type: "app.bsky.feed.post",
51
text: rt.text,
···
95
setPosting(false);
96
}
97
}
98
-
99
-
if (composerState.kind === "closed") {
100
-
return null;
101
-
}
102
103
const getPlaceholder = () => {
104
switch (composerState.kind) {
···
111
return "What's happening?!";
112
}
113
};
114
-
115
const charsLeft = MAX_POST_LENGTH - postText.length;
116
const isPostButtonDisabled =
117
-
posting ||
118
-
!postText.trim() ||
119
-
isParentLoading ||
120
-
charsLeft < 0;
121
122
return (
123
-
<div className="fixed inset-0 z-50 flex items-start justify-center pt-10 sm:pt-20 bg-black/40 dark:bg-black/50">
124
-
<div className="bg-gray-50 dark:bg-gray-950 border border-gray-200 dark:border-gray-700 rounded-2xl shadow-xl w-full max-w-xl relative mx-4">
125
-
<div className="flex flex-row justify-between p-2">
126
-
<button
127
-
className="h-8 w-8 flex items-center justify-center rounded-full text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800"
128
-
onClick={() => !posting && setComposerState({ kind: "closed" })}
129
-
disabled={posting}
130
-
aria-label="Close"
131
-
>
132
-
<svg
133
-
xmlns="http://www.w3.org/2000/svg"
134
-
width="20"
135
-
height="20"
136
-
viewBox="0 0 24 24"
137
-
fill="none"
138
-
stroke="currentColor"
139
-
strokeWidth="2.5"
140
-
strokeLinecap="round"
141
-
strokeLinejoin="round"
142
-
>
143
-
<line x1="18" y1="6" x2="6" y2="18"></line>
144
-
<line x1="6" y1="6" x2="18" y2="18"></line>
145
-
</svg>
146
-
</button>
147
-
<div className="flex-1" />
148
-
<div className="flex items-center gap-4">
149
-
<span className={`text-sm ${charsLeft < 0 ? 'text-red-500' : 'text-gray-500'}`}>
150
-
{charsLeft}
151
-
</span>
152
-
153
-
<button
154
-
className="bg-gray-600 hover:bg-gray-700 text-white font-bold py-1 px-4 rounded-full disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
155
-
onClick={handlePost}
156
-
disabled={isPostButtonDisabled}
157
-
>
158
-
{posting ? "Posting..." : "Post"}
159
-
</button>
160
-
</div>
161
-
</div>
162
163
-
{postSuccess ? (
164
-
<div className="flex flex-col items-center justify-center py-16">
165
-
<span className="text-gray-500 text-6xl mb-4">✓</span>
166
-
<span className="text-xl font-bold text-black dark:text-white">Posted!</span>
167
-
</div>
168
-
) : (
169
-
<div className="px-4">
170
-
{(composerState.kind === "reply") && (
171
-
<div className="mb-1 -mx-4">
172
-
{isParentLoading ? (
173
-
<div className="text-sm text-gray-500 animate-pulse">
174
-
Loading parent post...
175
-
</div>
176
-
) : parentUri ? (
177
-
<UniversalPostRendererATURILoader atUri={parentUri} bottomReplyLine bottomBorder={false} />
178
-
) : (
179
-
<div className="text-sm text-red-500 rounded-lg border border-red-500/50 p-3">
180
-
Could not load parent post.
181
-
</div>
182
-
)}
183
-
</div>
184
-
)}
185
-
186
-
<div className="flex w-full gap-1 flex-col">
187
-
<ProfileThing agent={agent} large/>
188
-
<div className="flex pl-[50px]">
189
-
<AutoGrowTextarea
190
-
className="w-full text-lg bg-transparent focus:outline-none resize-none placeholder:text-gray-500 text-black dark:text-white pb-2"
191
-
rows={5}
192
-
placeholder={getPlaceholder()}
193
-
value={postText}
194
-
onChange={(e) => setPostText(e.target.value)}
195
disabled={posting}
196
-
autoFocus
197
-
/>
198
</div>
199
</div>
200
-
{(composerState.kind === "quote") && (
201
-
<div className="mb-4 ml-[50px] rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
202
-
{isParentLoading ? (
203
-
<div className="text-sm text-gray-500 animate-pulse">
204
-
Loading parent post...
205
</div>
206
-
) : parentUri ? (
207
-
<UniversalPostRendererATURILoader atUri={parentUri} isQuote />
208
-
) : (
209
-
<div className="text-sm text-red-500 rounded-lg border border-red-500/50 p-3">
210
-
Could not load parent post.
211
</div>
212
)}
213
-
</div>
214
-
)}
215
216
-
{postError && (
217
-
<div className="text-red-500 text-sm my-2 text-center">{postError}</div>
218
)}
219
-
220
</div>
221
-
)}
222
-
</div>
223
-
</div>
224
);
225
}
226
227
-
function AutoGrowTextarea({ value, className, onChange, ...props }: React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>) {
228
const ref = useRef<HTMLTextAreaElement>(null);
229
230
useEffect(() => {
···
243
{...props}
244
/>
245
);
246
-
}
···
1
+
import { AppBskyRichtextFacet, RichText } from "@atproto/api";
2
import { useAtom } from "jotai";
3
+
import { Dialog } from "radix-ui";
4
import { useEffect, useRef, useState } from "react";
5
6
import { useAuth } from "~/providers/UnifiedAuthProvider";
···
10
import { ProfileThing } from "./Login";
11
import { UniversalPostRendererATURILoader } from "./UniversalPostRenderer";
12
13
+
const MAX_POST_LENGTH = 300;
14
15
export function Composer() {
16
const [composerState, setComposerState] = useAtom(composerAtom);
···
32
composerState.kind === "reply"
33
? composerState.parent
34
: composerState.kind === "quote"
35
+
? composerState.subject
36
+
: undefined;
37
38
+
const { data: parentPost, isLoading: isParentLoading } =
39
+
useQueryPost(parentUri);
40
41
async function handlePost() {
42
if (!agent || !postText.trim() || postText.length > MAX_POST_LENGTH) return;
···
48
const rt = new RichText({ text: postText });
49
await rt.detectFacets(agent);
50
51
+
if (rt.facets?.length) {
52
+
rt.facets = rt.facets.filter((item) => {
53
+
if (item.$type !== "app.bsky.richtext.facet") return true;
54
+
if (!item.features?.length) return true;
55
+
56
+
item.features = item.features.filter((feature) => {
57
+
if (feature.$type !== "app.bsky.richtext.facet#mention") return true;
58
+
const did = feature.$type === "app.bsky.richtext.facet#mention" ? (feature as AppBskyRichtextFacet.Mention)?.did : undefined;
59
+
return typeof did === "string" && did.startsWith("did:");
60
+
});
61
+
62
+
return item.features.length > 0;
63
+
});
64
+
}
65
+
66
const record: Record<string, unknown> = {
67
$type: "app.bsky.feed.post",
68
text: rt.text,
···
112
setPosting(false);
113
}
114
}
115
+
// if (composerState.kind === "closed") {
116
+
// return null;
117
+
// }
118
119
const getPlaceholder = () => {
120
switch (composerState.kind) {
···
127
return "What's happening?!";
128
}
129
};
130
+
131
const charsLeft = MAX_POST_LENGTH - postText.length;
132
const isPostButtonDisabled =
133
+
posting || !postText.trim() || isParentLoading || charsLeft < 0;
134
135
return (
136
+
<Dialog.Root
137
+
open={composerState.kind !== "closed"}
138
+
onOpenChange={(open) => {
139
+
if (!open) setComposerState({ kind: "closed" });
140
+
}}
141
+
>
142
+
<Dialog.Portal>
143
+
<Dialog.Overlay className="fixed inset-0 z-50 bg-black/40 dark:bg-black/50 data-[state=open]:animate-fadeIn" />
144
145
+
<Dialog.Content className="fixed overflow-y-scroll inset-0 z-50 flex items-start justify-center py-10 sm:py-20">
146
+
<div className="bg-gray-50 dark:bg-gray-950 border border-gray-200 dark:border-gray-700 rounded-2xl shadow-xl w-full max-w-xl relative mx-4">
147
+
<div className="flex flex-row justify-between p-2">
148
+
<Dialog.Close asChild>
149
+
<button
150
+
className="h-8 w-8 flex items-center justify-center rounded-full text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800"
151
disabled={posting}
152
+
aria-label="Close"
153
+
>
154
+
<svg
155
+
xmlns="http://www.w3.org/2000/svg"
156
+
width="20"
157
+
height="20"
158
+
viewBox="0 0 24 24"
159
+
fill="none"
160
+
stroke="currentColor"
161
+
strokeWidth="2.5"
162
+
strokeLinecap="round"
163
+
strokeLinejoin="round"
164
+
>
165
+
<line x1="18" y1="6" x2="6" y2="18"></line>
166
+
<line x1="6" y1="6" x2="18" y2="18"></line>
167
+
</svg>
168
+
</button>
169
+
</Dialog.Close>
170
+
171
+
<div className="flex-1" />
172
+
<div className="flex items-center gap-4">
173
+
<span
174
+
className={`text-sm ${charsLeft < 0 ? "text-red-500" : "text-gray-500"}`}
175
+
>
176
+
{charsLeft}
177
+
</span>
178
+
<button
179
+
className="bg-gray-600 hover:bg-gray-700 text-white font-bold py-1 px-4 rounded-full disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
180
+
onClick={handlePost}
181
+
disabled={isPostButtonDisabled}
182
+
>
183
+
{posting ? "Posting..." : "Post"}
184
+
</button>
185
</div>
186
</div>
187
+
188
+
{postSuccess ? (
189
+
<div className="flex flex-col items-center justify-center py-16">
190
+
<span className="text-gray-500 text-6xl mb-4">✓</span>
191
+
<span className="text-xl font-bold text-black dark:text-white">
192
+
Posted!
193
+
</span>
194
+
</div>
195
+
) : (
196
+
<div className="px-4">
197
+
{composerState.kind === "reply" && (
198
+
<div className="mb-1 -mx-4">
199
+
{isParentLoading ? (
200
+
<div className="text-sm text-gray-500 animate-pulse">
201
+
Loading parent post...
202
+
</div>
203
+
) : parentUri ? (
204
+
<UniversalPostRendererATURILoader
205
+
atUri={parentUri}
206
+
bottomReplyLine
207
+
bottomBorder={false}
208
+
/>
209
+
) : (
210
+
<div className="text-sm text-red-500 rounded-lg border border-red-500/50 p-3">
211
+
Could not load parent post.
212
+
</div>
213
+
)}
214
</div>
215
+
)}
216
+
217
+
<div className="flex w-full gap-1 flex-col">
218
+
<ProfileThing agent={agent} large />
219
+
<div className="flex pl-[50px]">
220
+
<AutoGrowTextarea
221
+
className="w-full text-lg bg-transparent focus:outline-none resize-none placeholder:text-gray-500 text-black dark:text-white pb-2"
222
+
rows={5}
223
+
placeholder={getPlaceholder()}
224
+
value={postText}
225
+
onChange={(e) => setPostText(e.target.value)}
226
+
disabled={posting}
227
+
autoFocus
228
+
/>
229
+
</div>
230
+
</div>
231
+
232
+
{composerState.kind === "quote" && (
233
+
<div className="mb-4 ml-[50px] rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
234
+
{isParentLoading ? (
235
+
<div className="text-sm text-gray-500 animate-pulse">
236
+
Loading parent post...
237
+
</div>
238
+
) : parentUri ? (
239
+
<UniversalPostRendererATURILoader
240
+
atUri={parentUri}
241
+
isQuote
242
+
/>
243
+
) : (
244
+
<div className="text-sm text-red-500 rounded-lg border border-red-500/50 p-3">
245
+
Could not load parent post.
246
+
</div>
247
+
)}
248
</div>
249
)}
250
251
+
{postError && (
252
+
<div className="text-red-500 text-sm my-2 text-center">
253
+
{postError}
254
+
</div>
255
+
)}
256
+
</div>
257
)}
258
</div>
259
+
</Dialog.Content>
260
+
</Dialog.Portal>
261
+
</Dialog.Root>
262
);
263
}
264
265
+
function AutoGrowTextarea({
266
+
value,
267
+
className,
268
+
onChange,
269
+
...props
270
+
}: React.DetailedHTMLProps<
271
+
React.TextareaHTMLAttributes<HTMLTextAreaElement>,
272
+
HTMLTextAreaElement
273
+
>) {
274
const ref = useRef<HTMLTextAreaElement>(null);
275
276
useEffect(() => {
···
289
{...props}
290
/>
291
);
292
+
}
+150
src/components/Import.tsx
+150
src/components/Import.tsx
···
···
1
+
import { AtUri } from "@atproto/api";
2
+
import { useNavigate, type UseNavigateResult } from "@tanstack/react-router";
3
+
import { useState } from "react";
4
+
5
+
/**
6
+
* Basically the best equivalent to Search that i can do
7
+
*/
8
+
export function Import() {
9
+
const [textInput, setTextInput] = useState<string | undefined>();
10
+
const navigate = useNavigate();
11
+
12
+
const handleEnter = () => {
13
+
if (!textInput) return;
14
+
handleImport({
15
+
text: textInput,
16
+
navigate,
17
+
});
18
+
};
19
+
20
+
return (
21
+
<div className="w-full relative">
22
+
<IconMaterialSymbolsSearch className="w-5 h-5 absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-500" />
23
+
24
+
<input
25
+
type="text"
26
+
placeholder="Import..."
27
+
value={textInput}
28
+
onChange={(e) => setTextInput(e.target.value)}
29
+
onKeyDown={(e) => {
30
+
if (e.key === "Enter") handleEnter();
31
+
}}
32
+
className="w-full h-12 pl-12 pr-4 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 box-border transition"
33
+
/>
34
+
</div>
35
+
);
36
+
}
37
+
38
+
function handleImport({
39
+
text,
40
+
navigate,
41
+
}: {
42
+
text: string;
43
+
navigate: UseNavigateResult<string>;
44
+
}) {
45
+
const trimmed = text.trim();
46
+
// parse text
47
+
/**
48
+
* text might be
49
+
* 1. bsky dot app url (reddwarf link segments might be uri encoded,)
50
+
* 2. aturi
51
+
* 3. plain handle
52
+
* 4. plain did
53
+
*/
54
+
55
+
// 1. Check if it’s a URL
56
+
try {
57
+
const url = new URL(text);
58
+
const knownHosts = [
59
+
"bsky.app",
60
+
"social.daniela.lol",
61
+
"deer.social",
62
+
"reddwarf.whey.party",
63
+
"reddwarf.app",
64
+
"main.bsky.dev",
65
+
"catsky.social",
66
+
"blacksky.community",
67
+
"red-dwarf-social-app.whey.party",
68
+
"zeppelin.social",
69
+
];
70
+
if (knownHosts.includes(url.hostname)) {
71
+
// parse path to get URI or handle
72
+
const path = decodeURIComponent(url.pathname.slice(1)); // remove leading /
73
+
console.log("BSky URL path:", path);
74
+
navigate({
75
+
to: `/${path}`,
76
+
});
77
+
return;
78
+
}
79
+
} catch {
80
+
// not a URL, continue
81
+
}
82
+
83
+
// 2. Check if text looks like an at-uri
84
+
try {
85
+
if (text.startsWith("at://")) {
86
+
console.log("AT URI detected:", text);
87
+
const aturi = new AtUri(text);
88
+
switch (aturi.collection) {
89
+
case "app.bsky.feed.post": {
90
+
navigate({
91
+
to: "/profile/$did/post/$rkey",
92
+
params: {
93
+
did: aturi.host,
94
+
rkey: aturi.rkey,
95
+
},
96
+
});
97
+
return;
98
+
}
99
+
case "app.bsky.actor.profile": {
100
+
navigate({
101
+
to: "/profile/$did",
102
+
params: {
103
+
did: aturi.host,
104
+
},
105
+
});
106
+
return;
107
+
}
108
+
// todo add more handlers as more routes are added. like feeds, lists, etc etc thanks!
109
+
default: {
110
+
// continue
111
+
}
112
+
}
113
+
}
114
+
} catch {
115
+
// continue
116
+
}
117
+
118
+
// 3. Plain handle (starts with @)
119
+
try {
120
+
if (text.startsWith("@")) {
121
+
const handle = text.slice(1);
122
+
console.log("Handle detected:", handle);
123
+
navigate({ to: "/profile/$did", params: { did: handle } });
124
+
return;
125
+
}
126
+
} catch {
127
+
// continue
128
+
}
129
+
130
+
// 4. Plain DID (starts with did:)
131
+
try {
132
+
if (text.startsWith("did:")) {
133
+
console.log("did detected:", text);
134
+
navigate({ to: "/profile/$did", params: { did: text } });
135
+
return;
136
+
}
137
+
} catch {
138
+
// continue
139
+
}
140
+
141
+
// if all else fails
142
+
143
+
// try {
144
+
// // probably a user?
145
+
// navigate({ to: "/profile/$did", params: { did: text } });
146
+
// return;
147
+
// } catch {
148
+
// // continue
149
+
// }
150
+
}
+32
-6
src/components/InfiniteCustomFeed.tsx
+32
-6
src/components/InfiniteCustomFeed.tsx
···
1
import * as React from "react";
2
3
//import { useInView } from "react-intersection-observer";
···
37
isFetchingNextPage,
38
refetch,
39
isRefetching,
40
} = useInfiniteQueryFeedSkeleton({
41
feedUri: feedUri,
42
agent: agent ?? undefined,
···
44
pdsUrl: pdsUrl,
45
feedServiceDid: feedServiceDid,
46
});
47
48
const handleRefresh = () => {
49
refetch();
50
};
51
52
//const { ref, inView } = useInView();
53
54
// React.useEffect(() => {
···
67
);
68
}
69
70
-
const allPosts =
71
-
data?.pages.flatMap((page) => {
72
-
if (page) return page.feed;
73
-
}) ?? [];
74
75
if (!allPosts || typeof allPosts !== "object" || allPosts.length === 0) {
76
return (
···
116
className="sticky lg:bottom-4 bottom-22 ml-4 w-[42px] h-[42px] z-10 bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 text-gray-50 p-[9px] rounded-full shadow-lg transition-transform duration-200 ease-in-out hover:scale-110 disabled:dark:bg-gray-900 disabled:bg-gray-100 disabled:cursor-not-allowed"
117
aria-label="Refresh feed"
118
>
119
-
<RefreshIcon className={`h-6 w-6 text-gray-600 dark:text-gray-400 ${isRefetching && "animate-spin"}`} />
120
</button>
121
</>
122
);
···
139
d="M20 11A8.1 8.1 0 0 0 4.5 9M4 5v4h4m-4 4a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"
140
></path>
141
</svg>
142
-
);
···
1
+
import { useQueryClient } from "@tanstack/react-query";
2
import * as React from "react";
3
4
//import { useInView } from "react-intersection-observer";
···
38
isFetchingNextPage,
39
refetch,
40
isRefetching,
41
+
queryKey,
42
} = useInfiniteQueryFeedSkeleton({
43
feedUri: feedUri,
44
agent: agent ?? undefined,
···
46
pdsUrl: pdsUrl,
47
feedServiceDid: feedServiceDid,
48
});
49
+
const queryClient = useQueryClient();
50
+
51
52
const handleRefresh = () => {
53
+
queryClient.removeQueries({queryKey: queryKey});
54
+
//queryClient.invalidateQueries(["infinite-feed", feedUri] as const);
55
refetch();
56
};
57
58
+
const allPosts = React.useMemo(() => {
59
+
const flattenedPosts = data?.pages.flatMap((page) => page?.feed) ?? [];
60
+
61
+
const seenUris = new Set<string>();
62
+
63
+
return flattenedPosts.filter((item) => {
64
+
if (!item?.post) return false;
65
+
66
+
if (seenUris.has(item.post)) {
67
+
return false;
68
+
}
69
+
70
+
seenUris.add(item.post);
71
+
72
+
return true;
73
+
});
74
+
}, [data]);
75
+
76
//const { ref, inView } = useInView();
77
78
// React.useEffect(() => {
···
91
);
92
}
93
94
+
// const allPosts =
95
+
// data?.pages.flatMap((page) => {
96
+
// if (page) return page.feed;
97
+
// }) ?? [];
98
99
if (!allPosts || typeof allPosts !== "object" || allPosts.length === 0) {
100
return (
···
140
className="sticky lg:bottom-4 bottom-22 ml-4 w-[42px] h-[42px] z-10 bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 text-gray-50 p-[9px] rounded-full shadow-lg transition-transform duration-200 ease-in-out hover:scale-110 disabled:dark:bg-gray-900 disabled:bg-gray-100 disabled:cursor-not-allowed"
141
aria-label="Refresh feed"
142
>
143
+
<RefreshIcon
144
+
className={`h-6 w-6 text-gray-600 dark:text-gray-400 ${isRefetching && "animate-spin"}`}
145
+
/>
146
</button>
147
</>
148
);
···
165
d="M20 11A8.1 8.1 0 0 0 4.5 9M4 5v4h4m-4 4a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"
166
></path>
167
</svg>
168
+
);
+6
-7
src/components/Login.tsx
+6
-7
src/components/Login.tsx
···
24
className={
25
compact
26
? "flex items-center justify-center p-1"
27
-
: "p-6 bg-gray-100 dark:bg-gray-900 rounded-xl shadow border border-gray-200 dark:border-gray-800 mt-6 mx-4 flex justify-center items-center h-[280px]"
28
}
29
>
30
<span
···
43
// Large view
44
if (!compact) {
45
return (
46
-
<div className="p-4 bg-gray-100 dark:bg-gray-900 rounded-xl border-gray-200 dark:border-gray-800 mt-6 mx-4">
47
<div className="flex flex-col items-center justify-center text-center">
48
<p className="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-100">
49
You are logged in!
···
77
if (!compact) {
78
// Large view renders the form directly in the card
79
return (
80
-
<div className="p-4 bg-gray-100 dark:bg-gray-900 rounded-xl border-gray-200 dark:border-gray-800 mt-6 mx-4">
81
<UnifiedLoginForm />
82
</div>
83
);
···
311
312
// --- Profile Component (now supports a `large` prop for styling) ---
313
export const ProfileThing = ({
314
-
agent: _unused,
315
large = false,
316
}: {
317
-
agent?: Agent | null;
318
large?: boolean;
319
}) => {
320
-
const { agent } = useAuth();
321
-
const did = ((agent as AtpAgent).session?.did ??
322
(agent as AtpAgent)?.assertDid ??
323
agent?.did) as string | undefined;
324
const { data: identity } = useQueryIdentity(did);
···
24
className={
25
compact
26
? "flex items-center justify-center p-1"
27
+
: "p-6 bg-gray-100 dark:bg-gray-900 rounded-xl shadow border border-gray-200 dark:border-gray-800 mt-4 mx-4 flex justify-center items-center h-[280px]"
28
}
29
>
30
<span
···
43
// Large view
44
if (!compact) {
45
return (
46
+
<div className="p-4 bg-gray-100 dark:bg-gray-900 rounded-xl border-gray-200 dark:border-gray-800 mt-4 mx-4">
47
<div className="flex flex-col items-center justify-center text-center">
48
<p className="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-100">
49
You are logged in!
···
77
if (!compact) {
78
// Large view renders the form directly in the card
79
return (
80
+
<div className="p-4 bg-gray-100 dark:bg-gray-900 rounded-xl border-gray-200 dark:border-gray-800 mt-4 mx-4">
81
<UnifiedLoginForm />
82
</div>
83
);
···
311
312
// --- Profile Component (now supports a `large` prop for styling) ---
313
export const ProfileThing = ({
314
+
agent,
315
large = false,
316
}: {
317
+
agent: Agent | null;
318
large?: boolean;
319
}) => {
320
+
const did = ((agent as AtpAgent)?.session?.did ??
321
(agent as AtpAgent)?.assertDid ??
322
agent?.did) as string | undefined;
323
const { data: identity } = useQueryIdentity(did);
+138
-60
src/components/UniversalPostRenderer.tsx
+138
-60
src/components/UniversalPostRenderer.tsx
···
2
import DOMPurify from "dompurify";
3
import { useAtom } from "jotai";
4
import { DropdownMenu } from "radix-ui";
5
import * as React from "react";
6
import { type SVGProps } from "react";
7
8
-
import { composerAtom, constellationURLAtom, imgCDNAtom, likedPostsAtom } from "~/utils/atoms";
9
import { useHydratedEmbed } from "~/utils/useHydrated";
10
import {
11
useQueryConstellation,
···
150
maxReplies,
151
isQuote,
152
}: UniversalPostRendererATURILoaderProps) {
153
// /*mass comment*/ console.log("atUri", atUri);
154
//const { get, set } = usePersistentStore();
155
//const [record, setRecord] = React.useState<any>(null);
···
401
// path: ".reply.parent.uri",
402
// });
403
404
-
const [constellationurl] = useAtom(constellationURLAtom)
405
406
const infinitequeryresults = useInfiniteQuery({
407
...yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks(
···
425
426
// auto-fetch all pages
427
useEffect(() => {
428
-
if (!maxReplies || isQuote) return;
429
if (
430
infinitequeryresults.hasNextPage &&
431
!infinitequeryresults.isFetchingNextPage
···
433
console.log("Fetching the next page...");
434
infinitequeryresults.fetchNextPage();
435
}
436
-
}, [infinitequeryresults]);
437
438
const replyAturis = repliesData
439
? repliesData.pages.flatMap((page) =>
···
510
? true
511
: maxReplies && !oldestOpsReplyElseNewestNonOpsReply
512
? false
513
-
: bottomReplyLine
514
}
515
topReplyLine={topReplyLine}
516
//bottomBorder={maxReplies&&oldestOpsReplyElseNewestNonOpsReply ? false : bottomBorder}
···
532
maxReplies={maxReplies}
533
isQuote={isQuote}
534
/>
535
{!isQuote && oldestOpsReplyElseNewestNonOpsReply && (
536
<>
537
{/* <span>hello {maxReplies}</span> */}
···
556
maxReplies && maxReplies > 0 ? maxReplies - 1 : undefined
557
}
558
/>
559
-
{maxReplies && maxReplies - 1 === 0 && replies && replies > 0 && (
560
-
<MoreReplies atUri={oldestOpsReplyElseNewestNonOpsReply} />
561
-
)}
562
</>
563
)}
564
</>
···
723
error: embedError,
724
} = useHydratedEmbed(postRecord?.value?.embed, resolved?.did);
725
726
-
const [imgcdn] = useAtom(imgCDNAtom)
727
728
const parsedaturi = new AtUri(aturi); //parseAtUri(aturi);
729
730
const fakepost = React.useMemo<AppBskyFeedDefs.PostView>(
731
() => ({
732
$type: "app.bsky.feed.defs#postView",
733
uri: aturi,
734
cid: postRecord?.cid || "",
735
-
author: {
736
-
did: resolved?.did || "",
737
-
handle: resolved?.handle || "",
738
-
displayName: profileRecord?.value?.displayName || "",
739
-
avatar: getAvatarUrl(profileRecord, resolved?.did, imgcdn) || "",
740
-
viewer: undefined,
741
-
labels: profileRecord?.labels || undefined,
742
-
verification: undefined,
743
-
},
744
record: postRecord?.value || {},
745
embed: hydratedEmbed ?? undefined,
746
replyCount: repliesCount ?? 0,
···
757
postRecord?.cid,
758
postRecord?.value,
759
postRecord?.labels,
760
-
resolved?.did,
761
-
resolved?.handle,
762
-
profileRecord,
763
hydratedEmbed,
764
repliesCount,
765
repostsCount,
766
likesCount,
767
-
imgcdn
768
]
769
);
770
···
837
}
838
}}
839
post={fakepost}
840
salt={aturi}
841
bottomReplyLine={bottomReplyLine}
842
topReplyLine={topReplyLine}
···
1141
//import Masonry from "@mui/lab/Masonry";
1142
import {
1143
type $Typed,
1144
AppBskyEmbedDefs,
1145
AppBskyEmbedExternal,
1146
AppBskyEmbedImages,
···
1170
1171
import defaultpfp from "~/../public/favicon.png";
1172
import { useAuth } from "~/providers/UnifiedAuthProvider";
1173
import type { LightboxProps } from "~/routes/profile.$did/post.$rkey.image.$i";
1174
// import type { OutputSchema } from "@atproto/api/dist/client/types/app/bsky/feed/getFeed";
1175
// import type {
···
1278
1279
function UniversalPostRenderer({
1280
post,
1281
//setMainItem,
1282
//isMainItem,
1283
onPostClick,
···
1302
maxReplies,
1303
}: {
1304
post: PostView;
1305
// optional for now because i havent ported every use to this yet
1306
// setMainItem?: React.Dispatch<
1307
// React.SetStateAction<AppBskyFeedDefs.FeedViewPost>
···
1485
className="bg-gray-500 dark:bg-gray-400"
1486
/>
1487
)}
1488
-
<div
1489
-
style={{
1490
-
position: "absolute",
1491
-
//top: isRepost ? "calc(16px + 1rem)" : 16,
1492
-
//left: 16,
1493
-
zIndex: 1,
1494
-
top: isRepost
1495
-
? "calc(16px + 1rem)"
1496
-
: isQuote
1497
-
? 12
1498
-
: topReplyLine
1499
-
? 8
1500
-
: 16,
1501
-
left: isQuote ? 12 : 16,
1502
-
}}
1503
-
onClick={onProfileClick}
1504
-
>
1505
-
<img
1506
-
src={post.author.avatar || defaultpfp}
1507
-
alt="avatar"
1508
-
// transition={{
1509
-
// type: "spring",
1510
-
// stiffness: 260,
1511
-
// damping: 20,
1512
-
// }}
1513
-
style={{
1514
-
borderRadius: "50%",
1515
-
marginRight: 12,
1516
-
objectFit: "cover",
1517
-
//background: theme.border,
1518
-
//border: `1px solid ${theme.border}`,
1519
-
width: isQuote ? 16 : 42,
1520
-
height: isQuote ? 16 : 42,
1521
-
}}
1522
-
className="border border-gray-300 dark:border-gray-800 bg-gray-300 dark:bg-gray-600"
1523
-
/>
1524
-
</div>
1525
<div style={{ display: "flex", alignItems: "flex-start", zIndex: 2 }}>
1526
<div
1527
style={{
···
2577
return { start, end, feature: f.features[0] };
2578
});
2579
}
2580
-
function renderTextWithFacets({
2581
text,
2582
facets,
2583
navigate,
···
2
import DOMPurify from "dompurify";
3
import { useAtom } from "jotai";
4
import { DropdownMenu } from "radix-ui";
5
+
import { HoverCard } from "radix-ui";
6
import * as React from "react";
7
import { type SVGProps } from "react";
8
9
+
import {
10
+
composerAtom,
11
+
constellationURLAtom,
12
+
imgCDNAtom,
13
+
likedPostsAtom,
14
+
} from "~/utils/atoms";
15
import { useHydratedEmbed } from "~/utils/useHydrated";
16
import {
17
useQueryConstellation,
···
156
maxReplies,
157
isQuote,
158
}: UniversalPostRendererATURILoaderProps) {
159
+
// todo remove this once tree rendering is implemented, use a prop like isTree
160
+
const TEMPLINEAR = true;
161
// /*mass comment*/ console.log("atUri", atUri);
162
//const { get, set } = usePersistentStore();
163
//const [record, setRecord] = React.useState<any>(null);
···
409
// path: ".reply.parent.uri",
410
// });
411
412
+
const [constellationurl] = useAtom(constellationURLAtom);
413
414
const infinitequeryresults = useInfiniteQuery({
415
...yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks(
···
433
434
// auto-fetch all pages
435
useEffect(() => {
436
+
if (!maxReplies || isQuote || TEMPLINEAR) return;
437
if (
438
infinitequeryresults.hasNextPage &&
439
!infinitequeryresults.isFetchingNextPage
···
441
console.log("Fetching the next page...");
442
infinitequeryresults.fetchNextPage();
443
}
444
+
}, [TEMPLINEAR, infinitequeryresults, isQuote, maxReplies]);
445
446
const replyAturis = repliesData
447
? repliesData.pages.flatMap((page) =>
···
518
? true
519
: maxReplies && !oldestOpsReplyElseNewestNonOpsReply
520
? false
521
+
: (maxReplies === 0 && (!replies || (!!replies && replies === 0))) ? false : bottomReplyLine
522
}
523
topReplyLine={topReplyLine}
524
//bottomBorder={maxReplies&&oldestOpsReplyElseNewestNonOpsReply ? false : bottomBorder}
···
540
maxReplies={maxReplies}
541
isQuote={isQuote}
542
/>
543
+
<>
544
+
{(maxReplies && maxReplies === 0 && replies && replies > 0) ? (
545
+
<>
546
+
{/* <div>hello</div> */}
547
+
<MoreReplies atUri={atUri} />
548
+
</>
549
+
) : (<></>)}
550
+
</>
551
{!isQuote && oldestOpsReplyElseNewestNonOpsReply && (
552
<>
553
{/* <span>hello {maxReplies}</span> */}
···
572
maxReplies && maxReplies > 0 ? maxReplies - 1 : undefined
573
}
574
/>
575
</>
576
)}
577
</>
···
736
error: embedError,
737
} = useHydratedEmbed(postRecord?.value?.embed, resolved?.did);
738
739
+
const [imgcdn] = useAtom(imgCDNAtom);
740
741
const parsedaturi = new AtUri(aturi); //parseAtUri(aturi);
742
743
+
const fakeprofileviewbasic = React.useMemo<AppBskyActorDefs.ProfileViewBasic>(
744
+
() => ({
745
+
did: resolved?.did || "",
746
+
handle: resolved?.handle || "",
747
+
displayName: profileRecord?.value?.displayName || "",
748
+
avatar: getAvatarUrl(profileRecord, resolved?.did, imgcdn) || "",
749
+
viewer: undefined,
750
+
labels: profileRecord?.labels || undefined,
751
+
verification: undefined,
752
+
}),
753
+
[imgcdn, profileRecord, resolved?.did, resolved?.handle]
754
+
);
755
+
756
+
const fakeprofileviewdetailed =
757
+
React.useMemo<AppBskyActorDefs.ProfileViewDetailed>(
758
+
() => ({
759
+
...fakeprofileviewbasic,
760
+
$type: "app.bsky.actor.defs#profileViewDetailed",
761
+
description: profileRecord?.value?.description || undefined,
762
+
}),
763
+
[fakeprofileviewbasic, profileRecord?.value?.description]
764
+
);
765
+
766
const fakepost = React.useMemo<AppBskyFeedDefs.PostView>(
767
() => ({
768
$type: "app.bsky.feed.defs#postView",
769
uri: aturi,
770
cid: postRecord?.cid || "",
771
+
author: fakeprofileviewbasic,
772
record: postRecord?.value || {},
773
embed: hydratedEmbed ?? undefined,
774
replyCount: repliesCount ?? 0,
···
785
postRecord?.cid,
786
postRecord?.value,
787
postRecord?.labels,
788
+
fakeprofileviewbasic,
789
hydratedEmbed,
790
repliesCount,
791
repostsCount,
792
likesCount,
793
]
794
);
795
···
862
}
863
}}
864
post={fakepost}
865
+
uprrrsauthor={fakeprofileviewdetailed}
866
salt={aturi}
867
bottomReplyLine={bottomReplyLine}
868
topReplyLine={topReplyLine}
···
1167
//import Masonry from "@mui/lab/Masonry";
1168
import {
1169
type $Typed,
1170
+
AppBskyActorDefs,
1171
AppBskyEmbedDefs,
1172
AppBskyEmbedExternal,
1173
AppBskyEmbedImages,
···
1197
1198
import defaultpfp from "~/../public/favicon.png";
1199
import { useAuth } from "~/providers/UnifiedAuthProvider";
1200
+
import { FollowButton, Mutual } from "~/routes/profile.$did";
1201
import type { LightboxProps } from "~/routes/profile.$did/post.$rkey.image.$i";
1202
// import type { OutputSchema } from "@atproto/api/dist/client/types/app/bsky/feed/getFeed";
1203
// import type {
···
1306
1307
function UniversalPostRenderer({
1308
post,
1309
+
uprrrsauthor,
1310
//setMainItem,
1311
//isMainItem,
1312
onPostClick,
···
1331
maxReplies,
1332
}: {
1333
post: PostView;
1334
+
uprrrsauthor?: AppBskyActorDefs.ProfileViewDetailed;
1335
// optional for now because i havent ported every use to this yet
1336
// setMainItem?: React.Dispatch<
1337
// React.SetStateAction<AppBskyFeedDefs.FeedViewPost>
···
1515
className="bg-gray-500 dark:bg-gray-400"
1516
/>
1517
)}
1518
+
<HoverCard.Root>
1519
+
<HoverCard.Trigger asChild>
1520
+
<div
1521
+
className={`absolute`}
1522
+
style={{
1523
+
top: isRepost
1524
+
? "calc(16px + 1rem)"
1525
+
: isQuote
1526
+
? 12
1527
+
: topReplyLine
1528
+
? 8
1529
+
: 16,
1530
+
left: isQuote ? 12 : 16,
1531
+
}}
1532
+
onClick={onProfileClick}
1533
+
>
1534
+
<img
1535
+
src={post.author.avatar || defaultpfp}
1536
+
alt="avatar"
1537
+
className={`rounded-full object-cover border border-gray-300 dark:border-gray-800 bg-gray-300 dark:bg-gray-600`}
1538
+
style={{
1539
+
width: isQuote ? 16 : 42,
1540
+
height: isQuote ? 16 : 42,
1541
+
}}
1542
+
/>
1543
+
</div>
1544
+
</HoverCard.Trigger>
1545
+
<HoverCard.Portal>
1546
+
<HoverCard.Content
1547
+
className="rounded-md p-4 w-72 bg-gray-50 dark:bg-gray-900 shadow-lg border border-gray-300 dark:border-gray-800 animate-slide-fade z-50"
1548
+
side={"bottom"}
1549
+
sideOffset={5}
1550
+
onClick={onProfileClick}
1551
+
>
1552
+
<div className="flex flex-col gap-2">
1553
+
<div className="flex flex-row">
1554
+
<img
1555
+
src={post.author.avatar || defaultpfp}
1556
+
alt="avatar"
1557
+
className="rounded-full w-[58px] h-[58px] object-cover border border-gray-300 dark:border-gray-800 bg-gray-300 dark:bg-gray-600"
1558
+
/>
1559
+
<div className=" flex-1 flex flex-row align-middle justify-end">
1560
+
<FollowButton targetdidorhandle={post.author.did} />
1561
+
</div>
1562
+
</div>
1563
+
<div className="flex flex-col gap-3">
1564
+
<div>
1565
+
<div className="text-gray-900 dark:text-gray-100 font-medium text-md">
1566
+
{post.author.displayName || post.author.handle}{" "}
1567
+
</div>
1568
+
<div className="text-gray-500 dark:text-gray-400 text-md flex flex-row gap-1">
1569
+
<Mutual targetdidorhandle={post.author.did} />@{post.author.handle}{" "}
1570
+
</div>
1571
+
</div>
1572
+
{uprrrsauthor?.description && (
1573
+
<div className="text-gray-700 dark:text-gray-300 text-sm text-left break-words line-clamp-3">
1574
+
{uprrrsauthor.description}
1575
+
</div>
1576
+
)}
1577
+
{/* <div className="flex gap-4">
1578
+
<div className="flex gap-1">
1579
+
<div className="font-medium text-gray-900 dark:text-gray-100">
1580
+
0
1581
+
</div>
1582
+
<div className="text-gray-500 dark:text-gray-400">
1583
+
Following
1584
+
</div>
1585
+
</div>
1586
+
<div className="flex gap-1">
1587
+
<div className="font-medium text-gray-900 dark:text-gray-100">
1588
+
2,900
1589
+
</div>
1590
+
<div className="text-gray-500 dark:text-gray-400">
1591
+
Followers
1592
+
</div>
1593
+
</div>
1594
+
</div> */}
1595
+
</div>
1596
+
</div>
1597
+
1598
+
{/* <HoverCard.Arrow className="fill-gray-50 dark:fill-gray-900" /> */}
1599
+
</HoverCard.Content>
1600
+
</HoverCard.Portal>
1601
+
</HoverCard.Root>
1602
+
1603
<div style={{ display: "flex", alignItems: "flex-start", zIndex: 2 }}>
1604
<div
1605
style={{
···
2655
return { start, end, feature: f.features[0] };
2656
});
2657
}
2658
+
export function renderTextWithFacets({
2659
text,
2660
facets,
2661
navigate,
+28
-26
src/routes/__root.tsx
+28
-26
src/routes/__root.tsx
···
18
19
import { Composer } from "~/components/Composer";
20
import { DefaultCatchBoundary } from "~/components/DefaultCatchBoundary";
21
import Login from "~/components/Login";
22
import { NotFound } from "~/components/NotFound";
23
import { FluentEmojiHighContrastGlowingStar } from "~/components/Star";
···
154
/>
155
156
<MaterialNavItem
157
InactiveIcon={
158
<IconMaterialSymbolsNotificationsOutline className="w-6 h-6" />
159
}
···
180
})
181
}
182
text="Feeds"
183
-
/>
184
-
<MaterialNavItem
185
-
InactiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />}
186
-
ActiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />}
187
-
active={locationEnum === "search"}
188
-
onClickCallbback={() =>
189
-
navigate({
190
-
to: "/search",
191
-
//params: { did: agent.assertDid },
192
-
})
193
-
}
194
-
text="Search"
195
/>
196
<MaterialNavItem
197
InactiveIcon={
···
389
390
<MaterialNavItem
391
small
392
InactiveIcon={
393
<IconMaterialSymbolsNotificationsOutline className="w-6 h-6" />
394
}
···
419
/>
420
<MaterialNavItem
421
small
422
-
InactiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />}
423
-
ActiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />}
424
-
active={locationEnum === "search"}
425
-
onClickCallbback={() =>
426
-
navigate({
427
-
to: "/search",
428
-
//params: { did: agent.assertDid },
429
-
})
430
-
}
431
-
text="Search"
432
-
/>
433
-
<MaterialNavItem
434
-
small
435
InactiveIcon={
436
<IconMaterialSymbolsAccountCircleOutline className="w-6 h-6" />
437
}
···
498
</main>
499
500
<aside className="hidden lg:flex h-screen w-[250px] sticky top-0 self-start flex-col">
501
<Login />
502
503
<div className="flex-1"></div>
···
551
//params: { did: agent.assertDid },
552
})
553
}
554
-
text="Search"
555
/>
556
{/* <Link
557
to="/search"
···
18
19
import { Composer } from "~/components/Composer";
20
import { DefaultCatchBoundary } from "~/components/DefaultCatchBoundary";
21
+
import { Import } from "~/components/Import";
22
import Login from "~/components/Login";
23
import { NotFound } from "~/components/NotFound";
24
import { FluentEmojiHighContrastGlowingStar } from "~/components/Star";
···
155
/>
156
157
<MaterialNavItem
158
+
InactiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />}
159
+
ActiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />}
160
+
active={locationEnum === "search"}
161
+
onClickCallbback={() =>
162
+
navigate({
163
+
to: "/search",
164
+
//params: { did: agent.assertDid },
165
+
})
166
+
}
167
+
text="Explore"
168
+
/>
169
+
<MaterialNavItem
170
InactiveIcon={
171
<IconMaterialSymbolsNotificationsOutline className="w-6 h-6" />
172
}
···
193
})
194
}
195
text="Feeds"
196
/>
197
<MaterialNavItem
198
InactiveIcon={
···
390
391
<MaterialNavItem
392
small
393
+
InactiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />}
394
+
ActiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />}
395
+
active={locationEnum === "search"}
396
+
onClickCallbback={() =>
397
+
navigate({
398
+
to: "/search",
399
+
//params: { did: agent.assertDid },
400
+
})
401
+
}
402
+
text="Explore"
403
+
/>
404
+
<MaterialNavItem
405
+
small
406
InactiveIcon={
407
<IconMaterialSymbolsNotificationsOutline className="w-6 h-6" />
408
}
···
433
/>
434
<MaterialNavItem
435
small
436
InactiveIcon={
437
<IconMaterialSymbolsAccountCircleOutline className="w-6 h-6" />
438
}
···
499
</main>
500
501
<aside className="hidden lg:flex h-screen w-[250px] sticky top-0 self-start flex-col">
502
+
<div className="px-4 pt-4"><Import /></div>
503
<Login />
504
505
<div className="flex-1"></div>
···
553
//params: { did: agent.assertDid },
554
})
555
}
556
+
text="Explore"
557
/>
558
{/* <Link
559
to="/search"
+1
src/routes/index.tsx
+1
src/routes/index.tsx
+191
-57
src/routes/profile.$did/index.tsx
+191
-57
src/routes/profile.$did/index.tsx
···
1
import { useQueryClient } from "@tanstack/react-query";
2
-
import { createFileRoute } from "@tanstack/react-router";
3
import { useAtom } from "jotai";
4
-
import React from "react";
5
6
import { Header } from "~/components/Header";
7
-
import { UniversalPostRendererATURILoader } from "~/components/UniversalPostRenderer";
8
import { useAuth } from "~/providers/UnifiedAuthProvider";
9
-
import { imgCDNAtom } from "~/utils/atoms";
10
-
import { toggleFollow, useGetFollowState } from "~/utils/followState";
11
import {
12
-
useInfiniteQueryAuthorFeed,
13
useQueryIdentity,
14
useQueryProfile,
15
} from "~/utils/useQuery";
···
21
function ProfileComponent() {
22
// booo bad this is not always the did it might be a handle, use identity.did instead
23
const { did } = Route.useParams();
24
const queryClient = useQueryClient();
25
-
const { agent } = useAuth();
26
const {
27
data: identity,
28
isLoading: isIdentityLoading,
29
error: identityError,
30
} = useQueryIdentity(did);
31
32
-
const followRecords = useGetFollowState({
33
-
target: identity?.did || did,
34
-
user: agent?.did,
35
-
});
36
-
37
const resolvedDid = did.startsWith("did:") ? did : identity?.did;
38
const resolvedHandle = did.startsWith("did:") ? identity?.handle : did;
39
-
const pdsUrl = identity?.pds;
40
41
const profileUri = resolvedDid
42
? `at://${resolvedDid}/app.bsky.actor.profile/self`
···
44
const { data: profileRecord } = useQueryProfile(profileUri);
45
const profile = profileRecord?.value;
46
47
const {
48
data: postsData,
49
fetchNextPage,
50
hasNextPage,
51
isFetchingNextPage,
52
isLoading: arePostsLoading,
53
-
} = useInfiniteQueryAuthorFeed(resolvedDid, pdsUrl);
54
55
React.useEffect(() => {
56
if (postsData) {
57
postsData.pages.forEach((page) => {
58
-
page.records.forEach((record) => {
59
if (!queryClient.getQueryData(["post", record.uri])) {
60
queryClient.setQueryData(["post", record.uri], record);
61
}
···
65
}, [postsData, queryClient]);
66
67
const posts = React.useMemo(
68
-
() => postsData?.pages.flatMap((page) => page.records) ?? [],
69
[postsData]
70
);
71
-
72
-
const [imgcdn] = useAtom(imgCDNAtom)
73
74
function getAvatarUrl(p: typeof profile) {
75
const link = p?.avatar?.ref?.["$link"];
···
166
also delay the backfill to be on demand because it would be pretty intense
167
also save it persistently
168
*/}
169
-
{identity?.did !== agent?.did ? (
170
-
<>
171
-
{!(followRecords?.length && followRecords?.length > 0) ? (
172
-
<button
173
-
onClick={() =>
174
-
toggleFollow({
175
-
agent: agent || undefined,
176
-
targetDid: identity?.did,
177
-
followRecords: followRecords,
178
-
queryClient: queryClient,
179
-
})
180
-
}
181
-
className="rounded-full dark:bg-gray-600 bg-gray-300 px-3 py-2 text-[14px]"
182
-
>
183
-
Follow
184
-
</button>
185
-
) : (
186
-
<button
187
-
onClick={() =>
188
-
toggleFollow({
189
-
agent: agent || undefined,
190
-
targetDid: identity?.did,
191
-
followRecords: followRecords,
192
-
queryClient: queryClient,
193
-
})
194
-
}
195
-
className="rounded-full dark:bg-gray-600 bg-gray-300 px-3 py-2 text-[14px]"
196
-
>
197
-
Unfollow
198
-
</button>
199
-
)}
200
-
</>
201
-
) : (
202
-
<button className="rounded-full dark:bg-gray-600 bg-gray-300 px-3 py-2 text-[14px]">
203
-
Edit Profile
204
-
</button>
205
-
)}
206
<button className="rounded-full dark:bg-gray-600 bg-gray-300 px-3 py-2 text-[14px]">
207
... {/* todo: icon */}
208
</button>
···
211
{/* Info Card */}
212
<div className="mt-16 pb-2 px-4 text-gray-900 dark:text-gray-100">
213
<div className="font-bold text-2xl">{displayName}</div>
214
-
<div className="text-gray-500 dark:text-gray-400 text-base mb-3">
215
{handle}
216
</div>
217
{description && (
218
<div className="text-base leading-relaxed text-gray-800 dark:text-gray-300 mb-5 whitespace-pre-wrap break-words text-[15px]">
219
-
{description}
220
</div>
221
)}
222
</div>
···
259
</>
260
);
261
}
···
1
+
import { RichText } from "@atproto/api";
2
import { useQueryClient } from "@tanstack/react-query";
3
+
import { createFileRoute, useNavigate } from "@tanstack/react-router";
4
import { useAtom } from "jotai";
5
+
import React, { type ReactNode, useEffect, useState } from "react";
6
7
import { Header } from "~/components/Header";
8
+
import {
9
+
renderTextWithFacets,
10
+
UniversalPostRendererATURILoader,
11
+
} from "~/components/UniversalPostRenderer";
12
import { useAuth } from "~/providers/UnifiedAuthProvider";
13
+
import { aturiListServiceAtom, imgCDNAtom } from "~/utils/atoms";
14
+
import {
15
+
toggleFollow,
16
+
useGetFollowState,
17
+
useGetOneToOneState,
18
+
} from "~/utils/followState";
19
import {
20
+
useInfiniteQueryAturiList,
21
useQueryIdentity,
22
useQueryProfile,
23
} from "~/utils/useQuery";
···
29
function ProfileComponent() {
30
// booo bad this is not always the did it might be a handle, use identity.did instead
31
const { did } = Route.useParams();
32
+
//const navigate = useNavigate();
33
const queryClient = useQueryClient();
34
const {
35
data: identity,
36
isLoading: isIdentityLoading,
37
error: identityError,
38
} = useQueryIdentity(did);
39
40
const resolvedDid = did.startsWith("did:") ? did : identity?.did;
41
const resolvedHandle = did.startsWith("did:") ? identity?.handle : did;
42
+
//const pdsUrl = identity?.pds;
43
44
const profileUri = resolvedDid
45
? `at://${resolvedDid}/app.bsky.actor.profile/self`
···
47
const { data: profileRecord } = useQueryProfile(profileUri);
48
const profile = profileRecord?.value;
49
50
+
const [aturilistservice] = useAtom(aturiListServiceAtom);
51
+
52
const {
53
data: postsData,
54
fetchNextPage,
55
hasNextPage,
56
isFetchingNextPage,
57
isLoading: arePostsLoading,
58
+
} = useInfiniteQueryAturiList({
59
+
aturilistservice: aturilistservice,
60
+
did: resolvedDid,
61
+
collection: "app.bsky.feed.post",
62
+
reverse: true
63
+
});
64
65
React.useEffect(() => {
66
if (postsData) {
67
postsData.pages.forEach((page) => {
68
+
page.forEach((record) => {
69
if (!queryClient.getQueryData(["post", record.uri])) {
70
queryClient.setQueryData(["post", record.uri], record);
71
}
···
75
}, [postsData, queryClient]);
76
77
const posts = React.useMemo(
78
+
() => postsData?.pages.flatMap((page) => page) ?? [],
79
[postsData]
80
);
81
+
82
+
const [imgcdn] = useAtom(imgCDNAtom);
83
84
function getAvatarUrl(p: typeof profile) {
85
const link = p?.avatar?.ref?.["$link"];
···
176
also delay the backfill to be on demand because it would be pretty intense
177
also save it persistently
178
*/}
179
+
<FollowButton targetdidorhandle={did} />
180
<button className="rounded-full dark:bg-gray-600 bg-gray-300 px-3 py-2 text-[14px]">
181
... {/* todo: icon */}
182
</button>
···
185
{/* Info Card */}
186
<div className="mt-16 pb-2 px-4 text-gray-900 dark:text-gray-100">
187
<div className="font-bold text-2xl">{displayName}</div>
188
+
<div className="text-gray-500 dark:text-gray-400 text-base mb-3 flex flex-row gap-1">
189
+
<Mutual targetdidorhandle={did} />
190
{handle}
191
</div>
192
{description && (
193
<div className="text-base leading-relaxed text-gray-800 dark:text-gray-300 mb-5 whitespace-pre-wrap break-words text-[15px]">
194
+
{/* {description} */}
195
+
<RichTextRenderer key={did} description={description} />
196
</div>
197
)}
198
</div>
···
235
</>
236
);
237
}
238
+
239
+
export function FollowButton({
240
+
targetdidorhandle,
241
+
}: {
242
+
targetdidorhandle: string;
243
+
}) {
244
+
const { agent } = useAuth();
245
+
const { data: identity } = useQueryIdentity(targetdidorhandle);
246
+
const queryClient = useQueryClient();
247
+
248
+
const followRecords = useGetFollowState({
249
+
target: identity?.did ?? targetdidorhandle,
250
+
user: agent?.did,
251
+
});
252
+
253
+
return (
254
+
<>
255
+
{identity?.did !== agent?.did ? (
256
+
<>
257
+
{!(followRecords?.length && followRecords?.length > 0) ? (
258
+
<button
259
+
onClick={(e) => {
260
+
e.stopPropagation();
261
+
toggleFollow({
262
+
agent: agent || undefined,
263
+
targetDid: identity?.did,
264
+
followRecords: followRecords,
265
+
queryClient: queryClient,
266
+
});
267
+
}}
268
+
className="rounded-full h-10 bg-gray-300 dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-500 transition-colors px-4 py-2 text-[14px]"
269
+
>
270
+
Follow
271
+
</button>
272
+
) : (
273
+
<button
274
+
onClick={(e) => {
275
+
e.stopPropagation();
276
+
toggleFollow({
277
+
agent: agent || undefined,
278
+
targetDid: identity?.did,
279
+
followRecords: followRecords,
280
+
queryClient: queryClient,
281
+
});
282
+
}}
283
+
className="rounded-full h-10 bg-gray-300 dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-500 transition-colors px-4 py-2 text-[14px]"
284
+
>
285
+
Unfollow
286
+
</button>
287
+
)}
288
+
</>
289
+
) : (
290
+
<button className="rounded-full h-10 bg-gray-300 dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-500 transition-colors px-4 py-2 text-[14px]">
291
+
Edit Profile
292
+
</button>
293
+
)}
294
+
</>
295
+
);
296
+
}
297
+
298
+
export function Mutual({ targetdidorhandle }: { targetdidorhandle: string }) {
299
+
const { agent } = useAuth();
300
+
const { data: identity } = useQueryIdentity(targetdidorhandle);
301
+
302
+
const theyFollowYouRes = useGetOneToOneState(
303
+
agent?.did
304
+
? {
305
+
target: agent?.did,
306
+
user: identity?.did ?? targetdidorhandle,
307
+
collection: "app.bsky.graph.follow",
308
+
path: ".subject",
309
+
}
310
+
: undefined
311
+
);
312
+
313
+
const youFollowThemRes = useGetFollowState({
314
+
target: identity?.did ?? targetdidorhandle,
315
+
user: agent?.did,
316
+
});
317
+
318
+
const theyFollowYou: boolean =
319
+
!!theyFollowYouRes?.length && theyFollowYouRes.length > 0;
320
+
const youFollowThem: boolean =
321
+
!!youFollowThemRes?.length && youFollowThemRes.length > 0;
322
+
323
+
return (
324
+
<>
325
+
{/* if not self */}
326
+
{identity?.did !== agent?.did ? (
327
+
<>
328
+
{theyFollowYou ? (
329
+
<>
330
+
{youFollowThem ? (
331
+
<div className=" text-sm px-1.5 py-0.5 text-gray-500 bg-gray-200 dark:text-gray-400 dark:bg-gray-800 rounded-lg flex flex-row items-center justify-center">
332
+
mutuals
333
+
</div>
334
+
) : (
335
+
<div className=" text-sm px-1.5 py-0.5 text-gray-500 bg-gray-200 dark:text-gray-400 dark:bg-gray-800 rounded-lg flex flex-row items-center justify-center">
336
+
follows you
337
+
</div>
338
+
)}
339
+
</>
340
+
) : (
341
+
<></>
342
+
)}
343
+
</>
344
+
) : (
345
+
// lmao can someone be mutuals with themselves ??
346
+
<></>
347
+
)}
348
+
</>
349
+
);
350
+
}
351
+
352
+
export function RichTextRenderer({ description }: { description: string }) {
353
+
const [richDescription, setRichDescription] = useState<string | ReactNode[]>(
354
+
description
355
+
);
356
+
const { agent } = useAuth();
357
+
const navigate = useNavigate();
358
+
359
+
useEffect(() => {
360
+
let mounted = true;
361
+
362
+
// setRichDescription(description);
363
+
364
+
async function processRichText() {
365
+
try {
366
+
if (!agent?.did) return;
367
+
const rt = new RichText({ text: description });
368
+
await rt.detectFacets(agent);
369
+
370
+
if (!mounted) return;
371
+
372
+
if (rt.facets) {
373
+
setRichDescription(
374
+
renderTextWithFacets({ text: rt.text, facets: rt.facets, navigate })
375
+
);
376
+
} else {
377
+
setRichDescription(rt.text);
378
+
}
379
+
} catch (error) {
380
+
console.error("Failed to detect facets:", error);
381
+
if (mounted) {
382
+
setRichDescription(description);
383
+
}
384
+
}
385
+
}
386
+
387
+
processRichText();
388
+
389
+
return () => {
390
+
mounted = false;
391
+
};
392
+
}, [description, agent, navigate]);
393
+
394
+
return <>{richDescription}</>;
395
+
}
+50
-1
src/routes/search.tsx
+50
-1
src/routes/search.tsx
···
1
import { createFileRoute } from "@tanstack/react-router";
2
3
+
import { Header } from "~/components/Header";
4
+
import { Import } from "~/components/Import";
5
+
6
export const Route = createFileRoute("/search")({
7
component: Search,
8
});
9
10
export function Search() {
11
+
return (
12
+
<>
13
+
<Header
14
+
title="Explore"
15
+
backButtonCallback={() => {
16
+
if (window.history.length > 1) {
17
+
window.history.back();
18
+
} else {
19
+
window.location.assign("/");
20
+
}
21
+
}}
22
+
/>
23
+
<div className=" flex flex-col items-center mt-4 mx-4 gap-4">
24
+
<Import />
25
+
<div className="flex flex-col">
26
+
<p className="text-gray-600 dark:text-gray-400">
27
+
Sorry we dont have search. But instead, you can load some of these
28
+
types of content into Red Dwarf:
29
+
</p>
30
+
<ul className="list-disc list-inside mt-2 text-gray-600 dark:text-gray-400">
31
+
<li>
32
+
Bluesky URLs from supported clients (like{" "}
33
+
<code className="text-sm">bsky.app</code> or{" "}
34
+
<code className="text-sm">deer.social</code>).
35
+
</li>
36
+
<li>
37
+
AT-URIs (e.g.,{" "}
38
+
<code className="text-sm">at://did:example/collection/item</code>
39
+
).
40
+
</li>
41
+
<li>
42
+
Plain handles (like{" "}
43
+
<code className="text-sm">@username.bsky.social</code>).
44
+
</li>
45
+
<li>
46
+
Direct DIDs (Decentralized Identifiers, starting with{" "}
47
+
<code className="text-sm">did:</code>).
48
+
</li>
49
+
</ul>
50
+
<p className="mt-2 text-gray-600 dark:text-gray-400">
51
+
Simply paste one of these into the import field above and press
52
+
Enter to load the content.
53
+
</p>
54
+
</div>
55
+
</div>
56
+
</>
57
+
);
58
}
+8
src/routes/settings.tsx
+8
src/routes/settings.tsx
···
5
import { Header } from "~/components/Header";
6
import Login from "~/components/Login";
7
import {
8
constellationURLAtom,
9
defaultconstellationURL,
10
defaulthue,
11
defaultImgCDN,
···
51
title={"Slingshot"}
52
description={"Customize the Slingshot instance to be used by Red Dwarf"}
53
init={defaultslingshotURL}
54
/>
55
<TextInputSetting
56
atom={imgCDNAtom}
···
5
import { Header } from "~/components/Header";
6
import Login from "~/components/Login";
7
import {
8
+
aturiListServiceAtom,
9
constellationURLAtom,
10
+
defaultaturilistservice,
11
defaultconstellationURL,
12
defaulthue,
13
defaultImgCDN,
···
53
title={"Slingshot"}
54
description={"Customize the Slingshot instance to be used by Red Dwarf"}
55
init={defaultslingshotURL}
56
+
/>
57
+
<TextInputSetting
58
+
atom={aturiListServiceAtom}
59
+
title={"AtUriListService"}
60
+
description={"Customize the AtUriListService instance to be used by Red Dwarf"}
61
+
init={defaultaturilistservice}
62
/>
63
<TextInputSetting
64
atom={imgCDNAtom}
+5
src/styles/app.css
+5
src/styles/app.css
+5
src/utils/atoms.ts
+5
src/utils/atoms.ts
···
32
"slingshotURL",
33
defaultslingshotURL
34
);
35
+
export const defaultaturilistservice = "aturilistservice.reddwarf.app";
36
+
export const aturiListServiceAtom = atomWithStorage<string>(
37
+
"aturilistservice",
38
+
defaultaturilistservice
39
+
);
40
export const defaultImgCDN = "cdn.bsky.app";
41
export const imgCDNAtom = atomWithStorage<string>("imgcdnurl", defaultImgCDN);
42
export const defaultVideoCDN = "video.bsky.app";
+33
src/utils/followState.ts
+33
src/utils/followState.ts
···
128
};
129
});
130
}
131
+
132
+
133
+
134
+
export function useGetOneToOneState(params?: {
135
+
target: string;
136
+
user: string;
137
+
collection: string;
138
+
path: string;
139
+
}): string[] | undefined {
140
+
const { data: arbitrarydata } = useQueryConstellation(
141
+
params && params.user
142
+
? {
143
+
method: "/links",
144
+
target: params.target,
145
+
// @ts-expect-error overloading sucks so much
146
+
collection: params.collection,
147
+
path: params.path,
148
+
dids: [params.user],
149
+
}
150
+
: { method: "undefined", target: "whatever" }
151
+
// overloading sucks so much
152
+
) as { data: linksRecordsResponse | undefined };
153
+
if (!params || !params.user) return undefined;
154
+
const data = arbitrarydata?.linking_records.slice(0, 50) ?? [];
155
+
156
+
if (data.length > 0) {
157
+
return data.map((linksRecord) => {
158
+
return `at://${linksRecord.did}/${linksRecord.collection}/${linksRecord.rkey}`;
159
+
});
160
+
}
161
+
162
+
return undefined;
163
+
}
+82
-2
src/utils/useQuery.ts
+82
-2
src/utils/useQuery.ts
···
565
});
566
}
567
568
type FeedSkeletonPage = ATPAPI.AppBskyFeedGetFeedSkeleton.OutputSchema;
569
570
export function constructInfiniteFeedSkeletonQuery(options: {
···
615
}) {
616
const { queryKey, queryFn } = constructInfiniteFeedSkeletonQuery(options);
617
618
-
return useInfiniteQuery({
619
queryKey,
620
queryFn,
621
initialPageParam: undefined as never,
···
623
staleTime: Infinity,
624
refetchOnWindowFocus: false,
625
enabled: !!options.feedUri && (options.isAuthed ? !!options.agent && !!options.pdsUrl && !!options.feedServiceDid : true),
626
-
});
627
}
628
629
···
565
});
566
}
567
568
+
export const ATURI_PAGE_LIMIT = 100;
569
+
570
+
export interface AturiDirectoryAturisItem {
571
+
uri: string;
572
+
cid: string;
573
+
rkey: string;
574
+
}
575
+
576
+
export type AturiDirectoryAturis = AturiDirectoryAturisItem[];
577
+
578
+
export function constructAturiListQuery(aturilistservice: string, did: string, collection: string, reverse?: boolean) {
579
+
return queryOptions({
580
+
// A unique key for this query, including all parameters that affect the data.
581
+
queryKey: ["aturiList", did, collection, { reverse }],
582
+
583
+
// The function that fetches the data.
584
+
queryFn: async ({ pageParam }: QueryFunctionContext) => {
585
+
const cursor = pageParam as string | undefined;
586
+
587
+
// Use URLSearchParams for safe and clean URL construction.
588
+
const params = new URLSearchParams({
589
+
did,
590
+
collection,
591
+
});
592
+
593
+
if (cursor) {
594
+
params.set("cursor", cursor);
595
+
}
596
+
597
+
// Add the reverse parameter if it's true
598
+
if (reverse) {
599
+
params.set("reverse", "true");
600
+
}
601
+
602
+
const url = `https://${aturilistservice}/aturis?${params.toString()}`;
603
+
604
+
const res = await fetch(url);
605
+
if (!res.ok) {
606
+
// You can add more specific error handling here
607
+
throw new Error(`Failed to fetch AT-URI list for ${did}`);
608
+
}
609
+
610
+
return res.json() as Promise<AturiDirectoryAturis>;
611
+
},
612
+
});
613
+
}
614
+
615
+
export function useInfiniteQueryAturiList({aturilistservice, did, collection, reverse}:{aturilistservice: string, did: string | undefined, collection: string | undefined, reverse?: boolean}) {
616
+
// We only enable the query if both `did` and `collection` are provided.
617
+
const isEnabled = !!did && !!collection;
618
+
619
+
const { queryKey, queryFn } = constructAturiListQuery(aturilistservice, did!, collection!, reverse);
620
+
621
+
return useInfiniteQuery({
622
+
queryKey,
623
+
queryFn,
624
+
initialPageParam: undefined as never, // ???? what is this shit
625
+
626
+
// @ts-expect-error i wouldve used as null | undefined, anyways
627
+
getNextPageParam: (lastPage: AturiDirectoryAturis) => {
628
+
// If the last page returned no records, we're at the end.
629
+
if (!lastPage || lastPage.length === 0) {
630
+
return undefined;
631
+
}
632
+
633
+
// If the number of records is less than our page limit, it must be the last page.
634
+
if (lastPage.length < ATURI_PAGE_LIMIT) {
635
+
return undefined;
636
+
}
637
+
638
+
// The cursor for the next page is the `rkey` of the last item we received.
639
+
const lastItem = lastPage[lastPage.length - 1];
640
+
return lastItem.rkey;
641
+
},
642
+
643
+
enabled: isEnabled,
644
+
});
645
+
}
646
+
647
+
648
type FeedSkeletonPage = ATPAPI.AppBskyFeedGetFeedSkeleton.OutputSchema;
649
650
export function constructInfiniteFeedSkeletonQuery(options: {
···
695
}) {
696
const { queryKey, queryFn } = constructInfiniteFeedSkeletonQuery(options);
697
698
+
return {...useInfiniteQuery({
699
queryKey,
700
queryFn,
701
initialPageParam: undefined as never,
···
703
staleTime: Infinity,
704
refetchOnWindowFocus: false,
705
enabled: !!options.feedUri && (options.isAuthed ? !!options.agent && !!options.pdsUrl && !!options.feedServiceDid : true),
706
+
}), queryKey: queryKey};
707
}
708
709
+1
-1
vite.config.ts
+1
-1
vite.config.ts