Fix animal identity resetting

.changeset/fix_animal_idenity_reset.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Fix resetting animal identity

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<AnimalCosmeticsPro
   const mx = useMatrixClient();
   const setGlobalProfiles = useSetAtom(profilesCacheAtom);
   const [renderAnimals, setRenderAnimals] = useSetting(settingsAtom, 'renderAnimals');
+  const [, setAnimalKind] = useSetting(settingsAtom, 'animalKind');
 
   const isAnimal = profile.isAnimal;
   const hasAnimal = profile.hasAnimal;
@@ -104,6 +110,7 @@ export function AnimalCosmetics({ profile, userId }: Readonly<AnimalCosmeticsPro
           prefix.MATRIX_SABLE_UNSTABLE_ANIMAL_IDENTITY_IS_ANIMAL_PROPERTY_NAME,
           'cat'
         );
+        setAnimalKind('cat');
       }
       const hasCats = profile.hasCats;
       if (typeof hasCats === 'boolean') {
@@ -118,7 +125,7 @@ export function AnimalCosmetics({ profile, userId }: Readonly<AnimalCosmeticsPro
       }
     };
     asyncClean();
-  }, [handleSaveField, profile.hasCats, profile.isCat]);
+  }, [handleSaveField, profile, setAnimalKind]);
 
   return (
     <Box direction="Column" gap="100">
@@ -139,18 +146,20 @@ export function AnimalCosmetics({ profile, userId }: Readonly<AnimalCosmeticsPro
           after={
             <FreeInput
               initialValue={isAnimal}
-              onSave={(newValue) =>
+              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..."
             />
           }

src/app/features/settings/cosmetics/Themes.tsx

@@ -880,7 +880,7 @@ export function Appearance({
 
             <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
               <SettingTile
-                title="Show Easter Eggs"
+                title="Allow Whimsy"
                 focusId="show-easter-eggs"
                 description="Lets the interface keep a little mischief turned on."
                 after={

src/app/pages/client/ClientInitStorageAtom.tsx

@@ -11,6 +11,7 @@ import { makeOpenedSidebarFolderAtom } from '$state/openedSidebarFolder';
 import { OpenedSidebarFolderProvider } from '$state/hooks/openedSidebarFolder';
 import { makeCallPreferencesAtom } from '$state/callPreferences';
 import { CallPreferencesProvider } from '$state/hooks/callPreferences';
+import { useSyncAnimalKind } from '$state/useSyncAnimalKind';
 
 type ClientInitStorageAtomProps = {
   children: ReactNode;
@@ -19,6 +20,9 @@ export function ClientInitStorageAtom({ children }: ClientInitStorageAtomProps)
   const mx = useMatrixClient();
   const userId = mx.getUserId()!;
 
+  // could probably be put somewhere else, doesnt affect the execution time of the program here :shrug:
+  useSyncAnimalKind(userId);
+
   const closedNavCategoriesAtom = useMemo(() => makeClosedNavCategoriesAtom(userId), [userId]);
 
   const closedLobbyCategoriesAtom = useMemo(() => makeClosedLobbyCategoriesAtom(userId), [userId]);

src/app/pages/client/ClientRoot.tsx

@@ -53,18 +53,23 @@ 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');
 
 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 (
     <SplashScreen>
       <Box direction="Column" grow="Yes" alignItems="Center" justifyContent="Center" gap="400">
         <Spinner variant="Secondary" size="600" />
-        <Text>Petting cats</Text>
+        <Text>{`Petting ${showEasterEggs && animalKind ? animalKind : 'cats'}`}</Text>
       </Box>
     </SplashScreen>
   );

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,

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]);
+};