make pubkey color setting sync

src/components/user/user-avatar.tsx

@@ -76,7 +76,7 @@ export type MetadataAvatarProps = Omit<AvatarProps, "src"> & {
 };
 export const MetadataAvatar = forwardRef<HTMLDivElement, MetadataAvatarProps>(
   ({ pubkey, metadata, noProxy, children, square = true, ...props }, ref) => {
-    const { imageProxy, proxyUserMedia, hideUsernames } = useAppSettings();
+    const { imageProxy, proxyUserMedia, hideUsernames, showPubkeyColor } = useAppSettings();
     const account = useCurrentAccount();
     const picture = useMemo(() => {
       if (hideUsernames && pubkey && pubkey !== account?.pubkey) return undefined;
@@ -93,7 +93,6 @@ export const MetadataAvatar = forwardRef<HTMLDivElement, MetadataAvatarProps>(
       }
     }, [metadata?.picture, imageProxy, proxyUserMedia, hideUsernames, account]);
 
-    const showPubkeyColor = useSubject(localSettings.showPubkeyColor);
     const color = pubkey ? "#" + pubkey.slice(0, 6) : undefined;
 
     const showColor = showPubkeyColor === "avatar" && color !== undefined && props.size !== "xs";

src/components/user/user-link.tsx

@@ -18,9 +18,7 @@ export type UserLinkProps = LinkProps & {
 export default function UserLink({ pubkey, showAt, tab, ...props }: UserLinkProps) {
   const metadata = useUserMetadata(pubkey);
   const account = useCurrentAccount();
-  const { hideUsernames, removeEmojisInUsernames } = useAppSettings();
-
-  const showPubkeyColor = useSubject(localSettings.showPubkeyColor);
+  const { hideUsernames, removeEmojisInUsernames, showPubkeyColor } = useAppSettings();
   const color = "#" + pubkey.slice(0, 6);
 
   return (

src/services/local-settings.ts

@@ -9,9 +9,6 @@ import {
 } from "../classes/local-settings/types";
 import { LocalStorageEntry } from "../classes/local-settings/entry";
 
-// display
-const showPubkeyColor = new LocalStorageEntry("show-pubkey-color", "avatar"); // avatar, underline, none
-
 // local relay
 const idbMaxEvents = new NumberLocalStorageEntry("nostr-idb-max-events", 10_000);
 const wasmPersistForDays = new NullableNumberLocalStorageEntry("wasm-relay-oldest-event", 365);
@@ -54,7 +51,6 @@ const addClientTag = new BooleanLocalStorageEntry("add-client-tag", ENABLE_CLIEN
 const verifyEventMethod = new LocalStorageEntry("verify-event-method", "wasm"); // wasm, internal, none
 
 const localSettings = {
-  showPubkeyColor,
   idbMaxEvents,
   wasmPersistForDays,
   enableNoteThreadDrawer,

src/services/settings/migrations.ts

@@ -41,44 +41,56 @@ export type AppSettingsV8 = Omit<AppSettingsV7, "version"> & {
 };
 export type AppSettingsV9 = Omit<AppSettingsV8, "version"> & { version: 9; removeEmojisInUsernames: boolean };
 
-export type AppSettings = AppSettingsV9;
+export type AppSettingsV10 = Omit<AppSettingsV9, "version" | "defaultRelays"> & {
+  version: 10;
+  showPubkeyColor: "none" | "avatar" | "underline";
+};
+
+export type AppSettings = AppSettingsV10;
 
 export const defaultSettings: AppSettings = {
-  version: 9,
+  version: 10,
+
+  // display
   theme: "default",
   colorMode: "system",
-  defaultRelays: ["wss://relay.damus.io", "wss://nostr.wine", "wss://nos.lol", "wss://welcome.nostr.wine"],
+  primaryColor: "#8DB600",
   maxPageWidth: "none",
+  showPubkeyColor: "avatar",
   blurImages: true,
   hideUsernames: false,
   removeEmojisInUsernames: false,
   autoShowMedia: true,
-  proxyUserMedia: false,
+  showContentWarning: true,
   loadOpenGraphData: true,
-  showReactions: true,
   /** @deprecated */
   showSignatureVerification: false,
-  noteDifficulty: null,
 
+  // posting
+  noteDifficulty: null,
+  proxyUserMedia: false,
+
+  // performance
+  showReactions: true,
   autoDecryptDMs: false,
 
   quickReactions: ["🤙", "❤️", "🤣", "😍", "🔥"],
   mediaUploadService: "nostr.build",
 
+  // lightning
   autoPayWithWebLN: true,
   customZapAmounts: "50,200,500,1000,2000,5000",
 
-  primaryColor: "#8DB600",
+  // privacy
   imageProxy: "",
-  corsProxy: "", //"https://corsproxy.io/?<encoded_url>",
-  showContentWarning: true,
+  corsProxy: "",
   twitterRedirect: undefined,
   redditRedirect: undefined,
   youtubeRedirect: undefined,
 };
 
 export function upgradeSettings(settings: { version: number }): AppSettings | null {
-  return { ...defaultSettings, ...settings, version: 9 };
+  return { ...defaultSettings, ...settings, version: 10 };
 }
 
 export function parseAppSettings(event: NostrEvent): AppSettings {

src/views/settings/display/index.tsx

@@ -23,7 +23,6 @@ export default function DisplaySettings() {
 
   const hideZapBubbles = useSubject(localSettings.hideZapBubbles);
   const enableNoteDrawer = useSubject(localSettings.enableNoteThreadDrawer);
-  const showPubkeyColor = useSubject(localSettings.showPubkeyColor);
 
   return (
     <VerticalPageLayout flex={1}>
@@ -74,12 +73,7 @@ export default function DisplaySettings() {
           <FormLabel htmlFor="maxPageWidth" mb="0">
             Show user pubkey key color
           </FormLabel>
-          <Select
-            id="maxPageWidth"
-            maxW="sm"
-            value={showPubkeyColor}
-            onChange={(e) => localSettings.showPubkeyColor.next(e.target.value)}
-          >
+          <Select id="maxPageWidth" maxW="sm" {...register("showPubkeyColor")}>
             <option value="none">None</option>
             <option value="avatar">Avatar</option>
             <option value="underline">Underline</option>