customizable microcosm urls

src/components/Login.tsx

···
     onClick={onClick}
     className={`px-4 py-2 text-sm font-medium transition-colors rounded-full flex-1 ${
       active
-        ? "text-gray-950 dark:text-gray-200 border-gray-500 bg-gray-400 dark:bg-gray-500"
+        ? "text-gray-50 dark:text-gray-200 border-gray-500 bg-gray-400 dark:bg-gray-500"
         : "text-gray-600 dark:text-gray-300 hover:text-gray-700 dark:hover:text-gray-200"
     }`}
   >

src/routes/notifications.tsx

···
 import { createFileRoute } from "@tanstack/react-router";
+import { useAtom } from "jotai";
 import React, { useEffect, useRef,useState } from "react";
 
 import { useAuth } from "~/providers/UnifiedAuthProvider";
+import { constellationURLAtom } from "~/utils/atoms";
 
 const HANDLE_DID_CACHE_TIMEOUT = 60 * 60 * 1000; // 1 hour
 
···
     }
   }
 
+  const [constellationURL] = useAtom(constellationURLAtom)
+
   useEffect(() => {
     if (!did) return;
     setLoading(true);
     setError(null);
     const urls = [
-      `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`,
-      `https://constellation.microcosm.blue/links?target=${encodeURIComponent(did)}&collection=app.bsky.feed.post&path=.facets[].features[app.bsky.richtext.facet%23mention].did`,
-      `https://constellation.microcosm.blue/links?target=${encodeURIComponent(did)}&collection=app.bsky.graph.follow&path=.subject`,
+      `https://${constellationURL}/links?target=${encodeURIComponent(did)}&collection=app.bsky.feed.post&path=.facets[app.bsky.richtext.facet].features[app.bsky.richtext.facet%23mention].did`,
+      `https://${constellationURL}/links?target=${encodeURIComponent(did)}&collection=app.bsky.feed.post&path=.facets[].features[app.bsky.richtext.facet%23mention].did`,
+      `https://${constellationURL}/links?target=${encodeURIComponent(did)}&collection=app.bsky.graph.follow&path=.subject`,
     ];
     let ignore = false;
     Promise.all(

src/routes/settings.tsx

···
 import { createFileRoute } from "@tanstack/react-router";
+import { useAtom } from "jotai";
 
 import { Header } from "~/components/Header";
 import Login from "~/components/Login";
+import {
+  constellationURLAtom,
+  defaultconstellationURL,
+  defaultslingshotURL,
+  slingshotURLAtom,
+} from "~/utils/atoms";
 
 export const Route = createFileRoute("/settings")({
   component: Settings,
···
         }}
       />
       <Login />
+      <TextInputSetting
+        atom={constellationURLAtom}
+        title={"Constellation URL"}
+        description={
+          "customize the Constellation instance to be used by Red Dwarf"
+        }
+        init={defaultconstellationURL}
+      />
+      <TextInputSetting
+        atom={slingshotURLAtom}
+        title={"Slingshot URL"}
+        description={"customize the Slingshot instance to be used by Red Dwarf"}
+        init={defaultslingshotURL}
+      />
     </>
   );
 }
+
+export function TextInputSetting({
+  atom,
+  title,
+  description,
+  init,
+}: {
+  atom: typeof constellationURLAtom;
+  title?: string;
+  description?: string;
+  init?: string;
+}) {
+  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>
+        {title && (
+          <h3 className="text-sm font-medium text-gray-900 dark:text-gray-100">
+            {title}
+          </h3>
+        )}
+        {description && (
+          <p className="text-sm text-gray-500 dark:text-gray-400">
+            {description}
+          </p>
+        )}
+      </div>
+
+      <div className="flex flex-row gap-2 items-center">
+        <input
+          type="text"
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          className="flex-1 px-3 py-2 rounded-lg bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 
+                     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 
+                     text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 transition"
+        >
+          Reset
+        </button>
+      </div>
+    </div>
+  );
+}

src/utils/atoms.ts

···
   {}
 );
 
+export const defaultconstellationURL = 'constellation.microcosm.blue'
+export const constellationURLAtom = atomWithStorage<string>(
+  'constellationURL',
+  defaultconstellationURL
+)
+export const defaultslingshotURL = 'slingshot.microcosm.blue'
+export const slingshotURLAtom = atomWithStorage<string>(
+  'slingshotURL',
+  defaultslingshotURL
+)
+
 export const isAtTopAtom = atom<boolean>(true);
 
 type ComposerState =

src/utils/useQuery.ts

···
   useQuery,
   type UseQueryResult} from "@tanstack/react-query";
 
+import { constellationURLAtom, slingshotURLAtom, store } from "./atoms";
+
 export function constructIdentityQuery(didorhandle?: string) {
   return queryOptions({
     queryKey: ["identity", didorhandle],
     queryFn: async () => {
       if (!didorhandle) return undefined as undefined
+      const slingshoturl = store.get(slingshotURLAtom)
       const res = await fetch(
-        `https://slingshot.microcosm.blue/xrpc/com.bad-example.identity.resolveMiniDoc?identifier=${encodeURIComponent(didorhandle)}`
+        `https://${slingshoturl}/xrpc/com.bad-example.identity.resolveMiniDoc?identifier=${encodeURIComponent(didorhandle)}`
       );
       if (!res.ok) throw new Error("Failed to fetch post");
       try {
···
     queryKey: ["post", uri],
     queryFn: async () => {
       if (!uri) return undefined as undefined
+      const slingshoturl = store.get(slingshotURLAtom)
       const res = await fetch(
-        `https://slingshot.microcosm.blue/xrpc/com.bad-example.repo.getUriRecord?at_uri=${encodeURIComponent(uri)}`
+        `https://${slingshoturl}/xrpc/com.bad-example.repo.getUriRecord?at_uri=${encodeURIComponent(uri)}`
       );
       let data: any;
       try {
···
     queryKey: ["profile", uri],
     queryFn: async () => {
       if (!uri) return undefined as undefined
+      const slingshoturl = store.get(slingshotURLAtom)
       const res = await fetch(
-        `https://slingshot.microcosm.blue/xrpc/com.bad-example.repo.getUriRecord?at_uri=${encodeURIComponent(uri)}`
+        `https://${slingshoturl}/xrpc/com.bad-example.repo.getUriRecord?at_uri=${encodeURIComponent(uri)}`
       );
       let data: any;
       try {
···
       const path = query?.path
       const cursor = query.cursor
       const dids = query?.dids
+      const constellation = store.get(constellationURLAtom);
       const res = await fetch(
-        `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("") : ""}`
+        `https://${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("") : ""}`
       );
       if (!res.ok) throw new Error("Failed to fetch post");
       try {
···
     queryKey: ["arbitrary", uri],
     queryFn: async () => {
       if (!uri) return undefined as undefined
+      const slingshoturl = store.get(slingshotURLAtom)
       const res = await fetch(
-        `https://slingshot.microcosm.blue/xrpc/com.bad-example.repo.getUriRecord?at_uri=${encodeURIComponent(uri)}`
+        `https://${slingshoturl}/xrpc/com.bad-example.repo.getUriRecord?at_uri=${encodeURIComponent(uri)}`
       );
       let data: any;
       try {
···
   collection: string
   path: string
 }) {
-  const constellationHost = 'constellation.microcosm.blue'
+  const constellationHost = store.get(constellationURLAtom)
   console.log(
     'yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks',
     query,