+1 -1

README.md

··· 8 8 ## running dev and build 9 9 in the `vite.config.ts` file you should change these values 10 10 ```ts 11 11 - const PROD_URL = "https://reddwarf.whey.party" 11 11 + const PROD_URL = "https://reddwarf.app" 12 12 const DEV_URL = "https://local3768forumtest.whey.party" 13 13 ``` 14 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

+150

src/components/Import.tsx

··· 1 1 + import { AtUri } from "@atproto/api"; 2 2 + import { useNavigate, type UseNavigateResult } from "@tanstack/react-router"; 3 3 + import { useState } from "react"; 4 4 + 5 5 + /** 6 6 + * Basically the best equivalent to Search that i can do 7 7 + */ 8 8 + export function Import() { 9 9 + const [textInput, setTextInput] = useState<string | undefined>(); 10 10 + const navigate = useNavigate(); 11 11 + 12 12 + const handleEnter = () => { 13 13 + if (!textInput) return; 14 14 + handleImport({ 15 15 + text: textInput, 16 16 + navigate, 17 17 + }); 18 18 + }; 19 19 + 20 20 + return ( 21 21 + <div className="w-full relative"> 22 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 23 + 24 24 + <input 25 25 + type="text" 26 26 + placeholder="Import..." 27 27 + value={textInput} 28 28 + onChange={(e) => setTextInput(e.target.value)} 29 29 + onKeyDown={(e) => { 30 30 + if (e.key === "Enter") handleEnter(); 31 31 + }} 32 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 33 + /> 34 34 + </div> 35 35 + ); 36 36 + } 37 37 + 38 38 + function handleImport({ 39 39 + text, 40 40 + navigate, 41 41 + }: { 42 42 + text: string; 43 43 + navigate: UseNavigateResult<string>; 44 44 + }) { 45 45 + const trimmed = text.trim(); 46 46 + // parse text 47 47 + /** 48 48 + * text might be 49 49 + * 1. bsky dot app url (reddwarf link segments might be uri encoded,) 50 50 + * 2. aturi 51 51 + * 3. plain handle 52 52 + * 4. plain did 53 53 + */ 54 54 + 55 55 + // 1. Check if it’s a URL 56 56 + try { 57 57 + const url = new URL(text); 58 58 + const knownHosts = [ 59 59 + "bsky.app", 60 60 + "social.daniela.lol", 61 61 + "deer.social", 62 62 + "reddwarf.whey.party", 63 63 + "reddwarf.app", 64 64 + "main.bsky.dev", 65 65 + "catsky.social", 66 66 + "blacksky.community", 67 67 + "red-dwarf-social-app.whey.party", 68 68 + "zeppelin.social", 69 69 + ]; 70 70 + if (knownHosts.includes(url.hostname)) { 71 71 + // parse path to get URI or handle 72 72 + const path = decodeURIComponent(url.pathname.slice(1)); // remove leading / 73 73 + console.log("BSky URL path:", path); 74 74 + navigate({ 75 75 + to: `/${path}`, 76 76 + }); 77 77 + return; 78 78 + } 79 79 + } catch { 80 80 + // not a URL, continue 81 81 + } 82 82 + 83 83 + // 2. Check if text looks like an at-uri 84 84 + try { 85 85 + if (text.startsWith("at://")) { 86 86 + console.log("AT URI detected:", text); 87 87 + const aturi = new AtUri(text); 88 88 + switch (aturi.collection) { 89 89 + case "app.bsky.feed.post": { 90 90 + navigate({ 91 91 + to: "/profile/$did/post/$rkey", 92 92 + params: { 93 93 + did: aturi.host, 94 94 + rkey: aturi.rkey, 95 95 + }, 96 96 + }); 97 97 + return; 98 98 + } 99 99 + case "app.bsky.actor.profile": { 100 100 + navigate({ 101 101 + to: "/profile/$did", 102 102 + params: { 103 103 + did: aturi.host, 104 104 + }, 105 105 + }); 106 106 + return; 107 107 + } 108 108 + // todo add more handlers as more routes are added. like feeds, lists, etc etc thanks! 109 109 + default: { 110 110 + // continue 111 111 + } 112 112 + } 113 113 + } 114 114 + } catch { 115 115 + // continue 116 116 + } 117 117 + 118 118 + // 3. Plain handle (starts with @) 119 119 + try { 120 120 + if (text.startsWith("@")) { 121 121 + const handle = text.slice(1); 122 122 + console.log("Handle detected:", handle); 123 123 + navigate({ to: "/profile/$did", params: { did: handle } }); 124 124 + return; 125 125 + } 126 126 + } catch { 127 127 + // continue 128 128 + } 129 129 + 130 130 + // 4. Plain DID (starts with did:) 131 131 + try { 132 132 + if (text.startsWith("did:")) { 133 133 + console.log("did detected:", text); 134 134 + navigate({ to: "/profile/$did", params: { did: text } }); 135 135 + return; 136 136 + } 137 137 + } catch { 138 138 + // continue 139 139 + } 140 140 + 141 141 + // if all else fails 142 142 + 143 143 + // try { 144 144 + // // probably a user? 145 145 + // navigate({ to: "/profile/$did", params: { did: text } }); 146 146 + // return; 147 147 + // } catch { 148 148 + // // continue 149 149 + // } 150 150 + }

+32 -6

src/components/InfiniteCustomFeed.tsx

··· 1 1 + import { useQueryClient } from "@tanstack/react-query"; 1 2 import * as React from "react"; 2 3 3 4 //import { useInView } from "react-intersection-observer"; ··· 37 38 isFetchingNextPage, 38 39 refetch, 39 40 isRefetching, 41 41 + queryKey, 40 42 } = useInfiniteQueryFeedSkeleton({ 41 43 feedUri: feedUri, 42 44 agent: agent ?? undefined, ··· 44 46 pdsUrl: pdsUrl, 45 47 feedServiceDid: feedServiceDid, 46 48 }); 49 49 + const queryClient = useQueryClient(); 50 50 + 47 51 48 52 const handleRefresh = () => { 53 53 + queryClient.removeQueries({queryKey: queryKey}); 54 54 + //queryClient.invalidateQueries(["infinite-feed", feedUri] as const); 49 55 refetch(); 50 56 }; 51 57 58 58 + const allPosts = React.useMemo(() => { 59 59 + const flattenedPosts = data?.pages.flatMap((page) => page?.feed) ?? []; 60 60 + 61 61 + const seenUris = new Set<string>(); 62 62 + 63 63 + return flattenedPosts.filter((item) => { 64 64 + if (!item?.post) return false; 65 65 + 66 66 + if (seenUris.has(item.post)) { 67 67 + return false; 68 68 + } 69 69 + 70 70 + seenUris.add(item.post); 71 71 + 72 72 + return true; 73 73 + }); 74 74 + }, [data]); 75 75 + 52 76 //const { ref, inView } = useInView(); 53 77 54 78 // React.useEffect(() => { ··· 67 91 ); 68 92 } 69 93 70 70 - const allPosts = 71 71 - data?.pages.flatMap((page) => { 72 72 - if (page) return page.feed; 73 73 - }) ?? []; 94 94 + // const allPosts = 95 95 + // data?.pages.flatMap((page) => { 96 96 + // if (page) return page.feed; 97 97 + // }) ?? []; 74 98 75 99 if (!allPosts || typeof allPosts !== "object" || allPosts.length === 0) { 76 100 return ( ··· 116 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" 117 141 aria-label="Refresh feed" 118 142 > 119 119 - <RefreshIcon className={`h-6 w-6 text-gray-600 dark:text-gray-400 ${isRefetching && "animate-spin"}`} /> 143 143 + <RefreshIcon 144 144 + className={`h-6 w-6 text-gray-600 dark:text-gray-400 ${isRefetching && "animate-spin"}`} 145 145 + /> 120 146 </button> 121 147 </> 122 148 ); ··· 139 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" 140 166 ></path> 141 167 </svg> 142 142 - ); 168 168 + );

+3 -3

src/components/Login.tsx

··· 24 24 className={ 25 25 compact 26 26 ? "flex items-center justify-center p-1" 27 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]" 27 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 28 } 29 29 > 30 30 <span ··· 43 43 // Large view 44 44 if (!compact) { 45 45 return ( 46 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"> 46 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 47 <div className="flex flex-col items-center justify-center text-center"> 48 48 <p className="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-100"> 49 49 You are logged in! ··· 77 77 if (!compact) { 78 78 // Large view renders the form directly in the card 79 79 return ( 80 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"> 80 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 81 <UnifiedLoginForm /> 82 82 </div> 83 83 );

+10 -4

src/components/UniversalPostRenderer.tsx

··· 518 518 ? true 519 519 : maxReplies && !oldestOpsReplyElseNewestNonOpsReply 520 520 ? false 521 521 - : bottomReplyLine 521 521 + : (maxReplies === 0 && (!replies || (!!replies && replies === 0))) ? false : bottomReplyLine 522 522 } 523 523 topReplyLine={topReplyLine} 524 524 //bottomBorder={maxReplies&&oldestOpsReplyElseNewestNonOpsReply ? false : bottomBorder} ··· 540 540 maxReplies={maxReplies} 541 541 isQuote={isQuote} 542 542 /> 543 543 + <> 544 544 + {(maxReplies && maxReplies === 0 && replies && replies > 0) ? ( 545 545 + <> 546 546 + {/* <div>hello</div> */} 547 547 + <MoreReplies atUri={atUri} /> 548 548 + </> 549 549 + ) : (<></>)} 550 550 + </> 543 551 {!isQuote && oldestOpsReplyElseNewestNonOpsReply && ( 544 552 <> 545 553 {/* <span>hello {maxReplies}</span> */} ··· 564 572 maxReplies && maxReplies > 0 ? maxReplies - 1 : undefined 565 573 } 566 574 /> 567 567 - {maxReplies && maxReplies - 1 === 0 && replies && replies > 0 && ( 568 568 - <MoreReplies atUri={oldestOpsReplyElseNewestNonOpsReply} /> 569 569 - )} 570 575 </> 571 576 )} 572 577 </> ··· 1542 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" 1543 1548 side={"bottom"} 1544 1549 sideOffset={5} 1550 1550 + onClick={onProfileClick} 1545 1551 > 1546 1552 <div className="flex flex-col gap-2"> 1547 1553 <div className="flex flex-row">

+28 -26

src/routes/__root.tsx

··· 18 18 19 19 import { Composer } from "~/components/Composer"; 20 20 import { DefaultCatchBoundary } from "~/components/DefaultCatchBoundary"; 21 21 + import { Import } from "~/components/Import"; 21 22 import Login from "~/components/Login"; 22 23 import { NotFound } from "~/components/NotFound"; 23 24 import { FluentEmojiHighContrastGlowingStar } from "~/components/Star"; ··· 154 155 /> 155 156 156 157 <MaterialNavItem 158 158 + InactiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />} 159 159 + ActiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />} 160 160 + active={locationEnum === "search"} 161 161 + onClickCallbback={() => 162 162 + navigate({ 163 163 + to: "/search", 164 164 + //params: { did: agent.assertDid }, 165 165 + }) 166 166 + } 167 167 + text="Explore" 168 168 + /> 169 169 + <MaterialNavItem 157 170 InactiveIcon={ 158 171 <IconMaterialSymbolsNotificationsOutline className="w-6 h-6" /> 159 172 } ··· 180 193 }) 181 194 } 182 195 text="Feeds" 183 183 - /> 184 184 - <MaterialNavItem 185 185 - InactiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />} 186 186 - ActiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />} 187 187 - active={locationEnum === "search"} 188 188 - onClickCallbback={() => 189 189 - navigate({ 190 190 - to: "/search", 191 191 - //params: { did: agent.assertDid }, 192 192 - }) 193 193 - } 194 194 - text="Search" 195 196 /> 196 197 <MaterialNavItem 197 198 InactiveIcon={ ··· 389 390 390 391 <MaterialNavItem 391 392 small 393 393 + InactiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />} 394 394 + ActiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />} 395 395 + active={locationEnum === "search"} 396 396 + onClickCallbback={() => 397 397 + navigate({ 398 398 + to: "/search", 399 399 + //params: { did: agent.assertDid }, 400 400 + }) 401 401 + } 402 402 + text="Explore" 403 403 + /> 404 404 + <MaterialNavItem 405 405 + small 392 406 InactiveIcon={ 393 407 <IconMaterialSymbolsNotificationsOutline className="w-6 h-6" /> 394 408 } ··· 419 433 /> 420 434 <MaterialNavItem 421 435 small 422 422 - InactiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />} 423 423 - ActiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />} 424 424 - active={locationEnum === "search"} 425 425 - onClickCallbback={() => 426 426 - navigate({ 427 427 - to: "/search", 428 428 - //params: { did: agent.assertDid }, 429 429 - }) 430 430 - } 431 431 - text="Search" 432 432 - /> 433 433 - <MaterialNavItem 434 434 - small 435 436 InactiveIcon={ 436 437 <IconMaterialSymbolsAccountCircleOutline className="w-6 h-6" /> 437 438 } ··· 498 499 </main> 499 500 500 501 <aside className="hidden lg:flex h-screen w-[250px] sticky top-0 self-start flex-col"> 502 502 + <div className="px-4 pt-4"><Import /></div> 501 503 <Login /> 502 504 503 505 <div className="flex-1"></div> ··· 551 553 //params: { did: agent.assertDid }, 552 554 }) 553 555 } 554 554 - text="Search" 556 556 + text="Explore" 555 557 /> 556 558 {/* <Link 557 559 to="/search"

+1

src/routes/index.tsx

··· 418 418 419 419 {isReadyForAuthedFeed || isReadyForUnauthedFeed ? ( 420 420 <InfiniteCustomFeed 421 421 + key={selectedFeed!} 421 422 feedUri={selectedFeed!} 422 423 pdsUrl={identity?.pds} 423 424 feedServiceDid={feedServiceDid}

+83 -43

src/routes/profile.$did/index.tsx

··· 2 2 import { useQueryClient } from "@tanstack/react-query"; 3 3 import { createFileRoute, useNavigate } from "@tanstack/react-router"; 4 4 import { useAtom } from "jotai"; 5 5 - import React, { type ReactNode,useEffect, useState } from "react"; 5 5 + import React, { type ReactNode, useEffect, useState } from "react"; 6 6 7 7 import { Header } from "~/components/Header"; 8 8 - import { renderTextWithFacets, UniversalPostRendererATURILoader } from "~/components/UniversalPostRenderer"; 8 8 + import { 9 9 + renderTextWithFacets, 10 10 + UniversalPostRendererATURILoader, 11 11 + } from "~/components/UniversalPostRenderer"; 9 12 import { useAuth } from "~/providers/UnifiedAuthProvider"; 10 10 - import { imgCDNAtom } from "~/utils/atoms"; 11 11 - import { toggleFollow, useGetFollowState, useGetOneToOneState } from "~/utils/followState"; 13 13 + import { aturiListServiceAtom, imgCDNAtom } from "~/utils/atoms"; 12 14 import { 13 13 - useInfiniteQueryAuthorFeed, 15 15 + toggleFollow, 16 16 + useGetFollowState, 17 17 + useGetOneToOneState, 18 18 + } from "~/utils/followState"; 19 19 + import { 20 20 + useInfiniteQueryAturiList, 14 21 useQueryIdentity, 15 22 useQueryProfile, 16 23 } from "~/utils/useQuery"; ··· 22 29 function ProfileComponent() { 23 30 // booo bad this is not always the did it might be a handle, use identity.did instead 24 31 const { did } = Route.useParams(); 25 25 - const navigate = useNavigate(); 32 32 + //const navigate = useNavigate(); 26 33 const queryClient = useQueryClient(); 27 34 const { 28 35 data: identity, ··· 32 39 33 40 const resolvedDid = did.startsWith("did:") ? did : identity?.did; 34 41 const resolvedHandle = did.startsWith("did:") ? identity?.handle : did; 35 35 - const pdsUrl = identity?.pds; 42 42 + //const pdsUrl = identity?.pds; 36 43 37 44 const profileUri = resolvedDid 38 45 ? `at://${resolvedDid}/app.bsky.actor.profile/self` ··· 40 47 const { data: profileRecord } = useQueryProfile(profileUri); 41 48 const profile = profileRecord?.value; 42 49 50 50 + const [aturilistservice] = useAtom(aturiListServiceAtom); 51 51 + 43 52 const { 44 53 data: postsData, 45 54 fetchNextPage, 46 55 hasNextPage, 47 56 isFetchingNextPage, 48 57 isLoading: arePostsLoading, 49 49 - } = useInfiniteQueryAuthorFeed(resolvedDid, pdsUrl); 58 58 + } = useInfiniteQueryAturiList({ 59 59 + aturilistservice: aturilistservice, 60 60 + did: resolvedDid, 61 61 + collection: "app.bsky.feed.post", 62 62 + reverse: true 63 63 + }); 50 64 51 65 React.useEffect(() => { 52 66 if (postsData) { 53 67 postsData.pages.forEach((page) => { 54 54 - page.records.forEach((record) => { 68 68 + page.forEach((record) => { 55 69 if (!queryClient.getQueryData(["post", record.uri])) { 56 70 queryClient.setQueryData(["post", record.uri], record); 57 71 } ··· 61 75 }, [postsData, queryClient]); 62 76 63 77 const posts = React.useMemo( 64 64 - () => postsData?.pages.flatMap((page) => page.records) ?? [], 78 78 + () => postsData?.pages.flatMap((page) => page) ?? [], 65 79 [postsData] 66 80 ); 67 81 ··· 172 186 <div className="mt-16 pb-2 px-4 text-gray-900 dark:text-gray-100"> 173 187 <div className="font-bold text-2xl">{displayName}</div> 174 188 <div className="text-gray-500 dark:text-gray-400 text-base mb-3 flex flex-row gap-1"> 175 175 - <Mutual targetdidorhandle={did} /> 189 189 + <Mutual targetdidorhandle={did} /> 176 190 {handle} 177 191 </div> 178 192 {description && ( 179 193 <div className="text-base leading-relaxed text-gray-800 dark:text-gray-300 mb-5 whitespace-pre-wrap break-words text-[15px]"> 180 194 {/* {description} */} 181 181 - <RichTextRenderer key={did} description={description}/> 195 195 + <RichTextRenderer key={did} description={description} /> 182 196 </div> 183 197 )} 184 198 </div> ··· 222 236 ); 223 237 } 224 238 225 225 - export function FollowButton({targetdidorhandle}:{targetdidorhandle: string}) { 226 226 - const {agent} = useAuth() 227 227 - const {data: identity} = useQueryIdentity(targetdidorhandle); 239 239 + export function FollowButton({ 240 240 + targetdidorhandle, 241 241 + }: { 242 242 + targetdidorhandle: string; 243 243 + }) { 244 244 + const { agent } = useAuth(); 245 245 + const { data: identity } = useQueryIdentity(targetdidorhandle); 228 246 const queryClient = useQueryClient(); 229 247 230 248 const followRecords = useGetFollowState({ 231 249 target: identity?.did ?? targetdidorhandle, 232 250 user: agent?.did, 233 251 }); 234 234 - 252 252 + 235 253 return ( 236 254 <> 237 255 {identity?.did !== agent?.did ? ( 238 256 <> 239 257 {!(followRecords?.length && followRecords?.length > 0) ? ( 240 258 <button 241 241 - onClick={(e) => 242 242 - { 259 259 + onClick={(e) => { 243 260 e.stopPropagation(); 244 261 toggleFollow({ 245 262 agent: agent || undefined, 246 263 targetDid: identity?.did, 247 264 followRecords: followRecords, 248 265 queryClient: queryClient, 249 249 - }) 250 250 - } 251 251 - } 266 266 + }); 267 267 + }} 252 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]" 253 269 > 254 270 Follow 255 271 </button> 256 272 ) : ( 257 273 <button 258 258 - onClick={(e) => 259 259 - { 274 274 + onClick={(e) => { 260 275 e.stopPropagation(); 261 276 toggleFollow({ 262 277 agent: agent || undefined, 263 278 targetDid: identity?.did, 264 279 followRecords: followRecords, 265 280 queryClient: queryClient, 266 266 - }) 267 267 - } 268 268 - } 281 281 + }); 282 282 + }} 269 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]" 270 284 > 271 285 Unfollow ··· 281 295 ); 282 296 } 283 297 298 298 + export function Mutual({ targetdidorhandle }: { targetdidorhandle: string }) { 299 299 + const { agent } = useAuth(); 300 300 + const { data: identity } = useQueryIdentity(targetdidorhandle); 284 301 285 285 - export function Mutual({targetdidorhandle}:{targetdidorhandle: string}) { 286 286 - const {agent} = useAuth() 287 287 - const {data: identity} = useQueryIdentity(targetdidorhandle); 302 302 + const theyFollowYouRes = useGetOneToOneState( 303 303 + agent?.did 304 304 + ? { 305 305 + target: agent?.did, 306 306 + user: identity?.did ?? targetdidorhandle, 307 307 + collection: "app.bsky.graph.follow", 308 308 + path: ".subject", 309 309 + } 310 310 + : undefined 311 311 + ); 288 312 289 289 - const mutualfollows = useGetOneToOneState(agent?.did ? { 290 290 - target: agent?.did, 291 291 - user: identity?.did ?? targetdidorhandle, 292 292 - collection: "app.bsky.graph.follow", 293 293 - path: ".subject" 294 294 - }:undefined); 313 313 + const youFollowThemRes = useGetFollowState({ 314 314 + target: identity?.did ?? targetdidorhandle, 315 315 + user: agent?.did, 316 316 + }); 317 317 + 318 318 + const theyFollowYou: boolean = 319 319 + !!theyFollowYouRes?.length && theyFollowYouRes.length > 0; 320 320 + const youFollowThem: boolean = 321 321 + !!youFollowThemRes?.length && youFollowThemRes.length > 0; 295 322 296 296 - const ismutual: boolean = (!!mutualfollows?.length && mutualfollows.length > 0) 297 297 - 298 323 return ( 299 324 <> 325 325 + {/* if not self */} 300 326 {identity?.did !== agent?.did ? ( 301 327 <> 302 302 - {!(ismutual) ? ( 328 328 + {theyFollowYou ? ( 329 329 + <> 330 330 + {youFollowThem ? ( 331 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 332 + mutuals 333 333 + </div> 334 334 + ) : ( 335 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 336 + follows you 337 337 + </div> 338 338 + )} 339 339 + </> 340 340 + ) : ( 303 341 <></> 304 304 - ) : ( 305 305 - <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">mutuals</div> 306 342 )} 307 343 </> 308 344 ) : ( ··· 314 350 } 315 351 316 352 export function RichTextRenderer({ description }: { description: string }) { 317 317 - const [richDescription, setRichDescription] = useState<string | ReactNode[]>(description); 353 353 + const [richDescription, setRichDescription] = useState<string | ReactNode[]>( 354 354 + description 355 355 + ); 318 356 const { agent } = useAuth(); 319 357 const navigate = useNavigate(); 320 358 ··· 332 370 if (!mounted) return; 333 371 334 372 if (rt.facets) { 335 335 - setRichDescription(renderTextWithFacets({ text: rt.text, facets: rt.facets, navigate })); 373 373 + setRichDescription( 374 374 + renderTextWithFacets({ text: rt.text, facets: rt.facets, navigate }) 375 375 + ); 336 376 } else { 337 377 setRichDescription(rt.text); 338 378 } ··· 352 392 }, [description, agent, navigate]); 353 393 354 394 return <>{richDescription}</>; 355 355 - } 395 395 + }

+50 -1

src/routes/search.tsx

··· 1 1 import { createFileRoute } from "@tanstack/react-router"; 2 2 3 3 + import { Header } from "~/components/Header"; 4 4 + import { Import } from "~/components/Import"; 5 5 + 3 6 export const Route = createFileRoute("/search")({ 4 7 component: Search, 5 8 }); 6 9 7 10 export function Search() { 8 8 - return <div className="p-6">Search page (coming soon)</div>; 11 11 + return ( 12 12 + <> 13 13 + <Header 14 14 + title="Explore" 15 15 + backButtonCallback={() => { 16 16 + if (window.history.length > 1) { 17 17 + window.history.back(); 18 18 + } else { 19 19 + window.location.assign("/"); 20 20 + } 21 21 + }} 22 22 + /> 23 23 + <div className=" flex flex-col items-center mt-4 mx-4 gap-4"> 24 24 + <Import /> 25 25 + <div className="flex flex-col"> 26 26 + <p className="text-gray-600 dark:text-gray-400"> 27 27 + Sorry we dont have search. But instead, you can load some of these 28 28 + types of content into Red Dwarf: 29 29 + </p> 30 30 + <ul className="list-disc list-inside mt-2 text-gray-600 dark:text-gray-400"> 31 31 + <li> 32 32 + Bluesky URLs from supported clients (like{" "} 33 33 + <code className="text-sm">bsky.app</code> or{" "} 34 34 + <code className="text-sm">deer.social</code>). 35 35 + </li> 36 36 + <li> 37 37 + AT-URIs (e.g.,{" "} 38 38 + <code className="text-sm">at://did:example/collection/item</code> 39 39 + ). 40 40 + </li> 41 41 + <li> 42 42 + Plain handles (like{" "} 43 43 + <code className="text-sm">@username.bsky.social</code>). 44 44 + </li> 45 45 + <li> 46 46 + Direct DIDs (Decentralized Identifiers, starting with{" "} 47 47 + <code className="text-sm">did:</code>). 48 48 + </li> 49 49 + </ul> 50 50 + <p className="mt-2 text-gray-600 dark:text-gray-400"> 51 51 + Simply paste one of these into the import field above and press 52 52 + Enter to load the content. 53 53 + </p> 54 54 + </div> 55 55 + </div> 56 56 + </> 57 57 + ); 9 58 }

+8

src/routes/settings.tsx

··· 5 5 import { Header } from "~/components/Header"; 6 6 import Login from "~/components/Login"; 7 7 import { 8 8 + aturiListServiceAtom, 8 9 constellationURLAtom, 10 10 + defaultaturilistservice, 9 11 defaultconstellationURL, 10 12 defaulthue, 11 13 defaultImgCDN, ··· 51 53 title={"Slingshot"} 52 54 description={"Customize the Slingshot instance to be used by Red Dwarf"} 53 55 init={defaultslingshotURL} 56 56 + /> 57 57 + <TextInputSetting 58 58 + atom={aturiListServiceAtom} 59 59 + title={"AtUriListService"} 60 60 + description={"Customize the AtUriListService instance to be used by Red Dwarf"} 61 61 + init={defaultaturilistservice} 54 62 /> 55 63 <TextInputSetting 56 64 atom={imgCDNAtom}

+5

src/utils/atoms.ts

··· 32 32 "slingshotURL", 33 33 defaultslingshotURL 34 34 ); 35 35 + export const defaultaturilistservice = "aturilistservice.reddwarf.app"; 36 36 + export const aturiListServiceAtom = atomWithStorage<string>( 37 37 + "aturilistservice", 38 38 + defaultaturilistservice 39 39 + ); 35 40 export const defaultImgCDN = "cdn.bsky.app"; 36 41 export const imgCDNAtom = atomWithStorage<string>("imgcdnurl", defaultImgCDN); 37 42 export const defaultVideoCDN = "video.bsky.app";

+82 -2

src/utils/useQuery.ts

··· 565 565 }); 566 566 } 567 567 568 568 + export const ATURI_PAGE_LIMIT = 100; 569 569 + 570 570 + export interface AturiDirectoryAturisItem { 571 571 + uri: string; 572 572 + cid: string; 573 573 + rkey: string; 574 574 + } 575 575 + 576 576 + export type AturiDirectoryAturis = AturiDirectoryAturisItem[]; 577 577 + 578 578 + export function constructAturiListQuery(aturilistservice: string, did: string, collection: string, reverse?: boolean) { 579 579 + return queryOptions({ 580 580 + // A unique key for this query, including all parameters that affect the data. 581 581 + queryKey: ["aturiList", did, collection, { reverse }], 582 582 + 583 583 + // The function that fetches the data. 584 584 + queryFn: async ({ pageParam }: QueryFunctionContext) => { 585 585 + const cursor = pageParam as string | undefined; 586 586 + 587 587 + // Use URLSearchParams for safe and clean URL construction. 588 588 + const params = new URLSearchParams({ 589 589 + did, 590 590 + collection, 591 591 + }); 592 592 + 593 593 + if (cursor) { 594 594 + params.set("cursor", cursor); 595 595 + } 596 596 + 597 597 + // Add the reverse parameter if it's true 598 598 + if (reverse) { 599 599 + params.set("reverse", "true"); 600 600 + } 601 601 + 602 602 + const url = `https://${aturilistservice}/aturis?${params.toString()}`; 603 603 + 604 604 + const res = await fetch(url); 605 605 + if (!res.ok) { 606 606 + // You can add more specific error handling here 607 607 + throw new Error(`Failed to fetch AT-URI list for ${did}`); 608 608 + } 609 609 + 610 610 + return res.json() as Promise<AturiDirectoryAturis>; 611 611 + }, 612 612 + }); 613 613 + } 614 614 + 615 615 + export function useInfiniteQueryAturiList({aturilistservice, did, collection, reverse}:{aturilistservice: string, did: string | undefined, collection: string | undefined, reverse?: boolean}) { 616 616 + // We only enable the query if both `did` and `collection` are provided. 617 617 + const isEnabled = !!did && !!collection; 618 618 + 619 619 + const { queryKey, queryFn } = constructAturiListQuery(aturilistservice, did!, collection!, reverse); 620 620 + 621 621 + return useInfiniteQuery({ 622 622 + queryKey, 623 623 + queryFn, 624 624 + initialPageParam: undefined as never, // ???? what is this shit 625 625 + 626 626 + // @ts-expect-error i wouldve used as null | undefined, anyways 627 627 + getNextPageParam: (lastPage: AturiDirectoryAturis) => { 628 628 + // If the last page returned no records, we're at the end. 629 629 + if (!lastPage || lastPage.length === 0) { 630 630 + return undefined; 631 631 + } 632 632 + 633 633 + // If the number of records is less than our page limit, it must be the last page. 634 634 + if (lastPage.length < ATURI_PAGE_LIMIT) { 635 635 + return undefined; 636 636 + } 637 637 + 638 638 + // The cursor for the next page is the `rkey` of the last item we received. 639 639 + const lastItem = lastPage[lastPage.length - 1]; 640 640 + return lastItem.rkey; 641 641 + }, 642 642 + 643 643 + enabled: isEnabled, 644 644 + }); 645 645 + } 646 646 + 647 647 + 568 648 type FeedSkeletonPage = ATPAPI.AppBskyFeedGetFeedSkeleton.OutputSchema; 569 649 570 650 export function constructInfiniteFeedSkeletonQuery(options: { ··· 615 695 }) { 616 696 const { queryKey, queryFn } = constructInfiniteFeedSkeletonQuery(options); 617 697 618 618 - return useInfiniteQuery({ 698 698 + return {...useInfiniteQuery({ 619 699 queryKey, 620 700 queryFn, 621 701 initialPageParam: undefined as never, ··· 623 703 staleTime: Infinity, 624 704 refetchOnWindowFocus: false, 625 705 enabled: !!options.feedUri && (options.isAuthed ? !!options.agent && !!options.pdsUrl && !!options.feedServiceDid : true), 626 626 - }); 706 706 + }), queryKey: queryKey}; 627 707 } 628 708 629 709

+1 -1

vite.config.ts

··· 10 10 11 11 import { generateMetadataPlugin } from "./oauthdev.mts"; 12 12 13 13 - const PROD_URL = "https://reddwarf.whey.party" 13 13 + const PROD_URL = "https://reddwarf.app" 14 14 const DEV_URL = "https://local3768forumtest.whey.party" 15 15 16 16 function shp(url: string): string {