+1 -1

README.md

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

+4

package-lock.json

··· 8 8 "dependencies": { 9 9 "@atproto/api": "^0.16.6", 10 10 "@atproto/oauth-client-browser": "^0.3.33", 11 11 + "@radix-ui/react-dialog": "^1.1.15", 11 12 "@radix-ui/react-dropdown-menu": "^2.1.16", 13 13 + "@radix-ui/react-hover-card": "^1.1.15", 14 14 + "@radix-ui/react-slider": "^1.3.6", 12 15 "@tailwindcss/vite": "^4.0.6", 13 16 "@tanstack/query-sync-storage-persister": "^5.85.6", 14 17 "@tanstack/react-devtools": "^0.2.2", ··· 2400 2403 "version": "1.1.15", 2401 2404 "resolved": "https://registry.npmjs.org/@radix-ui/react-hover-card/-/react-hover-card-1.1.15.tgz", 2402 2405 "integrity": "sha512-qgTkjNT1CfKMoP0rcasmlH2r1DAiYicWsDsufxl940sT2wHNEWWv6FMWIQXWhVdmC1d/HYfbhQx60KYyAtKxjg==", 2406 2406 + "license": "MIT", 2403 2407 "dependencies": { 2404 2408 "@radix-ui/primitive": "1.1.3", 2405 2409 "@radix-ui/react-compose-refs": "1.1.2",

+3

package.json

··· 12 12 "dependencies": { 13 13 "@atproto/api": "^0.16.6", 14 14 "@atproto/oauth-client-browser": "^0.3.33", 15 15 + "@radix-ui/react-dialog": "^1.1.15", 15 16 "@radix-ui/react-dropdown-menu": "^2.1.16", 17 17 + "@radix-ui/react-hover-card": "^1.1.15", 18 18 + "@radix-ui/react-slider": "^1.3.6", 16 19 "@tailwindcss/vite": "^4.0.6", 17 20 "@tanstack/query-sync-storage-persister": "^5.85.6", 18 21 "@tanstack/react-devtools": "^0.2.2",

+225 -111

src/components/Composer.tsx

··· 1 1 - import { RichText } from "@atproto/api"; 1 1 + import { AppBskyRichtextFacet, RichText } from "@atproto/api"; 2 2 import { useAtom } from "jotai"; 3 3 - import { useEffect, useState } from "react"; 3 3 + import { Dialog } from "radix-ui"; 4 4 + import { useEffect, useRef, useState } from "react"; 4 5 5 6 import { useAuth } from "~/providers/UnifiedAuthProvider"; 6 7 import { composerAtom } from "~/utils/atoms"; 7 8 import { useQueryPost } from "~/utils/useQuery"; 8 9 9 10 import { ProfileThing } from "./Login"; 11 11 + import { Button } from "./radix-m3-rd/Button"; 10 12 import { UniversalPostRendererATURILoader } from "./UniversalPostRenderer"; 11 13 12 12 - const MAX_POST_LENGTH = 300 14 14 + const MAX_POST_LENGTH = 300; 13 15 14 16 export function Composer() { 15 17 const [composerState, setComposerState] = useAtom(composerAtom); 18 18 + const [closeConfirmState, setCloseConfirmState] = useState<boolean>(false); 16 19 const { agent } = useAuth(); 17 20 18 21 const [postText, setPostText] = useState(""); ··· 31 34 composerState.kind === "reply" 32 35 ? composerState.parent 33 36 : composerState.kind === "quote" 34 34 - ? composerState.subject 35 35 - : undefined; 37 37 + ? composerState.subject 38 38 + : undefined; 36 39 37 37 - const { data: parentPost, isLoading: isParentLoading } = useQueryPost(parentUri); 40 40 + const { data: parentPost, isLoading: isParentLoading } = 41 41 + useQueryPost(parentUri); 38 42 39 43 async function handlePost() { 40 44 if (!agent || !postText.trim() || postText.length > MAX_POST_LENGTH) return; ··· 46 50 const rt = new RichText({ text: postText }); 47 51 await rt.detectFacets(agent); 48 52 53 53 + if (rt.facets?.length) { 54 54 + rt.facets = rt.facets.filter((item) => { 55 55 + if (item.$type !== "app.bsky.richtext.facet") return true; 56 56 + if (!item.features?.length) return true; 57 57 + 58 58 + item.features = item.features.filter((feature) => { 59 59 + if (feature.$type !== "app.bsky.richtext.facet#mention") return true; 60 60 + const did = feature.$type === "app.bsky.richtext.facet#mention" ? (feature as AppBskyRichtextFacet.Mention)?.did : undefined; 61 61 + return typeof did === "string" && did.startsWith("did:"); 62 62 + }); 63 63 + 64 64 + return item.features.length > 0; 65 65 + }); 66 66 + } 67 67 + 49 68 const record: Record<string, unknown> = { 50 69 $type: "app.bsky.feed.post", 51 70 text: rt.text, ··· 96 115 } 97 116 } 98 117 99 99 - if (composerState.kind === "closed") { 100 100 - return null; 101 101 - } 102 102 - 103 118 const getPlaceholder = () => { 104 119 switch (composerState.kind) { 105 120 case "reply": ··· 111 126 return "What's happening?!"; 112 127 } 113 128 }; 114 114 - 129 129 + 115 130 const charsLeft = MAX_POST_LENGTH - postText.length; 116 131 const isPostButtonDisabled = 117 117 - posting || 118 118 - !postText.trim() || 119 119 - isParentLoading || 120 120 - charsLeft < 0; 132 132 + posting || !postText.trim() || isParentLoading || charsLeft < 0; 133 133 + 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 + } 121 147 122 148 return ( 123 123 - <div className="fixed inset-0 z-50 flex items-start justify-center pt-10 sm:pt-20 bg-black/40 dark:bg-black/50"> 124 124 - <div className="bg-gray-50 dark:bg-gray-950 border border-gray-200 dark:border-gray-700 rounded-2xl shadow-xl w-full max-w-xl relative mx-4"> 125 125 - <div className="flex flex-row justify-between p-2"> 126 126 - <button 127 127 - className="h-8 w-8 flex items-center justify-center rounded-full text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800" 128 128 - onClick={() => !posting && setComposerState({ kind: "closed" })} 129 129 - disabled={posting} 130 130 - aria-label="Close" 131 131 - > 132 132 - <svg 133 133 - xmlns="http://www.w3.org/2000/svg" 134 134 - width="20" 135 135 - height="20" 136 136 - viewBox="0 0 24 24" 137 137 - fill="none" 138 138 - stroke="currentColor" 139 139 - strokeWidth="2.5" 140 140 - strokeLinecap="round" 141 141 - strokeLinejoin="round" 142 142 - > 143 143 - <line x1="18" y1="6" x2="6" y2="18"></line> 144 144 - <line x1="6" y1="6" x2="18" y2="18"></line> 145 145 - </svg> 146 146 - </button> 147 147 - <div className="flex-1" /> 148 148 - <div className="flex items-center gap-4"> 149 149 - <span className={`text-sm ${charsLeft < 0 ? 'text-red-500' : 'text-gray-500'}`}> 150 150 - {charsLeft} 151 151 - </span> 152 152 - 153 153 - <button 154 154 - className="bg-gray-600 hover:bg-gray-700 text-white font-bold py-1 px-4 rounded-full disabled:opacity-50 disabled:cursor-not-allowed transition-colors" 155 155 - onClick={handlePost} 156 156 - disabled={isPostButtonDisabled} 157 157 - > 158 158 - {posting ? "Posting..." : "Post"} 159 159 - </button> 160 160 - </div> 161 161 - </div> 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" /> 162 158 163 163 - {postSuccess ? ( 164 164 - <div className="flex flex-col items-center justify-center py-16"> 165 165 - <span className="text-gray-500 text-6xl mb-4">✓</span> 166 166 - <span className="text-xl font-bold text-black dark:text-white">Posted!</span> 167 167 - </div> 168 168 - ) : ( 169 169 - <div className="px-4"> 170 170 - {(composerState.kind === "reply") && ( 171 171 - <div className="mb-1 -mx-4"> 172 172 - {isParentLoading ? ( 173 173 - <div className="text-sm text-gray-500 animate-pulse"> 174 174 - Loading parent post... 175 175 - </div> 176 176 - ) : parentUri ? ( 177 177 - <UniversalPostRendererATURILoader atUri={parentUri} bottomReplyLine bottomBorder={false} /> 178 178 - ) : ( 179 179 - <div className="text-sm text-red-500 rounded-lg border border-red-500/50 p-3"> 180 180 - Could not load parent post. 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} 168 168 + > 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> 185 185 + 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> 200 200 + </div> 201 201 + 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 242 242 + /> 243 243 + </div> 181 244 </div> 182 182 - )} 245 245 + 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 + )} 270 270 + </div> 271 271 + )} 272 272 + </div> 273 273 + </Dialog.Content> 274 274 + </Dialog.Portal> 275 275 + </Dialog.Root> 276 276 + 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" /> 282 282 + 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? 183 287 </div> 184 184 - )} 185 185 - 186 186 - <div className="flex w-full gap-1 flex-col"> 187 187 - <ProfileThing agent={agent} large/> 188 188 - <div className="flex pl-[50px]"> 189 189 - <textarea 190 190 - className="w-full text-lg bg-transparent focus:outline-none resize-none placeholder:text-gray-500 text-black dark:text-white" 191 191 - rows={5} 192 192 - placeholder={getPlaceholder()} 193 193 - value={postText} 194 194 - onChange={(e) => setPostText(e.target.value)} 195 195 - disabled={posting} 196 196 - autoFocus 197 197 - /> 288 288 + <div className="text-md mb-4 text-center"> 289 289 + You will lose your draft 198 290 </div> 199 199 - </div> 200 200 - {(composerState.kind === "quote") && ( 201 201 - <div className="mb-4 ml-[50px] rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden"> 202 202 - {isParentLoading ? ( 203 203 - <div className="text-sm text-gray-500 animate-pulse"> 204 204 - Loading parent post... 205 205 - </div> 206 206 - ) : parentUri ? ( 207 207 - <UniversalPostRendererATURILoader atUri={parentUri} isQuote /> 208 208 - ) : ( 209 209 - <div className="text-sm text-red-500 rounded-lg border border-red-500/50 p-3"> 210 210 - Could not load parent post. 211 211 - </div> 212 212 - )} 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> 213 303 </div> 214 214 - )} 304 304 + </div> 305 305 + </Dialog.Content> 306 306 + </Dialog.Portal> 307 307 + </Dialog.Root> 308 308 + </> 309 309 + ); 310 310 + } 215 311 216 216 - {postError && ( 217 217 - <div className="text-red-500 text-sm my-2 text-center">{postError}</div> 218 218 - )} 219 219 - 220 220 - </div> 221 221 - )} 222 222 - </div> 223 223 - </div> 312 312 + function AutoGrowTextarea({ 313 313 + value, 314 314 + className, 315 315 + onChange, 316 316 + ...props 317 317 + }: React.DetailedHTMLProps< 318 318 + React.TextareaHTMLAttributes<HTMLTextAreaElement>, 319 319 + HTMLTextAreaElement 320 320 + >) { 321 321 + const ref = useRef<HTMLTextAreaElement>(null); 322 322 + 323 323 + useEffect(() => { 324 324 + const el = ref.current; 325 325 + if (!el) return; 326 326 + el.style.height = "auto"; 327 327 + el.style.height = el.scrollHeight + "px"; 328 328 + }, [value]); 329 329 + 330 330 + return ( 331 331 + <textarea 332 332 + ref={ref} 333 333 + className={className} 334 334 + value={value} 335 335 + onChange={onChange} 336 336 + {...props} 337 337 + /> 224 338 ); 225 225 - } 339 339 + }

+150

src/components/Import.tsx

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

+32 -6

src/components/InfiniteCustomFeed.tsx

··· 1 1 + import { useQueryClient } from "@tanstack/react-query"; 1 2 import * as React from "react"; 2 3 3 4 //import { useInView } from "react-intersection-observer"; ··· 37 38 isFetchingNextPage, 38 39 refetch, 39 40 isRefetching, 41 41 + queryKey, 40 42 } = useInfiniteQueryFeedSkeleton({ 41 43 feedUri: feedUri, 42 44 agent: agent ?? undefined, ··· 44 46 pdsUrl: pdsUrl, 45 47 feedServiceDid: feedServiceDid, 46 48 }); 49 49 + const queryClient = useQueryClient(); 50 50 + 47 51 48 52 const handleRefresh = () => { 53 53 + queryClient.removeQueries({queryKey: queryKey}); 54 54 + //queryClient.invalidateQueries(["infinite-feed", feedUri] as const); 49 55 refetch(); 50 56 }; 51 57 58 58 + const allPosts = React.useMemo(() => { 59 59 + const flattenedPosts = data?.pages.flatMap((page) => page?.feed) ?? []; 60 60 + 61 61 + const seenUris = new Set<string>(); 62 62 + 63 63 + return flattenedPosts.filter((item) => { 64 64 + if (!item?.post) return false; 65 65 + 66 66 + if (seenUris.has(item.post)) { 67 67 + return false; 68 68 + } 69 69 + 70 70 + seenUris.add(item.post); 71 71 + 72 72 + return true; 73 73 + }); 74 74 + }, [data]); 75 75 + 52 76 //const { ref, inView } = useInView(); 53 77 54 78 // React.useEffect(() => { ··· 67 91 ); 68 92 } 69 93 70 70 - const allPosts = 71 71 - data?.pages.flatMap((page) => { 72 72 - if (page) return page.feed; 73 73 - }) ?? []; 94 94 + // const allPosts = 95 95 + // data?.pages.flatMap((page) => { 96 96 + // if (page) return page.feed; 97 97 + // }) ?? []; 74 98 75 99 if (!allPosts || typeof allPosts !== "object" || allPosts.length === 0) { 76 100 return ( ··· 116 140 className="sticky lg:bottom-4 bottom-22 ml-4 w-[42px] h-[42px] z-10 bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 text-gray-50 p-[9px] rounded-full shadow-lg transition-transform duration-200 ease-in-out hover:scale-110 disabled:dark:bg-gray-900 disabled:bg-gray-100 disabled:cursor-not-allowed" 117 141 aria-label="Refresh feed" 118 142 > 119 119 - <RefreshIcon className={`h-6 w-6 text-gray-600 dark:text-gray-400 ${isRefetching && "animate-spin"}`} /> 143 143 + <RefreshIcon 144 144 + className={`h-6 w-6 text-gray-600 dark:text-gray-400 ${isRefetching && "animate-spin"}`} 145 145 + /> 120 146 </button> 121 147 </> 122 148 ); ··· 139 165 d="M20 11A8.1 8.1 0 0 0 4.5 9M4 5v4h4m-4 4a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" 140 166 ></path> 141 167 </svg> 142 142 - ); 168 168 + );

+70 -25

src/components/Login.tsx

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

+6

src/components/Star.tsx

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

+154 -68

src/components/UniversalPostRenderer.tsx

··· 2 2 import DOMPurify from "dompurify"; 3 3 import { useAtom } from "jotai"; 4 4 import { DropdownMenu } from "radix-ui"; 5 5 + import { HoverCard } from "radix-ui"; 5 6 import * as React from "react"; 6 7 import { type SVGProps } from "react"; 7 8 8 8 - import { composerAtom, likedPostsAtom } from "~/utils/atoms"; 9 9 + import { 10 10 + composerAtom, 11 11 + constellationURLAtom, 12 12 + imgCDNAtom, 13 13 + likedPostsAtom, 14 14 + } from "~/utils/atoms"; 9 15 import { useHydratedEmbed } from "~/utils/useHydrated"; 10 16 import { 11 17 useQueryConstellation, ··· 150 156 maxReplies, 151 157 isQuote, 152 158 }: UniversalPostRendererATURILoaderProps) { 159 159 + // todo remove this once tree rendering is implemented, use a prop like isTree 160 160 + const TEMPLINEAR = true; 153 161 // /*mass comment*/ console.log("atUri", atUri); 154 162 //const { get, set } = usePersistentStore(); 155 163 //const [record, setRecord] = React.useState<any>(null); ··· 401 409 // path: ".reply.parent.uri", 402 410 // }); 403 411 412 412 + const [constellationurl] = useAtom(constellationURLAtom); 413 413 + 404 414 const infinitequeryresults = useInfiniteQuery({ 405 415 ...yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks( 406 416 { 417 417 + constellation: constellationurl, 407 418 method: "/links", 408 419 target: atUri, 409 420 collection: "app.bsky.feed.post", ··· 422 433 423 434 // auto-fetch all pages 424 435 useEffect(() => { 425 425 - if (!maxReplies || isQuote) return; 436 436 + if (!maxReplies || isQuote || TEMPLINEAR) return; 426 437 if ( 427 438 infinitequeryresults.hasNextPage && 428 439 !infinitequeryresults.isFetchingNextPage ··· 430 441 console.log("Fetching the next page..."); 431 442 infinitequeryresults.fetchNextPage(); 432 443 } 433 433 - }, [infinitequeryresults]); 444 444 + }, [TEMPLINEAR, infinitequeryresults, isQuote, maxReplies]); 434 445 435 446 const replyAturis = repliesData 436 447 ? repliesData.pages.flatMap((page) => ··· 507 518 ? true 508 519 : maxReplies && !oldestOpsReplyElseNewestNonOpsReply 509 520 ? false 510 510 - : bottomReplyLine 521 521 + : (maxReplies === 0 && (!replies || (!!replies && replies === 0))) ? false : bottomReplyLine 511 522 } 512 523 topReplyLine={topReplyLine} 513 524 //bottomBorder={maxReplies&&oldestOpsReplyElseNewestNonOpsReply ? false : bottomBorder} ··· 529 540 maxReplies={maxReplies} 530 541 isQuote={isQuote} 531 542 /> 543 543 + <> 544 544 + {(maxReplies && maxReplies === 0 && replies && replies > 0) ? ( 545 545 + <> 546 546 + {/* <div>hello</div> */} 547 547 + <MoreReplies atUri={atUri} /> 548 548 + </> 549 549 + ) : (<></>)} 550 550 + </> 532 551 {!isQuote && oldestOpsReplyElseNewestNonOpsReply && ( 533 552 <> 534 553 {/* <span>hello {maxReplies}</span> */} ··· 553 572 maxReplies && maxReplies > 0 ? maxReplies - 1 : undefined 554 573 } 555 574 /> 556 556 - {maxReplies && maxReplies - 1 === 0 && replies && replies > 0 && ( 557 557 - <MoreReplies atUri={oldestOpsReplyElseNewestNonOpsReply} /> 558 558 - )} 559 575 </> 560 576 )} 561 577 </> ··· 596 612 ); 597 613 } 598 614 599 599 - function getAvatarUrl(opProfile: any, did: string) { 615 615 + function getAvatarUrl(opProfile: any, did: string, cdn: string) { 600 616 const link = opProfile?.value?.avatar?.ref?.["$link"]; 601 617 if (!link) return null; 602 602 - return `https://cdn.bsky.app/img/avatar/plain/${did}/${link}@jpeg`; 618 618 + return `https://${cdn}/img/avatar/plain/${did}/${link}@jpeg`; 603 619 } 604 620 605 621 export function UniversalPostRendererRawRecordShim({ ··· 720 736 error: embedError, 721 737 } = useHydratedEmbed(postRecord?.value?.embed, resolved?.did); 722 738 739 739 + const [imgcdn] = useAtom(imgCDNAtom); 740 740 + 723 741 const parsedaturi = new AtUri(aturi); //parseAtUri(aturi); 724 742 743 743 + const fakeprofileviewbasic = React.useMemo<AppBskyActorDefs.ProfileViewBasic>( 744 744 + () => ({ 745 745 + did: resolved?.did || "", 746 746 + handle: resolved?.handle || "", 747 747 + displayName: profileRecord?.value?.displayName || "", 748 748 + avatar: getAvatarUrl(profileRecord, resolved?.did, imgcdn) || "", 749 749 + viewer: undefined, 750 750 + labels: profileRecord?.labels || undefined, 751 751 + verification: undefined, 752 752 + }), 753 753 + [imgcdn, profileRecord, resolved?.did, resolved?.handle] 754 754 + ); 755 755 + 756 756 + const fakeprofileviewdetailed = 757 757 + React.useMemo<AppBskyActorDefs.ProfileViewDetailed>( 758 758 + () => ({ 759 759 + ...fakeprofileviewbasic, 760 760 + $type: "app.bsky.actor.defs#profileViewDetailed", 761 761 + description: profileRecord?.value?.description || undefined, 762 762 + }), 763 763 + [fakeprofileviewbasic, profileRecord?.value?.description] 764 764 + ); 765 765 + 725 766 const fakepost = React.useMemo<AppBskyFeedDefs.PostView>( 726 767 () => ({ 727 768 $type: "app.bsky.feed.defs#postView", 728 769 uri: aturi, 729 770 cid: postRecord?.cid || "", 730 730 - author: { 731 731 - did: resolved?.did || "", 732 732 - handle: resolved?.handle || "", 733 733 - displayName: profileRecord?.value?.displayName || "", 734 734 - avatar: getAvatarUrl(profileRecord, resolved?.did) || "", 735 735 - viewer: undefined, 736 736 - labels: profileRecord?.labels || undefined, 737 737 - verification: undefined, 738 738 - }, 771 771 + author: fakeprofileviewbasic, 739 772 record: postRecord?.value || {}, 740 773 embed: hydratedEmbed ?? undefined, 741 774 replyCount: repliesCount ?? 0, ··· 752 785 postRecord?.cid, 753 786 postRecord?.value, 754 787 postRecord?.labels, 755 755 - resolved?.did, 756 756 - resolved?.handle, 757 757 - profileRecord, 788 788 + fakeprofileviewbasic, 758 789 hydratedEmbed, 759 790 repliesCount, 760 791 repostsCount, ··· 831 862 } 832 863 }} 833 864 post={fakepost} 865 865 + uprrrsauthor={fakeprofileviewdetailed} 834 866 salt={aturi} 835 867 bottomReplyLine={bottomReplyLine} 836 868 topReplyLine={topReplyLine} ··· 883 915 {...props} 884 916 > 885 917 <path 886 886 - fill="oklch(0.704 0.05 28)" 918 918 + fill="var(--color-gray-400)" 887 919 d="M9 22a1 1 0 0 1-1-1v-3H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6.1l-3.7 3.71c-.2.19-.45.29-.7.29zm1-6v3.08L13.08 16H20V4H4v12z" 888 920 ></path> 889 921 </svg> ··· 900 932 {...props} 901 933 > 902 934 <path 903 903 - fill="oklch(0.704 0.05 28)" 935 935 + fill="var(--color-gray-400)" 904 936 d="M17 17H7v-3l-4 4l4 4v-3h12v-6h-2M7 7h10v3l4-4l-4-4v3H5v6h2z" 905 937 ></path> 906 938 </svg> ··· 951 983 {...props} 952 984 > 953 985 <path 954 954 - fill="oklch(0.704 0.05 28)" 986 986 + fill="var(--color-gray-400)" 955 987 d="m12.1 18.55l-.1.1l-.11-.1C7.14 14.24 4 11.39 4 8.5C4 6.5 5.5 5 7.5 5c1.54 0 3.04 1 3.57 2.36h1.86C13.46 6 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5c0 2.89-3.14 5.74-7.9 10.05M16.5 3c-1.74 0-3.41.81-4.5 2.08C10.91 3.81 9.24 3 7.5 3C4.42 3 2 5.41 2 8.5c0 3.77 3.4 6.86 8.55 11.53L12 21.35l1.45-1.32C18.6 15.36 22 12.27 22 8.5C22 5.41 19.58 3 16.5 3" 956 988 ></path> 957 989 </svg> ··· 968 1000 {...props} 969 1001 > 970 1002 <path 971 971 - fill="oklch(0.704 0.05 28)" 1003 1003 + fill="var(--color-gray-400)" 972 1004 d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81a3 3 0 0 0 3-3a3 3 0 0 0-3-3a3 3 0 0 0-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9a3 3 0 0 0-3 3a3 3 0 0 0 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.15c-.05.21-.08.43-.08.66c0 1.61 1.31 2.91 2.92 2.91s2.92-1.3 2.92-2.91A2.92 2.92 0 0 0 18 16.08" 973 1005 ></path> 974 1006 </svg> ··· 985 1017 {...props} 986 1018 > 987 1019 <path 988 988 - fill="oklch(0.704 0.05 28)" 1020 1020 + fill="var(--color-gray-400)" 989 1021 d="M16 12a2 2 0 0 1 2-2a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2m-6 0a2 2 0 0 1 2-2a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2m-6 0a2 2 0 0 1 2-2a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2" 990 1022 ></path> 991 1023 </svg> ··· 1002 1034 {...props} 1003 1035 > 1004 1036 <path 1005 1005 - fill="oklch(0.704 0.05 28)" 1037 1037 + fill="var(--color-gray-400)" 1006 1038 d="M17.9 17.39c-.26-.8-1.01-1.39-1.9-1.39h-1v-3a1 1 0 0 0-1-1H8v-2h2a1 1 0 0 0 1-1V7h2a2 2 0 0 0 2-2v-.41a7.984 7.984 0 0 1 2.9 12.8M11 19.93c-3.95-.49-7-3.85-7-7.93c0-.62.08-1.22.21-1.79L9 15v1a2 2 0 0 0 2 2m1-16A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2" 1007 1039 ></path> 1008 1040 </svg> ··· 1036 1068 {...props} 1037 1069 > 1038 1070 <path 1039 1039 - fill="oklch(0.704 0.05 28)" 1071 1071 + fill="var(--color-gray-400)" 1040 1072 d="M10 9V5l-7 7l7 7v-4.1c5 0 8.5 1.6 11 5.1c-1-5-4-10-11-11" 1041 1073 ></path> 1042 1074 </svg> ··· 1090 1122 {...props} 1091 1123 > 1092 1124 <path 1093 1093 - fill="oklch(0.704 0.05 28)" 1125 1125 + fill="var(--color-gray-400)" 1094 1126 d="M17 17H7v-3l-4 4l4 4v-3h12v-6h-2M7 7h10v3l4-4l-4-4v3H5v6h2z" 1095 1127 ></path> 1096 1128 </svg> ··· 1107 1139 {...props} 1108 1140 > 1109 1141 <path 1110 1110 - fill="oklch(0.704 0.05 28)" 1142 1142 + fill="var(--color-gray-400)" 1111 1143 d="M6 5.75L10.25 10H7v6h6.5l2 2H7a2 2 0 0 1-2-2v-6H1.75zm12 12.5L13.75 14H17V8h-6.5l-2-2H17a2 2 0 0 1 2 2v6h3.25z" 1112 1144 ></path> 1113 1145 </svg> ··· 1135 1167 //import Masonry from "@mui/lab/Masonry"; 1136 1168 import { 1137 1169 type $Typed, 1170 1170 + AppBskyActorDefs, 1138 1171 AppBskyEmbedDefs, 1139 1172 AppBskyEmbedExternal, 1140 1173 AppBskyEmbedImages, ··· 1164 1197 1165 1198 import defaultpfp from "~/../public/favicon.png"; 1166 1199 import { useAuth } from "~/providers/UnifiedAuthProvider"; 1200 1200 + import { FollowButton, Mutual } from "~/routes/profile.$did"; 1167 1201 import type { LightboxProps } from "~/routes/profile.$did/post.$rkey.image.$i"; 1168 1202 // import type { OutputSchema } from "@atproto/api/dist/client/types/app/bsky/feed/getFeed"; 1169 1203 // import type { ··· 1272 1306 1273 1307 function UniversalPostRenderer({ 1274 1308 post, 1309 1309 + uprrrsauthor, 1275 1310 //setMainItem, 1276 1311 //isMainItem, 1277 1312 onPostClick, ··· 1296 1331 maxReplies, 1297 1332 }: { 1298 1333 post: PostView; 1334 1334 + uprrrsauthor?: AppBskyActorDefs.ProfileViewDetailed; 1299 1335 // optional for now because i havent ported every use to this yet 1300 1336 // setMainItem?: React.Dispatch< 1301 1337 // React.SetStateAction<AppBskyFeedDefs.FeedViewPost> ··· 1479 1515 className="bg-gray-500 dark:bg-gray-400" 1480 1516 /> 1481 1517 )} 1482 1482 - <div 1483 1483 - style={{ 1484 1484 - position: "absolute", 1485 1485 - //top: isRepost ? "calc(16px + 1rem)" : 16, 1486 1486 - //left: 16, 1487 1487 - zIndex: 1, 1488 1488 - top: isRepost 1489 1489 - ? "calc(16px + 1rem)" 1490 1490 - : isQuote 1491 1491 - ? 12 1492 1492 - : topReplyLine 1493 1493 - ? 8 1494 1494 - : 16, 1495 1495 - left: isQuote ? 12 : 16, 1496 1496 - }} 1497 1497 - onClick={onProfileClick} 1498 1498 - > 1499 1499 - <img 1500 1500 - src={post.author.avatar || defaultpfp} 1501 1501 - alt="avatar" 1502 1502 - // transition={{ 1503 1503 - // type: "spring", 1504 1504 - // stiffness: 260, 1505 1505 - // damping: 20, 1506 1506 - // }} 1507 1507 - style={{ 1508 1508 - borderRadius: "50%", 1509 1509 - marginRight: 12, 1510 1510 - objectFit: "cover", 1511 1511 - //background: theme.border, 1512 1512 - //border: `1px solid ${theme.border}`, 1513 1513 - width: isQuote ? 16 : 42, 1514 1514 - height: isQuote ? 16 : 42, 1515 1515 - }} 1516 1516 - className="border border-gray-300 dark:border-gray-800 bg-gray-300 dark:bg-gray-600" 1517 1517 - /> 1518 1518 - </div> 1518 1518 + <HoverCard.Root> 1519 1519 + <HoverCard.Trigger asChild> 1520 1520 + <div 1521 1521 + className={`absolute`} 1522 1522 + style={{ 1523 1523 + top: isRepost 1524 1524 + ? "calc(16px + 1rem)" 1525 1525 + : isQuote 1526 1526 + ? 12 1527 1527 + : topReplyLine 1528 1528 + ? 8 1529 1529 + : 16, 1530 1530 + left: isQuote ? 12 : 16, 1531 1531 + }} 1532 1532 + onClick={onProfileClick} 1533 1533 + > 1534 1534 + <img 1535 1535 + src={post.author.avatar || defaultpfp} 1536 1536 + alt="avatar" 1537 1537 + className={`rounded-full object-cover border border-gray-300 dark:border-gray-800 bg-gray-300 dark:bg-gray-600`} 1538 1538 + style={{ 1539 1539 + width: isQuote ? 16 : 42, 1540 1540 + height: isQuote ? 16 : 42, 1541 1541 + }} 1542 1542 + /> 1543 1543 + </div> 1544 1544 + </HoverCard.Trigger> 1545 1545 + <HoverCard.Portal> 1546 1546 + <HoverCard.Content 1547 1547 + className="rounded-md p-4 w-72 bg-gray-50 dark:bg-gray-900 shadow-lg border border-gray-300 dark:border-gray-800 animate-slide-fade z-50" 1548 1548 + side={"bottom"} 1549 1549 + sideOffset={5} 1550 1550 + onClick={onProfileClick} 1551 1551 + > 1552 1552 + <div className="flex flex-col gap-2"> 1553 1553 + <div className="flex flex-row"> 1554 1554 + <img 1555 1555 + src={post.author.avatar || defaultpfp} 1556 1556 + alt="avatar" 1557 1557 + 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 1558 + /> 1559 1559 + <div className=" flex-1 flex flex-row align-middle justify-end"> 1560 1560 + <div className=" flex flex-col justify-start"> 1561 1561 + <FollowButton targetdidorhandle={post.author.did} /> 1562 1562 + </div> 1563 1563 + </div> 1564 1564 + </div> 1565 1565 + <div className="flex flex-col gap-3"> 1566 1566 + <div> 1567 1567 + <div className="text-gray-900 dark:text-gray-100 font-medium text-md"> 1568 1568 + {post.author.displayName || post.author.handle}{" "} 1569 1569 + </div> 1570 1570 + <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}{" "} 1572 1572 + </div> 1573 1573 + </div> 1574 1574 + {uprrrsauthor?.description && ( 1575 1575 + <div className="text-gray-700 dark:text-gray-300 text-sm text-left break-words line-clamp-3"> 1576 1576 + {uprrrsauthor.description} 1577 1577 + </div> 1578 1578 + )} 1579 1579 + {/* <div className="flex gap-4"> 1580 1580 + <div className="flex gap-1"> 1581 1581 + <div className="font-medium text-gray-900 dark:text-gray-100"> 1582 1582 + 0 1583 1583 + </div> 1584 1584 + <div className="text-gray-500 dark:text-gray-400"> 1585 1585 + Following 1586 1586 + </div> 1587 1587 + </div> 1588 1588 + <div className="flex gap-1"> 1589 1589 + <div className="font-medium text-gray-900 dark:text-gray-100"> 1590 1590 + 2,900 1591 1591 + </div> 1592 1592 + <div className="text-gray-500 dark:text-gray-400"> 1593 1593 + Followers 1594 1594 + </div> 1595 1595 + </div> 1596 1596 + </div> */} 1597 1597 + </div> 1598 1598 + </div> 1599 1599 + 1600 1600 + {/* <HoverCard.Arrow className="fill-gray-50 dark:fill-gray-900" /> */} 1601 1601 + </HoverCard.Content> 1602 1602 + </HoverCard.Portal> 1603 1603 + </HoverCard.Root> 1604 1604 + 1519 1605 <div style={{ display: "flex", alignItems: "flex-start", zIndex: 2 }}> 1520 1606 <div 1521 1607 style={{ ··· 2571 2657 return { start, end, feature: f.features[0] }; 2572 2658 }); 2573 2659 } 2574 2574 - function renderTextWithFacets({ 2660 2660 + export function renderTextWithFacets({ 2575 2661 text, 2576 2662 facets, 2577 2663 navigate,

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

+2

src/main.tsx

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

+26 -23

src/providers/UnifiedAuthProvider.tsx

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

+35 -33

src/routes/__root.tsx

··· 18 18 19 19 import { Composer } from "~/components/Composer"; 20 20 import { DefaultCatchBoundary } from "~/components/DefaultCatchBoundary"; 21 21 + import { Import } from "~/components/Import"; 21 22 import Login from "~/components/Login"; 22 23 import { NotFound } from "~/components/NotFound"; 24 24 + import { FluentEmojiHighContrastGlowingStar } from "~/components/Star"; 23 25 import { UnifiedAuthProvider, useAuth } from "~/providers/UnifiedAuthProvider"; 24 24 - import { composerAtom } from "~/utils/atoms"; 26 26 + import { composerAtom, hueAtom, useAtomCssVar } from "~/utils/atoms"; 25 27 import { seo } from "~/utils/seo"; 26 28 27 29 export const Route = createRootRouteWithContext<{ ··· 87 89 } 88 90 89 91 function RootDocument({ children }: { children: React.ReactNode }) { 92 92 + useAtomCssVar(hueAtom, "--tw-gray-hue"); 90 93 const location = useLocation(); 91 94 const navigate = useNavigate(); 92 95 const { agent } = useAuth(); ··· 128 131 <div className="min-h-screen flex justify-center bg-gray-50 dark:bg-gray-950"> 129 132 <nav className="hidden lg:flex h-screen w-[250px] flex-col gap-0 p-4 dark:border-gray-800 sticky top-0 self-start"> 130 133 <div className="flex items-center gap-3 mb-4"> 131 131 - <img src="/redstar.png" alt="Red Dwarf Logo" className="w-8 h-8" /> 134 134 + <FluentEmojiHighContrastGlowingStar className="h-8 w-8" style={{color: "oklch(0.6616 0.2249 calc(25.88 + (var(--safe-hue) - 28))"}} /> 132 135 <span className="font-extrabold text-2xl tracking-tight text-gray-900 dark:text-gray-100"> 133 136 Red Dwarf{" "} 134 137 {/* <span className="text-gray-500 dark:text-gray-400 text-sm"> ··· 152 155 /> 153 156 154 157 <MaterialNavItem 158 158 + InactiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />} 159 159 + ActiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />} 160 160 + active={locationEnum === "search"} 161 161 + onClickCallbback={() => 162 162 + navigate({ 163 163 + to: "/search", 164 164 + //params: { did: agent.assertDid }, 165 165 + }) 166 166 + } 167 167 + text="Explore" 168 168 + /> 169 169 + <MaterialNavItem 155 170 InactiveIcon={ 156 171 <IconMaterialSymbolsNotificationsOutline className="w-6 h-6" /> 157 172 } ··· 178 193 }) 179 194 } 180 195 text="Feeds" 181 181 - /> 182 182 - <MaterialNavItem 183 183 - InactiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />} 184 184 - ActiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />} 185 185 - active={locationEnum === "search"} 186 186 - onClickCallbback={() => 187 187 - navigate({ 188 188 - to: "/search", 189 189 - //params: { did: agent.assertDid }, 190 190 - }) 191 191 - } 192 192 - text="Search" 193 196 /> 194 197 <MaterialNavItem 195 198 InactiveIcon={ ··· 367 370 368 371 <nav className="hidden sm:flex items-center lg:hidden h-screen flex-col gap-2 p-4 dark:border-gray-800 sticky top-0 self-start"> 369 372 <div className="flex items-center gap-3 mb-4"> 370 370 - <img src="/redstar.png" alt="Red Dwarf Logo" className="w-8 h-8" /> 373 373 + <FluentEmojiHighContrastGlowingStar className="h-8 w-8" style={{color: "oklch(0.6616 0.2249 calc(25.88 + (var(--safe-hue) - 28))"}} /> 371 374 </div> 372 375 <MaterialNavItem 373 376 small ··· 387 390 388 391 <MaterialNavItem 389 392 small 393 393 + InactiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />} 394 394 + ActiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />} 395 395 + active={locationEnum === "search"} 396 396 + onClickCallbback={() => 397 397 + navigate({ 398 398 + to: "/search", 399 399 + //params: { did: agent.assertDid }, 400 400 + }) 401 401 + } 402 402 + text="Explore" 403 403 + /> 404 404 + <MaterialNavItem 405 405 + small 390 406 InactiveIcon={ 391 407 <IconMaterialSymbolsNotificationsOutline className="w-6 h-6" /> 392 408 } ··· 417 433 /> 418 434 <MaterialNavItem 419 435 small 420 420 - InactiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />} 421 421 - ActiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />} 422 422 - active={locationEnum === "search"} 423 423 - onClickCallbback={() => 424 424 - navigate({ 425 425 - to: "/search", 426 426 - //params: { did: agent.assertDid }, 427 427 - }) 428 428 - } 429 429 - text="Search" 430 430 - /> 431 431 - <MaterialNavItem 432 432 - small 433 436 InactiveIcon={ 434 437 <IconMaterialSymbolsAccountCircleOutline className="w-6 h-6" /> 435 438 } ··· 496 499 </main> 497 500 498 501 <aside className="hidden lg:flex h-screen w-[250px] sticky top-0 self-start flex-col"> 502 502 + <div className="px-4 pt-4"><Import /></div> 499 503 <Login /> 500 504 501 505 <div className="flex-1"></div> 502 506 <p className="text-xs text-gray-400 dark:text-gray-500 text-justify mx-4 mb-4"> 503 503 - Red Dwarf is a bluesky client that uses Constellation and direct PDS 504 504 - queries. Skylite would be a self-hosted bluesky "instance". Stay 505 505 - tuned for the release of Skylite. 507 507 + Red Dwarf is a Bluesky client that does not rely on any Bluesky API App Servers. Instead, it uses Microcosm to fetch records directly from each users' PDS (via Slingshot) and connect them using backlinks (via Constellation) 506 508 </p> 507 509 </aside> 508 510 </div> ··· 551 553 //params: { did: agent.assertDid }, 552 554 }) 553 555 } 554 554 - text="Search" 556 556 + text="Explore" 555 557 /> 556 558 {/* <Link 557 559 to="/search" ··· 678 680 ) : ( 679 681 <div className="lg:hidden flex items-center fixed bottom-0 left-0 right-0 justify-between px-4 py-3 border-0 shadow border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 z-10"> 680 682 <div className="flex items-center gap-2"> 681 681 - <img src="/redstar.png" alt="Red Dwarf Logo" className="w-6 h-6" /> 683 683 + <FluentEmojiHighContrastGlowingStar className="h-6 w-6" style={{color: "oklch(0.6616 0.2249 calc(25.88 + (var(--safe-hue) - 28))"}} /> 682 684 <span className="font-bold text-lg text-gray-900 dark:text-gray-100"> 683 685 Red Dwarf{" "} 684 686 {/* <span className="text-gray-500 dark:text-gray-400 text-sm">

+40 -40

src/routes/index.tsx

··· 1 1 import { createFileRoute } from "@tanstack/react-router"; 2 2 import { useAtom } from "jotai"; 3 3 import * as React from "react"; 4 4 - import { useEffect, useLayoutEffect } from "react"; 4 4 + import { useLayoutEffect, useState } from "react"; 5 5 6 6 import { Header } from "~/components/Header"; 7 7 import { InfiniteCustomFeed } from "~/components/InfiniteCustomFeed"; 8 8 import { useAuth } from "~/providers/UnifiedAuthProvider"; 9 9 import { 10 10 - agentAtom, 11 11 - authedAtom, 12 10 feedScrollPositionsAtom, 13 11 isAtTopAtom, 12 12 + quickAuthAtom, 14 13 selectedFeedUriAtom, 15 15 - store, 16 14 } from "~/utils/atoms"; 17 15 //import { usePersistentStore } from "~/providers/PersistentStoreProvider"; 18 16 import { ··· 107 105 } = useAuth(); 108 106 const authed = !!agent?.did; 109 107 110 110 - useEffect(() => { 111 111 - if (agent?.did) { 112 112 - store.set(authedAtom, true); 113 113 - } else { 114 114 - store.set(authedAtom, false); 115 115 - } 116 116 - }, [status, agent, authed]); 117 117 - useEffect(() => { 118 118 - if (agent) { 119 119 - // eslint-disable-next-line @typescript-eslint/ban-ts-comment 120 120 - // @ts-ignore is it just me or is the type really weird here it should be Agent not AtpAgent 121 121 - store.set(agentAtom, agent); 122 122 - } else { 123 123 - store.set(agentAtom, null); 124 124 - } 125 125 - }, [status, agent, authed]); 108 108 + // i dont remember why this is even here 109 109 + // useEffect(() => { 110 110 + // if (agent?.did) { 111 111 + // store.set(authedAtom, true); 112 112 + // } else { 113 113 + // store.set(authedAtom, false); 114 114 + // } 115 115 + // }, [status, agent, authed]); 116 116 + // useEffect(() => { 117 117 + // if (agent) { 118 118 + // // eslint-disable-next-line @typescript-eslint/ban-ts-comment 119 119 + // // @ts-ignore is it just me or is the type really weird here it should be Agent not AtpAgent 120 120 + // store.set(agentAtom, agent); 121 121 + // } else { 122 122 + // store.set(agentAtom, null); 123 123 + // } 124 124 + // }, [status, agent, authed]); 126 125 127 126 //const { get, set } = usePersistentStore(); 128 127 // const [feed, setFeed] = React.useState<any[]>([]); ··· 162 161 163 162 // const savedFeeds = savedFeedsPref?.items || []; 164 163 165 165 - const identityresultmaybe = useQueryIdentity(agent?.did); 164 164 + const [quickAuth, setQuickAuth] = useAtom(quickAuthAtom); 165 165 + const isAuthRestoring = quickAuth ? status === "loading" : false; 166 166 + 167 167 + const identityresultmaybe = useQueryIdentity(!isAuthRestoring ? agent?.did : undefined); 166 168 const identity = identityresultmaybe?.data; 167 169 168 170 const prefsresultmaybe = useQueryPreferences({ 169 169 - agent: agent ?? undefined, 170 170 - pdsUrl: identity?.pds, 171 171 + agent: !isAuthRestoring ? (agent ?? undefined) : undefined, 172 172 + pdsUrl: !isAuthRestoring ? (identity?.pds) : undefined, 171 173 }); 172 174 const prefs = prefsresultmaybe?.data; 173 175 ··· 178 180 return savedFeedsPref?.items || []; 179 181 }, [prefs]); 180 182 181 181 - const [persistentSelectedFeed, setPersistentSelectedFeed] = 182 182 - useAtom(selectedFeedUriAtom); // React.useState<string | null>(null); 183 183 - const [unauthedSelectedFeed, setUnauthedSelectedFeed] = React.useState( 184 184 - persistentSelectedFeed 185 185 - ); // React.useState<string | null>(null); 183 183 + const [persistentSelectedFeed, setPersistentSelectedFeed] = useAtom(selectedFeedUriAtom); 184 184 + const [unauthedSelectedFeed, setUnauthedSelectedFeed] = useState(persistentSelectedFeed); 186 185 const selectedFeed = agent?.did 187 186 ? persistentSelectedFeed 188 187 : unauthedSelectedFeed; ··· 306 305 }, [scrollPositions]); 307 306 308 307 useLayoutEffect(() => { 308 308 + if (isAuthRestoring) return; 309 309 const savedPosition = scrollPositions[selectedFeed ?? "null"] ?? 0; 310 310 311 311 window.scrollTo({ top: savedPosition, behavior: "instant" }); 312 312 // eslint-disable-next-line react-hooks/exhaustive-deps 313 313 - }, [selectedFeed]); 313 313 + }, [selectedFeed, isAuthRestoring]); 314 314 315 315 useLayoutEffect(() => { 316 316 - if (!selectedFeed) return; 316 316 + if (!selectedFeed || isAuthRestoring) return; 317 317 318 318 const handleScroll = () => { 319 319 scrollPositionsRef.current = { ··· 328 328 329 329 setScrollPositions(scrollPositionsRef.current); 330 330 }; 331 331 - }, [selectedFeed, setScrollPositions]); 331 331 + }, [isAuthRestoring, selectedFeed, setScrollPositions]); 332 332 333 333 - const feedGengetrecordquery = useQueryArbitrary(selectedFeed ?? undefined); 334 334 - const feedServiceDid = (feedGengetrecordquery?.data?.value as any)?.did; 333 333 + const feedGengetrecordquery = useQueryArbitrary(!isAuthRestoring ? selectedFeed ?? undefined : undefined); 334 334 + const feedServiceDid = !isAuthRestoring ? (feedGengetrecordquery?.data?.value as any)?.did as string | undefined : undefined; 335 335 336 336 // const { 337 337 // data: feedData, ··· 347 347 348 348 // const feed = feedData?.feed || []; 349 349 350 350 - const isReadyForAuthedFeed = 351 351 - authed && agent && identity?.pds && feedServiceDid; 352 352 - const isReadyForUnauthedFeed = !authed && selectedFeed; 350 350 + const isReadyForAuthedFeed = !isAuthRestoring && authed && agent && identity?.pds && feedServiceDid; 351 351 + const isReadyForUnauthedFeed = !isAuthRestoring && !authed && selectedFeed; 353 352 354 353 355 354 const [isAtTop] = useAtom(isAtTopAtom); ··· 358 357 <div 359 358 className={`relative flex flex-col divide-y divide-gray-200 dark:divide-gray-800 ${hidden && "hidden"}`} 360 359 > 361 361 - {savedFeeds.length > 0 ? ( 360 360 + {!isAuthRestoring && savedFeeds.length > 0 ? ( 362 361 <div className={`flex items-center px-4 py-2 h-[52px] sticky top-0 bg-[var(--header-bg-light)] dark:bg-[var(--header-bg-dark)] ${!isAtTop && "shadow-sm"} sm:shadow-none sm:bg-white sm:dark:bg-gray-950 z-10 border-0 sm:border-b border-gray-200 dark:border-gray-700 overflow-x-auto overflow-y-hidden scroll-thin`}> 363 362 {savedFeeds.map((item: any, idx: number) => { 364 363 const label = item.value.split("/").pop() || item.value; ··· 410 409 /> 411 410 ))} */} 412 411 413 413 - {authed && (!identity?.pds || !feedServiceDid) && ( 412 412 + {isAuthRestoring || authed && (!identity?.pds || !feedServiceDid) && ( 414 413 <div className="p-4 text-center text-gray-500"> 415 414 Preparing your feed... 416 415 </div> 417 416 )} 418 417 419 419 - {isReadyForAuthedFeed || isReadyForUnauthedFeed ? ( 418 418 + {!isAuthRestoring && (isReadyForAuthedFeed || isReadyForUnauthedFeed) ? ( 420 419 <InfiniteCustomFeed 420 420 + key={selectedFeed!} 421 421 feedUri={selectedFeed!} 422 422 pdsUrl={identity?.pds} 423 423 feedServiceDid={feedServiceDid} 424 424 /> 425 425 ) : ( 426 426 <div className="p-4 text-center text-gray-500"> 427 427 - Select a feed to get started. 427 427 + Loading....... 428 428 </div> 429 429 )} 430 430 {/* {false && restoringScrollPosition && (

+7 -3

src/routes/notifications.tsx

··· 1 1 import { createFileRoute } from "@tanstack/react-router"; 2 2 + import { useAtom } from "jotai"; 2 3 import React, { useEffect, useRef,useState } from "react"; 3 4 4 5 import { useAuth } from "~/providers/UnifiedAuthProvider"; 6 6 + import { constellationURLAtom } from "~/utils/atoms"; 5 7 6 8 const HANDLE_DID_CACHE_TIMEOUT = 60 * 60 * 1000; // 1 hour 7 9 ··· 70 72 } 71 73 } 72 74 75 75 + const [constellationURL] = useAtom(constellationURLAtom) 76 76 + 73 77 useEffect(() => { 74 78 if (!did) return; 75 79 setLoading(true); 76 80 setError(null); 77 81 const urls = [ 78 78 - `https://constellation.microcosm.blue/links?target=${encodeURIComponent(did)}&collection=app.bsky.feed.post&path=.facets[app.bsky.richtext.facet].features[app.bsky.richtext.facet%23mention].did`, 79 79 - `https://constellation.microcosm.blue/links?target=${encodeURIComponent(did)}&collection=app.bsky.feed.post&path=.facets[].features[app.bsky.richtext.facet%23mention].did`, 80 80 - `https://constellation.microcosm.blue/links?target=${encodeURIComponent(did)}&collection=app.bsky.graph.follow&path=.subject`, 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`, 81 85 ]; 82 86 let ignore = false; 83 87 Promise.all(

+181 -53

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

··· 1 1 + import { RichText } from "@atproto/api"; 1 2 import { useQueryClient } from "@tanstack/react-query"; 2 2 - import { createFileRoute } from "@tanstack/react-router"; 3 3 - import React from "react"; 3 3 + import { createFileRoute, useNavigate } from "@tanstack/react-router"; 4 4 + import { useAtom } from "jotai"; 5 5 + import React, { type ReactNode, useEffect, useState } from "react"; 4 6 5 7 import { Header } from "~/components/Header"; 6 6 - import { UniversalPostRendererATURILoader } from "~/components/UniversalPostRenderer"; 8 8 + import { Button } from "~/components/radix-m3-rd/Button"; 9 9 + import { 10 10 + renderTextWithFacets, 11 11 + UniversalPostRendererATURILoader, 12 12 + } from "~/components/UniversalPostRenderer"; 7 13 import { useAuth } from "~/providers/UnifiedAuthProvider"; 8 8 - import { toggleFollow, useGetFollowState } from "~/utils/followState"; 14 14 + import { imgCDNAtom } from "~/utils/atoms"; 15 15 + import { 16 16 + toggleFollow, 17 17 + useGetFollowState, 18 18 + useGetOneToOneState, 19 19 + } from "~/utils/followState"; 9 20 import { 10 21 useInfiniteQueryAuthorFeed, 11 22 useQueryIdentity, ··· 19 30 function ProfileComponent() { 20 31 // booo bad this is not always the did it might be a handle, use identity.did instead 21 32 const { did } = Route.useParams(); 33 33 + const navigate = useNavigate(); 22 34 const queryClient = useQueryClient(); 23 23 - const { agent } = useAuth(); 24 35 const { 25 36 data: identity, 26 37 isLoading: isIdentityLoading, 27 38 error: identityError, 28 39 } = useQueryIdentity(did); 29 29 - 30 30 - const followRecords = useGetFollowState({ 31 31 - target: identity?.did || did, 32 32 - user: agent?.did, 33 33 - }); 34 40 35 41 const resolvedDid = did.startsWith("did:") ? did : identity?.did; 36 42 const resolvedHandle = did.startsWith("did:") ? identity?.handle : did; ··· 67 73 [postsData] 68 74 ); 69 75 76 76 + const [imgcdn] = useAtom(imgCDNAtom); 77 77 + 70 78 function getAvatarUrl(p: typeof profile) { 71 79 const link = p?.avatar?.ref?.["$link"]; 72 80 if (!link || !resolvedDid) return null; 73 73 - return `https://cdn.bsky.app/img/avatar/plain/${resolvedDid}/${link}@jpeg`; 81 81 + return `https://${imgcdn}/img/avatar/plain/${resolvedDid}/${link}@jpeg`; 74 82 } 75 83 function getBannerUrl(p: typeof profile) { 76 84 const link = p?.banner?.ref?.["$link"]; 77 85 if (!link || !resolvedDid) return null; 78 78 - return `https://cdn.bsky.app/img/banner/plain/${resolvedDid}/${link}@jpeg`; 86 86 + return `https://${imgcdn}/img/banner/plain/${resolvedDid}/${link}@jpeg`; 79 87 } 80 88 81 89 const displayName = ··· 162 170 also delay the backfill to be on demand because it would be pretty intense 163 171 also save it persistently 164 172 */} 165 165 - {identity?.did !== agent?.did ? ( 166 166 - <> 167 167 - {!(followRecords?.length && followRecords?.length > 0) ? ( 168 168 - <button 169 169 - onClick={() => 170 170 - toggleFollow({ 171 171 - agent: agent || undefined, 172 172 - targetDid: identity?.did, 173 173 - followRecords: followRecords, 174 174 - queryClient: queryClient, 175 175 - }) 176 176 - } 177 177 - className="rounded-full dark:bg-gray-600 bg-gray-300 px-3 py-2 text-[14px]" 178 178 - > 179 179 - Follow 180 180 - </button> 181 181 - ) : ( 182 182 - <button 183 183 - onClick={() => 184 184 - toggleFollow({ 185 185 - agent: agent || undefined, 186 186 - targetDid: identity?.did, 187 187 - followRecords: followRecords, 188 188 - queryClient: queryClient, 189 189 - }) 190 190 - } 191 191 - className="rounded-full dark:bg-gray-600 bg-gray-300 px-3 py-2 text-[14px]" 192 192 - > 193 193 - Unfollow 194 194 - </button> 195 195 - )} 196 196 - </> 197 197 - ) : ( 198 198 - <button className="rounded-full dark:bg-gray-600 bg-gray-300 px-3 py-2 text-[14px]"> 199 199 - Edit Profile 200 200 - </button> 201 201 - )} 202 202 - <button className="rounded-full dark:bg-gray-600 bg-gray-300 px-3 py-2 text-[14px]"> 173 173 + <FollowButton targetdidorhandle={did} /> 174 174 + <Button className="rounded-full" variant={"secondary"}> 203 175 ... {/* todo: icon */} 204 204 - </button> 176 176 + </Button> 205 177 </div> 206 178 207 179 {/* Info Card */} 208 180 <div className="mt-16 pb-2 px-4 text-gray-900 dark:text-gray-100"> 209 181 <div className="font-bold text-2xl">{displayName}</div> 210 210 - <div className="text-gray-500 dark:text-gray-400 text-base mb-3"> 182 182 + <div className="text-gray-500 dark:text-gray-400 text-base mb-3 flex flex-row gap-1"> 183 183 + <Mutual targetdidorhandle={did} /> 211 184 {handle} 212 185 </div> 213 186 {description && ( 214 187 <div className="text-base leading-relaxed text-gray-800 dark:text-gray-300 mb-5 whitespace-pre-wrap break-words text-[15px]"> 215 215 - {description} 188 188 + {/* {description} */} 189 189 + <RichTextRenderer key={did} description={description} /> 216 190 </div> 217 191 )} 218 192 </div> ··· 255 229 </> 256 230 ); 257 231 } 232 232 + 233 233 + export function FollowButton({ 234 234 + targetdidorhandle, 235 235 + }: { 236 236 + targetdidorhandle: string; 237 237 + }) { 238 238 + const { agent } = useAuth(); 239 239 + const { data: identity } = useQueryIdentity(targetdidorhandle); 240 240 + const queryClient = useQueryClient(); 241 241 + 242 242 + const followRecords = useGetFollowState({ 243 243 + target: identity?.did ?? targetdidorhandle, 244 244 + user: agent?.did, 245 245 + }); 246 246 + 247 247 + return ( 248 248 + <> 249 249 + {identity?.did !== agent?.did ? ( 250 250 + <> 251 251 + {!(followRecords?.length && followRecords?.length > 0) ? ( 252 252 + <Button 253 253 + onClick={(e) => { 254 254 + e.stopPropagation(); 255 255 + toggleFollow({ 256 256 + agent: agent || undefined, 257 257 + targetDid: identity?.did, 258 258 + followRecords: followRecords, 259 259 + queryClient: queryClient, 260 260 + }); 261 261 + }} 262 262 + > 263 263 + Follow 264 264 + </Button> 265 265 + ) : ( 266 266 + <Button 267 267 + onClick={(e) => { 268 268 + e.stopPropagation(); 269 269 + toggleFollow({ 270 270 + agent: agent || undefined, 271 271 + targetDid: identity?.did, 272 272 + followRecords: followRecords, 273 273 + queryClient: queryClient, 274 274 + }); 275 275 + }} 276 276 + > 277 277 + Unfollow 278 278 + </Button> 279 279 + )} 280 280 + </> 281 281 + ) : ( 282 282 + <Button variant={"secondary"}>Edit Profile</Button> 283 283 + )} 284 284 + </> 285 285 + ); 286 286 + } 287 287 + 288 288 + export function Mutual({ targetdidorhandle }: { targetdidorhandle: string }) { 289 289 + const { agent } = useAuth(); 290 290 + const { data: identity } = useQueryIdentity(targetdidorhandle); 291 291 + 292 292 + const theyFollowYouRes = useGetOneToOneState( 293 293 + agent?.did 294 294 + ? { 295 295 + target: agent?.did, 296 296 + user: identity?.did ?? targetdidorhandle, 297 297 + collection: "app.bsky.graph.follow", 298 298 + path: ".subject", 299 299 + } 300 300 + : undefined 301 301 + ); 302 302 + 303 303 + const youFollowThemRes = useGetFollowState({ 304 304 + target: identity?.did ?? targetdidorhandle, 305 305 + user: agent?.did, 306 306 + }); 307 307 + 308 308 + const theyFollowYou: boolean = 309 309 + !!theyFollowYouRes?.length && theyFollowYouRes.length > 0; 310 310 + const youFollowThem: boolean = 311 311 + !!youFollowThemRes?.length && youFollowThemRes.length > 0; 312 312 + 313 313 + return ( 314 314 + <> 315 315 + {/* if not self */} 316 316 + {identity?.did !== agent?.did ? ( 317 317 + <> 318 318 + {theyFollowYou ? ( 319 319 + <> 320 320 + {youFollowThem ? ( 321 321 + <div className=" text-sm px-1.5 py-0.5 text-gray-500 bg-gray-200 dark:text-gray-400 dark:bg-gray-800 rounded-lg flex flex-row items-center justify-center"> 322 322 + mutuals 323 323 + </div> 324 324 + ) : ( 325 325 + <div className=" text-sm px-1.5 py-0.5 text-gray-500 bg-gray-200 dark:text-gray-400 dark:bg-gray-800 rounded-lg flex flex-row items-center justify-center"> 326 326 + follows you 327 327 + </div> 328 328 + )} 329 329 + </> 330 330 + ) : ( 331 331 + <></> 332 332 + )} 333 333 + </> 334 334 + ) : ( 335 335 + // lmao can someone be mutuals with themselves ?? 336 336 + <></> 337 337 + )} 338 338 + </> 339 339 + ); 340 340 + } 341 341 + 342 342 + export function RichTextRenderer({ description }: { description: string }) { 343 343 + const [richDescription, setRichDescription] = useState<string | ReactNode[]>( 344 344 + description 345 345 + ); 346 346 + const { agent } = useAuth(); 347 347 + const navigate = useNavigate(); 348 348 + 349 349 + useEffect(() => { 350 350 + let mounted = true; 351 351 + 352 352 + // setRichDescription(description); 353 353 + 354 354 + async function processRichText() { 355 355 + try { 356 356 + if (!agent?.did) return; 357 357 + const rt = new RichText({ text: description }); 358 358 + await rt.detectFacets(agent); 359 359 + 360 360 + if (!mounted) return; 361 361 + 362 362 + if (rt.facets) { 363 363 + setRichDescription( 364 364 + renderTextWithFacets({ text: rt.text, facets: rt.facets, navigate }) 365 365 + ); 366 366 + } else { 367 367 + setRichDescription(rt.text); 368 368 + } 369 369 + } catch (error) { 370 370 + console.error("Failed to detect facets:", error); 371 371 + if (mounted) { 372 372 + setRichDescription(description); 373 373 + } 374 374 + } 375 375 + } 376 376 + 377 377 + processRichText(); 378 378 + 379 379 + return () => { 380 380 + mounted = false; 381 381 + }; 382 382 + }, [description, agent, navigate]); 383 383 + 384 384 + return <>{richDescription}</>; 385 385 + }

+1 -1

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

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

+9 -1

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"; 4 4 + import { useAtom } from "jotai"; 4 5 import React, { useLayoutEffect } from "react"; 5 6 6 7 import { Header } from "~/components/Header"; 7 8 import { UniversalPostRendererATURILoader } from "~/components/UniversalPostRenderer"; 9 9 + import { constellationURLAtom, slingshotURLAtom } from "~/utils/atoms"; 8 10 //import { usePersistentStore } from '~/providers/PersistentStoreProvider'; 9 11 import { 10 12 constructPostQuery, ··· 275 277 // path: ".reply.parent.uri", 276 278 // }); 277 279 // const replies = repliesData?.linking_records.slice(0, 50) ?? []; 280 280 + const [constellationurl] = useAtom(constellationURLAtom) 281 281 + 278 282 const infinitequeryresults = useInfiniteQuery({ 279 283 ...yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks( 280 284 { 285 285 + constellation: constellationurl, 281 286 method: "/links", 282 287 target: atUri, 283 288 collection: "app.bsky.feed.post", ··· 386 391 } 387 392 }, [parents, layoutReady]); 388 393 394 394 + 395 395 + const [slingshoturl] = useAtom(slingshotURLAtom) 396 396 + 389 397 React.useEffect(() => { 390 398 if (parentsLoading) { 391 399 setLayoutReady(false); ··· 414 422 while (currentParentUri && safetyCounter < MAX_PARENTS) { 415 423 try { 416 424 const parentPost = await queryClient.fetchQuery( 417 417 - constructPostQuery(currentParentUri) 425 425 + constructPostQuery(currentParentUri, slingshoturl) 418 426 ); 419 427 if (!parentPost) break; 420 428 parentChain.push(parentPost);

+50 -1

src/routes/search.tsx

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

+164 -1

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 4 3 5 import { Header } from "~/components/Header"; 4 6 import Login from "~/components/Login"; 7 7 + import { 8 8 + constellationURLAtom, 9 9 + defaultconstellationURL, 10 10 + defaulthue, 11 11 + defaultImgCDN, 12 12 + defaultslingshotURL, 13 13 + defaultVideoCDN, 14 14 + hueAtom, 15 15 + imgCDNAtom, 16 16 + slingshotURLAtom, 17 17 + videoCDNAtom, 18 18 + } from "~/utils/atoms"; 5 19 6 20 export const Route = createFileRoute("/settings")({ 7 21 component: Settings, ··· 20 34 } 21 35 }} 22 36 /> 23 23 - <Login /> 37 37 + <div className="lg:hidden"> 38 38 + <Login /> 39 39 + </div> 40 40 + <div className="h-4" /> 41 41 + <TextInputSetting 42 42 + atom={constellationURLAtom} 43 43 + title={"Constellation"} 44 44 + description={ 45 45 + "Customize the Constellation instance to be used by Red Dwarf" 46 46 + } 47 47 + init={defaultconstellationURL} 48 48 + /> 49 49 + <TextInputSetting 50 50 + atom={slingshotURLAtom} 51 51 + title={"Slingshot"} 52 52 + description={"Customize the Slingshot instance to be used by Red Dwarf"} 53 53 + init={defaultslingshotURL} 54 54 + /> 55 55 + <TextInputSetting 56 56 + atom={imgCDNAtom} 57 57 + title={"Image CDN"} 58 58 + description={ 59 59 + "Customize the Constellation instance to be used by Red Dwarf" 60 60 + } 61 61 + init={defaultImgCDN} 62 62 + /> 63 63 + <TextInputSetting 64 64 + atom={videoCDNAtom} 65 65 + title={"Video CDN"} 66 66 + description={"Customize the Slingshot instance to be used by Red Dwarf"} 67 67 + init={defaultVideoCDN} 68 68 + /> 69 69 + 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 73 73 + </p> 24 74 </> 25 75 ); 26 76 } 77 77 + function Hue() { 78 78 + const [hue, setHue] = useAtom(hueAtom); 79 79 + 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 + /> 87 87 + <button 88 88 + onClick={() => setHue(defaulthue ?? 28)} 89 89 + className="px-6 py-2 h-12 rounded-full bg-gray-100 dark:bg-gray-800 90 90 + text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 transition" 91 91 + > 92 92 + Reset 93 93 + </button> 94 94 + </div> 95 95 + </div> 96 96 + ); 97 97 + } 98 98 + 99 99 + export function TextInputSetting({ 100 100 + atom, 101 101 + title, 102 102 + description, 103 103 + init, 104 104 + }: { 105 105 + atom: typeof constellationURLAtom; 106 106 + title?: string; 107 107 + description?: string; 108 108 + init?: string; 109 109 + }) { 110 110 + const [value, setValue] = useAtom(atom); 111 111 + return ( 112 112 + <div className="flex flex-col gap-2 px-4 py-2"> 113 113 + {/* <div> 114 114 + {title && ( 115 115 + <h3 className="text-sm font-medium text-gray-900 dark:text-gray-100"> 116 116 + {title} 117 117 + </h3> 118 118 + )} 119 119 + {description && ( 120 120 + <p className="text-sm text-gray-500 dark:text-gray-400"> 121 121 + {description} 122 122 + </p> 123 123 + )} 124 124 + </div> */} 125 125 + 126 126 + <div className="flex flex-row gap-2 items-center"> 127 127 + <div className="m3input-field m3input-label m3input-border size-md flex-1"> 128 128 + <input 129 129 + type="text" 130 130 + placeholder=" " 131 131 + value={value} 132 132 + onChange={(e) => setValue(e.target.value)} 133 133 + /> 134 134 + <label>{title}</label> 135 135 + </div> 136 136 + {/* <input 137 137 + type="text" 138 138 + value={value} 139 139 + onChange={(e) => setValue(e.target.value)} 140 140 + className="flex-1 px-3 py-2 rounded-lg bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 141 141 + text-gray-900 dark:text-gray-100 placeholder:text-gray-500 dark:placeholder:text-gray-400 142 142 + focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600" 143 143 + placeholder="Enter value..." 144 144 + /> */} 145 145 + <button 146 146 + onClick={() => setValue(init ?? "")} 147 147 + className="px-6 py-2 h-12 rounded-full bg-gray-100 dark:bg-gray-800 148 148 + text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 transition" 149 149 + > 150 150 + Reset 151 151 + </button> 152 152 + </div> 153 153 + </div> 154 154 + ); 155 155 + } 156 156 + 157 157 + 158 158 + interface SliderProps { 159 159 + atom: typeof hueAtom; 160 160 + min?: number; 161 161 + max?: number; 162 162 + step?: number; 163 163 + } 164 164 + 165 165 + export const SliderComponent: React.FC<SliderProps> = ({ 166 166 + atom, 167 167 + min = 0, 168 168 + max = 100, 169 169 + step = 1, 170 170 + }) => { 171 171 + 172 172 + const [value, setValue] = useAtom(atom) 173 173 + 174 174 + return ( 175 175 + <Slider.Root 176 176 + className="relative flex items-center w-full h-4" 177 177 + value={[value]} 178 178 + min={min} 179 179 + max={max} 180 180 + step={step} 181 181 + onValueChange={(v: number[]) => setValue(v[0])} 182 182 + > 183 183 + <Slider.Track className="relative flex-grow h-4 bg-gray-300 dark:bg-gray-700 rounded-full"> 184 184 + <Slider.Range className="absolute h-full bg-gray-500 dark:bg-gray-400 rounded-l-full rounded-r-none" /> 185 185 + </Slider.Track> 186 186 + <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 187 + </Slider.Root> 188 188 + ); 189 189 + };

+139 -13

src/styles/app.css

··· 15 15 --color-gray-950: oklch(0.129 0.050 222.000); 16 16 } */ 17 17 18 18 + :root { 19 19 + --safe-hue: var(--tw-gray-hue, 28) 20 20 + } 21 21 + 18 22 @theme { 19 19 - --color-gray-50: oklch(0.984 0.012 28); 20 20 - --color-gray-100: oklch(0.968 0.017 28); 21 21 - --color-gray-200: oklch(0.929 0.025 28); 22 22 - --color-gray-300: oklch(0.869 0.035 28); 23 23 - --color-gray-400: oklch(0.704 0.05 28); 24 24 - --color-gray-500: oklch(0.554 0.06 28); 25 25 - --color-gray-600: oklch(0.446 0.058 28); 26 26 - --color-gray-700: oklch(0.372 0.058 28); 27 27 - --color-gray-800: oklch(0.279 0.055 28); 28 28 - --color-gray-900: oklch(0.208 0.055 28); 29 29 - --color-gray-950: oklch(0.129 0.055 28); 23 23 + --color-gray-50: oklch(0.984 0.012 var(--safe-hue)); 24 24 + --color-gray-100: oklch(0.968 0.017 var(--safe-hue)); 25 25 + --color-gray-200: oklch(0.929 0.025 var(--safe-hue)); 26 26 + --color-gray-300: oklch(0.869 0.035 var(--safe-hue)); 27 27 + --color-gray-400: oklch(0.704 0.05 var(--safe-hue)); 28 28 + --color-gray-500: oklch(0.554 0.06 var(--safe-hue)); 29 29 + --color-gray-600: oklch(0.446 0.058 var(--safe-hue)); 30 30 + --color-gray-700: oklch(0.372 0.058 var(--safe-hue)); 31 31 + --color-gray-800: oklch(0.279 0.055 var(--safe-hue)); 32 32 + --color-gray-900: oklch(0.208 0.055 var(--safe-hue)); 33 33 + --color-gray-950: oklch(0.129 0.055 var(--safe-hue)); 30 34 } 31 35 32 36 @layer base { ··· 48 52 } 49 53 } 50 54 55 55 + .gutter{ 56 56 + scrollbar-gutter: stable both-edges; 57 57 + } 58 58 + 51 59 @media (width >= 64rem /* 1024px */) { 52 60 html:not(:has(.disablegutter)), 53 61 body:not(:has(.disablegutter)) { 54 62 scrollbar-gutter: stable both-edges !important; 55 63 } 56 56 - html:has(.disablegutter), 57 57 - body:has(.disablegutter) { 64 64 + html:has(.disablescroll), 65 65 + body:has(.disablescroll) { 58 66 scrollbar-width: none; 59 67 overflow-y: hidden; 60 68 } ··· 105 113 :root { 106 114 --shadow-opacity: calc(1 - var(--is-top)); 107 115 --tw-shadow-header: 0 2px 8px hsl(0 0% 0% / calc(var(--shadow-opacity) * 0.15)); 116 116 + } 117 117 + 118 118 + 119 119 + /* m3 input */ 120 120 + :root { 121 121 + --m3input-radius: 6px; 122 122 + --m3input-border-width: .0625rem; 123 123 + --m3input-font-size: 16px; 124 124 + --m3input-transition: 150ms cubic-bezier(.2, .8, .2, 1); 125 125 + /* light theme */ 126 126 + --m3input-bg: var(--color-gray-50); 127 127 + --m3input-border-color: var(--color-gray-400); 128 128 + --m3input-label-color: var(--color-gray-500); 129 129 + --m3input-text-color: var(--color-gray-900); 130 130 + --m3input-focus-color: var(--color-gray-600); 131 131 + } 132 132 + 133 133 + @media (prefers-color-scheme: dark) { 134 134 + :root { 135 135 + --m3input-bg: var(--color-gray-950); 136 136 + --m3input-border-color: var(--color-gray-700); 137 137 + --m3input-label-color: var(--color-gray-400); 138 138 + --m3input-text-color: var(--color-gray-50); 139 139 + --m3input-focus-color: var(--color-gray-400); 140 140 + } 141 141 + } 142 142 + 143 143 + /* reset page *//* 144 144 + html, 145 145 + body { 146 146 + background: var(--m3input-bg); 147 147 + margin: 0; 148 148 + padding: 1rem; 149 149 + color: var(--m3input-text-color); 150 150 + font-family: system-ui, sans-serif; 151 151 + font-size: var(--m3input-font-size); 152 152 + }*/ 153 153 + 154 154 + /* base wrapper */ 155 155 + .m3input-field.m3input-label.m3input-border { 156 156 + position: relative; 157 157 + display: inline-block; 158 158 + width: 100%; 159 159 + /*max-width: 400px;*/ 160 160 + } 161 161 + 162 162 + /* size variants */ 163 163 + .m3input-field.size-sm { 164 164 + --m3input-h: 40px; 165 165 + } 166 166 + 167 167 + .m3input-field.size-md { 168 168 + --m3input-h: 48px; 169 169 + } 170 170 + 171 171 + .m3input-field.size-lg { 172 172 + --m3input-h: 56px; 173 173 + } 174 174 + 175 175 + .m3input-field.size-xl { 176 176 + --m3input-h: 64px; 177 177 + } 178 178 + 179 179 + .m3input-field.m3input-label.m3input-border:not(.size-sm):not(.size-md):not(.size-lg):not(.size-xl) { 180 180 + --m3input-h: 48px; 181 181 + } 182 182 + 183 183 + /* outlined input */ 184 184 + .m3input-field.m3input-label.m3input-border input { 185 185 + width: 100%; 186 186 + height: var(--m3input-h); 187 187 + border: var(--m3input-border-width) solid var(--m3input-border-color); 188 188 + border-radius: var(--m3input-radius); 189 189 + background: var(--m3input-bg); 190 190 + color: var(--m3input-text-color); 191 191 + font-size: var(--m3input-font-size); 192 192 + padding: 0 12px; 193 193 + box-sizing: border-box; 194 194 + outline: none; 195 195 + transition: border-color var(--m3input-transition), box-shadow var(--m3input-transition); 196 196 + } 197 197 + 198 198 + /* focus ring */ 199 199 + .m3input-field.m3input-label.m3input-border input:focus { 200 200 + border-color: var(--m3input-focus-color); 201 201 + /*box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus-color) 20%, transparent);*/ 202 202 + } 203 203 + 204 204 + /* label */ 205 205 + .m3input-field.m3input-label.m3input-border label { 206 206 + position: absolute; 207 207 + left: 12px; 208 208 + top: 50%; 209 209 + transform: translateY(-50%); 210 210 + background: var(--m3input-bg); 211 211 + padding: 0 .25em; 212 212 + color: var(--m3input-label-color); 213 213 + pointer-events: none; 214 214 + transition: all var(--m3input-transition); 215 215 + } 216 216 + 217 217 + /* float on focus or when filled */ 218 218 + .m3input-field.m3input-label.m3input-border input:focus+label, 219 219 + .m3input-field.m3input-label.m3input-border input:not(:placeholder-shown)+label { 220 220 + top: 0; 221 221 + transform: translateY(-50%) scale(.78); 222 222 + left: 0; 223 223 + color: var(--m3input-focus-color); 224 224 + } 225 225 + 226 226 + /* placeholder trick */ 227 227 + .m3input-field.m3input-label.m3input-border input::placeholder { 228 228 + color: transparent; 229 229 + } 230 230 + 231 231 + /* radix i love you but like cmon man */ 232 232 + body[data-scroll-locked]{ 233 233 + margin-left: var(--removed-body-scroll-bar-size) !important; 108 234 }

+61 -13

src/utils/atoms.ts

··· 1 1 - import type Agent from "@atproto/api"; 2 2 - import { atom, createStore } from "jotai"; 3 3 - import { atomWithStorage } from 'jotai/utils'; 1 1 + import { atom, createStore, useAtomValue } from "jotai"; 2 2 + import { atomWithStorage } from "jotai/utils"; 3 3 + import { useEffect } from "react"; 4 4 5 5 export const store = createStore(); 6 6 7 7 + export const quickAuthAtom = atomWithStorage<string | null>( 8 8 + "quickAuth", 9 9 + null 10 10 + ); 11 11 + 7 12 export const selectedFeedUriAtom = atomWithStorage<string | null>( 8 8 - 'selectedFeedUri', 13 13 + "selectedFeedUri", 9 14 null 10 15 ); 11 16 12 17 //export const feedScrollPositionsAtom = atom<Record<string, number>>({}); 13 18 14 19 export const feedScrollPositionsAtom = atomWithStorage<Record<string, number>>( 15 15 - 'feedscrollpositions', 20 20 + "feedscrollpositions", 16 21 {} 17 22 ); 18 23 19 24 export const likedPostsAtom = atomWithStorage<Record<string, string>>( 20 20 - 'likedPosts', 25 25 + "likedPosts", 21 26 {} 22 27 ); 23 28 29 29 + export const defaultconstellationURL = "constellation.microcosm.blue"; 30 30 + export const constellationURLAtom = atomWithStorage<string>( 31 31 + "constellationURL", 32 32 + defaultconstellationURL 33 33 + ); 34 34 + export const defaultslingshotURL = "slingshot.microcosm.blue"; 35 35 + export const slingshotURLAtom = atomWithStorage<string>( 36 36 + "slingshotURL", 37 37 + defaultslingshotURL 38 38 + ); 39 39 + export const defaultImgCDN = "cdn.bsky.app"; 40 40 + export const imgCDNAtom = atomWithStorage<string>("imgcdnurl", defaultImgCDN); 41 41 + export const defaultVideoCDN = "video.bsky.app"; 42 42 + export const videoCDNAtom = atomWithStorage<string>( 43 43 + "videocdnurl", 44 44 + defaultVideoCDN 45 45 + ); 46 46 + 47 47 + export const defaulthue = 28; 48 48 + export const hueAtom = atomWithStorage<number>("hue", defaulthue); 49 49 + 24 50 export const isAtTopAtom = atom<boolean>(true); 25 51 26 52 type ComposerState = 27 27 - | { kind: 'closed' } 28 28 - | { kind: 'root' } 29 29 - | { kind: 'reply'; parent: string } 30 30 - | { kind: 'quote'; subject: string }; 31 31 - export const composerAtom = atom<ComposerState>({ kind: 'closed' }); 53 53 + | { kind: "closed" } 54 54 + | { kind: "root" } 55 55 + | { kind: "reply"; parent: string } 56 56 + | { kind: "quote"; subject: string }; 57 57 + export const composerAtom = atom<ComposerState>({ kind: "closed" }); 58 58 + 59 59 + //export const agentAtom = atom<Agent | null>(null); 60 60 + //export const authedAtom = atom<boolean>(false); 61 61 + 62 62 + export function useAtomCssVar(atom: typeof hueAtom, cssVar: string) { 63 63 + const value = useAtomValue(atom); 64 64 + 65 65 + useEffect(() => { 66 66 + document.documentElement.style.setProperty(cssVar, value.toString()); 67 67 + }, [value, cssVar]); 68 68 + 69 69 + useEffect(() => { 70 70 + document.documentElement.style.setProperty(cssVar, value.toString()); 71 71 + }, []); 72 72 + } 32 73 33 33 - export const agentAtom = atom<Agent|null>(null); 34 34 - export const authedAtom = atom<boolean>(false); 74 74 + hueAtom.onMount = (setAtom) => { 75 75 + const stored = localStorage.getItem("hue"); 76 76 + if (stored != null) setAtom(Number(stored)); 77 77 + }; 78 78 + // export function initAtomToCssVar(atom: typeof hueAtom, cssVar: string) { 79 79 + // const initial = store.get(atom); 80 80 + // console.log("atom get ", initial); 81 81 + // document.documentElement.style.setProperty(cssVar, initial.toString()); 82 82 + // }

+33

src/utils/followState.ts

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

+53 -23

src/utils/useHydrated.ts

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

+27 -18

src/utils/useQuery.ts

··· 6 6 useInfiniteQuery, 7 7 useQuery, 8 8 type UseQueryResult} from "@tanstack/react-query"; 9 9 + import { useAtom } from "jotai"; 9 10 10 10 - export function constructIdentityQuery(didorhandle?: string) { 11 11 + import { constellationURLAtom, slingshotURLAtom } from "./atoms"; 12 12 + 13 13 + export function constructIdentityQuery(didorhandle?: string, slingshoturl?: string) { 11 14 return queryOptions({ 12 15 queryKey: ["identity", didorhandle], 13 16 queryFn: async () => { 14 17 if (!didorhandle) return undefined as undefined 15 18 const res = await fetch( 16 16 - `https://slingshot.microcosm.blue/xrpc/com.bad-example.identity.resolveMiniDoc?identifier=${encodeURIComponent(didorhandle)}` 19 19 + `https://${slingshoturl}/xrpc/com.bad-example.identity.resolveMiniDoc?identifier=${encodeURIComponent(didorhandle)}` 17 20 ); 18 21 if (!res.ok) throw new Error("Failed to fetch post"); 19 22 try { ··· 55 58 Error 56 59 > 57 60 export function useQueryIdentity(didorhandle?: string) { 58 58 - return useQuery(constructIdentityQuery(didorhandle)); 61 61 + const [slingshoturl] = useAtom(slingshotURLAtom) 62 62 + return useQuery(constructIdentityQuery(didorhandle, slingshoturl)); 59 63 } 60 64 61 61 - export function constructPostQuery(uri?: string) { 65 65 + export function constructPostQuery(uri?: string, slingshoturl?: string) { 62 66 return queryOptions({ 63 67 queryKey: ["post", uri], 64 68 queryFn: async () => { 65 69 if (!uri) return undefined as undefined 66 70 const res = await fetch( 67 67 - `https://slingshot.microcosm.blue/xrpc/com.bad-example.repo.getUriRecord?at_uri=${encodeURIComponent(uri)}` 71 71 + `https://${slingshoturl}/xrpc/com.bad-example.repo.getUriRecord?at_uri=${encodeURIComponent(uri)}` 68 72 ); 69 73 let data: any; 70 74 try { ··· 118 122 Error 119 123 > 120 124 export function useQueryPost(uri?: string) { 121 121 - return useQuery(constructPostQuery(uri)); 125 125 + const [slingshoturl] = useAtom(slingshotURLAtom) 126 126 + return useQuery(constructPostQuery(uri, slingshoturl)); 122 127 } 123 128 124 124 - export function constructProfileQuery(uri?: string) { 129 129 + export function constructProfileQuery(uri?: string, slingshoturl?: string) { 125 130 return queryOptions({ 126 131 queryKey: ["profile", uri], 127 132 queryFn: async () => { 128 133 if (!uri) return undefined as undefined 129 134 const res = await fetch( 130 130 - `https://slingshot.microcosm.blue/xrpc/com.bad-example.repo.getUriRecord?at_uri=${encodeURIComponent(uri)}` 135 135 + `https://${slingshoturl}/xrpc/com.bad-example.repo.getUriRecord?at_uri=${encodeURIComponent(uri)}` 131 136 ); 132 137 let data: any; 133 138 try { ··· 181 186 Error 182 187 > 183 188 export function useQueryProfile(uri?: string) { 184 184 - return useQuery(constructProfileQuery(uri)); 189 189 + const [slingshoturl] = useAtom(slingshotURLAtom) 190 190 + return useQuery(constructProfileQuery(uri, slingshoturl)); 185 191 } 186 192 187 193 // export function constructConstellationQuery( ··· 217 223 // target: string 218 224 // ): QueryOptions<linksAllResponse, Error>; 219 225 export function constructConstellationQuery(query?:{ 226 226 + constellation: string, 220 227 method: 221 228 | "/links" 222 229 | "/links/distinct-dids" ··· 250 257 const cursor = query.cursor 251 258 const dids = query?.dids 252 259 const res = await fetch( 253 253 - `https://constellation.microcosm.blue${method}?target=${encodeURIComponent(target)}${collection ? `&collection=${encodeURIComponent(collection)}` : ""}${path ? `&path=${encodeURIComponent(path)}` : ""}${cursor ? `&cursor=${encodeURIComponent(cursor)}` : ""}${dids ? dids.map((did) => `&did=${encodeURIComponent(did)}`).join("") : ""}` 260 260 + `https://${query.constellation}${method}?target=${encodeURIComponent(target)}${collection ? `&collection=${encodeURIComponent(collection)}` : ""}${path ? `&path=${encodeURIComponent(path)}` : ""}${cursor ? `&cursor=${encodeURIComponent(cursor)}` : ""}${dids ? dids.map((did) => `&did=${encodeURIComponent(did)}`).join("") : ""}` 254 261 ); 255 262 if (!res.ok) throw new Error("Failed to fetch post"); 256 263 try { ··· 339 346 > 340 347 | undefined { 341 348 //if (!query) return; 349 349 + const [constellationurl] = useAtom(constellationURLAtom) 342 350 return useQuery( 343 343 - constructConstellationQuery(query) 351 351 + constructConstellationQuery(query && {constellation: constellationurl, ...query}) 344 352 ); 345 353 } 346 354 ··· 445 453 446 454 447 455 448 448 - export function constructArbitraryQuery(uri?: string) { 456 456 + export function constructArbitraryQuery(uri?: string, slingshoturl?: string) { 449 457 return queryOptions({ 450 458 queryKey: ["arbitrary", uri], 451 459 queryFn: async () => { 452 460 if (!uri) return undefined as undefined 453 461 const res = await fetch( 454 454 - `https://slingshot.microcosm.blue/xrpc/com.bad-example.repo.getUriRecord?at_uri=${encodeURIComponent(uri)}` 462 462 + `https://${slingshoturl}/xrpc/com.bad-example.repo.getUriRecord?at_uri=${encodeURIComponent(uri)}` 455 463 ); 456 464 let data: any; 457 465 try { ··· 504 512 Error 505 513 >; 506 514 export function useQueryArbitrary(uri?: string) { 507 507 - return useQuery(constructArbitraryQuery(uri)); 515 515 + const [slingshoturl] = useAtom(slingshotURLAtom) 516 516 + return useQuery(constructArbitraryQuery(uri, slingshoturl)); 508 517 } 509 518 510 519 export function constructFallbackNothingQuery(){ ··· 606 615 }) { 607 616 const { queryKey, queryFn } = constructInfiniteFeedSkeletonQuery(options); 608 617 609 609 - return useInfiniteQuery({ 618 618 + return {...useInfiniteQuery({ 610 619 queryKey, 611 620 queryFn, 612 621 initialPageParam: undefined as never, ··· 614 623 staleTime: Infinity, 615 624 refetchOnWindowFocus: false, 616 625 enabled: !!options.feedUri && (options.isAuthed ? !!options.agent && !!options.pdsUrl && !!options.feedServiceDid : true), 617 617 - }); 626 626 + }), queryKey: queryKey}; 618 627 } 619 628 620 629 621 630 export function yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks(query?: { 631 631 + constellation: string, 622 632 method: '/links' 623 633 target?: string 624 634 collection: string 625 635 path: string 626 636 }) { 627 627 - const constellationHost = 'constellation.microcosm.blue' 628 637 console.log( 629 638 'yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks', 630 639 query, ··· 650 659 const cursor = pageParam 651 660 652 661 const res = await fetch( 653 653 - `https://${constellationHost}${method}?target=${encodeURIComponent(target)}${ 662 662 + `https://${query.constellation}${method}?target=${encodeURIComponent(target)}${ 654 663 collection ? `&collection=${encodeURIComponent(collection)}` : '' 655 664 }${path ? `&path=${encodeURIComponent(path)}` : ''}${ 656 665 cursor ? `&cursor=${encodeURIComponent(cursor)}` : ''

+1 -1

vite.config.ts

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