+2 -1

.gitignore

··· 7 7 .env 8 8 .nitro 9 9 .tanstack 10 10 - public/client-metadata.json 10 10 + public/client-metadata.json 11 11 + public/resolvers.json

+9

README.md

··· 15 15 16 16 run dev with `npm run dev` (port 3768) and build with `npm run build` (the output is the `dist` folder) 17 17 18 18 + 19 19 + 20 20 + you probably dont need to change these 21 21 + ```ts 22 22 + const PROD_HANDLE_RESOLVER_PDS = "https://pds-nd.whey.party" 23 23 + const DEV_HANDLE_RESOLVER_PDS = "https://bsky.social" 24 24 + ``` 25 25 + if you do want to change these, i recommend changing both of these to your own PDS url. i separate the prod and dev urls so that you can change it as needed. here i separated it because if the prod resolver and prod url shares the same domain itll error and prevent logins 26 26 + 18 27 ## useQuery 19 28 Red Dwarf has been upgraded from its original bespoke caching system to Tanstack Query (react query). this migration was done to achieve a more robust and maintainable approach to data fetching and caching and state synchronization. ive seen serious performance gains from this switch! 20 29

+62 -30

oauthdev.mts

··· 1 1 - import fs from 'fs'; 2 2 - import path from 'path'; 1 1 + import fs from "fs"; 2 2 + import path from "path"; 3 3 //import { generateClientMetadata } from './src/helpers/oauthClient' 4 4 export const generateClientMetadata = (appOrigin: string) => { 5 5 - const callbackPath = '/callback'; 5 5 + const callbackPath = "/callback"; 6 6 7 7 return { 8 8 - "client_id": `${appOrigin}/client-metadata.json`, 9 9 - "client_name": "ForumTest", 10 10 - "client_uri": appOrigin, 11 11 - "logo_uri": `${appOrigin}/logo192.png`, 12 12 - "tos_uri": `${appOrigin}/terms-of-service`, 13 13 - "policy_uri": `${appOrigin}/privacy-policy`, 14 14 - "redirect_uris": [`${appOrigin}${callbackPath}`] as [string, ...string[]], 15 15 - "scope": "atproto transition:generic", 16 16 - "grant_types": ["authorization_code", "refresh_token"] as ["authorization_code", "refresh_token"], 17 17 - "response_types": ["code"] as ["code"], 18 18 - "token_endpoint_auth_method": "none" as "none", 19 19 - "application_type": "web" as "web", 20 20 - "dpop_bound_access_tokens": true 21 21 - }; 22 22 - } 23 23 - 8 8 + client_id: `${appOrigin}/client-metadata.json`, 9 9 + client_name: "ForumTest", 10 10 + client_uri: appOrigin, 11 11 + logo_uri: `${appOrigin}/logo192.png`, 12 12 + tos_uri: `${appOrigin}/terms-of-service`, 13 13 + policy_uri: `${appOrigin}/privacy-policy`, 14 14 + redirect_uris: [`${appOrigin}${callbackPath}`] as [string, ...string[]], 15 15 + scope: "atproto transition:generic", 16 16 + grant_types: ["authorization_code", "refresh_token"] as [ 17 17 + "authorization_code", 18 18 + "refresh_token", 19 19 + ], 20 20 + response_types: ["code"] as ["code"], 21 21 + token_endpoint_auth_method: "none" as "none", 22 22 + application_type: "web" as "web", 23 23 + dpop_bound_access_tokens: true, 24 24 + }; 25 25 + }; 24 26 25 25 - export function generateMetadataPlugin({prod, dev}:{prod: string, dev: string}) { 27 27 + export function generateMetadataPlugin({ 28 28 + prod, 29 29 + dev, 30 30 + prodResolver = "https://bsky.social", 31 31 + devResolver = prodResolver, 32 32 + }: { 33 33 + prod: string; 34 34 + dev: string; 35 35 + prodResolver?: string; 36 36 + devResolver?: string; 37 37 + }) { 26 38 return { 27 27 - name: 'vite-plugin-generate-metadata', 39 39 + name: "vite-plugin-generate-metadata", 28 40 config(_config: any, { mode }: any) { 29 29 - let appOrigin; 30 30 - if (mode === 'production') { 31 31 - appOrigin = prod 32 32 - if (!appOrigin || !appOrigin.startsWith('https://')) { 33 33 - throw new Error('VITE_APP_ORIGIN environment variable must be set to a valid HTTPS URL for production build.'); 41 41 + console.log('💡 vite mode =', mode) 42 42 + let appOrigin, resolver; 43 43 + if (mode === "production") { 44 44 + appOrigin = prod; 45 45 + resolver = prodResolver; 46 46 + if (!appOrigin || !appOrigin.startsWith("https://")) { 47 47 + throw new Error( 48 48 + "VITE_APP_ORIGIN environment variable must be set to a valid HTTPS URL for production build." 49 49 + ); 34 50 } 35 51 } else { 36 52 appOrigin = dev; 53 53 + resolver = devResolver; 37 54 } 38 38 - 39 39 - 55 55 + 40 56 const metadata = generateClientMetadata(appOrigin); 41 41 - const outputPath = path.resolve(process.cwd(), 'public', 'client-metadata.json'); 57 57 + const outputPath = path.resolve( 58 58 + process.cwd(), 59 59 + "public", 60 60 + "client-metadata.json" 61 61 + ); 42 62 43 63 fs.writeFileSync(outputPath, JSON.stringify(metadata, null, 2)); 44 64 65 65 + const resolvers = { 66 66 + resolver: resolver, 67 67 + }; 68 68 + const resolverOutPath = path.resolve( 69 69 + process.cwd(), 70 70 + "public", 71 71 + "resolvers.json" 72 72 + ); 73 73 + 74 74 + fs.writeFileSync(resolverOutPath, JSON.stringify(resolvers, null, 2)); 75 75 + 76 76 + 45 77 // /*mass comment*/ console.log(`✅ Generated client-metadata.json for ${appOrigin}`); 46 78 }, 47 79 }; 48 48 - } 80 80 + }

+10

package-lock.json

··· 29 29 "react": "^19.0.0", 30 30 "react-dom": "^19.0.0", 31 31 "react-player": "^3.3.2", 32 32 + "sonner": "^2.0.7", 32 33 "tailwindcss": "^4.0.6", 33 34 "tanstack-router-keepalive": "^1.0.0" 34 35 }, ··· 12543 12544 "csstype": "^3.1.0", 12544 12545 "seroval": "~1.3.0", 12545 12546 "seroval-plugins": "~1.3.0" 12547 12547 + } 12548 12548 + }, 12549 12549 + "node_modules/sonner": { 12550 12550 + "version": "2.0.7", 12551 12551 + "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.7.tgz", 12552 12552 + "integrity": "sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==", 12553 12553 + "peerDependencies": { 12554 12554 + "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc", 12555 12555 + "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc" 12546 12556 } 12547 12557 }, 12548 12558 "node_modules/source-map": {

+1

package.json

··· 33 33 "react": "^19.0.0", 34 34 "react-dom": "^19.0.0", 35 35 "react-player": "^3.3.2", 36 36 + "sonner": "^2.0.7", 36 37 "tailwindcss": "^4.0.6", 37 38 "tanstack-router-keepalive": "^1.0.0" 38 39 },

+3

src/auto-imports.d.ts

··· 20 20 const IconMdiAccountCircle: typeof import('~icons/mdi/account-circle.jsx').default 21 21 const IconMdiAccountPlus: typeof import('~icons/mdi/account-plus.jsx').default 22 22 const IconMdiCheck: typeof import('~icons/mdi/check.jsx').default 23 23 + const IconMdiClose: typeof import('~icons/mdi/close.jsx').default 23 24 const IconMdiMessageReplyTextOutline: typeof import('~icons/mdi/message-reply-text-outline.jsx').default 24 25 const IconMdiPencilOutline: typeof import('~icons/mdi/pencil-outline.jsx').default 26 26 + const IconMdiShield: typeof import('~icons/mdi/shield.jsx').default 27 27 + const IconMdiShieldOutline: typeof import('~icons/mdi/shield-outline.jsx').default 25 28 }

+37 -3

src/components/Import.tsx

··· 1 1 import { AtUri } from "@atproto/api"; 2 2 import { useNavigate, type UseNavigateResult } from "@tanstack/react-router"; 3 3 + import { useAtom } from "jotai"; 3 4 import { useState } from "react"; 5 5 + 6 6 + import { useAuth } from "~/providers/UnifiedAuthProvider"; 7 7 + import { lycanURLAtom } from "~/utils/atoms"; 8 8 + import { useQueryLycanStatus } from "~/utils/useQuery"; 4 9 5 10 /** 6 11 * Basically the best equivalent to Search that i can do 7 12 */ 8 8 - export function Import() { 9 9 - const [textInput, setTextInput] = useState<string | undefined>(); 13 13 + export function Import({ 14 14 + optionaltextstring, 15 15 + }: { 16 16 + optionaltextstring?: string; 17 17 + }) { 18 18 + const [textInput, setTextInput] = useState<string | undefined>( 19 19 + optionaltextstring 20 20 + ); 10 21 const navigate = useNavigate(); 11 22 23 23 + const { status } = useAuth(); 24 24 + const [lycandomain] = useAtom(lycanURLAtom); 25 25 + const lycanExists = lycandomain !== ""; 26 26 + const { data: lycanstatusdata } = useQueryLycanStatus(); 27 27 + const lycanIndexed = lycanstatusdata?.status === "finished" || false; 28 28 + const lycanIndexing = lycanstatusdata?.status === "in_progress" || false; 29 29 + const lycanIndexingProgress = lycanIndexing 30 30 + ? lycanstatusdata?.progress 31 31 + : undefined; 32 32 + const authed = status === "signedIn"; 33 33 + 34 34 + const lycanReady = lycanExists && lycanIndexed && authed; 35 35 + 12 36 const handleEnter = () => { 13 37 if (!textInput) return; 14 38 handleImport({ 15 39 text: textInput, 16 40 navigate, 41 41 + lycanReady: 42 42 + lycanReady || (!!lycanIndexingProgress && lycanIndexingProgress > 0), 17 43 }); 18 44 }; 45 45 + 46 46 + const placeholder = lycanReady ? "Search..." : "Import..."; 19 47 20 48 return ( 21 49 <div className="w-full relative"> ··· 23 51 24 52 <input 25 53 type="text" 26 26 - placeholder="Import..." 54 54 + placeholder={placeholder} 27 55 value={textInput} 28 56 onChange={(e) => setTextInput(e.target.value)} 29 57 onKeyDown={(e) => { ··· 38 66 function handleImport({ 39 67 text, 40 68 navigate, 69 69 + lycanReady, 41 70 }: { 42 71 text: string; 43 72 navigate: UseNavigateResult<string>; 73 73 + lycanReady?: boolean; 44 74 }) { 45 75 const trimmed = text.trim(); 46 76 // parse text ··· 147 177 // } catch { 148 178 // // continue 149 179 // } 180 180 + 181 181 + if (lycanReady) { 182 182 + navigate({ to: "/search", search: { q: text } }); 183 183 + } 150 184 }

+165 -22

src/components/UniversalPostRenderer.tsx

··· 1 1 + import * as ATPAPI from "@atproto/api"; 1 2 import { useNavigate } from "@tanstack/react-router"; 2 3 import DOMPurify from "dompurify"; 3 4 import { useAtom } from "jotai"; ··· 9 10 import { 10 11 composerAtom, 11 12 constellationURLAtom, 13 13 + enableBridgyTextAtom, 14 14 + enableWafrnTextAtom, 12 15 imgCDNAtom, 13 16 } from "~/utils/atoms"; 14 17 import { useHydratedEmbed } from "~/utils/useHydrated"; ··· 44 47 lightboxCallback?: (d: LightboxProps) => void; 45 48 maxReplies?: number; 46 49 isQuote?: boolean; 50 50 + filterNoReplies?: boolean; 51 51 + filterMustHaveMedia?: boolean; 52 52 + filterMustBeReply?: boolean; 47 53 } 48 54 49 55 // export async function cachedGetRecord({ ··· 156 162 lightboxCallback, 157 163 maxReplies, 158 164 isQuote, 165 165 + filterNoReplies, 166 166 + filterMustHaveMedia, 167 167 + filterMustBeReply, 159 168 }: UniversalPostRendererATURILoaderProps) { 160 169 // todo remove this once tree rendering is implemented, use a prop like isTree 161 170 const TEMPLINEAR = true; ··· 519 528 ? true 520 529 : maxReplies && !oldestOpsReplyElseNewestNonOpsReply 521 530 ? false 522 522 - : (maxReplies === 0 && (!replies || (!!replies && replies === 0))) ? false : bottomReplyLine 531 531 + : maxReplies === 0 && (!replies || (!!replies && replies === 0)) 532 532 + ? false 533 533 + : bottomReplyLine 523 534 } 524 535 topReplyLine={topReplyLine} 525 536 //bottomBorder={maxReplies&&oldestOpsReplyElseNewestNonOpsReply ? false : bottomBorder} ··· 541 552 lightboxCallback={lightboxCallback} 542 553 maxReplies={maxReplies} 543 554 isQuote={isQuote} 555 555 + filterNoReplies={filterNoReplies} 556 556 + filterMustHaveMedia={filterMustHaveMedia} 557 557 + filterMustBeReply={filterMustBeReply} 544 558 /> 545 559 <> 546 546 - {(maxReplies && maxReplies === 0 && replies && replies > 0) ? ( 560 560 + {maxReplies && maxReplies === 0 && replies && replies > 0 ? ( 547 561 <> 548 548 - {/* <div>hello</div> */} 549 549 - <MoreReplies atUri={atUri} /> 562 562 + {/* <div>hello</div> */} 563 563 + <MoreReplies atUri={atUri} /> 550 564 </> 551 551 - ) : (<></>)} 565 565 + ) : ( 566 566 + <></> 567 567 + )} 552 568 </> 553 569 {!isQuote && oldestOpsReplyElseNewestNonOpsReply && ( 554 570 <> ··· 643 659 lightboxCallback, 644 660 maxReplies, 645 661 isQuote, 662 662 + filterNoReplies, 663 663 + filterMustHaveMedia, 664 664 + filterMustBeReply, 646 665 }: { 647 666 postRecord: any; 648 667 profileRecord: any; ··· 665 684 lightboxCallback?: (d: LightboxProps) => void; 666 685 maxReplies?: number; 667 686 isQuote?: boolean; 687 687 + filterNoReplies?: boolean; 688 688 + filterMustHaveMedia?: boolean; 689 689 + filterMustBeReply?: boolean; 668 690 }) { 669 691 // /*mass comment*/ console.log(`received aturi: ${aturi} of post content: ${postRecord}`); 670 692 const navigate = useNavigate(); ··· 735 757 // run(); 736 758 // }, [postRecord, resolved?.did]); 737 759 760 760 + const hasEmbed = (postRecord?.value as ATPAPI.AppBskyFeedPost.Record)?.embed; 761 761 + const hasImages = hasEmbed?.$type === "app.bsky.embed.images"; 762 762 + const hasVideo = hasEmbed?.$type === "app.bsky.embed.video"; 763 763 + const isquotewithmedia = hasEmbed?.$type === "app.bsky.embed.recordWithMedia"; 764 764 + const isQuotewithImages = 765 765 + isquotewithmedia && 766 766 + (hasEmbed as ATPAPI.AppBskyEmbedRecordWithMedia.Main)?.media?.$type === 767 767 + "app.bsky.embed.images"; 768 768 + const isQuotewithVideo = 769 769 + isquotewithmedia && 770 770 + (hasEmbed as ATPAPI.AppBskyEmbedRecordWithMedia.Main)?.media?.$type === 771 771 + "app.bsky.embed.video"; 772 772 + 773 773 + const hasMedia = 774 774 + hasEmbed && 775 775 + (hasImages || hasVideo || isQuotewithImages || isQuotewithVideo); 776 776 + 738 777 const { 739 778 data: hydratedEmbed, 740 779 isLoading: isEmbedLoading, ··· 829 868 // }, [fakepost, get, set]); 830 869 const thereply = (fakepost?.record as AppBskyFeedPost.Record)?.reply?.parent 831 870 ?.uri; 832 832 - const feedviewpostreplydid = thereply ? new AtUri(thereply).host : undefined; 871 871 + const feedviewpostreplydid = 872 872 + thereply && !filterNoReplies ? new AtUri(thereply).host : undefined; 833 873 const replyhookvalue = useQueryIdentity( 834 874 feedviewpost ? feedviewpostreplydid : undefined 835 875 ); ··· 840 880 repostedby ? aturirepostbydid : undefined 841 881 ); 842 882 const feedviewpostrepostedbyhandle = repostedbyhookvalue?.data?.handle; 883 883 + 884 884 + if (filterNoReplies && thereply) return null; 885 885 + 886 886 + if (filterMustHaveMedia && !hasMedia) return null; 887 887 + 888 888 + if (filterMustBeReply && !thereply) return null; 889 889 + 843 890 return ( 844 891 <> 845 892 {/* <p> 846 893 {postRecord?.value?.embed.$type + " " + JSON.stringify(hydratedEmbed)} 847 894 </p> */} 895 895 + {/* <span>filtermustbereply is {filterMustBeReply ? "true" : "false"}</span> 896 896 + <span>thereply is {thereply ? "true" : "false"}</span> */} 848 897 <UniversalPostRenderer 849 898 expanded={detailed} 850 899 onPostClick={() => ··· 1203 1252 1204 1253 import defaultpfp from "~/../public/favicon.png"; 1205 1254 import { useAuth } from "~/providers/UnifiedAuthProvider"; 1206 1206 - import { FeedItemRenderAturiLoader, FollowButton, Mutual } from "~/routes/profile.$did"; 1255 1255 + import { renderSnack } from "~/routes/__root"; 1256 1256 + import { 1257 1257 + FeedItemRenderAturiLoader, 1258 1258 + FollowButton, 1259 1259 + Mutual, 1260 1260 + } from "~/routes/profile.$did"; 1207 1261 import type { LightboxProps } from "~/routes/profile.$did/post.$rkey.image.$i"; 1208 1262 import { useFastLike } from "~/utils/likeMutationQueue"; 1209 1263 // import type { OutputSchema } from "@atproto/api/dist/client/types/app/bsky/feed/getFeed"; ··· 1412 1466 : undefined; 1413 1467 1414 1468 const emergencySalt = randomString(); 1415 1415 - const fedi = (post.record as { bridgyOriginalText?: string }) 1469 1469 + 1470 1470 + const [showBridgyText] = useAtom(enableBridgyTextAtom); 1471 1471 + const [showWafrnText] = useAtom(enableWafrnTextAtom); 1472 1472 + 1473 1473 + const unfedibridgy = (post.record as { bridgyOriginalText?: string }) 1416 1474 .bridgyOriginalText; 1475 1475 + const unfediwafrnPartial = (post.record as { fullText?: string }).fullText; 1476 1476 + const unfediwafrnTags = (post.record as { fullTags?: string }).fullTags; 1477 1477 + const unfediwafrnUnHost = (post.record as { fediverseId?: string }) 1478 1478 + .fediverseId; 1479 1479 + 1480 1480 + const undfediwafrnHost = unfediwafrnUnHost 1481 1481 + ? new URL(unfediwafrnUnHost).hostname 1482 1482 + : undefined; 1483 1483 + 1484 1484 + const tags = unfediwafrnTags 1485 1485 + ? unfediwafrnTags 1486 1486 + .split("\n") 1487 1487 + .map((t) => t.trim()) 1488 1488 + .filter(Boolean) 1489 1489 + : undefined; 1490 1490 + 1491 1491 + const links = tags 1492 1492 + ? tags 1493 1493 + .map((tag) => { 1494 1494 + const encoded = encodeURIComponent(tag); 1495 1495 + return `<a href="https://${undfediwafrnHost}/search/${encoded}" target="_blank">#${tag.replaceAll(" ", "-")}</a>`; 1496 1496 + }) 1497 1497 + .join("<br>") 1498 1498 + : ""; 1499 1499 + 1500 1500 + const unfediwafrn = unfediwafrnPartial 1501 1501 + ? unfediwafrnPartial + (links ? `<br>${links}` : "") 1502 1502 + : undefined; 1503 1503 + 1504 1504 + const fedi = 1505 1505 + (showBridgyText ? unfedibridgy : undefined) ?? 1506 1506 + (showWafrnText ? unfediwafrn : undefined); 1417 1507 1418 1508 /* fuck you */ 1419 1509 const isMainItem = false; ··· 1552 1642 {post.author.displayName || post.author.handle}{" "} 1553 1643 </div> 1554 1644 <div className="text-gray-500 dark:text-gray-400 text-md flex flex-row gap-1"> 1555 1555 - <Mutual targetdidorhandle={post.author.did} />@{post.author.handle}{" "} 1645 1645 + <Mutual targetdidorhandle={post.author.did} />@ 1646 1646 + {post.author.handle}{" "} 1556 1647 </div> 1557 1648 </div> 1558 1649 {uprrrsauthor?.description && ( ··· 1800 1891 </div> 1801 1892 </> 1802 1893 )} 1803 1803 - <div style={{ paddingTop: post.embed && !concise && depth < 1 ? 4 : 0 }}> 1894 1894 + <div 1895 1895 + style={{ 1896 1896 + paddingTop: post.embed && !concise && depth < 1 ? 4 : 0, 1897 1897 + }} 1898 1898 + > 1804 1899 <> 1805 1900 {expanded && ( 1806 1901 <div ··· 1918 2013 "/post/" + 1919 2014 post.uri.split("/").pop() 1920 2015 ); 2016 2016 + renderSnack({ 2017 2017 + title: "Copied to clipboard!", 2018 2018 + }); 1921 2019 } catch (_e) { 1922 2020 // idk 2021 2021 + renderSnack({ 2022 2022 + title: "Failed to copy link", 2023 2023 + }); 1923 2024 } 1924 2025 }} 1925 2026 style={{ ··· 1928 2029 > 1929 2030 <MdiShareVariant /> 1930 2031 </HitSlopButton> 1931 1931 - <span style={btnstyle}> 1932 1932 - <MdiMoreHoriz /> 1933 1933 - </span> 2032 2032 + <HitSlopButton 2033 2033 + onClick={() => { 2034 2034 + renderSnack({ 2035 2035 + title: "Not implemented yet...", 2036 2036 + }); 2037 2037 + }} 2038 2038 + > 2039 2039 + <span style={btnstyle}> 2040 2040 + <MdiMoreHoriz /> 2041 2041 + </span> 2042 2042 + </HitSlopButton> 1934 2043 </div> 1935 2044 </div> 1936 2045 )} ··· 2169 2278 // <MaybeFeedCard view={embed.record} /> 2170 2279 // </div> 2171 2280 // ) 2172 2172 - } else if (!!reallybaduri && !!reallybadaturi && reallybadaturi.collection === "app.bsky.feed.generator") { 2173 2173 - return <div className="rounded-xl border"><FeedItemRenderAturiLoader aturi={reallybaduri} disableBottomBorder/></div> 2281 2281 + } else if ( 2282 2282 + !!reallybaduri && 2283 2283 + !!reallybadaturi && 2284 2284 + reallybadaturi.collection === "app.bsky.feed.generator" 2285 2285 + ) { 2286 2286 + return ( 2287 2287 + <div className="rounded-xl border"> 2288 2288 + <FeedItemRenderAturiLoader aturi={reallybaduri} disableBottomBorder /> 2289 2289 + </div> 2290 2290 + ); 2174 2291 } 2175 2292 2176 2293 // list embed ··· 2182 2299 // <MaybeListCard view={embed.record} /> 2183 2300 // </div> 2184 2301 // ) 2185 2185 - } else if (!!reallybaduri && !!reallybadaturi && reallybadaturi.collection === "app.bsky.graph.list") { 2186 2186 - return <div className="rounded-xl border"><FeedItemRenderAturiLoader aturi={reallybaduri} disableBottomBorder listmode disablePropagation /></div> 2302 2302 + } else if ( 2303 2303 + !!reallybaduri && 2304 2304 + !!reallybadaturi && 2305 2305 + reallybadaturi.collection === "app.bsky.graph.list" 2306 2306 + ) { 2307 2307 + return ( 2308 2308 + <div className="rounded-xl border"> 2309 2309 + <FeedItemRenderAturiLoader 2310 2310 + aturi={reallybaduri} 2311 2311 + disableBottomBorder 2312 2312 + listmode 2313 2313 + disablePropagation 2314 2314 + /> 2315 2315 + </div> 2316 2316 + ); 2187 2317 } 2188 2318 2189 2319 // starter pack embed ··· 2195 2325 // <StarterPackCard starterPack={embed.record} /> 2196 2326 // </div> 2197 2327 // ) 2198 2198 - } else if (!!reallybaduri && !!reallybadaturi && reallybadaturi.collection === "app.bsky.graph.starterpack") { 2199 2199 - return <div className="rounded-xl border"><FeedItemRenderAturiLoader aturi={reallybaduri} disableBottomBorder listmode disablePropagation /></div> 2328 2328 + } else if ( 2329 2329 + !!reallybaduri && 2330 2330 + !!reallybadaturi && 2331 2331 + reallybadaturi.collection === "app.bsky.graph.starterpack" 2332 2332 + ) { 2333 2333 + return ( 2334 2334 + <div className="rounded-xl border"> 2335 2335 + <FeedItemRenderAturiLoader 2336 2336 + aturi={reallybaduri} 2337 2337 + disableBottomBorder 2338 2338 + listmode 2339 2339 + disablePropagation 2340 2340 + /> 2341 2341 + </div> 2342 2342 + ); 2200 2343 } 2201 2344 2202 2345 // quote post ··· 2690 2833 className="link" 2691 2834 style={{ 2692 2835 textDecoration: "none", 2693 2693 - color: "rgb(29, 122, 242)", 2836 2836 + color: "var(--link-text-color)", 2694 2837 wordBreak: "break-all", 2695 2838 }} 2696 2839 target="_blank" ··· 2710 2853 result.push( 2711 2854 <span 2712 2855 key={start} 2713 2713 - style={{ color: "rgb(29, 122, 242)" }} 2856 2856 + style={{ color: "var(--link-text-color)" }} 2714 2857 className=" cursor-pointer" 2715 2858 onClick={(e) => { 2716 2859 e.stopPropagation(); ··· 2728 2871 result.push( 2729 2872 <span 2730 2873 key={start} 2731 2731 - style={{ color: "rgb(29, 122, 242)" }} 2874 2874 + style={{ color: "var(--link-text-color)" }} 2732 2875 onClick={(e) => { 2733 2876 e.stopPropagation(); 2734 2877 }}

+6

src/providers/LikeMutationQueueProvider.tsx

··· 5 5 import React, { createContext, use, useCallback, useEffect, useRef } from "react"; 6 6 7 7 import { useAuth } from "~/providers/UnifiedAuthProvider"; 8 8 + import { renderSnack } from "~/routes/__root"; 8 9 import { constellationURLAtom, internalLikedPostsAtom } from "~/utils/atoms"; 9 10 import { constructArbitraryQuery, constructConstellationQuery, type linksRecordsResponse } from "~/utils/useQuery"; 10 11 ··· 125 126 } 126 127 } catch (err) { 127 128 console.error("Like mutation failed, reverting:", err); 129 129 + renderSnack({ 130 130 + title: 'Like Mutation Failed', 131 131 + description: 'Please try again.', 132 132 + //button: { label: 'Try Again', onClick: () => console.log('whatever') }, 133 133 + }) 128 134 if (mutation.type === 'like') { 129 135 setFastState(mutation.target, null); 130 136 } else if (mutation.type === 'unlike') {

+21

src/routeTree.gen.ts

··· 12 12 import { Route as SettingsRouteImport } from './routes/settings' 13 13 import { Route as SearchRouteImport } from './routes/search' 14 14 import { Route as NotificationsRouteImport } from './routes/notifications' 15 15 + import { Route as ModerationRouteImport } from './routes/moderation' 15 16 import { Route as FeedsRouteImport } from './routes/feeds' 16 17 import { Route as PathlessLayoutRouteImport } from './routes/_pathlessLayout' 17 18 import { Route as IndexRouteImport } from './routes/index' ··· 42 43 const NotificationsRoute = NotificationsRouteImport.update({ 43 44 id: '/notifications', 44 45 path: '/notifications', 46 46 + getParentRoute: () => rootRouteImport, 47 47 + } as any) 48 48 + const ModerationRoute = ModerationRouteImport.update({ 49 49 + id: '/moderation', 50 50 + path: '/moderation', 45 51 getParentRoute: () => rootRouteImport, 46 52 } as any) 47 53 const FeedsRoute = FeedsRouteImport.update({ ··· 133 139 export interface FileRoutesByFullPath { 134 140 '/': typeof IndexRoute 135 141 '/feeds': typeof FeedsRoute 142 142 + '/moderation': typeof ModerationRoute 136 143 '/notifications': typeof NotificationsRoute 137 144 '/search': typeof SearchRoute 138 145 '/settings': typeof SettingsRoute ··· 152 159 export interface FileRoutesByTo { 153 160 '/': typeof IndexRoute 154 161 '/feeds': typeof FeedsRoute 162 162 + '/moderation': typeof ModerationRoute 155 163 '/notifications': typeof NotificationsRoute 156 164 '/search': typeof SearchRoute 157 165 '/settings': typeof SettingsRoute ··· 173 181 '/': typeof IndexRoute 174 182 '/_pathlessLayout': typeof PathlessLayoutRouteWithChildren 175 183 '/feeds': typeof FeedsRoute 184 184 + '/moderation': typeof ModerationRoute 176 185 '/notifications': typeof NotificationsRoute 177 186 '/search': typeof SearchRoute 178 187 '/settings': typeof SettingsRoute ··· 195 204 fullPaths: 196 205 | '/' 197 206 | '/feeds' 207 207 + | '/moderation' 198 208 | '/notifications' 199 209 | '/search' 200 210 | '/settings' ··· 214 224 to: 215 225 | '/' 216 226 | '/feeds' 227 227 + | '/moderation' 217 228 | '/notifications' 218 229 | '/search' 219 230 | '/settings' ··· 234 245 | '/' 235 246 | '/_pathlessLayout' 236 247 | '/feeds' 248 248 + | '/moderation' 237 249 | '/notifications' 238 250 | '/search' 239 251 | '/settings' ··· 256 268 IndexRoute: typeof IndexRoute 257 269 PathlessLayoutRoute: typeof PathlessLayoutRouteWithChildren 258 270 FeedsRoute: typeof FeedsRoute 271 271 + ModerationRoute: typeof ModerationRoute 259 272 NotificationsRoute: typeof NotificationsRoute 260 273 SearchRoute: typeof SearchRoute 261 274 SettingsRoute: typeof SettingsRoute ··· 288 301 path: '/notifications' 289 302 fullPath: '/notifications' 290 303 preLoaderRoute: typeof NotificationsRouteImport 304 304 + parentRoute: typeof rootRouteImport 305 305 + } 306 306 + '/moderation': { 307 307 + id: '/moderation' 308 308 + path: '/moderation' 309 309 + fullPath: '/moderation' 310 310 + preLoaderRoute: typeof ModerationRouteImport 291 311 parentRoute: typeof rootRouteImport 292 312 } 293 313 '/feeds': { ··· 456 476 IndexRoute: IndexRoute, 457 477 PathlessLayoutRoute: PathlessLayoutRouteWithChildren, 458 478 FeedsRoute: FeedsRoute, 479 479 + ModerationRoute: ModerationRoute, 459 480 NotificationsRoute: NotificationsRoute, 460 481 SearchRoute: SearchRoute, 461 482 SettingsRoute: SettingsRoute,

+170 -11

src/routes/__root.tsx

··· 14 14 import { TanStackRouterDevtools } from "@tanstack/react-router-devtools"; 15 15 import { useAtom } from "jotai"; 16 16 import * as React from "react"; 17 17 + import { toast as sonnerToast } from "sonner"; 18 18 + import { Toaster } from "sonner"; 17 19 import { KeepAliveOutlet, KeepAliveProvider } from "tanstack-router-keepalive"; 18 20 19 21 import { Composer } from "~/components/Composer"; ··· 83 85 <LikeMutationQueueProvider> 84 86 <RootDocument> 85 87 <KeepAliveProvider> 88 88 + <AppToaster /> 86 89 <KeepAliveOutlet /> 87 90 </KeepAliveProvider> 88 91 </RootDocument> ··· 91 94 ); 92 95 } 93 96 97 97 + export function AppToaster() { 98 98 + return ( 99 99 + <Toaster 100 100 + position="bottom-center" 101 101 + toastOptions={{ 102 102 + duration: 4000, 103 103 + }} 104 104 + /> 105 105 + ); 106 106 + } 107 107 + 108 108 + export function renderSnack({ 109 109 + title, 110 110 + description, 111 111 + button, 112 112 + }: Omit<ToastProps, "id">) { 113 113 + return sonnerToast.custom((id) => ( 114 114 + <Snack 115 115 + id={id} 116 116 + title={title} 117 117 + description={description} 118 118 + button={ 119 119 + button?.label 120 120 + ? { 121 121 + label: button?.label, 122 122 + onClick: () => { 123 123 + button?.onClick?.(); 124 124 + }, 125 125 + } 126 126 + : undefined 127 127 + } 128 128 + /> 129 129 + )); 130 130 + } 131 131 + 132 132 + function Snack(props: ToastProps) { 133 133 + const { title, description, button, id } = props; 134 134 + 135 135 + return ( 136 136 + <div 137 137 + role="status" 138 138 + aria-live="polite" 139 139 + className=" 140 140 + w-full md:max-w-[520px] 141 141 + flex items-center justify-between 142 142 + rounded-md 143 143 + px-4 py-3 144 144 + shadow-sm 145 145 + dark:bg-gray-300 dark:text-gray-900 146 146 + bg-gray-700 text-gray-100 147 147 + ring-1 dark:ring-gray-200 ring-gray-800 148 148 + " 149 149 + > 150 150 + <div className="flex-1 min-w-0"> 151 151 + <p className="text-sm font-medium truncate">{title}</p> 152 152 + {description ? ( 153 153 + <p className="mt-1 text-sm dark:text-gray-600 text-gray-300 truncate"> 154 154 + {description} 155 155 + </p> 156 156 + ) : null} 157 157 + </div> 158 158 + 159 159 + {button ? ( 160 160 + <div className="ml-4 flex-shrink-0"> 161 161 + <button 162 162 + className=" 163 163 + text-sm font-medium 164 164 + px-3 py-1 rounded-md 165 165 + bg-gray-200 text-gray-900 166 166 + hover:bg-gray-300 167 167 + dark:bg-gray-800 dark:text-gray-100 dark:hover:bg-gray-700 168 168 + focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-300 dark:focus:ring-gray-700 169 169 + " 170 170 + onClick={() => { 171 171 + button.onClick(); 172 172 + sonnerToast.dismiss(id); 173 173 + }} 174 174 + > 175 175 + {button.label} 176 176 + </button> 177 177 + </div> 178 178 + ) : null} 179 179 + <button className=" ml-4" 180 180 + onClick={() => { 181 181 + sonnerToast.dismiss(id); 182 182 + }} 183 183 + > 184 184 + <IconMdiClose /> 185 185 + </button> 186 186 + </div> 187 187 + ); 188 188 + } 189 189 + 190 190 + /* Types */ 191 191 + interface ToastProps { 192 192 + id: string | number; 193 193 + title: string; 194 194 + description?: string; 195 195 + button?: { 196 196 + label: string; 197 197 + onClick: () => void; 198 198 + }; 199 199 + } 200 200 + 94 201 function RootDocument({ children }: { children: React.ReactNode }) { 95 202 useAtomCssVar(hueAtom, "--tw-gray-hue"); 96 203 const location = useLocation(); ··· 106 213 const isSettings = location.pathname.startsWith("/settings"); 107 214 const isSearch = location.pathname.startsWith("/search"); 108 215 const isFeeds = location.pathname.startsWith("/feeds"); 216 216 + const isModeration = location.pathname.startsWith("/moderation"); 109 217 110 218 const locationEnum: 111 219 | "feeds" ··· 113 221 | "settings" 114 222 | "notifications" 115 223 | "profile" 224 224 + | "moderation" 116 225 | "home" = isFeeds 117 226 ? "feeds" 118 227 : isSearch ··· 123 232 ? "notifications" 124 233 : isProfile 125 234 ? "profile" 126 126 - : "home"; 235 235 + : isModeration 236 236 + ? "moderation" 237 237 + : "home"; 127 238 128 239 const [, setComposerPost] = useAtom(composerAtom); 129 240 ··· 134 245 <div className="min-h-screen flex justify-center bg-gray-50 dark:bg-gray-950"> 135 246 <nav className="hidden lg:flex h-screen w-[250px] flex-col gap-0 p-4 dark:border-gray-800 sticky top-0 self-start"> 136 247 <div className="flex items-center gap-3 mb-4"> 137 137 - <FluentEmojiHighContrastGlowingStar className="h-8 w-8" style={{color: "oklch(0.6616 0.2249 calc(25.88 + (var(--safe-hue) - 28))"}} /> 248 248 + <FluentEmojiHighContrastGlowingStar 249 249 + className="h-8 w-8" 250 250 + style={{ 251 251 + color: 252 252 + "oklch(0.6616 0.2249 calc(25.88 + (var(--safe-hue) - 28))", 253 253 + }} 254 254 + /> 138 255 <span className="font-extrabold text-2xl tracking-tight text-gray-900 dark:text-gray-100"> 139 256 Red Dwarf{" "} 140 257 {/* <span className="text-gray-500 dark:text-gray-400 text-sm"> ··· 198 315 text="Feeds" 199 316 /> 200 317 <MaterialNavItem 318 318 + InactiveIcon={<IconMdiShieldOutline className="w-6 h-6" />} 319 319 + ActiveIcon={<IconMdiShield className="w-6 h-6" />} 320 320 + active={locationEnum === "moderation"} 321 321 + onClickCallbback={() => 322 322 + navigate({ 323 323 + to: "/moderation", 324 324 + //params: { did: agent.assertDid }, 325 325 + }) 326 326 + } 327 327 + text="Moderation" 328 328 + /> 329 329 + <MaterialNavItem 201 330 InactiveIcon={ 202 331 <IconMaterialSymbolsAccountCircleOutline className="w-6 h-6" /> 203 332 } ··· 235 364 InactiveIcon={<IconMdiPencilOutline className="w-6 h-6" />} 236 365 ActiveIcon={<IconMdiPencilOutline className="w-6 h-6" />} 237 366 //active={true} 238 238 - onClickCallbback={() => setComposerPost({ kind: 'root' })} 367 367 + onClickCallbback={() => setComposerPost({ kind: "root" })} 239 368 text="Post" 240 369 /> 241 370 </div> ··· 373 502 374 503 <nav className="hidden sm:flex items-center lg:hidden h-screen flex-col gap-2 p-4 dark:border-gray-800 sticky top-0 self-start"> 375 504 <div className="flex items-center gap-3 mb-4"> 376 376 - <FluentEmojiHighContrastGlowingStar className="h-8 w-8" style={{color: "oklch(0.6616 0.2249 calc(25.88 + (var(--safe-hue) - 28))"}} /> 505 505 + <FluentEmojiHighContrastGlowingStar 506 506 + className="h-8 w-8" 507 507 + style={{ 508 508 + color: 509 509 + "oklch(0.6616 0.2249 calc(25.88 + (var(--safe-hue) - 28))", 510 510 + }} 511 511 + /> 377 512 </div> 378 513 <MaterialNavItem 379 514 small ··· 436 571 /> 437 572 <MaterialNavItem 438 573 small 574 574 + InactiveIcon={<IconMdiShieldOutline className="w-6 h-6" />} 575 575 + ActiveIcon={<IconMdiShield className="w-6 h-6" />} 576 576 + active={locationEnum === "moderation"} 577 577 + onClickCallbback={() => 578 578 + navigate({ 579 579 + to: "/moderation", 580 580 + //params: { did: agent.assertDid }, 581 581 + }) 582 582 + } 583 583 + text="Moderation" 584 584 + /> 585 585 + <MaterialNavItem 586 586 + small 439 587 InactiveIcon={ 440 588 <IconMaterialSymbolsAccountCircleOutline className="w-6 h-6" /> 441 589 } ··· 475 623 InactiveIcon={<IconMdiPencilOutline className="w-6 h-6" />} 476 624 ActiveIcon={<IconMdiPencilOutline className="w-6 h-6" />} 477 625 //active={true} 478 478 - onClickCallbback={() => setComposerPost({ kind: 'root' })} 626 626 + onClickCallbback={() => setComposerPost({ kind: "root" })} 479 627 text="Post" 480 628 /> 481 629 </div> ··· 485 633 <button 486 634 className="lg:hidden fixed bottom-22 right-4 z-50 bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 rounded-2xl w-14 h-14 flex items-center justify-center transition-all" 487 635 style={{ boxShadow: "0 4px 24px 0 rgba(0,0,0,0.12)" }} 488 488 - onClick={() => setComposerPost({ kind: 'root' })} 636 636 + onClick={() => setComposerPost({ kind: "root" })} 489 637 type="button" 490 638 aria-label="Create Post" 491 639 > ··· 502 650 </main> 503 651 504 652 <aside className="hidden lg:flex h-screen w-[250px] sticky top-0 self-start flex-col"> 505 505 - <div className="px-4 pt-4"><Import /></div> 653 653 + <div className="px-4 pt-4"> 654 654 + <Import /> 655 655 + </div> 506 656 <Login /> 507 657 508 658 <div className="flex-1"></div> 509 659 <p className="text-xs text-gray-400 dark:text-gray-500 text-justify mx-4 mb-4"> 510 510 - Red Dwarf is a Bluesky client that does not rely on any Bluesky API App Servers. Instead, it uses Microcosm to fetch records directly from each users' PDS (via Slingshot) and connect them using backlinks (via Constellation) 660 660 + Red Dwarf is a Bluesky client that does not rely on any Bluesky API 661 661 + App Servers. Instead, it uses Microcosm to fetch records directly 662 662 + from each users' PDS (via Slingshot) and connect them using 663 663 + backlinks (via Constellation) 511 664 </p> 512 665 </aside> 513 666 </div> ··· 654 807 <IconMaterialSymbolsSettingsOutline className="w-6 h-6" /> 655 808 } 656 809 ActiveIcon={<IconMaterialSymbolsSettings className="w-6 h-6" />} 657 657 - active={locationEnum === "settings"} 810 810 + active={locationEnum === "settings" || locationEnum === "feeds" || locationEnum === "moderation"} 658 811 onClickCallbback={() => 659 812 navigate({ 660 813 to: "/settings", ··· 683 836 ) : ( 684 837 <div className="lg:hidden flex items-center fixed bottom-0 left-0 right-0 justify-between px-4 py-3 border-0 shadow border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 z-10"> 685 838 <div className="flex items-center gap-2"> 686 686 - <FluentEmojiHighContrastGlowingStar className="h-6 w-6" style={{color: "oklch(0.6616 0.2249 calc(25.88 + (var(--safe-hue) - 28))"}} /> 839 839 + <FluentEmojiHighContrastGlowingStar 840 840 + className="h-6 w-6" 841 841 + style={{ 842 842 + color: 843 843 + "oklch(0.6616 0.2249 calc(25.88 + (var(--safe-hue) - 28))", 844 844 + }} 845 845 + /> 687 846 <span className="font-bold text-lg text-gray-900 dark:text-gray-100"> 688 847 Red Dwarf{" "} 689 848 {/* <span className="text-gray-500 dark:text-gray-400 text-sm"> ··· 703 862 ); 704 863 } 705 864 706 706 - function MaterialNavItem({ 865 865 + export function MaterialNavItem({ 707 866 InactiveIcon, 708 867 ActiveIcon, 709 868 text,

+18 -1

src/routes/feeds.tsx

··· 1 1 import { createFileRoute } from "@tanstack/react-router"; 2 2 3 3 + import { Header } from "~/components/Header"; 4 4 + 3 5 export const Route = createFileRoute("/feeds")({ 4 6 component: Feeds, 5 7 }); 6 8 7 9 export function Feeds() { 8 8 - return <div className="p-6">Feeds page (coming soon)</div>; 10 10 + return ( 11 11 + <div className=""> 12 12 + <Header 13 13 + title={`Feeds`} 14 14 + backButtonCallback={() => { 15 15 + if (window.history.length > 1) { 16 16 + window.history.back(); 17 17 + } else { 18 18 + window.location.assign("/"); 19 19 + } 20 20 + }} 21 21 + bottomBorderDisabled={true} 22 22 + /> 23 23 + Feeds page (coming soon) 24 24 + </div> 25 25 + ); 9 26 }

+269

src/routes/moderation.tsx

··· 1 1 + import * as ATPAPI from "@atproto/api"; 2 2 + import { 3 3 + isAdultContentPref, 4 4 + isBskyAppStatePref, 5 5 + isContentLabelPref, 6 6 + isFeedViewPref, 7 7 + isLabelersPref, 8 8 + isMutedWordsPref, 9 9 + isSavedFeedsPref, 10 10 + } from "@atproto/api/dist/client/types/app/bsky/actor/defs"; 11 11 + import { createFileRoute } from "@tanstack/react-router"; 12 12 + import { useAtom } from "jotai"; 13 13 + import { Switch } from "radix-ui"; 14 14 + 15 15 + import { Header } from "~/components/Header"; 16 16 + import { useAuth } from "~/providers/UnifiedAuthProvider"; 17 17 + import { quickAuthAtom } from "~/utils/atoms"; 18 18 + import { useQueryIdentity, useQueryPreferences } from "~/utils/useQuery"; 19 19 + 20 20 + import { renderSnack } from "./__root"; 21 21 + import { NotificationItem } from "./notifications"; 22 22 + import { SettingHeading } from "./settings"; 23 23 + 24 24 + export const Route = createFileRoute("/moderation")({ 25 25 + component: RouteComponent, 26 26 + }); 27 27 + 28 28 + function RouteComponent() { 29 29 + const { agent } = useAuth(); 30 30 + 31 31 + const [quickAuth, setQuickAuth] = useAtom(quickAuthAtom); 32 32 + const isAuthRestoring = quickAuth ? status === "loading" : false; 33 33 + 34 34 + const identityresultmaybe = useQueryIdentity( 35 35 + !isAuthRestoring ? agent?.did : undefined 36 36 + ); 37 37 + const identity = identityresultmaybe?.data; 38 38 + 39 39 + const prefsresultmaybe = useQueryPreferences({ 40 40 + agent: !isAuthRestoring ? (agent ?? undefined) : undefined, 41 41 + pdsUrl: !isAuthRestoring ? identity?.pds : undefined, 42 42 + }); 43 43 + const rawprefs = prefsresultmaybe?.data?.preferences as 44 44 + | ATPAPI.AppBskyActorGetPreferences.OutputSchema["preferences"] 45 45 + | undefined; 46 46 + 47 47 + //console.log(JSON.stringify(prefs, null, 2)) 48 48 + 49 49 + const parsedPref = parsePreferences(rawprefs); 50 50 + 51 51 + return ( 52 52 + <div> 53 53 + <Header 54 54 + title={`Moderation`} 55 55 + backButtonCallback={() => { 56 56 + if (window.history.length > 1) { 57 57 + window.history.back(); 58 58 + } else { 59 59 + window.location.assign("/"); 60 60 + } 61 61 + }} 62 62 + bottomBorderDisabled={true} 63 63 + /> 64 64 + {/* <SettingHeading title="Moderation Tools" /> 65 65 + <p> 66 66 + todo: add all these: 67 67 + <br /> 68 68 + - Interaction settings 69 69 + <br /> 70 70 + - Muted words & tags 71 71 + <br /> 72 72 + - Moderation lists 73 73 + <br /> 74 74 + - Muted accounts 75 75 + <br /> 76 76 + - Blocked accounts 77 77 + <br /> 78 78 + - Verification settings 79 79 + <br /> 80 80 + </p> */} 81 81 + <SettingHeading title="Content Filters" /> 82 82 + <div> 83 83 + <div className="flex items-center gap-4 px-4 py-2 border-b"> 84 84 + <label 85 85 + htmlFor={`switch-${"hardcoded"}`} 86 86 + className="flex flex-row flex-1" 87 87 + > 88 88 + <div className="flex flex-col"> 89 89 + <span className="text-md">{"Adult Content"}</span> 90 90 + <span className="text-sm text-gray-500 dark:text-gray-400"> 91 91 + {"Enable adult content"} 92 92 + </span> 93 93 + </div> 94 94 + </label> 95 95 + 96 96 + <Switch.Root 97 97 + id={`switch-${"hardcoded"}`} 98 98 + checked={parsedPref?.adultContentEnabled} 99 99 + onCheckedChange={(v) => { 100 100 + renderSnack({ 101 101 + title: "Sorry... Modifying preferences is not implemented yet", 102 102 + description: "You can use another app to change preferences", 103 103 + //button: { label: 'Try Again', onClick: () => console.log('whatever') }, 104 104 + }); 105 105 + }} 106 106 + className="m3switch root" 107 107 + > 108 108 + <Switch.Thumb className="m3switch thumb " /> 109 109 + </Switch.Root> 110 110 + </div> 111 111 + <div className=""> 112 112 + {Object.entries(parsedPref?.contentLabelPrefs ?? {}).map( 113 113 + ([label, visibility]) => ( 114 114 + <div 115 115 + key={label} 116 116 + className="flex justify-between border-b py-2 px-4" 117 117 + > 118 118 + <label 119 119 + htmlFor={`switch-${"hardcoded"}`} 120 120 + className="flex flex-row flex-1" 121 121 + > 122 122 + <div className="flex flex-col"> 123 123 + <span className="text-md">{label}</span> 124 124 + <span className="text-sm text-gray-500 dark:text-gray-400"> 125 125 + {"uknown labeler"} 126 126 + </span> 127 127 + </div> 128 128 + </label> 129 129 + {/* <span className="text-md text-gray-500 dark:text-gray-400"> 130 130 + {visibility} 131 131 + </span> */} 132 132 + <TripleToggle 133 133 + value={visibility as "ignore" | "warn" | "hide"} 134 134 + /> 135 135 + </div> 136 136 + ) 137 137 + )} 138 138 + </div> 139 139 + </div> 140 140 + <SettingHeading title="Advanced" /> 141 141 + {parsedPref?.labelers.map((labeler) => { 142 142 + return ( 143 143 + <NotificationItem 144 144 + key={labeler} 145 145 + notification={labeler} 146 146 + labeler={true} 147 147 + /> 148 148 + ); 149 149 + })} 150 150 + </div> 151 151 + ); 152 152 + } 153 153 + 154 154 + export function TripleToggle({ 155 155 + value, 156 156 + onChange, 157 157 + }: { 158 158 + value: "ignore" | "warn" | "hide"; 159 159 + onChange?: (newValue: "ignore" | "warn" | "hide") => void; 160 160 + }) { 161 161 + const options: Array<"ignore" | "warn" | "hide"> = ["ignore", "warn", "hide"]; 162 162 + return ( 163 163 + <div className="flex rounded-full bg-gray-200 dark:bg-gray-800 p-1 text-sm"> 164 164 + {options.map((opt) => { 165 165 + const isActive = opt === value; 166 166 + return ( 167 167 + <button 168 168 + key={opt} 169 169 + onClick={() => { 170 170 + renderSnack({ 171 171 + title: "Sorry... Modifying preferences is not implemented yet", 172 172 + description: "You can use another app to change preferences", 173 173 + //button: { label: 'Try Again', onClick: () => console.log('whatever') }, 174 174 + }); 175 175 + onChange?.(opt); 176 176 + }} 177 177 + className={`flex-1 px-3 py-1.5 rounded-full transition-colors ${ 178 178 + isActive 179 179 + ? "bg-gray-400 dark:bg-gray-600 text-white" 180 180 + : "text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-700" 181 181 + }`} 182 182 + > 183 183 + {" "} 184 184 + {opt.charAt(0).toUpperCase() + opt.slice(1)} 185 185 + </button> 186 186 + ); 187 187 + })} 188 188 + </div> 189 189 + ); 190 190 + } 191 191 + 192 192 + type PrefItem = 193 193 + ATPAPI.AppBskyActorGetPreferences.OutputSchema["preferences"][number]; 194 194 + 195 195 + export interface NormalizedPreferences { 196 196 + contentLabelPrefs: Record<string, string>; 197 197 + mutedWords: string[]; 198 198 + feedViewPrefs: Record<string, any>; 199 199 + labelers: string[]; 200 200 + adultContentEnabled: boolean; 201 201 + savedFeeds: { 202 202 + pinned: string[]; 203 203 + saved: string[]; 204 204 + }; 205 205 + nuxs: string[]; 206 206 + } 207 207 + 208 208 + export function parsePreferences( 209 209 + prefs?: PrefItem[] 210 210 + ): NormalizedPreferences | undefined { 211 211 + if (!prefs) return undefined; 212 212 + const normalized: NormalizedPreferences = { 213 213 + contentLabelPrefs: {}, 214 214 + mutedWords: [], 215 215 + feedViewPrefs: {}, 216 216 + labelers: [], 217 217 + adultContentEnabled: false, 218 218 + savedFeeds: { pinned: [], saved: [] }, 219 219 + nuxs: [], 220 220 + }; 221 221 + 222 222 + for (const pref of prefs) { 223 223 + switch (pref.$type) { 224 224 + case "app.bsky.actor.defs#contentLabelPref": 225 225 + if (!isContentLabelPref(pref)) break; 226 226 + normalized.contentLabelPrefs[pref.label] = pref.visibility; 227 227 + break; 228 228 + 229 229 + case "app.bsky.actor.defs#mutedWordsPref": 230 230 + if (!isMutedWordsPref(pref)) break; 231 231 + for (const item of pref.items ?? []) { 232 232 + normalized.mutedWords.push(item.value); 233 233 + } 234 234 + break; 235 235 + 236 236 + case "app.bsky.actor.defs#feedViewPref": 237 237 + if (!isFeedViewPref(pref)) break; 238 238 + normalized.feedViewPrefs[pref.feed] = pref; 239 239 + break; 240 240 + 241 241 + case "app.bsky.actor.defs#labelersPref": 242 242 + if (!isLabelersPref(pref)) break; 243 243 + normalized.labelers.push(...(pref.labelers?.map((l) => l.did) ?? [])); 244 244 + break; 245 245 + 246 246 + case "app.bsky.actor.defs#adultContentPref": 247 247 + if (!isAdultContentPref(pref)) break; 248 248 + normalized.adultContentEnabled = !!pref.enabled; 249 249 + break; 250 250 + 251 251 + case "app.bsky.actor.defs#savedFeedsPref": 252 252 + if (!isSavedFeedsPref(pref)) break; 253 253 + normalized.savedFeeds.pinned.push(...(pref.pinned ?? [])); 254 254 + normalized.savedFeeds.saved.push(...(pref.saved ?? [])); 255 255 + break; 256 256 + 257 257 + case "app.bsky.actor.defs#bskyAppStatePref": 258 258 + if (!isBskyAppStatePref(pref)) break; 259 259 + normalized.nuxs.push(...(pref.nuxs?.map((n) => n.id) ?? [])); 260 260 + break; 261 261 + 262 262 + default: 263 263 + // unknown pref type — just ignore for now 264 264 + break; 265 265 + } 266 266 + } 267 267 + 268 268 + return normalized; 269 269 + }

+79 -3

src/routes/notifications.tsx

··· 19 19 import { useAuth } from "~/providers/UnifiedAuthProvider"; 20 20 import { 21 21 constellationURLAtom, 22 22 + enableBitesAtom, 22 23 imgCDNAtom, 23 24 postInteractionsFiltersAtom, 24 25 } from "~/utils/atoms"; ··· 56 57 }); 57 58 58 59 export default function NotificationsTabs() { 60 60 + const [bitesEnabled] = useAtom(enableBitesAtom); 59 61 return ( 60 62 <ReusableTabRoute 61 63 route={`Notifications`} ··· 63 65 Mentions: <MentionsTab />, 64 66 Follows: <FollowsTab />, 65 67 "Post Interactions": <PostInteractionsTab />, 68 68 + ...bitesEnabled ? { 69 69 + Bites: <BitesTab />, 70 70 + } : {} 66 71 }} 67 72 /> 68 73 ); ··· 200 205 ); 201 206 } 202 207 208 208 + 209 209 + export function BitesTab({did}:{did?:string}) { 210 210 + const { agent } = useAuth(); 211 211 + const userdidunsafe = did ?? agent?.did; 212 212 + const { data: identity} = useQueryIdentity(userdidunsafe); 213 213 + const userdid = identity?.did; 214 214 + 215 215 + const [constellationurl] = useAtom(constellationURLAtom); 216 216 + const infinitequeryresults = useInfiniteQuery({ 217 217 + ...yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks( 218 218 + { 219 219 + constellation: constellationurl, 220 220 + method: "/links", 221 221 + target: "at://"+userdid, 222 222 + collection: "net.wafrn.feed.bite", 223 223 + path: ".subject", 224 224 + staleMult: 0 // safe fun 225 225 + } 226 226 + ), 227 227 + enabled: !!userdid, 228 228 + }); 229 229 + 230 230 + const { 231 231 + data: infiniteFollowsData, 232 232 + fetchNextPage, 233 233 + hasNextPage, 234 234 + isFetchingNextPage, 235 235 + isLoading, 236 236 + isError, 237 237 + error, 238 238 + } = infinitequeryresults; 239 239 + 240 240 + const followsAturis = React.useMemo(() => { 241 241 + // Get all replies from the standard infinite query 242 242 + return ( 243 243 + infiniteFollowsData?.pages.flatMap( 244 244 + (page) => 245 245 + page?.linking_records.map( 246 246 + (r) => `at://${r.did}/${r.collection}/${r.rkey}` 247 247 + ) ?? [] 248 248 + ) ?? [] 249 249 + ); 250 250 + }, [infiniteFollowsData]); 251 251 + 252 252 + useReusableTabScrollRestore("Notifications"); 253 253 + 254 254 + if (isLoading) return <LoadingState text="Loading bites..." />; 255 255 + if (isError) return <ErrorState error={error} />; 256 256 + 257 257 + if (!followsAturis?.length) return <EmptyState text="No bites yet." />; 258 258 + 259 259 + return ( 260 260 + <> 261 261 + {followsAturis.map((m) => ( 262 262 + <NotificationItem key={m} notification={m} /> 263 263 + ))} 264 264 + 265 265 + {hasNextPage && ( 266 266 + <button 267 267 + onClick={() => fetchNextPage()} 268 268 + disabled={isFetchingNextPage} 269 269 + className="w-[calc(100%-2rem)] mx-4 my-4 px-4 py-2 bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 font-semibold disabled:opacity-50" 270 270 + > 271 271 + {isFetchingNextPage ? "Loading..." : "Load More"} 272 272 + </button> 273 273 + )} 274 274 + </> 275 275 + ); 276 276 + } 277 277 + 203 278 function PostInteractionsTab() { 204 279 const { agent } = useAuth(); 205 280 const { data: identity } = useQueryIdentity(agent?.did); ··· 308 383 ); 309 384 } 310 385 311 311 - function Chip({ 386 386 + export function Chip({ 312 387 state, 313 388 text, 314 389 onClick, ··· 497 572 ); 498 573 } 499 574 500 500 - export function NotificationItem({ notification }: { notification: string }) { 575 575 + export function NotificationItem({ notification, labeler }: { notification: string, labeler?: boolean }) { 501 576 const aturi = new AtUri(notification); 577 577 + const bite = aturi.collection === "net.wafrn.feed.bite"; 502 578 const navigate = useNavigate(); 503 579 const { data: identity } = useQueryIdentity(aturi.host); 504 580 const resolvedDid = identity?.did; ··· 542 618 <img 543 619 src={avatar || defaultpfp} 544 620 alt={identity?.handle} 545 545 - className="w-10 h-10 rounded-full" 621 621 + className={`w-10 h-10 ${labeler ? "rounded-md" : "rounded-full"}`} 546 622 /> 547 623 ) : ( 548 624 <div className="w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-700" />

+327 -23

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

··· 1 1 - import { RichText } from "@atproto/api"; 1 1 + import { Agent, RichText } from "@atproto/api"; 2 2 import * as ATPAPI from "@atproto/api"; 3 3 + import { TID } from "@atproto/common-web"; 3 4 import { useQueryClient } from "@tanstack/react-query"; 4 5 import { createFileRoute, Link, useNavigate } from "@tanstack/react-router"; 5 6 import { useAtom } from "jotai"; ··· 16 17 UniversalPostRendererATURILoader, 17 18 } from "~/components/UniversalPostRenderer"; 18 19 import { useAuth } from "~/providers/UnifiedAuthProvider"; 19 19 - import { imgCDNAtom } from "~/utils/atoms"; 20 20 + import { enableBitesAtom, imgCDNAtom, profileChipsAtom } from "~/utils/atoms"; 20 21 import { 21 22 toggleFollow, 22 23 useGetFollowState, ··· 31 32 useQueryIdentity, 32 33 useQueryProfile, 33 34 } from "~/utils/useQuery"; 35 35 + import IconMdiShieldOutline from "~icons/mdi/shield-outline.jsx"; 36 36 + 37 37 + import { renderSnack } from "../__root"; 38 38 + import { Chip } from "../notifications"; 34 39 35 40 export const Route = createFileRoute("/profile/$did/")({ 36 41 component: ProfileComponent, ··· 48 53 error: identityError, 49 54 } = useQueryIdentity(did); 50 55 56 56 + // i was gonna check the did doc but useQueryIdentity doesnt return that info (slingshot minidoc) 57 57 + // so instead we should query the labeler profile 58 58 + 59 59 + const { data: labelerProfile } = useQueryArbitrary( 60 60 + identity?.did 61 61 + ? `at://${identity?.did}/app.bsky.labeler.service/self` 62 62 + : undefined 63 63 + ); 64 64 + 65 65 + const isLabeler = !!labelerProfile?.cid; 66 66 + const labelerRecord = isLabeler 67 67 + ? (labelerProfile?.value as ATPAPI.AppBskyLabelerService.Record) 68 68 + : undefined; 69 69 + 51 70 const resolvedDid = did.startsWith("did:") ? did : identity?.did; 52 71 const resolvedHandle = did.startsWith("did:") ? identity?.handle : did; 53 72 const pdsUrl = identity?.pds; ··· 78 97 79 98 const isReady = !!resolvedDid && !isIdentityLoading && !!profileRecord; 80 99 81 81 - const resultwhateversure = useQueryConstellationLinksCountDistinctDids(resolvedDid ? { 82 82 - method: "/links/count/distinct-dids", 83 83 - collection: "app.bsky.graph.follow", 84 84 - target: resolvedDid, 85 85 - path: ".subject" 86 86 - } : undefined) 100 100 + const resultwhateversure = useQueryConstellationLinksCountDistinctDids( 101 101 + resolvedDid 102 102 + ? { 103 103 + method: "/links/count/distinct-dids", 104 104 + collection: "app.bsky.graph.follow", 105 105 + target: resolvedDid, 106 106 + path: ".subject", 107 107 + } 108 108 + : undefined 109 109 + ); 87 110 88 111 const followercount = resultwhateversure?.data?.total; 89 112 ··· 133 156 134 157 {/* Avatar (PFP) */} 135 158 <div className="absolute left-[16px] top-[100px] "> 136 136 - <img 137 137 - src={getAvatarUrl(profile) || "/favicon.png"} 138 138 - alt="avatar" 139 139 - className="w-28 h-28 rounded-full object-cover border-4 border-white dark:border-gray-950 bg-gray-300 dark:bg-gray-700" 140 140 - /> 159 159 + {!getAvatarUrl(profile) && isLabeler ? ( 160 160 + <div 161 161 + className={`w-28 h-28 ${isLabeler ? "rounded-md" : "rounded-full"} items-center justify-center flex object-cover border-4 border-white dark:border-gray-950 bg-gray-300 dark:bg-gray-700`} 162 162 + > 163 163 + <IconMdiShieldOutline className="w-20 h-20" /> 164 164 + </div> 165 165 + ) : ( 166 166 + <img 167 167 + src={getAvatarUrl(profile) || "/favicon.png"} 168 168 + alt="avatar" 169 169 + className={`w-28 h-28 ${isLabeler ? "rounded-md" : "rounded-full"} object-cover border-4 border-white dark:border-gray-950 bg-gray-300 dark:bg-gray-700`} 170 170 + /> 171 171 + )} 141 172 </div> 142 173 143 174 <div className="absolute right-[16px] top-[170px] flex flex-row gap-2.5"> 175 175 + <BiteButton targetdidorhandle={did} /> 144 176 {/* 145 177 todo: full follow and unfollow backfill (along with partial likes backfill, 146 178 just enough for it to be useful) ··· 148 180 also save it persistently 149 181 */} 150 182 <FollowButton targetdidorhandle={did} /> 151 151 - <button className="rounded-full dark:bg-gray-600 bg-gray-300 px-3 py-2 text-[14px]"> 183 183 + <button 184 184 + className="rounded-full dark:bg-gray-600 bg-gray-300 px-3 py-2 text-[14px]" 185 185 + onClick={(e) => { 186 186 + renderSnack({ 187 187 + title: "Not Implemented Yet", 188 188 + description: "Sorry...", 189 189 + //button: { label: 'Try Again', onClick: () => console.log('whatever') }, 190 190 + }); 191 191 + }} 192 192 + > 152 193 ... {/* todo: icon */} 153 194 </button> 154 195 </div> ··· 161 202 {handle} 162 203 </div> 163 204 <div className="flex flex-row gap-2 text-md text-gray-500 dark:text-gray-400 mb-2"> 164 164 - <Link to="/profile/$did/followers" params={{did: did}}>{followercount && (<span className="mr-1 text-gray-900 dark:text-gray-200 font-medium">{followercount}</span>)}Followers</Link> 205 205 + <Link to="/profile/$did/followers" params={{ did: did }}> 206 206 + {followercount && ( 207 207 + <span className="mr-1 text-gray-900 dark:text-gray-200 font-medium"> 208 208 + {followercount} 209 209 + </span> 210 210 + )} 211 211 + Followers 212 212 + </Link> 165 213 - 166 166 - <Link to="/profile/$did/follows" params={{did: did}}>Follows</Link> 214 214 + <Link to="/profile/$did/follows" params={{ did: did }}> 215 215 + Follows 216 216 + </Link> 167 217 </div> 168 218 {description && ( 169 219 <div className="text-base leading-relaxed text-gray-800 dark:text-gray-300 mb-5 whitespace-pre-wrap break-words text-[15px]"> ··· 179 229 <ReusableTabRoute 180 230 route={`Profile` + did} 181 231 tabs={{ 182 182 - Posts: <PostsTab did={did} />, 183 183 - Reposts: <RepostsTab did={did} />, 184 184 - Feeds: <FeedsTab did={did} />, 185 185 - Lists: <ListsTab did={did} />, 232 232 + ...(isLabeler 233 233 + ? { 234 234 + Labels: <LabelsTab did={did} labelerRecord={labelerRecord} />, 235 235 + } 236 236 + : {}), 237 237 + ...{ 238 238 + Posts: <PostsTab did={did} />, 239 239 + Reposts: <RepostsTab did={did} />, 240 240 + Feeds: <FeedsTab did={did} />, 241 241 + Lists: <ListsTab did={did} />, 242 242 + }, 186 243 ...(identity?.did === agent?.did 187 244 ? { Likes: <SelfLikesTab did={did} /> } 188 245 : {}), ··· 207 264 ); 208 265 } 209 266 267 267 + export type ProfilePostsFilter = { 268 268 + posts: boolean; 269 269 + replies: boolean; 270 270 + mediaOnly: boolean; 271 271 + }; 272 272 + export const defaultProfilePostsFilter: ProfilePostsFilter = { 273 273 + posts: true, 274 274 + replies: true, 275 275 + mediaOnly: false, 276 276 + }; 277 277 + 278 278 + function ProfilePostsFilterChipBar({ 279 279 + filters, 280 280 + toggle, 281 281 + }: { 282 282 + filters: ProfilePostsFilter | null; 283 283 + toggle: (key: keyof ProfilePostsFilter) => void; 284 284 + }) { 285 285 + const empty = !filters?.replies && !filters?.posts; 286 286 + const almostEmpty = !filters?.replies && filters?.posts; 287 287 + 288 288 + useEffect(() => { 289 289 + if (empty) { 290 290 + toggle("posts"); 291 291 + } 292 292 + }, [empty, toggle]); 293 293 + 294 294 + return ( 295 295 + <div className="flex flex-row flex-wrap gap-2 px-4 pt-4"> 296 296 + <Chip 297 297 + state={filters?.posts ?? true} 298 298 + text="Posts" 299 299 + onClick={() => (almostEmpty ? null : toggle("posts"))} 300 300 + /> 301 301 + <Chip 302 302 + state={filters?.replies ?? true} 303 303 + text="Replies" 304 304 + onClick={() => toggle("replies")} 305 305 + /> 306 306 + <Chip 307 307 + state={filters?.mediaOnly ?? false} 308 308 + text="Media Only" 309 309 + onClick={() => toggle("mediaOnly")} 310 310 + /> 311 311 + </div> 312 312 + ); 313 313 + } 314 314 + 210 315 function PostsTab({ did }: { did: string }) { 316 316 + // todo: this needs to be a (non-persisted is fine) atom to survive navigation 317 317 + const [filterses, setFilterses] = useAtom(profileChipsAtom); 318 318 + const filters = filterses?.[did]; 319 319 + const setFilters = (obj: ProfilePostsFilter) => { 320 320 + setFilterses((prev) => { 321 321 + return { 322 322 + ...prev, 323 323 + [did]: obj, 324 324 + }; 325 325 + }); 326 326 + }; 327 327 + useEffect(() => { 328 328 + if (!filters) { 329 329 + setFilters(defaultProfilePostsFilter); 330 330 + } 331 331 + }); 211 332 useReusableTabScrollRestore(`Profile` + did); 212 333 const queryClient = useQueryClient(); 213 334 const { ··· 243 364 [postsData] 244 365 ); 245 366 367 367 + const toggle = (key: keyof ProfilePostsFilter) => { 368 368 + setFilterses((prev) => { 369 369 + const existing = prev[did] ?? { 370 370 + posts: false, 371 371 + replies: false, 372 372 + mediaOnly: false, 373 373 + }; // default 374 374 + 375 375 + return { 376 376 + ...prev, 377 377 + [did]: { 378 378 + ...existing, 379 379 + [key]: !existing[key], // safely negate 380 380 + }, 381 381 + }; 382 382 + }); 383 383 + }; 384 384 + 246 385 return ( 247 386 <> 248 248 - <div className="text-gray-500 dark:text-gray-400 text-lg font-semibold my-3 mx-4"> 387 387 + {/* <div className="text-gray-500 dark:text-gray-400 text-lg font-semibold my-3 mx-4"> 249 388 Posts 250 250 - </div> 389 389 + </div> */} 390 390 + <ProfilePostsFilterChipBar filters={filters} toggle={toggle} /> 251 391 <div> 252 392 {posts.map((post) => ( 253 393 <UniversalPostRendererATURILoader 254 394 key={post.uri} 255 395 atUri={post.uri} 256 396 feedviewpost={true} 397 397 + filterNoReplies={!filters?.replies} 398 398 + filterMustHaveMedia={filters?.mediaOnly} 399 399 + filterMustBeReply={!filters?.posts} 257 400 /> 258 401 ))} 259 402 </div> ··· 420 563 ); 421 564 } 422 565 566 566 + function LabelsTab({ 567 567 + did, 568 568 + labelerRecord, 569 569 + }: { 570 570 + did: string; 571 571 + labelerRecord?: ATPAPI.AppBskyLabelerService.Record; 572 572 + }) { 573 573 + useReusableTabScrollRestore(`Profile` + did); 574 574 + const { agent } = useAuth(); 575 575 + // const { 576 576 + // data: identity, 577 577 + // isLoading: isIdentityLoading, 578 578 + // error: identityError, 579 579 + // } = useQueryIdentity(did); 580 580 + 581 581 + // const resolvedDid = did.startsWith("did:") ? did : identity?.did; 582 582 + 583 583 + const labelMap = new Map( 584 584 + labelerRecord?.policies?.labelValueDefinitions?.map((def) => { 585 585 + const locale = def.locales.find((l) => l.lang === "en") ?? def.locales[0]; 586 586 + return [ 587 587 + def.identifier, 588 588 + { 589 589 + name: locale?.name, 590 590 + description: locale?.description, 591 591 + blur: def.blurs, 592 592 + severity: def.severity, 593 593 + adultOnly: def.adultOnly, 594 594 + defaultSetting: def.defaultSetting, 595 595 + }, 596 596 + ]; 597 597 + }) 598 598 + ); 599 599 + 600 600 + return ( 601 601 + <> 602 602 + <div className="text-gray-500 dark:text-gray-400 text-lg font-semibold my-3 mx-4"> 603 603 + Labels 604 604 + </div> 605 605 + <div> 606 606 + {[...labelMap.entries()].map(([key, item]) => ( 607 607 + <div 608 608 + key={key} 609 609 + className="border-gray-300 dark:border-gray-700 border-b px-4 py-4" 610 610 + > 611 611 + <div className="font-semibold text-lg">{item.name}</div> 612 612 + <div className="text-sm text-gray-500 dark:text-gray-400"> 613 613 + {item.description} 614 614 + </div> 615 615 + <div className="mt-1 text-xs text-gray-400"> 616 616 + {item.blur && <span>Blur: {item.blur} </span>} 617 617 + {item.severity && <span>• Severity: {item.severity} </span>} 618 618 + {item.adultOnly && <span>• 18+ only</span>} 619 619 + </div> 620 620 + </div> 621 621 + ))} 622 622 + </div> 623 623 + 624 624 + {/* Loading and "Load More" states */} 625 625 + {!labelerRecord && ( 626 626 + <div className="p-4 text-center text-gray-500">Loading labels...</div> 627 627 + )} 628 628 + {/* {!labelerRecord && ( 629 629 + <div className="p-4 text-center text-gray-500">Loading more...</div> 630 630 + )} */} 631 631 + {/* {hasNextPage && !isFetchingNextPage && ( 632 632 + <button 633 633 + onClick={() => fetchNextPage()} 634 634 + className="w-[calc(100%-2rem)] mx-4 my-4 px-4 py-2 bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 font-semibold" 635 635 + > 636 636 + Load More Feeds 637 637 + </button> 638 638 + )} 639 639 + {feeds.length === 0 && !arePostsLoading && ( 640 640 + <div className="p-4 text-center text-gray-500">No feeds found.</div> 641 641 + )} */} 642 642 + </> 643 643 + ); 644 644 + } 645 645 + 423 646 export function FeedItemRenderAturiLoader({ 424 647 aturi, 425 648 listmode, ··· 725 948 )} 726 949 </> 727 950 ) : ( 728 728 - <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]"> 951 951 + <button 952 952 + 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]" 953 953 + onClick={(e) => { 954 954 + renderSnack({ 955 955 + title: "Not Implemented Yet", 956 956 + description: "Sorry...", 957 957 + //button: { label: 'Try Again', onClick: () => console.log('whatever') }, 958 958 + }); 959 959 + }} 960 960 + > 729 961 Edit Profile 730 962 </button> 731 963 )} 732 964 </> 733 965 ); 966 966 + } 967 967 + 968 968 + export function BiteButton({ 969 969 + targetdidorhandle, 970 970 + }: { 971 971 + targetdidorhandle: string; 972 972 + }) { 973 973 + const { agent } = useAuth(); 974 974 + const { data: identity } = useQueryIdentity(targetdidorhandle); 975 975 + const [show] = useAtom(enableBitesAtom); 976 976 + 977 977 + if (!show) return; 978 978 + 979 979 + return ( 980 980 + <> 981 981 + <button 982 982 + onClick={async (e) => { 983 983 + e.stopPropagation(); 984 984 + await sendBite({ 985 985 + agent: agent || undefined, 986 986 + targetDid: identity?.did, 987 987 + }); 988 988 + }} 989 989 + 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]" 990 990 + > 991 991 + Bite 992 992 + </button> 993 993 + </> 994 994 + ); 995 995 + } 996 996 + 997 997 + async function sendBite({ 998 998 + agent, 999 999 + targetDid, 1000 1000 + }: { 1001 1001 + agent?: Agent; 1002 1002 + targetDid?: string; 1003 1003 + }) { 1004 1004 + if (!agent?.did || !targetDid) { 1005 1005 + renderSnack({ 1006 1006 + title: "Bite Failed", 1007 1007 + description: "You must be logged-in to bite someone.", 1008 1008 + //button: { label: 'Try Again', onClick: () => console.log('whatever') }, 1009 1009 + }); 1010 1010 + return; 1011 1011 + } 1012 1012 + const newRecord = { 1013 1013 + repo: agent.did, 1014 1014 + collection: "net.wafrn.feed.bite", 1015 1015 + rkey: TID.next().toString(), 1016 1016 + record: { 1017 1017 + $type: "net.wafrn.feed.bite", 1018 1018 + subject: "at://" + targetDid, 1019 1019 + createdAt: new Date().toISOString(), 1020 1020 + }, 1021 1021 + }; 1022 1022 + 1023 1023 + try { 1024 1024 + await agent.com.atproto.repo.createRecord(newRecord); 1025 1025 + renderSnack({ 1026 1026 + title: "Bite Sent", 1027 1027 + description: "Your bite was delivered.", 1028 1028 + //button: { label: 'Undo', onClick: () => console.log('Undo clicked') }, 1029 1029 + }); 1030 1030 + } catch (err) { 1031 1031 + console.error("Bite failed:", err); 1032 1032 + renderSnack({ 1033 1033 + title: "Bite Failed", 1034 1034 + description: "Your bite failed to be delivered.", 1035 1035 + //button: { label: 'Try Again', onClick: () => console.log('whatever') }, 1036 1036 + }); 1037 1037 + } 734 1038 } 735 1039 736 1040 export function Mutual({ targetdidorhandle }: { targetdidorhandle: string }) {

+217 -9

src/routes/search.tsx

··· 1 1 - import { createFileRoute } from "@tanstack/react-router"; 1 1 + import type { Agent } from "@atproto/api"; 2 2 + import { useQueryClient } from "@tanstack/react-query"; 3 3 + import { createFileRoute, useSearch } from "@tanstack/react-router"; 4 4 + import { useAtom } from "jotai"; 5 5 + import { useEffect,useMemo } from "react"; 2 6 3 7 import { Header } from "~/components/Header"; 4 8 import { Import } from "~/components/Import"; 9 9 + import { 10 10 + ReusableTabRoute, 11 11 + useReusableTabScrollRestore, 12 12 + } from "~/components/ReusableTabRoute"; 13 13 + import { UniversalPostRendererATURILoader } from "~/components/UniversalPostRenderer"; 14 14 + import { useAuth } from "~/providers/UnifiedAuthProvider"; 15 15 + import { lycanURLAtom } from "~/utils/atoms"; 16 16 + import { 17 17 + constructLycanRequestIndexQuery, 18 18 + useInfiniteQueryLycanSearch, 19 19 + useQueryIdentity, 20 20 + useQueryLycanStatus, 21 21 + } from "~/utils/useQuery"; 22 22 + 23 23 + import { renderSnack } from "./__root"; 24 24 + import { SliderPrimitive } from "./settings"; 5 25 6 26 export const Route = createFileRoute("/search")({ 7 27 component: Search, 8 28 }); 9 29 10 30 export function Search() { 31 31 + const queryClient = useQueryClient(); 32 32 + const { agent, status } = useAuth(); 33 33 + const { data: identity } = useQueryIdentity(agent?.did); 34 34 + const [lycandomain] = useAtom(lycanURLAtom); 35 35 + const lycanExists = lycandomain !== ""; 36 36 + const { data: lycanstatusdata, refetch } = useQueryLycanStatus(); 37 37 + const lycanIndexed = lycanstatusdata?.status === "finished" || false; 38 38 + const lycanIndexing = lycanstatusdata?.status === "in_progress" || false; 39 39 + const lycanIndexingProgress = lycanIndexing 40 40 + ? lycanstatusdata?.progress 41 41 + : undefined; 42 42 + 43 43 + const authed = status === "signedIn"; 44 44 + 45 45 + const lycanReady = lycanExists && lycanIndexed && authed; 46 46 + 47 47 + const { q }: { q: string } = useSearch({ from: "/search" }); 48 48 + 49 49 + // auto-refetch Lycan status until ready 50 50 + useEffect(() => { 51 51 + if (!lycanExists || !authed) return; 52 52 + if (lycanReady) return; 53 53 + 54 54 + const interval = setInterval(() => { 55 55 + refetch(); 56 56 + }, 3000); 57 57 + 58 58 + return () => clearInterval(interval); 59 59 + }, [lycanExists, authed, lycanReady, refetch]); 60 60 + 61 61 + const maintext = !lycanExists 62 62 + ? "Sorry we dont have search. But instead, you can load some of these types of content into Red Dwarf:" 63 63 + : authed 64 64 + ? lycanReady 65 65 + ? "Lycan Search is enabled and ready! Type to search posts you've interacted with in the past. You can also load some of these types of content into Red Dwarf:" 66 66 + : "Sorry, while Lycan Search is enabled, you are not indexed. Index below please. You can load some of these types of content into Red Dwarf:" 67 67 + : "Sorry, while Lycan Search is enabled, you are unauthed. Please log in to use Lycan. You can load some of these types of content into Red Dwarf:"; 68 68 + 69 69 + async function index(opts: { 70 70 + agent?: Agent; 71 71 + isAuthed: boolean; 72 72 + pdsUrl?: string; 73 73 + feedServiceDid?: string; 74 74 + }) { 75 75 + renderSnack({ 76 76 + title: "Registering account...", 77 77 + }); 78 78 + try { 79 79 + const response = await queryClient.fetchQuery( 80 80 + constructLycanRequestIndexQuery(opts) 81 81 + ); 82 82 + if ( 83 83 + response?.message !== "Import has already started" && 84 84 + response?.message !== "Import has been scheduled" 85 85 + ) { 86 86 + renderSnack({ 87 87 + title: "Registration failed!", 88 88 + description: "Unknown server error (2)", 89 89 + }); 90 90 + } else { 91 91 + renderSnack({ 92 92 + title: "Succesfully sent registration request!", 93 93 + description: "Please wait for the server to index your account", 94 94 + }); 95 95 + refetch(); 96 96 + } 97 97 + } catch { 98 98 + renderSnack({ 99 99 + title: "Registration failed!", 100 100 + description: "Unknown server error (1)", 101 101 + }); 102 102 + } 103 103 + } 104 104 + 11 105 return ( 12 106 <> 13 107 <Header ··· 21 115 }} 22 116 /> 23 117 <div className=" flex flex-col items-center mt-4 mx-4 gap-4"> 24 24 - <Import /> 118 118 + <Import optionaltextstring={q} /> 25 119 <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> 120 120 + <p className="text-gray-600 dark:text-gray-400">{maintext}</p> 30 121 <ul className="list-disc list-inside mt-2 text-gray-600 dark:text-gray-400"> 31 122 <li> 32 32 - Bluesky URLs from supported clients (like{" "} 123 123 + Bluesky URLs (from supported clients) (like{" "} 33 124 <code className="text-sm">bsky.app</code> or{" "} 34 125 <code className="text-sm">deer.social</code>). 35 126 </li> ··· 39 130 ). 40 131 </li> 41 132 <li> 42 42 - Plain handles (like{" "} 133 133 + User Handles (like{" "} 43 134 <code className="text-sm">@username.bsky.social</code>). 44 135 </li> 45 136 <li> 46 46 - Direct DIDs (Decentralized Identifiers, starting with{" "} 137 137 + DIDs (Decentralized Identifiers, starting with{" "} 47 138 <code className="text-sm">did:</code>). 48 139 </li> 49 140 </ul> ··· 51 142 Simply paste one of these into the import field above and press 52 143 Enter to load the content. 53 144 </p> 145 145 + 146 146 + {lycanExists && authed && !lycanReady ? ( 147 147 + !lycanIndexing ? ( 148 148 + <div className="mt-4 mx-auto"> 149 149 + <button 150 150 + onClick={() => 151 151 + index({ 152 152 + agent: agent || undefined, 153 153 + isAuthed: status === "signedIn", 154 154 + pdsUrl: identity?.pds, 155 155 + feedServiceDid: "did:web:" + lycandomain, 156 156 + }) 157 157 + } 158 158 + className="px-6 py-2 h-12 rounded-full bg-gray-100 dark:bg-gray-800 159 159 + text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 transition" 160 160 + > 161 161 + Index my Account 162 162 + </button> 163 163 + </div> 164 164 + ) : ( 165 165 + <div className="mt-4 gap-2 flex flex-col"> 166 166 + <span>indexing...</span> 167 167 + <SliderPrimitive 168 168 + value={lycanIndexingProgress || 0} 169 169 + min={0} 170 170 + max={1} 171 171 + /> 172 172 + </div> 173 173 + ) 174 174 + ) : ( 175 175 + <></> 176 176 + )} 54 177 </div> 55 178 </div> 179 179 + {q ? <SearchTabs query={q} /> : <></>} 56 180 </> 57 181 ); 58 182 } 183 183 + 184 184 + function SearchTabs({ query }: { query: string }) { 185 185 + return ( 186 186 + <div> 187 187 + <ReusableTabRoute 188 188 + route={`search` + query} 189 189 + tabs={{ 190 190 + Likes: <LycanTab query={query} type={"likes"} key={"likes"} />, 191 191 + Reposts: <LycanTab query={query} type={"reposts"} key={"reposts"} />, 192 192 + Quotes: <LycanTab query={query} type={"quotes"} key={"quotes"} />, 193 193 + Pins: <LycanTab query={query} type={"pins"} key={"pins"} />, 194 194 + }} 195 195 + /> 196 196 + </div> 197 197 + ); 198 198 + } 199 199 + 200 200 + function LycanTab({ 201 201 + query, 202 202 + type, 203 203 + }: { 204 204 + query: string; 205 205 + type: "likes" | "pins" | "reposts" | "quotes"; 206 206 + }) { 207 207 + useReusableTabScrollRestore("search" + query); 208 208 + 209 209 + const { 210 210 + data: postsData, 211 211 + fetchNextPage, 212 212 + hasNextPage, 213 213 + isFetchingNextPage, 214 214 + isLoading: arePostsLoading, 215 215 + } = useInfiniteQueryLycanSearch({ query: query, type: type }); 216 216 + 217 217 + const posts = useMemo( 218 218 + () => 219 219 + postsData?.pages.flatMap((page) => { 220 220 + if (page) { 221 221 + return page.posts; 222 222 + } else { 223 223 + return []; 224 224 + } 225 225 + }) ?? [], 226 226 + [postsData] 227 227 + ); 228 228 + 229 229 + return ( 230 230 + <> 231 231 + {/* <div className="text-gray-500 dark:text-gray-400 text-lg font-semibold my-3 mx-4"> 232 232 + Posts 233 233 + </div> */} 234 234 + <div> 235 235 + {posts.map((post) => ( 236 236 + <UniversalPostRendererATURILoader 237 237 + key={post} 238 238 + atUri={post} 239 239 + feedviewpost={true} 240 240 + /> 241 241 + ))} 242 242 + </div> 243 243 + 244 244 + {/* Loading and "Load More" states */} 245 245 + {arePostsLoading && posts.length === 0 && ( 246 246 + <div className="p-4 text-center text-gray-500">Loading posts...</div> 247 247 + )} 248 248 + {isFetchingNextPage && ( 249 249 + <div className="p-4 text-center text-gray-500">Loading more...</div> 250 250 + )} 251 251 + {hasNextPage && !isFetchingNextPage && ( 252 252 + <button 253 253 + onClick={() => fetchNextPage()} 254 254 + className="w-[calc(100%-2rem)] mx-4 my-4 px-4 py-2 bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 font-semibold" 255 255 + > 256 256 + Load More Posts 257 257 + </button> 258 258 + )} 259 259 + {posts.length === 0 && !arePostsLoading && ( 260 260 + <div className="p-4 text-center text-gray-500">No posts found.</div> 261 261 + )} 262 262 + </> 263 263 + ); 264 264 + 265 265 + return <></>; 266 266 + }

+188 -17

src/routes/settings.tsx

··· 1 1 - import { createFileRoute } from "@tanstack/react-router"; 2 2 - import { useAtom } from "jotai"; 3 3 - import { Slider } from "radix-ui"; 1 1 + import { createFileRoute, useNavigate } from "@tanstack/react-router"; 2 2 + import { useAtom, useAtomValue, useSetAtom } from "jotai"; 3 3 + import { Slider, Switch } from "radix-ui"; 4 4 + import { useEffect, useState } from "react"; 4 5 5 6 import { Header } from "~/components/Header"; 6 7 import Login from "~/components/Login"; ··· 9 10 defaultconstellationURL, 10 11 defaulthue, 11 12 defaultImgCDN, 13 13 + defaultLycanURL, 12 14 defaultslingshotURL, 13 15 defaultVideoCDN, 16 16 + enableBitesAtom, 17 17 + enableBridgyTextAtom, 18 18 + enableWafrnTextAtom, 14 19 hueAtom, 15 20 imgCDNAtom, 21 21 + lycanURLAtom, 16 22 slingshotURLAtom, 17 23 videoCDNAtom, 18 24 } from "~/utils/atoms"; 19 25 26 26 + import { MaterialNavItem } from "./__root"; 27 27 + 20 28 export const Route = createFileRoute("/settings")({ 21 29 component: Settings, 22 30 }); 23 31 24 32 export function Settings() { 33 33 + const navigate = useNavigate(); 25 34 return ( 26 35 <> 27 36 <Header ··· 37 46 <div className="lg:hidden"> 38 47 <Login /> 39 48 </div> 49 49 + <div className="sm:hidden flex flex-col justify-around mt-4"> 50 50 + <SettingHeading title="Other Pages" top /> 51 51 + <MaterialNavItem 52 52 + InactiveIcon={<IconMaterialSymbolsTag className="w-6 h-6" />} 53 53 + ActiveIcon={<IconMaterialSymbolsTag className="w-6 h-6" />} 54 54 + active={false} 55 55 + onClickCallbback={() => 56 56 + navigate({ 57 57 + to: "/feeds", 58 58 + //params: { did: agent.assertDid }, 59 59 + }) 60 60 + } 61 61 + text="Feeds" 62 62 + /> 63 63 + <MaterialNavItem 64 64 + InactiveIcon={<IconMdiShieldOutline className="w-6 h-6" />} 65 65 + ActiveIcon={<IconMdiShield className="w-6 h-6" />} 66 66 + active={false} 67 67 + onClickCallbback={() => 68 68 + navigate({ 69 69 + to: "/moderation", 70 70 + //params: { did: agent.assertDid }, 71 71 + }) 72 72 + } 73 73 + text="Moderation" 74 74 + /> 75 75 + </div> 40 76 <div className="h-4" /> 77 77 + 78 78 + <SettingHeading title="Personalization" top /> 79 79 + <Hue /> 80 80 + 81 81 + <SettingHeading title="Network Configuration" /> 82 82 + <div className="flex flex-col px-4 pb-2"> 83 83 + <span className="text-md">Service Endpoints</span> 84 84 + <span className="text-sm text-gray-500 dark:text-gray-400"> 85 85 + Customize the servers to be used by the app 86 86 + </span> 87 87 + </div> 41 88 <TextInputSetting 42 89 atom={constellationURLAtom} 43 90 title={"Constellation"} ··· 66 113 description={"Customize the Slingshot instance to be used by Red Dwarf"} 67 114 init={defaultVideoCDN} 68 115 /> 116 116 + <TextInputSetting 117 117 + atom={lycanURLAtom} 118 118 + title={"Lycan Search"} 119 119 + description={"Enable text search across posts you've interacted with"} 120 120 + init={defaultLycanURL} 121 121 + /> 69 122 70 70 - <Hue /> 71 71 - <p className="text-gray-500 dark:text-gray-400 py-4 px-6 text-sm"> 72 72 - please restart/refresh the app if changes arent applying correctly 123 123 + <SettingHeading title="Experimental" /> 124 124 + <SwitchSetting 125 125 + atom={enableBitesAtom} 126 126 + title={"Bites"} 127 127 + description={"Enable Wafrn Bites to bite and be bitten by other people"} 128 128 + //init={false} 129 129 + /> 130 130 + <div className="h-4" /> 131 131 + <SwitchSetting 132 132 + atom={enableBridgyTextAtom} 133 133 + title={"Bridgy Text"} 134 134 + description={ 135 135 + "Show the original text of posts bridged from the Fediverse" 136 136 + } 137 137 + //init={false} 138 138 + /> 139 139 + <div className="h-4" /> 140 140 + <SwitchSetting 141 141 + atom={enableWafrnTextAtom} 142 142 + title={"Wafrn Text"} 143 143 + description={"Show the original text of posts from Wafrn instances"} 144 144 + //init={false} 145 145 + /> 146 146 + <p className="text-gray-500 dark:text-gray-400 py-4 px-4 text-sm border rounded-xl mx-4 mt-8 mb-4"> 147 147 + Notice: Please restart/refresh the app if changes arent applying 148 148 + correctly 73 149 </p> 74 150 </> 75 151 ); 76 152 } 153 153 + 154 154 + export function SettingHeading({ 155 155 + title, 156 156 + top, 157 157 + }: { 158 158 + title: string; 159 159 + top?: boolean; 160 160 + }) { 161 161 + return ( 162 162 + <div 163 163 + className="px-4" 164 164 + style={{ marginTop: top ? 0 : 18, paddingBottom: 12 }} 165 165 + > 166 166 + <span className=" text-sm font-medium text-gray-500 dark:text-gray-400"> 167 167 + {title} 168 168 + </span> 169 169 + </div> 170 170 + ); 171 171 + } 172 172 + 173 173 + export function SwitchSetting({ 174 174 + atom, 175 175 + title, 176 176 + description, 177 177 + }: { 178 178 + atom: typeof enableBitesAtom; 179 179 + title?: string; 180 180 + description?: string; 181 181 + }) { 182 182 + const value = useAtomValue(atom); 183 183 + const setValue = useSetAtom(atom); 184 184 + 185 185 + const [hydrated, setHydrated] = useState(false); 186 186 + // eslint-disable-next-line react-hooks/set-state-in-effect 187 187 + useEffect(() => setHydrated(true), []); 188 188 + 189 189 + if (!hydrated) { 190 190 + // Avoid rendering Switch until we know storage is loaded 191 191 + return null; 192 192 + } 193 193 + 194 194 + return ( 195 195 + <div className="flex items-center gap-4 px-4 "> 196 196 + <label htmlFor={`switch-${title}`} className="flex flex-row flex-1"> 197 197 + <div className="flex flex-col"> 198 198 + <span className="text-md">{title}</span> 199 199 + <span className="text-sm text-gray-500 dark:text-gray-400"> 200 200 + {description} 201 201 + </span> 202 202 + </div> 203 203 + </label> 204 204 + 205 205 + <Switch.Root 206 206 + id={`switch-${title}`} 207 207 + checked={value} 208 208 + onCheckedChange={(v) => setValue(v)} 209 209 + className="m3switch root" 210 210 + > 211 211 + <Switch.Thumb className="m3switch thumb " /> 212 212 + </Switch.Root> 213 213 + </div> 214 214 + ); 215 215 + } 216 216 + 77 217 function Hue() { 78 218 const [hue, setHue] = useAtom(hueAtom); 79 219 return ( 80 80 - <div className="flex flex-col px-4 mt-4 "> 81 81 - <span className="z-10">Hue</span> 82 82 - <div className="flex flex-row items-center gap-4"> 83 83 - <SliderComponent 84 84 - atom={hueAtom} 85 85 - max={360} 86 86 - /> 220 220 + <div className="flex flex-col px-4"> 221 221 + <span className="z-[2] text-md">Hue</span> 222 222 + <span className="z-[2] text-sm text-gray-500 dark:text-gray-400"> 223 223 + Change the colors of the app 224 224 + </span> 225 225 + <div className="z-[1] flex flex-row items-center gap-4"> 226 226 + <SliderComponent atom={hueAtom} max={360} /> 87 227 <button 88 228 onClick={() => setHue(defaulthue ?? 28)} 89 229 className="px-6 py-2 h-12 rounded-full bg-gray-100 dark:bg-gray-800 ··· 154 294 ); 155 295 } 156 296 157 157 - 158 297 interface SliderProps { 159 298 atom: typeof hueAtom; 160 299 min?: number; ··· 168 307 max = 100, 169 308 step = 1, 170 309 }) => { 171 171 - 172 172 - const [value, setValue] = useAtom(atom) 310 310 + const [value, setValue] = useAtom(atom); 173 311 174 312 return ( 175 313 <Slider.Root ··· 186 324 <Slider.Thumb className="shadow-[0_0_0_8px_var(--color-white)] dark:shadow-[0_0_0_8px_var(--color-gray-950)] block w-[3px] h-12 bg-gray-500 dark:bg-gray-400 rounded-md focus:outline-none" /> 187 325 </Slider.Root> 188 326 ); 189 189 - }; 327 327 + }; 328 328 + 329 329 + 330 330 + interface SliderPProps { 331 331 + value: number; 332 332 + min?: number; 333 333 + max?: number; 334 334 + step?: number; 335 335 + } 336 336 + 337 337 + 338 338 + export const SliderPrimitive: React.FC<SliderPProps> = ({ 339 339 + value, 340 340 + min = 0, 341 341 + max = 100, 342 342 + step = 1, 343 343 + }) => { 344 344 + 345 345 + return ( 346 346 + <Slider.Root 347 347 + className="relative flex items-center w-full h-4" 348 348 + value={[value]} 349 349 + min={min} 350 350 + max={max} 351 351 + step={step} 352 352 + onValueChange={(v: number[]) => {}} 353 353 + > 354 354 + <Slider.Track className="relative flex-grow h-4 bg-gray-300 dark:bg-gray-700 rounded-full"> 355 355 + <Slider.Range className="absolute h-full bg-gray-500 dark:bg-gray-400 rounded-l-full rounded-r-none" /> 356 356 + </Slider.Track> 357 357 + <Slider.Thumb className=" hidden shadow-[0_0_0_8px_var(--color-white)] dark:shadow-[0_0_0_8px_var(--color-gray-950)] block w-[3px] h-12 bg-gray-500 dark:bg-gray-400 rounded-md focus:outline-none" /> 358 358 + </Slider.Root> 359 359 + ); 360 360 + };

+98 -1

src/styles/app.css

··· 33 33 --color-gray-950: oklch(0.129 0.055 var(--safe-hue)); 34 34 } 35 35 36 36 + :root { 37 37 + --link-text-color: oklch(0.5962 0.1987 var(--safe-hue)); 38 38 + /* max chroma!!! use fallback*/ 39 39 + /*--link-text-color: oklch(0.6 0.37 var(--safe-hue));*/ 40 40 + } 41 41 + 36 42 @layer base { 37 43 html { 38 44 color-scheme: light dark; ··· 84 90 .dangerousFediContent { 85 91 & a[href]{ 86 92 text-decoration: none; 87 87 - color: rgb(29, 122, 242); 93 93 + color: var(--link-text-color); 88 94 word-break: break-all; 89 95 } 90 96 } ··· 275 281 &::before{ 276 282 background-color: var(--color-gray-500); 277 283 } 284 284 + } 285 285 + } 286 286 + } 287 287 + 288 288 + :root{ 289 289 + --thumb-size: 2rem; 290 290 + --root-size: 3.25rem; 291 291 + 292 292 + --switch-off-border: var(--color-gray-400); 293 293 + --switch-off-bg: var(--color-gray-200); 294 294 + --switch-off-thumb: var(--color-gray-400); 295 295 + 296 296 + 297 297 + --switch-on-bg: var(--color-gray-500); 298 298 + --switch-on-thumb: var(--color-gray-50); 299 299 + 300 300 + } 301 301 + @media (prefers-color-scheme: dark) { 302 302 + :root { 303 303 + --switch-off-border: var(--color-gray-500); 304 304 + --switch-off-bg: var(--color-gray-800); 305 305 + --switch-off-thumb: var(--color-gray-500); 306 306 + 307 307 + 308 308 + --switch-on-bg: var(--color-gray-400); 309 309 + --switch-on-thumb: var(--color-gray-700); 310 310 + } 311 311 + } 312 312 + 313 313 + .m3switch.root{ 314 314 + /*w-10 h-6 bg-gray-300 rounded-full relative data-[state=checked]:bg-gray-500 transition-colors*/ 315 315 + /*width: 40px; 316 316 + height: 24px;*/ 317 317 + 318 318 + inline-size: var(--root-size); 319 319 + block-size: 2rem; 320 320 + border-radius: 99999px; 321 321 + 322 322 + transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; 323 323 + transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ 324 324 + transition-duration: var(--default-transition-duration); /* 150ms */ 325 325 + 326 326 + .m3switch.thumb{ 327 327 + /*block w-5 h-5 bg-white rounded-full shadow-sm transition-transform translate-x-[2px] data-[state=checked]:translate-x-[20px]*/ 328 328 + 329 329 + height: var(--thumb-size); 330 330 + width: var(--thumb-size); 331 331 + display: inline-block; 332 332 + border-radius: 9999px; 333 333 + 334 334 + transform-origin: center; 335 335 + 336 336 + transition-property: transform, translate, scale, rotate; 337 337 + transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ 338 338 + transition-duration: var(--default-transition-duration); /* 150ms */ 339 339 + 340 340 + } 341 341 + 342 342 + &[aria-checked="true"] { 343 343 + box-shadow: inset 0px 0px 0px 1.8px transparent; 344 344 + background-color: var(--switch-on-bg); 345 345 + 346 346 + .m3switch.thumb{ 347 347 + /*block w-5 h-5 bg-white rounded-full shadow-sm transition-transform translate-x-[2px] data-[state=checked]:translate-x-[20px]*/ 348 348 + 349 349 + background-color: var(--switch-on-thumb); 350 350 + transform: translate(calc((var(--root-size) / 2) - 50%),0) scale(0.72); 351 351 + &:active { 352 352 + transform: translate(calc((var(--root-size) / 2) - 50%),0) scale(0.88); 353 353 + } 354 354 + 355 355 + } 356 356 + &:active .m3switch.thumb{ 357 357 + transform: translate(calc((var(--root-size) / 2) - 50%),0) scale(0.88); 358 358 + } 359 359 + } 360 360 + 361 361 + &[aria-checked="false"] { 362 362 + box-shadow: inset 0px 0px 0px 1.8px var(--switch-off-border); 363 363 + background-color: var(--switch-off-bg); 364 364 + .m3switch.thumb{ 365 365 + /*block w-5 h-5 bg-white rounded-full shadow-sm transition-transform translate-x-[2px] data-[state=checked]:translate-x-[20px]*/ 366 366 + 367 367 + background-color: var(--switch-off-thumb); 368 368 + transform: translate(calc(-1 * (var(--root-size) / 2) + 50%),0) scale(0.5); 369 369 + &:active { 370 370 + transform: translate(calc(-1 * (var(--root-size) / 2) + 50%),0) scale(0.88); 371 371 + } 372 372 + } 373 373 + &:active .m3switch.thumb{ 374 374 + transform: translate(calc(-1 * (var(--root-size) / 2) + 50%),0) scale(0.88); 278 375 } 279 376 } 280 377 }

+29

src/utils/atoms.ts

··· 2 2 import { atomWithStorage } from "jotai/utils"; 3 3 import { useEffect } from "react"; 4 4 5 5 + import { type ProfilePostsFilter } from "~/routes/profile.$did"; 6 6 + 5 7 export const store = createStore(); 6 8 7 9 export const quickAuthAtom = atomWithStorage<string | null>( ··· 70 72 {} 71 73 ); 72 74 75 75 + export const profileChipsAtom = atom<Record<string, ProfilePostsFilter | null>>({}) 76 76 + 73 77 export const defaultconstellationURL = "constellation.microcosm.blue"; 74 78 export const constellationURLAtom = atomWithStorage<string>( 75 79 "constellationURL", ··· 88 92 defaultVideoCDN 89 93 ); 90 94 95 95 + export const defaultLycanURL = ""; 96 96 + export const lycanURLAtom = atomWithStorage<string>( 97 97 + "lycanURL", 98 98 + defaultLycanURL 99 99 + ); 100 100 + 91 101 export const defaulthue = 28; 92 102 export const hueAtom = atomWithStorage<number>("hue", defaulthue); 93 103 ··· 124 134 // console.log("atom get ", initial); 125 135 // document.documentElement.style.setProperty(cssVar, initial.toString()); 126 136 // } 137 137 + 138 138 + 139 139 + 140 140 + // fun stuff 141 141 + 142 142 + export const enableBitesAtom = atomWithStorage<boolean>( 143 143 + "enableBitesAtom", 144 144 + false 145 145 + ); 146 146 + 147 147 + export const enableBridgyTextAtom = atomWithStorage<boolean>( 148 148 + "enableBridgyTextAtom", 149 149 + false 150 150 + ); 151 151 + 152 152 + export const enableWafrnTextAtom = atomWithStorage<boolean>( 153 153 + "enableWafrnTextAtom", 154 154 + false 155 155 + );

+2 -2

src/utils/oauthClient.ts

··· 1 1 import { BrowserOAuthClient, type ClientMetadata } from '@atproto/oauth-client-browser'; 2 2 3 3 - // i tried making this https://pds-nd.whey.party but cors is annoying as fuck 4 4 - const handleResolverPDS = 'https://bsky.social'; 3 3 + import resolvers from '../../public/resolvers.json' with { type: 'json' }; 4 4 + const handleResolverPDS = resolvers.resolver || 'https://bsky.social'; 5 5 6 6 // eslint-disable-next-line @typescript-eslint/ban-ts-comment 7 7 // @ts-ignore this should be fine ? the vite plugin should generate this before errors

+387 -158

src/utils/useQuery.ts

··· 5 5 queryOptions, 6 6 useInfiniteQuery, 7 7 useQuery, 8 8 - type UseQueryResult} from "@tanstack/react-query"; 8 8 + type UseQueryResult, 9 9 + } from "@tanstack/react-query"; 9 10 import { useAtom } from "jotai"; 10 11 11 11 - import { constellationURLAtom, slingshotURLAtom } from "./atoms"; 12 12 + import { useAuth } from "~/providers/UnifiedAuthProvider"; 13 13 + 14 14 + import { constellationURLAtom, lycanURLAtom, slingshotURLAtom } from "./atoms"; 12 15 13 13 - export function constructIdentityQuery(didorhandle?: string, slingshoturl?: string) { 16 16 + export function constructIdentityQuery( 17 17 + didorhandle?: string, 18 18 + slingshoturl?: string 19 19 + ) { 14 20 return queryOptions({ 15 21 queryKey: ["identity", didorhandle], 16 22 queryFn: async () => { 17 17 - if (!didorhandle) return undefined as undefined 23 23 + if (!didorhandle) return undefined as undefined; 18 24 const res = await fetch( 19 25 `https://${slingshoturl}/xrpc/com.bad-example.identity.resolveMiniDoc?identifier=${encodeURIComponent(didorhandle)}` 20 26 ); ··· 31 37 } 32 38 }, 33 39 staleTime: /*0,//*/ 5 * 60 * 1000, // 5 minutes 34 34 - gcTime: /*0//*/5 * 60 * 1000, 40 40 + gcTime: /*0//*/ 5 * 60 * 1000, 35 41 }); 36 42 } 37 43 export function useQueryIdentity(didorhandle: string): UseQueryResult< ··· 43 49 }, 44 50 Error 45 51 >; 46 46 - export function useQueryIdentity(): UseQueryResult< 47 47 - undefined, 48 48 - Error 49 49 - > 50 50 - export function useQueryIdentity(didorhandle?: string): 51 51 - UseQueryResult< 52 52 - { 53 53 - did: string; 54 54 - handle: string; 55 55 - pds: string; 56 56 - signing_key: string; 57 57 - } | undefined, 58 58 - Error 59 59 - > 52 52 + export function useQueryIdentity(): UseQueryResult<undefined, Error>; 53 53 + export function useQueryIdentity(didorhandle?: string): UseQueryResult< 54 54 + | { 55 55 + did: string; 56 56 + handle: string; 57 57 + pds: string; 58 58 + signing_key: string; 59 59 + } 60 60 + | undefined, 61 61 + Error 62 62 + >; 60 63 export function useQueryIdentity(didorhandle?: string) { 61 61 - const [slingshoturl] = useAtom(slingshotURLAtom) 64 64 + const [slingshoturl] = useAtom(slingshotURLAtom); 62 65 return useQuery(constructIdentityQuery(didorhandle, slingshoturl)); 63 66 } 64 67 ··· 66 69 return queryOptions({ 67 70 queryKey: ["post", uri], 68 71 queryFn: async () => { 69 69 - if (!uri) return undefined as undefined 72 72 + if (!uri) return undefined as undefined; 70 73 const res = await fetch( 71 74 `https://${slingshoturl}/xrpc/com.bad-example.repo.getUriRecord?at_uri=${encodeURIComponent(uri)}` 72 75 ); ··· 77 80 return undefined; 78 81 } 79 82 if (res.status === 400) return undefined; 80 80 - if (data?.error === "InvalidRequest" && data.message?.includes("Could not find repo")) { 83 83 + if ( 84 84 + data?.error === "InvalidRequest" && 85 85 + data.message?.includes("Could not find repo") 86 86 + ) { 81 87 return undefined; // cache “not found” 82 88 } 83 89 try { 84 90 if (!res.ok) throw new Error("Failed to fetch post"); 85 85 - return (data) as { 91 91 + return data as { 86 92 uri: string; 87 93 cid: string; 88 94 value: any; ··· 97 103 return failureCount < 2; 98 104 }, 99 105 staleTime: /*0,//*/ 5 * 60 * 1000, // 5 minutes 100 100 - gcTime: /*0//*/5 * 60 * 1000, 106 106 + gcTime: /*0//*/ 5 * 60 * 1000, 101 107 }); 102 108 } 103 109 export function useQueryPost(uri: string): UseQueryResult< ··· 108 114 }, 109 115 Error 110 116 >; 111 111 - export function useQueryPost(): UseQueryResult< 112 112 - undefined, 113 113 - Error 114 114 - > 115 115 - export function useQueryPost(uri?: string): 116 116 - UseQueryResult< 117 117 - { 118 118 - uri: string; 119 119 - cid: string; 120 120 - value: ATPAPI.AppBskyFeedPost.Record; 121 121 - } | undefined, 122 122 - Error 123 123 - > 117 117 + export function useQueryPost(): UseQueryResult<undefined, Error>; 118 118 + export function useQueryPost(uri?: string): UseQueryResult< 119 119 + | { 120 120 + uri: string; 121 121 + cid: string; 122 122 + value: ATPAPI.AppBskyFeedPost.Record; 123 123 + } 124 124 + | undefined, 125 125 + Error 126 126 + >; 124 127 export function useQueryPost(uri?: string) { 125 125 - const [slingshoturl] = useAtom(slingshotURLAtom) 128 128 + const [slingshoturl] = useAtom(slingshotURLAtom); 126 129 return useQuery(constructPostQuery(uri, slingshoturl)); 127 130 } 128 131 ··· 130 133 return queryOptions({ 131 134 queryKey: ["profile", uri], 132 135 queryFn: async () => { 133 133 - if (!uri) return undefined as undefined 136 136 + if (!uri) return undefined as undefined; 134 137 const res = await fetch( 135 138 `https://${slingshoturl}/xrpc/com.bad-example.repo.getUriRecord?at_uri=${encodeURIComponent(uri)}` 136 139 ); ··· 141 144 return undefined; 142 145 } 143 146 if (res.status === 400) return undefined; 144 144 - if (data?.error === "InvalidRequest" && data.message?.includes("Could not find repo")) { 147 147 + if ( 148 148 + data?.error === "InvalidRequest" && 149 149 + data.message?.includes("Could not find repo") 150 150 + ) { 145 151 return undefined; // cache “not found” 146 152 } 147 153 try { 148 154 if (!res.ok) throw new Error("Failed to fetch post"); 149 149 - return (data) as { 155 155 + return data as { 150 156 uri: string; 151 157 cid: string; 152 158 value: any; ··· 161 167 return failureCount < 2; 162 168 }, 163 169 staleTime: /*0,//*/ 5 * 60 * 1000, // 5 minutes 164 164 - gcTime: /*0//*/5 * 60 * 1000, 170 170 + gcTime: /*0//*/ 5 * 60 * 1000, 165 171 }); 166 172 } 167 173 export function useQueryProfile(uri: string): UseQueryResult< ··· 172 178 }, 173 179 Error 174 180 >; 175 175 - export function useQueryProfile(): UseQueryResult< 176 176 - undefined, 177 177 - Error 178 178 - >; 179 179 - export function useQueryProfile(uri?: string): 180 180 - UseQueryResult< 181 181 - { 181 181 + export function useQueryProfile(): UseQueryResult<undefined, Error>; 182 182 + export function useQueryProfile(uri?: string): UseQueryResult< 183 183 + | { 182 184 uri: string; 183 185 cid: string; 184 186 value: ATPAPI.AppBskyActorProfile.Record; 185 185 - } | undefined, 186 186 - Error 187 187 - > 187 187 + } 188 188 + | undefined, 189 189 + Error 190 190 + >; 188 191 export function useQueryProfile(uri?: string) { 189 189 - const [slingshoturl] = useAtom(slingshotURLAtom) 192 192 + const [slingshoturl] = useAtom(slingshotURLAtom); 190 193 return useQuery(constructProfileQuery(uri, slingshoturl)); 191 194 } 192 195 ··· 222 225 // method: "/links/all", 223 226 // target: string 224 227 // ): QueryOptions<linksAllResponse, Error>; 225 225 - export function constructConstellationQuery(query?:{ 226 226 - constellation: string, 228 228 + export function constructConstellationQuery(query?: { 229 229 + constellation: string; 227 230 method: 228 231 | "/links" 229 232 | "/links/distinct-dids" 230 233 | "/links/count" 231 234 | "/links/count/distinct-dids" 232 235 | "/links/all" 233 233 - | "undefined", 234 234 - target: string, 235 235 - collection?: string, 236 236 - path?: string, 237 237 - cursor?: string, 238 238 - dids?: string[] 239 239 - } 240 240 - ) { 236 236 + | "undefined"; 237 237 + target: string; 238 238 + collection?: string; 239 239 + path?: string; 240 240 + cursor?: string; 241 241 + dids?: string[]; 242 242 + }) { 241 243 // : QueryOptions< 242 244 // | linksRecordsResponse 243 245 // | linksDidsResponse ··· 247 249 // Error 248 250 // > 249 251 return queryOptions({ 250 250 - queryKey: ["constellation", query?.method, query?.target, query?.collection, query?.path, query?.cursor, query?.dids] as const, 252 252 + queryKey: [ 253 253 + "constellation", 254 254 + query?.method, 255 255 + query?.target, 256 256 + query?.collection, 257 257 + query?.path, 258 258 + query?.cursor, 259 259 + query?.dids, 260 260 + ] as const, 251 261 queryFn: async () => { 252 252 - if (!query || query.method === "undefined") return undefined as undefined 253 253 - const method = query.method 254 254 - const target = query.target 255 255 - const collection = query?.collection 256 256 - const path = query?.path 257 257 - const cursor = query.cursor 258 258 - const dids = query?.dids 262 262 + if (!query || query.method === "undefined") return undefined as undefined; 263 263 + const method = query.method; 264 264 + const target = query.target; 265 265 + const collection = query?.collection; 266 266 + const path = query?.path; 267 267 + const cursor = query.cursor; 268 268 + const dids = query?.dids; 259 269 const res = await fetch( 260 270 `https://${query.constellation}${method}?target=${encodeURIComponent(target)}${collection ? `&collection=${encodeURIComponent(collection)}` : ""}${path ? `&path=${encodeURIComponent(path)}` : ""}${cursor ? `&cursor=${encodeURIComponent(cursor)}` : ""}${dids ? dids.map((did) => `&did=${encodeURIComponent(did)}`).join("") : ""}` 261 271 ); ··· 281 291 }, 282 292 // enforce short lifespan 283 293 staleTime: /*0,//*/ 5 * 60 * 1000, // 5 minutes 284 284 - gcTime: /*0//*/5 * 60 * 1000, 294 294 + gcTime: /*0//*/ 5 * 60 * 1000, 285 295 }); 286 296 } 287 297 // todo do more of these instead of overloads since overloads sucks so much apparently ··· 293 303 cursor?: string; 294 304 }): UseQueryResult<linksCountResponse, Error> | undefined { 295 305 //if (!query) return; 296 296 - const [constellationurl] = useAtom(constellationURLAtom) 306 306 + const [constellationurl] = useAtom(constellationURLAtom); 297 307 const queryres = useQuery( 298 298 - constructConstellationQuery(query && {constellation: constellationurl, ...query}) 308 308 + constructConstellationQuery( 309 309 + query && { constellation: constellationurl, ...query } 310 310 + ) 299 311 ) as unknown as UseQueryResult<linksCountResponse, Error>; 300 312 if (!query) { 301 301 - return undefined as undefined; 313 313 + return undefined as undefined; 302 314 } 303 315 return queryres as UseQueryResult<linksCountResponse, Error>; 304 316 } ··· 365 377 > 366 378 | undefined { 367 379 //if (!query) return; 368 368 - const [constellationurl] = useAtom(constellationURLAtom) 380 380 + const [constellationurl] = useAtom(constellationURLAtom); 369 381 return useQuery( 370 370 - constructConstellationQuery(query && {constellation: constellationurl, ...query}) 382 382 + constructConstellationQuery( 383 383 + query && { constellation: constellationurl, ...query } 384 384 + ) 371 385 ); 372 386 } 373 387 ··· 411 425 }) { 412 426 return queryOptions({ 413 427 // The query key includes all dependencies to ensure it refetches when they change 414 414 - queryKey: ["feedSkeleton", options?.feedUri, { isAuthed: options?.isAuthed, did: options?.agent?.did }], 428 428 + queryKey: [ 429 429 + "feedSkeleton", 430 430 + options?.feedUri, 431 431 + { isAuthed: options?.isAuthed, did: options?.agent?.did }, 432 432 + ], 415 433 queryFn: async () => { 416 416 - if (!options) return undefined as undefined 434 434 + if (!options) return undefined as undefined; 417 435 const { feedUri, agent, isAuthed, pdsUrl, feedServiceDid } = options; 418 436 if (isAuthed) { 419 437 // Authenticated flow 420 438 if (!agent || !pdsUrl || !feedServiceDid) { 421 421 - throw new Error("Missing required info for authenticated feed fetch."); 439 439 + throw new Error( 440 440 + "Missing required info for authenticated feed fetch." 441 441 + ); 422 442 } 423 443 const url = `${pdsUrl}/xrpc/app.bsky.feed.getFeedSkeleton?feed=${encodeURIComponent(feedUri)}`; 424 444 const res = await agent.fetchHandler(url, { ··· 428 448 "Content-Type": "application/json", 429 449 }, 430 450 }); 431 431 - if (!res.ok) throw new Error(`Authenticated feed fetch failed: ${res.statusText}`); 451 451 + if (!res.ok) 452 452 + throw new Error(`Authenticated feed fetch failed: ${res.statusText}`); 432 453 return (await res.json()) as ATPAPI.AppBskyFeedGetFeedSkeleton.OutputSchema; 433 454 } else { 434 455 // Unauthenticated flow (using a public PDS/AppView) 435 456 const url = `https://discover.bsky.app/xrpc/app.bsky.feed.getFeedSkeleton?feed=${encodeURIComponent(feedUri)}`; 436 457 const res = await fetch(url); 437 437 - if (!res.ok) throw new Error(`Public feed fetch failed: ${res.statusText}`); 458 458 + if (!res.ok) 459 459 + throw new Error(`Public feed fetch failed: ${res.statusText}`); 438 460 return (await res.json()) as ATPAPI.AppBskyFeedGetFeedSkeleton.OutputSchema; 439 461 } 440 462 }, ··· 452 474 return useQuery(constructFeedSkeletonQuery(options)); 453 475 } 454 476 455 455 - export function constructPreferencesQuery(agent?: ATPAPI.Agent | undefined, pdsUrl?: string | undefined) { 477 477 + export function constructPreferencesQuery( 478 478 + agent?: ATPAPI.Agent | undefined, 479 479 + pdsUrl?: string | undefined 480 480 + ) { 456 481 return queryOptions({ 457 457 - queryKey: ['preferences', agent?.did], 482 482 + queryKey: ["preferences", agent?.did], 458 483 queryFn: async () => { 459 484 if (!agent || !pdsUrl) throw new Error("Agent or PDS URL not available"); 460 485 const url = `${pdsUrl}/xrpc/app.bsky.actor.getPreferences`; ··· 465 490 }); 466 491 } 467 492 export function useQueryPreferences(options: { 468 468 - agent?: ATPAPI.Agent | undefined, pdsUrl?: string | undefined 493 493 + agent?: ATPAPI.Agent | undefined; 494 494 + pdsUrl?: string | undefined; 469 495 }) { 470 496 return useQuery(constructPreferencesQuery(options.agent, options.pdsUrl)); 471 497 } 472 498 473 473 - 474 474 - 475 499 export function constructArbitraryQuery(uri?: string, slingshoturl?: string) { 476 500 return queryOptions({ 477 501 queryKey: ["arbitrary", uri], 478 502 queryFn: async () => { 479 479 - if (!uri) return undefined as undefined 503 503 + if (!uri) return undefined as undefined; 480 504 const res = await fetch( 481 505 `https://${slingshoturl}/xrpc/com.bad-example.repo.getUriRecord?at_uri=${encodeURIComponent(uri)}` 482 506 ); ··· 487 511 return undefined; 488 512 } 489 513 if (res.status === 400) return undefined; 490 490 - if (data?.error === "InvalidRequest" && data.message?.includes("Could not find repo")) { 514 514 + if ( 515 515 + data?.error === "InvalidRequest" && 516 516 + data.message?.includes("Could not find repo") 517 517 + ) { 491 518 return undefined; // cache “not found” 492 519 } 493 520 try { 494 521 if (!res.ok) throw new Error("Failed to fetch post"); 495 495 - return (data) as { 522 522 + return data as { 496 523 uri: string; 497 524 cid: string; 498 525 value: any; ··· 507 534 return failureCount < 2; 508 535 }, 509 536 staleTime: /*0,//*/ 5 * 60 * 1000, // 5 minutes 510 510 - gcTime: /*0//*/5 * 60 * 1000, 537 537 + gcTime: /*0//*/ 5 * 60 * 1000, 511 538 }); 512 539 } 513 540 export function useQueryArbitrary(uri: string): UseQueryResult< ··· 518 545 }, 519 546 Error 520 547 >; 521 521 - export function useQueryArbitrary(): UseQueryResult< 522 522 - undefined, 523 523 - Error 524 524 - >; 548 548 + export function useQueryArbitrary(): UseQueryResult<undefined, Error>; 525 549 export function useQueryArbitrary(uri?: string): UseQueryResult< 526 526 - { 527 527 - uri: string; 528 528 - cid: string; 529 529 - value: any; 530 530 - } | undefined, 550 550 + | { 551 551 + uri: string; 552 552 + cid: string; 553 553 + value: any; 554 554 + } 555 555 + | undefined, 531 556 Error 532 557 >; 533 558 export function useQueryArbitrary(uri?: string) { 534 534 - const [slingshoturl] = useAtom(slingshotURLAtom) 559 559 + const [slingshoturl] = useAtom(slingshotURLAtom); 535 560 return useQuery(constructArbitraryQuery(uri, slingshoturl)); 536 561 } 537 562 538 538 - export function constructFallbackNothingQuery(){ 563 563 + export function constructFallbackNothingQuery() { 539 564 return queryOptions({ 540 565 queryKey: ["nothing"], 541 566 queryFn: async () => { 542 542 - return undefined 567 567 + return undefined; 543 568 }, 544 569 }); 545 570 } ··· 553 578 }[]; 554 579 }; 555 580 556 556 - export function constructAuthorFeedQuery(did: string, pdsUrl: string, collection: string = "app.bsky.feed.post") { 581 581 + export function constructAuthorFeedQuery( 582 582 + did: string, 583 583 + pdsUrl: string, 584 584 + collection: string = "app.bsky.feed.post" 585 585 + ) { 557 586 return queryOptions({ 558 558 - queryKey: ['authorFeed', did, collection], 587 587 + queryKey: ["authorFeed", did, collection], 559 588 queryFn: async ({ pageParam }: QueryFunctionContext) => { 560 589 const limit = 25; 561 561 - 590 590 + 562 591 const cursor = pageParam as string | undefined; 563 563 - const cursorParam = cursor ? `&cursor=${cursor}` : ''; 564 564 - 592 592 + const cursorParam = cursor ? `&cursor=${cursor}` : ""; 593 593 + 565 594 const url = `${pdsUrl}/xrpc/com.atproto.repo.listRecords?repo=${did}&collection=${collection}&limit=${limit}${cursorParam}`; 566 566 - 595 595 + 567 596 const res = await fetch(url); 568 597 if (!res.ok) throw new Error("Failed to fetch author's posts"); 569 569 - 598 598 + 570 599 return res.json() as Promise<ListRecordsResponse>; 571 600 }, 572 601 }); 573 602 } 574 603 575 575 - export function useInfiniteQueryAuthorFeed(did: string | undefined, pdsUrl: string | undefined, collection?: string) { 576 576 - const { queryKey, queryFn } = constructAuthorFeedQuery(did!, pdsUrl!, collection); 577 577 - 604 604 + export function useInfiniteQueryAuthorFeed( 605 605 + did: string | undefined, 606 606 + pdsUrl: string | undefined, 607 607 + collection?: string 608 608 + ) { 609 609 + const { queryKey, queryFn } = constructAuthorFeedQuery( 610 610 + did!, 611 611 + pdsUrl!, 612 612 + collection 613 613 + ); 614 614 + 578 615 return useInfiniteQuery({ 579 616 queryKey, 580 617 queryFn, ··· 595 632 // todo the hell is a unauthedfeedurl 596 633 unauthedfeedurl?: string; 597 634 }) { 598 598 - const { feedUri, agent, isAuthed, pdsUrl, feedServiceDid, unauthedfeedurl } = options; 599 599 - 635 635 + const { feedUri, agent, isAuthed, pdsUrl, feedServiceDid, unauthedfeedurl } = 636 636 + options; 637 637 + 600 638 return queryOptions({ 601 639 queryKey: ["feedSkeleton", feedUri, { isAuthed, did: agent?.did }], 602 602 - 603 603 - queryFn: async ({ pageParam }: QueryFunctionContext): Promise<FeedSkeletonPage> => { 640 640 + 641 641 + queryFn: async ({ 642 642 + pageParam, 643 643 + }: QueryFunctionContext): Promise<FeedSkeletonPage> => { 604 644 const cursorParam = pageParam ? `&cursor=${pageParam}` : ""; 605 605 - 645 645 + 606 646 if (isAuthed && !unauthedfeedurl) { 607 647 if (!agent || !pdsUrl || !feedServiceDid) { 608 608 - throw new Error("Missing required info for authenticated feed fetch."); 648 648 + throw new Error( 649 649 + "Missing required info for authenticated feed fetch." 650 650 + ); 609 651 } 610 652 const url = `${pdsUrl}/xrpc/app.bsky.feed.getFeedSkeleton?feed=${encodeURIComponent(feedUri)}${cursorParam}`; 611 653 const res = await agent.fetchHandler(url, { ··· 615 657 "Content-Type": "application/json", 616 658 }, 617 659 }); 618 618 - if (!res.ok) throw new Error(`Authenticated feed fetch failed: ${res.statusText}`); 660 660 + if (!res.ok) 661 661 + throw new Error(`Authenticated feed fetch failed: ${res.statusText}`); 619 662 return (await res.json()) as FeedSkeletonPage; 620 663 } else { 621 664 const url = `https://${unauthedfeedurl ? unauthedfeedurl : "discover.bsky.app"}/xrpc/app.bsky.feed.getFeedSkeleton?feed=${encodeURIComponent(feedUri)}${cursorParam}`; 622 665 const res = await fetch(url); 623 623 - if (!res.ok) throw new Error(`Public feed fetch failed: ${res.statusText}`); 666 666 + if (!res.ok) 667 667 + throw new Error(`Public feed fetch failed: ${res.statusText}`); 624 668 return (await res.json()) as FeedSkeletonPage; 625 669 } 626 670 }, ··· 636 680 unauthedfeedurl?: string; 637 681 }) { 638 682 const { queryKey, queryFn } = constructInfiniteFeedSkeletonQuery(options); 639 639 - 640 640 - return {...useInfiniteQuery({ 641 641 - queryKey, 642 642 - queryFn, 643 643 - initialPageParam: undefined as never, 644 644 - getNextPageParam: (lastPage) => lastPage.cursor as null | undefined, 645 645 - staleTime: Infinity, 646 646 - refetchOnWindowFocus: false, 647 647 - enabled: !!options.feedUri && (options.isAuthed ? (!!options.agent && !!options.pdsUrl || !!options.unauthedfeedurl) && !!options.feedServiceDid : true), 648 648 - }), queryKey: queryKey}; 649 649 - } 650 683 684 684 + return { 685 685 + ...useInfiniteQuery({ 686 686 + queryKey, 687 687 + queryFn, 688 688 + initialPageParam: undefined as never, 689 689 + getNextPageParam: (lastPage) => lastPage.cursor as null | undefined, 690 690 + staleTime: Infinity, 691 691 + refetchOnWindowFocus: false, 692 692 + enabled: 693 693 + !!options.feedUri && 694 694 + (options.isAuthed 695 695 + ? ((!!options.agent && !!options.pdsUrl) || 696 696 + !!options.unauthedfeedurl) && 697 697 + !!options.feedServiceDid 698 698 + : true), 699 699 + }), 700 700 + queryKey: queryKey, 701 701 + }; 702 702 + } 651 703 652 704 export function yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks(query?: { 653 653 - constellation: string, 654 654 - method: '/links' 655 655 - target?: string 656 656 - collection: string 657 657 - path: string 705 705 + constellation: string; 706 706 + method: "/links"; 707 707 + target?: string; 708 708 + collection: string; 709 709 + path: string; 710 710 + staleMult?: number; 658 711 }) { 712 712 + const safemult = query?.staleMult ?? 1; 659 713 // console.log( 660 714 // 'yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks', 661 715 // query, ··· 664 718 return infiniteQueryOptions({ 665 719 enabled: !!query?.target, 666 720 queryKey: [ 667 667 - 'reddwarf_constellation', 721 721 + "reddwarf_constellation", 668 722 query?.method, 669 723 query?.target, 670 724 query?.collection, 671 725 query?.path, 672 726 ] as const, 673 727 674 674 - queryFn: async ({pageParam}: {pageParam?: string}) => { 675 675 - if (!query || !query?.target) return undefined 728 728 + queryFn: async ({ pageParam }: { pageParam?: string }) => { 729 729 + if (!query || !query?.target) return undefined; 676 730 677 677 - const method = query.method 678 678 - const target = query.target 679 679 - const collection = query.collection 680 680 - const path = query.path 681 681 - const cursor = pageParam 731 731 + const method = query.method; 732 732 + const target = query.target; 733 733 + const collection = query.collection; 734 734 + const path = query.path; 735 735 + const cursor = pageParam; 682 736 683 737 const res = await fetch( 684 738 `https://${query.constellation}${method}?target=${encodeURIComponent(target)}${ 685 685 - collection ? `&collection=${encodeURIComponent(collection)}` : '' 686 686 - }${path ? `&path=${encodeURIComponent(path)}` : ''}${ 687 687 - cursor ? `&cursor=${encodeURIComponent(cursor)}` : '' 688 688 - }`, 689 689 - ) 739 739 + collection ? `&collection=${encodeURIComponent(collection)}` : "" 740 740 + }${path ? `&path=${encodeURIComponent(path)}` : ""}${ 741 741 + cursor ? `&cursor=${encodeURIComponent(cursor)}` : "" 742 742 + }` 743 743 + ); 690 744 691 691 - if (!res.ok) throw new Error('Failed to fetch') 745 745 + if (!res.ok) throw new Error("Failed to fetch"); 692 746 693 693 - return (await res.json()) as linksRecordsResponse 747 747 + return (await res.json()) as linksRecordsResponse; 694 748 }, 695 749 696 696 - getNextPageParam: lastPage => { 697 697 - return (lastPage as any)?.cursor ?? undefined 750 750 + getNextPageParam: (lastPage) => { 751 751 + return (lastPage as any)?.cursor ?? undefined; 698 752 }, 699 753 initialPageParam: undefined, 700 700 - staleTime: 5 * 60 * 1000, 701 701 - gcTime: 5 * 60 * 1000, 702 702 - }) 703 703 - } 754 754 + staleTime: 5 * 60 * 1000 * safemult, 755 755 + gcTime: 5 * 60 * 1000 * safemult, 756 756 + }); 757 757 + } 758 758 + 759 759 + export function useQueryLycanStatus() { 760 760 + const [lycanurl] = useAtom(lycanURLAtom); 761 761 + const { agent, status } = useAuth(); 762 762 + const { data: identity } = useQueryIdentity(agent?.did); 763 763 + return useQuery( 764 764 + constructLycanStatusCheckQuery({ 765 765 + agent: agent || undefined, 766 766 + isAuthed: status === "signedIn", 767 767 + pdsUrl: identity?.pds, 768 768 + feedServiceDid: "did:web:"+lycanurl, 769 769 + }) 770 770 + ); 771 771 + } 772 772 + 773 773 + export function constructLycanStatusCheckQuery(options: { 774 774 + agent?: ATPAPI.Agent; 775 775 + isAuthed: boolean; 776 776 + pdsUrl?: string; 777 777 + feedServiceDid?: string; 778 778 + }) { 779 779 + const { agent, isAuthed, pdsUrl, feedServiceDid } = options; 780 780 + 781 781 + return queryOptions({ 782 782 + queryKey: ["lycanStatus", { isAuthed, did: agent?.did }], 783 783 + 784 784 + queryFn: async () => { 785 785 + if (isAuthed && agent && pdsUrl && feedServiceDid) { 786 786 + const url = `${pdsUrl}/xrpc/blue.feeds.lycan.getImportStatus`; 787 787 + const res = await agent.fetchHandler(url, { 788 788 + method: "GET", 789 789 + headers: { 790 790 + "atproto-proxy": `${feedServiceDid}#lycan`, 791 791 + "Content-Type": "application/json", 792 792 + }, 793 793 + }); 794 794 + if (!res.ok) 795 795 + throw new Error( 796 796 + `Authenticated lycan status fetch failed: ${res.statusText}` 797 797 + ); 798 798 + return (await res.json()) as statuschek; 799 799 + } 800 800 + return undefined; 801 801 + }, 802 802 + }); 803 803 + } 804 804 + 805 805 + type statuschek = { 806 806 + [key: string]: unknown; 807 807 + error?: "MethodNotImplemented"; 808 808 + message?: "Method Not Implemented"; 809 809 + status?: "finished" | "in_progress"; 810 810 + position?: string, 811 811 + progress?: number, 812 812 + 813 813 + }; 814 814 + 815 815 + //{"status":"in_progress","position":"2025-08-30T06:53:18Z","progress":0.0878319661441268} 816 816 + type importtype = { 817 817 + message?: "Import has already started" | "Import has been scheduled" 818 818 + } 819 819 + 820 820 + export function constructLycanRequestIndexQuery(options: { 821 821 + agent?: ATPAPI.Agent; 822 822 + isAuthed: boolean; 823 823 + pdsUrl?: string; 824 824 + feedServiceDid?: string; 825 825 + }) { 826 826 + const { agent, isAuthed, pdsUrl, feedServiceDid } = options; 827 827 + 828 828 + return queryOptions({ 829 829 + queryKey: ["lycanIndex", { isAuthed, did: agent?.did }], 830 830 + 831 831 + queryFn: async () => { 832 832 + if (isAuthed && agent && pdsUrl && feedServiceDid) { 833 833 + const url = `${pdsUrl}/xrpc/blue.feeds.lycan.startImport`; 834 834 + const res = await agent.fetchHandler(url, { 835 835 + method: "POST", 836 836 + headers: { 837 837 + "atproto-proxy": `${feedServiceDid}#lycan`, 838 838 + "Content-Type": "application/json", 839 839 + }, 840 840 + }); 841 841 + if (!res.ok) 842 842 + throw new Error( 843 843 + `Authenticated lycan status fetch failed: ${res.statusText}` 844 844 + ); 845 845 + return await res.json() as importtype; 846 846 + } 847 847 + return undefined; 848 848 + }, 849 849 + }); 850 850 + } 851 851 + 852 852 + type LycanSearchPage = { 853 853 + terms: string[]; 854 854 + posts: string[]; 855 855 + cursor?: string; 856 856 + }; 857 857 + 858 858 + 859 859 + export function useInfiniteQueryLycanSearch(options: { query: string, type: "likes" | "pins" | "reposts" | "quotes"}) { 860 860 + 861 861 + 862 862 + const [lycanurl] = useAtom(lycanURLAtom); 863 863 + const { agent, status } = useAuth(); 864 864 + const { data: identity } = useQueryIdentity(agent?.did); 865 865 + 866 866 + const { queryKey, queryFn } = constructLycanSearchQuery({ 867 867 + agent: agent || undefined, 868 868 + isAuthed: status === "signedIn", 869 869 + pdsUrl: identity?.pds, 870 870 + feedServiceDid: "did:web:"+lycanurl, 871 871 + query: options.query, 872 872 + type: options.type, 873 873 + }) 874 874 + 875 875 + return { 876 876 + ...useInfiniteQuery({ 877 877 + queryKey, 878 878 + queryFn, 879 879 + initialPageParam: undefined as never, 880 880 + getNextPageParam: (lastPage) => lastPage?.cursor as null | undefined, 881 881 + //staleTime: Infinity, 882 882 + refetchOnWindowFocus: false, 883 883 + // enabled: 884 884 + // !!options.feedUri && 885 885 + // (options.isAuthed 886 886 + // ? ((!!options.agent && !!options.pdsUrl) || 887 887 + // !!options.unauthedfeedurl) && 888 888 + // !!options.feedServiceDid 889 889 + // : true), 890 890 + }), 891 891 + queryKey: queryKey, 892 892 + }; 893 893 + } 894 894 + 895 895 + 896 896 + export function constructLycanSearchQuery(options: { 897 897 + agent?: ATPAPI.Agent; 898 898 + isAuthed: boolean; 899 899 + pdsUrl?: string; 900 900 + feedServiceDid?: string; 901 901 + type: "likes" | "pins" | "reposts" | "quotes"; 902 902 + query: string; 903 903 + }) { 904 904 + const { agent, isAuthed, pdsUrl, feedServiceDid, type, query } = options; 905 905 + 906 906 + return infiniteQueryOptions({ 907 907 + queryKey: ["lycanSearch", query, type, { isAuthed, did: agent?.did }], 908 908 + 909 909 + queryFn: async ({ 910 910 + pageParam, 911 911 + }: QueryFunctionContext): Promise<LycanSearchPage | undefined> => { 912 912 + if (isAuthed && agent && pdsUrl && feedServiceDid) { 913 913 + const url = `${pdsUrl}/xrpc/blue.feeds.lycan.searchPosts?query=${query}&collection=${type}${pageParam ? `&cursor=${pageParam}` : ""}`; 914 914 + const res = await agent.fetchHandler(url, { 915 915 + method: "GET", 916 916 + headers: { 917 917 + "atproto-proxy": `${feedServiceDid}#lycan`, 918 918 + "Content-Type": "application/json", 919 919 + }, 920 920 + }); 921 921 + if (!res.ok) 922 922 + throw new Error( 923 923 + `Authenticated lycan status fetch failed: ${res.statusText}` 924 924 + ); 925 925 + return (await res.json()) as LycanSearchPage; 926 926 + } 927 927 + return undefined; 928 928 + }, 929 929 + initialPageParam: undefined as never, 930 930 + getNextPageParam: (lastPage) => lastPage?.cursor as null | undefined, 931 931 + }); 932 932 + }

+5

vite.config.ts

··· 13 13 const PROD_URL = "https://reddwarf.app" 14 14 const DEV_URL = "https://local3768forumtest.whey.party" 15 15 16 16 + const PROD_HANDLE_RESOLVER_PDS = "https://pds-nd.whey.party" 17 17 + const DEV_HANDLE_RESOLVER_PDS = "https://bsky.social" 18 18 + 16 19 function shp(url: string): string { 17 20 return url.replace(/^https?:\/\//, ''); 18 21 } ··· 23 26 generateMetadataPlugin({ 24 27 prod: PROD_URL, 25 28 dev: DEV_URL, 29 29 + prodResolver: PROD_HANDLE_RESOLVER_PDS, 30 30 + devResolver: DEV_HANDLE_RESOLVER_PDS, 26 31 }), 27 32 TanStackRouterVite({ autoCodeSplitting: true }), 28 33 viteReact({