+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

+10 -1

README.md

··· 8 8 ## running dev and build 9 9 in the `vite.config.ts` file you should change these values 10 10 ```ts 11 11 - const PROD_URL = "https://reddwarf.whey.party" 11 11 + const PROD_URL = "https://reddwarf.app" 12 12 const DEV_URL = "https://local3768forumtest.whey.party" 13 13 ``` 14 14 the PROD_URL is what will compile your oauth client metadata so it is very important to change that. same for DEV_URL if you are using a tunnel for dev work 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 17 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!

+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 + }

+14

package-lock.json

··· 8 8 "dependencies": { 9 9 "@atproto/api": "^0.16.6", 10 10 "@atproto/oauth-client-browser": "^0.3.33", 11 11 + "@radix-ui/react-dialog": "^1.1.15", 11 12 "@radix-ui/react-dropdown-menu": "^2.1.16", 13 13 + "@radix-ui/react-hover-card": "^1.1.15", 14 14 + "@radix-ui/react-slider": "^1.3.6", 12 15 "@tailwindcss/vite": "^4.0.6", 13 16 "@tanstack/query-sync-storage-persister": "^5.85.6", 14 17 "@tanstack/react-devtools": "^0.2.2", ··· 26 29 "react": "^19.0.0", 27 30 "react-dom": "^19.0.0", 28 31 "react-player": "^3.3.2", 32 32 + "sonner": "^2.0.7", 29 33 "tailwindcss": "^4.0.6", 30 34 "tanstack-router-keepalive": "^1.0.0" 31 35 }, ··· 2400 2404 "version": "1.1.15", 2401 2405 "resolved": "https://registry.npmjs.org/@radix-ui/react-hover-card/-/react-hover-card-1.1.15.tgz", 2402 2406 "integrity": "sha512-qgTkjNT1CfKMoP0rcasmlH2r1DAiYicWsDsufxl940sT2wHNEWWv6FMWIQXWhVdmC1d/HYfbhQx60KYyAtKxjg==", 2407 2407 + "license": "MIT", 2403 2408 "dependencies": { 2404 2409 "@radix-ui/primitive": "1.1.3", 2405 2410 "@radix-ui/react-compose-refs": "1.1.2", ··· 12539 12544 "csstype": "^3.1.0", 12540 12545 "seroval": "~1.3.0", 12541 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" 12542 12556 } 12543 12557 }, 12544 12558 "node_modules/source-map": {

+4

package.json

··· 12 12 "dependencies": { 13 13 "@atproto/api": "^0.16.6", 14 14 "@atproto/oauth-client-browser": "^0.3.33", 15 15 + "@radix-ui/react-dialog": "^1.1.15", 15 16 "@radix-ui/react-dropdown-menu": "^2.1.16", 17 17 + "@radix-ui/react-hover-card": "^1.1.15", 18 18 + "@radix-ui/react-slider": "^1.3.6", 16 19 "@tailwindcss/vite": "^4.0.6", 17 20 "@tanstack/query-sync-storage-persister": "^5.85.6", 18 21 "@tanstack/react-devtools": "^0.2.2", ··· 30 33 "react": "^19.0.0", 31 34 "react-dom": "^19.0.0", 32 35 "react-player": "^3.3.2", 36 36 + "sonner": "^2.0.7", 33 37 "tailwindcss": "^4.0.6", 34 38 "tanstack-router-keepalive": "^1.0.0" 35 39 },

+6

src/auto-imports.d.ts

··· 18 18 const IconMaterialSymbolsSettingsOutline: typeof import('~icons/material-symbols/settings-outline.jsx').default 19 19 const IconMaterialSymbolsTag: typeof import('~icons/material-symbols/tag.jsx').default 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 24 24 + const IconMdiMessageReplyTextOutline: typeof import('~icons/mdi/message-reply-text-outline.jsx').default 21 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 22 28 }

+153 -107

src/components/Composer.tsx

··· 1 1 - import { RichText } from "@atproto/api"; 1 1 + import { AppBskyRichtextFacet, RichText } from "@atproto/api"; 2 2 import { useAtom } from "jotai"; 3 3 + import { Dialog } from "radix-ui"; 3 4 import { useEffect, useRef, useState } from "react"; 4 5 5 6 import { useAuth } from "~/providers/UnifiedAuthProvider"; ··· 9 10 import { ProfileThing } from "./Login"; 10 11 import { UniversalPostRendererATURILoader } from "./UniversalPostRenderer"; 11 12 12 12 - const MAX_POST_LENGTH = 300 13 13 + const MAX_POST_LENGTH = 300; 13 14 14 15 export function Composer() { 15 16 const [composerState, setComposerState] = useAtom(composerAtom); ··· 31 32 composerState.kind === "reply" 32 33 ? composerState.parent 33 34 : composerState.kind === "quote" 34 34 - ? composerState.subject 35 35 - : undefined; 35 35 + ? composerState.subject 36 36 + : undefined; 36 37 37 37 - const { data: parentPost, isLoading: isParentLoading } = useQueryPost(parentUri); 38 38 + const { data: parentPost, isLoading: isParentLoading } = 39 39 + useQueryPost(parentUri); 38 40 39 41 async function handlePost() { 40 42 if (!agent || !postText.trim() || postText.length > MAX_POST_LENGTH) return; ··· 46 48 const rt = new RichText({ text: postText }); 47 49 await rt.detectFacets(agent); 48 50 51 51 + if (rt.facets?.length) { 52 52 + rt.facets = rt.facets.filter((item) => { 53 53 + if (item.$type !== "app.bsky.richtext.facet") return true; 54 54 + if (!item.features?.length) return true; 55 55 + 56 56 + item.features = item.features.filter((feature) => { 57 57 + if (feature.$type !== "app.bsky.richtext.facet#mention") return true; 58 58 + const did = feature.$type === "app.bsky.richtext.facet#mention" ? (feature as AppBskyRichtextFacet.Mention)?.did : undefined; 59 59 + return typeof did === "string" && did.startsWith("did:"); 60 60 + }); 61 61 + 62 62 + return item.features.length > 0; 63 63 + }); 64 64 + } 65 65 + 49 66 const record: Record<string, unknown> = { 50 67 $type: "app.bsky.feed.post", 51 68 text: rt.text, ··· 95 112 setPosting(false); 96 113 } 97 114 } 98 98 - 99 99 - if (composerState.kind === "closed") { 100 100 - return null; 101 101 - } 115 115 + // if (composerState.kind === "closed") { 116 116 + // return null; 117 117 + // } 102 118 103 119 const getPlaceholder = () => { 104 120 switch (composerState.kind) { ··· 111 127 return "What's happening?!"; 112 128 } 113 129 }; 114 114 - 130 130 + 115 131 const charsLeft = MAX_POST_LENGTH - postText.length; 116 132 const isPostButtonDisabled = 117 117 - posting || 118 118 - !postText.trim() || 119 119 - isParentLoading || 120 120 - charsLeft < 0; 133 133 + posting || !postText.trim() || isParentLoading || charsLeft < 0; 121 134 122 135 return ( 123 123 - <div className="fixed inset-0 z-50 flex items-start justify-center pt-10 sm:pt-20 bg-black/40 dark:bg-black/50"> 124 124 - <div className="bg-gray-50 dark:bg-gray-950 border border-gray-200 dark:border-gray-700 rounded-2xl shadow-xl w-full max-w-xl relative mx-4"> 125 125 - <div className="flex flex-row justify-between p-2"> 126 126 - <button 127 127 - className="h-8 w-8 flex items-center justify-center rounded-full text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800" 128 128 - onClick={() => !posting && setComposerState({ kind: "closed" })} 129 129 - disabled={posting} 130 130 - aria-label="Close" 131 131 - > 132 132 - <svg 133 133 - xmlns="http://www.w3.org/2000/svg" 134 134 - width="20" 135 135 - height="20" 136 136 - viewBox="0 0 24 24" 137 137 - fill="none" 138 138 - stroke="currentColor" 139 139 - strokeWidth="2.5" 140 140 - strokeLinecap="round" 141 141 - strokeLinejoin="round" 142 142 - > 143 143 - <line x1="18" y1="6" x2="6" y2="18"></line> 144 144 - <line x1="6" y1="6" x2="18" y2="18"></line> 145 145 - </svg> 146 146 - </button> 147 147 - <div className="flex-1" /> 148 148 - <div className="flex items-center gap-4"> 149 149 - <span className={`text-sm ${charsLeft < 0 ? 'text-red-500' : 'text-gray-500'}`}> 150 150 - {charsLeft} 151 151 - </span> 152 152 - 153 153 - <button 154 154 - className="bg-gray-600 hover:bg-gray-700 text-white font-bold py-1 px-4 rounded-full disabled:opacity-50 disabled:cursor-not-allowed transition-colors" 155 155 - onClick={handlePost} 156 156 - disabled={isPostButtonDisabled} 157 157 - > 158 158 - {posting ? "Posting..." : "Post"} 159 159 - </button> 160 160 - </div> 161 161 - </div> 136 136 + <Dialog.Root 137 137 + open={composerState.kind !== "closed"} 138 138 + onOpenChange={(open) => { 139 139 + if (!open) setComposerState({ kind: "closed" }); 140 140 + }} 141 141 + > 142 142 + <Dialog.Portal> 143 143 + <Dialog.Overlay className="fixed disablegutter inset-0 z-50 bg-black/40 dark:bg-black/50 data-[state=open]:animate-fadeIn" /> 162 144 163 163 - {postSuccess ? ( 164 164 - <div className="flex flex-col items-center justify-center py-16"> 165 165 - <span className="text-gray-500 text-6xl mb-4">✓</span> 166 166 - <span className="text-xl font-bold text-black dark:text-white">Posted!</span> 167 167 - </div> 168 168 - ) : ( 169 169 - <div className="px-4"> 170 170 - {(composerState.kind === "reply") && ( 171 171 - <div className="mb-1 -mx-4"> 172 172 - {isParentLoading ? ( 173 173 - <div className="text-sm text-gray-500 animate-pulse"> 174 174 - Loading parent post... 175 175 - </div> 176 176 - ) : parentUri ? ( 177 177 - <UniversalPostRendererATURILoader atUri={parentUri} bottomReplyLine bottomBorder={false} /> 178 178 - ) : ( 179 179 - <div className="text-sm text-red-500 rounded-lg border border-red-500/50 p-3"> 180 180 - Could not load parent post. 181 181 - </div> 182 182 - )} 183 183 - </div> 184 184 - )} 185 185 - 186 186 - <div className="flex w-full gap-1 flex-col"> 187 187 - <ProfileThing agent={agent} large/> 188 188 - <div className="flex pl-[50px]"> 189 189 - <AutoGrowTextarea 190 190 - className="w-full text-lg bg-transparent focus:outline-none resize-none placeholder:text-gray-500 text-black dark:text-white pb-2" 191 191 - rows={5} 192 192 - placeholder={getPlaceholder()} 193 193 - value={postText} 194 194 - onChange={(e) => setPostText(e.target.value)} 145 145 + <Dialog.Content className="fixed gutter overflow-y-scroll inset-0 z-50 flex items-start justify-center pt-10 sm:pt-20 pb-[50dvh] sm:pb-[50dvh]"> 146 146 + <div className="bg-gray-50 dark:bg-gray-950 border border-gray-200 dark:border-gray-700 rounded-2xl shadow-xl w-full max-w-xl relative mx-4"> 147 147 + <div className="flex flex-row justify-between p-2"> 148 148 + <Dialog.Close asChild> 149 149 + <button 150 150 + className="h-8 w-8 flex items-center justify-center rounded-full text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800" 195 151 disabled={posting} 196 196 - autoFocus 197 197 - /> 152 152 + aria-label="Close" 153 153 + > 154 154 + <svg 155 155 + xmlns="http://www.w3.org/2000/svg" 156 156 + width="20" 157 157 + height="20" 158 158 + viewBox="0 0 24 24" 159 159 + fill="none" 160 160 + stroke="currentColor" 161 161 + strokeWidth="2.5" 162 162 + strokeLinecap="round" 163 163 + strokeLinejoin="round" 164 164 + > 165 165 + <line x1="18" y1="6" x2="6" y2="18"></line> 166 166 + <line x1="6" y1="6" x2="18" y2="18"></line> 167 167 + </svg> 168 168 + </button> 169 169 + </Dialog.Close> 170 170 + 171 171 + <div className="flex-1" /> 172 172 + <div className="flex items-center gap-4"> 173 173 + <span 174 174 + className={`text-sm ${charsLeft < 0 ? "text-red-500" : "text-gray-500"}`} 175 175 + > 176 176 + {charsLeft} 177 177 + </span> 178 178 + <button 179 179 + className="bg-gray-600 hover:bg-gray-700 text-white font-bold py-1 px-4 rounded-full disabled:opacity-50 disabled:cursor-not-allowed transition-colors" 180 180 + onClick={handlePost} 181 181 + disabled={isPostButtonDisabled} 182 182 + > 183 183 + {posting ? "Posting..." : "Post"} 184 184 + </button> 198 185 </div> 199 186 </div> 200 200 - {(composerState.kind === "quote") && ( 201 201 - <div className="mb-4 ml-[50px] rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden"> 202 202 - {isParentLoading ? ( 203 203 - <div className="text-sm text-gray-500 animate-pulse"> 204 204 - Loading parent post... 187 187 + 188 188 + {postSuccess ? ( 189 189 + <div className="flex flex-col items-center justify-center py-16"> 190 190 + <span className="text-gray-500 text-6xl mb-4">✓</span> 191 191 + <span className="text-xl font-bold text-black dark:text-white"> 192 192 + Posted! 193 193 + </span> 194 194 + </div> 195 195 + ) : ( 196 196 + <div className="px-4"> 197 197 + {composerState.kind === "reply" && ( 198 198 + <div className="mb-1 -mx-4"> 199 199 + {isParentLoading ? ( 200 200 + <div className="text-sm text-gray-500 animate-pulse"> 201 201 + Loading parent post... 202 202 + </div> 203 203 + ) : parentUri ? ( 204 204 + <UniversalPostRendererATURILoader 205 205 + atUri={parentUri} 206 206 + bottomReplyLine 207 207 + bottomBorder={false} 208 208 + /> 209 209 + ) : ( 210 210 + <div className="text-sm text-red-500 rounded-lg border border-red-500/50 p-3"> 211 211 + Could not load parent post. 212 212 + </div> 213 213 + )} 205 214 </div> 206 206 - ) : parentUri ? ( 207 207 - <UniversalPostRendererATURILoader atUri={parentUri} isQuote /> 208 208 - ) : ( 209 209 - <div className="text-sm text-red-500 rounded-lg border border-red-500/50 p-3"> 210 210 - Could not load parent post. 215 215 + )} 216 216 + 217 217 + <div className="flex w-full gap-1 flex-col"> 218 218 + <ProfileThing agent={agent} large /> 219 219 + <div className="flex pl-[50px]"> 220 220 + <AutoGrowTextarea 221 221 + className="w-full text-lg bg-transparent focus:outline-none resize-none placeholder:text-gray-500 text-black dark:text-white pb-2" 222 222 + rows={5} 223 223 + placeholder={getPlaceholder()} 224 224 + value={postText} 225 225 + onChange={(e) => setPostText(e.target.value)} 226 226 + disabled={posting} 227 227 + autoFocus 228 228 + /> 229 229 + </div> 230 230 + </div> 231 231 + 232 232 + {composerState.kind === "quote" && ( 233 233 + <div className="mb-4 ml-[50px] rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden"> 234 234 + {isParentLoading ? ( 235 235 + <div className="text-sm text-gray-500 animate-pulse"> 236 236 + Loading parent post... 237 237 + </div> 238 238 + ) : parentUri ? ( 239 239 + <UniversalPostRendererATURILoader 240 240 + atUri={parentUri} 241 241 + isQuote 242 242 + /> 243 243 + ) : ( 244 244 + <div className="text-sm text-red-500 rounded-lg border border-red-500/50 p-3"> 245 245 + Could not load parent post. 246 246 + </div> 247 247 + )} 211 248 </div> 212 249 )} 213 213 - </div> 214 214 - )} 215 250 216 216 - {postError && ( 217 217 - <div className="text-red-500 text-sm my-2 text-center">{postError}</div> 251 251 + {postError && ( 252 252 + <div className="text-red-500 text-sm my-2 text-center"> 253 253 + {postError} 254 254 + </div> 255 255 + )} 256 256 + </div> 218 257 )} 219 219 - 220 258 </div> 221 221 - )} 222 222 - </div> 223 223 - </div> 259 259 + </Dialog.Content> 260 260 + </Dialog.Portal> 261 261 + </Dialog.Root> 224 262 ); 225 263 } 226 264 227 227 - function AutoGrowTextarea({ value, className, onChange, ...props }: React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>) { 265 265 + function AutoGrowTextarea({ 266 266 + value, 267 267 + className, 268 268 + onChange, 269 269 + ...props 270 270 + }: React.DetailedHTMLProps< 271 271 + React.TextareaHTMLAttributes<HTMLTextAreaElement>, 272 272 + HTMLTextAreaElement 273 273 + >) { 228 274 const ref = useRef<HTMLTextAreaElement>(null); 229 275 230 276 useEffect(() => { ··· 243 289 {...props} 244 290 /> 245 291 ); 246 246 - } 292 292 + }

+4 -2

src/components/Header.tsx

··· 5 5 6 6 export function Header({ 7 7 backButtonCallback, 8 8 - title 8 8 + title, 9 9 + bottomBorderDisabled, 9 10 }: { 10 11 backButtonCallback?: () => void; 11 12 title?: string; 13 13 + bottomBorderDisabled?: boolean; 12 14 }) { 13 15 const router = useRouter(); 14 16 const [isAtTop] = useAtom(isAtTopAtom); 15 17 //const what = router.history. 16 18 return ( 17 17 - <div className={`flex items-center gap-3 px-3 py-3 h-[52px] sticky top-0 bg-[var(--header-bg-light)] dark:bg-[var(--header-bg-dark)] z-10 border-0 sm:border-b ${!isAtTop && "shadow-sm"} sm:shadow-none sm:dark:bg-gray-950 sm:bg-white border-gray-200 dark:border-gray-700`}> 19 19 + <div className={`flex items-center gap-3 px-3 py-3 h-[52px] sticky top-0 bg-[var(--header-bg-light)] dark:bg-[var(--header-bg-dark)] z-10 border-0 ${!bottomBorderDisabled && "sm:border-b"} ${!isAtTop && !bottomBorderDisabled && "shadow-sm"} sm:shadow-none sm:dark:bg-gray-950 sm:bg-white border-gray-200 dark:border-gray-700`}> 18 20 {backButtonCallback ? (<Link 19 21 to=".." 20 22 //className="px-3 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-900 font-bold text-lg"

+184

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"; 4 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"; 9 9 + 10 10 + /** 11 11 + * Basically the best equivalent to Search that i can do 12 12 + */ 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 + ); 21 21 + const navigate = useNavigate(); 22 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 + 36 36 + const handleEnter = () => { 37 37 + if (!textInput) return; 38 38 + handleImport({ 39 39 + text: textInput, 40 40 + navigate, 41 41 + lycanReady: 42 42 + lycanReady || (!!lycanIndexingProgress && lycanIndexingProgress > 0), 43 43 + }); 44 44 + }; 45 45 + 46 46 + const placeholder = lycanReady ? "Search..." : "Import..."; 47 47 + 48 48 + return ( 49 49 + <div className="w-full relative"> 50 50 + <IconMaterialSymbolsSearch className="w-5 h-5 absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-500" /> 51 51 + 52 52 + <input 53 53 + type="text" 54 54 + placeholder={placeholder} 55 55 + value={textInput} 56 56 + onChange={(e) => setTextInput(e.target.value)} 57 57 + onKeyDown={(e) => { 58 58 + if (e.key === "Enter") handleEnter(); 59 59 + }} 60 60 + className="w-full h-12 pl-12 pr-4 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 box-border transition" 61 61 + /> 62 62 + </div> 63 63 + ); 64 64 + } 65 65 + 66 66 + function handleImport({ 67 67 + text, 68 68 + navigate, 69 69 + lycanReady, 70 70 + }: { 71 71 + text: string; 72 72 + navigate: UseNavigateResult<string>; 73 73 + lycanReady?: boolean; 74 74 + }) { 75 75 + const trimmed = text.trim(); 76 76 + // parse text 77 77 + /** 78 78 + * text might be 79 79 + * 1. bsky dot app url (reddwarf link segments might be uri encoded,) 80 80 + * 2. aturi 81 81 + * 3. plain handle 82 82 + * 4. plain did 83 83 + */ 84 84 + 85 85 + // 1. Check if it’s a URL 86 86 + try { 87 87 + const url = new URL(text); 88 88 + const knownHosts = [ 89 89 + "bsky.app", 90 90 + "social.daniela.lol", 91 91 + "deer.social", 92 92 + "reddwarf.whey.party", 93 93 + "reddwarf.app", 94 94 + "main.bsky.dev", 95 95 + "catsky.social", 96 96 + "blacksky.community", 97 97 + "red-dwarf-social-app.whey.party", 98 98 + "zeppelin.social", 99 99 + ]; 100 100 + if (knownHosts.includes(url.hostname)) { 101 101 + // parse path to get URI or handle 102 102 + const path = decodeURIComponent(url.pathname.slice(1)); // remove leading / 103 103 + console.log("BSky URL path:", path); 104 104 + navigate({ 105 105 + to: `/${path}`, 106 106 + }); 107 107 + return; 108 108 + } 109 109 + } catch { 110 110 + // not a URL, continue 111 111 + } 112 112 + 113 113 + // 2. Check if text looks like an at-uri 114 114 + try { 115 115 + if (text.startsWith("at://")) { 116 116 + console.log("AT URI detected:", text); 117 117 + const aturi = new AtUri(text); 118 118 + switch (aturi.collection) { 119 119 + case "app.bsky.feed.post": { 120 120 + navigate({ 121 121 + to: "/profile/$did/post/$rkey", 122 122 + params: { 123 123 + did: aturi.host, 124 124 + rkey: aturi.rkey, 125 125 + }, 126 126 + }); 127 127 + return; 128 128 + } 129 129 + case "app.bsky.actor.profile": { 130 130 + navigate({ 131 131 + to: "/profile/$did", 132 132 + params: { 133 133 + did: aturi.host, 134 134 + }, 135 135 + }); 136 136 + return; 137 137 + } 138 138 + // todo add more handlers as more routes are added. like feeds, lists, etc etc thanks! 139 139 + default: { 140 140 + // continue 141 141 + } 142 142 + } 143 143 + } 144 144 + } catch { 145 145 + // continue 146 146 + } 147 147 + 148 148 + // 3. Plain handle (starts with @) 149 149 + try { 150 150 + if (text.startsWith("@")) { 151 151 + const handle = text.slice(1); 152 152 + console.log("Handle detected:", handle); 153 153 + navigate({ to: "/profile/$did", params: { did: handle } }); 154 154 + return; 155 155 + } 156 156 + } catch { 157 157 + // continue 158 158 + } 159 159 + 160 160 + // 4. Plain DID (starts with did:) 161 161 + try { 162 162 + if (text.startsWith("did:")) { 163 163 + console.log("did detected:", text); 164 164 + navigate({ to: "/profile/$did", params: { did: text } }); 165 165 + return; 166 166 + } 167 167 + } catch { 168 168 + // continue 169 169 + } 170 170 + 171 171 + // if all else fails 172 172 + 173 173 + // try { 174 174 + // // probably a user? 175 175 + // navigate({ to: "/profile/$did", params: { did: text } }); 176 176 + // return; 177 177 + // } catch { 178 178 + // // continue 179 179 + // } 180 180 + 181 181 + if (lycanReady) { 182 182 + navigate({ to: "/search", search: { q: text } }); 183 183 + } 184 184 + }

+38 -7

src/components/InfiniteCustomFeed.tsx

··· 1 1 + import { useQueryClient } from "@tanstack/react-query"; 1 2 import * as React from "react"; 2 3 3 4 //import { useInView } from "react-intersection-observer"; ··· 13 14 feedUri: string; 14 15 pdsUrl?: string; 15 16 feedServiceDid?: string; 17 17 + authedOverride?: boolean; 18 18 + unauthedfeedurl?: string; 16 19 } 17 20 18 21 export function InfiniteCustomFeed({ 19 22 feedUri, 20 23 pdsUrl, 21 24 feedServiceDid, 25 25 + authedOverride, 26 26 + unauthedfeedurl, 22 27 }: InfiniteCustomFeedProps) { 23 28 const { agent } = useAuth(); 24 24 - const authed = !!agent?.did; 29 29 + const authed = authedOverride || !!agent?.did; 25 30 26 31 // const identityresultmaybe = useQueryIdentity(agent?.did); 27 32 // const identity = identityresultmaybe?.data; ··· 37 42 isFetchingNextPage, 38 43 refetch, 39 44 isRefetching, 45 45 + queryKey, 40 46 } = useInfiniteQueryFeedSkeleton({ 41 47 feedUri: feedUri, 42 48 agent: agent ?? undefined, 43 49 isAuthed: authed ?? false, 44 50 pdsUrl: pdsUrl, 45 51 feedServiceDid: feedServiceDid, 52 52 + unauthedfeedurl: unauthedfeedurl, 46 53 }); 54 54 + const queryClient = useQueryClient(); 55 55 + 47 56 48 57 const handleRefresh = () => { 58 58 + queryClient.removeQueries({queryKey: queryKey}); 59 59 + //queryClient.invalidateQueries(["infinite-feed", feedUri] as const); 49 60 refetch(); 50 61 }; 51 62 63 63 + const allPosts = React.useMemo(() => { 64 64 + const flattenedPosts = data?.pages.flatMap((page) => page?.feed) ?? []; 65 65 + 66 66 + const seenUris = new Set<string>(); 67 67 + 68 68 + return flattenedPosts.filter((item) => { 69 69 + if (!item?.post) return false; 70 70 + 71 71 + if (seenUris.has(item.post)) { 72 72 + return false; 73 73 + } 74 74 + 75 75 + seenUris.add(item.post); 76 76 + 77 77 + return true; 78 78 + }); 79 79 + }, [data]); 80 80 + 52 81 //const { ref, inView } = useInView(); 53 82 54 83 // React.useEffect(() => { ··· 67 96 ); 68 97 } 69 98 70 70 - const allPosts = 71 71 - data?.pages.flatMap((page) => { 72 72 - if (page) return page.feed; 73 73 - }) ?? []; 99 99 + // const allPosts = 100 100 + // data?.pages.flatMap((page) => { 101 101 + // if (page) return page.feed; 102 102 + // }) ?? []; 74 103 75 104 if (!allPosts || typeof allPosts !== "object" || allPosts.length === 0) { 76 105 return ( ··· 116 145 className="sticky lg:bottom-4 bottom-22 ml-4 w-[42px] h-[42px] z-10 bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 text-gray-50 p-[9px] rounded-full shadow-lg transition-transform duration-200 ease-in-out hover:scale-110 disabled:dark:bg-gray-900 disabled:bg-gray-100 disabled:cursor-not-allowed" 117 146 aria-label="Refresh feed" 118 147 > 119 119 - <RefreshIcon className={`h-6 w-6 text-gray-600 dark:text-gray-400 ${isRefetching && "animate-spin"}`} /> 148 148 + <RefreshIcon 149 149 + className={`h-6 w-6 text-gray-600 dark:text-gray-400 ${isRefetching && "animate-spin"}`} 150 150 + /> 120 151 </button> 121 152 </> 122 153 ); ··· 139 170 d="M20 11A8.1 8.1 0 0 0 4.5 9M4 5v4h4m-4 4a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" 140 171 ></path> 141 172 </svg> 142 142 - ); 173 173 + );

+65 -22

src/components/Login.tsx

··· 1 1 // src/components/Login.tsx 2 2 import AtpAgent, { Agent } from "@atproto/api"; 3 3 + import { useAtom } from "jotai"; 3 4 import React, { useEffect, useRef, useState } from "react"; 4 5 5 6 import { useAuth } from "~/providers/UnifiedAuthProvider"; 7 7 + import { imgCDNAtom } from "~/utils/atoms"; 6 8 import { useQueryIdentity, useQueryProfile } from "~/utils/useQuery"; 7 9 8 10 // --- 1. The Main Component (Orchestrator with `compact` prop) --- ··· 22 24 className={ 23 25 compact 24 26 ? "flex items-center justify-center p-1" 25 25 - : "p-6 bg-gray-100 dark:bg-gray-900 rounded-xl shadow border border-gray-200 dark:border-gray-800 mt-6 mx-4 flex justify-center items-center h-[280px]" 27 27 + : "p-6 bg-gray-100 dark:bg-gray-900 rounded-xl shadow border border-gray-200 dark:border-gray-800 mt-4 mx-4 flex justify-center items-center h-[280px]" 26 28 } 27 29 > 28 30 <span ··· 41 43 // Large view 42 44 if (!compact) { 43 45 return ( 44 44 - <div className="p-4 bg-gray-100 dark:bg-gray-900 rounded-xl border-gray-200 dark:border-gray-800 mt-6 mx-4"> 46 46 + <div className="p-4 bg-gray-100 dark:bg-gray-900 rounded-xl border-gray-200 dark:border-gray-800 mt-4 mx-4"> 45 47 <div className="flex flex-col items-center justify-center text-center"> 46 48 <p className="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-100"> 47 49 You are logged in! ··· 75 77 if (!compact) { 76 78 // Large view renders the form directly in the card 77 79 return ( 78 78 - <div className="p-4 bg-gray-100 dark:bg-gray-900 rounded-xl border-gray-200 dark:border-gray-800 mt-6 mx-4"> 80 80 + <div className="p-4 bg-gray-100 dark:bg-gray-900 rounded-xl border-gray-200 dark:border-gray-800 mt-4 mx-4"> 79 81 <UnifiedLoginForm /> 80 82 </div> 81 83 ); ··· 161 163 onClick={onClick} 162 164 className={`px-4 py-2 text-sm font-medium transition-colors rounded-full flex-1 ${ 163 165 active 164 164 - ? "text-gray-950 dark:text-gray-200 border-gray-500 bg-gray-400 dark:bg-gray-500" 166 166 + ? "text-gray-50 dark:text-gray-200 border-gray-500 bg-gray-400 dark:bg-gray-500" 165 167 : "text-gray-600 dark:text-gray-300 hover:text-gray-700 dark:hover:text-gray-200" 166 168 }`} 167 169 > ··· 190 192 <p className="text-xs text-gray-500 dark:text-gray-400"> 191 193 Sign in with AT. Your password is never shared. 192 194 </p> 193 193 - <input 195 195 + {/* <input 194 196 type="text" 195 197 placeholder="handle.bsky.social" 196 198 value={handle} 197 199 onChange={(e) => setHandle(e.target.value)} 198 200 className="px-3 py-2 rounded border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm focus:outline-none focus:ring-2 focus:ring-gray-500" 199 199 - /> 200 200 - <button 201 201 - type="submit" 202 202 - className="bg-gray-600 hover:bg-gray-700 text-white rounded-full px-4 py-2 font-medium text-sm transition-colors" 203 203 - > 204 204 - Log in 205 205 - </button> 201 201 + /> */} 202 202 + <div className="flex flex-col gap-3"> 203 203 + <div className="m3input-field m3input-label m3input-border size-md flex-1"> 204 204 + <input 205 205 + type="text" 206 206 + placeholder=" " 207 207 + value={handle} 208 208 + onChange={(e) => setHandle(e.target.value)} 209 209 + /> 210 210 + <label>AT Handle</label> 211 211 + </div> 212 212 + <button 213 213 + type="submit" 214 214 + className="bg-gray-600 hover:bg-gray-700 text-white rounded-full px-4 py-2 font-medium text-sm transition-colors" 215 215 + > 216 216 + Log in 217 217 + </button> 218 218 + </div> 206 219 </form> 207 220 ); 208 221 }; ··· 235 248 <p className="text-xs text-red-500 dark:text-red-400"> 236 249 Warning: Less secure. Use an App Password. 237 250 </p> 238 238 - <input 251 251 + {/* <input 239 252 type="text" 240 253 placeholder="handle.bsky.social" 241 254 value={user} ··· 257 270 value={serviceURL} 258 271 onChange={(e) => setServiceURL(e.target.value)} 259 272 className="px-3 py-2 rounded border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm focus:outline-none focus:ring-2 focus:ring-gray-500" 260 260 - /> 273 273 + /> */} 274 274 + <div className="m3input-field m3input-label m3input-border size-md flex-1"> 275 275 + <input 276 276 + type="text" 277 277 + placeholder=" " 278 278 + value={user} 279 279 + onChange={(e) => setUser(e.target.value)} 280 280 + /> 281 281 + <label>AT Handle</label> 282 282 + </div> 283 283 + <div className="m3input-field m3input-label m3input-border size-md flex-1"> 284 284 + <input 285 285 + type="text" 286 286 + placeholder=" " 287 287 + value={password} 288 288 + onChange={(e) => setPassword(e.target.value)} 289 289 + /> 290 290 + <label>App Password</label> 291 291 + </div> 292 292 + <div className="m3input-field m3input-label m3input-border size-md flex-1"> 293 293 + <input 294 294 + type="text" 295 295 + placeholder=" " 296 296 + value={serviceURL} 297 297 + onChange={(e) => setServiceURL(e.target.value)} 298 298 + /> 299 299 + <label>PDS</label> 300 300 + </div> 261 301 {error && <p className="text-xs text-red-500">{error}</p>} 262 302 <button 263 303 type="submit" ··· 271 311 272 312 // --- Profile Component (now supports a `large` prop for styling) --- 273 313 export const ProfileThing = ({ 274 274 - agent: _unused, 314 314 + agent, 275 315 large = false, 276 316 }: { 277 277 - agent?: Agent | null; 317 317 + agent: Agent | null; 278 318 large?: boolean; 279 319 }) => { 280 280 - const { agent } = useAuth(); 281 281 - const did = ((agent as AtpAgent).session?.did ?? (agent as AtpAgent)?.assertDid ?? agent?.did) as 282 282 - | string 283 283 - | undefined; 320 320 + const did = ((agent as AtpAgent)?.session?.did ?? 321 321 + (agent as AtpAgent)?.assertDid ?? 322 322 + agent?.did) as string | undefined; 284 323 const { data: identity } = useQueryIdentity(did); 285 285 - const { data: profiledata } = useQueryProfile(`at://${did}/app.bsky.actor.profile/self`); 324 324 + const { data: profiledata } = useQueryProfile( 325 325 + `at://${did}/app.bsky.actor.profile/self` 326 326 + ); 286 327 const profile = profiledata?.value; 328 328 + 329 329 + const [imgcdn] = useAtom(imgCDNAtom) 287 330 288 331 function getAvatarUrl(p: typeof profile) { 289 332 const link = p?.avatar?.ref?.["$link"]; 290 333 if (!link || !did) return null; 291 291 - return `https://cdn.bsky.app/img/avatar/plain/${did}/${link}@jpeg`; 334 334 + return `https://${imgcdn}/img/avatar/plain/${did}/${link}@jpeg`; 292 335 } 293 336 294 337 if (!profiledata) {

+124

src/components/ReusableTabRoute.tsx

··· 1 1 + import * as TabsPrimitive from "@radix-ui/react-tabs"; 2 2 + import { useAtom } from "jotai"; 3 3 + import { useEffect, useLayoutEffect } from "react"; 4 4 + 5 5 + import { isAtTopAtom, reusableTabRouteScrollAtom } from "~/utils/atoms"; 6 6 + 7 7 + /** 8 8 + * Please wrap your Route in a div, do not return a top-level fragment, 9 9 + * it will break navigation scroll restoration 10 10 + */ 11 11 + export function ReusableTabRoute({ 12 12 + route, 13 13 + tabs, 14 14 + }: { 15 15 + route: string; 16 16 + tabs: Record<string, React.ReactNode>; 17 17 + }) { 18 18 + const [reusableTabState, setReusableTabState] = useAtom( 19 19 + reusableTabRouteScrollAtom 20 20 + ); 21 21 + const [isAtTop] = useAtom(isAtTopAtom); 22 22 + 23 23 + const routeState = reusableTabState?.[route] ?? { 24 24 + activeTab: Object.keys(tabs)[0], 25 25 + scrollPositions: {}, 26 26 + }; 27 27 + const activeTab = routeState.activeTab; 28 28 + 29 29 + const handleValueChange = (newTab: string) => { 30 30 + setReusableTabState((prev) => { 31 31 + const current = prev?.[route] ?? routeState; 32 32 + return { 33 33 + ...prev, 34 34 + [route]: { 35 35 + ...current, 36 36 + scrollPositions: { 37 37 + ...current.scrollPositions, 38 38 + [current.activeTab]: window.scrollY, 39 39 + }, 40 40 + activeTab: newTab, 41 41 + }, 42 42 + }; 43 43 + }); 44 44 + }; 45 45 + 46 46 + // // todo, warning experimental, usually this doesnt work, 47 47 + // // like at all, and i usually do this for each tab 48 48 + // useLayoutEffect(() => { 49 49 + // const savedScroll = routeState.scrollPositions[activeTab] ?? 0; 50 50 + // window.scrollTo({ top: savedScroll }); 51 51 + // // eslint-disable-next-line react-hooks/exhaustive-deps 52 52 + // }, [activeTab, route]); 53 53 + 54 54 + useLayoutEffect(() => { 55 55 + return () => { 56 56 + setReusableTabState((prev) => { 57 57 + const current = prev?.[route] ?? routeState; 58 58 + return { 59 59 + ...prev, 60 60 + [route]: { 61 61 + ...current, 62 62 + scrollPositions: { 63 63 + ...current.scrollPositions, 64 64 + [current.activeTab]: window.scrollY, 65 65 + }, 66 66 + }, 67 67 + }; 68 68 + }); 69 69 + }; 70 70 + // eslint-disable-next-line react-hooks/exhaustive-deps 71 71 + }, []); 72 72 + 73 73 + return ( 74 74 + <TabsPrimitive.Root 75 75 + value={activeTab} 76 76 + onValueChange={handleValueChange} 77 77 + className={`w-full`} 78 78 + > 79 79 + <TabsPrimitive.List 80 80 + className={`flex sticky top-[52px] bg-[var(--header-bg-light)] dark:bg-[var(--header-bg-dark)] z-[9] border-0 sm:border-b ${!isAtTop && "shadow-sm"} sm:shadow-none sm:dark:bg-gray-950 sm:bg-white border-gray-200 dark:border-gray-700`} 81 81 + > 82 82 + {Object.entries(tabs).map(([key]) => ( 83 83 + <TabsPrimitive.Trigger key={key} value={key} className="m3tab"> 84 84 + {key} 85 85 + </TabsPrimitive.Trigger> 86 86 + ))} 87 87 + </TabsPrimitive.List> 88 88 + 89 89 + {Object.entries(tabs).map(([key, node]) => ( 90 90 + <TabsPrimitive.Content key={key} value={key} className="flex-1 min-h-[80dvh]"> 91 91 + {activeTab === key && node} 92 92 + </TabsPrimitive.Content> 93 93 + ))} 94 94 + </TabsPrimitive.Root> 95 95 + ); 96 96 + } 97 97 + 98 98 + export function useReusableTabScrollRestore(route: string) { 99 99 + const [reusableTabState] = useAtom( 100 100 + reusableTabRouteScrollAtom 101 101 + ); 102 102 + 103 103 + const routeState = reusableTabState?.[route]; 104 104 + const activeTab = routeState?.activeTab; 105 105 + 106 106 + useEffect(() => { 107 107 + const savedScroll = activeTab ? routeState?.scrollPositions[activeTab] ?? 0 : 0; 108 108 + //window.scrollTo(0, savedScroll); 109 109 + window.scrollTo({ top: savedScroll }); 110 110 + // eslint-disable-next-line react-hooks/exhaustive-deps 111 111 + }, []); 112 112 + } 113 113 + 114 114 + 115 115 + /* 116 116 + 117 117 + const [notifState] = useAtom(notificationsScrollAtom); 118 118 + const activeTab = notifState.activeTab; 119 119 + useEffect(() => { 120 120 + const savedY = notifState.scrollPositions[activeTab] ?? 0; 121 121 + window.scrollTo(0, savedY); 122 122 + }, [activeTab, notifState.scrollPositions]); 123 123 + 124 124 + */

+6

src/components/Star.tsx

··· 1 1 + import type { SVGProps } from 'react'; 2 2 + import React from 'react'; 3 3 + 4 4 + export function FluentEmojiHighContrastGlowingStar(props: SVGProps<SVGSVGElement>) { 5 5 + return (<svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}><g fill="currentColor"><path d="m28.979 17.003l-3.108.214c-.834.06-1.178 1.079-.542 1.608l2.388 1.955c.521.428 1.314.204 1.523-.428l.709-2.127c.219-.632-.292-1.273-.97-1.222M21.75 2.691l-.72 2.9c-.2.78.66 1.41 1.34.98l2.54-1.58c.55-.34.58-1.14.05-1.52l-1.78-1.29a.912.912 0 0 0-1.43.51M6.43 4.995l2.53 1.58c.68.43 1.54-.19 1.35-.98l-.72-2.9a.92.92 0 0 0-1.43-.52l-1.78 1.29c-.53.4-.5 1.19.05 1.53M4.185 20.713l2.29-1.92c.62-.52.29-1.53-.51-1.58l-2.98-.21a.92.92 0 0 0-.94 1.2l.68 2.09c.2.62.97.84 1.46.42m13.61 7.292l-1.12-2.77c-.3-.75-1.36-.75-1.66 0l-1.12 2.77c-.24.6.2 1.26.85 1.26h2.2a.92.92 0 0 0 .85-1.26"></path><path d="m17.565 3.324l1.726 3.72c.326.694.967 1.18 1.717 1.29l4.056.624c1.835.278 2.575 2.53 1.293 3.859L23.268 16a2.28 2.28 0 0 0-.612 1.964l.71 4.374c.307 1.885-1.687 3.293-3.354 2.37l-3.405-1.894a2.25 2.25 0 0 0-2.21 0l-3.404 1.895c-1.668.922-3.661-.486-3.355-2.37l.71-4.375A2.28 2.28 0 0 0 7.736 16l-3.088-3.184c-1.293-1.34-.543-3.581 1.293-3.859l4.055-.625a2.3 2.3 0 0 0 1.717-1.29l1.727-3.719c.819-1.765 3.306-1.765 4.124 0"></path></g></svg>); 6 6 + }

+348 -118

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"; 4 5 import { DropdownMenu } from "radix-ui"; 6 6 + import { HoverCard } from "radix-ui"; 5 7 import * as React from "react"; 6 8 import { type SVGProps } from "react"; 7 9 8 8 - import { composerAtom, likedPostsAtom } from "~/utils/atoms"; 10 10 + import { 11 11 + composerAtom, 12 12 + constellationURLAtom, 13 13 + enableBridgyTextAtom, 14 14 + enableWafrnTextAtom, 15 15 + imgCDNAtom, 16 16 + } from "~/utils/atoms"; 9 17 import { useHydratedEmbed } from "~/utils/useHydrated"; 10 18 import { 11 19 useQueryConstellation, ··· 32 40 feedviewpost?: boolean; 33 41 repostedby?: string; 34 42 style?: React.CSSProperties; 35 35 - ref?: React.Ref<HTMLDivElement>; 43 43 + ref?: React.RefObject<HTMLDivElement>; 36 44 dataIndexPropPass?: number; 37 45 nopics?: boolean; 46 46 + concise?: boolean; 38 47 lightboxCallback?: (d: LightboxProps) => void; 39 48 maxReplies?: number; 40 49 isQuote?: boolean; 50 50 + filterNoReplies?: boolean; 51 51 + filterMustHaveMedia?: boolean; 52 52 + filterMustBeReply?: boolean; 41 53 } 42 54 43 55 // export async function cachedGetRecord({ ··· 146 158 ref, 147 159 dataIndexPropPass, 148 160 nopics, 161 161 + concise, 149 162 lightboxCallback, 150 163 maxReplies, 151 164 isQuote, 165 165 + filterNoReplies, 166 166 + filterMustHaveMedia, 167 167 + filterMustBeReply, 152 168 }: UniversalPostRendererATURILoaderProps) { 169 169 + // todo remove this once tree rendering is implemented, use a prop like isTree 170 170 + const TEMPLINEAR = true; 153 171 // /*mass comment*/ console.log("atUri", atUri); 154 172 //const { get, set } = usePersistentStore(); 155 173 //const [record, setRecord] = React.useState<any>(null); ··· 401 419 // path: ".reply.parent.uri", 402 420 // }); 403 421 422 422 + const [constellationurl] = useAtom(constellationURLAtom); 423 423 + 404 424 const infinitequeryresults = useInfiniteQuery({ 405 425 ...yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks( 406 426 { 427 427 + constellation: constellationurl, 407 428 method: "/links", 408 429 target: atUri, 409 430 collection: "app.bsky.feed.post", ··· 422 443 423 444 // auto-fetch all pages 424 445 useEffect(() => { 425 425 - if (!maxReplies || isQuote) return; 446 446 + if (!maxReplies || isQuote || TEMPLINEAR) return; 426 447 if ( 427 448 infinitequeryresults.hasNextPage && 428 449 !infinitequeryresults.isFetchingNextPage ··· 430 451 console.log("Fetching the next page..."); 431 452 infinitequeryresults.fetchNextPage(); 432 453 } 433 433 - }, [infinitequeryresults]); 454 454 + }, [TEMPLINEAR, infinitequeryresults, isQuote, maxReplies]); 434 455 435 456 const replyAturis = repliesData 436 457 ? repliesData.pages.flatMap((page) => ··· 507 528 ? true 508 529 : maxReplies && !oldestOpsReplyElseNewestNonOpsReply 509 530 ? false 510 510 - : bottomReplyLine 531 531 + : maxReplies === 0 && (!replies || (!!replies && replies === 0)) 532 532 + ? false 533 533 + : bottomReplyLine 511 534 } 512 535 topReplyLine={topReplyLine} 513 536 //bottomBorder={maxReplies&&oldestOpsReplyElseNewestNonOpsReply ? false : bottomBorder} ··· 525 548 ref={ref} 526 549 dataIndexPropPass={dataIndexPropPass} 527 550 nopics={nopics} 551 551 + concise={concise} 528 552 lightboxCallback={lightboxCallback} 529 553 maxReplies={maxReplies} 530 554 isQuote={isQuote} 555 555 + filterNoReplies={filterNoReplies} 556 556 + filterMustHaveMedia={filterMustHaveMedia} 557 557 + filterMustBeReply={filterMustBeReply} 531 558 /> 559 559 + <> 560 560 + {maxReplies && maxReplies === 0 && replies && replies > 0 ? ( 561 561 + <> 562 562 + {/* <div>hello</div> */} 563 563 + <MoreReplies atUri={atUri} /> 564 564 + </> 565 565 + ) : ( 566 566 + <></> 567 567 + )} 568 568 + </> 532 569 {!isQuote && oldestOpsReplyElseNewestNonOpsReply && ( 533 570 <> 534 571 {/* <span>hello {maxReplies}</span> */} ··· 548 585 ref={ref} 549 586 dataIndexPropPass={dataIndexPropPass} 550 587 nopics={nopics} 588 588 + concise={concise} 551 589 lightboxCallback={lightboxCallback} 552 590 maxReplies={ 553 591 maxReplies && maxReplies > 0 ? maxReplies - 1 : undefined 554 592 } 555 593 /> 556 556 - {maxReplies && maxReplies - 1 === 0 && replies && replies > 0 && ( 557 557 - <MoreReplies atUri={oldestOpsReplyElseNewestNonOpsReply} /> 558 558 - )} 559 594 </> 560 595 )} 561 596 </> ··· 596 631 ); 597 632 } 598 633 599 599 - function getAvatarUrl(opProfile: any, did: string) { 634 634 + function getAvatarUrl(opProfile: any, did: string, cdn: string) { 600 635 const link = opProfile?.value?.avatar?.ref?.["$link"]; 601 636 if (!link) return null; 602 602 - return `https://cdn.bsky.app/img/avatar/plain/${did}/${link}@jpeg`; 637 637 + return `https://${cdn}/img/avatar/plain/${did}/${link}@jpeg`; 603 638 } 604 639 605 640 export function UniversalPostRendererRawRecordShim({ ··· 620 655 ref, 621 656 dataIndexPropPass, 622 657 nopics, 658 658 + concise, 623 659 lightboxCallback, 624 660 maxReplies, 625 661 isQuote, 662 662 + filterNoReplies, 663 663 + filterMustHaveMedia, 664 664 + filterMustBeReply, 626 665 }: { 627 666 postRecord: any; 628 667 profileRecord: any; ··· 638 677 feedviewpost?: boolean; 639 678 repostedby?: string; 640 679 style?: React.CSSProperties; 641 641 - ref?: React.Ref<HTMLDivElement>; 680 680 + ref?: React.RefObject<HTMLDivElement>; 642 681 dataIndexPropPass?: number; 643 682 nopics?: boolean; 683 683 + concise?: boolean; 644 684 lightboxCallback?: (d: LightboxProps) => void; 645 685 maxReplies?: number; 646 686 isQuote?: boolean; 687 687 + filterNoReplies?: boolean; 688 688 + filterMustHaveMedia?: boolean; 689 689 + filterMustBeReply?: boolean; 647 690 }) { 648 691 // /*mass comment*/ console.log(`received aturi: ${aturi} of post content: ${postRecord}`); 649 692 const navigate = useNavigate(); ··· 714 757 // run(); 715 758 // }, [postRecord, resolved?.did]); 716 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 + 717 777 const { 718 778 data: hydratedEmbed, 719 779 isLoading: isEmbedLoading, 720 780 error: embedError, 721 781 } = useHydratedEmbed(postRecord?.value?.embed, resolved?.did); 722 782 783 783 + const [imgcdn] = useAtom(imgCDNAtom); 784 784 + 723 785 const parsedaturi = new AtUri(aturi); //parseAtUri(aturi); 724 786 787 787 + const fakeprofileviewbasic = React.useMemo<AppBskyActorDefs.ProfileViewBasic>( 788 788 + () => ({ 789 789 + did: resolved?.did || "", 790 790 + handle: resolved?.handle || "", 791 791 + displayName: profileRecord?.value?.displayName || "", 792 792 + avatar: getAvatarUrl(profileRecord, resolved?.did, imgcdn) || "", 793 793 + viewer: undefined, 794 794 + labels: profileRecord?.labels || undefined, 795 795 + verification: undefined, 796 796 + }), 797 797 + [imgcdn, profileRecord, resolved?.did, resolved?.handle] 798 798 + ); 799 799 + 800 800 + const fakeprofileviewdetailed = 801 801 + React.useMemo<AppBskyActorDefs.ProfileViewDetailed>( 802 802 + () => ({ 803 803 + ...fakeprofileviewbasic, 804 804 + $type: "app.bsky.actor.defs#profileViewDetailed", 805 805 + description: profileRecord?.value?.description || undefined, 806 806 + }), 807 807 + [fakeprofileviewbasic, profileRecord?.value?.description] 808 808 + ); 809 809 + 725 810 const fakepost = React.useMemo<AppBskyFeedDefs.PostView>( 726 811 () => ({ 727 812 $type: "app.bsky.feed.defs#postView", 728 813 uri: aturi, 729 814 cid: postRecord?.cid || "", 730 730 - author: { 731 731 - did: resolved?.did || "", 732 732 - handle: resolved?.handle || "", 733 733 - displayName: profileRecord?.value?.displayName || "", 734 734 - avatar: getAvatarUrl(profileRecord, resolved?.did) || "", 735 735 - viewer: undefined, 736 736 - labels: profileRecord?.labels || undefined, 737 737 - verification: undefined, 738 738 - }, 815 815 + author: fakeprofileviewbasic, 739 816 record: postRecord?.value || {}, 740 817 embed: hydratedEmbed ?? undefined, 741 818 replyCount: repliesCount ?? 0, ··· 752 829 postRecord?.cid, 753 830 postRecord?.value, 754 831 postRecord?.labels, 755 755 - resolved?.did, 756 756 - resolved?.handle, 757 757 - profileRecord, 832 832 + fakeprofileviewbasic, 758 833 hydratedEmbed, 759 834 repliesCount, 760 835 repostsCount, ··· 793 868 // }, [fakepost, get, set]); 794 869 const thereply = (fakepost?.record as AppBskyFeedPost.Record)?.reply?.parent 795 870 ?.uri; 796 796 - const feedviewpostreplydid = thereply ? new AtUri(thereply).host : undefined; 871 871 + const feedviewpostreplydid = 872 872 + thereply && !filterNoReplies ? new AtUri(thereply).host : undefined; 797 873 const replyhookvalue = useQueryIdentity( 798 874 feedviewpost ? feedviewpostreplydid : undefined 799 875 ); ··· 804 880 repostedby ? aturirepostbydid : undefined 805 881 ); 806 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 + 807 890 return ( 808 891 <> 809 892 {/* <p> 810 893 {postRecord?.value?.embed.$type + " " + JSON.stringify(hydratedEmbed)} 811 894 </p> */} 895 895 + {/* <span>filtermustbereply is {filterMustBeReply ? "true" : "false"}</span> 896 896 + <span>thereply is {thereply ? "true" : "false"}</span> */} 812 897 <UniversalPostRenderer 813 898 expanded={detailed} 814 899 onPostClick={() => ··· 831 916 } 832 917 }} 833 918 post={fakepost} 919 919 + uprrrsauthor={fakeprofileviewdetailed} 834 920 salt={aturi} 835 921 bottomReplyLine={bottomReplyLine} 836 922 topReplyLine={topReplyLine} ··· 842 928 ref={ref} 843 929 dataIndexPropPass={dataIndexPropPass} 844 930 nopics={nopics} 931 931 + concise={concise} 845 932 lightboxCallback={lightboxCallback} 846 933 maxReplies={maxReplies} 847 934 isQuote={isQuote} ··· 883 970 {...props} 884 971 > 885 972 <path 886 886 - fill="oklch(0.704 0.05 28)" 973 973 + fill="var(--color-gray-400)" 887 974 d="M9 22a1 1 0 0 1-1-1v-3H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6.1l-3.7 3.71c-.2.19-.45.29-.7.29zm1-6v3.08L13.08 16H20V4H4v12z" 888 975 ></path> 889 976 </svg> ··· 900 987 {...props} 901 988 > 902 989 <path 903 903 - fill="oklch(0.704 0.05 28)" 990 990 + fill="var(--color-gray-400)" 904 991 d="M17 17H7v-3l-4 4l4 4v-3h12v-6h-2M7 7h10v3l4-4l-4-4v3H5v6h2z" 905 992 ></path> 906 993 </svg> ··· 951 1038 {...props} 952 1039 > 953 1040 <path 954 954 - fill="oklch(0.704 0.05 28)" 1041 1041 + fill="var(--color-gray-400)" 955 1042 d="m12.1 18.55l-.1.1l-.11-.1C7.14 14.24 4 11.39 4 8.5C4 6.5 5.5 5 7.5 5c1.54 0 3.04 1 3.57 2.36h1.86C13.46 6 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5c0 2.89-3.14 5.74-7.9 10.05M16.5 3c-1.74 0-3.41.81-4.5 2.08C10.91 3.81 9.24 3 7.5 3C4.42 3 2 5.41 2 8.5c0 3.77 3.4 6.86 8.55 11.53L12 21.35l1.45-1.32C18.6 15.36 22 12.27 22 8.5C22 5.41 19.58 3 16.5 3" 956 1043 ></path> 957 1044 </svg> ··· 968 1055 {...props} 969 1056 > 970 1057 <path 971 971 - fill="oklch(0.704 0.05 28)" 1058 1058 + fill="var(--color-gray-400)" 972 1059 d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81a3 3 0 0 0 3-3a3 3 0 0 0-3-3a3 3 0 0 0-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9a3 3 0 0 0-3 3a3 3 0 0 0 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.15c-.05.21-.08.43-.08.66c0 1.61 1.31 2.91 2.92 2.91s2.92-1.3 2.92-2.91A2.92 2.92 0 0 0 18 16.08" 973 1060 ></path> 974 1061 </svg> ··· 985 1072 {...props} 986 1073 > 987 1074 <path 988 988 - fill="oklch(0.704 0.05 28)" 1075 1075 + fill="var(--color-gray-400)" 989 1076 d="M16 12a2 2 0 0 1 2-2a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2m-6 0a2 2 0 0 1 2-2a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2m-6 0a2 2 0 0 1 2-2a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2" 990 1077 ></path> 991 1078 </svg> ··· 1002 1089 {...props} 1003 1090 > 1004 1091 <path 1005 1005 - fill="oklch(0.704 0.05 28)" 1092 1092 + fill="var(--color-gray-400)" 1006 1093 d="M17.9 17.39c-.26-.8-1.01-1.39-1.9-1.39h-1v-3a1 1 0 0 0-1-1H8v-2h2a1 1 0 0 0 1-1V7h2a2 2 0 0 0 2-2v-.41a7.984 7.984 0 0 1 2.9 12.8M11 19.93c-3.95-.49-7-3.85-7-7.93c0-.62.08-1.22.21-1.79L9 15v1a2 2 0 0 0 2 2m1-16A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2" 1007 1094 ></path> 1008 1095 </svg> ··· 1036 1123 {...props} 1037 1124 > 1038 1125 <path 1039 1039 - fill="oklch(0.704 0.05 28)" 1126 1126 + fill="var(--color-gray-400)" 1040 1127 d="M10 9V5l-7 7l7 7v-4.1c5 0 8.5 1.6 11 5.1c-1-5-4-10-11-11" 1041 1128 ></path> 1042 1129 </svg> ··· 1090 1177 {...props} 1091 1178 > 1092 1179 <path 1093 1093 - fill="oklch(0.704 0.05 28)" 1180 1180 + fill="var(--color-gray-400)" 1094 1181 d="M17 17H7v-3l-4 4l4 4v-3h12v-6h-2M7 7h10v3l4-4l-4-4v3H5v6h2z" 1095 1182 ></path> 1096 1183 </svg> ··· 1107 1194 {...props} 1108 1195 > 1109 1196 <path 1110 1110 - fill="oklch(0.704 0.05 28)" 1197 1197 + fill="var(--color-gray-400)" 1111 1198 d="M6 5.75L10.25 10H7v6h6.5l2 2H7a2 2 0 0 1-2-2v-6H1.75zm12 12.5L13.75 14H17V8h-6.5l-2-2H17a2 2 0 0 1 2 2v6h3.25z" 1112 1199 ></path> 1113 1200 </svg> ··· 1135 1222 //import Masonry from "@mui/lab/Masonry"; 1136 1223 import { 1137 1224 type $Typed, 1225 1225 + AppBskyActorDefs, 1138 1226 AppBskyEmbedDefs, 1139 1227 AppBskyEmbedExternal, 1140 1228 AppBskyEmbedImages, ··· 1164 1252 1165 1253 import defaultpfp from "~/../public/favicon.png"; 1166 1254 import { useAuth } from "~/providers/UnifiedAuthProvider"; 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"; 1167 1261 import type { LightboxProps } from "~/routes/profile.$did/post.$rkey.image.$i"; 1262 1262 + import { useFastLike } from "~/utils/likeMutationQueue"; 1168 1263 // import type { OutputSchema } from "@atproto/api/dist/client/types/app/bsky/feed/getFeed"; 1169 1264 // import type { 1170 1265 // ViewRecord, ··· 1272 1367 1273 1368 function UniversalPostRenderer({ 1274 1369 post, 1370 1370 + uprrrsauthor, 1275 1371 //setMainItem, 1276 1372 //isMainItem, 1277 1373 onPostClick, ··· 1292 1388 ref, 1293 1389 dataIndexPropPass, 1294 1390 nopics, 1391 1391 + concise, 1295 1392 lightboxCallback, 1296 1393 maxReplies, 1297 1394 }: { 1298 1395 post: PostView; 1396 1396 + uprrrsauthor?: AppBskyActorDefs.ProfileViewDetailed; 1299 1397 // optional for now because i havent ported every use to this yet 1300 1398 // setMainItem?: React.Dispatch< 1301 1399 // React.SetStateAction<AppBskyFeedDefs.FeedViewPost> ··· 1314 1412 depth?: number; 1315 1413 repostedby?: string; 1316 1414 style?: React.CSSProperties; 1317 1317 - ref?: React.Ref<HTMLDivElement>; 1415 1415 + ref?: React.RefObject<HTMLDivElement>; 1318 1416 dataIndexPropPass?: number; 1319 1417 nopics?: boolean; 1418 1418 + concise?: boolean; 1320 1419 lightboxCallback?: (d: LightboxProps) => void; 1321 1420 maxReplies?: number; 1322 1421 }) { 1323 1422 const parsed = new AtUri(post.uri); 1324 1423 const navigate = useNavigate(); 1325 1325 - const [likedPosts, setLikedPosts] = useAtom(likedPostsAtom); 1326 1424 const [hasRetweeted, setHasRetweeted] = useState<boolean>( 1327 1425 post.viewer?.repost ? true : false 1328 1426 ); 1329 1329 - const [hasLiked, setHasLiked] = useState<boolean>( 1330 1330 - post.uri in likedPosts || post.viewer?.like ? true : false 1331 1331 - ); 1332 1427 const [, setComposerPost] = useAtom(composerAtom); 1333 1428 const { agent } = useAuth(); 1334 1334 - const [likeUri, setLikeUri] = useState<string | undefined>(post.viewer?.like); 1335 1429 const [retweetUri, setRetweetUri] = useState<string | undefined>( 1336 1430 post.viewer?.repost 1337 1431 ); 1338 1338 - 1339 1339 - const likeOrUnlikePost = async () => { 1340 1340 - const newLikedPosts = { ...likedPosts }; 1341 1341 - if (!agent) { 1342 1342 - console.error("Agent is null or undefined"); 1343 1343 - return; 1344 1344 - } 1345 1345 - if (hasLiked) { 1346 1346 - if (post.uri in likedPosts) { 1347 1347 - const likeUri = likedPosts[post.uri]; 1348 1348 - setLikeUri(likeUri); 1349 1349 - } 1350 1350 - if (likeUri) { 1351 1351 - await agent.deleteLike(likeUri); 1352 1352 - setHasLiked(false); 1353 1353 - delete newLikedPosts[post.uri]; 1354 1354 - } 1355 1355 - } else { 1356 1356 - const { uri } = await agent.like(post.uri, post.cid); 1357 1357 - setLikeUri(uri); 1358 1358 - setHasLiked(true); 1359 1359 - newLikedPosts[post.uri] = uri; 1360 1360 - } 1361 1361 - setLikedPosts(newLikedPosts); 1362 1362 - }; 1432 1432 + const { liked, toggle, backfill } = useFastLike(post.uri, post.cid); 1433 1433 + // const bovref = useBackfillOnView(post.uri, post.cid); 1434 1434 + // React.useLayoutEffect(()=>{ 1435 1435 + // if (expanded && !isQuote) { 1436 1436 + // backfill(); 1437 1437 + // } 1438 1438 + // },[backfill, expanded, isQuote]) 1363 1439 1364 1440 const repostOrUnrepostPost = async () => { 1365 1441 if (!agent) { ··· 1390 1466 : undefined; 1391 1467 1392 1468 const emergencySalt = randomString(); 1393 1393 - 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 }) 1394 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); 1395 1507 1396 1508 /* fuck you */ 1397 1509 const isMainItem = false; 1398 1510 const setMainItem = (any: any) => {}; 1399 1511 // eslint-disable-next-line react-hooks/refs 1400 1400 - console.log("Received ref in UniversalPostRenderer:", ref); 1512 1512 + //console.log("Received ref in UniversalPostRenderer:", usedref); 1401 1513 return ( 1402 1514 <div ref={ref} style={style} data-index={dataIndexPropPass}> 1403 1515 <div ··· 1479 1591 className="bg-gray-500 dark:bg-gray-400" 1480 1592 /> 1481 1593 )} 1482 1482 - <div 1483 1483 - style={{ 1484 1484 - position: "absolute", 1485 1485 - //top: isRepost ? "calc(16px + 1rem)" : 16, 1486 1486 - //left: 16, 1487 1487 - zIndex: 1, 1488 1488 - top: isRepost 1489 1489 - ? "calc(16px + 1rem)" 1490 1490 - : isQuote 1491 1491 - ? 12 1492 1492 - : topReplyLine 1493 1493 - ? 8 1494 1494 - : 16, 1495 1495 - left: isQuote ? 12 : 16, 1496 1496 - }} 1497 1497 - onClick={onProfileClick} 1498 1498 - > 1499 1499 - <img 1500 1500 - src={post.author.avatar || defaultpfp} 1501 1501 - alt="avatar" 1502 1502 - // transition={{ 1503 1503 - // type: "spring", 1504 1504 - // stiffness: 260, 1505 1505 - // damping: 20, 1506 1506 - // }} 1507 1507 - style={{ 1508 1508 - borderRadius: "50%", 1509 1509 - marginRight: 12, 1510 1510 - objectFit: "cover", 1511 1511 - //background: theme.border, 1512 1512 - //border: `1px solid ${theme.border}`, 1513 1513 - width: isQuote ? 16 : 42, 1514 1514 - height: isQuote ? 16 : 42, 1515 1515 - }} 1516 1516 - className="border border-gray-300 dark:border-gray-800 bg-gray-300 dark:bg-gray-600" 1517 1517 - /> 1518 1518 - </div> 1594 1594 + <HoverCard.Root> 1595 1595 + <HoverCard.Trigger asChild> 1596 1596 + <div 1597 1597 + className={`absolute`} 1598 1598 + style={{ 1599 1599 + top: isRepost 1600 1600 + ? "calc(16px + 1rem)" 1601 1601 + : isQuote 1602 1602 + ? 12 1603 1603 + : topReplyLine 1604 1604 + ? 8 1605 1605 + : 16, 1606 1606 + left: isQuote ? 12 : 16, 1607 1607 + }} 1608 1608 + onClick={onProfileClick} 1609 1609 + > 1610 1610 + <img 1611 1611 + src={post.author.avatar || defaultpfp} 1612 1612 + alt="avatar" 1613 1613 + className={`rounded-full object-cover border border-gray-300 dark:border-gray-800 bg-gray-300 dark:bg-gray-600`} 1614 1614 + style={{ 1615 1615 + width: isQuote ? 16 : 42, 1616 1616 + height: isQuote ? 16 : 42, 1617 1617 + }} 1618 1618 + /> 1619 1619 + </div> 1620 1620 + </HoverCard.Trigger> 1621 1621 + <HoverCard.Portal> 1622 1622 + <HoverCard.Content 1623 1623 + className="rounded-md p-4 w-72 bg-gray-50 dark:bg-gray-900 shadow-lg border border-gray-300 dark:border-gray-800 animate-slide-fade z-50" 1624 1624 + side={"bottom"} 1625 1625 + sideOffset={5} 1626 1626 + onClick={onProfileClick} 1627 1627 + > 1628 1628 + <div className="flex flex-col gap-2"> 1629 1629 + <div className="flex flex-row"> 1630 1630 + <img 1631 1631 + src={post.author.avatar || defaultpfp} 1632 1632 + alt="avatar" 1633 1633 + className="rounded-full w-[58px] h-[58px] object-cover border border-gray-300 dark:border-gray-800 bg-gray-300 dark:bg-gray-600" 1634 1634 + /> 1635 1635 + <div className=" flex-1 flex flex-row align-middle justify-end"> 1636 1636 + <FollowButton targetdidorhandle={post.author.did} /> 1637 1637 + </div> 1638 1638 + </div> 1639 1639 + <div className="flex flex-col gap-3"> 1640 1640 + <div> 1641 1641 + <div className="text-gray-900 dark:text-gray-100 font-medium text-md"> 1642 1642 + {post.author.displayName || post.author.handle}{" "} 1643 1643 + </div> 1644 1644 + <div className="text-gray-500 dark:text-gray-400 text-md flex flex-row gap-1"> 1645 1645 + <Mutual targetdidorhandle={post.author.did} />@ 1646 1646 + {post.author.handle}{" "} 1647 1647 + </div> 1648 1648 + </div> 1649 1649 + {uprrrsauthor?.description && ( 1650 1650 + <div className="text-gray-700 dark:text-gray-300 text-sm text-left break-words line-clamp-3"> 1651 1651 + {uprrrsauthor.description} 1652 1652 + </div> 1653 1653 + )} 1654 1654 + {/* <div className="flex gap-4"> 1655 1655 + <div className="flex gap-1"> 1656 1656 + <div className="font-medium text-gray-900 dark:text-gray-100"> 1657 1657 + 0 1658 1658 + </div> 1659 1659 + <div className="text-gray-500 dark:text-gray-400"> 1660 1660 + Following 1661 1661 + </div> 1662 1662 + </div> 1663 1663 + <div className="flex gap-1"> 1664 1664 + <div className="font-medium text-gray-900 dark:text-gray-100"> 1665 1665 + 2,900 1666 1666 + </div> 1667 1667 + <div className="text-gray-500 dark:text-gray-400"> 1668 1668 + Followers 1669 1669 + </div> 1670 1670 + </div> 1671 1671 + </div> */} 1672 1672 + </div> 1673 1673 + </div> 1674 1674 + 1675 1675 + {/* <HoverCard.Arrow className="fill-gray-50 dark:fill-gray-900" /> */} 1676 1676 + </HoverCard.Content> 1677 1677 + </HoverCard.Portal> 1678 1678 + </HoverCard.Root> 1679 1679 + 1519 1680 <div style={{ display: "flex", alignItems: "flex-start", zIndex: 2 }}> 1520 1681 <div 1521 1682 style={{ ··· 1675 1836 <div 1676 1837 style={{ 1677 1838 fontSize: 16, 1678 1678 - marginBottom: !post.embed /*|| depth > 0*/ ? 0 : 8, 1839 1839 + marginBottom: !post.embed || concise ? 0 : 8, 1679 1840 whiteSpace: "pre-wrap", 1680 1841 textAlign: "left", 1681 1842 overflowWrap: "anywhere", 1682 1843 wordBreak: "break-word", 1683 1683 - //color: theme.text, 1844 1844 + ...(concise && { 1845 1845 + display: "-webkit-box", 1846 1846 + WebkitBoxOrient: "vertical", 1847 1847 + WebkitLineClamp: 2, 1848 1848 + overflow: "hidden", 1849 1849 + }), 1684 1850 }} 1685 1851 className="text-gray-900 dark:text-gray-100" 1686 1852 > ··· 1703 1869 </> 1704 1870 )} 1705 1871 </div> 1706 1706 - {post.embed && depth < 1 ? ( 1872 1872 + {post.embed && depth < 1 && !concise ? ( 1707 1873 <PostEmbeds 1708 1874 embed={post.embed} 1709 1875 //moderation={moderation} ··· 1725 1891 </div> 1726 1892 </> 1727 1893 )} 1728 1728 - <div style={{ paddingTop: post.embed && depth < 1 ? 4 : 0 }}> 1894 1894 + <div 1895 1895 + style={{ 1896 1896 + paddingTop: post.embed && !concise && depth < 1 ? 4 : 0, 1897 1897 + }} 1898 1898 + > 1729 1899 <> 1730 1900 {expanded && ( 1731 1901 <div ··· 1821 1991 </DropdownMenu.Root> 1822 1992 <HitSlopButton 1823 1993 onClick={() => { 1824 1824 - likeOrUnlikePost(); 1994 1994 + toggle(); 1825 1995 }} 1826 1996 style={{ 1827 1997 ...btnstyle, 1828 1828 - ...(hasLiked ? { color: "#EC4899" } : {}), 1998 1998 + ...(liked ? { color: "#EC4899" } : {}), 1829 1999 }} 1830 2000 > 1831 1831 - {hasLiked ? <MdiCardsHeart /> : <MdiCardsHeartOutline />} 1832 1832 - {(post.likeCount || 0) + (hasLiked ? 1 : 0)} 2001 2001 + {liked ? <MdiCardsHeart /> : <MdiCardsHeartOutline />} 2002 2002 + {(post.likeCount || 0) + (liked ? 1 : 0)} 1833 2003 </HitSlopButton> 1834 2004 <div style={{ display: "flex", gap: 8 }}> 1835 2005 <HitSlopButton ··· 1843 2013 "/post/" + 1844 2014 post.uri.split("/").pop() 1845 2015 ); 2016 2016 + renderSnack({ 2017 2017 + title: "Copied to clipboard!", 2018 2018 + }); 1846 2019 } catch (_e) { 1847 2020 // idk 2021 2021 + renderSnack({ 2022 2022 + title: "Failed to copy link", 2023 2023 + }); 1848 2024 } 1849 2025 }} 1850 2026 style={{ ··· 1853 2029 > 1854 2030 <MdiShareVariant /> 1855 2031 </HitSlopButton> 1856 1856 - <span style={btnstyle}> 1857 1857 - <MdiMoreHoriz /> 1858 1858 - </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> 1859 2043 </div> 1860 2044 </div> 1861 2045 )} ··· 2081 2265 } 2082 2266 2083 2267 if (AppBskyEmbedRecord.isView(embed)) { 2268 2268 + // hey im really lazy and im gonna do it the bad way 2269 2269 + const reallybaduri = (embed?.record as any)?.uri as string | undefined; 2270 2270 + const reallybadaturi = reallybaduri ? new AtUri(reallybaduri) : undefined; 2271 2271 + 2084 2272 // custom feed embed (i.e. generator view) 2085 2273 if (AppBskyFeedDefs.isGeneratorView(embed.record)) { 2086 2274 // stopgap sorry ··· 2090 2278 // <MaybeFeedCard view={embed.record} /> 2091 2279 // </div> 2092 2280 // ) 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 + ); 2093 2291 } 2094 2292 2095 2293 // list embed ··· 2101 2299 // <MaybeListCard view={embed.record} /> 2102 2300 // </div> 2103 2301 // ) 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 + ); 2104 2317 } 2105 2318 2106 2319 // starter pack embed ··· 2112 2325 // <StarterPackCard starterPack={embed.record} /> 2113 2326 // </div> 2114 2327 // ) 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 + ); 2115 2343 } 2116 2344 2117 2345 // quote post ··· 2171 2399 </div> 2172 2400 ); 2173 2401 } else { 2402 2402 + console.log("what the hell is a ", embed); 2174 2403 return <>sorry</>; 2175 2404 } 2176 2405 //return <QuotePostRenderer record={embed.record} moderation={moderation} />; ··· 2480 2709 // = 2481 2710 if (AppBskyEmbedVideo.isView(embed)) { 2482 2711 // hls playlist 2712 2712 + if (nopics) return; 2483 2713 const playlist = embed.playlist; 2484 2714 return ( 2485 2715 <SmartHLSPlayer ··· 2571 2801 return { start, end, feature: f.features[0] }; 2572 2802 }); 2573 2803 } 2574 2574 - function renderTextWithFacets({ 2804 2804 + export function renderTextWithFacets({ 2575 2805 text, 2576 2806 facets, 2577 2807 navigate, ··· 2603 2833 className="link" 2604 2834 style={{ 2605 2835 textDecoration: "none", 2606 2606 - color: "rgb(29, 122, 242)", 2836 2836 + color: "var(--link-text-color)", 2607 2837 wordBreak: "break-all", 2608 2838 }} 2609 2839 target="_blank" ··· 2623 2853 result.push( 2624 2854 <span 2625 2855 key={start} 2626 2626 - style={{ color: "rgb(29, 122, 242)" }} 2856 2856 + style={{ color: "var(--link-text-color)" }} 2627 2857 className=" cursor-pointer" 2628 2858 onClick={(e) => { 2629 2859 e.stopPropagation(); ··· 2641 2871 result.push( 2642 2872 <span 2643 2873 key={start} 2644 2644 - style={{ color: "rgb(29, 122, 242)" }} 2874 2874 + style={{ color: "var(--link-text-color)" }} 2645 2875 onClick={(e) => { 2646 2876 e.stopPropagation(); 2647 2877 }}

+2

src/main.tsx

··· 14 14 import { routeTree } from "./routeTree.gen"; 15 15 import { isAtTopAtom } from "./utils/atoms.ts"; 16 16 17 17 + //initAtomToCssVar(hueAtom, "--tw-gray-hue") 18 18 + 17 19 const queryClient = new QueryClient({ 18 20 defaultOptions: { 19 21 queries: {

+163

src/providers/LikeMutationQueueProvider.tsx

··· 1 1 + import { AtUri } from "@atproto/api"; 2 2 + import { TID } from "@atproto/common-web"; 3 3 + import { useQueryClient } from "@tanstack/react-query"; 4 4 + import { useAtom } from "jotai"; 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"; 9 9 + import { constellationURLAtom, internalLikedPostsAtom } from "~/utils/atoms"; 10 10 + import { constructArbitraryQuery, constructConstellationQuery, type linksRecordsResponse } from "~/utils/useQuery"; 11 11 + 12 12 + export type LikeRecord = { uri: string; target: string; cid: string }; 13 13 + export type LikeMutation = { type: 'like'; target: string; cid: string }; 14 14 + export type UnlikeMutation = { type: 'unlike'; likeRecordUri: string; target: string, originalRecord: LikeRecord }; 15 15 + export type Mutation = LikeMutation | UnlikeMutation; 16 16 + 17 17 + interface LikeMutationQueueContextType { 18 18 + fastState: (target: string) => LikeRecord | null | undefined; 19 19 + fastToggle: (target:string, cid:string) => void; 20 20 + backfillState: (target: string, user: string) => Promise<void>; 21 21 + } 22 22 + 23 23 + const LikeMutationQueueContext = createContext<LikeMutationQueueContextType | undefined>(undefined); 24 24 + 25 25 + export function LikeMutationQueueProvider({ children }: { children: React.ReactNode }) { 26 26 + const { agent } = useAuth(); 27 27 + const queryClient = useQueryClient(); 28 28 + const [likedPosts, setLikedPosts] = useAtom(internalLikedPostsAtom); 29 29 + const [constellationurl] = useAtom(constellationURLAtom); 30 30 + 31 31 + const likedPostsRef = useRef(likedPosts); 32 32 + useEffect(() => { 33 33 + likedPostsRef.current = likedPosts; 34 34 + }, [likedPosts]); 35 35 + 36 36 + const queueRef = useRef<Mutation[]>([]); 37 37 + const runningRef = useRef(false); 38 38 + 39 39 + const fastState = (target: string) => likedPosts[target]; 40 40 + 41 41 + const setFastState = useCallback( 42 42 + (target: string, record: LikeRecord | null) => 43 43 + setLikedPosts((prev) => ({ ...prev, [target]: record })), 44 44 + [setLikedPosts] 45 45 + ); 46 46 + 47 47 + const enqueue = (mutation: Mutation) => queueRef.current.push(mutation); 48 48 + 49 49 + const fastToggle = useCallback((target: string, cid: string) => { 50 50 + const likedRecord = likedPostsRef.current[target]; 51 51 + 52 52 + if (likedRecord) { 53 53 + setFastState(target, null); 54 54 + if (likedRecord.uri !== 'pending') { 55 55 + enqueue({ type: "unlike", likeRecordUri: likedRecord.uri, target, originalRecord: likedRecord }); 56 56 + } 57 57 + } else { 58 58 + setFastState(target, { uri: "pending", target, cid }); 59 59 + enqueue({ type: "like", target, cid }); 60 60 + } 61 61 + }, [setFastState]); 62 62 + 63 63 + /** 64 64 + * 65 65 + * @deprecated dont use it yet, will cause infinite rerenders 66 66 + */ 67 67 + const backfillState = async (target: string, user: string) => { 68 68 + const query = constructConstellationQuery({ 69 69 + constellation: constellationurl, 70 70 + method: "/links", 71 71 + target, 72 72 + collection: "app.bsky.feed.like", 73 73 + path: ".subject.uri", 74 74 + dids: [user], 75 75 + }); 76 76 + const data = await queryClient.fetchQuery(query); 77 77 + const likes = (data as linksRecordsResponse)?.linking_records?.slice(0, 50) ?? []; 78 78 + const found = likes.find((r) => r.did === user); 79 79 + if (found) { 80 80 + const uri = `at://${found.did}/${found.collection}/${found.rkey}`; 81 81 + const ciddata = await queryClient.fetchQuery( 82 82 + constructArbitraryQuery(uri) 83 83 + ); 84 84 + if (ciddata?.cid) 85 85 + setFastState(target, { uri, target, cid: ciddata?.cid }); 86 86 + } else { 87 87 + setFastState(target, null); 88 88 + } 89 89 + }; 90 90 + 91 91 + 92 92 + useEffect(() => { 93 93 + if (!agent?.did) return; 94 94 + 95 95 + const processQueue = async () => { 96 96 + if (runningRef.current || queueRef.current.length === 0) return; 97 97 + runningRef.current = true; 98 98 + 99 99 + while (queueRef.current.length > 0) { 100 100 + const mutation = queueRef.current.shift()!; 101 101 + try { 102 102 + if (mutation.type === "like") { 103 103 + const newRecord = { 104 104 + repo: agent.did!, 105 105 + collection: "app.bsky.feed.like", 106 106 + rkey: TID.next().toString(), 107 107 + record: { 108 108 + $type: "app.bsky.feed.like", 109 109 + subject: { uri: mutation.target, cid: mutation.cid }, 110 110 + createdAt: new Date().toISOString(), 111 111 + }, 112 112 + }; 113 113 + const response = await agent.com.atproto.repo.createRecord(newRecord); 114 114 + if (!response.success) throw new Error("createRecord failed"); 115 115 + 116 116 + const uri = `at://${agent.did}/${newRecord.collection}/${newRecord.rkey}`; 117 117 + setFastState(mutation.target, { 118 118 + uri, 119 119 + target: mutation.target, 120 120 + cid: mutation.cid, 121 121 + }); 122 122 + } else if (mutation.type === "unlike") { 123 123 + const aturi = new AtUri(mutation.likeRecordUri); 124 124 + await agent.com.atproto.repo.deleteRecord({ repo: agent.did!, collection: aturi.collection, rkey: aturi.rkey }); 125 125 + setFastState(mutation.target, null); 126 126 + } 127 127 + } catch (err) { 128 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 + }) 134 134 + if (mutation.type === 'like') { 135 135 + setFastState(mutation.target, null); 136 136 + } else if (mutation.type === 'unlike') { 137 137 + setFastState(mutation.target, mutation.originalRecord); 138 138 + } 139 139 + } 140 140 + } 141 141 + runningRef.current = false; 142 142 + }; 143 143 + 144 144 + const interval = setInterval(processQueue, 1000); 145 145 + return () => clearInterval(interval); 146 146 + }, [agent, setFastState]); 147 147 + 148 148 + const value = { fastState, fastToggle, backfillState }; 149 149 + 150 150 + return ( 151 151 + <LikeMutationQueueContext value={value}> 152 152 + {children} 153 153 + </LikeMutationQueueContext> 154 154 + ); 155 155 + } 156 156 + 157 157 + export function useLikeMutationQueue() { 158 158 + const context = use(LikeMutationQueueContext); 159 159 + if (context === undefined) { 160 160 + throw new Error('useLikeMutationQueue must be used within a LikeMutationQueueProvider'); 161 161 + } 162 162 + return context; 163 163 + }

+26 -23

src/providers/UnifiedAuthProvider.tsx

··· 1 1 - // src/providers/UnifiedAuthProvider.tsx 2 2 - // Import both Agent and the (soon to be deprecated) AtpAgent 3 1 import { Agent, AtpAgent, type AtpSessionData } from "@atproto/api"; 4 2 import { 5 3 type OAuthSession, ··· 7 5 TokenRefreshError, 8 6 TokenRevokedError, 9 7 } from "@atproto/oauth-client-browser"; 8 8 + import { useAtom } from "jotai"; 10 9 import React, { 11 10 createContext, 12 11 use, ··· 15 14 useState, 16 15 } from "react"; 17 16 18 18 - import { oauthClient } from "../utils/oauthClient"; // Adjust path if needed 17 17 + import { quickAuthAtom } from "~/utils/atoms"; 18 18 + 19 19 + import { oauthClient } from "../utils/oauthClient"; 19 20 20 20 - // Define the unified status and authentication method 21 21 type AuthStatus = "loading" | "signedIn" | "signedOut"; 22 22 type AuthMethod = "password" | "oauth" | null; 23 23 24 24 interface AuthContextValue { 25 25 - agent: Agent | null; // The agent is typed as the base class `Agent` 25 25 + agent: Agent | null; 26 26 status: AuthStatus; 27 27 authMethod: AuthMethod; 28 28 loginWithPassword: ( ··· 41 41 }: { 42 42 children: React.ReactNode; 43 43 }) => { 44 44 - // The state is typed as the base class `Agent`, which accepts both `Agent` and `AtpAgent` instances. 45 44 const [agent, setAgent] = useState<Agent | null>(null); 46 45 const [status, setStatus] = useState<AuthStatus>("loading"); 47 46 const [authMethod, setAuthMethod] = useState<AuthMethod>(null); 48 47 const [oauthSession, setOauthSession] = useState<OAuthSession | null>(null); 48 48 + const [quickAuth, setQuickAuth] = useAtom(quickAuthAtom); 49 49 50 50 - // Unified Initialization Logic 51 50 const initialize = useCallback(async () => { 52 52 - // --- 1. Try OAuth initialization first --- 53 51 try { 54 52 const oauthResult = await oauthClient.init(); 55 53 if (oauthResult) { 56 54 // /*mass comment*/ console.log("OAuth session restored."); 57 57 - const apiAgent = new Agent(oauthResult.session); // Standard Agent 55 55 + const apiAgent = new Agent(oauthResult.session); 58 56 setAgent(apiAgent); 59 57 setOauthSession(oauthResult.session); 60 58 setAuthMethod("oauth"); 61 59 setStatus("signedIn"); 62 62 - return; // Success 60 60 + setQuickAuth(apiAgent?.did || null); 61 61 + return; 63 62 } 64 63 } catch (e) { 65 64 console.error("OAuth init failed, checking password session.", e); 65 65 + if (!quickAuth) { 66 66 + // quickAuth restoration. if last used method is oauth we immediately call for oauth redo 67 67 + // (and set a persistent atom somewhere to not retry again if it failed) 68 68 + } 66 69 } 67 70 68 68 - // --- 2. If no OAuth, try password-based session using AtpAgent --- 69 71 try { 70 72 const service = localStorage.getItem("service"); 71 73 const sessionString = localStorage.getItem("sess"); 72 74 73 75 if (service && sessionString) { 74 76 // /*mass comment*/ console.log("Resuming password-based session using AtpAgent..."); 75 75 - // Use the original, working AtpAgent logic 76 77 const apiAgent = new AtpAgent({ service }); 77 78 const session: AtpSessionData = JSON.parse(sessionString); 78 79 await apiAgent.resumeSession(session); 79 80 80 81 // /*mass comment*/ console.log("Password-based session resumed successfully."); 81 81 - setAgent(apiAgent); // This works because AtpAgent is a subclass of Agent 82 82 + setAgent(apiAgent); 82 83 setAuthMethod("password"); 83 84 setStatus("signedIn"); 84 84 - return; // Success 85 85 + setQuickAuth(apiAgent?.did || null); 86 86 + return; 85 87 } 86 88 } catch (e) { 87 89 console.error("Failed to resume password-based session.", e); ··· 89 91 localStorage.removeItem("service"); 90 92 } 91 93 92 92 - // --- 3. If neither worked, user is signed out --- 93 94 // /*mass comment*/ console.log("No active session found."); 94 95 setStatus("signedOut"); 95 96 setAgent(null); 96 97 setAuthMethod(null); 97 97 - }, []); 98 98 + // do we want to null it here? 99 99 + setQuickAuth(null); 100 100 + }, [quickAuth, setQuickAuth]); 98 101 99 102 useEffect(() => { 100 103 const handleOAuthSessionDeleted = ( ··· 105 108 setOauthSession(null); 106 109 setAuthMethod(null); 107 110 setStatus("signedOut"); 111 111 + setQuickAuth(null); 108 112 }; 109 113 110 114 oauthClient.addEventListener("deleted", handleOAuthSessionDeleted as EventListener); ··· 113 117 return () => { 114 118 oauthClient.removeEventListener("deleted", handleOAuthSessionDeleted as EventListener); 115 119 }; 116 116 - }, [initialize]); 120 120 + }, [initialize, setQuickAuth]); 117 121 118 118 - // --- Login Methods --- 119 122 const loginWithPassword = async ( 120 123 user: string, 121 124 password: string, ··· 125 128 setStatus("loading"); 126 129 try { 127 130 let sessionData: AtpSessionData | undefined; 128 128 - // Use the AtpAgent for its simple login and session persistence 129 131 const apiAgent = new AtpAgent({ 130 132 service, 131 133 persistSession: (_evt, sess) => { ··· 137 139 if (sessionData) { 138 140 localStorage.setItem("service", service); 139 141 localStorage.setItem("sess", JSON.stringify(sessionData)); 140 140 - setAgent(apiAgent); // Store the AtpAgent instance in our state 142 142 + setAgent(apiAgent); 141 143 setAuthMethod("password"); 142 144 setStatus("signedIn"); 145 145 + setQuickAuth(apiAgent?.did || null); 143 146 // /*mass comment*/ console.log("Successfully logged in with password."); 144 147 } else { 145 148 throw new Error("Session data not persisted after login."); ··· 147 150 } catch (e) { 148 151 console.error("Password login failed:", e); 149 152 setStatus("signedOut"); 153 153 + setQuickAuth(null); 150 154 throw e; 151 155 } 152 156 }; ··· 161 165 } 162 166 }, [status]); 163 167 164 164 - // --- Unified Logout --- 165 168 const logout = useCallback(async () => { 166 169 if (status !== "signedIn" || !agent) return; 167 170 setStatus("loading"); ··· 173 176 } else if (authMethod === "password") { 174 177 localStorage.removeItem("service"); 175 178 localStorage.removeItem("sess"); 176 176 - // AtpAgent has its own logout methods 177 179 await (agent as AtpAgent).com.atproto.server.deleteSession(); 178 180 // /*mass comment*/ console.log("Password-based session deleted."); 179 181 } ··· 184 186 setAuthMethod(null); 185 187 setOauthSession(null); 186 188 setStatus("signedOut"); 189 189 + setQuickAuth(null); 187 190 } 188 188 - }, [status, authMethod, agent, oauthSession]); 191 191 + }, [status, agent, authMethod, oauthSession, setQuickAuth]); 189 192 190 193 return ( 191 194 <AuthContext

+150

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' 18 19 import { Route as CallbackIndexRouteImport } from './routes/callback/index' 19 20 import { Route as PathlessLayoutNestedLayoutRouteImport } from './routes/_pathlessLayout/_nested-layout' 20 21 import { Route as ProfileDidIndexRouteImport } from './routes/profile.$did/index' 22 22 + import { Route as ProfileDidFollowsRouteImport } from './routes/profile.$did/follows' 23 23 + import { Route as ProfileDidFollowersRouteImport } from './routes/profile.$did/followers' 21 24 import { Route as PathlessLayoutNestedLayoutRouteBRouteImport } from './routes/_pathlessLayout/_nested-layout/route-b' 22 25 import { Route as PathlessLayoutNestedLayoutRouteARouteImport } from './routes/_pathlessLayout/_nested-layout/route-a' 23 26 import { Route as ProfileDidPostRkeyRouteImport } from './routes/profile.$did/post.$rkey' 27 27 + import { Route as ProfileDidFeedRkeyRouteImport } from './routes/profile.$did/feed.$rkey' 28 28 + import { Route as ProfileDidPostRkeyRepostedByRouteImport } from './routes/profile.$did/post.$rkey.reposted-by' 29 29 + import { Route as ProfileDidPostRkeyQuotesRouteImport } from './routes/profile.$did/post.$rkey.quotes' 30 30 + import { Route as ProfileDidPostRkeyLikedByRouteImport } from './routes/profile.$did/post.$rkey.liked-by' 24 31 import { Route as ProfileDidPostRkeyImageIRouteImport } from './routes/profile.$did/post.$rkey.image.$i' 25 32 26 33 const SettingsRoute = SettingsRouteImport.update({ ··· 38 45 path: '/notifications', 39 46 getParentRoute: () => rootRouteImport, 40 47 } as any) 48 48 + const ModerationRoute = ModerationRouteImport.update({ 49 49 + id: '/moderation', 50 50 + path: '/moderation', 51 51 + getParentRoute: () => rootRouteImport, 52 52 + } as any) 41 53 const FeedsRoute = FeedsRouteImport.update({ 42 54 id: '/feeds', 43 55 path: '/feeds', ··· 67 79 path: '/profile/$did/', 68 80 getParentRoute: () => rootRouteImport, 69 81 } as any) 82 82 + const ProfileDidFollowsRoute = ProfileDidFollowsRouteImport.update({ 83 83 + id: '/profile/$did/follows', 84 84 + path: '/profile/$did/follows', 85 85 + getParentRoute: () => rootRouteImport, 86 86 + } as any) 87 87 + const ProfileDidFollowersRoute = ProfileDidFollowersRouteImport.update({ 88 88 + id: '/profile/$did/followers', 89 89 + path: '/profile/$did/followers', 90 90 + getParentRoute: () => rootRouteImport, 91 91 + } as any) 70 92 const PathlessLayoutNestedLayoutRouteBRoute = 71 93 PathlessLayoutNestedLayoutRouteBRouteImport.update({ 72 94 id: '/route-b', ··· 84 106 path: '/profile/$did/post/$rkey', 85 107 getParentRoute: () => rootRouteImport, 86 108 } as any) 109 109 + const ProfileDidFeedRkeyRoute = ProfileDidFeedRkeyRouteImport.update({ 110 110 + id: '/profile/$did/feed/$rkey', 111 111 + path: '/profile/$did/feed/$rkey', 112 112 + getParentRoute: () => rootRouteImport, 113 113 + } as any) 114 114 + const ProfileDidPostRkeyRepostedByRoute = 115 115 + ProfileDidPostRkeyRepostedByRouteImport.update({ 116 116 + id: '/reposted-by', 117 117 + path: '/reposted-by', 118 118 + getParentRoute: () => ProfileDidPostRkeyRoute, 119 119 + } as any) 120 120 + const ProfileDidPostRkeyQuotesRoute = 121 121 + ProfileDidPostRkeyQuotesRouteImport.update({ 122 122 + id: '/quotes', 123 123 + path: '/quotes', 124 124 + getParentRoute: () => ProfileDidPostRkeyRoute, 125 125 + } as any) 126 126 + const ProfileDidPostRkeyLikedByRoute = 127 127 + ProfileDidPostRkeyLikedByRouteImport.update({ 128 128 + id: '/liked-by', 129 129 + path: '/liked-by', 130 130 + getParentRoute: () => ProfileDidPostRkeyRoute, 131 131 + } as any) 87 132 const ProfileDidPostRkeyImageIRoute = 88 133 ProfileDidPostRkeyImageIRouteImport.update({ 89 134 id: '/image/$i', ··· 94 139 export interface FileRoutesByFullPath { 95 140 '/': typeof IndexRoute 96 141 '/feeds': typeof FeedsRoute 142 142 + '/moderation': typeof ModerationRoute 97 143 '/notifications': typeof NotificationsRoute 98 144 '/search': typeof SearchRoute 99 145 '/settings': typeof SettingsRoute 100 146 '/callback': typeof CallbackIndexRoute 101 147 '/route-a': typeof PathlessLayoutNestedLayoutRouteARoute 102 148 '/route-b': typeof PathlessLayoutNestedLayoutRouteBRoute 149 149 + '/profile/$did/followers': typeof ProfileDidFollowersRoute 150 150 + '/profile/$did/follows': typeof ProfileDidFollowsRoute 103 151 '/profile/$did': typeof ProfileDidIndexRoute 152 152 + '/profile/$did/feed/$rkey': typeof ProfileDidFeedRkeyRoute 104 153 '/profile/$did/post/$rkey': typeof ProfileDidPostRkeyRouteWithChildren 154 154 + '/profile/$did/post/$rkey/liked-by': typeof ProfileDidPostRkeyLikedByRoute 155 155 + '/profile/$did/post/$rkey/quotes': typeof ProfileDidPostRkeyQuotesRoute 156 156 + '/profile/$did/post/$rkey/reposted-by': typeof ProfileDidPostRkeyRepostedByRoute 105 157 '/profile/$did/post/$rkey/image/$i': typeof ProfileDidPostRkeyImageIRoute 106 158 } 107 159 export interface FileRoutesByTo { 108 160 '/': typeof IndexRoute 109 161 '/feeds': typeof FeedsRoute 162 162 + '/moderation': typeof ModerationRoute 110 163 '/notifications': typeof NotificationsRoute 111 164 '/search': typeof SearchRoute 112 165 '/settings': typeof SettingsRoute 113 166 '/callback': typeof CallbackIndexRoute 114 167 '/route-a': typeof PathlessLayoutNestedLayoutRouteARoute 115 168 '/route-b': typeof PathlessLayoutNestedLayoutRouteBRoute 169 169 + '/profile/$did/followers': typeof ProfileDidFollowersRoute 170 170 + '/profile/$did/follows': typeof ProfileDidFollowsRoute 116 171 '/profile/$did': typeof ProfileDidIndexRoute 172 172 + '/profile/$did/feed/$rkey': typeof ProfileDidFeedRkeyRoute 117 173 '/profile/$did/post/$rkey': typeof ProfileDidPostRkeyRouteWithChildren 174 174 + '/profile/$did/post/$rkey/liked-by': typeof ProfileDidPostRkeyLikedByRoute 175 175 + '/profile/$did/post/$rkey/quotes': typeof ProfileDidPostRkeyQuotesRoute 176 176 + '/profile/$did/post/$rkey/reposted-by': typeof ProfileDidPostRkeyRepostedByRoute 118 177 '/profile/$did/post/$rkey/image/$i': typeof ProfileDidPostRkeyImageIRoute 119 178 } 120 179 export interface FileRoutesById { ··· 122 181 '/': typeof IndexRoute 123 182 '/_pathlessLayout': typeof PathlessLayoutRouteWithChildren 124 183 '/feeds': typeof FeedsRoute 184 184 + '/moderation': typeof ModerationRoute 125 185 '/notifications': typeof NotificationsRoute 126 186 '/search': typeof SearchRoute 127 187 '/settings': typeof SettingsRoute ··· 129 189 '/callback/': typeof CallbackIndexRoute 130 190 '/_pathlessLayout/_nested-layout/route-a': typeof PathlessLayoutNestedLayoutRouteARoute 131 191 '/_pathlessLayout/_nested-layout/route-b': typeof PathlessLayoutNestedLayoutRouteBRoute 192 192 + '/profile/$did/followers': typeof ProfileDidFollowersRoute 193 193 + '/profile/$did/follows': typeof ProfileDidFollowsRoute 132 194 '/profile/$did/': typeof ProfileDidIndexRoute 195 195 + '/profile/$did/feed/$rkey': typeof ProfileDidFeedRkeyRoute 133 196 '/profile/$did/post/$rkey': typeof ProfileDidPostRkeyRouteWithChildren 197 197 + '/profile/$did/post/$rkey/liked-by': typeof ProfileDidPostRkeyLikedByRoute 198 198 + '/profile/$did/post/$rkey/quotes': typeof ProfileDidPostRkeyQuotesRoute 199 199 + '/profile/$did/post/$rkey/reposted-by': typeof ProfileDidPostRkeyRepostedByRoute 134 200 '/profile/$did/post/$rkey/image/$i': typeof ProfileDidPostRkeyImageIRoute 135 201 } 136 202 export interface FileRouteTypes { ··· 138 204 fullPaths: 139 205 | '/' 140 206 | '/feeds' 207 207 + | '/moderation' 141 208 | '/notifications' 142 209 | '/search' 143 210 | '/settings' 144 211 | '/callback' 145 212 | '/route-a' 146 213 | '/route-b' 214 214 + | '/profile/$did/followers' 215 215 + | '/profile/$did/follows' 147 216 | '/profile/$did' 217 217 + | '/profile/$did/feed/$rkey' 148 218 | '/profile/$did/post/$rkey' 219 219 + | '/profile/$did/post/$rkey/liked-by' 220 220 + | '/profile/$did/post/$rkey/quotes' 221 221 + | '/profile/$did/post/$rkey/reposted-by' 149 222 | '/profile/$did/post/$rkey/image/$i' 150 223 fileRoutesByTo: FileRoutesByTo 151 224 to: 152 225 | '/' 153 226 | '/feeds' 227 227 + | '/moderation' 154 228 | '/notifications' 155 229 | '/search' 156 230 | '/settings' 157 231 | '/callback' 158 232 | '/route-a' 159 233 | '/route-b' 234 234 + | '/profile/$did/followers' 235 235 + | '/profile/$did/follows' 160 236 | '/profile/$did' 237 237 + | '/profile/$did/feed/$rkey' 161 238 | '/profile/$did/post/$rkey' 239 239 + | '/profile/$did/post/$rkey/liked-by' 240 240 + | '/profile/$did/post/$rkey/quotes' 241 241 + | '/profile/$did/post/$rkey/reposted-by' 162 242 | '/profile/$did/post/$rkey/image/$i' 163 243 id: 164 244 | '__root__' 165 245 | '/' 166 246 | '/_pathlessLayout' 167 247 | '/feeds' 248 248 + | '/moderation' 168 249 | '/notifications' 169 250 | '/search' 170 251 | '/settings' ··· 172 253 | '/callback/' 173 254 | '/_pathlessLayout/_nested-layout/route-a' 174 255 | '/_pathlessLayout/_nested-layout/route-b' 256 256 + | '/profile/$did/followers' 257 257 + | '/profile/$did/follows' 175 258 | '/profile/$did/' 259 259 + | '/profile/$did/feed/$rkey' 176 260 | '/profile/$did/post/$rkey' 261 261 + | '/profile/$did/post/$rkey/liked-by' 262 262 + | '/profile/$did/post/$rkey/quotes' 263 263 + | '/profile/$did/post/$rkey/reposted-by' 177 264 | '/profile/$did/post/$rkey/image/$i' 178 265 fileRoutesById: FileRoutesById 179 266 } ··· 181 268 IndexRoute: typeof IndexRoute 182 269 PathlessLayoutRoute: typeof PathlessLayoutRouteWithChildren 183 270 FeedsRoute: typeof FeedsRoute 271 271 + ModerationRoute: typeof ModerationRoute 184 272 NotificationsRoute: typeof NotificationsRoute 185 273 SearchRoute: typeof SearchRoute 186 274 SettingsRoute: typeof SettingsRoute 187 275 CallbackIndexRoute: typeof CallbackIndexRoute 276 276 + ProfileDidFollowersRoute: typeof ProfileDidFollowersRoute 277 277 + ProfileDidFollowsRoute: typeof ProfileDidFollowsRoute 188 278 ProfileDidIndexRoute: typeof ProfileDidIndexRoute 279 279 + ProfileDidFeedRkeyRoute: typeof ProfileDidFeedRkeyRoute 189 280 ProfileDidPostRkeyRoute: typeof ProfileDidPostRkeyRouteWithChildren 190 281 } 191 282 ··· 212 303 preLoaderRoute: typeof NotificationsRouteImport 213 304 parentRoute: typeof rootRouteImport 214 305 } 306 306 + '/moderation': { 307 307 + id: '/moderation' 308 308 + path: '/moderation' 309 309 + fullPath: '/moderation' 310 310 + preLoaderRoute: typeof ModerationRouteImport 311 311 + parentRoute: typeof rootRouteImport 312 312 + } 215 313 '/feeds': { 216 314 id: '/feeds' 217 315 path: '/feeds' ··· 254 352 preLoaderRoute: typeof ProfileDidIndexRouteImport 255 353 parentRoute: typeof rootRouteImport 256 354 } 355 355 + '/profile/$did/follows': { 356 356 + id: '/profile/$did/follows' 357 357 + path: '/profile/$did/follows' 358 358 + fullPath: '/profile/$did/follows' 359 359 + preLoaderRoute: typeof ProfileDidFollowsRouteImport 360 360 + parentRoute: typeof rootRouteImport 361 361 + } 362 362 + '/profile/$did/followers': { 363 363 + id: '/profile/$did/followers' 364 364 + path: '/profile/$did/followers' 365 365 + fullPath: '/profile/$did/followers' 366 366 + preLoaderRoute: typeof ProfileDidFollowersRouteImport 367 367 + parentRoute: typeof rootRouteImport 368 368 + } 257 369 '/_pathlessLayout/_nested-layout/route-b': { 258 370 id: '/_pathlessLayout/_nested-layout/route-b' 259 371 path: '/route-b' ··· 275 387 preLoaderRoute: typeof ProfileDidPostRkeyRouteImport 276 388 parentRoute: typeof rootRouteImport 277 389 } 390 390 + '/profile/$did/feed/$rkey': { 391 391 + id: '/profile/$did/feed/$rkey' 392 392 + path: '/profile/$did/feed/$rkey' 393 393 + fullPath: '/profile/$did/feed/$rkey' 394 394 + preLoaderRoute: typeof ProfileDidFeedRkeyRouteImport 395 395 + parentRoute: typeof rootRouteImport 396 396 + } 397 397 + '/profile/$did/post/$rkey/reposted-by': { 398 398 + id: '/profile/$did/post/$rkey/reposted-by' 399 399 + path: '/reposted-by' 400 400 + fullPath: '/profile/$did/post/$rkey/reposted-by' 401 401 + preLoaderRoute: typeof ProfileDidPostRkeyRepostedByRouteImport 402 402 + parentRoute: typeof ProfileDidPostRkeyRoute 403 403 + } 404 404 + '/profile/$did/post/$rkey/quotes': { 405 405 + id: '/profile/$did/post/$rkey/quotes' 406 406 + path: '/quotes' 407 407 + fullPath: '/profile/$did/post/$rkey/quotes' 408 408 + preLoaderRoute: typeof ProfileDidPostRkeyQuotesRouteImport 409 409 + parentRoute: typeof ProfileDidPostRkeyRoute 410 410 + } 411 411 + '/profile/$did/post/$rkey/liked-by': { 412 412 + id: '/profile/$did/post/$rkey/liked-by' 413 413 + path: '/liked-by' 414 414 + fullPath: '/profile/$did/post/$rkey/liked-by' 415 415 + preLoaderRoute: typeof ProfileDidPostRkeyLikedByRouteImport 416 416 + parentRoute: typeof ProfileDidPostRkeyRoute 417 417 + } 278 418 '/profile/$did/post/$rkey/image/$i': { 279 419 id: '/profile/$did/post/$rkey/image/$i' 280 420 path: '/image/$i' ··· 316 456 ) 317 457 318 458 interface ProfileDidPostRkeyRouteChildren { 459 459 + ProfileDidPostRkeyLikedByRoute: typeof ProfileDidPostRkeyLikedByRoute 460 460 + ProfileDidPostRkeyQuotesRoute: typeof ProfileDidPostRkeyQuotesRoute 461 461 + ProfileDidPostRkeyRepostedByRoute: typeof ProfileDidPostRkeyRepostedByRoute 319 462 ProfileDidPostRkeyImageIRoute: typeof ProfileDidPostRkeyImageIRoute 320 463 } 321 464 322 465 const ProfileDidPostRkeyRouteChildren: ProfileDidPostRkeyRouteChildren = { 466 466 + ProfileDidPostRkeyLikedByRoute: ProfileDidPostRkeyLikedByRoute, 467 467 + ProfileDidPostRkeyQuotesRoute: ProfileDidPostRkeyQuotesRoute, 468 468 + ProfileDidPostRkeyRepostedByRoute: ProfileDidPostRkeyRepostedByRoute, 323 469 ProfileDidPostRkeyImageIRoute: ProfileDidPostRkeyImageIRoute, 324 470 } 325 471 ··· 330 476 IndexRoute: IndexRoute, 331 477 PathlessLayoutRoute: PathlessLayoutRouteWithChildren, 332 478 FeedsRoute: FeedsRoute, 479 479 + ModerationRoute: ModerationRoute, 333 480 NotificationsRoute: NotificationsRoute, 334 481 SearchRoute: SearchRoute, 335 482 SettingsRoute: SettingsRoute, 336 483 CallbackIndexRoute: CallbackIndexRoute, 484 484 + ProfileDidFollowersRoute: ProfileDidFollowersRoute, 485 485 + ProfileDidFollowsRoute: ProfileDidFollowsRoute, 337 486 ProfileDidIndexRoute: ProfileDidIndexRoute, 487 487 + ProfileDidFeedRkeyRoute: ProfileDidFeedRkeyRoute, 338 488 ProfileDidPostRkeyRoute: ProfileDidPostRkeyRouteWithChildren, 339 489 } 340 490 export const routeTree = rootRouteImport

+193 -27

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"; 20 22 import { DefaultCatchBoundary } from "~/components/DefaultCatchBoundary"; 23 23 + import { Import } from "~/components/Import"; 21 24 import Login from "~/components/Login"; 22 25 import { NotFound } from "~/components/NotFound"; 26 26 + import { FluentEmojiHighContrastGlowingStar } from "~/components/Star"; 27 27 + import { LikeMutationQueueProvider } from "~/providers/LikeMutationQueueProvider"; 23 28 import { UnifiedAuthProvider, useAuth } from "~/providers/UnifiedAuthProvider"; 24 24 - import { composerAtom } from "~/utils/atoms"; 29 29 + import { composerAtom, hueAtom, useAtomCssVar } from "~/utils/atoms"; 25 30 import { seo } from "~/utils/seo"; 26 31 27 32 export const Route = createRootRouteWithContext<{ ··· 77 82 function RootComponent() { 78 83 return ( 79 84 <UnifiedAuthProvider> 80 80 - <RootDocument> 81 81 - <KeepAliveProvider> 82 82 - <KeepAliveOutlet /> 83 83 - </KeepAliveProvider> 84 84 - </RootDocument> 85 85 + <LikeMutationQueueProvider> 86 86 + <RootDocument> 87 87 + <KeepAliveProvider> 88 88 + <AppToaster /> 89 89 + <KeepAliveOutlet /> 90 90 + </KeepAliveProvider> 91 91 + </RootDocument> 92 92 + </LikeMutationQueueProvider> 85 93 </UnifiedAuthProvider> 86 94 ); 87 95 } 88 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 + 89 201 function RootDocument({ children }: { children: React.ReactNode }) { 202 202 + useAtomCssVar(hueAtom, "--tw-gray-hue"); 90 203 const location = useLocation(); 91 204 const navigate = useNavigate(); 92 205 const { agent } = useAuth(); ··· 100 213 const isSettings = location.pathname.startsWith("/settings"); 101 214 const isSearch = location.pathname.startsWith("/search"); 102 215 const isFeeds = location.pathname.startsWith("/feeds"); 216 216 + const isModeration = location.pathname.startsWith("/moderation"); 103 217 104 218 const locationEnum: 105 219 | "feeds" ··· 107 221 | "settings" 108 222 | "notifications" 109 223 | "profile" 224 224 + | "moderation" 110 225 | "home" = isFeeds 111 226 ? "feeds" 112 227 : isSearch ··· 117 232 ? "notifications" 118 233 : isProfile 119 234 ? "profile" 120 120 - : "home"; 235 235 + : isModeration 236 236 + ? "moderation" 237 237 + : "home"; 121 238 122 239 const [, setComposerPost] = useAtom(composerAtom); 123 240 ··· 128 245 <div className="min-h-screen flex justify-center bg-gray-50 dark:bg-gray-950"> 129 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"> 130 247 <div className="flex items-center gap-3 mb-4"> 131 131 - <img src="/redstar.png" alt="Red Dwarf Logo" className="w-8 h-8" /> 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 + /> 132 255 <span className="font-extrabold text-2xl tracking-tight text-gray-900 dark:text-gray-100"> 133 256 Red Dwarf{" "} 134 257 {/* <span className="text-gray-500 dark:text-gray-400 text-sm"> ··· 151 274 text="Home" 152 275 /> 153 276 277 277 + <MaterialNavItem 278 278 + InactiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />} 279 279 + ActiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />} 280 280 + active={locationEnum === "search"} 281 281 + onClickCallbback={() => 282 282 + navigate({ 283 283 + to: "/search", 284 284 + //params: { did: agent.assertDid }, 285 285 + }) 286 286 + } 287 287 + text="Explore" 288 288 + /> 154 289 <MaterialNavItem 155 290 InactiveIcon={ 156 291 <IconMaterialSymbolsNotificationsOutline className="w-6 h-6" /> ··· 180 315 text="Feeds" 181 316 /> 182 317 <MaterialNavItem 183 183 - InactiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />} 184 184 - ActiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />} 185 185 - active={locationEnum === "search"} 318 318 + InactiveIcon={<IconMdiShieldOutline className="w-6 h-6" />} 319 319 + ActiveIcon={<IconMdiShield className="w-6 h-6" />} 320 320 + active={locationEnum === "moderation"} 186 321 onClickCallbback={() => 187 322 navigate({ 188 188 - to: "/search", 323 323 + to: "/moderation", 189 324 //params: { did: agent.assertDid }, 190 325 }) 191 326 } 192 192 - text="Search" 327 327 + text="Moderation" 193 328 /> 194 329 <MaterialNavItem 195 330 InactiveIcon={ ··· 229 364 InactiveIcon={<IconMdiPencilOutline className="w-6 h-6" />} 230 365 ActiveIcon={<IconMdiPencilOutline className="w-6 h-6" />} 231 366 //active={true} 232 232 - onClickCallbback={() => setComposerPost({ kind: 'root' })} 367 367 + onClickCallbback={() => setComposerPost({ kind: "root" })} 233 368 text="Post" 234 369 /> 235 370 </div> ··· 367 502 368 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"> 369 504 <div className="flex items-center gap-3 mb-4"> 370 370 - <img src="/redstar.png" alt="Red Dwarf Logo" className="w-8 h-8" /> 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 + /> 371 512 </div> 372 513 <MaterialNavItem 373 514 small ··· 387 528 388 529 <MaterialNavItem 389 530 small 531 531 + InactiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />} 532 532 + ActiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />} 533 533 + active={locationEnum === "search"} 534 534 + onClickCallbback={() => 535 535 + navigate({ 536 536 + to: "/search", 537 537 + //params: { did: agent.assertDid }, 538 538 + }) 539 539 + } 540 540 + text="Explore" 541 541 + /> 542 542 + <MaterialNavItem 543 543 + small 390 544 InactiveIcon={ 391 545 <IconMaterialSymbolsNotificationsOutline className="w-6 h-6" /> 392 546 } ··· 417 571 /> 418 572 <MaterialNavItem 419 573 small 420 420 - InactiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />} 421 421 - ActiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />} 422 422 - active={locationEnum === "search"} 574 574 + InactiveIcon={<IconMdiShieldOutline className="w-6 h-6" />} 575 575 + ActiveIcon={<IconMdiShield className="w-6 h-6" />} 576 576 + active={locationEnum === "moderation"} 423 577 onClickCallbback={() => 424 578 navigate({ 425 425 - to: "/search", 579 579 + to: "/moderation", 426 580 //params: { did: agent.assertDid }, 427 581 }) 428 582 } 429 429 - text="Search" 583 583 + text="Moderation" 430 584 /> 431 585 <MaterialNavItem 432 586 small ··· 469 623 InactiveIcon={<IconMdiPencilOutline className="w-6 h-6" />} 470 624 ActiveIcon={<IconMdiPencilOutline className="w-6 h-6" />} 471 625 //active={true} 472 472 - onClickCallbback={() => setComposerPost({ kind: 'root' })} 626 626 + onClickCallbback={() => setComposerPost({ kind: "root" })} 473 627 text="Post" 474 628 /> 475 629 </div> ··· 479 633 <button 480 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" 481 635 style={{ boxShadow: "0 4px 24px 0 rgba(0,0,0,0.12)" }} 482 482 - onClick={() => setComposerPost({ kind: 'root' })} 636 636 + onClick={() => setComposerPost({ kind: "root" })} 483 637 type="button" 484 638 aria-label="Create Post" 485 639 > ··· 496 650 </main> 497 651 498 652 <aside className="hidden lg:flex h-screen w-[250px] sticky top-0 self-start flex-col"> 653 653 + <div className="px-4 pt-4"> 654 654 + <Import /> 655 655 + </div> 499 656 <Login /> 500 657 501 658 <div className="flex-1"></div> 502 659 <p className="text-xs text-gray-400 dark:text-gray-500 text-justify mx-4 mb-4"> 503 503 - 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) 504 664 </p> 505 665 </aside> 506 666 </div> ··· 549 709 //params: { did: agent.assertDid }, 550 710 }) 551 711 } 552 552 - text="Search" 712 712 + text="Explore" 553 713 /> 554 714 {/* <Link 555 715 to="/search" ··· 647 807 <IconMaterialSymbolsSettingsOutline className="w-6 h-6" /> 648 808 } 649 809 ActiveIcon={<IconMaterialSymbolsSettings className="w-6 h-6" />} 650 650 - active={locationEnum === "settings"} 810 810 + active={locationEnum === "settings" || locationEnum === "feeds" || locationEnum === "moderation"} 651 811 onClickCallbback={() => 652 812 navigate({ 653 813 to: "/settings", ··· 676 836 ) : ( 677 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"> 678 838 <div className="flex items-center gap-2"> 679 679 - <img src="/redstar.png" alt="Red Dwarf Logo" className="w-6 h-6" /> 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 + /> 680 846 <span className="font-bold text-lg text-gray-900 dark:text-gray-100"> 681 847 Red Dwarf{" "} 682 848 {/* <span className="text-gray-500 dark:text-gray-400 text-sm"> ··· 696 862 ); 697 863 } 698 864 699 699 - function MaterialNavItem({ 865 865 + export function MaterialNavItem({ 700 866 InactiveIcon, 701 867 ActiveIcon, 702 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 }

+84 -73

src/routes/index.tsx

··· 1 1 import { createFileRoute } from "@tanstack/react-router"; 2 2 import { useAtom } from "jotai"; 3 3 import * as React from "react"; 4 4 - import { useEffect, useLayoutEffect } from "react"; 4 4 + import { useLayoutEffect, useState } from "react"; 5 5 6 6 import { Header } from "~/components/Header"; 7 7 import { InfiniteCustomFeed } from "~/components/InfiniteCustomFeed"; 8 8 import { useAuth } from "~/providers/UnifiedAuthProvider"; 9 9 import { 10 10 - agentAtom, 11 11 - authedAtom, 12 10 feedScrollPositionsAtom, 13 11 isAtTopAtom, 12 12 + quickAuthAtom, 14 13 selectedFeedUriAtom, 15 15 - store, 16 14 } from "~/utils/atoms"; 17 15 //import { usePersistentStore } from "~/providers/PersistentStoreProvider"; 18 16 import { ··· 107 105 } = useAuth(); 108 106 const authed = !!agent?.did; 109 107 110 110 - useEffect(() => { 111 111 - if (agent?.did) { 112 112 - store.set(authedAtom, true); 113 113 - } else { 114 114 - store.set(authedAtom, false); 115 115 - } 116 116 - }, [status, agent, authed]); 117 117 - useEffect(() => { 118 118 - if (agent) { 119 119 - // eslint-disable-next-line @typescript-eslint/ban-ts-comment 120 120 - // @ts-ignore is it just me or is the type really weird here it should be Agent not AtpAgent 121 121 - store.set(agentAtom, agent); 122 122 - } else { 123 123 - store.set(agentAtom, null); 124 124 - } 125 125 - }, [status, agent, authed]); 108 108 + // i dont remember why this is even here 109 109 + // useEffect(() => { 110 110 + // if (agent?.did) { 111 111 + // store.set(authedAtom, true); 112 112 + // } else { 113 113 + // store.set(authedAtom, false); 114 114 + // } 115 115 + // }, [status, agent, authed]); 116 116 + // useEffect(() => { 117 117 + // if (agent) { 118 118 + // // eslint-disable-next-line @typescript-eslint/ban-ts-comment 119 119 + // // @ts-ignore is it just me or is the type really weird here it should be Agent not AtpAgent 120 120 + // store.set(agentAtom, agent); 121 121 + // } else { 122 122 + // store.set(agentAtom, null); 123 123 + // } 124 124 + // }, [status, agent, authed]); 126 125 127 126 //const { get, set } = usePersistentStore(); 128 127 // const [feed, setFeed] = React.useState<any[]>([]); ··· 162 161 163 162 // const savedFeeds = savedFeedsPref?.items || []; 164 163 165 165 - const identityresultmaybe = useQueryIdentity(agent?.did); 164 164 + const [quickAuth, setQuickAuth] = useAtom(quickAuthAtom); 165 165 + const isAuthRestoring = quickAuth ? status === "loading" : false; 166 166 + 167 167 + const identityresultmaybe = useQueryIdentity(!isAuthRestoring ? agent?.did : undefined); 166 168 const identity = identityresultmaybe?.data; 167 169 168 170 const prefsresultmaybe = useQueryPreferences({ 169 169 - agent: agent ?? undefined, 170 170 - pdsUrl: identity?.pds, 171 171 + agent: !isAuthRestoring ? (agent ?? undefined) : undefined, 172 172 + pdsUrl: !isAuthRestoring ? (identity?.pds) : undefined, 171 173 }); 172 174 const prefs = prefsresultmaybe?.data; 173 175 ··· 178 180 return savedFeedsPref?.items || []; 179 181 }, [prefs]); 180 182 181 181 - const [persistentSelectedFeed, setPersistentSelectedFeed] = 182 182 - useAtom(selectedFeedUriAtom); // React.useState<string | null>(null); 183 183 - const [unauthedSelectedFeed, setUnauthedSelectedFeed] = React.useState( 184 184 - persistentSelectedFeed 185 185 - ); // React.useState<string | null>(null); 183 183 + const [persistentSelectedFeed, setPersistentSelectedFeed] = useAtom(selectedFeedUriAtom); 184 184 + const [unauthedSelectedFeed, setUnauthedSelectedFeed] = useState(persistentSelectedFeed); 186 185 const selectedFeed = agent?.did 187 186 ? persistentSelectedFeed 188 187 : unauthedSelectedFeed; ··· 306 305 }, [scrollPositions]); 307 306 308 307 useLayoutEffect(() => { 308 308 + if (isAuthRestoring) return; 309 309 const savedPosition = scrollPositions[selectedFeed ?? "null"] ?? 0; 310 310 311 311 window.scrollTo({ top: savedPosition, behavior: "instant" }); 312 312 // eslint-disable-next-line react-hooks/exhaustive-deps 313 313 - }, [selectedFeed]); 313 313 + }, [selectedFeed, isAuthRestoring]); 314 314 315 315 useLayoutEffect(() => { 316 316 - if (!selectedFeed) return; 316 316 + if (!selectedFeed || isAuthRestoring) return; 317 317 318 318 const handleScroll = () => { 319 319 scrollPositionsRef.current = { ··· 328 328 329 329 setScrollPositions(scrollPositionsRef.current); 330 330 }; 331 331 - }, [selectedFeed, setScrollPositions]); 331 331 + }, [isAuthRestoring, selectedFeed, setScrollPositions]); 332 332 333 333 - const feedGengetrecordquery = useQueryArbitrary(selectedFeed ?? undefined); 334 334 - const feedServiceDid = (feedGengetrecordquery?.data?.value as any)?.did; 333 333 + const feedGengetrecordquery = useQueryArbitrary(!isAuthRestoring ? selectedFeed ?? undefined : undefined); 334 334 + const feedServiceDid = !isAuthRestoring ? (feedGengetrecordquery?.data?.value as any)?.did as string | undefined : undefined; 335 335 336 336 // const { 337 337 // data: feedData, ··· 347 347 348 348 // const feed = feedData?.feed || []; 349 349 350 350 - const isReadyForAuthedFeed = 351 351 - authed && agent && identity?.pds && feedServiceDid; 352 352 - const isReadyForUnauthedFeed = !authed && selectedFeed; 350 350 + const isReadyForAuthedFeed = !isAuthRestoring && authed && agent && identity?.pds && feedServiceDid; 351 351 + const isReadyForUnauthedFeed = !isAuthRestoring && !authed && selectedFeed; 353 352 354 353 355 354 const [isAtTop] = useAtom(isAtTopAtom); ··· 358 357 <div 359 358 className={`relative flex flex-col divide-y divide-gray-200 dark:divide-gray-800 ${hidden && "hidden"}`} 360 359 > 361 361 - {savedFeeds.length > 0 ? ( 360 360 + {!isAuthRestoring && savedFeeds.length > 0 ? ( 362 361 <div className={`flex items-center px-4 py-2 h-[52px] sticky top-0 bg-[var(--header-bg-light)] dark:bg-[var(--header-bg-dark)] ${!isAtTop && "shadow-sm"} sm:shadow-none sm:bg-white sm:dark:bg-gray-950 z-10 border-0 sm:border-b border-gray-200 dark:border-gray-700 overflow-x-auto overflow-y-hidden scroll-thin`}> 363 363 - {savedFeeds.map((item: any, idx: number) => { 364 364 - const label = item.value.split("/").pop() || item.value; 365 365 - const isActive = selectedFeed === item.value; 366 366 - return ( 367 367 - <button 368 368 - key={item.value || idx} 369 369 - className={`px-3 py-1 rounded-full whitespace-nowrap font-medium transition-colors ${ 370 370 - isActive 371 371 - ? "text-gray-900 dark:text-gray-100 hover:bg-gray-300 dark:bg-gray-700 bg-gray-200 hover:dark:bg-gray-600" 372 372 - : "text-gray-600 dark:text-gray-400 hover:bg-gray-100 hover:dark:bg-gray-800" 373 373 - // ? "bg-gray-500 text-white" 374 374 - // : item.pinned 375 375 - // ? "bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-200" 376 376 - // : "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-200" 377 377 - }`} 378 378 - onClick={() => setSelectedFeed(item.value)} 379 379 - title={item.value} 380 380 - > 381 381 - {label} 382 382 - {item.pinned && ( 383 383 - <span 384 384 - className={`ml-1 text-xs ${ 385 385 - isActive 386 386 - ? "text-gray-900 dark:text-gray-100" 387 387 - : "text-gray-600 dark:text-gray-400" 388 388 - }`} 389 389 - > 390 390 - ★ 391 391 - </span> 392 392 - )} 393 393 - </button> 394 394 - ); 395 395 - })} 362 362 + {savedFeeds.map((item: any, idx: number) => {return <FeedTabOnTop key={item} item={item} idx={idx} />})} 396 363 </div> 397 364 ) : ( 398 365 // <span className="text-xl font-bold ml-2">Home</span> ··· 410 377 /> 411 378 ))} */} 412 379 413 413 - {authed && (!identity?.pds || !feedServiceDid) && ( 380 380 + {isAuthRestoring || authed && (!identity?.pds || !feedServiceDid) && ( 414 381 <div className="p-4 text-center text-gray-500"> 415 382 Preparing your feed... 416 383 </div> 417 384 )} 418 385 419 419 - {isReadyForAuthedFeed || isReadyForUnauthedFeed ? ( 386 386 + {!isAuthRestoring && (isReadyForAuthedFeed || isReadyForUnauthedFeed) ? ( 420 387 <InfiniteCustomFeed 388 388 + key={selectedFeed!} 421 389 feedUri={selectedFeed!} 422 390 pdsUrl={identity?.pds} 423 391 feedServiceDid={feedServiceDid} 424 392 /> 425 393 ) : ( 426 394 <div className="p-4 text-center text-gray-500"> 427 427 - Select a feed to get started. 395 395 + Loading....... 428 396 </div> 429 397 )} 430 398 {/* {false && restoringScrollPosition && ( ··· 435 403 </div> 436 404 ); 437 405 } 406 406 + 407 407 + 408 408 + // todo please use types this is dangerous very dangerous. 409 409 + // todo fix this whenever proper preferences is handled 410 410 + function FeedTabOnTop({item, idx}:{item: any, idx: number}) { 411 411 + const [persistentSelectedFeed, setPersistentSelectedFeed] = useAtom(selectedFeedUriAtom); 412 412 + const selectedFeed = persistentSelectedFeed 413 413 + const setSelectedFeed = setPersistentSelectedFeed 414 414 + const rkey = item.value.split("/").pop() || item.value; 415 415 + const isActive = selectedFeed === item.value; 416 416 + const { data: feedrecord } = useQueryArbitrary(item.value) 417 417 + const label = feedrecord?.value?.displayName || rkey 418 418 + return ( 419 419 + <button 420 420 + key={item.value || idx} 421 421 + className={`px-3 py-1 rounded-full whitespace-nowrap font-medium transition-colors ${ 422 422 + isActive 423 423 + ? "text-gray-900 dark:text-gray-100 hover:bg-gray-300 dark:bg-gray-700 bg-gray-200 hover:dark:bg-gray-600" 424 424 + : "text-gray-600 dark:text-gray-400 hover:bg-gray-100 hover:dark:bg-gray-800" 425 425 + // ? "bg-gray-500 text-white" 426 426 + // : item.pinned 427 427 + // ? "bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-200" 428 428 + // : "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-200" 429 429 + }`} 430 430 + onClick={() => setSelectedFeed(item.value)} 431 431 + title={item.value} 432 432 + > 433 433 + {label} 434 434 + {item.pinned && ( 435 435 + <span 436 436 + className={`ml-1 text-xs ${ 437 437 + isActive 438 438 + ? "text-gray-900 dark:text-gray-100" 439 439 + : "text-gray-600 dark:text-gray-400" 440 440 + }`} 441 441 + > 442 442 + ★ 443 443 + </span> 444 444 + )} 445 445 + </button> 446 446 + ); 447 447 + } 448 448 + 438 449 // not even used lmaooo 439 450 440 451 // export async function cachedResolveDIDWEBDOC({

+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 + }

+644 -152

src/routes/notifications.tsx

··· 1 1 - import { createFileRoute } from "@tanstack/react-router"; 2 2 - import React, { useEffect, useRef,useState } from "react"; 1 1 + import { AtUri } from "@atproto/api"; 2 2 + import { useInfiniteQuery, useQueryClient } from "@tanstack/react-query"; 3 3 + import { createFileRoute, Link, useNavigate } from "@tanstack/react-router"; 4 4 + import { useAtom } from "jotai"; 5 5 + import * as React from "react"; 3 6 7 7 + import defaultpfp from "~/../public/favicon.png"; 8 8 + import { Header } from "~/components/Header"; 9 9 + import { 10 10 + ReusableTabRoute, 11 11 + useReusableTabScrollRestore, 12 12 + } from "~/components/ReusableTabRoute"; 13 13 + import { 14 14 + MdiCardsHeartOutline, 15 15 + MdiCommentOutline, 16 16 + MdiRepeat, 17 17 + UniversalPostRendererATURILoader, 18 18 + } from "~/components/UniversalPostRenderer"; 4 19 import { useAuth } from "~/providers/UnifiedAuthProvider"; 20 20 + import { 21 21 + constellationURLAtom, 22 22 + enableBitesAtom, 23 23 + imgCDNAtom, 24 24 + postInteractionsFiltersAtom, 25 25 + } from "~/utils/atoms"; 26 26 + import { 27 27 + useInfiniteQueryAuthorFeed, 28 28 + useQueryConstellation, 29 29 + useQueryIdentity, 30 30 + useQueryProfile, 31 31 + yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks, 32 32 + } from "~/utils/useQuery"; 5 33 6 6 - const HANDLE_DID_CACHE_TIMEOUT = 60 * 60 * 1000; // 1 hour 34 34 + import { FollowButton, Mutual } from "./profile.$did"; 35 35 + 36 36 + export function NotificationsComponent() { 37 37 + return ( 38 38 + <div className=""> 39 39 + <Header 40 40 + title={`Notifications`} 41 41 + backButtonCallback={() => { 42 42 + if (window.history.length > 1) { 43 43 + window.history.back(); 44 44 + } else { 45 45 + window.location.assign("/"); 46 46 + } 47 47 + }} 48 48 + bottomBorderDisabled={true} 49 49 + /> 50 50 + <NotificationsTabs /> 51 51 + </div> 52 52 + ); 53 53 + } 7 54 8 55 export const Route = createFileRoute("/notifications")({ 9 56 component: NotificationsComponent, 10 57 }); 11 58 12 12 - function NotificationsComponent() { 13 13 - // /*mass comment*/ console.log("NotificationsComponent render"); 14 14 - const { agent, status } = useAuth(); 15 15 - const authed = !!agent?.did; 16 16 - const authLoading = status === "loading"; 17 17 - const [did, setDid] = useState<string | null>(null); 18 18 - const [resolving, setResolving] = useState(false); 19 19 - const [error, setError] = useState<string | null>(null); 20 20 - const [responses, setResponses] = useState<any[]>([null, null, null]); 21 21 - const [loading, setLoading] = useState(false); 22 22 - const inputRef = useRef<HTMLInputElement>(null); 59 59 + export default function NotificationsTabs() { 60 60 + const [bitesEnabled] = useAtom(enableBitesAtom); 61 61 + return ( 62 62 + <ReusableTabRoute 63 63 + route={`Notifications`} 64 64 + tabs={{ 65 65 + Mentions: <MentionsTab />, 66 66 + Follows: <FollowsTab />, 67 67 + "Post Interactions": <PostInteractionsTab />, 68 68 + ...bitesEnabled ? { 69 69 + Bites: <BitesTab />, 70 70 + } : {} 71 71 + }} 72 72 + /> 73 73 + ); 74 74 + } 75 75 + 76 76 + function MentionsTab() { 77 77 + const { agent } = useAuth(); 78 78 + const [constellationurl] = useAtom(constellationURLAtom); 79 79 + const infinitequeryresults = useInfiniteQuery({ 80 80 + ...yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks( 81 81 + { 82 82 + constellation: constellationurl, 83 83 + method: "/links", 84 84 + target: agent?.did, 85 85 + collection: "app.bsky.feed.post", 86 86 + path: ".facets[app.bsky.richtext.facet].features[app.bsky.richtext.facet#mention].did", 87 87 + } 88 88 + ), 89 89 + enabled: !!agent?.did, 90 90 + }); 91 91 + 92 92 + const { 93 93 + data: infiniteMentionsData, 94 94 + fetchNextPage, 95 95 + hasNextPage, 96 96 + isFetchingNextPage, 97 97 + isLoading, 98 98 + isError, 99 99 + error, 100 100 + } = infinitequeryresults; 101 101 + 102 102 + const mentionsAturis = React.useMemo(() => { 103 103 + // Get all replies from the standard infinite query 104 104 + return ( 105 105 + infiniteMentionsData?.pages.flatMap( 106 106 + (page) => 107 107 + page?.linking_records.map( 108 108 + (r) => `at://${r.did}/${r.collection}/${r.rkey}` 109 109 + ) ?? [] 110 110 + ) ?? [] 111 111 + ); 112 112 + }, [infiniteMentionsData]); 23 113 24 24 - useEffect(() => { 25 25 - if (authLoading) return; 26 26 - if (authed && agent && agent.assertDid) { 27 27 - setDid(agent.assertDid); 28 28 - } 29 29 - }, [authed, agent, authLoading]); 114 114 + useReusableTabScrollRestore("Notifications"); 30 115 31 31 - async function handleSubmit() { 32 32 - // /*mass comment*/ console.log("handleSubmit called"); 33 33 - setError(null); 34 34 - setResponses([null, null, null]); 35 35 - const value = inputRef.current?.value?.trim() || ""; 36 36 - if (!value) return; 37 37 - if (value.startsWith("did:")) { 38 38 - setDid(value); 39 39 - setError(null); 40 40 - return; 41 41 - } 42 42 - setResolving(true); 43 43 - const cacheKey = `handleDid:${value}`; 44 44 - const now = Date.now(); 45 45 - const cached = undefined // await get(cacheKey); 46 46 - // if ( 47 47 - // cached && 48 48 - // cached.value && 49 49 - // cached.time && 50 50 - // now - cached.time < HANDLE_DID_CACHE_TIMEOUT 51 51 - // ) { 52 52 - // try { 53 53 - // const data = JSON.parse(cached.value); 54 54 - // setDid(data.did); 55 55 - // setResolving(false); 56 56 - // return; 57 57 - // } catch {} 58 58 - // } 59 59 - try { 60 60 - const url = `https://free-fly-24.deno.dev/?handle=${encodeURIComponent(value)}`; 61 61 - const res = await fetch(url); 62 62 - if (!res.ok) throw new Error("Failed to resolve handle"); 63 63 - const data = await res.json(); 64 64 - //set(cacheKey, JSON.stringify(data)); 65 65 - setDid(data.did); 66 66 - } catch (e: any) { 67 67 - setError("Failed to resolve handle: " + (e?.message || e)); 68 68 - } finally { 69 69 - setResolving(false); 70 70 - } 71 71 - } 116 116 + if (isLoading) return <LoadingState text="Loading mentions..." />; 117 117 + if (isError) return <ErrorState error={error} />; 118 118 + 119 119 + if (!mentionsAturis?.length) return <EmptyState text="No mentions yet." />; 120 120 + 121 121 + return ( 122 122 + <> 123 123 + {mentionsAturis.map((m) => ( 124 124 + <UniversalPostRendererATURILoader key={m} atUri={m} /> 125 125 + ))} 72 126 73 73 - useEffect(() => { 74 74 - if (!did) return; 75 75 - setLoading(true); 76 76 - setError(null); 77 77 - const urls = [ 78 78 - `https://constellation.microcosm.blue/links?target=${encodeURIComponent(did)}&collection=app.bsky.feed.post&path=.facets[app.bsky.richtext.facet].features[app.bsky.richtext.facet%23mention].did`, 79 79 - `https://constellation.microcosm.blue/links?target=${encodeURIComponent(did)}&collection=app.bsky.feed.post&path=.facets[].features[app.bsky.richtext.facet%23mention].did`, 80 80 - `https://constellation.microcosm.blue/links?target=${encodeURIComponent(did)}&collection=app.bsky.graph.follow&path=.subject`, 81 81 - ]; 82 82 - let ignore = false; 83 83 - Promise.all( 84 84 - urls.map(async (url) => { 85 85 - try { 86 86 - const r = await fetch(url); 87 87 - if (!r.ok) throw new Error("Failed to fetch"); 88 88 - const text = await r.text(); 89 89 - if (!text) return null; 90 90 - try { 91 91 - return JSON.parse(text); 92 92 - } catch { 93 93 - return null; 127 127 + {hasNextPage && ( 128 128 + <button 129 129 + onClick={() => fetchNextPage()} 130 130 + disabled={isFetchingNextPage} 131 131 + 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" 132 132 + > 133 133 + {isFetchingNextPage ? "Loading..." : "Load More"} 134 134 + </button> 135 135 + )} 136 136 + </> 137 137 + ); 138 138 + } 139 139 + 140 140 + export function FollowsTab({did}:{did?:string}) { 141 141 + const { agent } = useAuth(); 142 142 + const userdidunsafe = did ?? agent?.did; 143 143 + const { data: identity} = useQueryIdentity(userdidunsafe); 144 144 + const userdid = identity?.did; 145 145 + 146 146 + const [constellationurl] = useAtom(constellationURLAtom); 147 147 + const infinitequeryresults = useInfiniteQuery({ 148 148 + ...yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks( 149 149 + { 150 150 + constellation: constellationurl, 151 151 + method: "/links", 152 152 + target: userdid, 153 153 + collection: "app.bsky.graph.follow", 154 154 + path: ".subject", 155 155 + } 156 156 + ), 157 157 + enabled: !!userdid, 158 158 + }); 159 159 + 160 160 + const { 161 161 + data: infiniteFollowsData, 162 162 + fetchNextPage, 163 163 + hasNextPage, 164 164 + isFetchingNextPage, 165 165 + isLoading, 166 166 + isError, 167 167 + error, 168 168 + } = infinitequeryresults; 169 169 + 170 170 + const followsAturis = React.useMemo(() => { 171 171 + // Get all replies from the standard infinite query 172 172 + return ( 173 173 + infiniteFollowsData?.pages.flatMap( 174 174 + (page) => 175 175 + page?.linking_records.map( 176 176 + (r) => `at://${r.did}/${r.collection}/${r.rkey}` 177 177 + ) ?? [] 178 178 + ) ?? [] 179 179 + ); 180 180 + }, [infiniteFollowsData]); 181 181 + 182 182 + useReusableTabScrollRestore("Notifications"); 183 183 + 184 184 + if (isLoading) return <LoadingState text="Loading follows..." />; 185 185 + if (isError) return <ErrorState error={error} />; 186 186 + 187 187 + if (!followsAturis?.length) return <EmptyState text="No follows yet." />; 188 188 + 189 189 + return ( 190 190 + <> 191 191 + {followsAturis.map((m) => ( 192 192 + <NotificationItem key={m} notification={m} /> 193 193 + ))} 194 194 + 195 195 + {hasNextPage && ( 196 196 + <button 197 197 + onClick={() => fetchNextPage()} 198 198 + disabled={isFetchingNextPage} 199 199 + 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" 200 200 + > 201 201 + {isFetchingNextPage ? "Loading..." : "Load More"} 202 202 + </button> 203 203 + )} 204 204 + </> 205 205 + ); 206 206 + } 207 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 + 278 278 + function PostInteractionsTab() { 279 279 + const { agent } = useAuth(); 280 280 + const { data: identity } = useQueryIdentity(agent?.did); 281 281 + const queryClient = useQueryClient(); 282 282 + const { 283 283 + data: postsData, 284 284 + fetchNextPage, 285 285 + hasNextPage, 286 286 + isFetchingNextPage, 287 287 + isLoading: arePostsLoading, 288 288 + } = useInfiniteQueryAuthorFeed(agent?.did, identity?.pds); 289 289 + 290 290 + React.useEffect(() => { 291 291 + if (postsData) { 292 292 + postsData.pages.forEach((page) => { 293 293 + page.records.forEach((record) => { 294 294 + if (!queryClient.getQueryData(["post", record.uri])) { 295 295 + queryClient.setQueryData(["post", record.uri], record); 94 296 } 95 95 - } catch (e: any) { 96 96 - return { error: e?.message || String(e) }; 97 97 - } 98 98 - }) 99 99 - ) 100 100 - .then((results) => { 101 101 - if (!ignore) setResponses(results); 102 102 - }) 103 103 - .catch((e) => { 104 104 - if (!ignore) 105 105 - setError("Failed to fetch notifications: " + (e?.message || e)); 106 106 - }) 107 107 - .finally(() => { 108 108 - if (!ignore) setLoading(false); 297 297 + }); 109 298 }); 110 110 - return () => { 111 111 - ignore = true; 112 112 - }; 113 113 - }, [did]); 299 299 + } 300 300 + }, [postsData, queryClient]); 301 301 + 302 302 + const posts = React.useMemo( 303 303 + () => postsData?.pages.flatMap((page) => page.records) ?? [], 304 304 + [postsData] 305 305 + ); 306 306 + 307 307 + useReusableTabScrollRestore("Notifications"); 308 308 + 309 309 + const [filters] = useAtom(postInteractionsFiltersAtom); 310 310 + const empty = (!filters.likes && !filters.quotes && !filters.replies && !filters.reposts); 114 311 115 312 return ( 116 116 - <div className="flex flex-col divide-y divide-gray-200 dark:divide-gray-800"> 117 117 - <div className="flex items-center gap-2 px-4 py-2 h-[52px] sticky top-0 bg-white dark:bg-gray-950 z-10 border-b border-gray-200 dark:border-gray-800"> 118 118 - <span className="text-xl font-bold ml-2">Notifications</span> 119 119 - {!authed && ( 120 120 - <div className="flex items-center gap-2"> 121 121 - <input 122 122 - type="text" 123 123 - placeholder="Enter handle or DID" 124 124 - ref={inputRef} 125 125 - className="ml-4 px-2 py-1 rounded border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100" 126 126 - style={{ minWidth: 220 }} 127 127 - disabled={resolving} 128 128 - /> 129 129 - <button 130 130 - type="button" 131 131 - className="px-3 py-1 rounded bg-blue-600 text-white font-semibold disabled:opacity-50" 132 132 - disabled={resolving} 133 133 - onClick={handleSubmit} 134 134 - > 135 135 - {resolving ? "Resolving..." : "Submit"} 136 136 - </button> 137 137 - </div> 138 138 - )} 313 313 + <> 314 314 + <PostInteractionsFilterChipBar /> 315 315 + {!empty && posts.map((m) => ( 316 316 + <PostInteractionsItem key={m.uri} uri={m.uri} /> 317 317 + ))} 318 318 + 319 319 + {hasNextPage && ( 320 320 + <button 321 321 + onClick={() => fetchNextPage()} 322 322 + disabled={isFetchingNextPage} 323 323 + 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" 324 324 + > 325 325 + {isFetchingNextPage ? "Loading..." : "Load More"} 326 326 + </button> 327 327 + )} 328 328 + </> 329 329 + ); 330 330 + } 331 331 + 332 332 + function PostInteractionsFilterChipBar() { 333 333 + const [filters, setFilters] = useAtom(postInteractionsFiltersAtom); 334 334 + // const empty = (!filters.likes && !filters.quotes && !filters.replies && !filters.reposts); 335 335 + 336 336 + // useEffect(() => { 337 337 + // if (empty) { 338 338 + // setFilters((prev) => ({ 339 339 + // ...prev, 340 340 + // likes: true, 341 341 + // })); 342 342 + // } 343 343 + // }, [ 344 344 + // empty, 345 345 + // setFilters, 346 346 + // ]); 347 347 + 348 348 + const toggle = (key: keyof typeof filters) => { 349 349 + setFilters((prev) => ({ 350 350 + ...prev, 351 351 + [key]: !prev[key], 352 352 + })); 353 353 + }; 354 354 + 355 355 + return ( 356 356 + <div className="flex flex-row flex-wrap gap-2 px-4 pt-4"> 357 357 + <Chip 358 358 + state={filters.likes} 359 359 + text="Likes" 360 360 + onClick={() => toggle("likes")} 361 361 + /> 362 362 + <Chip 363 363 + state={filters.reposts} 364 364 + text="Reposts" 365 365 + onClick={() => toggle("reposts")} 366 366 + /> 367 367 + <Chip 368 368 + state={filters.replies} 369 369 + text="Replies" 370 370 + onClick={() => toggle("replies")} 371 371 + /> 372 372 + <Chip 373 373 + state={filters.quotes} 374 374 + text="Quotes" 375 375 + onClick={() => toggle("quotes")} 376 376 + /> 377 377 + <Chip 378 378 + state={filters.showAll} 379 379 + text="Show All Metrics" 380 380 + onClick={() => toggle("showAll")} 381 381 + /> 382 382 + </div> 383 383 + ); 384 384 + } 385 385 + 386 386 + export function Chip({ 387 387 + state, 388 388 + text, 389 389 + onClick, 390 390 + }: { 391 391 + state: boolean; 392 392 + text: string; 393 393 + onClick: React.MouseEventHandler<HTMLButtonElement>; 394 394 + }) { 395 395 + return ( 396 396 + <button 397 397 + onClick={onClick} 398 398 + className={`relative inline-flex items-center px-3 py-1.5 rounded-lg text-sm font-medium transition-all 399 399 + ${ 400 400 + state 401 401 + ? "bg-primary/20 text-primary bg-gray-200 dark:bg-gray-800 border border-transparent" 402 402 + : "bg-surface-container-low text-on-surface-variant border border-outline" 403 403 + } 404 404 + hover:bg-primary/30 active:scale-[0.97] 405 405 + dark:border-outline-variant 406 406 + `} 407 407 + > 408 408 + {state && ( 409 409 + <IconMdiCheck 410 410 + className="mr-1.5 inline-block w-4 h-4 rounded-full bg-primary" 411 411 + aria-hidden 412 412 + /> 413 413 + )} 414 414 + {text} 415 415 + </button> 416 416 + ); 417 417 + } 418 418 + 419 419 + function PostInteractionsItem({ uri }: { uri: string }) { 420 420 + const [filters] = useAtom(postInteractionsFiltersAtom); 421 421 + const { data: links } = useQueryConstellation({ 422 422 + method: "/links/all", 423 423 + target: uri, 424 424 + }); 425 425 + 426 426 + const likes = 427 427 + links?.links?.["app.bsky.feed.like"]?.[".subject.uri"]?.records || 0; 428 428 + const replies = 429 429 + links?.links?.["app.bsky.feed.post"]?.[".reply.parent.uri"]?.records || 0; 430 430 + const reposts = 431 431 + links?.links?.["app.bsky.feed.repost"]?.[".subject.uri"]?.records || 0; 432 432 + const quotes1 = 433 433 + links?.links?.["app.bsky.feed.post"]?.[".embed.record.uri"]?.records || 0; 434 434 + const quotes2 = 435 435 + links?.links?.["app.bsky.feed.post"]?.[".embed.record.record.uri"] 436 436 + ?.records || 0; 437 437 + const quotes = quotes1 + quotes2; 438 438 + 439 439 + const all = likes + replies + reposts + quotes; 440 440 + 441 441 + //const failLikes = filters.likes && likes < 1; 442 442 + //const failReposts = filters.reposts && reposts < 1; 443 443 + //const failReplies = filters.replies && replies < 1; 444 444 + //const failQuotes = filters.quotes && quotes < 1; 445 445 + 446 446 + const showLikes = filters.showAll || filters.likes 447 447 + const showReposts = filters.showAll || filters.reposts 448 448 + const showReplies = filters.showAll || filters.replies 449 449 + const showQuotes = filters.showAll || filters.quotes 450 450 + 451 451 + //const showNone = !showLikes && !showReposts && !showReplies && !showQuotes; 452 452 + 453 453 + //const fail = failLikes || failReposts || failReplies || failQuotes || showNone; 454 454 + 455 455 + const matchesLikes = filters.likes && likes > 0; 456 456 + const matchesReposts = filters.reposts && reposts > 0; 457 457 + const matchesReplies = filters.replies && replies > 0; 458 458 + const matchesQuotes = filters.quotes && quotes > 0; 459 459 + 460 460 + const matchesAnything = 461 461 + // filters.showAll || 462 462 + matchesLikes || 463 463 + matchesReposts || 464 464 + matchesReplies || 465 465 + matchesQuotes; 466 466 + 467 467 + if (!matchesAnything) return null; 468 468 + 469 469 + //if (fail) return; 470 470 + 471 471 + return ( 472 472 + <div className="flex flex-col"> 473 473 + {/* <span>fail likes {failLikes ? "true" : "false"}</span> 474 474 + <span>fail repost {failReposts ? "true" : "false"}</span> 475 475 + <span>fail reply {failReplies ? "true" : "false"}</span> 476 476 + <span>fail qupte {failQuotes ? "true" : "false"}</span> */} 477 477 + <div className="border rounded-xl mx-4 mt-4 overflow-hidden"> 478 478 + <UniversalPostRendererATURILoader 479 479 + isQuote 480 480 + key={uri} 481 481 + atUri={uri} 482 482 + nopics={true} 483 483 + concise={true} 484 484 + /> 485 485 + <div className="flex flex-col divide-x"> 486 486 + {showLikes &&(<InteractionsButton 487 487 + type={"like"} 488 488 + uri={uri} 489 489 + count={likes} 490 490 + />)} 491 491 + {showReposts && (<InteractionsButton 492 492 + type={"repost"} 493 493 + uri={uri} 494 494 + count={reposts} 495 495 + />)} 496 496 + {showReplies && (<InteractionsButton 497 497 + type={"reply"} 498 498 + uri={uri} 499 499 + count={replies} 500 500 + />)} 501 501 + {showQuotes && (<InteractionsButton 502 502 + type={"quote"} 503 503 + uri={uri} 504 504 + count={quotes} 505 505 + />)} 506 506 + {!all && ( 507 507 + <div className="text-center text-gray-500 dark:text-gray-400 pb-3 pt-2 border-t"> 508 508 + No interactions yet. 509 509 + </div> 510 510 + )} 511 511 + </div> 139 512 </div> 140 140 - {error && <div className="p-4 text-red-500">{error}</div>} 141 141 - {loading && ( 142 142 - <div className="p-4 text-gray-500">Loading notifications...</div> 513 513 + </div> 514 514 + ); 515 515 + } 516 516 + 517 517 + function InteractionsButton({ 518 518 + type, 519 519 + uri, 520 520 + count, 521 521 + }: { 522 522 + type: "reply" | "repost" | "like" | "quote"; 523 523 + uri: string; 524 524 + count: number; 525 525 + }) { 526 526 + if (!count) return <></>; 527 527 + const aturi = new AtUri(uri); 528 528 + return ( 529 529 + <Link 530 530 + to={ 531 531 + `/profile/$did/post/$rkey` + 532 532 + (type === "like" 533 533 + ? "/liked-by" 534 534 + : type === "repost" 535 535 + ? "/reposted-by" 536 536 + : type === "quote" 537 537 + ? "/quotes" 538 538 + : "") 539 539 + } 540 540 + params={{ 541 541 + did: aturi.host, 542 542 + rkey: aturi.rkey, 543 543 + }} 544 544 + className="flex-1 border-t py-2 px-4 flex flex-row items-center gap-2 transition-colors hover:bg-gray-100 hover:dark:bg-gray-800" 545 545 + > 546 546 + {type === "like" ? ( 547 547 + <MdiCardsHeartOutline height={22} width={22} /> 548 548 + ) : type === "repost" ? ( 549 549 + <MdiRepeat height={22} width={22} /> 550 550 + ) : type === "reply" ? ( 551 551 + <MdiCommentOutline height={22} width={22} /> 552 552 + ) : type === "quote" ? ( 553 553 + <IconMdiMessageReplyTextOutline 554 554 + height={22} 555 555 + width={22} 556 556 + className=" text-gray-400" 557 557 + /> 558 558 + ) : ( 559 559 + <></> 560 560 + )} 561 561 + {type === "like" 562 562 + ? "likes" 563 563 + : type === "reply" 564 564 + ? "replies" 565 565 + : type === "quote" 566 566 + ? "quotes" 567 567 + : type === "repost" 568 568 + ? "reposts" 569 569 + : ""} 570 570 + <div className="flex-1" /> {count} 571 571 + </Link> 572 572 + ); 573 573 + } 574 574 + 575 575 + export function NotificationItem({ notification, labeler }: { notification: string, labeler?: boolean }) { 576 576 + const aturi = new AtUri(notification); 577 577 + const bite = aturi.collection === "net.wafrn.feed.bite"; 578 578 + const navigate = useNavigate(); 579 579 + const { data: identity } = useQueryIdentity(aturi.host); 580 580 + const resolvedDid = identity?.did; 581 581 + const profileUri = resolvedDid 582 582 + ? `at://${resolvedDid}/app.bsky.actor.profile/self` 583 583 + : undefined; 584 584 + const { data: profileRecord } = useQueryProfile(profileUri); 585 585 + const profile = profileRecord?.value; 586 586 + 587 587 + const [imgcdn] = useAtom(imgCDNAtom); 588 588 + 589 589 + function getAvatarUrl(p: typeof profile) { 590 590 + const link = p?.avatar?.ref?.["$link"]; 591 591 + if (!link || !resolvedDid) return null; 592 592 + return `https://${imgcdn}/img/avatar/plain/${resolvedDid}/${link}@jpeg`; 593 593 + } 594 594 + 595 595 + const avatar = getAvatarUrl(profile); 596 596 + 597 597 + return ( 598 598 + <div 599 599 + className="flex items-center p-4 cursor-pointer gap-3 justify-around border-b flex-row" 600 600 + onClick={() => 601 601 + aturi && 602 602 + navigate({ 603 603 + to: "/profile/$did", 604 604 + params: { did: aturi.host }, 605 605 + }) 606 606 + } 607 607 + > 608 608 + {/* <div> 609 609 + {aturi.collection === "app.bsky.graph.follow" ? ( 610 610 + <IconMdiAccountPlus /> 611 611 + ) : aturi.collection === "app.bsky.feed.like" ? ( 612 612 + <MdiCardsHeart /> 613 613 + ) : ( 614 614 + <></> 615 615 + )} 616 616 + </div> */} 617 617 + {profile ? ( 618 618 + <img 619 619 + src={avatar || defaultpfp} 620 620 + alt={identity?.handle} 621 621 + className={`w-10 h-10 ${labeler ? "rounded-md" : "rounded-full"}`} 622 622 + /> 623 623 + ) : ( 624 624 + <div className="w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-700" /> 143 625 )} 144 144 - {!loading && 145 145 - !error && 146 146 - responses.map((resp, i) => ( 147 147 - <div key={i} className="p-4"> 148 148 - <div className="font-bold mb-2">Query {i + 1}</div> 149 149 - {!resp || 150 150 - (typeof resp === "object" && Object.keys(resp).length === 0) || 151 151 - (Array.isArray(resp) && resp.length === 0) ? ( 152 152 - <div className="text-gray-500">No notifications found.</div> 153 153 - ) : ( 154 154 - <pre 155 155 - style={{ 156 156 - background: "#222", 157 157 - color: "#eee", 158 158 - borderRadius: 8, 159 159 - padding: 12, 160 160 - fontSize: 13, 161 161 - overflowX: "auto", 162 162 - }} 163 163 - > 164 164 - {JSON.stringify(resp, null, 2)} 165 165 - </pre> 166 166 - )} 167 167 - </div> 168 168 - ))} 169 169 - {/* <div className="p-4"> yo this project sucks, ill remake it some other time, like cmon inputting anything into the textbox makes it break. ive warned you</div> */} 626 626 + <div className="flex flex-col min-w-0"> 627 627 + <div className="flex flex-row gap-2 overflow-hidden text-ellipsis whitespace-nowrap min-w-0"> 628 628 + <span className="font-medium text-gray-900 dark:text-gray-100 truncate"> 629 629 + {profile?.displayName || identity?.handle || "Someone"} 630 630 + </span> 631 631 + <span className="text-gray-700 dark:text-gray-400 truncate"> 632 632 + @{identity?.handle} 633 633 + </span> 634 634 + </div> 635 635 + <div className="flex flex-row gap-2"> 636 636 + {identity?.did && <Mutual targetdidorhandle={identity?.did} />} 637 637 + {/* <span className="text-sm text-gray-600 dark:text-gray-400"> 638 638 + followed you 639 639 + </span> */} 640 640 + </div> 641 641 + </div> 642 642 + <div className="flex-1" /> 643 643 + {identity?.did && <FollowButton targetdidorhandle={identity?.did} />} 170 644 </div> 171 645 ); 172 646 } 647 647 + 648 648 + export const EmptyState = ({ text }: { text: string }) => ( 649 649 + <div className="py-10 text-center text-gray-500 dark:text-gray-400"> 650 650 + {text} 651 651 + </div> 652 652 + ); 653 653 + 654 654 + export const LoadingState = ({ text }: { text: string }) => ( 655 655 + <div className="py-10 text-center text-gray-500 dark:text-gray-400 italic"> 656 656 + {text} 657 657 + </div> 658 658 + ); 659 659 + 660 660 + export const ErrorState = ({ error }: { error: unknown }) => ( 661 661 + <div className="py-10 text-center text-red-600 dark:text-red-400"> 662 662 + Error: {(error as Error)?.message || "Something went wrong."} 663 663 + </div> 664 664 + );

+91

src/routes/profile.$did/feed.$rkey.tsx

··· 1 1 + import * as ATPAPI from "@atproto/api"; 2 2 + import { AtUri } from "@atproto/api"; 3 3 + import { createFileRoute } from "@tanstack/react-router"; 4 4 + import { useAtom } from "jotai"; 5 5 + 6 6 + import { Header } from "~/components/Header"; 7 7 + import { InfiniteCustomFeed } from "~/components/InfiniteCustomFeed"; 8 8 + import { useAuth } from "~/providers/UnifiedAuthProvider"; 9 9 + import { quickAuthAtom } from "~/utils/atoms"; 10 10 + import { useQueryArbitrary, useQueryIdentity } from "~/utils/useQuery"; 11 11 + 12 12 + export const Route = createFileRoute("/profile/$did/feed/$rkey")({ 13 13 + component: FeedRoute, 14 14 + }); 15 15 + 16 16 + // todo: scroll restoration 17 17 + function FeedRoute() { 18 18 + const { did, rkey } = Route.useParams(); 19 19 + const { agent, status } = useAuth(); 20 20 + const { data: identitydata } = useQueryIdentity(did); 21 21 + const { data: identity } = useQueryIdentity(agent?.did); 22 22 + const uri = `at://${identitydata?.did || did}/app.bsky.feed.generator/${rkey}`; 23 23 + const aturi = new AtUri(uri); 24 24 + const { data: feeddata } = useQueryArbitrary(uri); 25 25 + 26 26 + const [quickAuth, setQuickAuth] = useAtom(quickAuthAtom); 27 27 + const isAuthRestoring = quickAuth ? status === "loading" : false; 28 28 + 29 29 + const authed = status === "signedIn"; 30 30 + 31 31 + const feedServiceDid = !isAuthRestoring 32 32 + ? ((feeddata?.value as any)?.did as string | undefined) 33 33 + : undefined; 34 34 + 35 35 + // const { 36 36 + // data: feedData, 37 37 + // isLoading: isFeedLoading, 38 38 + // error: feedError, 39 39 + // } = useQueryFeedSkeleton({ 40 40 + // feedUri: selectedFeed!, 41 41 + // agent: agent ?? undefined, 42 42 + // isAuthed: authed ?? false, 43 43 + // pdsUrl: identity?.pds, 44 44 + // feedServiceDid: feedServiceDid, 45 45 + // }); 46 46 + 47 47 + // const feed = feedData?.feed || []; 48 48 + 49 49 + const isReadyForAuthedFeed = 50 50 + !isAuthRestoring && authed && agent && identity?.pds && feedServiceDid; 51 51 + const isReadyForUnauthedFeed = !isAuthRestoring && !authed; 52 52 + 53 53 + const feed: ATPAPI.AppBskyFeedGenerator.Record | undefined = feeddata?.value; 54 54 + 55 55 + const web = feedServiceDid?.replace(/^did:web:/, "") || ""; 56 56 + 57 57 + return ( 58 58 + <> 59 59 + <Header 60 60 + title={feed?.displayName || aturi.rkey} 61 61 + backButtonCallback={() => { 62 62 + if (window.history.length > 1) { 63 63 + window.history.back(); 64 64 + } else { 65 65 + window.location.assign("/"); 66 66 + } 67 67 + }} 68 68 + /> 69 69 + 70 70 + {isAuthRestoring || 71 71 + (authed && (!identity?.pds || !feedServiceDid) && ( 72 72 + <div className="p-4 text-center text-gray-500"> 73 73 + Preparing your feed... 74 74 + </div> 75 75 + ))} 76 76 + 77 77 + {!isAuthRestoring && (isReadyForAuthedFeed || isReadyForUnauthedFeed) ? ( 78 78 + <InfiniteCustomFeed 79 79 + key={uri} 80 80 + feedUri={uri} 81 81 + pdsUrl={identity?.pds} 82 82 + feedServiceDid={feedServiceDid} 83 83 + authedOverride={!authed && true || undefined} 84 84 + unauthedfeedurl={!authed && web || undefined} 85 85 + /> 86 86 + ) : ( 87 87 + <div className="p-4 text-center text-gray-500">Loading.......</div> 88 88 + )} 89 89 + </> 90 90 + ); 91 91 + }

+30

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

··· 1 1 + import { createFileRoute } from "@tanstack/react-router"; 2 2 + 3 3 + import { Header } from "~/components/Header"; 4 4 + 5 5 + import { FollowsTab } from "../notifications"; 6 6 + 7 7 + export const Route = createFileRoute("/profile/$did/followers")({ 8 8 + component: RouteComponent, 9 9 + }); 10 10 + 11 11 + // todo: scroll restoration 12 12 + function RouteComponent() { 13 13 + const params = Route.useParams(); 14 14 + 15 15 + return ( 16 16 + <div> 17 17 + <Header 18 18 + title={"Followers"} 19 19 + backButtonCallback={() => { 20 20 + if (window.history.length > 1) { 21 21 + window.history.back(); 22 22 + } else { 23 23 + window.location.assign("/"); 24 24 + } 25 25 + }} 26 26 + /> 27 27 + <FollowsTab did={params.did} /> 28 28 + </div> 29 29 + ); 30 30 + }

+79

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

··· 1 1 + import * as ATPAPI from "@atproto/api" 2 2 + import { createFileRoute } from '@tanstack/react-router' 3 3 + import React from 'react'; 4 4 + 5 5 + import { Header } from '~/components/Header'; 6 6 + import { useReusableTabScrollRestore } from '~/components/ReusableTabRoute'; 7 7 + import { useInfiniteQueryAuthorFeed, useQueryIdentity } from '~/utils/useQuery'; 8 8 + 9 9 + import { EmptyState, ErrorState, LoadingState, NotificationItem } from '../notifications'; 10 10 + 11 11 + export const Route = createFileRoute('/profile/$did/follows')({ 12 12 + component: RouteComponent, 13 13 + }) 14 14 + 15 15 + // todo: scroll restoration 16 16 + function RouteComponent() { 17 17 + const params = Route.useParams(); 18 18 + return ( 19 19 + <div> 20 20 + <Header 21 21 + title={"Follows"} 22 22 + backButtonCallback={() => { 23 23 + if (window.history.length > 1) { 24 24 + window.history.back(); 25 25 + } else { 26 26 + window.location.assign("/"); 27 27 + } 28 28 + }} 29 29 + /> 30 30 + <Follows did={params.did}/> 31 31 + </div> 32 32 + ); 33 33 + } 34 34 + 35 35 + function Follows({did}:{did:string}) { 36 36 + const {data: identity} = useQueryIdentity(did); 37 37 + const infinitequeryresults = useInfiniteQueryAuthorFeed(identity?.did, identity?.pds, "app.bsky.graph.follow"); 38 38 + 39 39 + const { 40 40 + data: infiniteFollowsData, 41 41 + fetchNextPage, 42 42 + hasNextPage, 43 43 + isFetchingNextPage, 44 44 + isLoading, 45 45 + isError, 46 46 + error, 47 47 + } = infinitequeryresults; 48 48 + 49 49 + const followsAturis = React.useMemo( 50 50 + () => infiniteFollowsData?.pages.flatMap((page) => page.records) ?? [], 51 51 + [infiniteFollowsData] 52 52 + ); 53 53 + 54 54 + useReusableTabScrollRestore("Notifications"); 55 55 + 56 56 + if (isLoading) return <LoadingState text="Loading follows..." />; 57 57 + if (isError) return <ErrorState error={error} />; 58 58 + 59 59 + if (!followsAturis?.length) return <EmptyState text="No follows yet." />; 60 60 + 61 61 + return ( 62 62 + <> 63 63 + {followsAturis.map((m) => { 64 64 + const record = m.value as unknown as ATPAPI.AppBskyGraphFollow.Record; 65 65 + return <NotificationItem key={record.subject} notification={record.subject} /> 66 66 + })} 67 67 + 68 68 + {hasNextPage && ( 69 69 + <button 70 70 + onClick={() => fetchNextPage()} 71 71 + disabled={isFetchingNextPage} 72 72 + 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" 73 73 + > 74 74 + {isFetchingNextPage ? "Loading..." : "Load More"} 75 75 + </button> 76 76 + )} 77 77 + </> 78 78 + ); 79 79 + }

+1005 -125

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

··· 1 1 + import { Agent, RichText } from "@atproto/api"; 2 2 + import * as ATPAPI from "@atproto/api"; 3 3 + import { TID } from "@atproto/common-web"; 1 4 import { useQueryClient } from "@tanstack/react-query"; 2 2 - import { createFileRoute } from "@tanstack/react-router"; 3 3 - import React from "react"; 5 5 + import { createFileRoute, Link, useNavigate } from "@tanstack/react-router"; 6 6 + import { useAtom } from "jotai"; 7 7 + import React, { type ReactNode, useEffect, useState } from "react"; 4 8 9 9 + import defaultpfp from "~/../public/favicon.png"; 5 10 import { Header } from "~/components/Header"; 6 6 - import { UniversalPostRendererATURILoader } from "~/components/UniversalPostRenderer"; 11 11 + import { 12 12 + ReusableTabRoute, 13 13 + useReusableTabScrollRestore, 14 14 + } from "~/components/ReusableTabRoute"; 15 15 + import { 16 16 + renderTextWithFacets, 17 17 + UniversalPostRendererATURILoader, 18 18 + } from "~/components/UniversalPostRenderer"; 7 19 import { useAuth } from "~/providers/UnifiedAuthProvider"; 8 8 - import { toggleFollow, useGetFollowState } from "~/utils/followState"; 20 20 + import { enableBitesAtom, imgCDNAtom, profileChipsAtom } from "~/utils/atoms"; 21 21 + import { 22 22 + toggleFollow, 23 23 + useGetFollowState, 24 24 + useGetOneToOneState, 25 25 + } from "~/utils/followState"; 26 26 + import { useFastSetLikesFromFeed } from "~/utils/likeMutationQueue"; 9 27 import { 10 28 useInfiniteQueryAuthorFeed, 29 29 + useQueryArbitrary, 30 30 + useQueryConstellation, 31 31 + useQueryConstellationLinksCountDistinctDids, 11 32 useQueryIdentity, 12 33 useQueryProfile, 13 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"; 14 39 15 40 export const Route = createFileRoute("/profile/$did/")({ 16 41 component: ProfileComponent, ··· 19 44 function ProfileComponent() { 20 45 // booo bad this is not always the did it might be a handle, use identity.did instead 21 46 const { did } = Route.useParams(); 47 47 + const { agent } = useAuth(); 48 48 + const navigate = useNavigate(); 22 49 const queryClient = useQueryClient(); 23 23 - const { agent } = useAuth(); 24 50 const { 25 51 data: identity, 26 52 isLoading: isIdentityLoading, 27 53 error: identityError, 28 54 } = useQueryIdentity(did); 29 55 30 30 - const followRecords = useGetFollowState({ 31 31 - target: identity?.did || did, 32 32 - user: agent?.did, 33 33 - }); 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; 34 69 35 70 const resolvedDid = did.startsWith("did:") ? did : identity?.did; 36 71 const resolvedHandle = did.startsWith("did:") ? identity?.handle : did; ··· 42 77 const { data: profileRecord } = useQueryProfile(profileUri); 43 78 const profile = profileRecord?.value; 44 79 45 45 - const { 46 46 - data: postsData, 47 47 - fetchNextPage, 48 48 - hasNextPage, 49 49 - isFetchingNextPage, 50 50 - isLoading: arePostsLoading, 51 51 - } = useInfiniteQueryAuthorFeed(resolvedDid, pdsUrl); 52 52 - 53 53 - React.useEffect(() => { 54 54 - if (postsData) { 55 55 - postsData.pages.forEach((page) => { 56 56 - page.records.forEach((record) => { 57 57 - if (!queryClient.getQueryData(["post", record.uri])) { 58 58 - queryClient.setQueryData(["post", record.uri], record); 59 59 - } 60 60 - }); 61 61 - }); 62 62 - } 63 63 - }, [postsData, queryClient]); 64 64 - 65 65 - const posts = React.useMemo( 66 66 - () => postsData?.pages.flatMap((page) => page.records) ?? [], 67 67 - [postsData] 68 68 - ); 80 80 + const [imgcdn] = useAtom(imgCDNAtom); 69 81 70 82 function getAvatarUrl(p: typeof profile) { 71 83 const link = p?.avatar?.ref?.["$link"]; 72 84 if (!link || !resolvedDid) return null; 73 73 - return `https://cdn.bsky.app/img/avatar/plain/${resolvedDid}/${link}@jpeg`; 85 85 + return `https://${imgcdn}/img/avatar/plain/${resolvedDid}/${link}@jpeg`; 74 86 } 75 87 function getBannerUrl(p: typeof profile) { 76 88 const link = p?.banner?.ref?.["$link"]; 77 89 if (!link || !resolvedDid) return null; 78 78 - return `https://cdn.bsky.app/img/banner/plain/${resolvedDid}/${link}@jpeg`; 90 90 + return `https://${imgcdn}/img/banner/plain/${resolvedDid}/${link}@jpeg`; 79 91 } 80 92 81 93 const displayName = ··· 83 95 const handle = resolvedHandle ? `@${resolvedHandle}` : resolvedDid || did; 84 96 const description = profile?.description || ""; 85 97 86 86 - if (isIdentityLoading) { 87 87 - return ( 88 88 - <div className="p-4 text-center text-gray-500">Resolving profile...</div> 89 89 - ); 90 90 - } 98 98 + const isReady = !!resolvedDid && !isIdentityLoading && !!profileRecord; 91 99 92 92 - if (identityError) { 93 93 - return ( 94 94 - <div className="p-4 text-center text-red-500"> 95 95 - Error: {identityError.message} 96 96 - </div> 97 97 - ); 98 98 - } 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 + ); 99 110 100 100 - if (!resolvedDid) { 101 101 - return ( 102 102 - <div className="p-4 text-center text-gray-500">Profile not found.</div> 103 103 - ); 104 104 - } 111 111 + const followercount = resultwhateversure?.data?.total; 105 112 106 113 return ( 107 107 - <> 114 114 + <div className=""> 108 115 <Header 109 116 title={`Profile`} 110 117 backButtonCallback={() => { ··· 114 121 window.location.assign("/"); 115 122 } 116 123 }} 124 124 + bottomBorderDisabled={true} 117 125 /> 118 126 {/* <div className="flex gap-2 px-4 py-2 h-[52px] sticky top-0 bg-white dark:bg-gray-950 z-10 border-b border-gray-200 dark:border-gray-700"> 119 127 <Link ··· 148 156 149 157 {/* Avatar (PFP) */} 150 158 <div className="absolute left-[16px] top-[100px] "> 151 151 - <img 152 152 - src={getAvatarUrl(profile) || "/favicon.png"} 153 153 - alt="avatar" 154 154 - className="w-28 h-28 rounded-full object-cover border-4 border-white dark:border-gray-950 bg-gray-300 dark:bg-gray-700" 155 155 - /> 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 + )} 156 172 </div> 157 173 158 174 <div className="absolute right-[16px] top-[170px] flex flex-row gap-2.5"> 175 175 + <BiteButton targetdidorhandle={did} /> 159 176 {/* 160 177 todo: full follow and unfollow backfill (along with partial likes backfill, 161 178 just enough for it to be useful) 162 179 also delay the backfill to be on demand because it would be pretty intense 163 180 also save it persistently 164 181 */} 165 165 - {identity?.did !== agent?.did ? ( 166 166 - <> 167 167 - {!(followRecords?.length && followRecords?.length > 0) ? ( 168 168 - <button 169 169 - onClick={() => 170 170 - toggleFollow({ 171 171 - agent: agent || undefined, 172 172 - targetDid: identity?.did, 173 173 - followRecords: followRecords, 174 174 - queryClient: queryClient, 175 175 - }) 176 176 - } 177 177 - className="rounded-full dark:bg-gray-600 bg-gray-300 px-3 py-2 text-[14px]" 178 178 - > 179 179 - Follow 180 180 - </button> 181 181 - ) : ( 182 182 - <button 183 183 - onClick={() => 184 184 - toggleFollow({ 185 185 - agent: agent || undefined, 186 186 - targetDid: identity?.did, 187 187 - followRecords: followRecords, 188 188 - queryClient: queryClient, 189 189 - }) 190 190 - } 191 191 - className="rounded-full dark:bg-gray-600 bg-gray-300 px-3 py-2 text-[14px]" 192 192 - > 193 193 - Unfollow 194 194 - </button> 195 195 - )} 196 196 - </> 197 197 - ) : ( 198 198 - <button className="rounded-full dark:bg-gray-600 bg-gray-300 px-3 py-2 text-[14px]"> 199 199 - Edit Profile 200 200 - </button> 201 201 - )} 202 202 - <button className="rounded-full dark:bg-gray-600 bg-gray-300 px-3 py-2 text-[14px]"> 182 182 + <FollowButton targetdidorhandle={did} /> 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 + > 203 193 ... {/* todo: icon */} 204 194 </button> 205 195 </div> ··· 207 197 {/* Info Card */} 208 198 <div className="mt-16 pb-2 px-4 text-gray-900 dark:text-gray-100"> 209 199 <div className="font-bold text-2xl">{displayName}</div> 210 210 - <div className="text-gray-500 dark:text-gray-400 text-base mb-3"> 200 200 + <div className="text-gray-500 dark:text-gray-400 text-base mb-3 flex flex-row gap-1"> 201 201 + <Mutual targetdidorhandle={did} /> 211 202 {handle} 212 203 </div> 204 204 + <div className="flex flex-row gap-2 text-md text-gray-500 dark:text-gray-400 mb-2"> 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> 213 213 + - 214 214 + <Link to="/profile/$did/follows" params={{ did: did }}> 215 215 + Follows 216 216 + </Link> 217 217 + </div> 213 218 {description && ( 214 219 <div className="text-base leading-relaxed text-gray-800 dark:text-gray-300 mb-5 whitespace-pre-wrap break-words text-[15px]"> 215 215 - {description} 220 220 + {/* {description} */} 221 221 + <RichTextRenderer key={did} description={description} /> 216 222 </div> 217 223 )} 218 224 </div> 219 225 </div> 220 226 221 221 - {/* Posts Section */} 222 222 - <div className="max-w-2xl mx-auto"> 223 223 - <div className="text-gray-500 dark:text-gray-400 text-lg font-semibold my-3 mx-4"> 224 224 - Posts 227 227 + {/* this should not be rendered until its ready (the top profile layout is stable) */} 228 228 + {isReady ? ( 229 229 + <ReusableTabRoute 230 230 + route={`Profile` + did} 231 231 + tabs={{ 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 + }, 243 243 + ...(identity?.did === agent?.did 244 244 + ? { Likes: <SelfLikesTab did={did} /> } 245 245 + : {}), 246 246 + }} 247 247 + /> 248 248 + ) : isIdentityLoading ? ( 249 249 + <div className="p-4 text-center text-gray-500"> 250 250 + Resolving profile... 251 251 + </div> 252 252 + ) : identityError ? ( 253 253 + <div className="p-4 text-center text-red-500"> 254 254 + Error: {identityError.message} 255 255 + </div> 256 256 + ) : !resolvedDid ? ( 257 257 + <div className="p-4 text-center text-gray-500">Profile not found.</div> 258 258 + ) : ( 259 259 + <div className="p-4 text-center text-gray-500"> 260 260 + Loading profile content... 225 261 </div> 226 226 - <div> 227 227 - {posts.map((post) => ( 262 262 + )} 263 263 + </div> 264 264 + ); 265 265 + } 266 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 + 315 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 + }); 332 332 + useReusableTabScrollRestore(`Profile` + did); 333 333 + const queryClient = useQueryClient(); 334 334 + const { 335 335 + data: identity, 336 336 + isLoading: isIdentityLoading, 337 337 + error: identityError, 338 338 + } = useQueryIdentity(did); 339 339 + 340 340 + const resolvedDid = did.startsWith("did:") ? did : identity?.did; 341 341 + 342 342 + const { 343 343 + data: postsData, 344 344 + fetchNextPage, 345 345 + hasNextPage, 346 346 + isFetchingNextPage, 347 347 + isLoading: arePostsLoading, 348 348 + } = useInfiniteQueryAuthorFeed(resolvedDid, identity?.pds); 349 349 + 350 350 + React.useEffect(() => { 351 351 + if (postsData) { 352 352 + postsData.pages.forEach((page) => { 353 353 + page.records.forEach((record) => { 354 354 + if (!queryClient.getQueryData(["post", record.uri])) { 355 355 + queryClient.setQueryData(["post", record.uri], record); 356 356 + } 357 357 + }); 358 358 + }); 359 359 + } 360 360 + }, [postsData, queryClient]); 361 361 + 362 362 + const posts = React.useMemo( 363 363 + () => postsData?.pages.flatMap((page) => page.records) ?? [], 364 364 + [postsData] 365 365 + ); 366 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 + 385 385 + return ( 386 386 + <> 387 387 + {/* <div className="text-gray-500 dark:text-gray-400 text-lg font-semibold my-3 mx-4"> 388 388 + Posts 389 389 + </div> */} 390 390 + <ProfilePostsFilterChipBar filters={filters} toggle={toggle} /> 391 391 + <div> 392 392 + {posts.map((post) => ( 393 393 + <UniversalPostRendererATURILoader 394 394 + key={post.uri} 395 395 + atUri={post.uri} 396 396 + feedviewpost={true} 397 397 + filterNoReplies={!filters?.replies} 398 398 + filterMustHaveMedia={filters?.mediaOnly} 399 399 + filterMustBeReply={!filters?.posts} 400 400 + /> 401 401 + ))} 402 402 + </div> 403 403 + 404 404 + {/* Loading and "Load More" states */} 405 405 + {arePostsLoading && posts.length === 0 && ( 406 406 + <div className="p-4 text-center text-gray-500">Loading posts...</div> 407 407 + )} 408 408 + {isFetchingNextPage && ( 409 409 + <div className="p-4 text-center text-gray-500">Loading more...</div> 410 410 + )} 411 411 + {hasNextPage && !isFetchingNextPage && ( 412 412 + <button 413 413 + onClick={() => fetchNextPage()} 414 414 + 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" 415 415 + > 416 416 + Load More Posts 417 417 + </button> 418 418 + )} 419 419 + {posts.length === 0 && !arePostsLoading && ( 420 420 + <div className="p-4 text-center text-gray-500">No posts found.</div> 421 421 + )} 422 422 + </> 423 423 + ); 424 424 + } 425 425 + 426 426 + function RepostsTab({ did }: { did: string }) { 427 427 + useReusableTabScrollRestore(`Profile` + did); 428 428 + const { 429 429 + data: identity, 430 430 + isLoading: isIdentityLoading, 431 431 + error: identityError, 432 432 + } = useQueryIdentity(did); 433 433 + 434 434 + const resolvedDid = did.startsWith("did:") ? did : identity?.did; 435 435 + 436 436 + const { 437 437 + data: repostsData, 438 438 + fetchNextPage, 439 439 + hasNextPage, 440 440 + isFetchingNextPage, 441 441 + isLoading: arePostsLoading, 442 442 + } = useInfiniteQueryAuthorFeed( 443 443 + resolvedDid, 444 444 + identity?.pds, 445 445 + "app.bsky.feed.repost" 446 446 + ); 447 447 + 448 448 + const reposts = React.useMemo( 449 449 + () => repostsData?.pages.flatMap((page) => page.records) ?? [], 450 450 + [repostsData] 451 451 + ); 452 452 + 453 453 + return ( 454 454 + <> 455 455 + <div className="text-gray-500 dark:text-gray-400 text-lg font-semibold my-3 mx-4"> 456 456 + Reposts 457 457 + </div> 458 458 + <div> 459 459 + {reposts.map((repost) => { 460 460 + if ( 461 461 + !repost || 462 462 + !repost?.value || 463 463 + !repost?.value?.subject || 464 464 + // @ts-expect-error blehhhhh 465 465 + !repost?.value?.subject?.uri 466 466 + ) 467 467 + return; 468 468 + const repostRecord = 469 469 + repost.value as unknown as ATPAPI.AppBskyFeedRepost.Record; 470 470 + return ( 228 471 <UniversalPostRendererATURILoader 229 229 - key={post.uri} 230 230 - atUri={post.uri} 472 472 + key={repostRecord.subject.uri} 473 473 + atUri={repostRecord.subject.uri} 231 474 feedviewpost={true} 475 475 + repostedby={repost.uri} 232 476 /> 233 233 - ))} 234 234 - </div> 477 477 + ); 478 478 + })} 479 479 + </div> 480 480 + 481 481 + {/* Loading and "Load More" states */} 482 482 + {arePostsLoading && reposts.length === 0 && ( 483 483 + <div className="p-4 text-center text-gray-500">Loading posts...</div> 484 484 + )} 485 485 + {isFetchingNextPage && ( 486 486 + <div className="p-4 text-center text-gray-500">Loading more...</div> 487 487 + )} 488 488 + {hasNextPage && !isFetchingNextPage && ( 489 489 + <button 490 490 + onClick={() => fetchNextPage()} 491 491 + 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" 492 492 + > 493 493 + Load More Posts 494 494 + </button> 495 495 + )} 496 496 + {reposts.length === 0 && !arePostsLoading && ( 497 497 + <div className="p-4 text-center text-gray-500">No posts found.</div> 498 498 + )} 499 499 + </> 500 500 + ); 501 501 + } 502 502 + 503 503 + function FeedsTab({ did }: { did: string }) { 504 504 + useReusableTabScrollRestore(`Profile` + did); 505 505 + const { 506 506 + data: identity, 507 507 + isLoading: isIdentityLoading, 508 508 + error: identityError, 509 509 + } = useQueryIdentity(did); 510 510 + 511 511 + const resolvedDid = did.startsWith("did:") ? did : identity?.did; 512 512 + 513 513 + const { 514 514 + data: feedsData, 515 515 + fetchNextPage, 516 516 + hasNextPage, 517 517 + isFetchingNextPage, 518 518 + isLoading: arePostsLoading, 519 519 + } = useInfiniteQueryAuthorFeed( 520 520 + resolvedDid, 521 521 + identity?.pds, 522 522 + "app.bsky.feed.generator" 523 523 + ); 235 524 236 236 - {/* Loading and "Load More" states */} 237 237 - {arePostsLoading && posts.length === 0 && ( 238 238 - <div className="p-4 text-center text-gray-500">Loading posts...</div> 239 239 - )} 240 240 - {isFetchingNextPage && ( 241 241 - <div className="p-4 text-center text-gray-500">Loading more...</div> 242 242 - )} 243 243 - {hasNextPage && !isFetchingNextPage && ( 244 244 - <button 245 245 - onClick={() => fetchNextPage()} 246 246 - 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" 525 525 + const feeds = React.useMemo( 526 526 + () => feedsData?.pages.flatMap((page) => page.records) ?? [], 527 527 + [feedsData] 528 528 + ); 529 529 + 530 530 + return ( 531 531 + <> 532 532 + <div className="text-gray-500 dark:text-gray-400 text-lg font-semibold my-3 mx-4"> 533 533 + Feeds 534 534 + </div> 535 535 + <div> 536 536 + {feeds.map((feed) => { 537 537 + if (!feed || !feed?.value) return; 538 538 + const feedGenRecord = 539 539 + feed.value as unknown as ATPAPI.AppBskyFeedGenerator.Record; 540 540 + return <FeedItemRender feed={feed as any} key={feed.uri} />; 541 541 + })} 542 542 + </div> 543 543 + 544 544 + {/* Loading and "Load More" states */} 545 545 + {arePostsLoading && feeds.length === 0 && ( 546 546 + <div className="p-4 text-center text-gray-500">Loading feeds...</div> 547 547 + )} 548 548 + {isFetchingNextPage && ( 549 549 + <div className="p-4 text-center text-gray-500">Loading more...</div> 550 550 + )} 551 551 + {hasNextPage && !isFetchingNextPage && ( 552 552 + <button 553 553 + onClick={() => fetchNextPage()} 554 554 + 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" 555 555 + > 556 556 + Load More Feeds 557 557 + </button> 558 558 + )} 559 559 + {feeds.length === 0 && !arePostsLoading && ( 560 560 + <div className="p-4 text-center text-gray-500">No feeds found.</div> 561 561 + )} 562 562 + </> 563 563 + ); 564 564 + } 565 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" 247 610 > 248 248 - Load More Posts 249 249 - </button> 250 250 - )} 251 251 - {posts.length === 0 && !arePostsLoading && ( 252 252 - <div className="p-4 text-center text-gray-500">No posts found.</div> 253 253 - )} 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 + 646 646 + export function FeedItemRenderAturiLoader({ 647 647 + aturi, 648 648 + listmode, 649 649 + disableBottomBorder, 650 650 + disablePropagation, 651 651 + }: { 652 652 + aturi: string; 653 653 + listmode?: boolean; 654 654 + disableBottomBorder?: boolean; 655 655 + disablePropagation?: boolean; 656 656 + }) { 657 657 + const { data: record } = useQueryArbitrary(aturi); 658 658 + 659 659 + if (!record) return; 660 660 + return ( 661 661 + <FeedItemRender 662 662 + listmode={listmode} 663 663 + feed={record} 664 664 + disableBottomBorder={disableBottomBorder} 665 665 + disablePropagation={disablePropagation} 666 666 + /> 667 667 + ); 668 668 + } 669 669 + 670 670 + export function FeedItemRender({ 671 671 + feed, 672 672 + listmode, 673 673 + disableBottomBorder, 674 674 + disablePropagation, 675 675 + }: { 676 676 + feed: { uri: string; cid: string; value: any }; 677 677 + listmode?: boolean; 678 678 + disableBottomBorder?: boolean; 679 679 + disablePropagation?: boolean; 680 680 + }) { 681 681 + const name = listmode 682 682 + ? (feed.value?.name as string) 683 683 + : (feed.value?.displayName as string); 684 684 + const aturi = new ATPAPI.AtUri(feed.uri); 685 685 + const { data: identity } = useQueryIdentity(aturi.host); 686 686 + const resolvedDid = identity?.did; 687 687 + const [imgcdn] = useAtom(imgCDNAtom); 688 688 + 689 689 + function getAvatarThumbnailUrl(f: typeof feed) { 690 690 + const link = f?.value.avatar?.ref?.["$link"]; 691 691 + if (!link || !resolvedDid) return null; 692 692 + return `https://${imgcdn}/img/avatar/plain/${resolvedDid}/${link}@jpeg`; 693 693 + } 694 694 + 695 695 + const { data: likes } = useQueryConstellation( 696 696 + // @ts-expect-error overloads sucks 697 697 + !listmode 698 698 + ? { 699 699 + target: feed.uri, 700 700 + method: "/links/count", 701 701 + collection: "app.bsky.feed.like", 702 702 + path: ".subject.uri", 703 703 + } 704 704 + : undefined 705 705 + ); 706 706 + 707 707 + return ( 708 708 + <Link 709 709 + className={`px-4 py-4 ${!disableBottomBorder && "border-b"} flex flex-col gap-1`} 710 710 + to="/profile/$did/feed/$rkey" 711 711 + params={{ did: aturi.host, rkey: aturi.rkey }} 712 712 + onClick={(e) => { 713 713 + e.stopPropagation(); 714 714 + }} 715 715 + > 716 716 + <div className="flex flex-row gap-3"> 717 717 + <div className="min-w-10 min-h-10"> 718 718 + <img 719 719 + src={getAvatarThumbnailUrl(feed) || defaultpfp} 720 720 + className="h-10 w-10 rounded border" 721 721 + /> 722 722 + </div> 723 723 + <div className="flex flex-col"> 724 724 + <span className="">{name}</span> 725 725 + <span className=" text-sm px-1.5 py-0.5 text-gray-500 bg-gray-200 dark:text-gray-400 dark:bg-gray-800 rounded-lg flex flex-row items-center justify-center"> 726 726 + {feed.value.did || aturi.rkey} 727 727 + </span> 728 728 + </div> 729 729 + <div className="flex-1" /> 730 730 + {/* <div className="button bg-red-500 rounded-full min-w-[60px]" /> */} 731 731 + </div> 732 732 + <span className=" text-sm">{feed.value?.description}</span> 733 733 + {!listmode && ( 734 734 + <span className=" text-sm dark:text-gray-400 text-gray-500"> 735 735 + Liked by {((likes as unknown as any)?.total as number) || 0} users 736 736 + </span> 737 737 + )} 738 738 + </Link> 739 739 + ); 740 740 + } 741 741 + 742 742 + function ListsTab({ did }: { did: string }) { 743 743 + useReusableTabScrollRestore(`Profile` + did); 744 744 + const { 745 745 + data: identity, 746 746 + isLoading: isIdentityLoading, 747 747 + error: identityError, 748 748 + } = useQueryIdentity(did); 749 749 + 750 750 + const resolvedDid = did.startsWith("did:") ? did : identity?.did; 751 751 + 752 752 + const { 753 753 + data: feedsData, 754 754 + fetchNextPage, 755 755 + hasNextPage, 756 756 + isFetchingNextPage, 757 757 + isLoading: arePostsLoading, 758 758 + } = useInfiniteQueryAuthorFeed( 759 759 + resolvedDid, 760 760 + identity?.pds, 761 761 + "app.bsky.graph.list" 762 762 + ); 763 763 + 764 764 + const feeds = React.useMemo( 765 765 + () => feedsData?.pages.flatMap((page) => page.records) ?? [], 766 766 + [feedsData] 767 767 + ); 768 768 + 769 769 + return ( 770 770 + <> 771 771 + <div className="text-gray-500 dark:text-gray-400 text-lg font-semibold my-3 mx-4"> 772 772 + Feeds 773 773 + </div> 774 774 + <div> 775 775 + {feeds.map((feed) => { 776 776 + if (!feed || !feed?.value) return; 777 777 + const feedGenRecord = 778 778 + feed.value as unknown as ATPAPI.AppBskyFeedGenerator.Record; 779 779 + return ( 780 780 + <FeedItemRender listmode={true} feed={feed as any} key={feed.uri} /> 781 781 + ); 782 782 + })} 783 783 + </div> 784 784 + 785 785 + {/* Loading and "Load More" states */} 786 786 + {arePostsLoading && feeds.length === 0 && ( 787 787 + <div className="p-4 text-center text-gray-500">Loading lists...</div> 788 788 + )} 789 789 + {isFetchingNextPage && ( 790 790 + <div className="p-4 text-center text-gray-500">Loading more...</div> 791 791 + )} 792 792 + {hasNextPage && !isFetchingNextPage && ( 793 793 + <button 794 794 + onClick={() => fetchNextPage()} 795 795 + 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" 796 796 + > 797 797 + Load More Lists 798 798 + </button> 799 799 + )} 800 800 + {feeds.length === 0 && !arePostsLoading && ( 801 801 + <div className="p-4 text-center text-gray-500">No lists found.</div> 802 802 + )} 803 803 + </> 804 804 + ); 805 805 + } 806 806 + 807 807 + function SelfLikesTab({ did }: { did: string }) { 808 808 + useReusableTabScrollRestore(`Profile` + did); 809 809 + const { 810 810 + data: identity, 811 811 + isLoading: isIdentityLoading, 812 812 + error: identityError, 813 813 + } = useQueryIdentity(did); 814 814 + 815 815 + const resolvedDid = did.startsWith("did:") ? did : identity?.did; 816 816 + 817 817 + const { 818 818 + data: likesData, 819 819 + fetchNextPage, 820 820 + hasNextPage, 821 821 + isFetchingNextPage, 822 822 + isLoading: arePostsLoading, 823 823 + } = useInfiniteQueryAuthorFeed( 824 824 + resolvedDid, 825 825 + identity?.pds, 826 826 + "app.bsky.feed.like" 827 827 + ); 828 828 + 829 829 + const likes = React.useMemo( 830 830 + () => likesData?.pages.flatMap((page) => page.records) ?? [], 831 831 + [likesData] 832 832 + ); 833 833 + 834 834 + const { setFastState } = useFastSetLikesFromFeed(); 835 835 + const seededRef = React.useRef(new Set<string>()); 836 836 + 837 837 + useEffect(() => { 838 838 + for (const like of likes) { 839 839 + if (!seededRef.current.has(like.uri)) { 840 840 + seededRef.current.add(like.uri); 841 841 + const record = like.value as unknown as ATPAPI.AppBskyFeedLike.Record; 842 842 + setFastState(record.subject.uri, { 843 843 + target: record.subject.uri, 844 844 + uri: like.uri, 845 845 + cid: like.cid, 846 846 + }); 847 847 + } 848 848 + } 849 849 + }, [likes, setFastState]); 850 850 + 851 851 + return ( 852 852 + <> 853 853 + <div className="text-gray-500 dark:text-gray-400 text-lg font-semibold my-3 mx-4"> 854 854 + Likes 855 855 + </div> 856 856 + <div> 857 857 + {likes.map((like) => { 858 858 + if ( 859 859 + !like || 860 860 + !like?.value || 861 861 + !like?.value?.subject || 862 862 + // @ts-expect-error blehhhhh 863 863 + !like?.value?.subject?.uri 864 864 + ) 865 865 + return; 866 866 + const likeRecord = 867 867 + like.value as unknown as ATPAPI.AppBskyFeedLike.Record; 868 868 + return ( 869 869 + <UniversalPostRendererATURILoader 870 870 + key={likeRecord.subject.uri} 871 871 + atUri={likeRecord.subject.uri} 872 872 + feedviewpost={true} 873 873 + /> 874 874 + ); 875 875 + })} 254 876 </div> 877 877 + 878 878 + {/* Loading and "Load More" states */} 879 879 + {arePostsLoading && likes.length === 0 && ( 880 880 + <div className="p-4 text-center text-gray-500">Loading likes...</div> 881 881 + )} 882 882 + {isFetchingNextPage && ( 883 883 + <div className="p-4 text-center text-gray-500">Loading more...</div> 884 884 + )} 885 885 + {hasNextPage && !isFetchingNextPage && ( 886 886 + <button 887 887 + onClick={() => fetchNextPage()} 888 888 + 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" 889 889 + > 890 890 + Load More Likes 891 891 + </button> 892 892 + )} 893 893 + {likes.length === 0 && !arePostsLoading && ( 894 894 + <div className="p-4 text-center text-gray-500">No likes found.</div> 895 895 + )} 255 896 </> 256 897 ); 257 898 } 899 899 + 900 900 + export function FollowButton({ 901 901 + targetdidorhandle, 902 902 + }: { 903 903 + targetdidorhandle: string; 904 904 + }) { 905 905 + const { agent } = useAuth(); 906 906 + const { data: identity } = useQueryIdentity(targetdidorhandle); 907 907 + const queryClient = useQueryClient(); 908 908 + 909 909 + const followRecords = useGetFollowState({ 910 910 + target: identity?.did ?? targetdidorhandle, 911 911 + user: agent?.did, 912 912 + }); 913 913 + 914 914 + return ( 915 915 + <> 916 916 + {identity?.did !== agent?.did ? ( 917 917 + <> 918 918 + {!(followRecords?.length && followRecords?.length > 0) ? ( 919 919 + <button 920 920 + onClick={(e) => { 921 921 + e.stopPropagation(); 922 922 + toggleFollow({ 923 923 + agent: agent || undefined, 924 924 + targetDid: identity?.did, 925 925 + followRecords: followRecords, 926 926 + queryClient: queryClient, 927 927 + }); 928 928 + }} 929 929 + 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]" 930 930 + > 931 931 + Follow 932 932 + </button> 933 933 + ) : ( 934 934 + <button 935 935 + onClick={(e) => { 936 936 + e.stopPropagation(); 937 937 + toggleFollow({ 938 938 + agent: agent || undefined, 939 939 + targetDid: identity?.did, 940 940 + followRecords: followRecords, 941 941 + queryClient: queryClient, 942 942 + }); 943 943 + }} 944 944 + 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]" 945 945 + > 946 946 + Unfollow 947 947 + </button> 948 948 + )} 949 949 + </> 950 950 + ) : ( 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 + > 961 961 + Edit Profile 962 962 + </button> 963 963 + )} 964 964 + </> 965 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 + } 1038 1038 + } 1039 1039 + 1040 1040 + export function Mutual({ targetdidorhandle }: { targetdidorhandle: string }) { 1041 1041 + const { agent } = useAuth(); 1042 1042 + const { data: identity } = useQueryIdentity(targetdidorhandle); 1043 1043 + 1044 1044 + const theyFollowYouRes = useGetOneToOneState( 1045 1045 + agent?.did 1046 1046 + ? { 1047 1047 + target: agent?.did, 1048 1048 + user: identity?.did ?? targetdidorhandle, 1049 1049 + collection: "app.bsky.graph.follow", 1050 1050 + path: ".subject", 1051 1051 + } 1052 1052 + : undefined 1053 1053 + ); 1054 1054 + 1055 1055 + const youFollowThemRes = useGetFollowState({ 1056 1056 + target: identity?.did ?? targetdidorhandle, 1057 1057 + user: agent?.did, 1058 1058 + }); 1059 1059 + 1060 1060 + const theyFollowYou: boolean = 1061 1061 + !!theyFollowYouRes?.length && theyFollowYouRes.length > 0; 1062 1062 + const youFollowThem: boolean = 1063 1063 + !!youFollowThemRes?.length && youFollowThemRes.length > 0; 1064 1064 + 1065 1065 + return ( 1066 1066 + <> 1067 1067 + {/* if not self */} 1068 1068 + {identity?.did !== agent?.did ? ( 1069 1069 + <> 1070 1070 + {theyFollowYou ? ( 1071 1071 + <> 1072 1072 + {youFollowThem ? ( 1073 1073 + <div className=" text-sm px-1.5 py-0.5 text-gray-500 bg-gray-200 dark:text-gray-400 dark:bg-gray-800 rounded-lg flex flex-row items-center justify-center"> 1074 1074 + mutuals 1075 1075 + </div> 1076 1076 + ) : ( 1077 1077 + <div className=" text-sm px-1.5 py-0.5 text-gray-500 bg-gray-200 dark:text-gray-400 dark:bg-gray-800 rounded-lg flex flex-row items-center justify-center"> 1078 1078 + follows you 1079 1079 + </div> 1080 1080 + )} 1081 1081 + </> 1082 1082 + ) : ( 1083 1083 + <></> 1084 1084 + )} 1085 1085 + </> 1086 1086 + ) : ( 1087 1087 + // lmao can someone be mutuals with themselves ?? 1088 1088 + <></> 1089 1089 + )} 1090 1090 + </> 1091 1091 + ); 1092 1092 + } 1093 1093 + 1094 1094 + export function RichTextRenderer({ description }: { description: string }) { 1095 1095 + const [richDescription, setRichDescription] = useState<string | ReactNode[]>( 1096 1096 + description 1097 1097 + ); 1098 1098 + const { agent } = useAuth(); 1099 1099 + const navigate = useNavigate(); 1100 1100 + 1101 1101 + useEffect(() => { 1102 1102 + let mounted = true; 1103 1103 + 1104 1104 + // setRichDescription(description); 1105 1105 + 1106 1106 + async function processRichText() { 1107 1107 + try { 1108 1108 + if (!agent?.did) return; 1109 1109 + const rt = new RichText({ text: description }); 1110 1110 + await rt.detectFacets(agent); 1111 1111 + 1112 1112 + if (!mounted) return; 1113 1113 + 1114 1114 + if (rt.facets) { 1115 1115 + setRichDescription( 1116 1116 + renderTextWithFacets({ text: rt.text, facets: rt.facets, navigate }) 1117 1117 + ); 1118 1118 + } else { 1119 1119 + setRichDescription(rt.text); 1120 1120 + } 1121 1121 + } catch (error) { 1122 1122 + console.error("Failed to detect facets:", error); 1123 1123 + if (mounted) { 1124 1124 + setRichDescription(description); 1125 1125 + } 1126 1126 + } 1127 1127 + } 1128 1128 + 1129 1129 + processRichText(); 1130 1130 + 1131 1131 + return () => { 1132 1132 + mounted = false; 1133 1133 + }; 1134 1134 + }, [description, agent, navigate]); 1135 1135 + 1136 1136 + return <>{richDescription}</>; 1137 1137 + }

+1 -1

src/routes/profile.$did/post.$rkey.image.$i.tsx

··· 85 85 e.stopPropagation(); 86 86 e.nativeEvent.stopImmediatePropagation(); 87 87 }} 88 88 - className="lightbox-sidebar hidden lg:flex overscroll-none disablegutter border-l dark:border-gray-800 was7 border-gray-300 fixed z-50 top-0 right-0 flex-col max-w-[350px] min-w-[350px] max-h-screen overflow-y-scroll dark:bg-gray-950 bg-white" 88 88 + className="lightbox-sidebar hidden lg:flex overscroll-none disablegutter disablescroll border-l dark:border-gray-800 was7 border-gray-300 fixed z-50 top-0 right-0 flex-col max-w-[350px] min-w-[350px] max-h-screen overflow-y-scroll dark:bg-gray-950 bg-white" 89 89 > 90 90 <ProfilePostComponent 91 91 key={`/profile/${did}/post/${rkey}`}

+100

src/routes/profile.$did/post.$rkey.liked-by.tsx

··· 1 1 + import { useInfiniteQuery } from "@tanstack/react-query"; 2 2 + import { createFileRoute } from "@tanstack/react-router"; 3 3 + import { useAtom } from "jotai"; 4 4 + import React from "react"; 5 5 + 6 6 + import { Header } from "~/components/Header"; 7 7 + import { constellationURLAtom } from "~/utils/atoms"; 8 8 + import { useQueryIdentity, yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks } from "~/utils/useQuery"; 9 9 + 10 10 + import { 11 11 + EmptyState, 12 12 + ErrorState, 13 13 + LoadingState, 14 14 + NotificationItem, 15 15 + } from "../notifications"; 16 16 + 17 17 + export const Route = createFileRoute("/profile/$did/post/$rkey/liked-by")({ 18 18 + component: RouteComponent, 19 19 + }); 20 20 + 21 21 + function RouteComponent() { 22 22 + const { did, rkey } = Route.useParams(); 23 23 + const { data: identity } = useQueryIdentity(did); 24 24 + const atUri = identity?.did && rkey ? `at://${decodeURIComponent(identity.did)}/app.bsky.feed.post/${rkey}` : ''; 25 25 + 26 26 + const [constellationurl] = useAtom(constellationURLAtom); 27 27 + const infinitequeryresults = useInfiniteQuery({ 28 28 + ...yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks( 29 29 + { 30 30 + constellation: constellationurl, 31 31 + method: "/links", 32 32 + target: atUri, 33 33 + collection: "app.bsky.feed.like", 34 34 + path: ".subject.uri", 35 35 + } 36 36 + ), 37 37 + enabled: !!atUri, 38 38 + }); 39 39 + 40 40 + const { 41 41 + data: infiniteLikesData, 42 42 + fetchNextPage, 43 43 + hasNextPage, 44 44 + isFetchingNextPage, 45 45 + isLoading, 46 46 + isError, 47 47 + error, 48 48 + } = infinitequeryresults; 49 49 + 50 50 + const likesAturis = React.useMemo(() => { 51 51 + // Get all replies from the standard infinite query 52 52 + return ( 53 53 + infiniteLikesData?.pages.flatMap( 54 54 + (page) => 55 55 + page?.linking_records.map( 56 56 + (r) => `at://${r.did}/${r.collection}/${r.rkey}` 57 57 + ) ?? [] 58 58 + ) ?? [] 59 59 + ); 60 60 + }, [infiniteLikesData]); 61 61 + 62 62 + return ( 63 63 + <> 64 64 + <Header 65 65 + title={`Liked By`} 66 66 + backButtonCallback={() => { 67 67 + if (window.history.length > 1) { 68 68 + window.history.back(); 69 69 + } else { 70 70 + window.location.assign("/"); 71 71 + } 72 72 + }} 73 73 + /> 74 74 + 75 75 + <> 76 76 + {(() => { 77 77 + if (isLoading) return <LoadingState text="Loading likes..." />; 78 78 + if (isError) return <ErrorState error={error} />; 79 79 + 80 80 + if (!likesAturis?.length) 81 81 + return <EmptyState text="No likes yet." />; 82 82 + })()} 83 83 + </> 84 84 + 85 85 + {likesAturis.map((m) => ( 86 86 + <NotificationItem key={m} notification={m} /> 87 87 + ))} 88 88 + 89 89 + {hasNextPage && ( 90 90 + <button 91 91 + onClick={() => fetchNextPage()} 92 92 + disabled={isFetchingNextPage} 93 93 + 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" 94 94 + > 95 95 + {isFetchingNextPage ? "Loading..." : "Load More"} 96 96 + </button> 97 97 + )} 98 98 + </> 99 99 + ); 100 100 + }

+141

src/routes/profile.$did/post.$rkey.quotes.tsx

··· 1 1 + import { useInfiniteQuery } from "@tanstack/react-query"; 2 2 + import { createFileRoute } from "@tanstack/react-router"; 3 3 + import { useAtom } from "jotai"; 4 4 + import React from "react"; 5 5 + 6 6 + import { Header } from "~/components/Header"; 7 7 + import { UniversalPostRendererATURILoader } from "~/components/UniversalPostRenderer"; 8 8 + import { constellationURLAtom } from "~/utils/atoms"; 9 9 + import { type linksRecord,useQueryIdentity, yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks } from "~/utils/useQuery"; 10 10 + 11 11 + import { 12 12 + EmptyState, 13 13 + ErrorState, 14 14 + LoadingState, 15 15 + } from "../notifications"; 16 16 + 17 17 + export const Route = createFileRoute("/profile/$did/post/$rkey/quotes")({ 18 18 + component: RouteComponent, 19 19 + }); 20 20 + 21 21 + function RouteComponent() { 22 22 + const { did, rkey } = Route.useParams(); 23 23 + const { data: identity } = useQueryIdentity(did); 24 24 + const atUri = identity?.did && rkey ? `at://${decodeURIComponent(identity.did)}/app.bsky.feed.post/${rkey}` : ''; 25 25 + 26 26 + const [constellationurl] = useAtom(constellationURLAtom); 27 27 + const infinitequeryresultsWithoutMedia = useInfiniteQuery({ 28 28 + ...yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks( 29 29 + { 30 30 + constellation: constellationurl, 31 31 + method: "/links", 32 32 + target: atUri, 33 33 + collection: "app.bsky.feed.post", 34 34 + path: ".embed.record.uri", // embed.record.record.uri and embed.record.uri 35 35 + } 36 36 + ), 37 37 + enabled: !!atUri, 38 38 + }); 39 39 + const infinitequeryresultsWithMedia = useInfiniteQuery({ 40 40 + ...yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks( 41 41 + { 42 42 + constellation: constellationurl, 43 43 + method: "/links", 44 44 + target: atUri, 45 45 + collection: "app.bsky.feed.post", 46 46 + path: ".embed.record.record.uri", // embed.record.record.uri and embed.record.uri 47 47 + } 48 48 + ), 49 49 + enabled: !!atUri, 50 50 + }); 51 51 + 52 52 + const { 53 53 + data: infiniteQuotesDataWithoutMedia, 54 54 + fetchNextPage: fetchNextPageWithoutMedia, 55 55 + hasNextPage: hasNextPageWithoutMedia, 56 56 + isFetchingNextPage: isFetchingNextPageWithoutMedia, 57 57 + isLoading: isLoadingWithoutMedia, 58 58 + isError: isErrorWithoutMedia, 59 59 + error: errorWithoutMedia, 60 60 + } = infinitequeryresultsWithoutMedia; 61 61 + const { 62 62 + data: infiniteQuotesDataWithMedia, 63 63 + fetchNextPage: fetchNextPageWithMedia, 64 64 + hasNextPage: hasNextPageWithMedia, 65 65 + isFetchingNextPage: isFetchingNextPageWithMedia, 66 66 + isLoading: isLoadingWithMedia, 67 67 + isError: isErrorWithMedia, 68 68 + error: errorWithMedia, 69 69 + } = infinitequeryresultsWithMedia; 70 70 + 71 71 + const fetchNextPage = async () => { 72 72 + await Promise.all([ 73 73 + hasNextPageWithMedia && fetchNextPageWithMedia(), 74 74 + hasNextPageWithoutMedia && fetchNextPageWithoutMedia(), 75 75 + ]); 76 76 + }; 77 77 + 78 78 + const hasNextPage = hasNextPageWithMedia || hasNextPageWithoutMedia; 79 79 + const isFetchingNextPage = isFetchingNextPageWithMedia || isFetchingNextPageWithoutMedia; 80 80 + const isLoading = isLoadingWithMedia || isLoadingWithoutMedia; 81 81 + 82 82 + const allQuotes = React.useMemo(() => { 83 83 + const withPages = infiniteQuotesDataWithMedia?.pages ?? []; 84 84 + const withoutPages = infiniteQuotesDataWithoutMedia?.pages ?? []; 85 85 + const maxLen = Math.max(withPages.length, withoutPages.length); 86 86 + const merged: linksRecord[] = []; 87 87 + 88 88 + for (let i = 0; i < maxLen; i++) { 89 89 + const a = withPages[i]?.linking_records ?? []; 90 90 + const b = withoutPages[i]?.linking_records ?? []; 91 91 + const mergedPage = [...a, ...b].sort((b, a) => a.rkey.localeCompare(b.rkey)); 92 92 + merged.push(...mergedPage); 93 93 + } 94 94 + 95 95 + return merged; 96 96 + }, [infiniteQuotesDataWithMedia?.pages, infiniteQuotesDataWithoutMedia?.pages]); 97 97 + 98 98 + const quotesAturis = React.useMemo(() => { 99 99 + return allQuotes.flatMap((r) => `at://${r.did}/${r.collection}/${r.rkey}`); 100 100 + }, [allQuotes]); 101 101 + 102 102 + return ( 103 103 + <> 104 104 + <Header 105 105 + title={`Quotes`} 106 106 + backButtonCallback={() => { 107 107 + if (window.history.length > 1) { 108 108 + window.history.back(); 109 109 + } else { 110 110 + window.location.assign("/"); 111 111 + } 112 112 + }} 113 113 + /> 114 114 + 115 115 + <> 116 116 + {(() => { 117 117 + if (isLoading) return <LoadingState text="Loading quotes..." />; 118 118 + if (isErrorWithMedia) return <ErrorState error={errorWithMedia} />; 119 119 + if (isErrorWithoutMedia) return <ErrorState error={errorWithoutMedia} />; 120 120 + 121 121 + if (!quotesAturis?.length) 122 122 + return <EmptyState text="No quotes yet." />; 123 123 + })()} 124 124 + </> 125 125 + 126 126 + {quotesAturis.map((m) => ( 127 127 + <UniversalPostRendererATURILoader key={m} atUri={m} /> 128 128 + ))} 129 129 + 130 130 + {hasNextPage && ( 131 131 + <button 132 132 + onClick={() => fetchNextPage()} 133 133 + disabled={isFetchingNextPage} 134 134 + 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" 135 135 + > 136 136 + {isFetchingNextPage ? "Loading..." : "Load More"} 137 137 + </button> 138 138 + )} 139 139 + </> 140 140 + ); 141 141 + }

+100

src/routes/profile.$did/post.$rkey.reposted-by.tsx

··· 1 1 + import { useInfiniteQuery } from "@tanstack/react-query"; 2 2 + import { createFileRoute } from "@tanstack/react-router"; 3 3 + import { useAtom } from "jotai"; 4 4 + import React from "react"; 5 5 + 6 6 + import { Header } from "~/components/Header"; 7 7 + import { constellationURLAtom } from "~/utils/atoms"; 8 8 + import { useQueryIdentity, yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks } from "~/utils/useQuery"; 9 9 + 10 10 + import { 11 11 + EmptyState, 12 12 + ErrorState, 13 13 + LoadingState, 14 14 + NotificationItem, 15 15 + } from "../notifications"; 16 16 + 17 17 + export const Route = createFileRoute("/profile/$did/post/$rkey/reposted-by")({ 18 18 + component: RouteComponent, 19 19 + }); 20 20 + 21 21 + function RouteComponent() { 22 22 + const { did, rkey } = Route.useParams(); 23 23 + const { data: identity } = useQueryIdentity(did); 24 24 + const atUri = identity?.did && rkey ? `at://${decodeURIComponent(identity.did)}/app.bsky.feed.post/${rkey}` : ''; 25 25 + 26 26 + const [constellationurl] = useAtom(constellationURLAtom); 27 27 + const infinitequeryresults = useInfiniteQuery({ 28 28 + ...yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks( 29 29 + { 30 30 + constellation: constellationurl, 31 31 + method: "/links", 32 32 + target: atUri, 33 33 + collection: "app.bsky.feed.repost", 34 34 + path: ".subject.uri", 35 35 + } 36 36 + ), 37 37 + enabled: !!atUri, 38 38 + }); 39 39 + 40 40 + const { 41 41 + data: infiniteRepostsData, 42 42 + fetchNextPage, 43 43 + hasNextPage, 44 44 + isFetchingNextPage, 45 45 + isLoading, 46 46 + isError, 47 47 + error, 48 48 + } = infinitequeryresults; 49 49 + 50 50 + const repostsAturis = React.useMemo(() => { 51 51 + // Get all replies from the standard infinite query 52 52 + return ( 53 53 + infiniteRepostsData?.pages.flatMap( 54 54 + (page) => 55 55 + page?.linking_records.map( 56 56 + (r) => `at://${r.did}/${r.collection}/${r.rkey}` 57 57 + ) ?? [] 58 58 + ) ?? [] 59 59 + ); 60 60 + }, [infiniteRepostsData]); 61 61 + 62 62 + return ( 63 63 + <> 64 64 + <Header 65 65 + title={`Reposted By`} 66 66 + backButtonCallback={() => { 67 67 + if (window.history.length > 1) { 68 68 + window.history.back(); 69 69 + } else { 70 70 + window.location.assign("/"); 71 71 + } 72 72 + }} 73 73 + /> 74 74 + 75 75 + <> 76 76 + {(() => { 77 77 + if (isLoading) return <LoadingState text="Loading reposts..." />; 78 78 + if (isError) return <ErrorState error={error} />; 79 79 + 80 80 + if (!repostsAturis?.length) 81 81 + return <EmptyState text="No reposts yet." />; 82 82 + })()} 83 83 + </> 84 84 + 85 85 + {repostsAturis.map((m) => ( 86 86 + <NotificationItem key={m} notification={m} /> 87 87 + ))} 88 88 + 89 89 + {hasNextPage && ( 90 90 + <button 91 91 + onClick={() => fetchNextPage()} 92 92 + disabled={isFetchingNextPage} 93 93 + 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" 94 94 + > 95 95 + {isFetchingNextPage ? "Loading..." : "Load More"} 96 96 + </button> 97 97 + )} 98 98 + </> 99 99 + ); 100 100 + }

+107 -93

src/routes/profile.$did/post.$rkey.tsx

··· 1 1 import { AtUri } from "@atproto/api"; 2 2 import { useInfiniteQuery, useQueryClient } from "@tanstack/react-query"; 3 3 - import { createFileRoute, Outlet } from "@tanstack/react-router"; 3 3 + import { createFileRoute, Outlet, useMatchRoute } from "@tanstack/react-router"; 4 4 + import { useAtom } from "jotai"; 4 5 import React, { useLayoutEffect } from "react"; 5 6 6 7 import { Header } from "~/components/Header"; 7 8 import { UniversalPostRendererATURILoader } from "~/components/UniversalPostRenderer"; 9 9 + import { constellationURLAtom, slingshotURLAtom } from "~/utils/atoms"; 8 10 //import { usePersistentStore } from '~/providers/PersistentStoreProvider'; 9 11 import { 10 12 constructPostQuery, ··· 50 52 nopics?: boolean; 51 53 lightboxCallback?: (d: LightboxProps) => void; 52 54 }) { 55 55 + const matchRoute = useMatchRoute() 56 56 + const showMainPostRoute = !!matchRoute({ to: '/profile/$did/post/$rkey' }) || !!matchRoute({ to: '/profile/$did/post/$rkey/image/$i' }) 57 57 + 53 58 //const { get, set } = usePersistentStore(); 54 59 const queryClient = useQueryClient(); 55 60 // const [resolvedDid, setResolvedDid] = React.useState<string | null>(null); ··· 188 193 data: identity, 189 194 isLoading: isIdentityLoading, 190 195 error: identityError, 191 191 - } = useQueryIdentity(did); 196 196 + } = useQueryIdentity(showMainPostRoute ? did : undefined); 192 197 193 198 const resolvedDid = did.startsWith("did:") ? did : identity?.did; 194 199 195 200 const atUri = React.useMemo( 196 201 () => 197 197 - resolvedDid 202 202 + resolvedDid && showMainPostRoute 198 203 ? `at://${decodeURIComponent(resolvedDid)}/app.bsky.feed.post/${rkey}` 199 204 : undefined, 200 200 - [resolvedDid, rkey] 205 205 + [resolvedDid, rkey, showMainPostRoute] 201 206 ); 202 207 203 203 - const { data: mainPost } = useQueryPost(atUri); 208 208 + const { data: mainPost } = useQueryPost(showMainPostRoute ? atUri : undefined); 204 209 205 210 console.log("atUri",atUri) 206 211 ··· 213 218 ); 214 219 215 220 // @ts-expect-error i hate overloads 216 216 - const { data: links } = useQueryConstellation(atUri?{ 221 221 + const { data: links } = useQueryConstellation(atUri&&showMainPostRoute?{ 217 222 method: "/links/all", 218 223 target: atUri, 219 224 } : { ··· 246 251 }, [links]); 247 252 248 253 const { data: opreplies } = useQueryConstellation( 249 249 - !!opdid && replyCount && replyCount >= 25 254 254 + showMainPostRoute && !!opdid && replyCount && replyCount >= 25 250 255 ? { 251 256 method: "/links", 252 257 target: atUri, ··· 275 280 // path: ".reply.parent.uri", 276 281 // }); 277 282 // const replies = repliesData?.linking_records.slice(0, 50) ?? []; 283 283 + const [constellationurl] = useAtom(constellationURLAtom) 284 284 + 278 285 const infinitequeryresults = useInfiniteQuery({ 279 286 ...yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks( 280 287 { 288 288 + constellation: constellationurl, 281 289 method: "/links", 282 290 target: atUri, 283 291 collection: "app.bsky.feed.post", 284 292 path: ".reply.parent.uri", 285 293 } 286 294 ), 287 287 - enabled: !!atUri, 295 295 + enabled: !!atUri && showMainPostRoute, 288 296 }); 289 297 290 298 const { ··· 366 374 const [layoutReady, setLayoutReady] = React.useState(false); 367 375 368 376 useLayoutEffect(() => { 377 377 + if (!showMainPostRoute) return 369 378 if (parents.length > 0 && !layoutReady && mainPostRef.current) { 370 379 const mainPostElement = mainPostRef.current; 371 380 ··· 384 393 // eslint-disable-next-line react-hooks/set-state-in-effect 385 394 setLayoutReady(true); 386 395 } 387 387 - }, [parents, layoutReady]); 396 396 + }, [parents, layoutReady, showMainPostRoute]); 388 397 398 398 + 399 399 + const [slingshoturl] = useAtom(slingshotURLAtom) 400 400 + 389 401 React.useEffect(() => { 390 390 - if (parentsLoading) { 402 402 + if (parentsLoading || !showMainPostRoute) { 391 403 setLayoutReady(false); 392 404 } 393 405 ··· 395 407 setLayoutReady(true); 396 408 hasPerformedInitialLayout.current = true; 397 409 } 398 398 - }, [parentsLoading, mainPost]); 410 410 + }, [parentsLoading, mainPost, showMainPostRoute]); 399 411 400 412 React.useEffect(() => { 401 413 if (!mainPost?.value?.reply?.parent?.uri) { ··· 414 426 while (currentParentUri && safetyCounter < MAX_PARENTS) { 415 427 try { 416 428 const parentPost = await queryClient.fetchQuery( 417 417 - constructPostQuery(currentParentUri) 429 429 + constructPostQuery(currentParentUri, slingshoturl) 418 430 ); 419 431 if (!parentPost) break; 420 432 parentChain.push(parentPost); ··· 436 448 return () => { 437 449 ignore = true; 438 450 }; 439 439 - }, [mainPost, queryClient]); 451 451 + }, [mainPost, queryClient, slingshoturl]); 440 452 441 441 - if (!did || !rkey) return <div>Invalid post URI</div>; 442 442 - if (isIdentityLoading) return <div>Resolving handle...</div>; 443 443 - if (identityError) 453 453 + if ((!did || !rkey) && showMainPostRoute) return <div>Invalid post URI</div>; 454 454 + if (isIdentityLoading && showMainPostRoute) return <div>Resolving handle...</div>; 455 455 + if (identityError && showMainPostRoute) 444 456 return <div style={{ color: "red" }}>{identityError.message}</div>; 445 445 - if (!atUri) return <div>Could not construct post URI.</div>; 457 457 + if (!atUri && showMainPostRoute) return <div>Could not construct post URI.</div>; 446 458 447 459 return ( 448 460 <> 449 461 <Outlet /> 450 450 - <Header 451 451 - title={`Post`} 452 452 - backButtonCallback={() => { 453 453 - if (window.history.length > 1) { 454 454 - window.history.back(); 455 455 - } else { 456 456 - window.location.assign("/"); 457 457 - } 458 458 - }} 459 459 - /> 462 462 + {showMainPostRoute && (<> 463 463 + <Header 464 464 + title={`Post`} 465 465 + backButtonCallback={() => { 466 466 + if (window.history.length > 1) { 467 467 + window.history.back(); 468 468 + } else { 469 469 + window.location.assign("/"); 470 470 + } 471 471 + }} 472 472 + /> 460 473 461 461 - {parentsLoading && ( 462 462 - <div className="text-center text-gray-500 dark:text-gray-400 flex flex-row"> 463 463 - <div className="ml-4 w-[42px] flex justify-center"> 464 464 - <div 465 465 - style={{ width: 2, height: "100%", opacity: 0.5 }} 466 466 - className="bg-gray-500 dark:bg-gray-400" 467 467 - ></div> 474 474 + {parentsLoading && ( 475 475 + <div className="text-center text-gray-500 dark:text-gray-400 flex flex-row"> 476 476 + <div className="ml-4 w-[42px] flex justify-center"> 477 477 + <div 478 478 + style={{ width: 2, height: "100%", opacity: 0.5 }} 479 479 + className="bg-gray-500 dark:bg-gray-400" 480 480 + ></div> 481 481 + </div> 482 482 + Loading conversation... 468 483 </div> 469 469 - Loading conversation... 470 470 - </div> 471 471 - )} 484 484 + )} 472 485 473 473 - {/* we should use the reply lines here thats provided by UPR*/} 474 474 - <div style={{ maxWidth: 600, padding: 0 }}> 475 475 - {parents.map((parent, index) => ( 486 486 + {/* we should use the reply lines here thats provided by UPR*/} 487 487 + <div style={{ maxWidth: 600, padding: 0 }}> 488 488 + {parents.map((parent, index) => ( 489 489 + <UniversalPostRendererATURILoader 490 490 + key={parent.uri} 491 491 + atUri={parent.uri} 492 492 + topReplyLine={index > 0} 493 493 + bottomReplyLine={true} 494 494 + bottomBorder={false} 495 495 + /> 496 496 + ))} 497 497 + </div> 498 498 + <div ref={mainPostRef}> 476 499 <UniversalPostRendererATURILoader 477 477 - key={parent.uri} 478 478 - atUri={parent.uri} 479 479 - topReplyLine={index > 0} 480 480 - bottomReplyLine={true} 481 481 - bottomBorder={false} 500 500 + atUri={atUri!} 501 501 + detailed={true} 502 502 + topReplyLine={parentsLoading || parents.length > 0} 503 503 + nopics={!!nopics} 504 504 + lightboxCallback={lightboxCallback} 482 505 /> 483 483 - ))} 484 484 - </div> 485 485 - <div ref={mainPostRef}> 486 486 - <UniversalPostRendererATURILoader 487 487 - atUri={atUri} 488 488 - detailed={true} 489 489 - topReplyLine={parentsLoading || parents.length > 0} 490 490 - nopics={!!nopics} 491 491 - lightboxCallback={lightboxCallback} 492 492 - /> 493 493 - </div> 494 494 - <div 495 495 - style={{ 496 496 - maxWidth: 600, 497 497 - //margin: "0px auto 0", 498 498 - padding: 0, 499 499 - minHeight: "80dvh", 500 500 - paddingBottom: "20dvh", 501 501 - }} 502 502 - > 506 506 + </div> 503 507 <div 504 504 - className="text-gray-500 dark:text-gray-400 text-sm font-bold" 505 508 style={{ 506 506 - fontSize: 18, 507 507 - margin: "12px 16px 12px 16px", 508 508 - fontWeight: 600, 509 509 + maxWidth: 600, 510 510 + //margin: "0px auto 0", 511 511 + padding: 0, 512 512 + minHeight: "80dvh", 513 513 + paddingBottom: "20dvh", 509 514 }} 510 515 > 511 511 - Replies 512 512 - </div> 513 513 - <div style={{ display: "flex", flexDirection: "column", gap: 0 }}> 514 514 - {replyAturis.length > 0 && 515 515 - replyAturis.map((reply) => { 516 516 - //const replyAtUri = `at://${reply.did}/app.bsky.feed.post/${reply.rkey}`; 517 517 - return ( 518 518 - <UniversalPostRendererATURILoader 519 519 - key={reply} 520 520 - atUri={reply} 521 521 - maxReplies={4} 522 522 - /> 523 523 - ); 524 524 - })} 525 525 - {hasNextPage && ( 526 526 - <button 527 527 - onClick={() => fetchNextPage()} 528 528 - disabled={isFetchingNextPage} 529 529 - 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" 530 530 - > 531 531 - {isFetchingNextPage ? "Loading..." : "Load More"} 532 532 - </button> 533 533 - )} 516 516 + <div 517 517 + className="text-gray-500 dark:text-gray-400 text-sm font-bold" 518 518 + style={{ 519 519 + fontSize: 18, 520 520 + margin: "12px 16px 12px 16px", 521 521 + fontWeight: 600, 522 522 + }} 523 523 + > 524 524 + Replies 525 525 + </div> 526 526 + <div style={{ display: "flex", flexDirection: "column", gap: 0 }}> 527 527 + {replyAturis.length > 0 && 528 528 + replyAturis.map((reply) => { 529 529 + //const replyAtUri = `at://${reply.did}/app.bsky.feed.post/${reply.rkey}`; 530 530 + return ( 531 531 + <UniversalPostRendererATURILoader 532 532 + key={reply} 533 533 + atUri={reply} 534 534 + maxReplies={4} 535 535 + /> 536 536 + ); 537 537 + })} 538 538 + {hasNextPage && ( 539 539 + <button 540 540 + onClick={() => fetchNextPage()} 541 541 + disabled={isFetchingNextPage} 542 542 + 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" 543 543 + > 544 544 + {isFetchingNextPage ? "Loading..." : "Load More"} 545 545 + </button> 546 546 + )} 547 547 + </div> 534 548 </div> 535 535 - </div> 549 549 + </>)} 536 550 </> 537 551 ); 538 552 }

+259 -2

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"; 6 6 + 7 7 + import { Header } from "~/components/Header"; 8 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"; 2 25 3 26 export const Route = createFileRoute("/search")({ 4 27 component: Search, 5 28 }); 6 29 7 30 export function Search() { 8 8 - return <div className="p-6">Search page (coming soon)</div>; 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 + 105 105 + return ( 106 106 + <> 107 107 + <Header 108 108 + title="Explore" 109 109 + backButtonCallback={() => { 110 110 + if (window.history.length > 1) { 111 111 + window.history.back(); 112 112 + } else { 113 113 + window.location.assign("/"); 114 114 + } 115 115 + }} 116 116 + /> 117 117 + <div className=" flex flex-col items-center mt-4 mx-4 gap-4"> 118 118 + <Import optionaltextstring={q} /> 119 119 + <div className="flex flex-col"> 120 120 + <p className="text-gray-600 dark:text-gray-400">{maintext}</p> 121 121 + <ul className="list-disc list-inside mt-2 text-gray-600 dark:text-gray-400"> 122 122 + <li> 123 123 + Bluesky URLs (from supported clients) (like{" "} 124 124 + <code className="text-sm">bsky.app</code> or{" "} 125 125 + <code className="text-sm">deer.social</code>). 126 126 + </li> 127 127 + <li> 128 128 + AT-URIs (e.g.,{" "} 129 129 + <code className="text-sm">at://did:example/collection/item</code> 130 130 + ). 131 131 + </li> 132 132 + <li> 133 133 + User Handles (like{" "} 134 134 + <code className="text-sm">@username.bsky.social</code>). 135 135 + </li> 136 136 + <li> 137 137 + DIDs (Decentralized Identifiers, starting with{" "} 138 138 + <code className="text-sm">did:</code>). 139 139 + </li> 140 140 + </ul> 141 141 + <p className="mt-2 text-gray-600 dark:text-gray-400"> 142 142 + Simply paste one of these into the import field above and press 143 143 + Enter to load the content. 144 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 + )} 177 177 + </div> 178 178 + </div> 179 179 + {q ? <SearchTabs query={q} /> : <></>} 180 180 + </> 181 181 + ); 182 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 <></>; 9 266 }

+336 -2

src/routes/settings.tsx

··· 1 1 - import { createFileRoute } from "@tanstack/react-router"; 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"; 2 5 3 6 import { Header } from "~/components/Header"; 4 7 import Login from "~/components/Login"; 8 8 + import { 9 9 + constellationURLAtom, 10 10 + defaultconstellationURL, 11 11 + defaulthue, 12 12 + defaultImgCDN, 13 13 + defaultLycanURL, 14 14 + defaultslingshotURL, 15 15 + defaultVideoCDN, 16 16 + enableBitesAtom, 17 17 + enableBridgyTextAtom, 18 18 + enableWafrnTextAtom, 19 19 + hueAtom, 20 20 + imgCDNAtom, 21 21 + lycanURLAtom, 22 22 + slingshotURLAtom, 23 23 + videoCDNAtom, 24 24 + } from "~/utils/atoms"; 25 25 + 26 26 + import { MaterialNavItem } from "./__root"; 5 27 6 28 export const Route = createFileRoute("/settings")({ 7 29 component: Settings, 8 30 }); 9 31 10 32 export function Settings() { 33 33 + const navigate = useNavigate(); 11 34 return ( 12 35 <> 13 36 <Header ··· 20 43 } 21 44 }} 22 45 /> 23 23 - <Login /> 46 46 + <div className="lg:hidden"> 47 47 + <Login /> 48 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> 76 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> 88 88 + <TextInputSetting 89 89 + atom={constellationURLAtom} 90 90 + title={"Constellation"} 91 91 + description={ 92 92 + "Customize the Constellation instance to be used by Red Dwarf" 93 93 + } 94 94 + init={defaultconstellationURL} 95 95 + /> 96 96 + <TextInputSetting 97 97 + atom={slingshotURLAtom} 98 98 + title={"Slingshot"} 99 99 + description={"Customize the Slingshot instance to be used by Red Dwarf"} 100 100 + init={defaultslingshotURL} 101 101 + /> 102 102 + <TextInputSetting 103 103 + atom={imgCDNAtom} 104 104 + title={"Image CDN"} 105 105 + description={ 106 106 + "Customize the Constellation instance to be used by Red Dwarf" 107 107 + } 108 108 + init={defaultImgCDN} 109 109 + /> 110 110 + <TextInputSetting 111 111 + atom={videoCDNAtom} 112 112 + title={"Video CDN"} 113 113 + description={"Customize the Slingshot instance to be used by Red Dwarf"} 114 114 + init={defaultVideoCDN} 115 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 + /> 122 122 + 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 149 149 + </p> 24 150 </> 25 151 ); 26 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 + 217 217 + function Hue() { 218 218 + const [hue, setHue] = useAtom(hueAtom); 219 219 + return ( 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} /> 227 227 + <button 228 228 + onClick={() => setHue(defaulthue ?? 28)} 229 229 + className="px-6 py-2 h-12 rounded-full bg-gray-100 dark:bg-gray-800 230 230 + text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 transition" 231 231 + > 232 232 + Reset 233 233 + </button> 234 234 + </div> 235 235 + </div> 236 236 + ); 237 237 + } 238 238 + 239 239 + export function TextInputSetting({ 240 240 + atom, 241 241 + title, 242 242 + description, 243 243 + init, 244 244 + }: { 245 245 + atom: typeof constellationURLAtom; 246 246 + title?: string; 247 247 + description?: string; 248 248 + init?: string; 249 249 + }) { 250 250 + const [value, setValue] = useAtom(atom); 251 251 + return ( 252 252 + <div className="flex flex-col gap-2 px-4 py-2"> 253 253 + {/* <div> 254 254 + {title && ( 255 255 + <h3 className="text-sm font-medium text-gray-900 dark:text-gray-100"> 256 256 + {title} 257 257 + </h3> 258 258 + )} 259 259 + {description && ( 260 260 + <p className="text-sm text-gray-500 dark:text-gray-400"> 261 261 + {description} 262 262 + </p> 263 263 + )} 264 264 + </div> */} 265 265 + 266 266 + <div className="flex flex-row gap-2 items-center"> 267 267 + <div className="m3input-field m3input-label m3input-border size-md flex-1"> 268 268 + <input 269 269 + type="text" 270 270 + placeholder=" " 271 271 + value={value} 272 272 + onChange={(e) => setValue(e.target.value)} 273 273 + /> 274 274 + <label>{title}</label> 275 275 + </div> 276 276 + {/* <input 277 277 + type="text" 278 278 + value={value} 279 279 + onChange={(e) => setValue(e.target.value)} 280 280 + className="flex-1 px-3 py-2 rounded-lg bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 281 281 + text-gray-900 dark:text-gray-100 placeholder:text-gray-500 dark:placeholder:text-gray-400 282 282 + focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600" 283 283 + placeholder="Enter value..." 284 284 + /> */} 285 285 + <button 286 286 + onClick={() => setValue(init ?? "")} 287 287 + className="px-6 py-2 h-12 rounded-full bg-gray-100 dark:bg-gray-800 288 288 + text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 transition" 289 289 + > 290 290 + Reset 291 291 + </button> 292 292 + </div> 293 293 + </div> 294 294 + ); 295 295 + } 296 296 + 297 297 + interface SliderProps { 298 298 + atom: typeof hueAtom; 299 299 + min?: number; 300 300 + max?: number; 301 301 + step?: number; 302 302 + } 303 303 + 304 304 + export const SliderComponent: React.FC<SliderProps> = ({ 305 305 + atom, 306 306 + min = 0, 307 307 + max = 100, 308 308 + step = 1, 309 309 + }) => { 310 310 + const [value, setValue] = useAtom(atom); 311 311 + 312 312 + return ( 313 313 + <Slider.Root 314 314 + className="relative flex items-center w-full h-4" 315 315 + value={[value]} 316 316 + min={min} 317 317 + max={max} 318 318 + step={step} 319 319 + onValueChange={(v: number[]) => setValue(v[0])} 320 320 + > 321 321 + <Slider.Track className="relative flex-grow h-4 bg-gray-300 dark:bg-gray-700 rounded-full"> 322 322 + <Slider.Range className="absolute h-full bg-gray-500 dark:bg-gray-400 rounded-l-full rounded-r-none" /> 323 323 + </Slider.Track> 324 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" /> 325 325 + </Slider.Root> 326 326 + ); 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 + };

+283 -14

src/styles/app.css

··· 15 15 --color-gray-950: oklch(0.129 0.050 222.000); 16 16 } */ 17 17 18 18 + :root { 19 19 + --safe-hue: var(--tw-gray-hue, 28) 20 20 + } 21 21 + 18 22 @theme { 19 19 - --color-gray-50: oklch(0.984 0.012 28); 20 20 - --color-gray-100: oklch(0.968 0.017 28); 21 21 - --color-gray-200: oklch(0.929 0.025 28); 22 22 - --color-gray-300: oklch(0.869 0.035 28); 23 23 - --color-gray-400: oklch(0.704 0.05 28); 24 24 - --color-gray-500: oklch(0.554 0.06 28); 25 25 - --color-gray-600: oklch(0.446 0.058 28); 26 26 - --color-gray-700: oklch(0.372 0.058 28); 27 27 - --color-gray-800: oklch(0.279 0.055 28); 28 28 - --color-gray-900: oklch(0.208 0.055 28); 29 29 - --color-gray-950: oklch(0.129 0.055 28); 23 23 + --color-gray-50: oklch(0.984 0.012 var(--safe-hue)); 24 24 + --color-gray-100: oklch(0.968 0.017 var(--safe-hue)); 25 25 + --color-gray-200: oklch(0.929 0.025 var(--safe-hue)); 26 26 + --color-gray-300: oklch(0.869 0.035 var(--safe-hue)); 27 27 + --color-gray-400: oklch(0.704 0.05 var(--safe-hue)); 28 28 + --color-gray-500: oklch(0.554 0.06 var(--safe-hue)); 29 29 + --color-gray-600: oklch(0.446 0.058 var(--safe-hue)); 30 30 + --color-gray-700: oklch(0.372 0.058 var(--safe-hue)); 31 31 + --color-gray-800: oklch(0.279 0.055 var(--safe-hue)); 32 32 + --color-gray-900: oklch(0.208 0.055 var(--safe-hue)); 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));*/ 30 40 } 31 41 32 42 @layer base { ··· 48 58 } 49 59 } 50 60 61 61 + .gutter{ 62 62 + scrollbar-gutter: stable both-edges; 63 63 + } 64 64 + 51 65 @media (width >= 64rem /* 1024px */) { 52 66 html:not(:has(.disablegutter)), 53 67 body:not(:has(.disablegutter)) { 54 68 scrollbar-gutter: stable both-edges !important; 55 69 } 56 56 - html:has(.disablegutter), 57 57 - body:has(.disablegutter) { 70 70 + html:has(.disablescroll), 71 71 + body:has(.disablescroll) { 58 72 scrollbar-width: none; 59 73 overflow-y: hidden; 60 74 } ··· 76 90 .dangerousFediContent { 77 91 & a[href]{ 78 92 text-decoration: none; 79 79 - color: rgb(29, 122, 242); 93 93 + color: var(--link-text-color); 80 94 word-break: break-all; 81 95 } 82 96 } ··· 105 119 :root { 106 120 --shadow-opacity: calc(1 - var(--is-top)); 107 121 --tw-shadow-header: 0 2px 8px hsl(0 0% 0% / calc(var(--shadow-opacity) * 0.15)); 122 122 + } 123 123 + 124 124 + 125 125 + /* m3 input */ 126 126 + :root { 127 127 + --m3input-radius: 6px; 128 128 + --m3input-border-width: .0625rem; 129 129 + --m3input-font-size: 16px; 130 130 + --m3input-transition: 150ms cubic-bezier(.2, .8, .2, 1); 131 131 + /* light theme */ 132 132 + --m3input-bg: var(--color-gray-50); 133 133 + --m3input-border-color: var(--color-gray-400); 134 134 + --m3input-label-color: var(--color-gray-500); 135 135 + --m3input-text-color: var(--color-gray-900); 136 136 + --m3input-focus-color: var(--color-gray-600); 137 137 + } 138 138 + 139 139 + @media (prefers-color-scheme: dark) { 140 140 + :root { 141 141 + --m3input-bg: var(--color-gray-950); 142 142 + --m3input-border-color: var(--color-gray-700); 143 143 + --m3input-label-color: var(--color-gray-400); 144 144 + --m3input-text-color: var(--color-gray-50); 145 145 + --m3input-focus-color: var(--color-gray-400); 146 146 + } 147 147 + } 148 148 + 149 149 + /* reset page *//* 150 150 + html, 151 151 + body { 152 152 + background: var(--m3input-bg); 153 153 + margin: 0; 154 154 + padding: 1rem; 155 155 + color: var(--m3input-text-color); 156 156 + font-family: system-ui, sans-serif; 157 157 + font-size: var(--m3input-font-size); 158 158 + }*/ 159 159 + 160 160 + /* base wrapper */ 161 161 + .m3input-field.m3input-label.m3input-border { 162 162 + position: relative; 163 163 + display: inline-block; 164 164 + width: 100%; 165 165 + /*max-width: 400px;*/ 166 166 + } 167 167 + 168 168 + /* size variants */ 169 169 + .m3input-field.size-sm { 170 170 + --m3input-h: 40px; 171 171 + } 172 172 + 173 173 + .m3input-field.size-md { 174 174 + --m3input-h: 48px; 175 175 + } 176 176 + 177 177 + .m3input-field.size-lg { 178 178 + --m3input-h: 56px; 179 179 + } 180 180 + 181 181 + .m3input-field.size-xl { 182 182 + --m3input-h: 64px; 183 183 + } 184 184 + 185 185 + .m3input-field.m3input-label.m3input-border:not(.size-sm):not(.size-md):not(.size-lg):not(.size-xl) { 186 186 + --m3input-h: 48px; 187 187 + } 188 188 + 189 189 + /* outlined input */ 190 190 + .m3input-field.m3input-label.m3input-border input { 191 191 + width: 100%; 192 192 + height: var(--m3input-h); 193 193 + border: var(--m3input-border-width) solid var(--m3input-border-color); 194 194 + border-radius: var(--m3input-radius); 195 195 + background: var(--m3input-bg); 196 196 + color: var(--m3input-text-color); 197 197 + font-size: var(--m3input-font-size); 198 198 + padding: 0 12px; 199 199 + box-sizing: border-box; 200 200 + outline: none; 201 201 + transition: border-color var(--m3input-transition), box-shadow var(--m3input-transition); 202 202 + } 203 203 + 204 204 + /* focus ring */ 205 205 + .m3input-field.m3input-label.m3input-border input:focus { 206 206 + /*border-color: var(--m3input-focus-color);*/ 207 207 + border-color: var(--m3input-focus-color); 208 208 + box-shadow: 0 0 0 1px var(--m3input-focus-color); 209 209 + /*box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus-color) 20%, transparent);*/ 210 210 + } 211 211 + 212 212 + /* label */ 213 213 + .m3input-field.m3input-label.m3input-border label { 214 214 + position: absolute; 215 215 + left: 12px; 216 216 + top: 50%; 217 217 + transform: translateY(-50%); 218 218 + background: var(--m3input-bg); 219 219 + padding: 0 .25em; 220 220 + color: var(--m3input-label-color); 221 221 + pointer-events: none; 222 222 + transition: all var(--m3input-transition); 223 223 + } 224 224 + 225 225 + /* float on focus or when filled */ 226 226 + .m3input-field.m3input-label.m3input-border input:focus+label, 227 227 + .m3input-field.m3input-label.m3input-border input:not(:placeholder-shown)+label { 228 228 + top: 0; 229 229 + transform: translateY(-50%) scale(.78); 230 230 + left: 0; 231 231 + color: var(--m3input-focus-color); 232 232 + } 233 233 + 234 234 + /* placeholder trick */ 235 235 + .m3input-field.m3input-label.m3input-border input::placeholder { 236 236 + color: transparent; 237 237 + } 238 238 + 239 239 + /* radix i love you but like cmon man */ 240 240 + body[data-scroll-locked]{ 241 241 + margin-left: var(--removed-body-scroll-bar-size) !important; 242 242 + } 243 243 + 244 244 + /* radix tabs */ 245 245 + 246 246 + .m3tab[data-radix-collection-item] { 247 247 + flex: 1; 248 248 + display: flex; 249 249 + padding: 12px 8px; 250 250 + align-items: center; 251 251 + justify-content: center; 252 252 + color: var(--color-gray-500); 253 253 + font-weight: 500; 254 254 + &:hover { 255 255 + background-color: var(--color-gray-100); 256 256 + cursor: pointer; 257 257 + } 258 258 + &[aria-selected="true"] { 259 259 + color: var(--color-gray-950); 260 260 + &::before{ 261 261 + content: ""; 262 262 + position: absolute; 263 263 + width: min(80px, 80%); 264 264 + border-radius: 99px 99px 0px 0px ; 265 265 + height: 3px; 266 266 + bottom: 0; 267 267 + background-color: var(--color-gray-400); 268 268 + } 269 269 + } 270 270 + } 271 271 + 272 272 + @media (prefers-color-scheme: dark) { 273 273 + .m3tab[data-radix-collection-item] { 274 274 + color: var(--color-gray-400); 275 275 + &:hover { 276 276 + background-color: var(--color-gray-900); 277 277 + cursor: pointer; 278 278 + } 279 279 + &[aria-selected="true"] { 280 280 + color: var(--color-gray-50); 281 281 + &::before{ 282 282 + background-color: var(--color-gray-500); 283 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); 375 375 + } 376 376 + } 108 377 }

+134 -13

src/utils/atoms.ts

··· 1 1 - import type Agent from "@atproto/api"; 2 2 - import { atom, createStore } from "jotai"; 3 3 - import { atomWithStorage } from 'jotai/utils'; 1 1 + import { atom, createStore, useAtomValue } from "jotai"; 2 2 + import { atomWithStorage } from "jotai/utils"; 3 3 + import { useEffect } from "react"; 4 4 + 5 5 + import { type ProfilePostsFilter } from "~/routes/profile.$did"; 4 6 5 7 export const store = createStore(); 6 8 9 9 + export const quickAuthAtom = atomWithStorage<string | null>( 10 10 + "quickAuth", 11 11 + null 12 12 + ); 13 13 + 7 14 export const selectedFeedUriAtom = atomWithStorage<string | null>( 8 8 - 'selectedFeedUri', 15 15 + "selectedFeedUri", 9 16 null 10 17 ); 11 18 12 19 //export const feedScrollPositionsAtom = atom<Record<string, number>>({}); 13 20 14 21 export const feedScrollPositionsAtom = atomWithStorage<Record<string, number>>( 15 15 - 'feedscrollpositions', 22 22 + "feedscrollpositions", 16 23 {} 17 24 ); 18 25 26 26 + type TabRouteScrollState = { 27 27 + activeTab: string; 28 28 + scrollPositions: Record<string, number>; 29 29 + }; 30 30 + /** 31 31 + * @deprecated should be safe to remove i think 32 32 + */ 33 33 + export const notificationsScrollAtom = atom<TabRouteScrollState>({ 34 34 + activeTab: "mentions", 35 35 + scrollPositions: {}, 36 36 + }); 37 37 + 38 38 + export type InteractionFilter = { 39 39 + likes: boolean; 40 40 + reposts: boolean; 41 41 + quotes: boolean; 42 42 + replies: boolean; 43 43 + showAll: boolean; 44 44 + }; 45 45 + const defaultFilters: InteractionFilter = { 46 46 + likes: true, 47 47 + reposts: true, 48 48 + quotes: true, 49 49 + replies: true, 50 50 + showAll: false, 51 51 + }; 52 52 + export const postInteractionsFiltersAtom = atomWithStorage<InteractionFilter>( 53 53 + "postInteractionsFilters", 54 54 + defaultFilters 55 55 + ); 56 56 + 57 57 + export const reusableTabRouteScrollAtom = atom<Record<string, TabRouteScrollState | undefined> | undefined>({}); 58 58 + 19 59 export const likedPostsAtom = atomWithStorage<Record<string, string>>( 20 20 - 'likedPosts', 60 60 + "likedPosts", 61 61 + {} 62 62 + ); 63 63 + 64 64 + export type LikeRecord = { 65 65 + uri: string; // at://did/collection/rkey 66 66 + target: string; 67 67 + cid: string; 68 68 + }; 69 69 + 70 70 + export const internalLikedPostsAtom = atomWithStorage<Record<string, LikeRecord | null>>( 71 71 + "internal-liked-posts", 21 72 {} 22 73 ); 23 74 75 75 + export const profileChipsAtom = atom<Record<string, ProfilePostsFilter | null>>({}) 76 76 + 77 77 + export const defaultconstellationURL = "constellation.microcosm.blue"; 78 78 + export const constellationURLAtom = atomWithStorage<string>( 79 79 + "constellationURL", 80 80 + defaultconstellationURL 81 81 + ); 82 82 + export const defaultslingshotURL = "slingshot.microcosm.blue"; 83 83 + export const slingshotURLAtom = atomWithStorage<string>( 84 84 + "slingshotURL", 85 85 + defaultslingshotURL 86 86 + ); 87 87 + export const defaultImgCDN = "cdn.bsky.app"; 88 88 + export const imgCDNAtom = atomWithStorage<string>("imgcdnurl", defaultImgCDN); 89 89 + export const defaultVideoCDN = "video.bsky.app"; 90 90 + export const videoCDNAtom = atomWithStorage<string>( 91 91 + "videocdnurl", 92 92 + defaultVideoCDN 93 93 + ); 94 94 + 95 95 + export const defaultLycanURL = ""; 96 96 + export const lycanURLAtom = atomWithStorage<string>( 97 97 + "lycanURL", 98 98 + defaultLycanURL 99 99 + ); 100 100 + 101 101 + export const defaulthue = 28; 102 102 + export const hueAtom = atomWithStorage<number>("hue", defaulthue); 103 103 + 24 104 export const isAtTopAtom = atom<boolean>(true); 25 105 26 106 type ComposerState = 27 27 - | { kind: 'closed' } 28 28 - | { kind: 'root' } 29 29 - | { kind: 'reply'; parent: string } 30 30 - | { kind: 'quote'; subject: string }; 31 31 - export const composerAtom = atom<ComposerState>({ kind: 'closed' }); 107 107 + | { kind: "closed" } 108 108 + | { kind: "root" } 109 109 + | { kind: "reply"; parent: string } 110 110 + | { kind: "quote"; subject: string }; 111 111 + export const composerAtom = atom<ComposerState>({ kind: "closed" }); 112 112 + 113 113 + //export const agentAtom = atom<Agent | null>(null); 114 114 + //export const authedAtom = atom<boolean>(false); 115 115 + 116 116 + export function useAtomCssVar(atom: typeof hueAtom, cssVar: string) { 117 117 + const value = useAtomValue(atom); 118 118 + 119 119 + useEffect(() => { 120 120 + document.documentElement.style.setProperty(cssVar, value.toString()); 121 121 + }, [value, cssVar]); 122 122 + 123 123 + useEffect(() => { 124 124 + document.documentElement.style.setProperty(cssVar, value.toString()); 125 125 + }, []); 126 126 + } 32 127 33 33 - export const agentAtom = atom<Agent|null>(null); 34 34 - export const authedAtom = atom<boolean>(false); 128 128 + hueAtom.onMount = (setAtom) => { 129 129 + const stored = localStorage.getItem("hue"); 130 130 + if (stored != null) setAtom(Number(stored)); 131 131 + }; 132 132 + // export function initAtomToCssVar(atom: typeof hueAtom, cssVar: string) { 133 133 + // const initial = store.get(atom); 134 134 + // console.log("atom get ", initial); 135 135 + // document.documentElement.style.setProperty(cssVar, initial.toString()); 136 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 + );

+33

src/utils/followState.ts

··· 128 128 }; 129 129 }); 130 130 } 131 131 + 132 132 + 133 133 + 134 134 + export function useGetOneToOneState(params?: { 135 135 + target: string; 136 136 + user: string; 137 137 + collection: string; 138 138 + path: string; 139 139 + }): string[] | undefined { 140 140 + const { data: arbitrarydata } = useQueryConstellation( 141 141 + params && params.user 142 142 + ? { 143 143 + method: "/links", 144 144 + target: params.target, 145 145 + // @ts-expect-error overloading sucks so much 146 146 + collection: params.collection, 147 147 + path: params.path, 148 148 + dids: [params.user], 149 149 + } 150 150 + : { method: "undefined", target: "whatever" } 151 151 + // overloading sucks so much 152 152 + ) as { data: linksRecordsResponse | undefined }; 153 153 + if (!params || !params.user) return undefined; 154 154 + const data = arbitrarydata?.linking_records.slice(0, 50) ?? []; 155 155 + 156 156 + if (data.length > 0) { 157 157 + return data.map((linksRecord) => { 158 158 + return `at://${linksRecord.did}/${linksRecord.collection}/${linksRecord.rkey}`; 159 159 + }); 160 160 + } 161 161 + 162 162 + return undefined; 163 163 + }

+34

src/utils/likeMutationQueue.ts

··· 1 1 + import { useAtom } from "jotai"; 2 2 + import { useCallback } from "react"; 3 3 + 4 4 + import { type LikeRecord,useLikeMutationQueue as useLikeMutationQueueFromProvider } from "~/providers/LikeMutationQueueProvider"; 5 5 + import { useAuth } from "~/providers/UnifiedAuthProvider"; 6 6 + 7 7 + import { internalLikedPostsAtom } from "./atoms"; 8 8 + 9 9 + export function useFastLike(target: string, cid: string) { 10 10 + const { agent } = useAuth(); 11 11 + const { fastState, fastToggle, backfillState } = useLikeMutationQueueFromProvider(); 12 12 + 13 13 + const liked = fastState(target); 14 14 + const toggle = () => fastToggle(target, cid); 15 15 + /** 16 16 + * 17 17 + * @deprecated dont use it yet, will cause infinite rerenders 18 18 + */ 19 19 + const backfill = () => agent?.did && backfillState(target, agent.did); 20 20 + 21 21 + return { liked, toggle, backfill }; 22 22 + } 23 23 + 24 24 + export function useFastSetLikesFromFeed() { 25 25 + const [_, setLikedPosts] = useAtom(internalLikedPostsAtom); 26 26 + 27 27 + const setFastState = useCallback( 28 28 + (target: string, record: LikeRecord | null) => 29 29 + setLikedPosts((prev) => ({ ...prev, [target]: record })), 30 30 + [setLikedPosts] 31 31 + ); 32 32 + 33 33 + return { setFastState }; 34 34 + }

+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

+53 -23

src/utils/useHydrated.ts

··· 9 9 AppBskyFeedPost, 10 10 AtUri, 11 11 } from "@atproto/api"; 12 12 + import { useAtom } from "jotai"; 12 13 import { useMemo } from "react"; 13 14 14 14 - import { useQueryIdentity,useQueryPost, useQueryProfile } from "./useQuery"; 15 15 + import { imgCDNAtom, videoCDNAtom } from "./atoms"; 16 16 + import { useQueryIdentity, useQueryPost, useQueryProfile } from "./useQuery"; 15 17 16 16 - type QueryResultData<T extends (...args: any) => any> = ReturnType<T> extends 17 17 - | { data: infer D } 18 18 - | undefined 19 19 - ? D 20 20 - : never; 18 18 + type QueryResultData<T extends (...args: any) => any> = 19 19 + ReturnType<T> extends { data: infer D } | undefined ? D : never; 21 20 22 21 function asTyped<T extends { $type: string }>(obj: T): $Typed<T> { 23 22 return obj as $Typed<T>; ··· 26 25 export function hydrateEmbedImages( 27 26 embed: AppBskyEmbedImages.Main, 28 27 did: string, 28 28 + cdn: string 29 29 ): $Typed<AppBskyEmbedImages.View> { 30 30 return asTyped({ 31 31 $type: "app.bsky.embed.images#view" as const, ··· 34 34 const link = img.image.ref?.["$link"]; 35 35 if (!link) return null; 36 36 return { 37 37 - thumb: `https://cdn.bsky.app/img/feed_thumbnail/plain/${did}/${link}@jpeg`, 38 38 - fullsize: `https://cdn.bsky.app/img/feed_fullsize/plain/${did}/${link}@jpeg`, 37 37 + thumb: `https://${cdn}/img/feed_thumbnail/plain/${did}/${link}@jpeg`, 38 38 + fullsize: `https://${cdn}/img/feed_fullsize/plain/${did}/${link}@jpeg`, 39 39 alt: img.alt || "", 40 40 aspectRatio: img.aspectRatio, 41 41 }; ··· 47 47 export function hydrateEmbedExternal( 48 48 embed: AppBskyEmbedExternal.Main, 49 49 did: string, 50 50 + cdn: string 50 51 ): $Typed<AppBskyEmbedExternal.View> { 51 52 return asTyped({ 52 53 $type: "app.bsky.embed.external#view" as const, ··· 55 56 title: embed.external.title, 56 57 description: embed.external.description, 57 58 thumb: embed.external.thumb?.ref?.$link 58 58 - ? `https://cdn.bsky.app/img/feed_thumbnail/plain/${did}/${embed.external.thumb.ref.$link}@jpeg` 59 59 + ? `https://${cdn}/img/feed_thumbnail/plain/${did}/${embed.external.thumb.ref.$link}@jpeg` 59 60 : undefined, 60 61 }, 61 62 }); ··· 64 65 export function hydrateEmbedVideo( 65 66 embed: AppBskyEmbedVideo.Main, 66 67 did: string, 68 68 + videocdn: string 67 69 ): $Typed<AppBskyEmbedVideo.View> { 68 70 const videoLink = embed.video.ref.$link; 69 71 return asTyped({ 70 72 $type: "app.bsky.embed.video#view" as const, 71 71 - playlist: `https://video.bsky.app/watch/${did}/${videoLink}/playlist.m3u8`, 72 72 - thumbnail: `https://video.bsky.app/watch/${did}/${videoLink}/thumbnail.jpg`, 73 73 + playlist: `https://${videocdn}/watch/${did}/${videoLink}/playlist.m3u8`, 74 74 + thumbnail: `https://${videocdn}/watch/${did}/${videoLink}/thumbnail.jpg`, 73 75 aspectRatio: embed.aspectRatio, 74 76 cid: videoLink, 75 77 }); ··· 80 82 quotedPost: QueryResultData<typeof useQueryPost>, 81 83 quotedProfile: QueryResultData<typeof useQueryProfile>, 82 84 quotedIdentity: QueryResultData<typeof useQueryIdentity>, 85 85 + cdn: string 83 86 ): $Typed<AppBskyEmbedRecord.View> | undefined { 84 87 if (!quotedPost || !quotedProfile || !quotedIdentity) { 85 88 return undefined; ··· 91 94 handle: quotedIdentity.handle, 92 95 displayName: quotedProfile.value.displayName ?? quotedIdentity.handle, 93 96 avatar: quotedProfile.value.avatar?.ref?.$link 94 94 - ? `https://cdn.bsky.app/img/avatar/plain/${quotedIdentity.did}/${quotedProfile.value.avatar.ref.$link}@jpeg` 97 97 + ? `https://${cdn}/img/avatar/plain/${quotedIdentity.did}/${quotedProfile.value.avatar.ref.$link}@jpeg` 95 98 : undefined, 96 99 viewer: {}, 97 100 labels: [], ··· 122 125 quotedPost: QueryResultData<typeof useQueryPost>, 123 126 quotedProfile: QueryResultData<typeof useQueryProfile>, 124 127 quotedIdentity: QueryResultData<typeof useQueryIdentity>, 128 128 + cdn: string 125 129 ): $Typed<AppBskyEmbedRecordWithMedia.View> | undefined { 126 130 const hydratedRecord = hydrateEmbedRecord( 127 131 embed.record, 128 132 quotedPost, 129 133 quotedProfile, 130 134 quotedIdentity, 135 135 + cdn 131 136 ); 132 137 133 138 if (!hydratedRecord) return undefined; ··· 148 153 149 154 export function useHydratedEmbed( 150 155 embed: AppBskyFeedPost.Record["embed"], 151 151 - postAuthorDid: string | undefined, 156 156 + postAuthorDid: string | undefined 152 157 ) { 153 158 const recordInfo = useMemo(() => { 154 159 if (AppBskyEmbedRecordWithMedia.isMain(embed)) { ··· 181 186 error: profileError, 182 187 } = useQueryProfile(profileUri); 183 188 189 189 + const [imgcdn] = useAtom(imgCDNAtom); 190 190 + const [videocdn] = useAtom(videoCDNAtom); 191 191 + 184 192 const queryidentityresult = useQueryIdentity(quotedAuthorDid); 185 193 186 194 const hydratedEmbed: HydratedEmbedView | undefined = (() => { 187 195 if (!embed || !postAuthorDid) return undefined; 188 196 189 189 - if (isRecordType && (!usequerypostresults?.data || !quotedProfile || !queryidentityresult?.data)) { 197 197 + if ( 198 198 + isRecordType && 199 199 + (!usequerypostresults?.data || 200 200 + !quotedProfile || 201 201 + !queryidentityresult?.data) 202 202 + ) { 190 203 return undefined; 191 204 } 192 205 193 206 try { 194 207 if (AppBskyEmbedImages.isMain(embed)) { 195 195 - return hydrateEmbedImages(embed, postAuthorDid); 208 208 + return hydrateEmbedImages(embed, postAuthorDid, imgcdn); 196 209 } else if (AppBskyEmbedExternal.isMain(embed)) { 197 197 - return hydrateEmbedExternal(embed, postAuthorDid); 210 210 + return hydrateEmbedExternal(embed, postAuthorDid, imgcdn); 198 211 } else if (AppBskyEmbedVideo.isMain(embed)) { 199 199 - return hydrateEmbedVideo(embed, postAuthorDid); 212 212 + return hydrateEmbedVideo(embed, postAuthorDid, videocdn); 200 213 } else if (AppBskyEmbedRecord.isMain(embed)) { 201 214 return hydrateEmbedRecord( 202 215 embed, 203 216 usequerypostresults?.data, 204 217 quotedProfile, 205 218 queryidentityresult?.data, 219 219 + imgcdn 206 220 ); 207 221 } else if (AppBskyEmbedRecordWithMedia.isMain(embed)) { 208 222 let hydratedMedia: ··· 212 226 | undefined; 213 227 214 228 if (AppBskyEmbedImages.isMain(embed.media)) { 215 215 - hydratedMedia = hydrateEmbedImages(embed.media, postAuthorDid); 229 229 + hydratedMedia = hydrateEmbedImages( 230 230 + embed.media, 231 231 + postAuthorDid, 232 232 + imgcdn 233 233 + ); 216 234 } else if (AppBskyEmbedExternal.isMain(embed.media)) { 217 217 - hydratedMedia = hydrateEmbedExternal(embed.media, postAuthorDid); 235 235 + hydratedMedia = hydrateEmbedExternal( 236 236 + embed.media, 237 237 + postAuthorDid, 238 238 + imgcdn 239 239 + ); 218 240 } else if (AppBskyEmbedVideo.isMain(embed.media)) { 219 219 - hydratedMedia = hydrateEmbedVideo(embed.media, postAuthorDid); 241 241 + hydratedMedia = hydrateEmbedVideo( 242 242 + embed.media, 243 243 + postAuthorDid, 244 244 + videocdn 245 245 + ); 220 246 } 221 247 222 248 if (hydratedMedia) { ··· 226 252 usequerypostresults?.data, 227 253 quotedProfile, 228 254 queryidentityresult?.data, 255 255 + imgcdn 229 256 ); 230 257 } 231 258 } ··· 236 263 })(); 237 264 238 265 const isLoading = isRecordType 239 239 - ? usequerypostresults?.isLoading || isLoadingProfile || queryidentityresult?.isLoading 266 266 + ? usequerypostresults?.isLoading || 267 267 + isLoadingProfile || 268 268 + queryidentityresult?.isLoading 240 269 : false; 241 270 242 242 - const error = usequerypostresults?.error || profileError || queryidentityresult?.error; 271 271 + const error = 272 272 + usequerypostresults?.error || profileError || queryidentityresult?.error; 243 273 244 274 return { data: hydratedEmbed, isLoading, error }; 245 245 - } 275 275 + }

+429 -169

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"; 10 10 + import { useAtom } from "jotai"; 9 11 10 10 - export function constructIdentityQuery(didorhandle?: string) { 12 12 + import { useAuth } from "~/providers/UnifiedAuthProvider"; 13 13 + 14 14 + import { constellationURLAtom, lycanURLAtom, slingshotURLAtom } from "./atoms"; 15 15 + 16 16 + export function constructIdentityQuery( 17 17 + didorhandle?: string, 18 18 + slingshoturl?: string 19 19 + ) { 11 20 return queryOptions({ 12 21 queryKey: ["identity", didorhandle], 13 22 queryFn: async () => { 14 14 - if (!didorhandle) return undefined as undefined 23 23 + if (!didorhandle) return undefined as undefined; 15 24 const res = await fetch( 16 16 - `https://slingshot.microcosm.blue/xrpc/com.bad-example.identity.resolveMiniDoc?identifier=${encodeURIComponent(didorhandle)}` 25 25 + `https://${slingshoturl}/xrpc/com.bad-example.identity.resolveMiniDoc?identifier=${encodeURIComponent(didorhandle)}` 17 26 ); 18 27 if (!res.ok) throw new Error("Failed to fetch post"); 19 28 try { ··· 28 37 } 29 38 }, 30 39 staleTime: /*0,//*/ 5 * 60 * 1000, // 5 minutes 31 31 - gcTime: /*0//*/5 * 60 * 1000, 40 40 + gcTime: /*0//*/ 5 * 60 * 1000, 32 41 }); 33 42 } 34 43 export function useQueryIdentity(didorhandle: string): UseQueryResult< ··· 40 49 }, 41 50 Error 42 51 >; 43 43 - export function useQueryIdentity(): UseQueryResult< 44 44 - undefined, 45 45 - Error 46 46 - > 47 47 - export function useQueryIdentity(didorhandle?: string): 48 48 - UseQueryResult< 49 49 - { 50 50 - did: string; 51 51 - handle: string; 52 52 - pds: string; 53 53 - signing_key: string; 54 54 - } | undefined, 55 55 - Error 56 56 - > 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 + >; 57 63 export function useQueryIdentity(didorhandle?: string) { 58 58 - return useQuery(constructIdentityQuery(didorhandle)); 64 64 + const [slingshoturl] = useAtom(slingshotURLAtom); 65 65 + return useQuery(constructIdentityQuery(didorhandle, slingshoturl)); 59 66 } 60 67 61 61 - export function constructPostQuery(uri?: string) { 68 68 + export function constructPostQuery(uri?: string, slingshoturl?: string) { 62 69 return queryOptions({ 63 70 queryKey: ["post", uri], 64 71 queryFn: async () => { 65 65 - if (!uri) return undefined as undefined 72 72 + if (!uri) return undefined as undefined; 66 73 const res = await fetch( 67 67 - `https://slingshot.microcosm.blue/xrpc/com.bad-example.repo.getUriRecord?at_uri=${encodeURIComponent(uri)}` 74 74 + `https://${slingshoturl}/xrpc/com.bad-example.repo.getUriRecord?at_uri=${encodeURIComponent(uri)}` 68 75 ); 69 76 let data: any; 70 77 try { ··· 73 80 return undefined; 74 81 } 75 82 if (res.status === 400) return undefined; 76 76 - 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 + ) { 77 87 return undefined; // cache “not found” 78 88 } 79 89 try { 80 90 if (!res.ok) throw new Error("Failed to fetch post"); 81 81 - return (data) as { 91 91 + return data as { 82 92 uri: string; 83 93 cid: string; 84 94 value: any; ··· 93 103 return failureCount < 2; 94 104 }, 95 105 staleTime: /*0,//*/ 5 * 60 * 1000, // 5 minutes 96 96 - gcTime: /*0//*/5 * 60 * 1000, 106 106 + gcTime: /*0//*/ 5 * 60 * 1000, 97 107 }); 98 108 } 99 109 export function useQueryPost(uri: string): UseQueryResult< ··· 104 114 }, 105 115 Error 106 116 >; 107 107 - export function useQueryPost(): UseQueryResult< 108 108 - undefined, 109 109 - Error 110 110 - > 111 111 - export function useQueryPost(uri?: string): 112 112 - UseQueryResult< 113 113 - { 114 114 - uri: string; 115 115 - cid: string; 116 116 - value: ATPAPI.AppBskyFeedPost.Record; 117 117 - } | undefined, 118 118 - Error 119 119 - > 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 + >; 120 127 export function useQueryPost(uri?: string) { 121 121 - return useQuery(constructPostQuery(uri)); 128 128 + const [slingshoturl] = useAtom(slingshotURLAtom); 129 129 + return useQuery(constructPostQuery(uri, slingshoturl)); 122 130 } 123 131 124 124 - export function constructProfileQuery(uri?: string) { 132 132 + export function constructProfileQuery(uri?: string, slingshoturl?: string) { 125 133 return queryOptions({ 126 134 queryKey: ["profile", uri], 127 135 queryFn: async () => { 128 128 - if (!uri) return undefined as undefined 136 136 + if (!uri) return undefined as undefined; 129 137 const res = await fetch( 130 130 - `https://slingshot.microcosm.blue/xrpc/com.bad-example.repo.getUriRecord?at_uri=${encodeURIComponent(uri)}` 138 138 + `https://${slingshoturl}/xrpc/com.bad-example.repo.getUriRecord?at_uri=${encodeURIComponent(uri)}` 131 139 ); 132 140 let data: any; 133 141 try { ··· 136 144 return undefined; 137 145 } 138 146 if (res.status === 400) return undefined; 139 139 - 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 + ) { 140 151 return undefined; // cache “not found” 141 152 } 142 153 try { 143 154 if (!res.ok) throw new Error("Failed to fetch post"); 144 144 - return (data) as { 155 155 + return data as { 145 156 uri: string; 146 157 cid: string; 147 158 value: any; ··· 156 167 return failureCount < 2; 157 168 }, 158 169 staleTime: /*0,//*/ 5 * 60 * 1000, // 5 minutes 159 159 - gcTime: /*0//*/5 * 60 * 1000, 170 170 + gcTime: /*0//*/ 5 * 60 * 1000, 160 171 }); 161 172 } 162 173 export function useQueryProfile(uri: string): UseQueryResult< ··· 167 178 }, 168 179 Error 169 180 >; 170 170 - export function useQueryProfile(): UseQueryResult< 171 171 - undefined, 172 172 - Error 173 173 - >; 174 174 - export function useQueryProfile(uri?: string): 175 175 - UseQueryResult< 176 176 - { 181 181 + export function useQueryProfile(): UseQueryResult<undefined, Error>; 182 182 + export function useQueryProfile(uri?: string): UseQueryResult< 183 183 + | { 177 184 uri: string; 178 185 cid: string; 179 186 value: ATPAPI.AppBskyActorProfile.Record; 180 180 - } | undefined, 181 181 - Error 182 182 - > 187 187 + } 188 188 + | undefined, 189 189 + Error 190 190 + >; 183 191 export function useQueryProfile(uri?: string) { 184 184 - return useQuery(constructProfileQuery(uri)); 192 192 + const [slingshoturl] = useAtom(slingshotURLAtom); 193 193 + return useQuery(constructProfileQuery(uri, slingshoturl)); 185 194 } 186 195 187 196 // export function constructConstellationQuery( ··· 216 225 // method: "/links/all", 217 226 // target: string 218 227 // ): QueryOptions<linksAllResponse, Error>; 219 219 - export function constructConstellationQuery(query?:{ 228 228 + export function constructConstellationQuery(query?: { 229 229 + constellation: string; 220 230 method: 221 231 | "/links" 222 232 | "/links/distinct-dids" 223 233 | "/links/count" 224 234 | "/links/count/distinct-dids" 225 235 | "/links/all" 226 226 - | "undefined", 227 227 - target: string, 228 228 - collection?: string, 229 229 - path?: string, 230 230 - cursor?: string, 231 231 - dids?: string[] 232 232 - } 233 233 - ) { 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 + }) { 234 243 // : QueryOptions< 235 244 // | linksRecordsResponse 236 245 // | linksDidsResponse ··· 240 249 // Error 241 250 // > 242 251 return queryOptions({ 243 243 - 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, 244 261 queryFn: async () => { 245 245 - if (!query || query.method === "undefined") return undefined as undefined 246 246 - const method = query.method 247 247 - const target = query.target 248 248 - const collection = query?.collection 249 249 - const path = query?.path 250 250 - const cursor = query.cursor 251 251 - 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; 252 269 const res = await fetch( 253 253 - `https://constellation.microcosm.blue${method}?target=${encodeURIComponent(target)}${collection ? `&collection=${encodeURIComponent(collection)}` : ""}${path ? `&path=${encodeURIComponent(path)}` : ""}${cursor ? `&cursor=${encodeURIComponent(cursor)}` : ""}${dids ? dids.map((did) => `&did=${encodeURIComponent(did)}`).join("") : ""}` 270 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("") : ""}` 254 271 ); 255 272 if (!res.ok) throw new Error("Failed to fetch post"); 256 273 try { ··· 274 291 }, 275 292 // enforce short lifespan 276 293 staleTime: /*0,//*/ 5 * 60 * 1000, // 5 minutes 277 277 - gcTime: /*0//*/5 * 60 * 1000, 294 294 + gcTime: /*0//*/ 5 * 60 * 1000, 278 295 }); 279 296 } 297 297 + // todo do more of these instead of overloads since overloads sucks so much apparently 298 298 + export function useQueryConstellationLinksCountDistinctDids(query?: { 299 299 + method: "/links/count/distinct-dids"; 300 300 + target: string; 301 301 + collection: string; 302 302 + path: string; 303 303 + cursor?: string; 304 304 + }): UseQueryResult<linksCountResponse, Error> | undefined { 305 305 + //if (!query) return; 306 306 + const [constellationurl] = useAtom(constellationURLAtom); 307 307 + const queryres = useQuery( 308 308 + constructConstellationQuery( 309 309 + query && { constellation: constellationurl, ...query } 310 310 + ) 311 311 + ) as unknown as UseQueryResult<linksCountResponse, Error>; 312 312 + if (!query) { 313 313 + return undefined as undefined; 314 314 + } 315 315 + return queryres as UseQueryResult<linksCountResponse, Error>; 316 316 + } 317 317 + 280 318 export function useQueryConstellation(query: { 281 319 method: "/links"; 282 320 target: string; ··· 339 377 > 340 378 | undefined { 341 379 //if (!query) return; 380 380 + const [constellationurl] = useAtom(constellationURLAtom); 342 381 return useQuery( 343 343 - constructConstellationQuery(query) 382 382 + constructConstellationQuery( 383 383 + query && { constellation: constellationurl, ...query } 384 384 + ) 344 385 ); 345 386 } 346 387 347 347 - type linksRecord = { 388 388 + export type linksRecord = { 348 389 did: string; 349 390 collection: string; 350 391 rkey: string; ··· 384 425 }) { 385 426 return queryOptions({ 386 427 // The query key includes all dependencies to ensure it refetches when they change 387 387 - 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 + ], 388 433 queryFn: async () => { 389 389 - if (!options) return undefined as undefined 434 434 + if (!options) return undefined as undefined; 390 435 const { feedUri, agent, isAuthed, pdsUrl, feedServiceDid } = options; 391 436 if (isAuthed) { 392 437 // Authenticated flow 393 438 if (!agent || !pdsUrl || !feedServiceDid) { 394 394 - 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 + ); 395 442 } 396 443 const url = `${pdsUrl}/xrpc/app.bsky.feed.getFeedSkeleton?feed=${encodeURIComponent(feedUri)}`; 397 444 const res = await agent.fetchHandler(url, { ··· 401 448 "Content-Type": "application/json", 402 449 }, 403 450 }); 404 404 - 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}`); 405 453 return (await res.json()) as ATPAPI.AppBskyFeedGetFeedSkeleton.OutputSchema; 406 454 } else { 407 455 // Unauthenticated flow (using a public PDS/AppView) 408 456 const url = `https://discover.bsky.app/xrpc/app.bsky.feed.getFeedSkeleton?feed=${encodeURIComponent(feedUri)}`; 409 457 const res = await fetch(url); 410 410 - 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}`); 411 460 return (await res.json()) as ATPAPI.AppBskyFeedGetFeedSkeleton.OutputSchema; 412 461 } 413 462 }, ··· 425 474 return useQuery(constructFeedSkeletonQuery(options)); 426 475 } 427 476 428 428 - 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 + ) { 429 481 return queryOptions({ 430 430 - queryKey: ['preferences', agent?.did], 482 482 + queryKey: ["preferences", agent?.did], 431 483 queryFn: async () => { 432 484 if (!agent || !pdsUrl) throw new Error("Agent or PDS URL not available"); 433 485 const url = `${pdsUrl}/xrpc/app.bsky.actor.getPreferences`; ··· 438 490 }); 439 491 } 440 492 export function useQueryPreferences(options: { 441 441 - agent?: ATPAPI.Agent | undefined, pdsUrl?: string | undefined 493 493 + agent?: ATPAPI.Agent | undefined; 494 494 + pdsUrl?: string | undefined; 442 495 }) { 443 496 return useQuery(constructPreferencesQuery(options.agent, options.pdsUrl)); 444 497 } 445 498 446 446 - 447 447 - 448 448 - export function constructArbitraryQuery(uri?: string) { 499 499 + export function constructArbitraryQuery(uri?: string, slingshoturl?: string) { 449 500 return queryOptions({ 450 501 queryKey: ["arbitrary", uri], 451 502 queryFn: async () => { 452 452 - if (!uri) return undefined as undefined 503 503 + if (!uri) return undefined as undefined; 453 504 const res = await fetch( 454 454 - `https://slingshot.microcosm.blue/xrpc/com.bad-example.repo.getUriRecord?at_uri=${encodeURIComponent(uri)}` 505 505 + `https://${slingshoturl}/xrpc/com.bad-example.repo.getUriRecord?at_uri=${encodeURIComponent(uri)}` 455 506 ); 456 507 let data: any; 457 508 try { ··· 460 511 return undefined; 461 512 } 462 513 if (res.status === 400) return undefined; 463 463 - 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 + ) { 464 518 return undefined; // cache “not found” 465 519 } 466 520 try { 467 521 if (!res.ok) throw new Error("Failed to fetch post"); 468 468 - return (data) as { 522 522 + return data as { 469 523 uri: string; 470 524 cid: string; 471 525 value: any; ··· 480 534 return failureCount < 2; 481 535 }, 482 536 staleTime: /*0,//*/ 5 * 60 * 1000, // 5 minutes 483 483 - gcTime: /*0//*/5 * 60 * 1000, 537 537 + gcTime: /*0//*/ 5 * 60 * 1000, 484 538 }); 485 539 } 486 540 export function useQueryArbitrary(uri: string): UseQueryResult< ··· 491 545 }, 492 546 Error 493 547 >; 494 494 - export function useQueryArbitrary(): UseQueryResult< 495 495 - undefined, 496 496 - Error 497 497 - >; 548 548 + export function useQueryArbitrary(): UseQueryResult<undefined, Error>; 498 549 export function useQueryArbitrary(uri?: string): UseQueryResult< 499 499 - { 500 500 - uri: string; 501 501 - cid: string; 502 502 - value: any; 503 503 - } | undefined, 550 550 + | { 551 551 + uri: string; 552 552 + cid: string; 553 553 + value: any; 554 554 + } 555 555 + | undefined, 504 556 Error 505 557 >; 506 558 export function useQueryArbitrary(uri?: string) { 507 507 - return useQuery(constructArbitraryQuery(uri)); 559 559 + const [slingshoturl] = useAtom(slingshotURLAtom); 560 560 + return useQuery(constructArbitraryQuery(uri, slingshoturl)); 508 561 } 509 562 510 510 - export function constructFallbackNothingQuery(){ 563 563 + export function constructFallbackNothingQuery() { 511 564 return queryOptions({ 512 565 queryKey: ["nothing"], 513 566 queryFn: async () => { 514 514 - return undefined 567 567 + return undefined; 515 568 }, 516 569 }); 517 570 } ··· 525 578 }[]; 526 579 }; 527 580 528 528 - export function constructAuthorFeedQuery(did: string, pdsUrl: string) { 581 581 + export function constructAuthorFeedQuery( 582 582 + did: string, 583 583 + pdsUrl: string, 584 584 + collection: string = "app.bsky.feed.post" 585 585 + ) { 529 586 return queryOptions({ 530 530 - queryKey: ['authorFeed', did], 587 587 + queryKey: ["authorFeed", did, collection], 531 588 queryFn: async ({ pageParam }: QueryFunctionContext) => { 532 589 const limit = 25; 533 533 - 590 590 + 534 591 const cursor = pageParam as string | undefined; 535 535 - const cursorParam = cursor ? `&cursor=${cursor}` : ''; 536 536 - 537 537 - const url = `${pdsUrl}/xrpc/com.atproto.repo.listRecords?repo=${did}&collection=app.bsky.feed.post&limit=${limit}${cursorParam}`; 538 538 - 592 592 + const cursorParam = cursor ? `&cursor=${cursor}` : ""; 593 593 + 594 594 + const url = `${pdsUrl}/xrpc/com.atproto.repo.listRecords?repo=${did}&collection=${collection}&limit=${limit}${cursorParam}`; 595 595 + 539 596 const res = await fetch(url); 540 597 if (!res.ok) throw new Error("Failed to fetch author's posts"); 541 541 - 598 598 + 542 599 return res.json() as Promise<ListRecordsResponse>; 543 600 }, 544 601 }); 545 602 } 546 603 547 547 - export function useInfiniteQueryAuthorFeed(did: string | undefined, pdsUrl: string | undefined) { 548 548 - const { queryKey, queryFn } = constructAuthorFeedQuery(did!, pdsUrl!); 549 549 - 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 + 550 615 return useInfiniteQuery({ 551 616 queryKey, 552 617 queryFn, ··· 564 629 isAuthed: boolean; 565 630 pdsUrl?: string; 566 631 feedServiceDid?: string; 632 632 + // todo the hell is a unauthedfeedurl 633 633 + unauthedfeedurl?: string; 567 634 }) { 568 568 - const { feedUri, agent, isAuthed, pdsUrl, feedServiceDid } = options; 569 569 - 635 635 + const { feedUri, agent, isAuthed, pdsUrl, feedServiceDid, unauthedfeedurl } = 636 636 + options; 637 637 + 570 638 return queryOptions({ 571 639 queryKey: ["feedSkeleton", feedUri, { isAuthed, did: agent?.did }], 572 572 - 573 573 - queryFn: async ({ pageParam }: QueryFunctionContext): Promise<FeedSkeletonPage> => { 640 640 + 641 641 + queryFn: async ({ 642 642 + pageParam, 643 643 + }: QueryFunctionContext): Promise<FeedSkeletonPage> => { 574 644 const cursorParam = pageParam ? `&cursor=${pageParam}` : ""; 575 575 - 576 576 - if (isAuthed) { 645 645 + 646 646 + if (isAuthed && !unauthedfeedurl) { 577 647 if (!agent || !pdsUrl || !feedServiceDid) { 578 578 - 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 + ); 579 651 } 580 652 const url = `${pdsUrl}/xrpc/app.bsky.feed.getFeedSkeleton?feed=${encodeURIComponent(feedUri)}${cursorParam}`; 581 653 const res = await agent.fetchHandler(url, { ··· 585 657 "Content-Type": "application/json", 586 658 }, 587 659 }); 588 588 - 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}`); 589 662 return (await res.json()) as FeedSkeletonPage; 590 663 } else { 591 591 - const url = `https://discover.bsky.app/xrpc/app.bsky.feed.getFeedSkeleton?feed=${encodeURIComponent(feedUri)}${cursorParam}`; 664 664 + const url = `https://${unauthedfeedurl ? unauthedfeedurl : "discover.bsky.app"}/xrpc/app.bsky.feed.getFeedSkeleton?feed=${encodeURIComponent(feedUri)}${cursorParam}`; 592 665 const res = await fetch(url); 593 593 - 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}`); 594 668 return (await res.json()) as FeedSkeletonPage; 595 669 } 596 670 }, ··· 603 677 isAuthed: boolean; 604 678 pdsUrl?: string; 605 679 feedServiceDid?: string; 680 680 + unauthedfeedurl?: string; 606 681 }) { 607 682 const { queryKey, queryFn } = constructInfiniteFeedSkeletonQuery(options); 608 608 - 609 609 - return useInfiniteQuery({ 610 610 - queryKey, 611 611 - queryFn, 612 612 - initialPageParam: undefined as never, 613 613 - getNextPageParam: (lastPage) => lastPage.cursor as null | undefined, 614 614 - staleTime: Infinity, 615 615 - refetchOnWindowFocus: false, 616 616 - enabled: !!options.feedUri && (options.isAuthed ? !!options.agent && !!options.pdsUrl && !!options.feedServiceDid : true), 617 617 - }); 683 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 + }; 618 702 } 619 619 - 620 703 621 704 export function yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks(query?: { 622 622 - method: '/links' 623 623 - target?: string 624 624 - collection: string 625 625 - 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; 626 711 }) { 627 627 - const constellationHost = 'constellation.microcosm.blue' 628 628 - console.log( 629 629 - 'yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks', 630 630 - query, 631 631 - ) 712 712 + const safemult = query?.staleMult ?? 1; 713 713 + // console.log( 714 714 + // 'yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks', 715 715 + // query, 716 716 + // ) 632 717 633 718 return infiniteQueryOptions({ 634 719 enabled: !!query?.target, 635 720 queryKey: [ 636 636 - 'reddwarf_constellation', 721 721 + "reddwarf_constellation", 637 722 query?.method, 638 723 query?.target, 639 724 query?.collection, 640 725 query?.path, 641 726 ] as const, 642 727 643 643 - queryFn: async ({pageParam}: {pageParam?: string}) => { 644 644 - if (!query || !query?.target) return undefined 728 728 + queryFn: async ({ pageParam }: { pageParam?: string }) => { 729 729 + if (!query || !query?.target) return undefined; 645 730 646 646 - const method = query.method 647 647 - const target = query.target 648 648 - const collection = query.collection 649 649 - const path = query.path 650 650 - 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; 651 736 652 737 const res = await fetch( 653 653 - `https://${constellationHost}${method}?target=${encodeURIComponent(target)}${ 654 654 - collection ? `&collection=${encodeURIComponent(collection)}` : '' 655 655 - }${path ? `&path=${encodeURIComponent(path)}` : ''}${ 656 656 - cursor ? `&cursor=${encodeURIComponent(cursor)}` : '' 657 657 - }`, 658 658 - ) 738 738 + `https://${query.constellation}${method}?target=${encodeURIComponent(target)}${ 739 739 + collection ? `&collection=${encodeURIComponent(collection)}` : "" 740 740 + }${path ? `&path=${encodeURIComponent(path)}` : ""}${ 741 741 + cursor ? `&cursor=${encodeURIComponent(cursor)}` : "" 742 742 + }` 743 743 + ); 659 744 660 660 - if (!res.ok) throw new Error('Failed to fetch') 745 745 + if (!res.ok) throw new Error("Failed to fetch"); 661 746 662 662 - return (await res.json()) as linksRecordsResponse 747 747 + return (await res.json()) as linksRecordsResponse; 663 748 }, 664 749 665 665 - getNextPageParam: lastPage => { 666 666 - return (lastPage as any)?.cursor ?? undefined 750 750 + getNextPageParam: (lastPage) => { 751 751 + return (lastPage as any)?.cursor ?? undefined; 667 752 }, 668 753 initialPageParam: undefined, 669 669 - staleTime: 5 * 60 * 1000, 670 670 - gcTime: 5 * 60 * 1000, 671 671 - }) 672 672 - } 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 + }

+6 -1

vite.config.ts

··· 10 10 11 11 import { generateMetadataPlugin } from "./oauthdev.mts"; 12 12 13 13 - const PROD_URL = "https://reddwarf.whey.party" 13 13 + const PROD_URL = "https://reddwarf.app" 14 14 const DEV_URL = "https://local3768forumtest.whey.party" 15 15 + 16 16 + const PROD_HANDLE_RESOLVER_PDS = "https://pds-nd.whey.party" 17 17 + const DEV_HANDLE_RESOLVER_PDS = "https://bsky.social" 15 18 16 19 function shp(url: string): string { 17 20 return url.replace(/^https?:\/\//, ''); ··· 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({