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

+13

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

+3

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", 16 18 "@radix-ui/react-slider": "^1.3.6", 17 19 "@tailwindcss/vite": "^4.0.6", 18 20 "@tanstack/query-sync-storage-persister": "^5.85.6", ··· 31 33 "react": "^19.0.0", 32 34 "react-dom": "^19.0.0", 33 35 "react-player": "^3.3.2", 36 36 + "sonner": "^2.0.7", 34 37 "tailwindcss": "^4.0.6", 35 38 "tanstack-router-keepalive": "^1.0.0" 36 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 + );

+6 -7

src/components/Login.tsx

··· 24 24 className={ 25 25 compact 26 26 ? "flex items-center justify-center p-1" 27 27 - : "p-6 bg-gray-100 dark:bg-gray-900 rounded-xl shadow border border-gray-200 dark:border-gray-800 mt-6 mx-4 flex justify-center items-center h-[280px]" 27 27 + : "p-6 bg-gray-100 dark:bg-gray-900 rounded-xl shadow border border-gray-200 dark:border-gray-800 mt-4 mx-4 flex justify-center items-center h-[280px]" 28 28 } 29 29 > 30 30 <span ··· 43 43 // Large view 44 44 if (!compact) { 45 45 return ( 46 46 - <div className="p-4 bg-gray-100 dark:bg-gray-900 rounded-xl border-gray-200 dark:border-gray-800 mt-6 mx-4"> 46 46 + <div className="p-4 bg-gray-100 dark:bg-gray-900 rounded-xl border-gray-200 dark:border-gray-800 mt-4 mx-4"> 47 47 <div className="flex flex-col items-center justify-center text-center"> 48 48 <p className="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-100"> 49 49 You are logged in! ··· 77 77 if (!compact) { 78 78 // Large view renders the form directly in the card 79 79 return ( 80 80 - <div className="p-4 bg-gray-100 dark:bg-gray-900 rounded-xl border-gray-200 dark:border-gray-800 mt-6 mx-4"> 80 80 + <div className="p-4 bg-gray-100 dark:bg-gray-900 rounded-xl border-gray-200 dark:border-gray-800 mt-4 mx-4"> 81 81 <UnifiedLoginForm /> 82 82 </div> 83 83 ); ··· 311 311 312 312 // --- Profile Component (now supports a `large` prop for styling) --- 313 313 export const ProfileThing = ({ 314 314 - agent: _unused, 314 314 + agent, 315 315 large = false, 316 316 }: { 317 317 - agent?: Agent | null; 317 317 + agent: Agent | null; 318 318 large?: boolean; 319 319 }) => { 320 320 - const { agent } = useAuth(); 321 321 - const did = ((agent as AtpAgent).session?.did ?? 320 320 + const did = ((agent as AtpAgent)?.session?.did ?? 322 321 (agent as AtpAgent)?.assertDid ?? 323 322 agent?.did) as string | undefined; 324 323 const { data: identity } = useQueryIdentity(did);

+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 + */

+334 -110

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, constellationURLAtom, imgCDNAtom, 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 404 404 - const [constellationurl] = useAtom(constellationURLAtom) 422 422 + const [constellationurl] = useAtom(constellationURLAtom); 405 423 406 424 const infinitequeryresults = useInfiniteQuery({ 407 425 ...yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks( ··· 425 443 426 444 // auto-fetch all pages 427 445 useEffect(() => { 428 428 - if (!maxReplies || isQuote) return; 446 446 + if (!maxReplies || isQuote || TEMPLINEAR) return; 429 447 if ( 430 448 infinitequeryresults.hasNextPage && 431 449 !infinitequeryresults.isFetchingNextPage ··· 433 451 console.log("Fetching the next page..."); 434 452 infinitequeryresults.fetchNextPage(); 435 453 } 436 436 - }, [infinitequeryresults]); 454 454 + }, [TEMPLINEAR, infinitequeryresults, isQuote, maxReplies]); 437 455 438 456 const replyAturis = repliesData 439 457 ? repliesData.pages.flatMap((page) => ··· 510 528 ? true 511 529 : maxReplies && !oldestOpsReplyElseNewestNonOpsReply 512 530 ? false 513 513 - : bottomReplyLine 531 531 + : maxReplies === 0 && (!replies || (!!replies && replies === 0)) 532 532 + ? false 533 533 + : bottomReplyLine 514 534 } 515 535 topReplyLine={topReplyLine} 516 536 //bottomBorder={maxReplies&&oldestOpsReplyElseNewestNonOpsReply ? false : bottomBorder} ··· 528 548 ref={ref} 529 549 dataIndexPropPass={dataIndexPropPass} 530 550 nopics={nopics} 551 551 + concise={concise} 531 552 lightboxCallback={lightboxCallback} 532 553 maxReplies={maxReplies} 533 554 isQuote={isQuote} 555 555 + filterNoReplies={filterNoReplies} 556 556 + filterMustHaveMedia={filterMustHaveMedia} 557 557 + filterMustBeReply={filterMustBeReply} 534 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 + </> 535 569 {!isQuote && oldestOpsReplyElseNewestNonOpsReply && ( 536 570 <> 537 571 {/* <span>hello {maxReplies}</span> */} ··· 551 585 ref={ref} 552 586 dataIndexPropPass={dataIndexPropPass} 553 587 nopics={nopics} 588 588 + concise={concise} 554 589 lightboxCallback={lightboxCallback} 555 590 maxReplies={ 556 591 maxReplies && maxReplies > 0 ? maxReplies - 1 : undefined 557 592 } 558 593 /> 559 559 - {maxReplies && maxReplies - 1 === 0 && replies && replies > 0 && ( 560 560 - <MoreReplies atUri={oldestOpsReplyElseNewestNonOpsReply} /> 561 561 - )} 562 594 </> 563 595 )} 564 596 </> ··· 623 655 ref, 624 656 dataIndexPropPass, 625 657 nopics, 658 658 + concise, 626 659 lightboxCallback, 627 660 maxReplies, 628 661 isQuote, 662 662 + filterNoReplies, 663 663 + filterMustHaveMedia, 664 664 + filterMustBeReply, 629 665 }: { 630 666 postRecord: any; 631 667 profileRecord: any; ··· 641 677 feedviewpost?: boolean; 642 678 repostedby?: string; 643 679 style?: React.CSSProperties; 644 644 - ref?: React.Ref<HTMLDivElement>; 680 680 + ref?: React.RefObject<HTMLDivElement>; 645 681 dataIndexPropPass?: number; 646 682 nopics?: boolean; 683 683 + concise?: boolean; 647 684 lightboxCallback?: (d: LightboxProps) => void; 648 685 maxReplies?: number; 649 686 isQuote?: boolean; 687 687 + filterNoReplies?: boolean; 688 688 + filterMustHaveMedia?: boolean; 689 689 + filterMustBeReply?: boolean; 650 690 }) { 651 691 // /*mass comment*/ console.log(`received aturi: ${aturi} of post content: ${postRecord}`); 652 692 const navigate = useNavigate(); ··· 717 757 // run(); 718 758 // }, [postRecord, resolved?.did]); 719 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 + 720 777 const { 721 778 data: hydratedEmbed, 722 779 isLoading: isEmbedLoading, 723 780 error: embedError, 724 781 } = useHydratedEmbed(postRecord?.value?.embed, resolved?.did); 725 782 726 726 - const [imgcdn] = useAtom(imgCDNAtom) 783 783 + const [imgcdn] = useAtom(imgCDNAtom); 727 784 728 785 const parsedaturi = new AtUri(aturi); //parseAtUri(aturi); 729 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 + 730 810 const fakepost = React.useMemo<AppBskyFeedDefs.PostView>( 731 811 () => ({ 732 812 $type: "app.bsky.feed.defs#postView", 733 813 uri: aturi, 734 814 cid: postRecord?.cid || "", 735 735 - author: { 736 736 - did: resolved?.did || "", 737 737 - handle: resolved?.handle || "", 738 738 - displayName: profileRecord?.value?.displayName || "", 739 739 - avatar: getAvatarUrl(profileRecord, resolved?.did, imgcdn) || "", 740 740 - viewer: undefined, 741 741 - labels: profileRecord?.labels || undefined, 742 742 - verification: undefined, 743 743 - }, 815 815 + author: fakeprofileviewbasic, 744 816 record: postRecord?.value || {}, 745 817 embed: hydratedEmbed ?? undefined, 746 818 replyCount: repliesCount ?? 0, ··· 757 829 postRecord?.cid, 758 830 postRecord?.value, 759 831 postRecord?.labels, 760 760 - resolved?.did, 761 761 - resolved?.handle, 762 762 - profileRecord, 832 832 + fakeprofileviewbasic, 763 833 hydratedEmbed, 764 834 repliesCount, 765 835 repostsCount, 766 836 likesCount, 767 767 - imgcdn 768 837 ] 769 838 ); 770 839 ··· 799 868 // }, [fakepost, get, set]); 800 869 const thereply = (fakepost?.record as AppBskyFeedPost.Record)?.reply?.parent 801 870 ?.uri; 802 802 - const feedviewpostreplydid = thereply ? new AtUri(thereply).host : undefined; 871 871 + const feedviewpostreplydid = 872 872 + thereply && !filterNoReplies ? new AtUri(thereply).host : undefined; 803 873 const replyhookvalue = useQueryIdentity( 804 874 feedviewpost ? feedviewpostreplydid : undefined 805 875 ); ··· 810 880 repostedby ? aturirepostbydid : undefined 811 881 ); 812 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 + 813 890 return ( 814 891 <> 815 892 {/* <p> 816 893 {postRecord?.value?.embed.$type + " " + JSON.stringify(hydratedEmbed)} 817 894 </p> */} 895 895 + {/* <span>filtermustbereply is {filterMustBeReply ? "true" : "false"}</span> 896 896 + <span>thereply is {thereply ? "true" : "false"}</span> */} 818 897 <UniversalPostRenderer 819 898 expanded={detailed} 820 899 onPostClick={() => ··· 837 916 } 838 917 }} 839 918 post={fakepost} 919 919 + uprrrsauthor={fakeprofileviewdetailed} 840 920 salt={aturi} 841 921 bottomReplyLine={bottomReplyLine} 842 922 topReplyLine={topReplyLine} ··· 848 928 ref={ref} 849 929 dataIndexPropPass={dataIndexPropPass} 850 930 nopics={nopics} 931 931 + concise={concise} 851 932 lightboxCallback={lightboxCallback} 852 933 maxReplies={maxReplies} 853 934 isQuote={isQuote} ··· 1141 1222 //import Masonry from "@mui/lab/Masonry"; 1142 1223 import { 1143 1224 type $Typed, 1225 1225 + AppBskyActorDefs, 1144 1226 AppBskyEmbedDefs, 1145 1227 AppBskyEmbedExternal, 1146 1228 AppBskyEmbedImages, ··· 1170 1252 1171 1253 import defaultpfp from "~/../public/favicon.png"; 1172 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"; 1173 1261 import type { LightboxProps } from "~/routes/profile.$did/post.$rkey.image.$i"; 1262 1262 + import { useFastLike } from "~/utils/likeMutationQueue"; 1174 1263 // import type { OutputSchema } from "@atproto/api/dist/client/types/app/bsky/feed/getFeed"; 1175 1264 // import type { 1176 1265 // ViewRecord, ··· 1278 1367 1279 1368 function UniversalPostRenderer({ 1280 1369 post, 1370 1370 + uprrrsauthor, 1281 1371 //setMainItem, 1282 1372 //isMainItem, 1283 1373 onPostClick, ··· 1298 1388 ref, 1299 1389 dataIndexPropPass, 1300 1390 nopics, 1391 1391 + concise, 1301 1392 lightboxCallback, 1302 1393 maxReplies, 1303 1394 }: { 1304 1395 post: PostView; 1396 1396 + uprrrsauthor?: AppBskyActorDefs.ProfileViewDetailed; 1305 1397 // optional for now because i havent ported every use to this yet 1306 1398 // setMainItem?: React.Dispatch< 1307 1399 // React.SetStateAction<AppBskyFeedDefs.FeedViewPost> ··· 1320 1412 depth?: number; 1321 1413 repostedby?: string; 1322 1414 style?: React.CSSProperties; 1323 1323 - ref?: React.Ref<HTMLDivElement>; 1415 1415 + ref?: React.RefObject<HTMLDivElement>; 1324 1416 dataIndexPropPass?: number; 1325 1417 nopics?: boolean; 1418 1418 + concise?: boolean; 1326 1419 lightboxCallback?: (d: LightboxProps) => void; 1327 1420 maxReplies?: number; 1328 1421 }) { 1329 1422 const parsed = new AtUri(post.uri); 1330 1423 const navigate = useNavigate(); 1331 1331 - const [likedPosts, setLikedPosts] = useAtom(likedPostsAtom); 1332 1424 const [hasRetweeted, setHasRetweeted] = useState<boolean>( 1333 1425 post.viewer?.repost ? true : false 1334 1426 ); 1335 1335 - const [hasLiked, setHasLiked] = useState<boolean>( 1336 1336 - post.uri in likedPosts || post.viewer?.like ? true : false 1337 1337 - ); 1338 1427 const [, setComposerPost] = useAtom(composerAtom); 1339 1428 const { agent } = useAuth(); 1340 1340 - const [likeUri, setLikeUri] = useState<string | undefined>(post.viewer?.like); 1341 1429 const [retweetUri, setRetweetUri] = useState<string | undefined>( 1342 1430 post.viewer?.repost 1343 1431 ); 1344 1344 - 1345 1345 - const likeOrUnlikePost = async () => { 1346 1346 - const newLikedPosts = { ...likedPosts }; 1347 1347 - if (!agent) { 1348 1348 - console.error("Agent is null or undefined"); 1349 1349 - return; 1350 1350 - } 1351 1351 - if (hasLiked) { 1352 1352 - if (post.uri in likedPosts) { 1353 1353 - const likeUri = likedPosts[post.uri]; 1354 1354 - setLikeUri(likeUri); 1355 1355 - } 1356 1356 - if (likeUri) { 1357 1357 - await agent.deleteLike(likeUri); 1358 1358 - setHasLiked(false); 1359 1359 - delete newLikedPosts[post.uri]; 1360 1360 - } 1361 1361 - } else { 1362 1362 - const { uri } = await agent.like(post.uri, post.cid); 1363 1363 - setLikeUri(uri); 1364 1364 - setHasLiked(true); 1365 1365 - newLikedPosts[post.uri] = uri; 1366 1366 - } 1367 1367 - setLikedPosts(newLikedPosts); 1368 1368 - }; 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]) 1369 1439 1370 1440 const repostOrUnrepostPost = async () => { 1371 1441 if (!agent) { ··· 1396 1466 : undefined; 1397 1467 1398 1468 const emergencySalt = randomString(); 1399 1399 - 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 }) 1400 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); 1401 1507 1402 1508 /* fuck you */ 1403 1509 const isMainItem = false; 1404 1510 const setMainItem = (any: any) => {}; 1405 1511 // eslint-disable-next-line react-hooks/refs 1406 1406 - console.log("Received ref in UniversalPostRenderer:", ref); 1512 1512 + //console.log("Received ref in UniversalPostRenderer:", usedref); 1407 1513 return ( 1408 1514 <div ref={ref} style={style} data-index={dataIndexPropPass}> 1409 1515 <div ··· 1485 1591 className="bg-gray-500 dark:bg-gray-400" 1486 1592 /> 1487 1593 )} 1488 1488 - <div 1489 1489 - style={{ 1490 1490 - position: "absolute", 1491 1491 - //top: isRepost ? "calc(16px + 1rem)" : 16, 1492 1492 - //left: 16, 1493 1493 - zIndex: 1, 1494 1494 - top: isRepost 1495 1495 - ? "calc(16px + 1rem)" 1496 1496 - : isQuote 1497 1497 - ? 12 1498 1498 - : topReplyLine 1499 1499 - ? 8 1500 1500 - : 16, 1501 1501 - left: isQuote ? 12 : 16, 1502 1502 - }} 1503 1503 - onClick={onProfileClick} 1504 1504 - > 1505 1505 - <img 1506 1506 - src={post.author.avatar || defaultpfp} 1507 1507 - alt="avatar" 1508 1508 - // transition={{ 1509 1509 - // type: "spring", 1510 1510 - // stiffness: 260, 1511 1511 - // damping: 20, 1512 1512 - // }} 1513 1513 - style={{ 1514 1514 - borderRadius: "50%", 1515 1515 - marginRight: 12, 1516 1516 - objectFit: "cover", 1517 1517 - //background: theme.border, 1518 1518 - //border: `1px solid ${theme.border}`, 1519 1519 - width: isQuote ? 16 : 42, 1520 1520 - height: isQuote ? 16 : 42, 1521 1521 - }} 1522 1522 - className="border border-gray-300 dark:border-gray-800 bg-gray-300 dark:bg-gray-600" 1523 1523 - /> 1524 1524 - </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 + 1525 1680 <div style={{ display: "flex", alignItems: "flex-start", zIndex: 2 }}> 1526 1681 <div 1527 1682 style={{ ··· 1681 1836 <div 1682 1837 style={{ 1683 1838 fontSize: 16, 1684 1684 - marginBottom: !post.embed /*|| depth > 0*/ ? 0 : 8, 1839 1839 + marginBottom: !post.embed || concise ? 0 : 8, 1685 1840 whiteSpace: "pre-wrap", 1686 1841 textAlign: "left", 1687 1842 overflowWrap: "anywhere", 1688 1843 wordBreak: "break-word", 1689 1689 - //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 + }), 1690 1850 }} 1691 1851 className="text-gray-900 dark:text-gray-100" 1692 1852 > ··· 1709 1869 </> 1710 1870 )} 1711 1871 </div> 1712 1712 - {post.embed && depth < 1 ? ( 1872 1872 + {post.embed && depth < 1 && !concise ? ( 1713 1873 <PostEmbeds 1714 1874 embed={post.embed} 1715 1875 //moderation={moderation} ··· 1731 1891 </div> 1732 1892 </> 1733 1893 )} 1734 1734 - <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 + > 1735 1899 <> 1736 1900 {expanded && ( 1737 1901 <div ··· 1827 1991 </DropdownMenu.Root> 1828 1992 <HitSlopButton 1829 1993 onClick={() => { 1830 1830 - likeOrUnlikePost(); 1994 1994 + toggle(); 1831 1995 }} 1832 1996 style={{ 1833 1997 ...btnstyle, 1834 1834 - ...(hasLiked ? { color: "#EC4899" } : {}), 1998 1998 + ...(liked ? { color: "#EC4899" } : {}), 1835 1999 }} 1836 2000 > 1837 1837 - {hasLiked ? <MdiCardsHeart /> : <MdiCardsHeartOutline />} 1838 1838 - {(post.likeCount || 0) + (hasLiked ? 1 : 0)} 2001 2001 + {liked ? <MdiCardsHeart /> : <MdiCardsHeartOutline />} 2002 2002 + {(post.likeCount || 0) + (liked ? 1 : 0)} 1839 2003 </HitSlopButton> 1840 2004 <div style={{ display: "flex", gap: 8 }}> 1841 2005 <HitSlopButton ··· 1849 2013 "/post/" + 1850 2014 post.uri.split("/").pop() 1851 2015 ); 2016 2016 + renderSnack({ 2017 2017 + title: "Copied to clipboard!", 2018 2018 + }); 1852 2019 } catch (_e) { 1853 2020 // idk 2021 2021 + renderSnack({ 2022 2022 + title: "Failed to copy link", 2023 2023 + }); 1854 2024 } 1855 2025 }} 1856 2026 style={{ ··· 1859 2029 > 1860 2030 <MdiShareVariant /> 1861 2031 </HitSlopButton> 1862 1862 - <span style={btnstyle}> 1863 1863 - <MdiMoreHoriz /> 1864 1864 - </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> 1865 2043 </div> 1866 2044 </div> 1867 2045 )} ··· 2087 2265 } 2088 2266 2089 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 + 2090 2272 // custom feed embed (i.e. generator view) 2091 2273 if (AppBskyFeedDefs.isGeneratorView(embed.record)) { 2092 2274 // stopgap sorry ··· 2096 2278 // <MaybeFeedCard view={embed.record} /> 2097 2279 // </div> 2098 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 + ); 2099 2291 } 2100 2292 2101 2293 // list embed ··· 2107 2299 // <MaybeListCard view={embed.record} /> 2108 2300 // </div> 2109 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 + ); 2110 2317 } 2111 2318 2112 2319 // starter pack embed ··· 2118 2325 // <StarterPackCard starterPack={embed.record} /> 2119 2326 // </div> 2120 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 + ); 2121 2343 } 2122 2344 2123 2345 // quote post ··· 2177 2399 </div> 2178 2400 ); 2179 2401 } else { 2402 2402 + console.log("what the hell is a ", embed); 2180 2403 return <>sorry</>; 2181 2404 } 2182 2405 //return <QuotePostRenderer record={embed.record} moderation={moderation} />; ··· 2486 2709 // = 2487 2710 if (AppBskyEmbedVideo.isView(embed)) { 2488 2711 // hls playlist 2712 2712 + if (nopics) return; 2489 2713 const playlist = embed.playlist; 2490 2714 return ( 2491 2715 <SmartHLSPlayer ··· 2577 2801 return { start, end, feature: f.features[0] }; 2578 2802 }); 2579 2803 } 2580 2580 - function renderTextWithFacets({ 2804 2804 + export function renderTextWithFacets({ 2581 2805 text, 2582 2806 facets, 2583 2807 navigate, ··· 2609 2833 className="link" 2610 2834 style={{ 2611 2835 textDecoration: "none", 2612 2612 - color: "rgb(29, 122, 242)", 2836 2836 + color: "var(--link-text-color)", 2613 2837 wordBreak: "break-all", 2614 2838 }} 2615 2839 target="_blank" ··· 2629 2853 result.push( 2630 2854 <span 2631 2855 key={start} 2632 2632 - style={{ color: "rgb(29, 122, 242)" }} 2856 2856 + style={{ color: "var(--link-text-color)" }} 2633 2857 className=" cursor-pointer" 2634 2858 onClick={(e) => { 2635 2859 e.stopPropagation(); ··· 2647 2871 result.push( 2648 2872 <span 2649 2873 key={start} 2650 2650 - style={{ color: "rgb(29, 122, 242)" }} 2874 2874 + style={{ color: "var(--link-text-color)" }} 2651 2875 onClick={(e) => { 2652 2876 e.stopPropagation(); 2653 2877 }}

+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

+190 -26

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"; 23 26 import { FluentEmojiHighContrastGlowingStar } from "~/components/Star"; 27 27 + import { LikeMutationQueueProvider } from "~/providers/LikeMutationQueueProvider"; 24 28 import { UnifiedAuthProvider, useAuth } from "~/providers/UnifiedAuthProvider"; 25 29 import { composerAtom, hueAtom, useAtomCssVar } from "~/utils/atoms"; 26 30 import { seo } from "~/utils/seo"; ··· 78 82 function RootComponent() { 79 83 return ( 80 84 <UnifiedAuthProvider> 81 81 - <RootDocument> 82 82 - <KeepAliveProvider> 83 83 - <KeepAliveOutlet /> 84 84 - </KeepAliveProvider> 85 85 - </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> 86 93 </UnifiedAuthProvider> 87 94 ); 88 95 } 89 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 + 90 201 function RootDocument({ children }: { children: React.ReactNode }) { 91 202 useAtomCssVar(hueAtom, "--tw-gray-hue"); 92 203 const location = useLocation(); ··· 102 213 const isSettings = location.pathname.startsWith("/settings"); 103 214 const isSearch = location.pathname.startsWith("/search"); 104 215 const isFeeds = location.pathname.startsWith("/feeds"); 216 216 + const isModeration = location.pathname.startsWith("/moderation"); 105 217 106 218 const locationEnum: 107 219 | "feeds" ··· 109 221 | "settings" 110 222 | "notifications" 111 223 | "profile" 224 224 + | "moderation" 112 225 | "home" = isFeeds 113 226 ? "feeds" 114 227 : isSearch ··· 119 232 ? "notifications" 120 233 : isProfile 121 234 ? "profile" 122 122 - : "home"; 235 235 + : isModeration 236 236 + ? "moderation" 237 237 + : "home"; 123 238 124 239 const [, setComposerPost] = useAtom(composerAtom); 125 240 ··· 130 245 <div className="min-h-screen flex justify-center bg-gray-50 dark:bg-gray-950"> 131 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"> 132 247 <div className="flex items-center gap-3 mb-4"> 133 133 - <FluentEmojiHighContrastGlowingStar className="h-8 w-8" style={{color: "oklch(0.6616 0.2249 calc(25.88 + (var(--safe-hue) - 28))"}} /> 248 248 + <FluentEmojiHighContrastGlowingStar 249 249 + className="h-8 w-8" 250 250 + style={{ 251 251 + color: 252 252 + "oklch(0.6616 0.2249 calc(25.88 + (var(--safe-hue) - 28))", 253 253 + }} 254 254 + /> 134 255 <span className="font-extrabold text-2xl tracking-tight text-gray-900 dark:text-gray-100"> 135 256 Red Dwarf{" "} 136 257 {/* <span className="text-gray-500 dark:text-gray-400 text-sm"> ··· 154 275 /> 155 276 156 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 + /> 289 289 + <MaterialNavItem 157 290 InactiveIcon={ 158 291 <IconMaterialSymbolsNotificationsOutline className="w-6 h-6" /> 159 292 } ··· 182 315 text="Feeds" 183 316 /> 184 317 <MaterialNavItem 185 185 - InactiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />} 186 186 - ActiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />} 187 187 - 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"} 188 321 onClickCallbback={() => 189 322 navigate({ 190 190 - to: "/search", 323 323 + to: "/moderation", 191 324 //params: { did: agent.assertDid }, 192 325 }) 193 326 } 194 194 - text="Search" 327 327 + text="Moderation" 195 328 /> 196 329 <MaterialNavItem 197 330 InactiveIcon={ ··· 231 364 InactiveIcon={<IconMdiPencilOutline className="w-6 h-6" />} 232 365 ActiveIcon={<IconMdiPencilOutline className="w-6 h-6" />} 233 366 //active={true} 234 234 - onClickCallbback={() => setComposerPost({ kind: 'root' })} 367 367 + onClickCallbback={() => setComposerPost({ kind: "root" })} 235 368 text="Post" 236 369 /> 237 370 </div> ··· 369 502 370 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"> 371 504 <div className="flex items-center gap-3 mb-4"> 372 372 - <FluentEmojiHighContrastGlowingStar className="h-8 w-8" style={{color: "oklch(0.6616 0.2249 calc(25.88 + (var(--safe-hue) - 28))"}} /> 505 505 + <FluentEmojiHighContrastGlowingStar 506 506 + className="h-8 w-8" 507 507 + style={{ 508 508 + color: 509 509 + "oklch(0.6616 0.2249 calc(25.88 + (var(--safe-hue) - 28))", 510 510 + }} 511 511 + /> 373 512 </div> 374 513 <MaterialNavItem 375 514 small ··· 389 528 390 529 <MaterialNavItem 391 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 392 544 InactiveIcon={ 393 545 <IconMaterialSymbolsNotificationsOutline className="w-6 h-6" /> 394 546 } ··· 419 571 /> 420 572 <MaterialNavItem 421 573 small 422 422 - InactiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />} 423 423 - ActiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />} 424 424 - 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"} 425 577 onClickCallbback={() => 426 578 navigate({ 427 427 - to: "/search", 579 579 + to: "/moderation", 428 580 //params: { did: agent.assertDid }, 429 581 }) 430 582 } 431 431 - text="Search" 583 583 + text="Moderation" 432 584 /> 433 585 <MaterialNavItem 434 586 small ··· 471 623 InactiveIcon={<IconMdiPencilOutline className="w-6 h-6" />} 472 624 ActiveIcon={<IconMdiPencilOutline className="w-6 h-6" />} 473 625 //active={true} 474 474 - onClickCallbback={() => setComposerPost({ kind: 'root' })} 626 626 + onClickCallbback={() => setComposerPost({ kind: "root" })} 475 627 text="Post" 476 628 /> 477 629 </div> ··· 481 633 <button 482 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" 483 635 style={{ boxShadow: "0 4px 24px 0 rgba(0,0,0,0.12)" }} 484 484 - onClick={() => setComposerPost({ kind: 'root' })} 636 636 + onClick={() => setComposerPost({ kind: "root" })} 485 637 type="button" 486 638 aria-label="Create Post" 487 639 > ··· 498 650 </main> 499 651 500 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> 501 656 <Login /> 502 657 503 658 <div className="flex-1"></div> 504 659 <p className="text-xs text-gray-400 dark:text-gray-500 text-justify mx-4 mb-4"> 505 505 - 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) 506 664 </p> 507 665 </aside> 508 666 </div> ··· 551 709 //params: { did: agent.assertDid }, 552 710 }) 553 711 } 554 554 - text="Search" 712 712 + text="Explore" 555 713 /> 556 714 {/* <Link 557 715 to="/search" ··· 649 807 <IconMaterialSymbolsSettingsOutline className="w-6 h-6" /> 650 808 } 651 809 ActiveIcon={<IconMaterialSymbolsSettings className="w-6 h-6" />} 652 652 - active={locationEnum === "settings"} 810 810 + active={locationEnum === "settings" || locationEnum === "feeds" || locationEnum === "moderation"} 653 811 onClickCallbback={() => 654 812 navigate({ 655 813 to: "/settings", ··· 678 836 ) : ( 679 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"> 680 838 <div className="flex items-center gap-2"> 681 681 - <FluentEmojiHighContrastGlowingStar className="h-6 w-6" style={{color: "oklch(0.6616 0.2249 calc(25.88 + (var(--safe-hue) - 28))"}} /> 839 839 + <FluentEmojiHighContrastGlowingStar 840 840 + className="h-6 w-6" 841 841 + style={{ 842 842 + color: 843 843 + "oklch(0.6616 0.2249 calc(25.88 + (var(--safe-hue) - 28))", 844 844 + }} 845 845 + /> 682 846 <span className="font-bold text-lg text-gray-900 dark:text-gray-100"> 683 847 Red Dwarf{" "} 684 848 {/* <span className="text-gray-500 dark:text-gray-400 text-sm"> ··· 698 862 ); 699 863 } 700 864 701 701 - function MaterialNavItem({ 865 865 + export function MaterialNavItem({ 702 866 InactiveIcon, 703 867 ActiveIcon, 704 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 + }

+642 -154

src/routes/notifications.tsx

··· 1 1 - import { createFileRoute } from "@tanstack/react-router"; 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"; 2 4 import { useAtom } from "jotai"; 3 3 - import React, { useEffect, useRef,useState } from "react"; 5 5 + import * as React from "react"; 4 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"; 5 19 import { useAuth } from "~/providers/UnifiedAuthProvider"; 6 6 - import { constellationURLAtom } from "~/utils/atoms"; 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"; 7 33 8 8 - 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 + } 9 54 10 55 export const Route = createFileRoute("/notifications")({ 11 56 component: NotificationsComponent, 12 57 }); 13 58 14 14 - function NotificationsComponent() { 15 15 - // /*mass comment*/ console.log("NotificationsComponent render"); 16 16 - const { agent, status } = useAuth(); 17 17 - const authed = !!agent?.did; 18 18 - const authLoading = status === "loading"; 19 19 - const [did, setDid] = useState<string | null>(null); 20 20 - const [resolving, setResolving] = useState(false); 21 21 - const [error, setError] = useState<string | null>(null); 22 22 - const [responses, setResponses] = useState<any[]>([null, null, null]); 23 23 - const [loading, setLoading] = useState(false); 24 24 - 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]); 25 113 26 26 - useEffect(() => { 27 27 - if (authLoading) return; 28 28 - if (authed && agent && agent.assertDid) { 29 29 - setDid(agent.assertDid); 30 30 - } 31 31 - }, [authed, agent, authLoading]); 114 114 + useReusableTabScrollRestore("Notifications"); 32 115 33 33 - async function handleSubmit() { 34 34 - // /*mass comment*/ console.log("handleSubmit called"); 35 35 - setError(null); 36 36 - setResponses([null, null, null]); 37 37 - const value = inputRef.current?.value?.trim() || ""; 38 38 - if (!value) return; 39 39 - if (value.startsWith("did:")) { 40 40 - setDid(value); 41 41 - setError(null); 42 42 - return; 43 43 - } 44 44 - setResolving(true); 45 45 - const cacheKey = `handleDid:${value}`; 46 46 - const now = Date.now(); 47 47 - const cached = undefined // await get(cacheKey); 48 48 - // if ( 49 49 - // cached && 50 50 - // cached.value && 51 51 - // cached.time && 52 52 - // now - cached.time < HANDLE_DID_CACHE_TIMEOUT 53 53 - // ) { 54 54 - // try { 55 55 - // const data = JSON.parse(cached.value); 56 56 - // setDid(data.did); 57 57 - // setResolving(false); 58 58 - // return; 59 59 - // } catch {} 60 60 - // } 61 61 - try { 62 62 - const url = `https://free-fly-24.deno.dev/?handle=${encodeURIComponent(value)}`; 63 63 - const res = await fetch(url); 64 64 - if (!res.ok) throw new Error("Failed to resolve handle"); 65 65 - const data = await res.json(); 66 66 - //set(cacheKey, JSON.stringify(data)); 67 67 - setDid(data.did); 68 68 - } catch (e: any) { 69 69 - setError("Failed to resolve handle: " + (e?.message || e)); 70 70 - } finally { 71 71 - setResolving(false); 72 72 - } 73 73 - } 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." />; 74 120 75 75 - const [constellationURL] = useAtom(constellationURLAtom) 121 121 + return ( 122 122 + <> 123 123 + {mentionsAturis.map((m) => ( 124 124 + <UniversalPostRendererATURILoader key={m} atUri={m} /> 125 125 + ))} 76 126 77 77 - useEffect(() => { 78 78 - if (!did) return; 79 79 - setLoading(true); 80 80 - setError(null); 81 81 - const urls = [ 82 82 - `https://${constellationURL}/links?target=${encodeURIComponent(did)}&collection=app.bsky.feed.post&path=.facets[app.bsky.richtext.facet].features[app.bsky.richtext.facet%23mention].did`, 83 83 - `https://${constellationURL}/links?target=${encodeURIComponent(did)}&collection=app.bsky.feed.post&path=.facets[].features[app.bsky.richtext.facet%23mention].did`, 84 84 - `https://${constellationURL}/links?target=${encodeURIComponent(did)}&collection=app.bsky.graph.follow&path=.subject`, 85 85 - ]; 86 86 - let ignore = false; 87 87 - Promise.all( 88 88 - urls.map(async (url) => { 89 89 - try { 90 90 - const r = await fetch(url); 91 91 - if (!r.ok) throw new Error("Failed to fetch"); 92 92 - const text = await r.text(); 93 93 - if (!text) return null; 94 94 - try { 95 95 - return JSON.parse(text); 96 96 - } catch { 97 97 - 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); 98 296 } 99 99 - } catch (e: any) { 100 100 - return { error: e?.message || String(e) }; 101 101 - } 102 102 - }) 103 103 - ) 104 104 - .then((results) => { 105 105 - if (!ignore) setResponses(results); 106 106 - }) 107 107 - .catch((e) => { 108 108 - if (!ignore) 109 109 - setError("Failed to fetch notifications: " + (e?.message || e)); 110 110 - }) 111 111 - .finally(() => { 112 112 - if (!ignore) setLoading(false); 297 297 + }); 113 298 }); 114 114 - return () => { 115 115 - ignore = true; 116 116 - }; 117 117 - }, [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); 118 311 119 312 return ( 120 120 - <div className="flex flex-col divide-y divide-gray-200 dark:divide-gray-800"> 121 121 - <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"> 122 122 - <span className="text-xl font-bold ml-2">Notifications</span> 123 123 - {!authed && ( 124 124 - <div className="flex items-center gap-2"> 125 125 - <input 126 126 - type="text" 127 127 - placeholder="Enter handle or DID" 128 128 - ref={inputRef} 129 129 - 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" 130 130 - style={{ minWidth: 220 }} 131 131 - disabled={resolving} 132 132 - /> 133 133 - <button 134 134 - type="button" 135 135 - className="px-3 py-1 rounded bg-blue-600 text-white font-semibold disabled:opacity-50" 136 136 - disabled={resolving} 137 137 - onClick={handleSubmit} 138 138 - > 139 139 - {resolving ? "Resolving..." : "Submit"} 140 140 - </button> 141 141 - </div> 142 142 - )} 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> 143 512 </div> 144 144 - {error && <div className="p-4 text-red-500">{error}</div>} 145 145 - {loading && ( 146 146 - <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" /> 147 625 )} 148 148 - {!loading && 149 149 - !error && 150 150 - responses.map((resp, i) => ( 151 151 - <div key={i} className="p-4"> 152 152 - <div className="font-bold mb-2">Query {i + 1}</div> 153 153 - {!resp || 154 154 - (typeof resp === "object" && Object.keys(resp).length === 0) || 155 155 - (Array.isArray(resp) && resp.length === 0) ? ( 156 156 - <div className="text-gray-500">No notifications found.</div> 157 157 - ) : ( 158 158 - <pre 159 159 - style={{ 160 160 - background: "#222", 161 161 - color: "#eee", 162 162 - borderRadius: 8, 163 163 - padding: 12, 164 164 - fontSize: 13, 165 165 - overflowX: "auto", 166 166 - }} 167 167 - > 168 168 - {JSON.stringify(resp, null, 2)} 169 169 - </pre> 170 170 - )} 171 171 - </div> 172 172 - ))} 173 173 - {/* <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} />} 174 644 </div> 175 645 ); 176 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 + }

+1002 -126

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"; 5 5 + import { createFileRoute, Link, useNavigate } from "@tanstack/react-router"; 3 6 import { useAtom } from "jotai"; 4 4 - import React from "react"; 7 7 + import React, { type ReactNode, useEffect, useState } from "react"; 5 8 9 9 + import defaultpfp from "~/../public/favicon.png"; 6 10 import { Header } from "~/components/Header"; 7 7 - 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"; 8 19 import { useAuth } from "~/providers/UnifiedAuthProvider"; 9 9 - import { imgCDNAtom } from "~/utils/atoms"; 10 10 - 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"; 11 27 import { 12 28 useInfiniteQueryAuthorFeed, 29 29 + useQueryArbitrary, 30 30 + useQueryConstellation, 31 31 + useQueryConstellationLinksCountDistinctDids, 13 32 useQueryIdentity, 14 33 useQueryProfile, 15 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"; 16 39 17 40 export const Route = createFileRoute("/profile/$did/")({ 18 41 component: ProfileComponent, ··· 21 44 function ProfileComponent() { 22 45 // booo bad this is not always the did it might be a handle, use identity.did instead 23 46 const { did } = Route.useParams(); 47 47 + const { agent } = useAuth(); 48 48 + const navigate = useNavigate(); 24 49 const queryClient = useQueryClient(); 25 25 - const { agent } = useAuth(); 26 50 const { 27 51 data: identity, 28 52 isLoading: isIdentityLoading, 29 53 error: identityError, 30 54 } = useQueryIdentity(did); 31 55 32 32 - const followRecords = useGetFollowState({ 33 33 - target: identity?.did || did, 34 34 - user: agent?.did, 35 35 - }); 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; 36 69 37 70 const resolvedDid = did.startsWith("did:") ? did : identity?.did; 38 71 const resolvedHandle = did.startsWith("did:") ? identity?.handle : did; ··· 44 77 const { data: profileRecord } = useQueryProfile(profileUri); 45 78 const profile = profileRecord?.value; 46 79 47 47 - const { 48 48 - data: postsData, 49 49 - fetchNextPage, 50 50 - hasNextPage, 51 51 - isFetchingNextPage, 52 52 - isLoading: arePostsLoading, 53 53 - } = useInfiniteQueryAuthorFeed(resolvedDid, pdsUrl); 54 54 - 55 55 - React.useEffect(() => { 56 56 - if (postsData) { 57 57 - postsData.pages.forEach((page) => { 58 58 - page.records.forEach((record) => { 59 59 - if (!queryClient.getQueryData(["post", record.uri])) { 60 60 - queryClient.setQueryData(["post", record.uri], record); 61 61 - } 62 62 - }); 63 63 - }); 64 64 - } 65 65 - }, [postsData, queryClient]); 66 66 - 67 67 - const posts = React.useMemo( 68 68 - () => postsData?.pages.flatMap((page) => page.records) ?? [], 69 69 - [postsData] 70 70 - ); 71 71 - 72 72 - const [imgcdn] = useAtom(imgCDNAtom) 80 80 + const [imgcdn] = useAtom(imgCDNAtom); 73 81 74 82 function getAvatarUrl(p: typeof profile) { 75 83 const link = p?.avatar?.ref?.["$link"]; ··· 87 95 const handle = resolvedHandle ? `@${resolvedHandle}` : resolvedDid || did; 88 96 const description = profile?.description || ""; 89 97 90 90 - if (isIdentityLoading) { 91 91 - return ( 92 92 - <div className="p-4 text-center text-gray-500">Resolving profile...</div> 93 93 - ); 94 94 - } 98 98 + const isReady = !!resolvedDid && !isIdentityLoading && !!profileRecord; 95 99 96 96 - if (identityError) { 97 97 - return ( 98 98 - <div className="p-4 text-center text-red-500"> 99 99 - Error: {identityError.message} 100 100 - </div> 101 101 - ); 102 102 - } 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 + ); 103 110 104 104 - if (!resolvedDid) { 105 105 - return ( 106 106 - <div className="p-4 text-center text-gray-500">Profile not found.</div> 107 107 - ); 108 108 - } 111 111 + const followercount = resultwhateversure?.data?.total; 109 112 110 113 return ( 111 111 - <> 114 114 + <div className=""> 112 115 <Header 113 116 title={`Profile`} 114 117 backButtonCallback={() => { ··· 118 121 window.location.assign("/"); 119 122 } 120 123 }} 124 124 + bottomBorderDisabled={true} 121 125 /> 122 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"> 123 127 <Link ··· 152 156 153 157 {/* Avatar (PFP) */} 154 158 <div className="absolute left-[16px] top-[100px] "> 155 155 - <img 156 156 - src={getAvatarUrl(profile) || "/favicon.png"} 157 157 - alt="avatar" 158 158 - className="w-28 h-28 rounded-full object-cover border-4 border-white dark:border-gray-950 bg-gray-300 dark:bg-gray-700" 159 159 - /> 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 + )} 160 172 </div> 161 173 162 174 <div className="absolute right-[16px] top-[170px] flex flex-row gap-2.5"> 175 175 + <BiteButton targetdidorhandle={did} /> 163 176 {/* 164 177 todo: full follow and unfollow backfill (along with partial likes backfill, 165 178 just enough for it to be useful) 166 179 also delay the backfill to be on demand because it would be pretty intense 167 180 also save it persistently 168 181 */} 169 169 - {identity?.did !== agent?.did ? ( 170 170 - <> 171 171 - {!(followRecords?.length && followRecords?.length > 0) ? ( 172 172 - <button 173 173 - onClick={() => 174 174 - toggleFollow({ 175 175 - agent: agent || undefined, 176 176 - targetDid: identity?.did, 177 177 - followRecords: followRecords, 178 178 - queryClient: queryClient, 179 179 - }) 180 180 - } 181 181 - className="rounded-full dark:bg-gray-600 bg-gray-300 px-3 py-2 text-[14px]" 182 182 - > 183 183 - Follow 184 184 - </button> 185 185 - ) : ( 186 186 - <button 187 187 - onClick={() => 188 188 - toggleFollow({ 189 189 - agent: agent || undefined, 190 190 - targetDid: identity?.did, 191 191 - followRecords: followRecords, 192 192 - queryClient: queryClient, 193 193 - }) 194 194 - } 195 195 - className="rounded-full dark:bg-gray-600 bg-gray-300 px-3 py-2 text-[14px]" 196 196 - > 197 197 - Unfollow 198 198 - </button> 199 199 - )} 200 200 - </> 201 201 - ) : ( 202 202 - <button className="rounded-full dark:bg-gray-600 bg-gray-300 px-3 py-2 text-[14px]"> 203 203 - Edit Profile 204 204 - </button> 205 205 - )} 206 206 - <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 + > 207 193 ... {/* todo: icon */} 208 194 </button> 209 195 </div> ··· 211 197 {/* Info Card */} 212 198 <div className="mt-16 pb-2 px-4 text-gray-900 dark:text-gray-100"> 213 199 <div className="font-bold text-2xl">{displayName}</div> 214 214 - <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} /> 215 202 {handle} 216 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> 217 218 {description && ( 218 219 <div className="text-base leading-relaxed text-gray-800 dark:text-gray-300 mb-5 whitespace-pre-wrap break-words text-[15px]"> 219 219 - {description} 220 220 + {/* {description} */} 221 221 + <RichTextRenderer key={did} description={description} /> 220 222 </div> 221 223 )} 222 224 </div> 223 225 </div> 224 226 225 225 - {/* Posts Section */} 226 226 - <div className="max-w-2xl mx-auto"> 227 227 - <div className="text-gray-500 dark:text-gray-400 text-lg font-semibold my-3 mx-4"> 228 228 - 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... 229 261 </div> 230 230 - <div> 231 231 - {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 ( 232 471 <UniversalPostRendererATURILoader 233 233 - key={post.uri} 234 234 - atUri={post.uri} 472 472 + key={repostRecord.subject.uri} 473 473 + atUri={repostRecord.subject.uri} 235 474 feedviewpost={true} 475 475 + repostedby={repost.uri} 236 476 /> 237 237 - ))} 238 238 - </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 + ); 239 524 240 240 - {/* Loading and "Load More" states */} 241 241 - {arePostsLoading && posts.length === 0 && ( 242 242 - <div className="p-4 text-center text-gray-500">Loading posts...</div> 243 243 - )} 244 244 - {isFetchingNextPage && ( 245 245 - <div className="p-4 text-center text-gray-500">Loading more...</div> 246 246 - )} 247 247 - {hasNextPage && !isFetchingNextPage && ( 248 248 - <button 249 249 - onClick={() => fetchNextPage()} 250 250 - 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" 251 610 > 252 252 - Load More Posts 253 253 - </button> 254 254 - )} 255 255 - {posts.length === 0 && !arePostsLoading && ( 256 256 - <div className="p-4 text-center text-gray-500">No posts found.</div> 257 257 - )} 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 + ))} 258 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 + )} */} 259 642 </> 260 643 ); 261 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 + })} 876 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 + )} 896 896 + </> 897 897 + ); 898 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 + }

+98 -92

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"; 5 5 import React, { useLayoutEffect } from "react"; 6 6 ··· 52 52 nopics?: boolean; 53 53 lightboxCallback?: (d: LightboxProps) => void; 54 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 + 55 58 //const { get, set } = usePersistentStore(); 56 59 const queryClient = useQueryClient(); 57 60 // const [resolvedDid, setResolvedDid] = React.useState<string | null>(null); ··· 190 193 data: identity, 191 194 isLoading: isIdentityLoading, 192 195 error: identityError, 193 193 - } = useQueryIdentity(did); 196 196 + } = useQueryIdentity(showMainPostRoute ? did : undefined); 194 197 195 198 const resolvedDid = did.startsWith("did:") ? did : identity?.did; 196 199 197 200 const atUri = React.useMemo( 198 201 () => 199 199 - resolvedDid 202 202 + resolvedDid && showMainPostRoute 200 203 ? `at://${decodeURIComponent(resolvedDid)}/app.bsky.feed.post/${rkey}` 201 204 : undefined, 202 202 - [resolvedDid, rkey] 205 205 + [resolvedDid, rkey, showMainPostRoute] 203 206 ); 204 207 205 205 - const { data: mainPost } = useQueryPost(atUri); 208 208 + const { data: mainPost } = useQueryPost(showMainPostRoute ? atUri : undefined); 206 209 207 210 console.log("atUri",atUri) 208 211 ··· 215 218 ); 216 219 217 220 // @ts-expect-error i hate overloads 218 218 - const { data: links } = useQueryConstellation(atUri?{ 221 221 + const { data: links } = useQueryConstellation(atUri&&showMainPostRoute?{ 219 222 method: "/links/all", 220 223 target: atUri, 221 224 } : { ··· 248 251 }, [links]); 249 252 250 253 const { data: opreplies } = useQueryConstellation( 251 251 - !!opdid && replyCount && replyCount >= 25 254 254 + showMainPostRoute && !!opdid && replyCount && replyCount >= 25 252 255 ? { 253 256 method: "/links", 254 257 target: atUri, ··· 289 292 path: ".reply.parent.uri", 290 293 } 291 294 ), 292 292 - enabled: !!atUri, 295 295 + enabled: !!atUri && showMainPostRoute, 293 296 }); 294 297 295 298 const { ··· 371 374 const [layoutReady, setLayoutReady] = React.useState(false); 372 375 373 376 useLayoutEffect(() => { 377 377 + if (!showMainPostRoute) return 374 378 if (parents.length > 0 && !layoutReady && mainPostRef.current) { 375 379 const mainPostElement = mainPostRef.current; 376 380 ··· 389 393 // eslint-disable-next-line react-hooks/set-state-in-effect 390 394 setLayoutReady(true); 391 395 } 392 392 - }, [parents, layoutReady]); 396 396 + }, [parents, layoutReady, showMainPostRoute]); 393 397 394 398 395 399 const [slingshoturl] = useAtom(slingshotURLAtom) 396 400 397 401 React.useEffect(() => { 398 398 - if (parentsLoading) { 402 402 + if (parentsLoading || !showMainPostRoute) { 399 403 setLayoutReady(false); 400 404 } 401 405 ··· 403 407 setLayoutReady(true); 404 408 hasPerformedInitialLayout.current = true; 405 409 } 406 406 - }, [parentsLoading, mainPost]); 410 410 + }, [parentsLoading, mainPost, showMainPostRoute]); 407 411 408 412 React.useEffect(() => { 409 413 if (!mainPost?.value?.reply?.parent?.uri) { ··· 444 448 return () => { 445 449 ignore = true; 446 450 }; 447 447 - }, [mainPost, queryClient]); 451 451 + }, [mainPost, queryClient, slingshoturl]); 448 452 449 449 - if (!did || !rkey) return <div>Invalid post URI</div>; 450 450 - if (isIdentityLoading) return <div>Resolving handle...</div>; 451 451 - 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) 452 456 return <div style={{ color: "red" }}>{identityError.message}</div>; 453 453 - if (!atUri) return <div>Could not construct post URI.</div>; 457 457 + if (!atUri && showMainPostRoute) return <div>Could not construct post URI.</div>; 454 458 455 459 return ( 456 460 <> 457 461 <Outlet /> 458 458 - <Header 459 459 - title={`Post`} 460 460 - backButtonCallback={() => { 461 461 - if (window.history.length > 1) { 462 462 - window.history.back(); 463 463 - } else { 464 464 - window.location.assign("/"); 465 465 - } 466 466 - }} 467 467 - /> 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 + /> 468 473 469 469 - {parentsLoading && ( 470 470 - <div className="text-center text-gray-500 dark:text-gray-400 flex flex-row"> 471 471 - <div className="ml-4 w-[42px] flex justify-center"> 472 472 - <div 473 473 - style={{ width: 2, height: "100%", opacity: 0.5 }} 474 474 - className="bg-gray-500 dark:bg-gray-400" 475 475 - ></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... 476 483 </div> 477 477 - Loading conversation... 484 484 + )} 485 485 + 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 + ))} 478 497 </div> 479 479 - )} 480 480 - 481 481 - {/* we should use the reply lines here thats provided by UPR*/} 482 482 - <div style={{ maxWidth: 600, padding: 0 }}> 483 483 - {parents.map((parent, index) => ( 498 498 + <div ref={mainPostRef}> 484 499 <UniversalPostRendererATURILoader 485 485 - key={parent.uri} 486 486 - atUri={parent.uri} 487 487 - topReplyLine={index > 0} 488 488 - bottomReplyLine={true} 489 489 - 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} 490 505 /> 491 491 - ))} 492 492 - </div> 493 493 - <div ref={mainPostRef}> 494 494 - <UniversalPostRendererATURILoader 495 495 - atUri={atUri} 496 496 - detailed={true} 497 497 - topReplyLine={parentsLoading || parents.length > 0} 498 498 - nopics={!!nopics} 499 499 - lightboxCallback={lightboxCallback} 500 500 - /> 501 501 - </div> 502 502 - <div 503 503 - style={{ 504 504 - maxWidth: 600, 505 505 - //margin: "0px auto 0", 506 506 - padding: 0, 507 507 - minHeight: "80dvh", 508 508 - paddingBottom: "20dvh", 509 509 - }} 510 510 - > 506 506 + </div> 511 507 <div 512 512 - className="text-gray-500 dark:text-gray-400 text-sm font-bold" 513 508 style={{ 514 514 - fontSize: 18, 515 515 - margin: "12px 16px 12px 16px", 516 516 - fontWeight: 600, 509 509 + maxWidth: 600, 510 510 + //margin: "0px auto 0", 511 511 + padding: 0, 512 512 + minHeight: "80dvh", 513 513 + paddingBottom: "20dvh", 517 514 }} 518 515 > 519 519 - Replies 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> 520 548 </div> 521 521 - <div style={{ display: "flex", flexDirection: "column", gap: 0 }}> 522 522 - {replyAturis.length > 0 && 523 523 - replyAturis.map((reply) => { 524 524 - //const replyAtUri = `at://${reply.did}/app.bsky.feed.post/${reply.rkey}`; 525 525 - return ( 526 526 - <UniversalPostRendererATURILoader 527 527 - key={reply} 528 528 - atUri={reply} 529 529 - maxReplies={4} 530 530 - /> 531 531 - ); 532 532 - })} 533 533 - {hasNextPage && ( 534 534 - <button 535 535 - onClick={() => fetchNextPage()} 536 536 - disabled={isFetchingNextPage} 537 537 - 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" 538 538 - > 539 539 - {isFetchingNextPage ? "Loading..." : "Load More"} 540 540 - </button> 541 541 - )} 542 542 - </div> 543 543 - </div> 549 549 + </>)} 544 550 </> 545 551 ); 546 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 }

+188 -17

src/routes/settings.tsx

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

+155 -3

src/styles/app.css

··· 33 33 --color-gray-950: oklch(0.129 0.055 var(--safe-hue)); 34 34 } 35 35 36 36 + :root { 37 37 + --link-text-color: oklch(0.5962 0.1987 var(--safe-hue)); 38 38 + /* max chroma!!! use fallback*/ 39 39 + /*--link-text-color: oklch(0.6 0.37 var(--safe-hue));*/ 40 40 + } 41 41 + 36 42 @layer base { 37 43 html { 38 44 color-scheme: light dark; ··· 52 58 } 53 59 } 54 60 61 61 + .gutter{ 62 62 + scrollbar-gutter: stable both-edges; 63 63 + } 64 64 + 55 65 @media (width >= 64rem /* 1024px */) { 56 66 html:not(:has(.disablegutter)), 57 67 body:not(:has(.disablegutter)) { 58 68 scrollbar-gutter: stable both-edges !important; 59 69 } 60 60 - html:has(.disablegutter), 61 61 - body:has(.disablegutter) { 70 70 + html:has(.disablescroll), 71 71 + body:has(.disablescroll) { 62 72 scrollbar-width: none; 63 73 overflow-y: hidden; 64 74 } ··· 80 90 .dangerousFediContent { 81 91 & a[href]{ 82 92 text-decoration: none; 83 83 - color: rgb(29, 122, 242); 93 93 + color: var(--link-text-color); 84 94 word-break: break-all; 85 95 } 86 96 } ··· 193 203 194 204 /* focus ring */ 195 205 .m3input-field.m3input-label.m3input-border input:focus { 206 206 + /*border-color: var(--m3input-focus-color);*/ 196 207 border-color: var(--m3input-focus-color); 208 208 + box-shadow: 0 0 0 1px var(--m3input-focus-color); 197 209 /*box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus-color) 20%, transparent);*/ 198 210 } 199 211 ··· 222 234 /* placeholder trick */ 223 235 .m3input-field.m3input-label.m3input-border input::placeholder { 224 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 + } 225 377 }

+80 -3

src/utils/atoms.ts

··· 1 1 - import type Agent from "@atproto/api"; 2 1 import { atom, createStore, useAtomValue } from "jotai"; 3 2 import { atomWithStorage } from "jotai/utils"; 4 3 import { useEffect } from "react"; 4 4 + 5 5 + import { type ProfilePostsFilter } from "~/routes/profile.$did"; 5 6 6 7 export const store = createStore(); 7 8 9 9 + export const quickAuthAtom = atomWithStorage<string | null>( 10 10 + "quickAuth", 11 11 + null 12 12 + ); 13 13 + 8 14 export const selectedFeedUriAtom = atomWithStorage<string | null>( 9 15 "selectedFeedUri", 10 16 null ··· 17 23 {} 18 24 ); 19 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 + 20 59 export const likedPostsAtom = atomWithStorage<Record<string, string>>( 21 60 "likedPosts", 22 61 {} 23 62 ); 24 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", 72 72 + {} 73 73 + ); 74 74 + 75 75 + export const profileChipsAtom = atom<Record<string, ProfilePostsFilter | null>>({}) 76 76 + 25 77 export const defaultconstellationURL = "constellation.microcosm.blue"; 26 78 export const constellationURLAtom = atomWithStorage<string>( 27 79 "constellationURL", ··· 40 92 defaultVideoCDN 41 93 ); 42 94 95 95 + export const defaultLycanURL = ""; 96 96 + export const lycanURLAtom = atomWithStorage<string>( 97 97 + "lycanURL", 98 98 + defaultLycanURL 99 99 + ); 100 100 + 43 101 export const defaulthue = 28; 44 102 export const hueAtom = atomWithStorage<number>("hue", defaulthue); 45 103 ··· 52 110 | { kind: "quote"; subject: string }; 53 111 export const composerAtom = atom<ComposerState>({ kind: "closed" }); 54 112 55 55 - export const agentAtom = atom<Agent | null>(null); 56 56 - export const authedAtom = atom<boolean>(false); 113 113 + //export const agentAtom = atom<Agent | null>(null); 114 114 + //export const authedAtom = atom<boolean>(false); 57 115 58 116 export function useAtomCssVar(atom: typeof hueAtom, cssVar: string) { 59 117 const value = useAtomValue(atom); ··· 76 134 // console.log("atom get ", initial); 77 135 // document.documentElement.style.setProperty(cssVar, initial.toString()); 78 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

+414 -163

src/utils/useQuery.ts

··· 5 5 queryOptions, 6 6 useInfiniteQuery, 7 7 useQuery, 8 8 - type UseQueryResult} from "@tanstack/react-query"; 8 8 + type UseQueryResult, 9 9 + } from "@tanstack/react-query"; 9 10 import { useAtom } from "jotai"; 10 11 11 11 - import { constellationURLAtom, slingshotURLAtom } from "./atoms"; 12 12 + import { useAuth } from "~/providers/UnifiedAuthProvider"; 12 13 13 13 - export function constructIdentityQuery(didorhandle?: string, slingshoturl?: string) { 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 + ) { 14 20 return queryOptions({ 15 21 queryKey: ["identity", didorhandle], 16 22 queryFn: async () => { 17 17 - if (!didorhandle) return undefined as undefined 23 23 + if (!didorhandle) return undefined as undefined; 18 24 const res = await fetch( 19 25 `https://${slingshoturl}/xrpc/com.bad-example.identity.resolveMiniDoc?identifier=${encodeURIComponent(didorhandle)}` 20 26 ); ··· 31 37 } 32 38 }, 33 39 staleTime: /*0,//*/ 5 * 60 * 1000, // 5 minutes 34 34 - gcTime: /*0//*/5 * 60 * 1000, 40 40 + gcTime: /*0//*/ 5 * 60 * 1000, 35 41 }); 36 42 } 37 43 export function useQueryIdentity(didorhandle: string): UseQueryResult< ··· 43 49 }, 44 50 Error 45 51 >; 46 46 - export function useQueryIdentity(): UseQueryResult< 47 47 - undefined, 48 48 - Error 49 49 - > 50 50 - export function useQueryIdentity(didorhandle?: string): 51 51 - UseQueryResult< 52 52 - { 53 53 - did: string; 54 54 - handle: string; 55 55 - pds: string; 56 56 - signing_key: string; 57 57 - } | undefined, 58 58 - Error 59 59 - > 52 52 + export function useQueryIdentity(): UseQueryResult<undefined, Error>; 53 53 + export function useQueryIdentity(didorhandle?: string): UseQueryResult< 54 54 + | { 55 55 + did: string; 56 56 + handle: string; 57 57 + pds: string; 58 58 + signing_key: string; 59 59 + } 60 60 + | undefined, 61 61 + Error 62 62 + >; 60 63 export function useQueryIdentity(didorhandle?: string) { 61 61 - const [slingshoturl] = useAtom(slingshotURLAtom) 64 64 + const [slingshoturl] = useAtom(slingshotURLAtom); 62 65 return useQuery(constructIdentityQuery(didorhandle, slingshoturl)); 63 66 } 64 67 ··· 66 69 return queryOptions({ 67 70 queryKey: ["post", uri], 68 71 queryFn: async () => { 69 69 - if (!uri) return undefined as undefined 72 72 + if (!uri) return undefined as undefined; 70 73 const res = await fetch( 71 74 `https://${slingshoturl}/xrpc/com.bad-example.repo.getUriRecord?at_uri=${encodeURIComponent(uri)}` 72 75 ); ··· 77 80 return undefined; 78 81 } 79 82 if (res.status === 400) return undefined; 80 80 - if (data?.error === "InvalidRequest" && data.message?.includes("Could not find repo")) { 83 83 + if ( 84 84 + data?.error === "InvalidRequest" && 85 85 + data.message?.includes("Could not find repo") 86 86 + ) { 81 87 return undefined; // cache “not found” 82 88 } 83 89 try { 84 90 if (!res.ok) throw new Error("Failed to fetch post"); 85 85 - return (data) as { 91 91 + return data as { 86 92 uri: string; 87 93 cid: string; 88 94 value: any; ··· 97 103 return failureCount < 2; 98 104 }, 99 105 staleTime: /*0,//*/ 5 * 60 * 1000, // 5 minutes 100 100 - gcTime: /*0//*/5 * 60 * 1000, 106 106 + gcTime: /*0//*/ 5 * 60 * 1000, 101 107 }); 102 108 } 103 109 export function useQueryPost(uri: string): UseQueryResult< ··· 108 114 }, 109 115 Error 110 116 >; 111 111 - export function useQueryPost(): UseQueryResult< 112 112 - undefined, 113 113 - Error 114 114 - > 115 115 - export function useQueryPost(uri?: string): 116 116 - UseQueryResult< 117 117 - { 118 118 - uri: string; 119 119 - cid: string; 120 120 - value: ATPAPI.AppBskyFeedPost.Record; 121 121 - } | undefined, 122 122 - Error 123 123 - > 117 117 + export function useQueryPost(): UseQueryResult<undefined, Error>; 118 118 + export function useQueryPost(uri?: string): UseQueryResult< 119 119 + | { 120 120 + uri: string; 121 121 + cid: string; 122 122 + value: ATPAPI.AppBskyFeedPost.Record; 123 123 + } 124 124 + | undefined, 125 125 + Error 126 126 + >; 124 127 export function useQueryPost(uri?: string) { 125 125 - const [slingshoturl] = useAtom(slingshotURLAtom) 128 128 + const [slingshoturl] = useAtom(slingshotURLAtom); 126 129 return useQuery(constructPostQuery(uri, slingshoturl)); 127 130 } 128 131 ··· 130 133 return queryOptions({ 131 134 queryKey: ["profile", uri], 132 135 queryFn: async () => { 133 133 - if (!uri) return undefined as undefined 136 136 + if (!uri) return undefined as undefined; 134 137 const res = await fetch( 135 138 `https://${slingshoturl}/xrpc/com.bad-example.repo.getUriRecord?at_uri=${encodeURIComponent(uri)}` 136 139 ); ··· 141 144 return undefined; 142 145 } 143 146 if (res.status === 400) return undefined; 144 144 - if (data?.error === "InvalidRequest" && data.message?.includes("Could not find repo")) { 147 147 + if ( 148 148 + data?.error === "InvalidRequest" && 149 149 + data.message?.includes("Could not find repo") 150 150 + ) { 145 151 return undefined; // cache “not found” 146 152 } 147 153 try { 148 154 if (!res.ok) throw new Error("Failed to fetch post"); 149 149 - return (data) as { 155 155 + return data as { 150 156 uri: string; 151 157 cid: string; 152 158 value: any; ··· 161 167 return failureCount < 2; 162 168 }, 163 169 staleTime: /*0,//*/ 5 * 60 * 1000, // 5 minutes 164 164 - gcTime: /*0//*/5 * 60 * 1000, 170 170 + gcTime: /*0//*/ 5 * 60 * 1000, 165 171 }); 166 172 } 167 173 export function useQueryProfile(uri: string): UseQueryResult< ··· 172 178 }, 173 179 Error 174 180 >; 175 175 - export function useQueryProfile(): UseQueryResult< 176 176 - undefined, 177 177 - Error 178 178 - >; 179 179 - export function useQueryProfile(uri?: string): 180 180 - UseQueryResult< 181 181 - { 181 181 + export function useQueryProfile(): UseQueryResult<undefined, Error>; 182 182 + export function useQueryProfile(uri?: string): UseQueryResult< 183 183 + | { 182 184 uri: string; 183 185 cid: string; 184 186 value: ATPAPI.AppBskyActorProfile.Record; 185 185 - } | undefined, 186 186 - Error 187 187 - > 187 187 + } 188 188 + | undefined, 189 189 + Error 190 190 + >; 188 191 export function useQueryProfile(uri?: string) { 189 189 - const [slingshoturl] = useAtom(slingshotURLAtom) 192 192 + const [slingshoturl] = useAtom(slingshotURLAtom); 190 193 return useQuery(constructProfileQuery(uri, slingshoturl)); 191 194 } 192 195 ··· 222 225 // method: "/links/all", 223 226 // target: string 224 227 // ): QueryOptions<linksAllResponse, Error>; 225 225 - export function constructConstellationQuery(query?:{ 226 226 - constellation: string, 228 228 + export function constructConstellationQuery(query?: { 229 229 + constellation: string; 227 230 method: 228 231 | "/links" 229 232 | "/links/distinct-dids" 230 233 | "/links/count" 231 234 | "/links/count/distinct-dids" 232 235 | "/links/all" 233 233 - | "undefined", 234 234 - target: string, 235 235 - collection?: string, 236 236 - path?: string, 237 237 - cursor?: string, 238 238 - dids?: string[] 239 239 - } 240 240 - ) { 236 236 + | "undefined"; 237 237 + target: string; 238 238 + collection?: string; 239 239 + path?: string; 240 240 + cursor?: string; 241 241 + dids?: string[]; 242 242 + }) { 241 243 // : QueryOptions< 242 244 // | linksRecordsResponse 243 245 // | linksDidsResponse ··· 247 249 // Error 248 250 // > 249 251 return queryOptions({ 250 250 - queryKey: ["constellation", query?.method, query?.target, query?.collection, query?.path, query?.cursor, query?.dids] as const, 252 252 + queryKey: [ 253 253 + "constellation", 254 254 + query?.method, 255 255 + query?.target, 256 256 + query?.collection, 257 257 + query?.path, 258 258 + query?.cursor, 259 259 + query?.dids, 260 260 + ] as const, 251 261 queryFn: async () => { 252 252 - if (!query || query.method === "undefined") return undefined as undefined 253 253 - const method = query.method 254 254 - const target = query.target 255 255 - const collection = query?.collection 256 256 - const path = query?.path 257 257 - const cursor = query.cursor 258 258 - const dids = query?.dids 262 262 + if (!query || query.method === "undefined") return undefined as undefined; 263 263 + const method = query.method; 264 264 + const target = query.target; 265 265 + const collection = query?.collection; 266 266 + const path = query?.path; 267 267 + const cursor = query.cursor; 268 268 + const dids = query?.dids; 259 269 const res = await fetch( 260 270 `https://${query.constellation}${method}?target=${encodeURIComponent(target)}${collection ? `&collection=${encodeURIComponent(collection)}` : ""}${path ? `&path=${encodeURIComponent(path)}` : ""}${cursor ? `&cursor=${encodeURIComponent(cursor)}` : ""}${dids ? dids.map((did) => `&did=${encodeURIComponent(did)}`).join("") : ""}` 261 271 ); ··· 281 291 }, 282 292 // enforce short lifespan 283 293 staleTime: /*0,//*/ 5 * 60 * 1000, // 5 minutes 284 284 - gcTime: /*0//*/5 * 60 * 1000, 294 294 + gcTime: /*0//*/ 5 * 60 * 1000, 285 295 }); 286 296 } 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 + 287 318 export function useQueryConstellation(query: { 288 319 method: "/links"; 289 320 target: string; ··· 346 377 > 347 378 | undefined { 348 379 //if (!query) return; 349 349 - const [constellationurl] = useAtom(constellationURLAtom) 380 380 + const [constellationurl] = useAtom(constellationURLAtom); 350 381 return useQuery( 351 351 - constructConstellationQuery(query && {constellation: constellationurl, ...query}) 382 382 + constructConstellationQuery( 383 383 + query && { constellation: constellationurl, ...query } 384 384 + ) 352 385 ); 353 386 } 354 387 355 355 - type linksRecord = { 388 388 + export type linksRecord = { 356 389 did: string; 357 390 collection: string; 358 391 rkey: string; ··· 392 425 }) { 393 426 return queryOptions({ 394 427 // The query key includes all dependencies to ensure it refetches when they change 395 395 - 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 + ], 396 433 queryFn: async () => { 397 397 - if (!options) return undefined as undefined 434 434 + if (!options) return undefined as undefined; 398 435 const { feedUri, agent, isAuthed, pdsUrl, feedServiceDid } = options; 399 436 if (isAuthed) { 400 437 // Authenticated flow 401 438 if (!agent || !pdsUrl || !feedServiceDid) { 402 402 - 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 + ); 403 442 } 404 443 const url = `${pdsUrl}/xrpc/app.bsky.feed.getFeedSkeleton?feed=${encodeURIComponent(feedUri)}`; 405 444 const res = await agent.fetchHandler(url, { ··· 409 448 "Content-Type": "application/json", 410 449 }, 411 450 }); 412 412 - 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}`); 413 453 return (await res.json()) as ATPAPI.AppBskyFeedGetFeedSkeleton.OutputSchema; 414 454 } else { 415 455 // Unauthenticated flow (using a public PDS/AppView) 416 456 const url = `https://discover.bsky.app/xrpc/app.bsky.feed.getFeedSkeleton?feed=${encodeURIComponent(feedUri)}`; 417 457 const res = await fetch(url); 418 418 - 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}`); 419 460 return (await res.json()) as ATPAPI.AppBskyFeedGetFeedSkeleton.OutputSchema; 420 461 } 421 462 }, ··· 433 474 return useQuery(constructFeedSkeletonQuery(options)); 434 475 } 435 476 436 436 - 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 + ) { 437 481 return queryOptions({ 438 438 - queryKey: ['preferences', agent?.did], 482 482 + queryKey: ["preferences", agent?.did], 439 483 queryFn: async () => { 440 484 if (!agent || !pdsUrl) throw new Error("Agent or PDS URL not available"); 441 485 const url = `${pdsUrl}/xrpc/app.bsky.actor.getPreferences`; ··· 446 490 }); 447 491 } 448 492 export function useQueryPreferences(options: { 449 449 - agent?: ATPAPI.Agent | undefined, pdsUrl?: string | undefined 493 493 + agent?: ATPAPI.Agent | undefined; 494 494 + pdsUrl?: string | undefined; 450 495 }) { 451 496 return useQuery(constructPreferencesQuery(options.agent, options.pdsUrl)); 452 497 } 453 453 - 454 454 - 455 498 456 499 export function constructArbitraryQuery(uri?: string, slingshoturl?: string) { 457 500 return queryOptions({ 458 501 queryKey: ["arbitrary", uri], 459 502 queryFn: async () => { 460 460 - if (!uri) return undefined as undefined 503 503 + if (!uri) return undefined as undefined; 461 504 const res = await fetch( 462 505 `https://${slingshoturl}/xrpc/com.bad-example.repo.getUriRecord?at_uri=${encodeURIComponent(uri)}` 463 506 ); ··· 468 511 return undefined; 469 512 } 470 513 if (res.status === 400) return undefined; 471 471 - 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 + ) { 472 518 return undefined; // cache “not found” 473 519 } 474 520 try { 475 521 if (!res.ok) throw new Error("Failed to fetch post"); 476 476 - return (data) as { 522 522 + return data as { 477 523 uri: string; 478 524 cid: string; 479 525 value: any; ··· 488 534 return failureCount < 2; 489 535 }, 490 536 staleTime: /*0,//*/ 5 * 60 * 1000, // 5 minutes 491 491 - gcTime: /*0//*/5 * 60 * 1000, 537 537 + gcTime: /*0//*/ 5 * 60 * 1000, 492 538 }); 493 539 } 494 540 export function useQueryArbitrary(uri: string): UseQueryResult< ··· 499 545 }, 500 546 Error 501 547 >; 502 502 - export function useQueryArbitrary(): UseQueryResult< 503 503 - undefined, 504 504 - Error 505 505 - >; 548 548 + export function useQueryArbitrary(): UseQueryResult<undefined, Error>; 506 549 export function useQueryArbitrary(uri?: string): UseQueryResult< 507 507 - { 508 508 - uri: string; 509 509 - cid: string; 510 510 - value: any; 511 511 - } | undefined, 550 550 + | { 551 551 + uri: string; 552 552 + cid: string; 553 553 + value: any; 554 554 + } 555 555 + | undefined, 512 556 Error 513 557 >; 514 558 export function useQueryArbitrary(uri?: string) { 515 515 - const [slingshoturl] = useAtom(slingshotURLAtom) 559 559 + const [slingshoturl] = useAtom(slingshotURLAtom); 516 560 return useQuery(constructArbitraryQuery(uri, slingshoturl)); 517 561 } 518 562 519 519 - export function constructFallbackNothingQuery(){ 563 563 + export function constructFallbackNothingQuery() { 520 564 return queryOptions({ 521 565 queryKey: ["nothing"], 522 566 queryFn: async () => { 523 523 - return undefined 567 567 + return undefined; 524 568 }, 525 569 }); 526 570 } ··· 534 578 }[]; 535 579 }; 536 580 537 537 - 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 + ) { 538 586 return queryOptions({ 539 539 - queryKey: ['authorFeed', did], 587 587 + queryKey: ["authorFeed", did, collection], 540 588 queryFn: async ({ pageParam }: QueryFunctionContext) => { 541 589 const limit = 25; 542 542 - 590 590 + 543 591 const cursor = pageParam as string | undefined; 544 544 - const cursorParam = cursor ? `&cursor=${cursor}` : ''; 545 545 - 546 546 - const url = `${pdsUrl}/xrpc/com.atproto.repo.listRecords?repo=${did}&collection=app.bsky.feed.post&limit=${limit}${cursorParam}`; 547 547 - 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 + 548 596 const res = await fetch(url); 549 597 if (!res.ok) throw new Error("Failed to fetch author's posts"); 550 550 - 598 598 + 551 599 return res.json() as Promise<ListRecordsResponse>; 552 600 }, 553 601 }); 554 602 } 555 603 556 556 - export function useInfiniteQueryAuthorFeed(did: string | undefined, pdsUrl: string | undefined) { 557 557 - const { queryKey, queryFn } = constructAuthorFeedQuery(did!, pdsUrl!); 558 558 - 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 + 559 615 return useInfiniteQuery({ 560 616 queryKey, 561 617 queryFn, ··· 573 629 isAuthed: boolean; 574 630 pdsUrl?: string; 575 631 feedServiceDid?: string; 632 632 + // todo the hell is a unauthedfeedurl 633 633 + unauthedfeedurl?: string; 576 634 }) { 577 577 - const { feedUri, agent, isAuthed, pdsUrl, feedServiceDid } = options; 578 578 - 635 635 + const { feedUri, agent, isAuthed, pdsUrl, feedServiceDid, unauthedfeedurl } = 636 636 + options; 637 637 + 579 638 return queryOptions({ 580 639 queryKey: ["feedSkeleton", feedUri, { isAuthed, did: agent?.did }], 581 581 - 582 582 - queryFn: async ({ pageParam }: QueryFunctionContext): Promise<FeedSkeletonPage> => { 640 640 + 641 641 + queryFn: async ({ 642 642 + pageParam, 643 643 + }: QueryFunctionContext): Promise<FeedSkeletonPage> => { 583 644 const cursorParam = pageParam ? `&cursor=${pageParam}` : ""; 584 584 - 585 585 - if (isAuthed) { 645 645 + 646 646 + if (isAuthed && !unauthedfeedurl) { 586 647 if (!agent || !pdsUrl || !feedServiceDid) { 587 587 - 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 + ); 588 651 } 589 652 const url = `${pdsUrl}/xrpc/app.bsky.feed.getFeedSkeleton?feed=${encodeURIComponent(feedUri)}${cursorParam}`; 590 653 const res = await agent.fetchHandler(url, { ··· 594 657 "Content-Type": "application/json", 595 658 }, 596 659 }); 597 597 - 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}`); 598 662 return (await res.json()) as FeedSkeletonPage; 599 663 } else { 600 600 - 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}`; 601 665 const res = await fetch(url); 602 602 - 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}`); 603 668 return (await res.json()) as FeedSkeletonPage; 604 669 } 605 670 }, ··· 612 677 isAuthed: boolean; 613 678 pdsUrl?: string; 614 679 feedServiceDid?: string; 680 680 + unauthedfeedurl?: string; 615 681 }) { 616 682 const { queryKey, queryFn } = constructInfiniteFeedSkeletonQuery(options); 617 617 - 618 618 - return useInfiniteQuery({ 619 619 - queryKey, 620 620 - queryFn, 621 621 - initialPageParam: undefined as never, 622 622 - getNextPageParam: (lastPage) => lastPage.cursor as null | undefined, 623 623 - staleTime: Infinity, 624 624 - refetchOnWindowFocus: false, 625 625 - enabled: !!options.feedUri && (options.isAuthed ? !!options.agent && !!options.pdsUrl && !!options.feedServiceDid : true), 626 626 - }); 627 627 - } 628 683 684 684 + return { 685 685 + ...useInfiniteQuery({ 686 686 + queryKey, 687 687 + queryFn, 688 688 + initialPageParam: undefined as never, 689 689 + getNextPageParam: (lastPage) => lastPage.cursor as null | undefined, 690 690 + staleTime: Infinity, 691 691 + refetchOnWindowFocus: false, 692 692 + enabled: 693 693 + !!options.feedUri && 694 694 + (options.isAuthed 695 695 + ? ((!!options.agent && !!options.pdsUrl) || 696 696 + !!options.unauthedfeedurl) && 697 697 + !!options.feedServiceDid 698 698 + : true), 699 699 + }), 700 700 + queryKey: queryKey, 701 701 + }; 702 702 + } 629 703 630 704 export function yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks(query?: { 631 631 - constellation: string, 632 632 - method: '/links' 633 633 - target?: string 634 634 - collection: string 635 635 - 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; 636 711 }) { 637 637 - console.log( 638 638 - 'yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks', 639 639 - query, 640 640 - ) 712 712 + const safemult = query?.staleMult ?? 1; 713 713 + // console.log( 714 714 + // 'yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks', 715 715 + // query, 716 716 + // ) 641 717 642 718 return infiniteQueryOptions({ 643 719 enabled: !!query?.target, 644 720 queryKey: [ 645 645 - 'reddwarf_constellation', 721 721 + "reddwarf_constellation", 646 722 query?.method, 647 723 query?.target, 648 724 query?.collection, 649 725 query?.path, 650 726 ] as const, 651 727 652 652 - queryFn: async ({pageParam}: {pageParam?: string}) => { 653 653 - if (!query || !query?.target) return undefined 728 728 + queryFn: async ({ pageParam }: { pageParam?: string }) => { 729 729 + if (!query || !query?.target) return undefined; 654 730 655 655 - const method = query.method 656 656 - const target = query.target 657 657 - const collection = query.collection 658 658 - const path = query.path 659 659 - 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; 660 736 661 737 const res = await fetch( 662 738 `https://${query.constellation}${method}?target=${encodeURIComponent(target)}${ 663 663 - collection ? `&collection=${encodeURIComponent(collection)}` : '' 664 664 - }${path ? `&path=${encodeURIComponent(path)}` : ''}${ 665 665 - cursor ? `&cursor=${encodeURIComponent(cursor)}` : '' 666 666 - }`, 667 667 - ) 739 739 + collection ? `&collection=${encodeURIComponent(collection)}` : "" 740 740 + }${path ? `&path=${encodeURIComponent(path)}` : ""}${ 741 741 + cursor ? `&cursor=${encodeURIComponent(cursor)}` : "" 742 742 + }` 743 743 + ); 668 744 669 669 - if (!res.ok) throw new Error('Failed to fetch') 745 745 + if (!res.ok) throw new Error("Failed to fetch"); 670 746 671 671 - return (await res.json()) as linksRecordsResponse 747 747 + return (await res.json()) as linksRecordsResponse; 672 748 }, 673 749 674 674 - getNextPageParam: lastPage => { 675 675 - return (lastPage as any)?.cursor ?? undefined 750 750 + getNextPageParam: (lastPage) => { 751 751 + return (lastPage as any)?.cursor ?? undefined; 676 752 }, 677 753 initialPageParam: undefined, 678 678 - staleTime: 5 * 60 * 1000, 679 679 - gcTime: 5 * 60 * 1000, 680 680 - }) 681 681 - } 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({