update our top left avatar on avatar changes

when our primary device updates the avatar, we wait for a sync message
to know about this update.
Once this message comes in, it updates the avatar on the conversation,
but nothing refresh the ActionPanel component.

This commit makes sure we listen for changes on our conversation to
trigger this refresh.

ts/components/EditProfileDialog.tsx

@@ -337,7 +337,7 @@ export class EditProfileDialog extends React.Component<Props, State> {
         setProfileName: this.state.profileName,
       },
       () => {
-        // Update settinngs in dialog complete;
+        // Update settings in dialog complete;
         // now callback to reloadactions panel avatar
         this.props.callback(this.state.avatar);
       }

ts/components/session/ActionsPanel.tsx

@@ -42,6 +42,16 @@ export class ActionsPanel extends React.Component<Props, State> {
         this.setState({
           avatarPath: conversation.getAvatarPath(),
         });
+        // When our primary device updates its avatar, we will need for a message sync to know about that.
+        // Once we get the avatar update, we need to refresh this react component.
+        // So we listen to changes on our profile avatar and use the updated avatarPath (done on message received).
+        conversation.on('change', () => {
+          if (conversation.changed?.profileAvatar) {
+            this.setState({
+              avatarPath: conversation.getAvatarPath(),
+            });
+          }
+        });
       }
     );
   }