+2 -1

.gitignore

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

+9

README.md

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

+62 -30

oauthdev.mts

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

+3

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 IconMdiMessageReplyTextOutline: typeof import('~icons/mdi/message-reply-text-outline.jsx').default 21 24 const IconMdiPencilOutline: typeof import('~icons/mdi/pencil-outline.jsx').default 22 25 }

+117 -164

src/components/Composer.tsx

··· 8 8 import { useQueryPost } from "~/utils/useQuery"; 9 9 10 10 import { ProfileThing } from "./Login"; 11 11 - import { Button } from "./radix-m3-rd/Button"; 12 11 import { UniversalPostRendererATURILoader } from "./UniversalPostRenderer"; 13 12 14 13 const MAX_POST_LENGTH = 300; 15 14 16 15 export function Composer() { 17 16 const [composerState, setComposerState] = useAtom(composerAtom); 18 18 - const [closeConfirmState, setCloseConfirmState] = useState<boolean>(false); 19 17 const { agent } = useAuth(); 20 18 21 19 const [postText, setPostText] = useState(""); ··· 114 112 setPosting(false); 115 113 } 116 114 } 115 115 + // if (composerState.kind === "closed") { 116 116 + // return null; 117 117 + // } 117 118 118 119 const getPlaceholder = () => { 119 120 switch (composerState.kind) { ··· 131 132 const isPostButtonDisabled = 132 133 posting || !postText.trim() || isParentLoading || charsLeft < 0; 133 134 134 134 - function handleAttemptClose() { 135 135 - if (postText.trim() && !posting) { 136 136 - setCloseConfirmState(true); 137 137 - } else { 138 138 - setComposerState({ kind: "closed" }); 139 139 - } 140 140 - } 141 141 - 142 142 - function handleConfirmClose() { 143 143 - setComposerState({ kind: "closed" }); 144 144 - setCloseConfirmState(false); 145 145 - setPostText(""); 146 146 - } 147 147 - 148 135 return ( 149 149 - <> 150 150 - <Dialog.Root 151 151 - open={composerState.kind !== "closed"} 152 152 - onOpenChange={(open) => { 153 153 - if (!open) handleAttemptClose(); 154 154 - }} 155 155 - > 156 156 - <Dialog.Portal> 157 157 - <Dialog.Overlay className="disablegutter fixed inset-0 z-50 bg-black/40 dark:bg-black/50 data-[state=open]:animate-fadeIn" /> 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" /> 158 144 159 159 - <Dialog.Content className="fixed overflow-y-auto gutter inset-0 z-50 flex items-start justify-center pt-10 sm:pt-20 pb-[50dvh] sm:pb-[50dvh]"> 160 160 - <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"> 161 161 - <div className="flex flex-row justify-between p-2"> 162 162 - <Dialog.Close asChild> 163 163 - <button 164 164 - 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" 165 165 - disabled={posting} 166 166 - aria-label="Close" 167 167 - onClick={handleAttemptClose} 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" 151 151 + disabled={posting} 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" 168 164 > 169 169 - <svg 170 170 - xmlns="http://www.w3.org/2000/svg" 171 171 - width="20" 172 172 - height="20" 173 173 - viewBox="0 0 24 24" 174 174 - fill="none" 175 175 - stroke="currentColor" 176 176 - strokeWidth="2.5" 177 177 - strokeLinecap="round" 178 178 - strokeLinejoin="round" 179 179 - > 180 180 - <line x1="18" y1="6" x2="6" y2="18"></line> 181 181 - <line x1="6" y1="6" x2="18" y2="18"></line> 182 182 - </svg> 183 183 - </button> 184 184 - </Dialog.Close> 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> 185 170 186 186 - <div className="flex-1" /> 187 187 - <div className="flex items-center gap-4"> 188 188 - <span 189 189 - className={`text-sm ${charsLeft < 0 ? "text-red-500" : "text-gray-500"}`} 190 190 - > 191 191 - {charsLeft} 192 192 - </span> 193 193 - <Button 194 194 - onClick={handlePost} 195 195 - disabled={isPostButtonDisabled} 196 196 - > 197 197 - {posting ? "Posting..." : "Post"} 198 198 - </Button> 199 199 - </div> 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> 200 185 </div> 186 186 + </div> 201 187 202 202 - {postSuccess ? ( 203 203 - <div className="flex flex-col items-center justify-center py-16"> 204 204 - <span className="text-gray-500 text-6xl mb-4">✓</span> 205 205 - <span className="text-xl font-bold text-black dark:text-white"> 206 206 - Posted! 207 207 - </span> 208 208 - </div> 209 209 - ) : ( 210 210 - <div className="px-4"> 211 211 - {composerState.kind === "reply" && ( 212 212 - <div className="mb-1 -mx-4"> 213 213 - {isParentLoading ? ( 214 214 - <div className="text-sm text-gray-500 animate-pulse"> 215 215 - Loading parent post... 216 216 - </div> 217 217 - ) : parentUri ? ( 218 218 - <UniversalPostRendererATURILoader 219 219 - atUri={parentUri} 220 220 - bottomReplyLine 221 221 - bottomBorder={false} 222 222 - /> 223 223 - ) : ( 224 224 - <div className="text-sm text-red-500 rounded-lg border border-red-500/50 p-3"> 225 225 - Could not load parent post. 226 226 - </div> 227 227 - )} 228 228 - </div> 229 229 - )} 230 230 - 231 231 - <div className="flex w-full gap-1 flex-col"> 232 232 - <ProfileThing agent={agent} large /> 233 233 - <div className="flex pl-[50px]"> 234 234 - <AutoGrowTextarea 235 235 - className="w-full text-lg bg-transparent focus:outline-none resize-none placeholder:text-gray-500 text-black dark:text-white pb-2" 236 236 - rows={5} 237 237 - placeholder={getPlaceholder()} 238 238 - value={postText} 239 239 - onChange={(e) => setPostText(e.target.value)} 240 240 - disabled={posting} 241 241 - autoFocus 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} 242 208 /> 243 243 - </div> 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 + )} 244 214 </div> 215 215 + )} 245 216 246 246 - {composerState.kind === "quote" && ( 247 247 - <div className="mb-4 ml-[50px] rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden"> 248 248 - {isParentLoading ? ( 249 249 - <div className="text-sm text-gray-500 animate-pulse"> 250 250 - Loading parent post... 251 251 - </div> 252 252 - ) : parentUri ? ( 253 253 - <UniversalPostRendererATURILoader 254 254 - atUri={parentUri} 255 255 - isQuote 256 256 - /> 257 257 - ) : ( 258 258 - <div className="text-sm text-red-500 rounded-lg border border-red-500/50 p-3"> 259 259 - Could not load parent post. 260 260 - </div> 261 261 - )} 262 262 - </div> 263 263 - )} 264 264 - 265 265 - {postError && ( 266 266 - <div className="text-red-500 text-sm my-2 text-center"> 267 267 - {postError} 268 268 - </div> 269 269 - )} 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> 270 230 </div> 271 271 - )} 272 272 - </div> 273 273 - </Dialog.Content> 274 274 - </Dialog.Portal> 275 275 - </Dialog.Root> 276 231 277 277 - {/* Close confirmation dialog */} 278 278 - <Dialog.Root open={closeConfirmState} onOpenChange={setCloseConfirmState}> 279 279 - <Dialog.Portal> 280 280 - 281 281 - <Dialog.Overlay className="disablegutter fixed inset-0 z-50 bg-black/40 dark:bg-black/50 data-[state=open]:animate-fadeIn" /> 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 + )} 248 248 + </div> 249 249 + )} 282 250 283 283 - <Dialog.Content className="fixed gutter inset-0 z-50 flex items-start justify-center pt-30 sm:pt-40"> 284 284 - <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-md relative mx-4 py-6"> 285 285 - <div className="text-xl mb-4 text-center"> 286 286 - Discard your post? 287 287 - </div> 288 288 - <div className="text-md mb-4 text-center"> 289 289 - You will lose your draft 251 251 + {postError && ( 252 252 + <div className="text-red-500 text-sm my-2 text-center"> 253 253 + {postError} 254 254 + </div> 255 255 + )} 290 256 </div> 291 291 - <div className="flex justify-end gap-2 px-6"> 292 292 - <Button 293 293 - onClick={handleConfirmClose} 294 294 - > 295 295 - Discard 296 296 - </Button> 297 297 - <Button 298 298 - variant={"outlined"} 299 299 - onClick={() => setCloseConfirmState(false)} 300 300 - > 301 301 - Cancel 302 302 - </Button> 303 303 - </div> 304 304 - </div> 305 305 - </Dialog.Content> 306 306 - </Dialog.Portal> 307 307 - </Dialog.Root> 308 308 - </> 257 257 + )} 258 258 + </div> 259 259 + </Dialog.Content> 260 260 + </Dialog.Portal> 261 261 + </Dialog.Root> 309 262 ); 310 263 } 311 264

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

+6 -1

src/components/InfiniteCustomFeed.tsx

··· 14 14 feedUri: string; 15 15 pdsUrl?: string; 16 16 feedServiceDid?: string; 17 17 + authedOverride?: boolean; 18 18 + unauthedfeedurl?: string; 17 19 } 18 20 19 21 export function InfiniteCustomFeed({ 20 22 feedUri, 21 23 pdsUrl, 22 24 feedServiceDid, 25 25 + authedOverride, 26 26 + unauthedfeedurl, 23 27 }: InfiniteCustomFeedProps) { 24 28 const { agent } = useAuth(); 25 25 - const authed = !!agent?.did; 29 29 + const authed = authedOverride || !!agent?.did; 26 30 27 31 // const identityresultmaybe = useQueryIdentity(agent?.did); 28 32 // const identity = identityresultmaybe?.data; ··· 45 49 isAuthed: authed ?? false, 46 50 pdsUrl: pdsUrl, 47 51 feedServiceDid: feedServiceDid, 52 52 + unauthedfeedurl: unauthedfeedurl, 48 53 }); 49 54 const queryClient = useQueryClient(); 50 55

+3 -5

src/components/Login.tsx

··· 7 7 import { imgCDNAtom } from "~/utils/atoms"; 8 8 import { useQueryIdentity, useQueryProfile } from "~/utils/useQuery"; 9 9 10 10 - import { Button } from "./radix-m3-rd/Button"; 11 11 - 12 10 // --- 1. The Main Component (Orchestrator with `compact` prop) --- 13 11 export default function Login({ 14 12 compact = false, ··· 51 49 You are logged in! 52 50 </p> 53 51 <ProfileThing agent={agent} large /> 54 54 - <Button 52 52 + <button 55 53 onClick={logout} 56 56 - className="mt-4" 54 54 + className="bg-gray-600 mt-4 hover:bg-gray-700 text-white rounded-full px-6 py-2 font-semibold text-base transition-colors" 57 55 > 58 56 Log out 59 59 - </Button> 57 57 + </button> 60 58 </div> 61 59 </div> 62 60 );

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

+183 -54

src/components/UniversalPostRenderer.tsx

··· 1 1 + import * as ATPAPI from "@atproto/api"; 1 2 import { useNavigate } from "@tanstack/react-router"; 2 3 import DOMPurify from "dompurify"; 3 4 import { useAtom } from "jotai"; ··· 9 10 import { 10 11 composerAtom, 11 12 constellationURLAtom, 13 13 + enableBridgyTextAtom, 14 14 + enableWafrnTextAtom, 12 15 imgCDNAtom, 13 13 - likedPostsAtom, 14 16 } from "~/utils/atoms"; 15 17 import { useHydratedEmbed } from "~/utils/useHydrated"; 16 18 import { ··· 38 40 feedviewpost?: boolean; 39 41 repostedby?: string; 40 42 style?: React.CSSProperties; 41 41 - ref?: React.Ref<HTMLDivElement>; 43 43 + ref?: React.RefObject<HTMLDivElement>; 42 44 dataIndexPropPass?: number; 43 45 nopics?: boolean; 46 46 + concise?: boolean; 44 47 lightboxCallback?: (d: LightboxProps) => void; 45 48 maxReplies?: number; 46 49 isQuote?: boolean; 50 50 + filterNoReplies?: boolean; 51 51 + filterMustHaveMedia?: boolean; 52 52 + filterMustBeReply?: boolean; 47 53 } 48 54 49 55 // export async function cachedGetRecord({ ··· 152 158 ref, 153 159 dataIndexPropPass, 154 160 nopics, 161 161 + concise, 155 162 lightboxCallback, 156 163 maxReplies, 157 164 isQuote, 165 165 + filterNoReplies, 166 166 + filterMustHaveMedia, 167 167 + filterMustBeReply, 158 168 }: UniversalPostRendererATURILoaderProps) { 159 169 // todo remove this once tree rendering is implemented, use a prop like isTree 160 170 const TEMPLINEAR = true; ··· 518 528 ? true 519 529 : maxReplies && !oldestOpsReplyElseNewestNonOpsReply 520 530 ? false 521 521 - : (maxReplies === 0 && (!replies || (!!replies && replies === 0))) ? false : bottomReplyLine 531 531 + : maxReplies === 0 && (!replies || (!!replies && replies === 0)) 532 532 + ? false 533 533 + : bottomReplyLine 522 534 } 523 535 topReplyLine={topReplyLine} 524 536 //bottomBorder={maxReplies&&oldestOpsReplyElseNewestNonOpsReply ? false : bottomBorder} ··· 536 548 ref={ref} 537 549 dataIndexPropPass={dataIndexPropPass} 538 550 nopics={nopics} 551 551 + concise={concise} 539 552 lightboxCallback={lightboxCallback} 540 553 maxReplies={maxReplies} 541 554 isQuote={isQuote} 555 555 + filterNoReplies={filterNoReplies} 556 556 + filterMustHaveMedia={filterMustHaveMedia} 557 557 + filterMustBeReply={filterMustBeReply} 542 558 /> 543 559 <> 544 544 - {(maxReplies && maxReplies === 0 && replies && replies > 0) ? ( 560 560 + {maxReplies && maxReplies === 0 && replies && replies > 0 ? ( 545 561 <> 546 546 - {/* <div>hello</div> */} 547 547 - <MoreReplies atUri={atUri} /> 562 562 + {/* <div>hello</div> */} 563 563 + <MoreReplies atUri={atUri} /> 548 564 </> 549 549 - ) : (<></>)} 565 565 + ) : ( 566 566 + <></> 567 567 + )} 550 568 </> 551 569 {!isQuote && oldestOpsReplyElseNewestNonOpsReply && ( 552 570 <> ··· 567 585 ref={ref} 568 586 dataIndexPropPass={dataIndexPropPass} 569 587 nopics={nopics} 588 588 + concise={concise} 570 589 lightboxCallback={lightboxCallback} 571 590 maxReplies={ 572 591 maxReplies && maxReplies > 0 ? maxReplies - 1 : undefined ··· 636 655 ref, 637 656 dataIndexPropPass, 638 657 nopics, 658 658 + concise, 639 659 lightboxCallback, 640 660 maxReplies, 641 661 isQuote, 662 662 + filterNoReplies, 663 663 + filterMustHaveMedia, 664 664 + filterMustBeReply, 642 665 }: { 643 666 postRecord: any; 644 667 profileRecord: any; ··· 654 677 feedviewpost?: boolean; 655 678 repostedby?: string; 656 679 style?: React.CSSProperties; 657 657 - ref?: React.Ref<HTMLDivElement>; 680 680 + ref?: React.RefObject<HTMLDivElement>; 658 681 dataIndexPropPass?: number; 659 682 nopics?: boolean; 683 683 + concise?: boolean; 660 684 lightboxCallback?: (d: LightboxProps) => void; 661 685 maxReplies?: number; 662 686 isQuote?: boolean; 687 687 + filterNoReplies?: boolean; 688 688 + filterMustHaveMedia?: boolean; 689 689 + filterMustBeReply?: boolean; 663 690 }) { 664 691 // /*mass comment*/ console.log(`received aturi: ${aturi} of post content: ${postRecord}`); 665 692 const navigate = useNavigate(); ··· 729 756 730 757 // run(); 731 758 // }, [postRecord, resolved?.did]); 759 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); 732 776 733 777 const { 734 778 data: hydratedEmbed, ··· 824 868 // }, [fakepost, get, set]); 825 869 const thereply = (fakepost?.record as AppBskyFeedPost.Record)?.reply?.parent 826 870 ?.uri; 827 827 - const feedviewpostreplydid = thereply ? new AtUri(thereply).host : undefined; 871 871 + const feedviewpostreplydid = 872 872 + thereply && !filterNoReplies ? new AtUri(thereply).host : undefined; 828 873 const replyhookvalue = useQueryIdentity( 829 874 feedviewpost ? feedviewpostreplydid : undefined 830 875 ); ··· 835 880 repostedby ? aturirepostbydid : undefined 836 881 ); 837 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 + 838 890 return ( 839 891 <> 840 892 {/* <p> 841 893 {postRecord?.value?.embed.$type + " " + JSON.stringify(hydratedEmbed)} 842 894 </p> */} 895 895 + {/* <span>filtermustbereply is {filterMustBeReply ? "true" : "false"}</span> 896 896 + <span>thereply is {thereply ? "true" : "false"}</span> */} 843 897 <UniversalPostRenderer 844 898 expanded={detailed} 845 899 onPostClick={() => ··· 874 928 ref={ref} 875 929 dataIndexPropPass={dataIndexPropPass} 876 930 nopics={nopics} 931 931 + concise={concise} 877 932 lightboxCallback={lightboxCallback} 878 933 maxReplies={maxReplies} 879 934 isQuote={isQuote} ··· 1197 1252 1198 1253 import defaultpfp from "~/../public/favicon.png"; 1199 1254 import { useAuth } from "~/providers/UnifiedAuthProvider"; 1200 1200 - import { FollowButton, Mutual } from "~/routes/profile.$did"; 1255 1255 + import { 1256 1256 + FeedItemRenderAturiLoader, 1257 1257 + FollowButton, 1258 1258 + Mutual, 1259 1259 + } from "~/routes/profile.$did"; 1201 1260 import type { LightboxProps } from "~/routes/profile.$did/post.$rkey.image.$i"; 1261 1261 + import { useFastLike } from "~/utils/likeMutationQueue"; 1202 1262 // import type { OutputSchema } from "@atproto/api/dist/client/types/app/bsky/feed/getFeed"; 1203 1263 // import type { 1204 1264 // ViewRecord, ··· 1327 1387 ref, 1328 1388 dataIndexPropPass, 1329 1389 nopics, 1390 1390 + concise, 1330 1391 lightboxCallback, 1331 1392 maxReplies, 1332 1393 }: { ··· 1350 1411 depth?: number; 1351 1412 repostedby?: string; 1352 1413 style?: React.CSSProperties; 1353 1353 - ref?: React.Ref<HTMLDivElement>; 1414 1414 + ref?: React.RefObject<HTMLDivElement>; 1354 1415 dataIndexPropPass?: number; 1355 1416 nopics?: boolean; 1417 1417 + concise?: boolean; 1356 1418 lightboxCallback?: (d: LightboxProps) => void; 1357 1419 maxReplies?: number; 1358 1420 }) { 1359 1421 const parsed = new AtUri(post.uri); 1360 1422 const navigate = useNavigate(); 1361 1361 - const [likedPosts, setLikedPosts] = useAtom(likedPostsAtom); 1362 1423 const [hasRetweeted, setHasRetweeted] = useState<boolean>( 1363 1424 post.viewer?.repost ? true : false 1364 1425 ); 1365 1365 - const [hasLiked, setHasLiked] = useState<boolean>( 1366 1366 - post.uri in likedPosts || post.viewer?.like ? true : false 1367 1367 - ); 1368 1426 const [, setComposerPost] = useAtom(composerAtom); 1369 1427 const { agent } = useAuth(); 1370 1370 - const [likeUri, setLikeUri] = useState<string | undefined>(post.viewer?.like); 1371 1428 const [retweetUri, setRetweetUri] = useState<string | undefined>( 1372 1429 post.viewer?.repost 1373 1430 ); 1374 1374 - 1375 1375 - const likeOrUnlikePost = async () => { 1376 1376 - const newLikedPosts = { ...likedPosts }; 1377 1377 - if (!agent) { 1378 1378 - console.error("Agent is null or undefined"); 1379 1379 - return; 1380 1380 - } 1381 1381 - if (hasLiked) { 1382 1382 - if (post.uri in likedPosts) { 1383 1383 - const likeUri = likedPosts[post.uri]; 1384 1384 - setLikeUri(likeUri); 1385 1385 - } 1386 1386 - if (likeUri) { 1387 1387 - await agent.deleteLike(likeUri); 1388 1388 - setHasLiked(false); 1389 1389 - delete newLikedPosts[post.uri]; 1390 1390 - } 1391 1391 - } else { 1392 1392 - const { uri } = await agent.like(post.uri, post.cid); 1393 1393 - setLikeUri(uri); 1394 1394 - setHasLiked(true); 1395 1395 - newLikedPosts[post.uri] = uri; 1396 1396 - } 1397 1397 - setLikedPosts(newLikedPosts); 1398 1398 - }; 1431 1431 + const { liked, toggle, backfill } = useFastLike(post.uri, post.cid); 1432 1432 + // const bovref = useBackfillOnView(post.uri, post.cid); 1433 1433 + // React.useLayoutEffect(()=>{ 1434 1434 + // if (expanded && !isQuote) { 1435 1435 + // backfill(); 1436 1436 + // } 1437 1437 + // },[backfill, expanded, isQuote]) 1399 1438 1400 1439 const repostOrUnrepostPost = async () => { 1401 1440 if (!agent) { ··· 1426 1465 : undefined; 1427 1466 1428 1467 const emergencySalt = randomString(); 1429 1429 - const fedi = (post.record as { bridgyOriginalText?: string }) 1468 1468 + 1469 1469 + const [showBridgyText] = useAtom(enableBridgyTextAtom); 1470 1470 + const [showWafrnText] = useAtom(enableWafrnTextAtom); 1471 1471 + 1472 1472 + const unfedibridgy = (post.record as { bridgyOriginalText?: string }) 1430 1473 .bridgyOriginalText; 1474 1474 + const unfediwafrnPartial = (post.record as { fullText?: string }).fullText; 1475 1475 + const unfediwafrnTags = (post.record as { fullTags?: string }).fullTags; 1476 1476 + const unfediwafrnUnHost = (post.record as { fediverseId?: string }) 1477 1477 + .fediverseId; 1478 1478 + 1479 1479 + const undfediwafrnHost = unfediwafrnUnHost 1480 1480 + ? new URL(unfediwafrnUnHost).hostname 1481 1481 + : undefined; 1482 1482 + 1483 1483 + const tags = unfediwafrnTags 1484 1484 + ? unfediwafrnTags 1485 1485 + .split("\n") 1486 1486 + .map((t) => t.trim()) 1487 1487 + .filter(Boolean) 1488 1488 + : undefined; 1489 1489 + 1490 1490 + const links = tags 1491 1491 + ? tags 1492 1492 + .map((tag) => { 1493 1493 + const encoded = encodeURIComponent(tag); 1494 1494 + return `<a href="https://${undfediwafrnHost}/search/${encoded}" target="_blank">#${tag.replaceAll(' ','-')}</a>`; 1495 1495 + }) 1496 1496 + .join("<br>") 1497 1497 + : ""; 1498 1498 + 1499 1499 + const unfediwafrn = unfediwafrnPartial 1500 1500 + ? unfediwafrnPartial + (links ? `<br>${links}` : "") 1501 1501 + : undefined; 1502 1502 + 1503 1503 + const fedi = 1504 1504 + (showBridgyText ? unfedibridgy : undefined) ?? 1505 1505 + (showWafrnText ? unfediwafrn : undefined); 1431 1506 1432 1507 /* fuck you */ 1433 1508 const isMainItem = false; 1434 1509 const setMainItem = (any: any) => {}; 1435 1510 // eslint-disable-next-line react-hooks/refs 1436 1436 - console.log("Received ref in UniversalPostRenderer:", ref); 1511 1511 + //console.log("Received ref in UniversalPostRenderer:", usedref); 1437 1512 return ( 1438 1513 <div ref={ref} style={style} data-index={dataIndexPropPass}> 1439 1514 <div ··· 1557 1632 className="rounded-full w-[58px] h-[58px] object-cover border border-gray-300 dark:border-gray-800 bg-gray-300 dark:bg-gray-600" 1558 1633 /> 1559 1634 <div className=" flex-1 flex flex-row align-middle justify-end"> 1560 1560 - <div className=" flex flex-col justify-start"> 1561 1635 <FollowButton targetdidorhandle={post.author.did} /> 1562 1562 - </div> 1563 1636 </div> 1564 1637 </div> 1565 1638 <div className="flex flex-col gap-3"> ··· 1568 1641 {post.author.displayName || post.author.handle}{" "} 1569 1642 </div> 1570 1643 <div className="text-gray-500 dark:text-gray-400 text-md flex flex-row gap-1"> 1571 1571 - <Mutual targetdidorhandle={post.author.did} />@{post.author.handle}{" "} 1644 1644 + <Mutual targetdidorhandle={post.author.did} />@ 1645 1645 + {post.author.handle}{" "} 1572 1646 </div> 1573 1647 </div> 1574 1648 {uprrrsauthor?.description && ( ··· 1761 1835 <div 1762 1836 style={{ 1763 1837 fontSize: 16, 1764 1764 - marginBottom: !post.embed /*|| depth > 0*/ ? 0 : 8, 1838 1838 + marginBottom: !post.embed || concise ? 0 : 8, 1765 1839 whiteSpace: "pre-wrap", 1766 1840 textAlign: "left", 1767 1841 overflowWrap: "anywhere", 1768 1842 wordBreak: "break-word", 1769 1769 - //color: theme.text, 1843 1843 + ...(concise && { 1844 1844 + display: "-webkit-box", 1845 1845 + WebkitBoxOrient: "vertical", 1846 1846 + WebkitLineClamp: 2, 1847 1847 + overflow: "hidden", 1848 1848 + }), 1770 1849 }} 1771 1850 className="text-gray-900 dark:text-gray-100" 1772 1851 > ··· 1789 1868 </> 1790 1869 )} 1791 1870 </div> 1792 1792 - {post.embed && depth < 1 ? ( 1871 1871 + {post.embed && depth < 1 && !concise ? ( 1793 1872 <PostEmbeds 1794 1873 embed={post.embed} 1795 1874 //moderation={moderation} ··· 1811 1890 </div> 1812 1891 </> 1813 1892 )} 1814 1814 - <div style={{ paddingTop: post.embed && depth < 1 ? 4 : 0 }}> 1893 1893 + <div 1894 1894 + style={{ 1895 1895 + paddingTop: post.embed && !concise && depth < 1 ? 4 : 0, 1896 1896 + }} 1897 1897 + > 1815 1898 <> 1816 1899 {expanded && ( 1817 1900 <div ··· 1907 1990 </DropdownMenu.Root> 1908 1991 <HitSlopButton 1909 1992 onClick={() => { 1910 1910 - likeOrUnlikePost(); 1993 1993 + toggle(); 1911 1994 }} 1912 1995 style={{ 1913 1996 ...btnstyle, 1914 1914 - ...(hasLiked ? { color: "#EC4899" } : {}), 1997 1997 + ...(liked ? { color: "#EC4899" } : {}), 1915 1998 }} 1916 1999 > 1917 1917 - {hasLiked ? <MdiCardsHeart /> : <MdiCardsHeartOutline />} 1918 1918 - {(post.likeCount || 0) + (hasLiked ? 1 : 0)} 2000 2000 + {liked ? <MdiCardsHeart /> : <MdiCardsHeartOutline />} 2001 2001 + {(post.likeCount || 0) + (liked ? 1 : 0)} 1919 2002 </HitSlopButton> 1920 2003 <div style={{ display: "flex", gap: 8 }}> 1921 2004 <HitSlopButton ··· 2167 2250 } 2168 2251 2169 2252 if (AppBskyEmbedRecord.isView(embed)) { 2253 2253 + // hey im really lazy and im gonna do it the bad way 2254 2254 + const reallybaduri = (embed?.record as any)?.uri as string | undefined; 2255 2255 + const reallybadaturi = reallybaduri ? new AtUri(reallybaduri) : undefined; 2256 2256 + 2170 2257 // custom feed embed (i.e. generator view) 2171 2258 if (AppBskyFeedDefs.isGeneratorView(embed.record)) { 2172 2259 // stopgap sorry ··· 2176 2263 // <MaybeFeedCard view={embed.record} /> 2177 2264 // </div> 2178 2265 // ) 2266 2266 + } else if ( 2267 2267 + !!reallybaduri && 2268 2268 + !!reallybadaturi && 2269 2269 + reallybadaturi.collection === "app.bsky.feed.generator" 2270 2270 + ) { 2271 2271 + return ( 2272 2272 + <div className="rounded-xl border"> 2273 2273 + <FeedItemRenderAturiLoader aturi={reallybaduri} disableBottomBorder /> 2274 2274 + </div> 2275 2275 + ); 2179 2276 } 2180 2277 2181 2278 // list embed ··· 2187 2284 // <MaybeListCard view={embed.record} /> 2188 2285 // </div> 2189 2286 // ) 2287 2287 + } else if ( 2288 2288 + !!reallybaduri && 2289 2289 + !!reallybadaturi && 2290 2290 + reallybadaturi.collection === "app.bsky.graph.list" 2291 2291 + ) { 2292 2292 + return ( 2293 2293 + <div className="rounded-xl border"> 2294 2294 + <FeedItemRenderAturiLoader 2295 2295 + aturi={reallybaduri} 2296 2296 + disableBottomBorder 2297 2297 + listmode 2298 2298 + disablePropagation 2299 2299 + /> 2300 2300 + </div> 2301 2301 + ); 2190 2302 } 2191 2303 2192 2304 // starter pack embed ··· 2198 2310 // <StarterPackCard starterPack={embed.record} /> 2199 2311 // </div> 2200 2312 // ) 2313 2313 + } else if ( 2314 2314 + !!reallybaduri && 2315 2315 + !!reallybadaturi && 2316 2316 + reallybadaturi.collection === "app.bsky.graph.starterpack" 2317 2317 + ) { 2318 2318 + return ( 2319 2319 + <div className="rounded-xl border"> 2320 2320 + <FeedItemRenderAturiLoader 2321 2321 + aturi={reallybaduri} 2322 2322 + disableBottomBorder 2323 2323 + listmode 2324 2324 + disablePropagation 2325 2325 + /> 2326 2326 + </div> 2327 2327 + ); 2201 2328 } 2202 2329 2203 2330 // quote post ··· 2257 2384 </div> 2258 2385 ); 2259 2386 } else { 2387 2387 + console.log("what the hell is a ", embed); 2260 2388 return <>sorry</>; 2261 2389 } 2262 2390 //return <QuotePostRenderer record={embed.record} moderation={moderation} />; ··· 2566 2694 // = 2567 2695 if (AppBskyEmbedVideo.isView(embed)) { 2568 2696 // hls playlist 2697 2697 + if (nopics) return; 2569 2698 const playlist = embed.playlist; 2570 2699 return ( 2571 2700 <SmartHLSPlayer

-59

src/components/radix-m3-rd/Button.tsx

··· 1 1 - import { Slot } from "@radix-ui/react-slot"; 2 2 - import clsx from "clsx"; 3 3 - import * as React from "react"; 4 4 - 5 5 - export type ButtonVariant = "filled" | "outlined" | "text" | "secondary"; 6 6 - export type ButtonSize = "sm" | "md" | "lg"; 7 7 - 8 8 - const variantClasses: Record<ButtonVariant, string> = { 9 9 - filled: 10 10 - "bg-gray-300 text-gray-900 hover:bg-gray-400 dark:bg-gray-600 dark:text-white dark:hover:bg-gray-500", 11 11 - secondary: 12 12 - "bg-gray-300 text-gray-900 hover:bg-gray-400 dark:bg-gray-600 dark:text-white dark:hover:bg-gray-500", 13 13 - outlined: 14 14 - "border border-gray-800 text-gray-800 hover:bg-gray-100 dark:border-gray-200 dark:text-gray-200 dark:hover:bg-gray-800/10", 15 15 - text: "bg-transparent text-gray-800 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-800/10", 16 16 - }; 17 17 - 18 18 - const sizeClasses: Record<ButtonSize, string> = { 19 19 - sm: "px-3 py-1.5 text-sm", 20 20 - md: "px-4 py-2 text-base", 21 21 - lg: "px-6 py-3 text-lg", 22 22 - }; 23 23 - 24 24 - export function Button({ 25 25 - variant = "filled", 26 26 - size = "md", 27 27 - asChild = false, 28 28 - ref, 29 29 - className, 30 30 - children, 31 31 - ...props 32 32 - }: { 33 33 - variant?: ButtonVariant; 34 34 - size?: ButtonSize; 35 35 - asChild?: boolean; 36 36 - className?: string; 37 37 - children?: React.ReactNode; 38 38 - ref?: React.Ref<HTMLButtonElement>; 39 39 - } & React.ComponentPropsWithoutRef<"button">) { 40 40 - const Comp = asChild ? Slot : "button"; 41 41 - 42 42 - return ( 43 43 - <Comp 44 44 - ref={ref} 45 45 - className={clsx( 46 46 - //focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-gray-500 dark:focus:ring-gray-300 47 47 - "inline-flex items-center justify-center rounded-full transition-colors disabled:opacity-50 disabled:cursor-not-allowed", 48 48 - variantClasses[variant], 49 49 - sizeClasses[size], 50 50 - className 51 51 - )} 52 52 - {...props} 53 53 - > 54 54 - {children} 55 55 - </Comp> 56 56 - ); 57 57 - } 58 58 - 59 59 - Button.displayName = "Button";

+157

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

+129

src/routeTree.gen.ts

··· 18 18 import { Route as CallbackIndexRouteImport } from './routes/callback/index' 19 19 import { Route as PathlessLayoutNestedLayoutRouteImport } from './routes/_pathlessLayout/_nested-layout' 20 20 import { Route as ProfileDidIndexRouteImport } from './routes/profile.$did/index' 21 21 + import { Route as ProfileDidFollowsRouteImport } from './routes/profile.$did/follows' 22 22 + import { Route as ProfileDidFollowersRouteImport } from './routes/profile.$did/followers' 21 23 import { Route as PathlessLayoutNestedLayoutRouteBRouteImport } from './routes/_pathlessLayout/_nested-layout/route-b' 22 24 import { Route as PathlessLayoutNestedLayoutRouteARouteImport } from './routes/_pathlessLayout/_nested-layout/route-a' 23 25 import { Route as ProfileDidPostRkeyRouteImport } from './routes/profile.$did/post.$rkey' 26 26 + import { Route as ProfileDidFeedRkeyRouteImport } from './routes/profile.$did/feed.$rkey' 27 27 + import { Route as ProfileDidPostRkeyRepostedByRouteImport } from './routes/profile.$did/post.$rkey.reposted-by' 28 28 + import { Route as ProfileDidPostRkeyQuotesRouteImport } from './routes/profile.$did/post.$rkey.quotes' 29 29 + import { Route as ProfileDidPostRkeyLikedByRouteImport } from './routes/profile.$did/post.$rkey.liked-by' 24 30 import { Route as ProfileDidPostRkeyImageIRouteImport } from './routes/profile.$did/post.$rkey.image.$i' 25 31 26 32 const SettingsRoute = SettingsRouteImport.update({ ··· 67 73 path: '/profile/$did/', 68 74 getParentRoute: () => rootRouteImport, 69 75 } as any) 76 76 + const ProfileDidFollowsRoute = ProfileDidFollowsRouteImport.update({ 77 77 + id: '/profile/$did/follows', 78 78 + path: '/profile/$did/follows', 79 79 + getParentRoute: () => rootRouteImport, 80 80 + } as any) 81 81 + const ProfileDidFollowersRoute = ProfileDidFollowersRouteImport.update({ 82 82 + id: '/profile/$did/followers', 83 83 + path: '/profile/$did/followers', 84 84 + getParentRoute: () => rootRouteImport, 85 85 + } as any) 70 86 const PathlessLayoutNestedLayoutRouteBRoute = 71 87 PathlessLayoutNestedLayoutRouteBRouteImport.update({ 72 88 id: '/route-b', ··· 84 100 path: '/profile/$did/post/$rkey', 85 101 getParentRoute: () => rootRouteImport, 86 102 } as any) 103 103 + const ProfileDidFeedRkeyRoute = ProfileDidFeedRkeyRouteImport.update({ 104 104 + id: '/profile/$did/feed/$rkey', 105 105 + path: '/profile/$did/feed/$rkey', 106 106 + getParentRoute: () => rootRouteImport, 107 107 + } as any) 108 108 + const ProfileDidPostRkeyRepostedByRoute = 109 109 + ProfileDidPostRkeyRepostedByRouteImport.update({ 110 110 + id: '/reposted-by', 111 111 + path: '/reposted-by', 112 112 + getParentRoute: () => ProfileDidPostRkeyRoute, 113 113 + } as any) 114 114 + const ProfileDidPostRkeyQuotesRoute = 115 115 + ProfileDidPostRkeyQuotesRouteImport.update({ 116 116 + id: '/quotes', 117 117 + path: '/quotes', 118 118 + getParentRoute: () => ProfileDidPostRkeyRoute, 119 119 + } as any) 120 120 + const ProfileDidPostRkeyLikedByRoute = 121 121 + ProfileDidPostRkeyLikedByRouteImport.update({ 122 122 + id: '/liked-by', 123 123 + path: '/liked-by', 124 124 + getParentRoute: () => ProfileDidPostRkeyRoute, 125 125 + } as any) 87 126 const ProfileDidPostRkeyImageIRoute = 88 127 ProfileDidPostRkeyImageIRouteImport.update({ 89 128 id: '/image/$i', ··· 100 139 '/callback': typeof CallbackIndexRoute 101 140 '/route-a': typeof PathlessLayoutNestedLayoutRouteARoute 102 141 '/route-b': typeof PathlessLayoutNestedLayoutRouteBRoute 142 142 + '/profile/$did/followers': typeof ProfileDidFollowersRoute 143 143 + '/profile/$did/follows': typeof ProfileDidFollowsRoute 103 144 '/profile/$did': typeof ProfileDidIndexRoute 145 145 + '/profile/$did/feed/$rkey': typeof ProfileDidFeedRkeyRoute 104 146 '/profile/$did/post/$rkey': typeof ProfileDidPostRkeyRouteWithChildren 147 147 + '/profile/$did/post/$rkey/liked-by': typeof ProfileDidPostRkeyLikedByRoute 148 148 + '/profile/$did/post/$rkey/quotes': typeof ProfileDidPostRkeyQuotesRoute 149 149 + '/profile/$did/post/$rkey/reposted-by': typeof ProfileDidPostRkeyRepostedByRoute 105 150 '/profile/$did/post/$rkey/image/$i': typeof ProfileDidPostRkeyImageIRoute 106 151 } 107 152 export interface FileRoutesByTo { ··· 113 158 '/callback': typeof CallbackIndexRoute 114 159 '/route-a': typeof PathlessLayoutNestedLayoutRouteARoute 115 160 '/route-b': typeof PathlessLayoutNestedLayoutRouteBRoute 161 161 + '/profile/$did/followers': typeof ProfileDidFollowersRoute 162 162 + '/profile/$did/follows': typeof ProfileDidFollowsRoute 116 163 '/profile/$did': typeof ProfileDidIndexRoute 164 164 + '/profile/$did/feed/$rkey': typeof ProfileDidFeedRkeyRoute 117 165 '/profile/$did/post/$rkey': typeof ProfileDidPostRkeyRouteWithChildren 166 166 + '/profile/$did/post/$rkey/liked-by': typeof ProfileDidPostRkeyLikedByRoute 167 167 + '/profile/$did/post/$rkey/quotes': typeof ProfileDidPostRkeyQuotesRoute 168 168 + '/profile/$did/post/$rkey/reposted-by': typeof ProfileDidPostRkeyRepostedByRoute 118 169 '/profile/$did/post/$rkey/image/$i': typeof ProfileDidPostRkeyImageIRoute 119 170 } 120 171 export interface FileRoutesById { ··· 129 180 '/callback/': typeof CallbackIndexRoute 130 181 '/_pathlessLayout/_nested-layout/route-a': typeof PathlessLayoutNestedLayoutRouteARoute 131 182 '/_pathlessLayout/_nested-layout/route-b': typeof PathlessLayoutNestedLayoutRouteBRoute 183 183 + '/profile/$did/followers': typeof ProfileDidFollowersRoute 184 184 + '/profile/$did/follows': typeof ProfileDidFollowsRoute 132 185 '/profile/$did/': typeof ProfileDidIndexRoute 186 186 + '/profile/$did/feed/$rkey': typeof ProfileDidFeedRkeyRoute 133 187 '/profile/$did/post/$rkey': typeof ProfileDidPostRkeyRouteWithChildren 188 188 + '/profile/$did/post/$rkey/liked-by': typeof ProfileDidPostRkeyLikedByRoute 189 189 + '/profile/$did/post/$rkey/quotes': typeof ProfileDidPostRkeyQuotesRoute 190 190 + '/profile/$did/post/$rkey/reposted-by': typeof ProfileDidPostRkeyRepostedByRoute 134 191 '/profile/$did/post/$rkey/image/$i': typeof ProfileDidPostRkeyImageIRoute 135 192 } 136 193 export interface FileRouteTypes { ··· 144 201 | '/callback' 145 202 | '/route-a' 146 203 | '/route-b' 204 204 + | '/profile/$did/followers' 205 205 + | '/profile/$did/follows' 147 206 | '/profile/$did' 207 207 + | '/profile/$did/feed/$rkey' 148 208 | '/profile/$did/post/$rkey' 209 209 + | '/profile/$did/post/$rkey/liked-by' 210 210 + | '/profile/$did/post/$rkey/quotes' 211 211 + | '/profile/$did/post/$rkey/reposted-by' 149 212 | '/profile/$did/post/$rkey/image/$i' 150 213 fileRoutesByTo: FileRoutesByTo 151 214 to: ··· 157 220 | '/callback' 158 221 | '/route-a' 159 222 | '/route-b' 223 223 + | '/profile/$did/followers' 224 224 + | '/profile/$did/follows' 160 225 | '/profile/$did' 226 226 + | '/profile/$did/feed/$rkey' 161 227 | '/profile/$did/post/$rkey' 228 228 + | '/profile/$did/post/$rkey/liked-by' 229 229 + | '/profile/$did/post/$rkey/quotes' 230 230 + | '/profile/$did/post/$rkey/reposted-by' 162 231 | '/profile/$did/post/$rkey/image/$i' 163 232 id: 164 233 | '__root__' ··· 172 241 | '/callback/' 173 242 | '/_pathlessLayout/_nested-layout/route-a' 174 243 | '/_pathlessLayout/_nested-layout/route-b' 244 244 + | '/profile/$did/followers' 245 245 + | '/profile/$did/follows' 175 246 | '/profile/$did/' 247 247 + | '/profile/$did/feed/$rkey' 176 248 | '/profile/$did/post/$rkey' 249 249 + | '/profile/$did/post/$rkey/liked-by' 250 250 + | '/profile/$did/post/$rkey/quotes' 251 251 + | '/profile/$did/post/$rkey/reposted-by' 177 252 | '/profile/$did/post/$rkey/image/$i' 178 253 fileRoutesById: FileRoutesById 179 254 } ··· 185 260 SearchRoute: typeof SearchRoute 186 261 SettingsRoute: typeof SettingsRoute 187 262 CallbackIndexRoute: typeof CallbackIndexRoute 263 263 + ProfileDidFollowersRoute: typeof ProfileDidFollowersRoute 264 264 + ProfileDidFollowsRoute: typeof ProfileDidFollowsRoute 188 265 ProfileDidIndexRoute: typeof ProfileDidIndexRoute 266 266 + ProfileDidFeedRkeyRoute: typeof ProfileDidFeedRkeyRoute 189 267 ProfileDidPostRkeyRoute: typeof ProfileDidPostRkeyRouteWithChildren 190 268 } 191 269 ··· 254 332 preLoaderRoute: typeof ProfileDidIndexRouteImport 255 333 parentRoute: typeof rootRouteImport 256 334 } 335 335 + '/profile/$did/follows': { 336 336 + id: '/profile/$did/follows' 337 337 + path: '/profile/$did/follows' 338 338 + fullPath: '/profile/$did/follows' 339 339 + preLoaderRoute: typeof ProfileDidFollowsRouteImport 340 340 + parentRoute: typeof rootRouteImport 341 341 + } 342 342 + '/profile/$did/followers': { 343 343 + id: '/profile/$did/followers' 344 344 + path: '/profile/$did/followers' 345 345 + fullPath: '/profile/$did/followers' 346 346 + preLoaderRoute: typeof ProfileDidFollowersRouteImport 347 347 + parentRoute: typeof rootRouteImport 348 348 + } 257 349 '/_pathlessLayout/_nested-layout/route-b': { 258 350 id: '/_pathlessLayout/_nested-layout/route-b' 259 351 path: '/route-b' ··· 275 367 preLoaderRoute: typeof ProfileDidPostRkeyRouteImport 276 368 parentRoute: typeof rootRouteImport 277 369 } 370 370 + '/profile/$did/feed/$rkey': { 371 371 + id: '/profile/$did/feed/$rkey' 372 372 + path: '/profile/$did/feed/$rkey' 373 373 + fullPath: '/profile/$did/feed/$rkey' 374 374 + preLoaderRoute: typeof ProfileDidFeedRkeyRouteImport 375 375 + parentRoute: typeof rootRouteImport 376 376 + } 377 377 + '/profile/$did/post/$rkey/reposted-by': { 378 378 + id: '/profile/$did/post/$rkey/reposted-by' 379 379 + path: '/reposted-by' 380 380 + fullPath: '/profile/$did/post/$rkey/reposted-by' 381 381 + preLoaderRoute: typeof ProfileDidPostRkeyRepostedByRouteImport 382 382 + parentRoute: typeof ProfileDidPostRkeyRoute 383 383 + } 384 384 + '/profile/$did/post/$rkey/quotes': { 385 385 + id: '/profile/$did/post/$rkey/quotes' 386 386 + path: '/quotes' 387 387 + fullPath: '/profile/$did/post/$rkey/quotes' 388 388 + preLoaderRoute: typeof ProfileDidPostRkeyQuotesRouteImport 389 389 + parentRoute: typeof ProfileDidPostRkeyRoute 390 390 + } 391 391 + '/profile/$did/post/$rkey/liked-by': { 392 392 + id: '/profile/$did/post/$rkey/liked-by' 393 393 + path: '/liked-by' 394 394 + fullPath: '/profile/$did/post/$rkey/liked-by' 395 395 + preLoaderRoute: typeof ProfileDidPostRkeyLikedByRouteImport 396 396 + parentRoute: typeof ProfileDidPostRkeyRoute 397 397 + } 278 398 '/profile/$did/post/$rkey/image/$i': { 279 399 id: '/profile/$did/post/$rkey/image/$i' 280 400 path: '/image/$i' ··· 316 436 ) 317 437 318 438 interface ProfileDidPostRkeyRouteChildren { 439 439 + ProfileDidPostRkeyLikedByRoute: typeof ProfileDidPostRkeyLikedByRoute 440 440 + ProfileDidPostRkeyQuotesRoute: typeof ProfileDidPostRkeyQuotesRoute 441 441 + ProfileDidPostRkeyRepostedByRoute: typeof ProfileDidPostRkeyRepostedByRoute 319 442 ProfileDidPostRkeyImageIRoute: typeof ProfileDidPostRkeyImageIRoute 320 443 } 321 444 322 445 const ProfileDidPostRkeyRouteChildren: ProfileDidPostRkeyRouteChildren = { 446 446 + ProfileDidPostRkeyLikedByRoute: ProfileDidPostRkeyLikedByRoute, 447 447 + ProfileDidPostRkeyQuotesRoute: ProfileDidPostRkeyQuotesRoute, 448 448 + ProfileDidPostRkeyRepostedByRoute: ProfileDidPostRkeyRepostedByRoute, 323 449 ProfileDidPostRkeyImageIRoute: ProfileDidPostRkeyImageIRoute, 324 450 } 325 451 ··· 334 460 SearchRoute: SearchRoute, 335 461 SettingsRoute: SettingsRoute, 336 462 CallbackIndexRoute: CallbackIndexRoute, 463 463 + ProfileDidFollowersRoute: ProfileDidFollowersRoute, 464 464 + ProfileDidFollowsRoute: ProfileDidFollowsRoute, 337 465 ProfileDidIndexRoute: ProfileDidIndexRoute, 466 466 + ProfileDidFeedRkeyRoute: ProfileDidFeedRkeyRoute, 338 467 ProfileDidPostRkeyRoute: ProfileDidPostRkeyRouteWithChildren, 339 468 } 340 469 export const routeTree = rootRouteImport

+8 -5

src/routes/__root.tsx

··· 22 22 import Login from "~/components/Login"; 23 23 import { NotFound } from "~/components/NotFound"; 24 24 import { FluentEmojiHighContrastGlowingStar } from "~/components/Star"; 25 25 + import { LikeMutationQueueProvider } from "~/providers/LikeMutationQueueProvider"; 25 26 import { UnifiedAuthProvider, useAuth } from "~/providers/UnifiedAuthProvider"; 26 27 import { composerAtom, hueAtom, useAtomCssVar } from "~/utils/atoms"; 27 28 import { seo } from "~/utils/seo"; ··· 79 80 function RootComponent() { 80 81 return ( 81 82 <UnifiedAuthProvider> 82 82 - <RootDocument> 83 83 - <KeepAliveProvider> 84 84 - <KeepAliveOutlet /> 85 85 - </KeepAliveProvider> 86 86 - </RootDocument> 83 83 + <LikeMutationQueueProvider> 84 84 + <RootDocument> 85 85 + <KeepAliveProvider> 86 86 + <KeepAliveOutlet /> 87 87 + </KeepAliveProvider> 88 88 + </RootDocument> 89 89 + </LikeMutationQueueProvider> 87 90 </UnifiedAuthProvider> 88 91 ); 89 92 }

+44 -33

src/routes/index.tsx

··· 359 359 > 360 360 {!isAuthRestoring && savedFeeds.length > 0 ? ( 361 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`}> 362 362 - {savedFeeds.map((item: any, idx: number) => { 363 363 - const label = item.value.split("/").pop() || item.value; 364 364 - const isActive = selectedFeed === item.value; 365 365 - return ( 366 366 - <button 367 367 - key={item.value || idx} 368 368 - className={`px-3 py-1 rounded-full whitespace-nowrap font-medium transition-colors ${ 369 369 - isActive 370 370 - ? "text-gray-900 dark:text-gray-100 hover:bg-gray-300 dark:bg-gray-700 bg-gray-200 hover:dark:bg-gray-600" 371 371 - : "text-gray-600 dark:text-gray-400 hover:bg-gray-100 hover:dark:bg-gray-800" 372 372 - // ? "bg-gray-500 text-white" 373 373 - // : item.pinned 374 374 - // ? "bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-200" 375 375 - // : "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-200" 376 376 - }`} 377 377 - onClick={() => setSelectedFeed(item.value)} 378 378 - title={item.value} 379 379 - > 380 380 - {label} 381 381 - {item.pinned && ( 382 382 - <span 383 383 - className={`ml-1 text-xs ${ 384 384 - isActive 385 385 - ? "text-gray-900 dark:text-gray-100" 386 386 - : "text-gray-600 dark:text-gray-400" 387 387 - }`} 388 388 - > 389 389 - ★ 390 390 - </span> 391 391 - )} 392 392 - </button> 393 393 - ); 394 394 - })} 362 362 + {savedFeeds.map((item: any, idx: number) => {return <FeedTabOnTop key={item} item={item} idx={idx} />})} 395 363 </div> 396 364 ) : ( 397 365 // <span className="text-xl font-bold ml-2">Home</span> ··· 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({

+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 }: { notification: string }) { 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 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 + }

+663 -81

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

··· 1 1 - import { RichText } from "@atproto/api"; 1 1 + import { Agent, RichText } from "@atproto/api"; 2 2 + import * as ATPAPI from "@atproto/api"; 3 3 + import { TID } from "@atproto/common-web"; 2 4 import { useQueryClient } from "@tanstack/react-query"; 3 3 - import { createFileRoute, useNavigate } from "@tanstack/react-router"; 5 5 + import { createFileRoute, Link, useNavigate } from "@tanstack/react-router"; 4 6 import { useAtom } from "jotai"; 5 7 import React, { type ReactNode, useEffect, useState } from "react"; 6 8 9 9 + import defaultpfp from "~/../public/favicon.png"; 7 10 import { Header } from "~/components/Header"; 8 8 - import { Button } from "~/components/radix-m3-rd/Button"; 11 11 + import { 12 12 + ReusableTabRoute, 13 13 + useReusableTabScrollRestore, 14 14 + } from "~/components/ReusableTabRoute"; 9 15 import { 10 16 renderTextWithFacets, 11 17 UniversalPostRendererATURILoader, 12 18 } from "~/components/UniversalPostRenderer"; 13 19 import { useAuth } from "~/providers/UnifiedAuthProvider"; 14 14 - import { imgCDNAtom } from "~/utils/atoms"; 20 20 + import { enableBitesAtom, imgCDNAtom, profileChipsAtom } from "~/utils/atoms"; 15 21 import { 16 22 toggleFollow, 17 23 useGetFollowState, 18 24 useGetOneToOneState, 19 25 } from "~/utils/followState"; 26 26 + import { useFastSetLikesFromFeed } from "~/utils/likeMutationQueue"; 20 27 import { 21 28 useInfiniteQueryAuthorFeed, 29 29 + useQueryArbitrary, 30 30 + useQueryConstellation, 31 31 + useQueryConstellationLinksCountDistinctDids, 22 32 useQueryIdentity, 23 33 useQueryProfile, 24 34 } from "~/utils/useQuery"; 25 35 36 36 + import { Chip } from "../notifications"; 37 37 + 26 38 export const Route = createFileRoute("/profile/$did/")({ 27 39 component: ProfileComponent, 28 40 }); ··· 30 42 function ProfileComponent() { 31 43 // booo bad this is not always the did it might be a handle, use identity.did instead 32 44 const { did } = Route.useParams(); 45 45 + const { agent } = useAuth(); 33 46 const navigate = useNavigate(); 34 47 const queryClient = useQueryClient(); 35 48 const { ··· 48 61 const { data: profileRecord } = useQueryProfile(profileUri); 49 62 const profile = profileRecord?.value; 50 63 51 51 - const { 52 52 - data: postsData, 53 53 - fetchNextPage, 54 54 - hasNextPage, 55 55 - isFetchingNextPage, 56 56 - isLoading: arePostsLoading, 57 57 - } = useInfiniteQueryAuthorFeed(resolvedDid, pdsUrl); 58 58 - 59 59 - React.useEffect(() => { 60 60 - if (postsData) { 61 61 - postsData.pages.forEach((page) => { 62 62 - page.records.forEach((record) => { 63 63 - if (!queryClient.getQueryData(["post", record.uri])) { 64 64 - queryClient.setQueryData(["post", record.uri], record); 65 65 - } 66 66 - }); 67 67 - }); 68 68 - } 69 69 - }, [postsData, queryClient]); 70 70 - 71 71 - const posts = React.useMemo( 72 72 - () => postsData?.pages.flatMap((page) => page.records) ?? [], 73 73 - [postsData] 74 74 - ); 75 75 - 76 64 const [imgcdn] = useAtom(imgCDNAtom); 77 65 78 66 function getAvatarUrl(p: typeof profile) { ··· 91 79 const handle = resolvedHandle ? `@${resolvedHandle}` : resolvedDid || did; 92 80 const description = profile?.description || ""; 93 81 94 94 - if (isIdentityLoading) { 95 95 - return ( 96 96 - <div className="p-4 text-center text-gray-500">Resolving profile...</div> 97 97 - ); 98 98 - } 82 82 + const isReady = !!resolvedDid && !isIdentityLoading && !!profileRecord; 99 83 100 100 - if (identityError) { 101 101 - return ( 102 102 - <div className="p-4 text-center text-red-500"> 103 103 - Error: {identityError.message} 104 104 - </div> 105 105 - ); 106 106 - } 84 84 + const resultwhateversure = useQueryConstellationLinksCountDistinctDids(resolvedDid ? { 85 85 + method: "/links/count/distinct-dids", 86 86 + collection: "app.bsky.graph.follow", 87 87 + target: resolvedDid, 88 88 + path: ".subject" 89 89 + } : undefined) 107 90 108 108 - if (!resolvedDid) { 109 109 - return ( 110 110 - <div className="p-4 text-center text-gray-500">Profile not found.</div> 111 111 - ); 112 112 - } 91 91 + const followercount = resultwhateversure?.data?.total; 113 92 114 93 return ( 115 115 - <> 94 94 + <div className=""> 116 95 <Header 117 96 title={`Profile`} 118 97 backButtonCallback={() => { ··· 122 101 window.location.assign("/"); 123 102 } 124 103 }} 104 104 + bottomBorderDisabled={true} 125 105 /> 126 106 {/* <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"> 127 107 <Link ··· 164 144 </div> 165 145 166 146 <div className="absolute right-[16px] top-[170px] flex flex-row gap-2.5"> 147 147 + <BiteButton targetdidorhandle={did} /> 167 148 {/* 168 149 todo: full follow and unfollow backfill (along with partial likes backfill, 169 150 just enough for it to be useful) ··· 171 152 also save it persistently 172 153 */} 173 154 <FollowButton targetdidorhandle={did} /> 174 174 - <Button className="rounded-full" variant={"secondary"}> 155 155 + <button className="rounded-full dark:bg-gray-600 bg-gray-300 px-3 py-2 text-[14px]"> 175 156 ... {/* todo: icon */} 176 176 - </Button> 157 157 + </button> 177 158 </div> 178 159 179 160 {/* Info Card */} ··· 183 164 <Mutual targetdidorhandle={did} /> 184 165 {handle} 185 166 </div> 167 167 + <div className="flex flex-row gap-2 text-md text-gray-500 dark:text-gray-400 mb-2"> 168 168 + <Link to="/profile/$did/followers" params={{did: did}}>{followercount && (<span className="mr-1 text-gray-900 dark:text-gray-200 font-medium">{followercount}</span>)}Followers</Link> 169 169 + - 170 170 + <Link to="/profile/$did/follows" params={{did: did}}>Follows</Link> 171 171 + </div> 186 172 {description && ( 187 173 <div className="text-base leading-relaxed text-gray-800 dark:text-gray-300 mb-5 whitespace-pre-wrap break-words text-[15px]"> 188 174 {/* {description} */} ··· 192 178 </div> 193 179 </div> 194 180 195 195 - {/* Posts Section */} 196 196 - <div className="max-w-2xl mx-auto"> 197 197 - <div className="text-gray-500 dark:text-gray-400 text-lg font-semibold my-3 mx-4"> 198 198 - Posts 181 181 + {/* this should not be rendered until its ready (the top profile layout is stable) */} 182 182 + {isReady ? ( 183 183 + <ReusableTabRoute 184 184 + route={`Profile` + did} 185 185 + tabs={{ 186 186 + Posts: <PostsTab did={did} />, 187 187 + Reposts: <RepostsTab did={did} />, 188 188 + Feeds: <FeedsTab did={did} />, 189 189 + Lists: <ListsTab did={did} />, 190 190 + ...(identity?.did === agent?.did 191 191 + ? { Likes: <SelfLikesTab did={did} /> } 192 192 + : {}), 193 193 + }} 194 194 + /> 195 195 + ) : isIdentityLoading ? ( 196 196 + <div className="p-4 text-center text-gray-500"> 197 197 + Resolving profile... 199 198 </div> 200 200 - <div> 201 201 - {posts.map((post) => ( 199 199 + ) : identityError ? ( 200 200 + <div className="p-4 text-center text-red-500"> 201 201 + Error: {identityError.message} 202 202 + </div> 203 203 + ) : !resolvedDid ? ( 204 204 + <div className="p-4 text-center text-gray-500">Profile not found.</div> 205 205 + ) : ( 206 206 + <div className="p-4 text-center text-gray-500"> 207 207 + Loading profile content... 208 208 + </div> 209 209 + )} 210 210 + </div> 211 211 + ); 212 212 + } 213 213 + 214 214 + export type ProfilePostsFilter = { 215 215 + posts: boolean, 216 216 + replies: boolean, 217 217 + mediaOnly: boolean, 218 218 + } 219 219 + export const defaultProfilePostsFilter: ProfilePostsFilter = { 220 220 + posts: true, 221 221 + replies: true, 222 222 + mediaOnly: false, 223 223 + } 224 224 + 225 225 + function ProfilePostsFilterChipBar({filters, toggle}:{filters: ProfilePostsFilter | null, toggle: (key: keyof ProfilePostsFilter) => void}) { 226 226 + const empty = (!filters?.replies && !filters?.posts); 227 227 + const almostEmpty = (!filters?.replies && filters?.posts); 228 228 + 229 229 + useEffect(() => { 230 230 + if (empty) { 231 231 + toggle("posts") 232 232 + } 233 233 + }, [empty, toggle]); 234 234 + 235 235 + return ( 236 236 + <div className="flex flex-row flex-wrap gap-2 px-4 pt-4"> 237 237 + <Chip 238 238 + state={filters?.posts ?? true} 239 239 + text="Posts" 240 240 + onClick={() => almostEmpty ? null : toggle("posts")} 241 241 + /> 242 242 + <Chip 243 243 + state={filters?.replies ?? true} 244 244 + text="Replies" 245 245 + onClick={() => toggle("replies")} 246 246 + /> 247 247 + <Chip 248 248 + state={filters?.mediaOnly ?? false} 249 249 + text="Media Only" 250 250 + onClick={() => toggle("mediaOnly")} 251 251 + /> 252 252 + </div> 253 253 + ); 254 254 + } 255 255 + 256 256 + function PostsTab({ did }: { did: string }) { 257 257 + // todo: this needs to be a (non-persisted is fine) atom to survive navigation 258 258 + const [filterses, setFilterses] = useAtom(profileChipsAtom); 259 259 + const filters = filterses?.[did]; 260 260 + const setFilters = (obj: ProfilePostsFilter) => { 261 261 + setFilterses((prev)=>{ 262 262 + return{ 263 263 + ...prev, 264 264 + [did]: obj 265 265 + } 266 266 + }) 267 267 + } 268 268 + useEffect(()=>{ 269 269 + if (!filters) { 270 270 + setFilters(defaultProfilePostsFilter); 271 271 + } 272 272 + }) 273 273 + useReusableTabScrollRestore(`Profile` + did); 274 274 + const queryClient = useQueryClient(); 275 275 + const { 276 276 + data: identity, 277 277 + isLoading: isIdentityLoading, 278 278 + error: identityError, 279 279 + } = useQueryIdentity(did); 280 280 + 281 281 + const resolvedDid = did.startsWith("did:") ? did : identity?.did; 282 282 + 283 283 + const { 284 284 + data: postsData, 285 285 + fetchNextPage, 286 286 + hasNextPage, 287 287 + isFetchingNextPage, 288 288 + isLoading: arePostsLoading, 289 289 + } = useInfiniteQueryAuthorFeed(resolvedDid, identity?.pds); 290 290 + 291 291 + React.useEffect(() => { 292 292 + if (postsData) { 293 293 + postsData.pages.forEach((page) => { 294 294 + page.records.forEach((record) => { 295 295 + if (!queryClient.getQueryData(["post", record.uri])) { 296 296 + queryClient.setQueryData(["post", record.uri], record); 297 297 + } 298 298 + }); 299 299 + }); 300 300 + } 301 301 + }, [postsData, queryClient]); 302 302 + 303 303 + const posts = React.useMemo( 304 304 + () => postsData?.pages.flatMap((page) => page.records) ?? [], 305 305 + [postsData] 306 306 + ); 307 307 + 308 308 + const toggle = (key: keyof ProfilePostsFilter) => { 309 309 + setFilterses(prev => { 310 310 + const existing = prev[did] ?? { posts: false, replies: false, mediaOnly: false }; // default 311 311 + 312 312 + return { 313 313 + ...prev, 314 314 + [did]: { 315 315 + ...existing, 316 316 + [key]: !existing[key], // safely negate 317 317 + }, 318 318 + }; 319 319 + }); 320 320 + }; 321 321 + 322 322 + return ( 323 323 + <> 324 324 + {/* <div className="text-gray-500 dark:text-gray-400 text-lg font-semibold my-3 mx-4"> 325 325 + Posts 326 326 + </div> */} 327 327 + <ProfilePostsFilterChipBar filters={filters} toggle={toggle} /> 328 328 + <div> 329 329 + {posts.map((post) => ( 330 330 + <UniversalPostRendererATURILoader 331 331 + key={post.uri} 332 332 + atUri={post.uri} 333 333 + feedviewpost={true} 334 334 + filterNoReplies={!filters?.replies} 335 335 + filterMustHaveMedia={filters?.mediaOnly} 336 336 + filterMustBeReply={!filters?.posts} 337 337 + /> 338 338 + ))} 339 339 + </div> 340 340 + 341 341 + {/* Loading and "Load More" states */} 342 342 + {arePostsLoading && posts.length === 0 && ( 343 343 + <div className="p-4 text-center text-gray-500">Loading posts...</div> 344 344 + )} 345 345 + {isFetchingNextPage && ( 346 346 + <div className="p-4 text-center text-gray-500">Loading more...</div> 347 347 + )} 348 348 + {hasNextPage && !isFetchingNextPage && ( 349 349 + <button 350 350 + onClick={() => fetchNextPage()} 351 351 + 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" 352 352 + > 353 353 + Load More Posts 354 354 + </button> 355 355 + )} 356 356 + {posts.length === 0 && !arePostsLoading && ( 357 357 + <div className="p-4 text-center text-gray-500">No posts found.</div> 358 358 + )} 359 359 + </> 360 360 + ); 361 361 + } 362 362 + 363 363 + function RepostsTab({ did }: { did: string }) { 364 364 + useReusableTabScrollRestore(`Profile` + did); 365 365 + const { 366 366 + data: identity, 367 367 + isLoading: isIdentityLoading, 368 368 + error: identityError, 369 369 + } = useQueryIdentity(did); 370 370 + 371 371 + const resolvedDid = did.startsWith("did:") ? did : identity?.did; 372 372 + 373 373 + const { 374 374 + data: repostsData, 375 375 + fetchNextPage, 376 376 + hasNextPage, 377 377 + isFetchingNextPage, 378 378 + isLoading: arePostsLoading, 379 379 + } = useInfiniteQueryAuthorFeed( 380 380 + resolvedDid, 381 381 + identity?.pds, 382 382 + "app.bsky.feed.repost" 383 383 + ); 384 384 + 385 385 + const reposts = React.useMemo( 386 386 + () => repostsData?.pages.flatMap((page) => page.records) ?? [], 387 387 + [repostsData] 388 388 + ); 389 389 + 390 390 + return ( 391 391 + <> 392 392 + <div className="text-gray-500 dark:text-gray-400 text-lg font-semibold my-3 mx-4"> 393 393 + Reposts 394 394 + </div> 395 395 + <div> 396 396 + {reposts.map((repost) => { 397 397 + if ( 398 398 + !repost || 399 399 + !repost?.value || 400 400 + !repost?.value?.subject || 401 401 + // @ts-expect-error blehhhhh 402 402 + !repost?.value?.subject?.uri 403 403 + ) 404 404 + return; 405 405 + const repostRecord = 406 406 + repost.value as unknown as ATPAPI.AppBskyFeedRepost.Record; 407 407 + return ( 202 408 <UniversalPostRendererATURILoader 203 203 - key={post.uri} 204 204 - atUri={post.uri} 409 409 + key={repostRecord.subject.uri} 410 410 + atUri={repostRecord.subject.uri} 205 411 feedviewpost={true} 412 412 + repostedby={repost.uri} 206 413 /> 207 207 - ))} 414 414 + ); 415 415 + })} 416 416 + </div> 417 417 + 418 418 + {/* Loading and "Load More" states */} 419 419 + {arePostsLoading && reposts.length === 0 && ( 420 420 + <div className="p-4 text-center text-gray-500">Loading posts...</div> 421 421 + )} 422 422 + {isFetchingNextPage && ( 423 423 + <div className="p-4 text-center text-gray-500">Loading more...</div> 424 424 + )} 425 425 + {hasNextPage && !isFetchingNextPage && ( 426 426 + <button 427 427 + onClick={() => fetchNextPage()} 428 428 + 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" 429 429 + > 430 430 + Load More Posts 431 431 + </button> 432 432 + )} 433 433 + {reposts.length === 0 && !arePostsLoading && ( 434 434 + <div className="p-4 text-center text-gray-500">No posts found.</div> 435 435 + )} 436 436 + </> 437 437 + ); 438 438 + } 439 439 + 440 440 + function FeedsTab({ did }: { did: string }) { 441 441 + useReusableTabScrollRestore(`Profile` + did); 442 442 + const { 443 443 + data: identity, 444 444 + isLoading: isIdentityLoading, 445 445 + error: identityError, 446 446 + } = useQueryIdentity(did); 447 447 + 448 448 + const resolvedDid = did.startsWith("did:") ? did : identity?.did; 449 449 + 450 450 + const { 451 451 + data: feedsData, 452 452 + fetchNextPage, 453 453 + hasNextPage, 454 454 + isFetchingNextPage, 455 455 + isLoading: arePostsLoading, 456 456 + } = useInfiniteQueryAuthorFeed( 457 457 + resolvedDid, 458 458 + identity?.pds, 459 459 + "app.bsky.feed.generator" 460 460 + ); 461 461 + 462 462 + const feeds = React.useMemo( 463 463 + () => feedsData?.pages.flatMap((page) => page.records) ?? [], 464 464 + [feedsData] 465 465 + ); 466 466 + 467 467 + return ( 468 468 + <> 469 469 + <div className="text-gray-500 dark:text-gray-400 text-lg font-semibold my-3 mx-4"> 470 470 + Feeds 471 471 + </div> 472 472 + <div> 473 473 + {feeds.map((feed) => { 474 474 + if (!feed || !feed?.value) return; 475 475 + const feedGenRecord = 476 476 + feed.value as unknown as ATPAPI.AppBskyFeedGenerator.Record; 477 477 + return <FeedItemRender feed={feed as any} key={feed.uri} />; 478 478 + })} 479 479 + </div> 480 480 + 481 481 + {/* Loading and "Load More" states */} 482 482 + {arePostsLoading && feeds.length === 0 && ( 483 483 + <div className="p-4 text-center text-gray-500">Loading feeds...</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 Feeds 494 494 + </button> 495 495 + )} 496 496 + {feeds.length === 0 && !arePostsLoading && ( 497 497 + <div className="p-4 text-center text-gray-500">No feeds found.</div> 498 498 + )} 499 499 + </> 500 500 + ); 501 501 + } 502 502 + 503 503 + export function FeedItemRenderAturiLoader({ 504 504 + aturi, 505 505 + listmode, 506 506 + disableBottomBorder, 507 507 + disablePropagation, 508 508 + }: { 509 509 + aturi: string; 510 510 + listmode?: boolean; 511 511 + disableBottomBorder?: boolean; 512 512 + disablePropagation?: boolean; 513 513 + }) { 514 514 + const { data: record } = useQueryArbitrary(aturi); 515 515 + 516 516 + if (!record) return; 517 517 + return ( 518 518 + <FeedItemRender 519 519 + listmode={listmode} 520 520 + feed={record} 521 521 + disableBottomBorder={disableBottomBorder} 522 522 + disablePropagation={disablePropagation} 523 523 + /> 524 524 + ); 525 525 + } 526 526 + 527 527 + export function FeedItemRender({ 528 528 + feed, 529 529 + listmode, 530 530 + disableBottomBorder, 531 531 + disablePropagation, 532 532 + }: { 533 533 + feed: { uri: string; cid: string; value: any }; 534 534 + listmode?: boolean; 535 535 + disableBottomBorder?: boolean; 536 536 + disablePropagation?: boolean; 537 537 + }) { 538 538 + const name = listmode 539 539 + ? (feed.value?.name as string) 540 540 + : (feed.value?.displayName as string); 541 541 + const aturi = new ATPAPI.AtUri(feed.uri); 542 542 + const { data: identity } = useQueryIdentity(aturi.host); 543 543 + const resolvedDid = identity?.did; 544 544 + const [imgcdn] = useAtom(imgCDNAtom); 545 545 + 546 546 + function getAvatarThumbnailUrl(f: typeof feed) { 547 547 + const link = f?.value.avatar?.ref?.["$link"]; 548 548 + if (!link || !resolvedDid) return null; 549 549 + return `https://${imgcdn}/img/avatar/plain/${resolvedDid}/${link}@jpeg`; 550 550 + } 551 551 + 552 552 + const { data: likes } = useQueryConstellation( 553 553 + // @ts-expect-error overloads sucks 554 554 + !listmode 555 555 + ? { 556 556 + target: feed.uri, 557 557 + method: "/links/count", 558 558 + collection: "app.bsky.feed.like", 559 559 + path: ".subject.uri", 560 560 + } 561 561 + : undefined 562 562 + ); 563 563 + 564 564 + return ( 565 565 + <Link 566 566 + className={`px-4 py-4 ${!disableBottomBorder && "border-b"} flex flex-col gap-1`} 567 567 + to="/profile/$did/feed/$rkey" 568 568 + params={{ did: aturi.host, rkey: aturi.rkey }} 569 569 + onClick={(e) => { 570 570 + e.stopPropagation(); 571 571 + }} 572 572 + > 573 573 + <div className="flex flex-row gap-3"> 574 574 + <div className="min-w-10 min-h-10"> 575 575 + <img 576 576 + src={getAvatarThumbnailUrl(feed) || defaultpfp} 577 577 + className="h-10 w-10 rounded border" 578 578 + /> 208 579 </div> 580 580 + <div className="flex flex-col"> 581 581 + <span className="">{name}</span> 582 582 + <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"> 583 583 + {feed.value.did || aturi.rkey} 584 584 + </span> 585 585 + </div> 586 586 + <div className="flex-1" /> 587 587 + {/* <div className="button bg-red-500 rounded-full min-w-[60px]" /> */} 588 588 + </div> 589 589 + <span className=" text-sm">{feed.value?.description}</span> 590 590 + {!listmode && ( 591 591 + <span className=" text-sm dark:text-gray-400 text-gray-500"> 592 592 + Liked by {((likes as unknown as any)?.total as number) || 0} users 593 593 + </span> 594 594 + )} 595 595 + </Link> 596 596 + ); 597 597 + } 209 598 210 210 - {/* Loading and "Load More" states */} 211 211 - {arePostsLoading && posts.length === 0 && ( 212 212 - <div className="p-4 text-center text-gray-500">Loading posts...</div> 213 213 - )} 214 214 - {isFetchingNextPage && ( 215 215 - <div className="p-4 text-center text-gray-500">Loading more...</div> 216 216 - )} 217 217 - {hasNextPage && !isFetchingNextPage && ( 218 218 - <button 219 219 - onClick={() => fetchNextPage()} 220 220 - 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" 221 221 - > 222 222 - Load More Posts 223 223 - </button> 224 224 - )} 225 225 - {posts.length === 0 && !arePostsLoading && ( 226 226 - <div className="p-4 text-center text-gray-500">No posts found.</div> 227 227 - )} 599 599 + function ListsTab({ did }: { did: string }) { 600 600 + useReusableTabScrollRestore(`Profile` + did); 601 601 + const { 602 602 + data: identity, 603 603 + isLoading: isIdentityLoading, 604 604 + error: identityError, 605 605 + } = useQueryIdentity(did); 606 606 + 607 607 + const resolvedDid = did.startsWith("did:") ? did : identity?.did; 608 608 + 609 609 + const { 610 610 + data: feedsData, 611 611 + fetchNextPage, 612 612 + hasNextPage, 613 613 + isFetchingNextPage, 614 614 + isLoading: arePostsLoading, 615 615 + } = useInfiniteQueryAuthorFeed( 616 616 + resolvedDid, 617 617 + identity?.pds, 618 618 + "app.bsky.graph.list" 619 619 + ); 620 620 + 621 621 + const feeds = React.useMemo( 622 622 + () => feedsData?.pages.flatMap((page) => page.records) ?? [], 623 623 + [feedsData] 624 624 + ); 625 625 + 626 626 + return ( 627 627 + <> 628 628 + <div className="text-gray-500 dark:text-gray-400 text-lg font-semibold my-3 mx-4"> 629 629 + Feeds 228 630 </div> 631 631 + <div> 632 632 + {feeds.map((feed) => { 633 633 + if (!feed || !feed?.value) return; 634 634 + const feedGenRecord = 635 635 + feed.value as unknown as ATPAPI.AppBskyFeedGenerator.Record; 636 636 + return ( 637 637 + <FeedItemRender listmode={true} feed={feed as any} key={feed.uri} /> 638 638 + ); 639 639 + })} 640 640 + </div> 641 641 + 642 642 + {/* Loading and "Load More" states */} 643 643 + {arePostsLoading && feeds.length === 0 && ( 644 644 + <div className="p-4 text-center text-gray-500">Loading lists...</div> 645 645 + )} 646 646 + {isFetchingNextPage && ( 647 647 + <div className="p-4 text-center text-gray-500">Loading more...</div> 648 648 + )} 649 649 + {hasNextPage && !isFetchingNextPage && ( 650 650 + <button 651 651 + onClick={() => fetchNextPage()} 652 652 + 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" 653 653 + > 654 654 + Load More Lists 655 655 + </button> 656 656 + )} 657 657 + {feeds.length === 0 && !arePostsLoading && ( 658 658 + <div className="p-4 text-center text-gray-500">No lists found.</div> 659 659 + )} 660 660 + </> 661 661 + ); 662 662 + } 663 663 + 664 664 + function SelfLikesTab({ did }: { did: string }) { 665 665 + useReusableTabScrollRestore(`Profile` + did); 666 666 + const { 667 667 + data: identity, 668 668 + isLoading: isIdentityLoading, 669 669 + error: identityError, 670 670 + } = useQueryIdentity(did); 671 671 + 672 672 + const resolvedDid = did.startsWith("did:") ? did : identity?.did; 673 673 + 674 674 + const { 675 675 + data: likesData, 676 676 + fetchNextPage, 677 677 + hasNextPage, 678 678 + isFetchingNextPage, 679 679 + isLoading: arePostsLoading, 680 680 + } = useInfiniteQueryAuthorFeed( 681 681 + resolvedDid, 682 682 + identity?.pds, 683 683 + "app.bsky.feed.like" 684 684 + ); 685 685 + 686 686 + const likes = React.useMemo( 687 687 + () => likesData?.pages.flatMap((page) => page.records) ?? [], 688 688 + [likesData] 689 689 + ); 690 690 + 691 691 + const { setFastState } = useFastSetLikesFromFeed(); 692 692 + const seededRef = React.useRef(new Set<string>()); 693 693 + 694 694 + useEffect(() => { 695 695 + for (const like of likes) { 696 696 + if (!seededRef.current.has(like.uri)) { 697 697 + seededRef.current.add(like.uri); 698 698 + const record = like.value as unknown as ATPAPI.AppBskyFeedLike.Record; 699 699 + setFastState(record.subject.uri, { 700 700 + target: record.subject.uri, 701 701 + uri: like.uri, 702 702 + cid: like.cid, 703 703 + }); 704 704 + } 705 705 + } 706 706 + }, [likes, setFastState]); 707 707 + 708 708 + return ( 709 709 + <> 710 710 + <div className="text-gray-500 dark:text-gray-400 text-lg font-semibold my-3 mx-4"> 711 711 + Likes 712 712 + </div> 713 713 + <div> 714 714 + {likes.map((like) => { 715 715 + if ( 716 716 + !like || 717 717 + !like?.value || 718 718 + !like?.value?.subject || 719 719 + // @ts-expect-error blehhhhh 720 720 + !like?.value?.subject?.uri 721 721 + ) 722 722 + return; 723 723 + const likeRecord = 724 724 + like.value as unknown as ATPAPI.AppBskyFeedLike.Record; 725 725 + return ( 726 726 + <UniversalPostRendererATURILoader 727 727 + key={likeRecord.subject.uri} 728 728 + atUri={likeRecord.subject.uri} 729 729 + feedviewpost={true} 730 730 + /> 731 731 + ); 732 732 + })} 733 733 + </div> 734 734 + 735 735 + {/* Loading and "Load More" states */} 736 736 + {arePostsLoading && likes.length === 0 && ( 737 737 + <div className="p-4 text-center text-gray-500">Loading likes...</div> 738 738 + )} 739 739 + {isFetchingNextPage && ( 740 740 + <div className="p-4 text-center text-gray-500">Loading more...</div> 741 741 + )} 742 742 + {hasNextPage && !isFetchingNextPage && ( 743 743 + <button 744 744 + onClick={() => fetchNextPage()} 745 745 + 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" 746 746 + > 747 747 + Load More Likes 748 748 + </button> 749 749 + )} 750 750 + {likes.length === 0 && !arePostsLoading && ( 751 751 + <div className="p-4 text-center text-gray-500">No likes found.</div> 752 752 + )} 229 753 </> 230 754 ); 231 755 } ··· 249 773 {identity?.did !== agent?.did ? ( 250 774 <> 251 775 {!(followRecords?.length && followRecords?.length > 0) ? ( 252 252 - <Button 776 776 + <button 253 777 onClick={(e) => { 254 778 e.stopPropagation(); 255 779 toggleFollow({ ··· 259 783 queryClient: queryClient, 260 784 }); 261 785 }} 786 786 + 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]" 262 787 > 263 788 Follow 264 264 - </Button> 789 789 + </button> 265 790 ) : ( 266 266 - <Button 791 791 + <button 267 792 onClick={(e) => { 268 793 e.stopPropagation(); 269 794 toggleFollow({ ··· 273 798 queryClient: queryClient, 274 799 }); 275 800 }} 801 801 + 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]" 276 802 > 277 803 Unfollow 278 278 - </Button> 804 804 + </button> 279 805 )} 280 806 </> 281 807 ) : ( 282 282 - <Button variant={"secondary"}>Edit Profile</Button> 808 808 + <button className="rounded-full h-10 bg-gray-300 dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-500 transition-colors px-4 py-2 text-[14px]"> 809 809 + Edit Profile 810 810 + </button> 283 811 )} 284 812 </> 285 813 ); 286 814 } 815 815 + 816 816 + export function BiteButton({ 817 817 + targetdidorhandle, 818 818 + }: { 819 819 + targetdidorhandle: string; 820 820 + }) { 821 821 + const { agent } = useAuth(); 822 822 + const { data: identity } = useQueryIdentity(targetdidorhandle); 823 823 + const [show] = useAtom(enableBitesAtom); 824 824 + 825 825 + if (!show) return 826 826 + 827 827 + return ( 828 828 + <> 829 829 + <button 830 830 + onClick={(e) => { 831 831 + e.stopPropagation(); 832 832 + sendBite({ 833 833 + agent: agent || undefined, 834 834 + targetDid: identity?.did, 835 835 + }); 836 836 + }} 837 837 + 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]" 838 838 + > 839 839 + Bite 840 840 + </button> 841 841 + </> 842 842 + ); 843 843 + } 844 844 + 845 845 + function sendBite({ 846 846 + agent, 847 847 + targetDid, 848 848 + }: { 849 849 + agent?: Agent; 850 850 + targetDid?: string; 851 851 + }) { 852 852 + if (!agent?.did || !targetDid) return; 853 853 + const newRecord = { 854 854 + repo: agent.did, 855 855 + collection: "net.wafrn.feed.bite", 856 856 + rkey: TID.next().toString(), 857 857 + record: { 858 858 + $type: "net.wafrn.feed.bite", 859 859 + subject: "at://"+targetDid, 860 860 + createdAt: new Date().toISOString(), 861 861 + }, 862 862 + }; 863 863 + 864 864 + agent.com.atproto.repo.createRecord(newRecord).catch((err) => { 865 865 + console.error("Bite failed:", err); 866 866 + }); 867 867 + } 868 868 + 287 869 288 870 export function Mutual({ targetdidorhandle }: { targetdidorhandle: string }) { 289 871 const { agent } = useAuth();

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

+118 -16

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"; 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"; ··· 11 12 defaultImgCDN, 12 13 defaultslingshotURL, 13 14 defaultVideoCDN, 15 15 + enableBitesAtom, 16 16 + enableBridgyTextAtom, 17 17 + enableWafrnTextAtom, 14 18 hueAtom, 15 19 imgCDNAtom, 16 20 slingshotURLAtom, ··· 38 42 <Login /> 39 43 </div> 40 44 <div className="h-4" /> 45 45 + 46 46 + <SettingHeading title="Personalization" top /> 47 47 + <Hue /> 48 48 + 49 49 + <SettingHeading title="Network Configuration" /> 50 50 + <div className="flex flex-col px-4 pb-2"> 51 51 + <span className="text-md">Service Endpoints</span> 52 52 + <span className="text-sm text-gray-500 dark:text-gray-400"> 53 53 + Customize the servers to be used by the app 54 54 + </span> 55 55 + </div> 41 56 <TextInputSetting 42 57 atom={constellationURLAtom} 43 58 title={"Constellation"} ··· 67 82 init={defaultVideoCDN} 68 83 /> 69 84 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 85 85 + <SettingHeading title="Experimental" /> 86 86 + <SwitchSetting 87 87 + atom={enableBitesAtom} 88 88 + title={"Bites"} 89 89 + description={"Enable Wafrn Bites to bite and be bitten by other people"} 90 90 + //init={false} 91 91 + /> 92 92 + <div className="h-4" /> 93 93 + <SwitchSetting 94 94 + atom={enableBridgyTextAtom} 95 95 + title={"Bridgy Text"} 96 96 + description={ 97 97 + "Show the original text of posts bridged from the Fediverse" 98 98 + } 99 99 + //init={false} 100 100 + /> 101 101 + <div className="h-4" /> 102 102 + <SwitchSetting 103 103 + atom={enableWafrnTextAtom} 104 104 + title={"Wafrn Text"} 105 105 + description={ 106 106 + "Show the original text of posts from Wafrn instances" 107 107 + } 108 108 + //init={false} 109 109 + /> 110 110 + <p className="text-gray-500 dark:text-gray-400 py-4 px-4 text-sm border rounded-xl mx-4 mt-8 mb-4"> 111 111 + Notice: Please restart/refresh the app if changes arent applying 112 112 + correctly 73 113 </p> 74 114 </> 75 115 ); 76 116 } 117 117 + 118 118 + export function SettingHeading({ 119 119 + title, 120 120 + top, 121 121 + }: { 122 122 + title: string; 123 123 + top?: boolean; 124 124 + }) { 125 125 + return ( 126 126 + <div 127 127 + className="px-4" 128 128 + style={{ marginTop: top ? 0 : 18, paddingBottom: 12 }} 129 129 + > 130 130 + <span className=" text-sm font-medium text-gray-500 dark:text-gray-400"> 131 131 + {title} 132 132 + </span> 133 133 + </div> 134 134 + ); 135 135 + } 136 136 + 137 137 + export function SwitchSetting({ 138 138 + atom, 139 139 + title, 140 140 + description, 141 141 + }: { 142 142 + atom: typeof enableBitesAtom; 143 143 + title?: string; 144 144 + description?: string; 145 145 + }) { 146 146 + const value = useAtomValue(atom); 147 147 + const setValue = useSetAtom(atom); 148 148 + 149 149 + const [hydrated, setHydrated] = useState(false); 150 150 + // eslint-disable-next-line react-hooks/set-state-in-effect 151 151 + useEffect(() => setHydrated(true), []); 152 152 + 153 153 + if (!hydrated) { 154 154 + // Avoid rendering Switch until we know storage is loaded 155 155 + return null; 156 156 + } 157 157 + 158 158 + return ( 159 159 + <div className="flex items-center gap-4 px-4 "> 160 160 + <label htmlFor={`switch-${title}`} className="flex flex-row flex-1"> 161 161 + <div className="flex flex-col"> 162 162 + <span className="text-md">{title}</span> 163 163 + <span className="text-sm text-gray-500 dark:text-gray-400"> 164 164 + {description} 165 165 + </span> 166 166 + </div> 167 167 + </label> 168 168 + 169 169 + <Switch.Root 170 170 + id={`switch-${title}`} 171 171 + checked={value} 172 172 + onCheckedChange={(v) => setValue(v)} 173 173 + className="m3switch root" 174 174 + > 175 175 + <Switch.Thumb className="m3switch thumb " /> 176 176 + </Switch.Root> 177 177 + </div> 178 178 + ); 179 179 + } 180 180 + 77 181 function Hue() { 78 182 const [hue, setHue] = useAtom(hueAtom); 79 183 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 - /> 184 184 + <div className="flex flex-col px-4"> 185 185 + <span className="z-[2] text-md">Hue</span> 186 186 + <span className="z-[2] text-sm text-gray-500 dark:text-gray-400"> 187 187 + Change the colors of the app 188 188 + </span> 189 189 + <div className="z-[1] flex flex-row items-center gap-4"> 190 190 + <SliderComponent atom={hueAtom} max={360} /> 87 191 <button 88 192 onClick={() => setHue(defaulthue ?? 28)} 89 193 className="px-6 py-2 h-12 rounded-full bg-gray-100 dark:bg-gray-800 ··· 154 258 ); 155 259 } 156 260 157 157 - 158 261 interface SliderProps { 159 262 atom: typeof hueAtom; 160 263 min?: number; ··· 168 271 max = 100, 169 272 step = 1, 170 273 }) => { 171 171 - 172 172 - const [value, setValue] = useAtom(atom) 274 274 + const [value, setValue] = useAtom(atom); 173 275 174 276 return ( 175 277 <Slider.Root ··· 186 288 <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 289 </Slider.Root> 188 290 ); 189 189 - }; 291 291 + };

+137

src/styles/app.css

··· 197 197 198 198 /* focus ring */ 199 199 .m3input-field.m3input-label.m3input-border input:focus { 200 200 + /*border-color: var(--m3input-focus-color);*/ 200 201 border-color: var(--m3input-focus-color); 202 202 + box-shadow: 0 0 0 1px var(--m3input-focus-color); 201 203 /*box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus-color) 20%, transparent);*/ 202 204 } 203 205 ··· 231 233 /* radix i love you but like cmon man */ 232 234 body[data-scroll-locked]{ 233 235 margin-left: var(--removed-body-scroll-bar-size) !important; 236 236 + } 237 237 + 238 238 + /* radix tabs */ 239 239 + 240 240 + .m3tab[data-radix-collection-item] { 241 241 + flex: 1; 242 242 + display: flex; 243 243 + padding: 12px 8px; 244 244 + align-items: center; 245 245 + justify-content: center; 246 246 + color: var(--color-gray-500); 247 247 + font-weight: 500; 248 248 + &:hover { 249 249 + background-color: var(--color-gray-100); 250 250 + cursor: pointer; 251 251 + } 252 252 + &[aria-selected="true"] { 253 253 + color: var(--color-gray-950); 254 254 + &::before{ 255 255 + content: ""; 256 256 + position: absolute; 257 257 + width: min(80px, 80%); 258 258 + border-radius: 99px 99px 0px 0px ; 259 259 + height: 3px; 260 260 + bottom: 0; 261 261 + background-color: var(--color-gray-400); 262 262 + } 263 263 + } 264 264 + } 265 265 + 266 266 + @media (prefers-color-scheme: dark) { 267 267 + .m3tab[data-radix-collection-item] { 268 268 + color: var(--color-gray-400); 269 269 + &:hover { 270 270 + background-color: var(--color-gray-900); 271 271 + cursor: pointer; 272 272 + } 273 273 + &[aria-selected="true"] { 274 274 + color: var(--color-gray-50); 275 275 + &::before{ 276 276 + background-color: var(--color-gray-500); 277 277 + } 278 278 + } 279 279 + } 280 280 + } 281 281 + 282 282 + :root{ 283 283 + --thumb-size: 2rem; 284 284 + --root-size: 3.25rem; 285 285 + 286 286 + --switch-off-border: var(--color-gray-400); 287 287 + --switch-off-bg: var(--color-gray-200); 288 288 + --switch-off-thumb: var(--color-gray-400); 289 289 + 290 290 + 291 291 + --switch-on-bg: var(--color-gray-500); 292 292 + --switch-on-thumb: var(--color-gray-50); 293 293 + 294 294 + } 295 295 + @media (prefers-color-scheme: dark) { 296 296 + :root { 297 297 + --switch-off-border: var(--color-gray-500); 298 298 + --switch-off-bg: var(--color-gray-800); 299 299 + --switch-off-thumb: var(--color-gray-500); 300 300 + 301 301 + 302 302 + --switch-on-bg: var(--color-gray-400); 303 303 + --switch-on-thumb: var(--color-gray-700); 304 304 + } 305 305 + } 306 306 + 307 307 + .m3switch.root{ 308 308 + /*w-10 h-6 bg-gray-300 rounded-full relative data-[state=checked]:bg-gray-500 transition-colors*/ 309 309 + /*width: 40px; 310 310 + height: 24px;*/ 311 311 + 312 312 + inline-size: var(--root-size); 313 313 + block-size: 2rem; 314 314 + border-radius: 99999px; 315 315 + 316 316 + transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; 317 317 + transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ 318 318 + transition-duration: var(--default-transition-duration); /* 150ms */ 319 319 + 320 320 + .m3switch.thumb{ 321 321 + /*block w-5 h-5 bg-white rounded-full shadow-sm transition-transform translate-x-[2px] data-[state=checked]:translate-x-[20px]*/ 322 322 + 323 323 + height: var(--thumb-size); 324 324 + width: var(--thumb-size); 325 325 + display: inline-block; 326 326 + border-radius: 9999px; 327 327 + 328 328 + transform-origin: center; 329 329 + 330 330 + transition-property: transform, translate, scale, rotate; 331 331 + transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ 332 332 + transition-duration: var(--default-transition-duration); /* 150ms */ 333 333 + 334 334 + } 335 335 + 336 336 + &[aria-checked="true"] { 337 337 + box-shadow: inset 0px 0px 0px 1.8px transparent; 338 338 + background-color: var(--switch-on-bg); 339 339 + 340 340 + .m3switch.thumb{ 341 341 + /*block w-5 h-5 bg-white rounded-full shadow-sm transition-transform translate-x-[2px] data-[state=checked]:translate-x-[20px]*/ 342 342 + 343 343 + background-color: var(--switch-on-thumb); 344 344 + transform: translate(calc((var(--root-size) / 2) - 50%),0) scale(0.72); 345 345 + &:active { 346 346 + transform: translate(calc((var(--root-size) / 2) - 50%),0) scale(0.88); 347 347 + } 348 348 + 349 349 + } 350 350 + &:active .m3switch.thumb{ 351 351 + transform: translate(calc((var(--root-size) / 2) - 50%),0) scale(0.88); 352 352 + } 353 353 + } 354 354 + 355 355 + &[aria-checked="false"] { 356 356 + box-shadow: inset 0px 0px 0px 1.8px var(--switch-off-border); 357 357 + background-color: var(--switch-off-bg); 358 358 + .m3switch.thumb{ 359 359 + /*block w-5 h-5 bg-white rounded-full shadow-sm transition-transform translate-x-[2px] data-[state=checked]:translate-x-[20px]*/ 360 360 + 361 361 + background-color: var(--switch-off-thumb); 362 362 + transform: translate(calc(-1 * (var(--root-size) / 2) + 50%),0) scale(0.5); 363 363 + &:active { 364 364 + transform: translate(calc(-1 * (var(--root-size) / 2) + 50%),0) scale(0.88); 365 365 + } 366 366 + } 367 367 + &:active .m3switch.thumb{ 368 368 + transform: translate(calc(-1 * (var(--root-size) / 2) + 50%),0) scale(0.88); 369 369 + } 370 370 + } 234 371 }

+67

src/utils/atoms.ts

··· 2 2 import { atomWithStorage } from "jotai/utils"; 3 3 import { useEffect } from "react"; 4 4 5 5 + import { type ProfilePostsFilter } from "~/routes/profile.$did"; 6 6 + 5 7 export const store = createStore(); 6 8 7 9 export const quickAuthAtom = atomWithStorage<string | null>( ··· 21 23 {} 22 24 ); 23 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 + 24 59 export const likedPostsAtom = atomWithStorage<Record<string, string>>( 25 60 "likedPosts", 26 61 {} 27 62 ); 63 63 + 64 64 + export type LikeRecord = { 65 65 + uri: string; // at://did/collection/rkey 66 66 + target: string; 67 67 + cid: string; 68 68 + }; 69 69 + 70 70 + export const internalLikedPostsAtom = atomWithStorage<Record<string, LikeRecord | null>>( 71 71 + "internal-liked-posts", 72 72 + {} 73 73 + ); 74 74 + 75 75 + export const profileChipsAtom = atom<Record<string, ProfilePostsFilter | null>>({}) 28 76 29 77 export const defaultconstellationURL = "constellation.microcosm.blue"; 30 78 export const constellationURLAtom = atomWithStorage<string>( ··· 80 128 // console.log("atom get ", initial); 81 129 // document.documentElement.style.setProperty(cssVar, initial.toString()); 82 130 // } 131 131 + 132 132 + 133 133 + 134 134 + // fun stuff 135 135 + 136 136 + export const enableBitesAtom = atomWithStorage<boolean>( 137 137 + "enableBitesAtom", 138 138 + false 139 139 + ); 140 140 + 141 141 + export const enableBridgyTextAtom = atomWithStorage<boolean>( 142 142 + "enableBridgyTextAtom", 143 143 + false 144 144 + ); 145 145 + 146 146 + export const enableWafrnTextAtom = atomWithStorage<boolean>( 147 147 + "enableWafrnTextAtom", 148 148 + false 149 149 + );

+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

+41 -17

src/utils/useQuery.ts

··· 284 284 gcTime: /*0//*/5 * 60 * 1000, 285 285 }); 286 286 } 287 287 + // todo do more of these instead of overloads since overloads sucks so much apparently 288 288 + export function useQueryConstellationLinksCountDistinctDids(query?: { 289 289 + method: "/links/count/distinct-dids"; 290 290 + target: string; 291 291 + collection: string; 292 292 + path: string; 293 293 + cursor?: string; 294 294 + }): UseQueryResult<linksCountResponse, Error> | undefined { 295 295 + //if (!query) return; 296 296 + const [constellationurl] = useAtom(constellationURLAtom) 297 297 + const queryres = useQuery( 298 298 + constructConstellationQuery(query && {constellation: constellationurl, ...query}) 299 299 + ) as unknown as UseQueryResult<linksCountResponse, Error>; 300 300 + if (!query) { 301 301 + return undefined as undefined; 302 302 + } 303 303 + return queryres as UseQueryResult<linksCountResponse, Error>; 304 304 + } 305 305 + 287 306 export function useQueryConstellation(query: { 288 307 method: "/links"; 289 308 target: string; ··· 352 371 ); 353 372 } 354 373 355 355 - type linksRecord = { 374 374 + export type linksRecord = { 356 375 did: string; 357 376 collection: string; 358 377 rkey: string; ··· 534 553 }[]; 535 554 }; 536 555 537 537 - export function constructAuthorFeedQuery(did: string, pdsUrl: string) { 556 556 + export function constructAuthorFeedQuery(did: string, pdsUrl: string, collection: string = "app.bsky.feed.post") { 538 557 return queryOptions({ 539 539 - queryKey: ['authorFeed', did], 558 558 + queryKey: ['authorFeed', did, collection], 540 559 queryFn: async ({ pageParam }: QueryFunctionContext) => { 541 560 const limit = 25; 542 561 543 562 const cursor = pageParam as string | undefined; 544 563 const cursorParam = cursor ? `&cursor=${cursor}` : ''; 545 564 546 546 - const url = `${pdsUrl}/xrpc/com.atproto.repo.listRecords?repo=${did}&collection=app.bsky.feed.post&limit=${limit}${cursorParam}`; 565 565 + const url = `${pdsUrl}/xrpc/com.atproto.repo.listRecords?repo=${did}&collection=${collection}&limit=${limit}${cursorParam}`; 547 566 548 567 const res = await fetch(url); 549 568 if (!res.ok) throw new Error("Failed to fetch author's posts"); ··· 553 572 }); 554 573 } 555 574 556 556 - export function useInfiniteQueryAuthorFeed(did: string | undefined, pdsUrl: string | undefined) { 557 557 - const { queryKey, queryFn } = constructAuthorFeedQuery(did!, pdsUrl!); 575 575 + export function useInfiniteQueryAuthorFeed(did: string | undefined, pdsUrl: string | undefined, collection?: string) { 576 576 + const { queryKey, queryFn } = constructAuthorFeedQuery(did!, pdsUrl!, collection); 558 577 559 578 return useInfiniteQuery({ 560 579 queryKey, ··· 573 592 isAuthed: boolean; 574 593 pdsUrl?: string; 575 594 feedServiceDid?: string; 595 595 + // todo the hell is a unauthedfeedurl 596 596 + unauthedfeedurl?: string; 576 597 }) { 577 577 - const { feedUri, agent, isAuthed, pdsUrl, feedServiceDid } = options; 598 598 + const { feedUri, agent, isAuthed, pdsUrl, feedServiceDid, unauthedfeedurl } = options; 578 599 579 600 return queryOptions({ 580 601 queryKey: ["feedSkeleton", feedUri, { isAuthed, did: agent?.did }], ··· 582 603 queryFn: async ({ pageParam }: QueryFunctionContext): Promise<FeedSkeletonPage> => { 583 604 const cursorParam = pageParam ? `&cursor=${pageParam}` : ""; 584 605 585 585 - if (isAuthed) { 606 606 + if (isAuthed && !unauthedfeedurl) { 586 607 if (!agent || !pdsUrl || !feedServiceDid) { 587 608 throw new Error("Missing required info for authenticated feed fetch."); 588 609 } ··· 597 618 if (!res.ok) throw new Error(`Authenticated feed fetch failed: ${res.statusText}`); 598 619 return (await res.json()) as FeedSkeletonPage; 599 620 } else { 600 600 - const url = `https://discover.bsky.app/xrpc/app.bsky.feed.getFeedSkeleton?feed=${encodeURIComponent(feedUri)}${cursorParam}`; 621 621 + const url = `https://${unauthedfeedurl ? unauthedfeedurl : "discover.bsky.app"}/xrpc/app.bsky.feed.getFeedSkeleton?feed=${encodeURIComponent(feedUri)}${cursorParam}`; 601 622 const res = await fetch(url); 602 623 if (!res.ok) throw new Error(`Public feed fetch failed: ${res.statusText}`); 603 624 return (await res.json()) as FeedSkeletonPage; ··· 612 633 isAuthed: boolean; 613 634 pdsUrl?: string; 614 635 feedServiceDid?: string; 636 636 + unauthedfeedurl?: string; 615 637 }) { 616 638 const { queryKey, queryFn } = constructInfiniteFeedSkeletonQuery(options); 617 639 ··· 622 644 getNextPageParam: (lastPage) => lastPage.cursor as null | undefined, 623 645 staleTime: Infinity, 624 646 refetchOnWindowFocus: false, 625 625 - enabled: !!options.feedUri && (options.isAuthed ? !!options.agent && !!options.pdsUrl && !!options.feedServiceDid : true), 647 647 + enabled: !!options.feedUri && (options.isAuthed ? (!!options.agent && !!options.pdsUrl || !!options.unauthedfeedurl) && !!options.feedServiceDid : true), 626 648 }), queryKey: queryKey}; 627 649 } 628 650 ··· 632 654 method: '/links' 633 655 target?: string 634 656 collection: string 635 635 - path: string 657 657 + path: string, 658 658 + staleMult?: number 636 659 }) { 637 637 - console.log( 638 638 - 'yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks', 639 639 - query, 640 640 - ) 660 660 + const safemult = query?.staleMult ?? 1; 661 661 + // console.log( 662 662 + // 'yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks', 663 663 + // query, 664 664 + // ) 641 665 642 666 return infiniteQueryOptions({ 643 667 enabled: !!query?.target, ··· 675 699 return (lastPage as any)?.cursor ?? undefined 676 700 }, 677 701 initialPageParam: undefined, 678 678 - staleTime: 5 * 60 * 1000, 679 679 - gcTime: 5 * 60 * 1000, 702 702 + staleTime: 5 * 60 * 1000 * safemult, 703 703 + gcTime: 5 * 60 * 1000 * safemult, 680 704 }) 681 705 }

+5

vite.config.ts

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