Conv

web/apps/photos/src/components/PhotoViewer/FileInfo/index.tsx

@@ -23,6 +23,7 @@ import {
     confirmDisableMapsDialogAttributes,
     confirmEnableMapsDialogAttributes,
 } from "@/new/photos/components/utils/dialog";
+import { useSettingsSnapshot } from "@/new/photos/components/utils/use-snapshot";
 import { fileInfoDrawerZIndex } from "@/new/photos/components/utils/z-index";
 import { tagNumericValue, type RawExifTags } from "@/new/photos/services/exif";
 import {
@@ -30,11 +31,7 @@ import {
     isMLEnabled,
     type AnnotatedFaceID,
 } from "@/new/photos/services/ml";
-import {
-    settingsSnapshot,
-    settingsSubscribe,
-    updateMapEnabled,
-} from "@/new/photos/services/settings";
+import { updateMapEnabled } from "@/new/photos/services/settings";
 import { AppContext } from "@/new/photos/types/context";
 import { formattedByteSize } from "@/new/photos/utils/units";
 import CopyButton from "@ente/shared/components/CodeBlock/CopyButton";
@@ -63,13 +60,7 @@ import {
 import LinkButton from "components/pages/gallery/LinkButton";
 import { t } from "i18next";
 import { GalleryContext } from "pages/gallery";
-import React, {
-    useContext,
-    useEffect,
-    useMemo,
-    useState,
-    useSyncExternalStore,
-} from "react";
+import React, { useContext, useEffect, useMemo, useState } from "react";
 import { changeFileName, updateExistingFilePubMetadata } from "utils/file";
 import { PublicCollectionGalleryContext } from "utils/publicCollectionGallery";
 import { FileNameEditDialog } from "./FileNameEditDialog";
@@ -113,10 +104,7 @@ export const FileInfo: React.FC<FileInfoProps> = ({
     closePhotoViewer,
     onSelectPerson,
 }) => {
-    const { mapEnabled } = useSyncExternalStore(
-        settingsSubscribe,
-        settingsSnapshot,
-    );
+    const { mapEnabled } = useSettingsSnapshot();
 
     const { showMiniDialog } = useContext(AppContext);
     const galleryContext = useContext(GalleryContext);

web/apps/photos/src/components/Sidebar/Preferences.tsx

@@ -16,10 +16,9 @@ import {
     confirmDisableMapsDialogAttributes,
     confirmEnableMapsDialogAttributes,
 } from "@/new/photos/components/utils/dialog";
+import { useSettingsSnapshot } from "@/new/photos/components/utils/use-snapshot";
 import { isMLSupported } from "@/new/photos/services/ml";
 import {
-    settingsSnapshot,
-    settingsSubscribe,
     syncSettings,
     updateCFProxyDisabledPreference,
     updateMapEnabled,
@@ -31,7 +30,7 @@ import ScienceIcon from "@mui/icons-material/Science";
 import { Box, Stack } from "@mui/material";
 import DropdownInput from "components/DropdownInput";
 import { t } from "i18next";
-import React, { useCallback, useEffect, useSyncExternalStore } from "react";
+import React, { useCallback, useEffect } from "react";
 
 export const Preferences: React.FC<NestedSidebarDrawerVisibilityProps> = ({
     open,
@@ -174,10 +173,7 @@ export const MapSettings: React.FC<NestedSidebarDrawerVisibilityProps> = ({
 }) => {
     const { showMiniDialog } = useAppContext();
 
-    const { mapEnabled } = useSyncExternalStore(
-        settingsSubscribe,
-        settingsSnapshot,
-    );
+    const { mapEnabled } = useSettingsSnapshot();
 
     const confirmToggle = useCallback(
         () =>
@@ -230,10 +226,7 @@ export const AdvancedSettings: React.FC<NestedSidebarDrawerVisibilityProps> = ({
     onClose,
     onRootClose,
 }) => {
-    const { cfUploadProxyDisabled } = useSyncExternalStore(
-        settingsSubscribe,
-        settingsSnapshot,
-    );
+    const { cfUploadProxyDisabled } = useSettingsSnapshot();
 
     const handleRootClose = () => {
         onClose();

web/packages/new/photos/components/utils/use-snapshot.ts

@@ -5,6 +5,22 @@ import {
     peopleStateSnapshot,
     peopleStateSubscribe,
 } from "../../services/ml";
+import { settingsSnapshot, settingsSubscribe } from "../../services/settings";
+import { userDetailsSnapshot, userDetailsSubscribe } from "../../services/user";
+
+/**
+ * A convenience hook that returns {@link settingsSnapshot}, and also
+ * subscribes to updates.
+ */
+export const useSettingsSnapshot = () =>
+    useSyncExternalStore(settingsSubscribe, settingsSnapshot);
+
+/**
+ * A convenience hook that returns {@link userDetailsSnapshot}, and also
+ * subscribes to updates.
+ */
+export const useUserDetailsSnapshot = () =>
+    useSyncExternalStore(userDetailsSubscribe, userDetailsSnapshot);
 
 /**
  * A convenience hook that returns {@link mlStatusSnapshot}, and also subscribes