From 074047b5f3c7b63ab3e32a13c0d6b262f27ac45e Mon Sep 17 00:00:00 2001
From: rimar1337 <132627503+rimar1337@users.noreply.github.com>
Date: Tue, 21 Oct 2025 19:48:46 +0700
Subject: [PATCH] settings revamp

---
 src/components/Login.tsx                 |  74 ++++++++++++---
 src/components/UniversalPostRenderer.tsx |  29 +++---
 src/routes/profile.$did/index.tsx        |   8 +-
 src/routes/settings.tsx                  |  41 ++++++--
 src/styles/app.css                       | 113 +++++++++++++++++++++++
 src/utils/atoms.ts                       |  10 ++
 src/utils/useHydrated.ts                 |  76 ++++++++++-----
 7 files changed, 289 insertions(+), 62 deletions(-)

diff --git a/src/components/Login.tsx b/src/components/Login.tsx
index 868e0ba..d59402a 100644
--- a/src/components/Login.tsx
+++ b/src/components/Login.tsx
@@ -1,8 +1,10 @@
 // src/components/Login.tsx
 import AtpAgent, { Agent } from "@atproto/api";
+import { useAtom } from "jotai";
 import React, { useEffect, useRef, useState } from "react";
 
 import { useAuth } from "~/providers/UnifiedAuthProvider";
+import { imgCDNAtom } from "~/utils/atoms";
 import { useQueryIdentity, useQueryProfile } from "~/utils/useQuery";
 
 // --- 1. The Main Component (Orchestrator with `compact` prop) ---
@@ -190,19 +192,30 @@ const OAuthForm = () => {
       <p className="text-xs text-gray-500 dark:text-gray-400">
         Sign in with AT. Your password is never shared.
       </p>
-      <input
+      {/* <input
         type="text"
         placeholder="handle.bsky.social"
         value={handle}
         onChange={(e) => setHandle(e.target.value)}
         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"
-      />
-      <button
-        type="submit"
-        className="bg-gray-600 hover:bg-gray-700 text-white rounded-full px-4 py-2 font-medium text-sm transition-colors"
-      >
-        Log in
-      </button>
+      /> */}
+      <div className="flex flex-col gap-3">
+        <div className="m3input-field m3input-label m3input-border size-md flex-1">
+          <input
+            type="text"
+            placeholder=" "
+            value={handle}
+            onChange={(e) => setHandle(e.target.value)}
+          />
+          <label>AT Handle</label>
+        </div>
+        <button
+          type="submit"
+          className="bg-gray-600 hover:bg-gray-700 text-white rounded-full px-4 py-2 font-medium text-sm transition-colors"
+        >
+          Log in
+        </button>
+      </div>
     </form>
   );
 };
@@ -235,7 +248,7 @@ const PasswordForm = () => {
       <p className="text-xs text-red-500 dark:text-red-400">
         Warning: Less secure. Use an App Password.
       </p>
-      <input
+      {/* <input
         type="text"
         placeholder="handle.bsky.social"
         value={user}
@@ -257,7 +270,34 @@ const PasswordForm = () => {
         value={serviceURL}
         onChange={(e) => setServiceURL(e.target.value)}
         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"
-      />
+      /> */}
+      <div className="m3input-field m3input-label m3input-border size-md flex-1">
+          <input
+            type="text"
+            placeholder=" "
+            value={user}
+            onChange={(e) => setUser(e.target.value)}
+          />
+          <label>AT Handle</label>
+        </div>
+        <div className="m3input-field m3input-label m3input-border size-md flex-1">
+          <input
+            type="text"
+            placeholder=" "
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          />
+          <label>App Password</label>
+        </div>
+        <div className="m3input-field m3input-label m3input-border size-md flex-1">
+          <input
+            type="text"
+            placeholder=" "
+            value={serviceURL}
+            onChange={(e) => setServiceURL(e.target.value)}
+          />
+          <label>PDS</label>
+        </div>
       {error && <p className="text-xs text-red-500">{error}</p>}
       <button
         type="submit"
@@ -278,17 +318,21 @@ export const ProfileThing = ({
   large?: boolean;
 }) => {
   const { agent } = useAuth();
-  const did = ((agent as AtpAgent).session?.did ?? (agent as AtpAgent)?.assertDid ?? agent?.did) as
-    | string
-    | undefined;
+  const did = ((agent as AtpAgent).session?.did ??
+    (agent as AtpAgent)?.assertDid ??
+    agent?.did) as string | undefined;
   const { data: identity } = useQueryIdentity(did);
-  const { data: profiledata } = useQueryProfile(`at://${did}/app.bsky.actor.profile/self`);
+  const { data: profiledata } = useQueryProfile(
+    `at://${did}/app.bsky.actor.profile/self`
+  );
   const profile = profiledata?.value;
 
+  const [imgcdn] = useAtom(imgCDNAtom)
+
   function getAvatarUrl(p: typeof profile) {
     const link = p?.avatar?.ref?.["$link"];
     if (!link || !did) return null;
-    return `https://cdn.bsky.app/img/avatar/plain/${did}/${link}@jpeg`;
+    return `https://${imgcdn}/img/avatar/plain/${did}/${link}@jpeg`;
   }
 
   if (!profiledata) {
diff --git a/src/components/UniversalPostRenderer.tsx b/src/components/UniversalPostRenderer.tsx
index f7442a2..aaeffb0 100644
--- a/src/components/UniversalPostRenderer.tsx
+++ b/src/components/UniversalPostRenderer.tsx
@@ -5,7 +5,7 @@ import { DropdownMenu } from "radix-ui";
 import * as React from "react";
 import { type SVGProps } from "react";
 
-import { composerAtom, constellationURLAtom, likedPostsAtom } from "~/utils/atoms";
+import { composerAtom, constellationURLAtom, imgCDNAtom, likedPostsAtom } from "~/utils/atoms";
 import { useHydratedEmbed } from "~/utils/useHydrated";
 import {
   useQueryConstellation,
@@ -599,10 +599,10 @@ function MoreReplies({ atUri }: { atUri: string }) {
   );
 }
 
-function getAvatarUrl(opProfile: any, did: string) {
+function getAvatarUrl(opProfile: any, did: string, cdn: string) {
   const link = opProfile?.value?.avatar?.ref?.["$link"];
   if (!link) return null;
-  return `https://cdn.bsky.app/img/avatar/plain/${did}/${link}@jpeg`;
+  return `https://${cdn}/img/avatar/plain/${did}/${link}@jpeg`;
 }
 
 export function UniversalPostRendererRawRecordShim({
@@ -723,6 +723,8 @@ export function UniversalPostRendererRawRecordShim({
     error: embedError,
   } = useHydratedEmbed(postRecord?.value?.embed, resolved?.did);
 
+  const [imgcdn] = useAtom(imgCDNAtom)
+
   const parsedaturi = new AtUri(aturi); //parseAtUri(aturi);
 
   const fakepost = React.useMemo<AppBskyFeedDefs.PostView>(
@@ -734,7 +736,7 @@ export function UniversalPostRendererRawRecordShim({
         did: resolved?.did || "",
         handle: resolved?.handle || "",
         displayName: profileRecord?.value?.displayName || "",
-        avatar: getAvatarUrl(profileRecord, resolved?.did) || "",
+        avatar: getAvatarUrl(profileRecord, resolved?.did, imgcdn) || "",
         viewer: undefined,
         labels: profileRecord?.labels || undefined,
         verification: undefined,
@@ -762,6 +764,7 @@ export function UniversalPostRendererRawRecordShim({
       repliesCount,
       repostsCount,
       likesCount,
+      imgcdn
     ]
   );
 
@@ -886,7 +889,7 @@ export function MdiCommentOutline(props: SVGProps<SVGSVGElement>) {
       {...props}
     >
       <path
-        fill="oklch(0.704 0.05 28)"
+        fill="var(--color-gray-400)"
         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"
       ></path>
     </svg>
@@ -903,7 +906,7 @@ export function MdiRepeat(props: SVGProps<SVGSVGElement>) {
       {...props}
     >
       <path
-        fill="oklch(0.704 0.05 28)"
+        fill="var(--color-gray-400)"
         d="M17 17H7v-3l-4 4l4 4v-3h12v-6h-2M7 7h10v3l4-4l-4-4v3H5v6h2z"
       ></path>
     </svg>
@@ -954,7 +957,7 @@ export function MdiCardsHeartOutline(props: SVGProps<SVGSVGElement>) {
       {...props}
     >
       <path
-        fill="oklch(0.704 0.05 28)"
+        fill="var(--color-gray-400)"
         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"
       ></path>
     </svg>
@@ -971,7 +974,7 @@ export function MdiShareVariant(props: SVGProps<SVGSVGElement>) {
       {...props}
     >
       <path
-        fill="oklch(0.704 0.05 28)"
+        fill="var(--color-gray-400)"
         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"
       ></path>
     </svg>
@@ -988,7 +991,7 @@ export function MdiMoreHoriz(props: SVGProps<SVGSVGElement>) {
       {...props}
     >
       <path
-        fill="oklch(0.704 0.05 28)"
+        fill="var(--color-gray-400)"
         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"
       ></path>
     </svg>
@@ -1005,7 +1008,7 @@ export function MdiGlobe(props: SVGProps<SVGSVGElement>) {
       {...props}
     >
       <path
-        fill="oklch(0.704 0.05 28)"
+        fill="var(--color-gray-400)"
         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"
       ></path>
     </svg>
@@ -1039,7 +1042,7 @@ export function MdiReply(props: SVGProps<SVGSVGElement>) {
       {...props}
     >
       <path
-        fill="oklch(0.704 0.05 28)"
+        fill="var(--color-gray-400)"
         d="M10 9V5l-7 7l7 7v-4.1c5 0 8.5 1.6 11 5.1c-1-5-4-10-11-11"
       ></path>
     </svg>
@@ -1093,7 +1096,7 @@ export function MdiRepost(props: SVGProps<SVGSVGElement>) {
       {...props}
     >
       <path
-        fill="oklch(0.704 0.05 28)"
+        fill="var(--color-gray-400)"
         d="M17 17H7v-3l-4 4l4 4v-3h12v-6h-2M7 7h10v3l4-4l-4-4v3H5v6h2z"
       ></path>
     </svg>
@@ -1110,7 +1113,7 @@ export function MdiRepeatVariant(props: SVGProps<SVGSVGElement>) {
       {...props}
     >
       <path
-        fill="oklch(0.704 0.05 28)"
+        fill="var(--color-gray-400)"
         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"
       ></path>
     </svg>
diff --git a/src/routes/profile.$did/index.tsx b/src/routes/profile.$did/index.tsx
index 1b97ca3..bba0050 100644
--- a/src/routes/profile.$did/index.tsx
+++ b/src/routes/profile.$did/index.tsx
@@ -1,10 +1,12 @@
 import { useQueryClient } from "@tanstack/react-query";
 import { createFileRoute } from "@tanstack/react-router";
+import { useAtom } from "jotai";
 import React from "react";
 
 import { Header } from "~/components/Header";
 import { UniversalPostRendererATURILoader } from "~/components/UniversalPostRenderer";
 import { useAuth } from "~/providers/UnifiedAuthProvider";
+import { imgCDNAtom } from "~/utils/atoms";
 import { toggleFollow, useGetFollowState } from "~/utils/followState";
 import {
   useInfiniteQueryAuthorFeed,
@@ -66,16 +68,18 @@ function ProfileComponent() {
     () => postsData?.pages.flatMap((page) => page.records) ?? [],
     [postsData]
   );
+  
+  const [imgcdn] = useAtom(imgCDNAtom)
 
   function getAvatarUrl(p: typeof profile) {
     const link = p?.avatar?.ref?.["$link"];
     if (!link || !resolvedDid) return null;
-    return `https://cdn.bsky.app/img/avatar/plain/${resolvedDid}/${link}@jpeg`;
+    return `https://${imgcdn}/img/avatar/plain/${resolvedDid}/${link}@jpeg`;
   }
   function getBannerUrl(p: typeof profile) {
     const link = p?.banner?.ref?.["$link"];
     if (!link || !resolvedDid) return null;
-    return `https://cdn.bsky.app/img/banner/plain/${resolvedDid}/${link}@jpeg`;
+    return `https://${imgcdn}/img/banner/plain/${resolvedDid}/${link}@jpeg`;
   }
 
   const displayName =
diff --git a/src/routes/settings.tsx b/src/routes/settings.tsx
index 18eddb5..bc70673 100644
--- a/src/routes/settings.tsx
+++ b/src/routes/settings.tsx
@@ -6,8 +6,12 @@ import Login from "~/components/Login";
 import {
   constellationURLAtom,
   defaultconstellationURL,
+  defaultImgCDN,
   defaultslingshotURL,
+  defaultVideoCDN,
+  imgCDNAtom,
   slingshotURLAtom,
+  videoCDNAtom,
 } from "~/utils/atoms";
 
 export const Route = createFileRoute("/settings")({
@@ -27,7 +31,8 @@ export function Settings() {
           }
         }}
       />
-      <Login />
+      <div className="lg:hidden"><Login /></div>
+      <div className="h-4" />
       <TextInputSetting
         atom={constellationURLAtom}
         title={"Constellation"}
@@ -42,7 +47,21 @@ export function Settings() {
         description={"Customize the Slingshot instance to be used by Red Dwarf"}
         init={defaultslingshotURL}
       />
-      <span className="text-gray-500 dark:text-gray-400 py-4 px-6">please restart/refresh the app if changes arent applying correctly</span>
+      <TextInputSetting
+        atom={imgCDNAtom}
+        title={"Image CDN"}
+        description={
+          "Customize the Constellation instance to be used by Red Dwarf"
+        }
+        init={defaultImgCDN}
+      />
+      <TextInputSetting
+        atom={videoCDNAtom}
+        title={"Video CDN"}
+        description={"Customize the Slingshot instance to be used by Red Dwarf"}
+        init={defaultVideoCDN}
+      />
+      <p className="text-gray-500 dark:text-gray-400 py-4 px-6 text-sm">please restart/refresh the app if changes arent applying correctly</p>
     </>
   );
 }
@@ -60,8 +79,8 @@ export function TextInputSetting({
 }) {
   const [value, setValue] = useAtom(atom);
   return (
-    <div className="flex flex-col gap-2 p-4 rounded-2xl border border-gray-200 dark:border-gray-800 ">
-      <div>
+    <div className="flex flex-col gap-2 px-4 py-2">
+      {/* <div>
         {title && (
           <h3 className="text-sm font-medium text-gray-900 dark:text-gray-100">
             {title}
@@ -72,10 +91,14 @@ export function TextInputSetting({
             {description}
           </p>
         )}
-      </div>
+      </div> */}
 
       <div className="flex flex-row gap-2 items-center">
-        <input
+        <div className="m3input-field m3input-label m3input-border size-md flex-1">
+          <input type="text" placeholder=" " value={value} onChange={(e) => setValue(e.target.value)}/>
+          <label>{title}</label>
+        </div>
+        {/* <input
           type="text"
           value={value}
           onChange={(e) => setValue(e.target.value)}
@@ -83,10 +106,10 @@ export function TextInputSetting({
                      text-gray-900 dark:text-gray-100 placeholder:text-gray-500 dark:placeholder:text-gray-400 
                      focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600"
           placeholder="Enter value..."
-        />
+        /> */}
         <button
           onClick={() => setValue(init ?? "")}
-          className="px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-800 
+          className="px-6 py-2 h-12 rounded-full bg-gray-100 dark:bg-gray-800 
                      text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 transition"
         >
           Reset
@@ -94,4 +117,4 @@ export function TextInputSetting({
       </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/styles/app.css b/src/styles/app.css
index 3219cd1..a0184d5 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -105,4 +105,117 @@
 :root {
   --shadow-opacity: calc(1 - var(--is-top));
   --tw-shadow-header: 0 2px 8px hsl(0 0% 0% / calc(var(--shadow-opacity) * 0.15));
+}
+
+
+/* m3 input */
+:root {
+  --m3input-radius: 6px;
+  --m3input-border-width: .0625rem;
+  --m3input-font-size: 16px;
+  --m3input-transition: 150ms cubic-bezier(.2, .8, .2, 1);
+  /* light theme */
+  --m3input-bg: var(--color-gray-50);
+  --m3input-border-color: var(--color-gray-400);
+  --m3input-label-color: var(--color-gray-500);
+  --m3input-text-color: var(--color-gray-900);
+  --m3input-focus-color: var(--color-gray-600);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --m3input-bg: var(--color-gray-950);
+    --m3input-border-color: var(--color-gray-700);
+    --m3input-label-color: var(--color-gray-400);
+    --m3input-text-color: var(--color-gray-50);
+    --m3input-focus-color: var(--color-gray-400);
+  }
+}
+
+/* reset page *//*
+html,
+body {
+  background: var(--m3input-bg);
+  margin: 0;
+  padding: 1rem;
+  color: var(--m3input-text-color);
+  font-family: system-ui, sans-serif;
+  font-size: var(--m3input-font-size);
+}*/
+
+/* base wrapper */
+.m3input-field.m3input-label.m3input-border {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  /*max-width: 400px;*/
+}
+
+/* size variants */
+.m3input-field.size-sm {
+  --m3input-h: 40px;
+}
+
+.m3input-field.size-md {
+  --m3input-h: 48px;
+}
+
+.m3input-field.size-lg {
+  --m3input-h: 56px;
+}
+
+.m3input-field.size-xl {
+  --m3input-h: 64px;
+}
+
+.m3input-field.m3input-label.m3input-border:not(.size-sm):not(.size-md):not(.size-lg):not(.size-xl) {
+  --m3input-h: 48px;
+}
+
+/* outlined input */
+.m3input-field.m3input-label.m3input-border input {
+  width: 100%;
+  height: var(--m3input-h);
+  border: var(--m3input-border-width) solid var(--m3input-border-color);
+  border-radius: var(--m3input-radius);
+  background: var(--m3input-bg);
+  color: var(--m3input-text-color);
+  font-size: var(--m3input-font-size);
+  padding: 0 12px;
+  box-sizing: border-box;
+  outline: none;
+  transition: border-color var(--m3input-transition), box-shadow var(--m3input-transition);
+}
+
+/* focus ring */
+.m3input-field.m3input-label.m3input-border input:focus {
+  border-color: var(--m3input-focus-color);
+  /*box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus-color) 20%, transparent);*/
+}
+
+/* label */
+.m3input-field.m3input-label.m3input-border label {
+  position: absolute;
+  left: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: var(--m3input-bg);
+  padding: 0 .25em;
+  color: var(--m3input-label-color);
+  pointer-events: none;
+  transition: all var(--m3input-transition);
+}
+
+/* float on focus or when filled */
+.m3input-field.m3input-label.m3input-border input:focus+label,
+.m3input-field.m3input-label.m3input-border input:not(:placeholder-shown)+label {
+  top: 0;
+  transform: translateY(-50%) scale(.78);
+  left: 0;
+  color: var(--m3input-focus-color);
+}
+
+/* placeholder trick */
+.m3input-field.m3input-label.m3input-border input::placeholder {
+  color: transparent;
 }
\ No newline at end of file
diff --git a/src/utils/atoms.ts b/src/utils/atoms.ts
index 8ea22e9..9a123c1 100644
--- a/src/utils/atoms.ts
+++ b/src/utils/atoms.ts
@@ -31,6 +31,16 @@ export const slingshotURLAtom = atomWithStorage<string>(
   'slingshotURL',
   defaultslingshotURL
 )
+export const defaultImgCDN = 'cdn.bsky.app'
+export const imgCDNAtom = atomWithStorage<string>(
+  'imgcdnurl',
+  defaultImgCDN
+)
+export const defaultVideoCDN = 'video.bsky.app'
+export const videoCDNAtom = atomWithStorage<string>(
+  'videocdnurl',
+  defaultVideoCDN
+)
 
 export const isAtTopAtom = atom<boolean>(true);
 
diff --git a/src/utils/useHydrated.ts b/src/utils/useHydrated.ts
index be738b2..b2635d1 100644
--- a/src/utils/useHydrated.ts
+++ b/src/utils/useHydrated.ts
@@ -9,15 +9,14 @@ import {
   AppBskyFeedPost,
   AtUri,
 } from "@atproto/api";
+import { useAtom } from "jotai";
 import { useMemo } from "react";
 
-import { useQueryIdentity,useQueryPost, useQueryProfile } from "./useQuery";
+import { imgCDNAtom, videoCDNAtom } from "./atoms";
+import { useQueryIdentity, useQueryPost, useQueryProfile } from "./useQuery";
 
-type QueryResultData<T extends (...args: any) => any> = ReturnType<T> extends
-  | { data: infer D }
-  | undefined
-  ? D
-  : never;
+type QueryResultData<T extends (...args: any) => any> =
+  ReturnType<T> extends { data: infer D } | undefined ? D : never;
 
 function asTyped<T extends { $type: string }>(obj: T): $Typed<T> {
   return obj as $Typed<T>;
@@ -26,6 +25,7 @@ function asTyped<T extends { $type: string }>(obj: T): $Typed<T> {
 export function hydrateEmbedImages(
   embed: AppBskyEmbedImages.Main,
   did: string,
+  cdn: string
 ): $Typed<AppBskyEmbedImages.View> {
   return asTyped({
     $type: "app.bsky.embed.images#view" as const,
@@ -34,8 +34,8 @@ export function hydrateEmbedImages(
         const link = img.image.ref?.["$link"];
         if (!link) return null;
         return {
-          thumb: `https://cdn.bsky.app/img/feed_thumbnail/plain/${did}/${link}@jpeg`,
-          fullsize: `https://cdn.bsky.app/img/feed_fullsize/plain/${did}/${link}@jpeg`,
+          thumb: `https://${cdn}/img/feed_thumbnail/plain/${did}/${link}@jpeg`,
+          fullsize: `https://${cdn}/img/feed_fullsize/plain/${did}/${link}@jpeg`,
           alt: img.alt || "",
           aspectRatio: img.aspectRatio,
         };
@@ -47,6 +47,7 @@ export function hydrateEmbedImages(
 export function hydrateEmbedExternal(
   embed: AppBskyEmbedExternal.Main,
   did: string,
+  cdn: string
 ): $Typed<AppBskyEmbedExternal.View> {
   return asTyped({
     $type: "app.bsky.embed.external#view" as const,
@@ -55,7 +56,7 @@ export function hydrateEmbedExternal(
       title: embed.external.title,
       description: embed.external.description,
       thumb: embed.external.thumb?.ref?.$link
-        ? `https://cdn.bsky.app/img/feed_thumbnail/plain/${did}/${embed.external.thumb.ref.$link}@jpeg`
+        ? `https://${cdn}/img/feed_thumbnail/plain/${did}/${embed.external.thumb.ref.$link}@jpeg`
         : undefined,
     },
   });
@@ -64,12 +65,13 @@ export function hydrateEmbedExternal(
 export function hydrateEmbedVideo(
   embed: AppBskyEmbedVideo.Main,
   did: string,
+  videocdn: string
 ): $Typed<AppBskyEmbedVideo.View> {
   const videoLink = embed.video.ref.$link;
   return asTyped({
     $type: "app.bsky.embed.video#view" as const,
-    playlist: `https://video.bsky.app/watch/${did}/${videoLink}/playlist.m3u8`,
-    thumbnail: `https://video.bsky.app/watch/${did}/${videoLink}/thumbnail.jpg`,
+    playlist: `https://${videocdn}/watch/${did}/${videoLink}/playlist.m3u8`,
+    thumbnail: `https://${videocdn}/watch/${did}/${videoLink}/thumbnail.jpg`,
     aspectRatio: embed.aspectRatio,
     cid: videoLink,
   });
@@ -80,6 +82,7 @@ function hydrateEmbedRecord(
   quotedPost: QueryResultData<typeof useQueryPost>,
   quotedProfile: QueryResultData<typeof useQueryProfile>,
   quotedIdentity: QueryResultData<typeof useQueryIdentity>,
+  cdn: string
 ): $Typed<AppBskyEmbedRecord.View> | undefined {
   if (!quotedPost || !quotedProfile || !quotedIdentity) {
     return undefined;
@@ -91,7 +94,7 @@ function hydrateEmbedRecord(
     handle: quotedIdentity.handle,
     displayName: quotedProfile.value.displayName ?? quotedIdentity.handle,
     avatar: quotedProfile.value.avatar?.ref?.$link
-      ? `https://cdn.bsky.app/img/avatar/plain/${quotedIdentity.did}/${quotedProfile.value.avatar.ref.$link}@jpeg`
+      ? `https://${cdn}/img/avatar/plain/${quotedIdentity.did}/${quotedProfile.value.avatar.ref.$link}@jpeg`
       : undefined,
     viewer: {},
     labels: [],
@@ -122,12 +125,14 @@ function hydrateEmbedRecordWithMedia(
   quotedPost: QueryResultData<typeof useQueryPost>,
   quotedProfile: QueryResultData<typeof useQueryProfile>,
   quotedIdentity: QueryResultData<typeof useQueryIdentity>,
+  cdn: string
 ): $Typed<AppBskyEmbedRecordWithMedia.View> | undefined {
   const hydratedRecord = hydrateEmbedRecord(
     embed.record,
     quotedPost,
     quotedProfile,
     quotedIdentity,
+    cdn
   );
 
   if (!hydratedRecord) return undefined;
@@ -148,7 +153,7 @@ type HydratedEmbedView =
 
 export function useHydratedEmbed(
   embed: AppBskyFeedPost.Record["embed"],
-  postAuthorDid: string | undefined,
+  postAuthorDid: string | undefined
 ) {
   const recordInfo = useMemo(() => {
     if (AppBskyEmbedRecordWithMedia.isMain(embed)) {
@@ -181,28 +186,37 @@ export function useHydratedEmbed(
     error: profileError,
   } = useQueryProfile(profileUri);
 
+  const [imgcdn] = useAtom(imgCDNAtom);
+  const [videocdn] = useAtom(videoCDNAtom);
+
   const queryidentityresult = useQueryIdentity(quotedAuthorDid);
 
   const hydratedEmbed: HydratedEmbedView | undefined = (() => {
     if (!embed || !postAuthorDid) return undefined;
 
-    if (isRecordType && (!usequerypostresults?.data || !quotedProfile || !queryidentityresult?.data)) {
+    if (
+      isRecordType &&
+      (!usequerypostresults?.data ||
+        !quotedProfile ||
+        !queryidentityresult?.data)
+    ) {
       return undefined;
     }
 
     try {
       if (AppBskyEmbedImages.isMain(embed)) {
-        return hydrateEmbedImages(embed, postAuthorDid);
+        return hydrateEmbedImages(embed, postAuthorDid, imgcdn);
       } else if (AppBskyEmbedExternal.isMain(embed)) {
-        return hydrateEmbedExternal(embed, postAuthorDid);
+        return hydrateEmbedExternal(embed, postAuthorDid, imgcdn);
       } else if (AppBskyEmbedVideo.isMain(embed)) {
-        return hydrateEmbedVideo(embed, postAuthorDid);
+        return hydrateEmbedVideo(embed, postAuthorDid, videocdn);
       } else if (AppBskyEmbedRecord.isMain(embed)) {
         return hydrateEmbedRecord(
           embed,
           usequerypostresults?.data,
           quotedProfile,
           queryidentityresult?.data,
+          imgcdn
         );
       } else if (AppBskyEmbedRecordWithMedia.isMain(embed)) {
         let hydratedMedia:
@@ -212,11 +226,23 @@ export function useHydratedEmbed(
           | undefined;
 
         if (AppBskyEmbedImages.isMain(embed.media)) {
-          hydratedMedia = hydrateEmbedImages(embed.media, postAuthorDid);
+          hydratedMedia = hydrateEmbedImages(
+            embed.media,
+            postAuthorDid,
+            imgcdn
+          );
         } else if (AppBskyEmbedExternal.isMain(embed.media)) {
-          hydratedMedia = hydrateEmbedExternal(embed.media, postAuthorDid);
+          hydratedMedia = hydrateEmbedExternal(
+            embed.media,
+            postAuthorDid,
+            imgcdn
+          );
         } else if (AppBskyEmbedVideo.isMain(embed.media)) {
-          hydratedMedia = hydrateEmbedVideo(embed.media, postAuthorDid);
+          hydratedMedia = hydrateEmbedVideo(
+            embed.media,
+            postAuthorDid,
+            videocdn
+          );
         }
 
         if (hydratedMedia) {
@@ -226,6 +252,7 @@ export function useHydratedEmbed(
             usequerypostresults?.data,
             quotedProfile,
             queryidentityresult?.data,
+            imgcdn
           );
         }
       }
@@ -236,10 +263,13 @@ export function useHydratedEmbed(
   })();
 
   const isLoading = isRecordType
-    ? usequerypostresults?.isLoading || isLoadingProfile || queryidentityresult?.isLoading
+    ? usequerypostresults?.isLoading ||
+      isLoadingProfile ||
+      queryidentityresult?.isLoading
     : false;
 
-  const error = usequerypostresults?.error || profileError || queryidentityresult?.error;
+  const error =
+    usequerypostresults?.error || profileError || queryidentityresult?.error;
 
   return { data: hydratedEmbed, isLoading, error };
-}
\ No newline at end of file
+}
-- 
2.51.2