diff --git a/.changeset/fix_animal_idenity_reset.md b/.changeset/fix_animal_idenity_reset.md new file mode 100644 index 000000000..06514470a --- /dev/null +++ b/.changeset/fix_animal_idenity_reset.md @@ -0,0 +1,5 @@ +--- +default: patch +--- + +Fix resetting animal identity diff --git a/src/app/features/settings/account/AnimalCosmetics.tsx b/src/app/features/settings/account/AnimalCosmetics.tsx index 93a0c58ee..e9146f3f1 100644 --- a/src/app/features/settings/account/AnimalCosmetics.tsx +++ b/src/app/features/settings/account/AnimalCosmetics.tsx @@ -23,7 +23,9 @@ type inputProps = { function FreeInput({ initialValue: current, onSave, onReset, disabled, placeholder }: inputProps) { const [val, setVal] = useState(current); - useEffect(() => setVal(current), [current]); + useEffect(() => { + setVal(current ?? ''); + }, [current]); const handleSave = () => { if (val === current) return; @@ -54,7 +56,10 @@ function FreeInput({ initialValue: current, onSave, onReset, disabled, placehold size="300" variant="Critical" fill="None" - onClick={onReset} + onClick={() => { + onReset(); + setVal(''); + }} radii="300" title="Reset" disabled={disabled} @@ -75,6 +80,7 @@ export function AnimalCosmetics({ profile, userId }: Readonly @@ -139,18 +146,20 @@ export function AnimalCosmetics({ profile, userId }: Readonly + onSave={(newValue) => { handleSaveField( prefix.MATRIX_SABLE_UNSTABLE_ANIMAL_IDENTITY_IS_ANIMAL_PROPERTY_NAME, newValue - ) - } - onReset={() => + ); + if (typeof newValue === 'string') setAnimalKind(newValue); + }} + onReset={() => { handleSaveField( prefix.MATRIX_SABLE_UNSTABLE_ANIMAL_IDENTITY_IS_ANIMAL_PROPERTY_NAME, null - ) - } + ); + setAnimalKind(undefined); + }} placeholder="bunny..." /> } diff --git a/src/app/features/settings/cosmetics/Themes.tsx b/src/app/features/settings/cosmetics/Themes.tsx index 77e4da3b4..45fed9e55 100644 --- a/src/app/features/settings/cosmetics/Themes.tsx +++ b/src/app/features/settings/cosmetics/Themes.tsx @@ -880,7 +880,7 @@ export function Appearance({ makeClosedNavCategoriesAtom(userId), [userId]); const closedLobbyCategoriesAtom = useMemo(() => makeClosedLobbyCategoriesAtom(userId), [userId]); diff --git a/src/app/pages/client/ClientRoot.tsx b/src/app/pages/client/ClientRoot.tsx index 1c902d1da..3e1a6f63d 100644 --- a/src/app/pages/client/ClientRoot.tsx +++ b/src/app/pages/client/ClientRoot.tsx @@ -53,6 +53,8 @@ import { pushSessionToSW } from '../../../sw-session'; import { SyncStatus } from './SyncStatus'; import { SpecVersions } from './SpecVersions'; import { AutoDiscovery } from './AutoDiscovery'; +import { useSetting } from '$state/hooks/settings'; +import { settingsAtom } from '$state/settings'; const log = createLogger('ClientRoot'); @@ -60,11 +62,14 @@ const isClientReady = (syncState: string | null): boolean => syncState === 'PREPARED' || syncState === 'SYNCING' || syncState === 'CATCHUP'; function ClientRootLoading() { + const [showEasterEggs] = useSetting(settingsAtom, 'showEasterEggs'); + const [animalKind] = useSetting(settingsAtom, 'animalKind'); + return ( - Petting cats + {`Petting ${showEasterEggs && animalKind ? animalKind : 'cats'}`} ); diff --git a/src/app/state/settings.ts b/src/app/state/settings.ts index 437f5f884..d91834409 100644 --- a/src/app/state/settings.ts +++ b/src/app/state/settings.ts @@ -230,6 +230,7 @@ export interface Settings { // furry stuff renderAnimals: boolean; + animalKind: string | undefined; // theme catalog themeCatalogOnboardingDone: boolean; @@ -392,6 +393,7 @@ export const defaultSettings: Settings = { sendIndividualAttachmentAsCaption: true, // furry stuff renderAnimals: true, + animalKind: undefined, // theme catalog themeCatalogOnboardingDone: false, diff --git a/src/app/state/useSyncAnimalKind.ts b/src/app/state/useSyncAnimalKind.ts new file mode 100644 index 000000000..15720abda --- /dev/null +++ b/src/app/state/useSyncAnimalKind.ts @@ -0,0 +1,12 @@ +import { useUserProfile } from '$hooks/useUserProfile'; +import { useEffect } from 'react'; +import { useSetting } from './hooks/settings'; +import { settingsAtom } from './settings'; + +export const useSyncAnimalKind = (userId: string) => { + const profile = useUserProfile(userId); + const [animalKind, setAnimalKind] = useSetting(settingsAtom, 'animalKind'); + useEffect(() => { + if (profile.isAnimal !== animalKind) setAnimalKind(profile.isAnimal); + }, [setAnimalKind, profile.isAnimal, animalKind]); +};