From 0f07c886d0d4e54cf8c873a599e7d3b0a24d0470 Mon Sep 17 00:00:00 2001
From: Samir Vimercati <samir.vimercati@knobs.it>
Date: Thu, 3 Feb 2022 12:52:17 +0100
Subject: [PATCH] feat(ui): clicking on the user status avatar or user
 quickProfile avatar shows profile modal

---
 .../QuickProfile/QuickProfile.html             | 14 ++++++++------
 .../QuickProfile/QuickProfile.less             |  4 ++++
 .../QuickProfile/QuickProfile.vue              | 18 ++++++++++++++++++
 .../views/navigation/mobile/nav/Nav.html       |  2 +-
 .../navigation/sidebar/status/Status.html      | 10 ++++++----
 .../navigation/sidebar/status/Status.less      |  1 +
 .../views/navigation/sidebar/status/Status.vue |  8 ++++++++
 .../views/navigation/slimbar/Slimbar.html      |  2 +-
 components/views/settings/Sidebar.vue          |  2 +-
 components/views/settings/modal/Modal.vue      |  6 +++---
 store/ui/__snapshots__/state.test.ts.snap      |  1 +
 store/ui/actions.ts                            |  2 +-
 store/ui/mutations.ts                          |  8 +++++++-
 store/ui/state.ts                              |  1 +
 store/ui/types.ts                              |  1 +
 15 files changed, 62 insertions(+), 18 deletions(-)

diff --git a/components/interactables/QuickProfile/QuickProfile.html b/components/interactables/QuickProfile/QuickProfile.html
index e07b13bc69..5a79c3b1fa 100644
--- a/components/interactables/QuickProfile/QuickProfile.html
+++ b/components/interactables/QuickProfile/QuickProfile.html
@@ -8,12 +8,14 @@
     <InteractablesClose :action="close" />
   </div>
   <div class="header">
-    <UiCircle
-      :type="src ? 'image' : 'random'"
-      :seed="user.address"
-      :size="45"
-      :source="src"
-    />
+    <div class="avatar-wrapper" @click="openProfile">
+      <UiCircle
+        :type="src ? 'image' : 'random'"
+        :seed="user.address"
+        :size="45"
+        :source="src"
+      />
+    </div>
   </div>
   <TypographyTitle :text="user.name" :size="6" />
   <TypographyText
diff --git a/components/interactables/QuickProfile/QuickProfile.less b/components/interactables/QuickProfile/QuickProfile.less
index 5184afbb8f..dffc947375 100644
--- a/components/interactables/QuickProfile/QuickProfile.less
+++ b/components/interactables/QuickProfile/QuickProfile.less
@@ -9,6 +9,10 @@
     height: 3rem;
     margin: -@normal-spacing -@normal-spacing calc(@normal-spacing + 20px) -@normal-spacing;
     position: relative;
+
+    .avatar-wrapper {
+      cursor: pointer;
+    }
   }
   .action {
     position: absolute;
diff --git a/components/interactables/QuickProfile/QuickProfile.vue b/components/interactables/QuickProfile/QuickProfile.vue
index 337ed36630..8a227df813 100644
--- a/components/interactables/QuickProfile/QuickProfile.vue
+++ b/components/interactables/QuickProfile/QuickProfile.vue
@@ -91,6 +91,24 @@ export default Vue.extend({
       })
       this.close()
     },
+    openProfile() {
+      if (this.user) {
+        const isMe = this.user.address === this.$store.state.accounts.active
+
+        if (isMe) {
+          this.$store.commit('ui/toggleSettings', {
+            show: true,
+            defaultRoute: 'profile',
+          })
+        } else {
+          this.$store.commit('ui/toggleModal', {
+            name: 'userProfile',
+            state: true,
+          })
+          this.$store.commit('ui/setUserProfile', this.user)
+        }
+      }
+    },
   },
 })
 </script>
diff --git a/components/views/navigation/mobile/nav/Nav.html b/components/views/navigation/mobile/nav/Nav.html
index 9e9bee4b05..60805652cf 100644
--- a/components/views/navigation/mobile/nav/Nav.html
+++ b/components/views/navigation/mobile/nav/Nav.html
@@ -17,7 +17,7 @@
   <div :class="`${$route.path.includes('/settings') ? 'active' : ''}`">
     <settings-icon
       size="1x"
-      v-on:click="$store.commit('ui/toggleSettings', true)"
+      v-on:click="$store.commit('ui/toggleSettings', { show: true })"
     />
   </div>
 </div>
diff --git a/components/views/navigation/sidebar/status/Status.html b/components/views/navigation/sidebar/status/Status.html
index fd4ef4adaf..b467cc98d1 100644
--- a/components/views/navigation/sidebar/status/Status.html
+++ b/components/views/navigation/sidebar/status/Status.html
@@ -1,8 +1,10 @@
 <div id="status">
-  <UiUserState
-    :user="{address: accounts.active, state: accounts.details.state}"
-    :src="src"
-  />
+  <div @click="openProfile">
+    <UiUserState
+      :user="{address: accounts.active, state: accounts.details.state}"
+      :src="src"
+    />
+  </div>
   <div
     class="user-info has-tooltip has-tooltip-top has-tooltip-primary"
     v-on:click="$toast.show($t('ui.copied'))"
diff --git a/components/views/navigation/sidebar/status/Status.less b/components/views/navigation/sidebar/status/Status.less
index 675090a9a3..d8ecf299e0 100644
--- a/components/views/navigation/sidebar/status/Status.less
+++ b/components/views/navigation/sidebar/status/Status.less
@@ -1,5 +1,6 @@
 #status {
   display: flex;
+  cursor: pointer;
 
   .circle {
     align-self: center;
diff --git a/components/views/navigation/sidebar/status/Status.vue b/components/views/navigation/sidebar/status/Status.vue
index 7b27d92fcd..c4d43d1970 100644
--- a/components/views/navigation/sidebar/status/Status.vue
+++ b/components/views/navigation/sidebar/status/Status.vue
@@ -12,6 +12,14 @@ export default Vue.extend({
       return hash ? `${this.$Config.textile.browser}/ipfs/${hash}` : ''
     },
   },
+  methods: {
+    openProfile() {
+      this.$store.commit('ui/toggleSettings', {
+        show: true,
+        defaultRoute: 'profile',
+      })
+    },
+  },
 })
 </script>
 
diff --git a/components/views/navigation/slimbar/Slimbar.html b/components/views/navigation/slimbar/Slimbar.html
index 2469c972c3..bc75c06253 100644
--- a/components/views/navigation/slimbar/Slimbar.html
+++ b/components/views/navigation/slimbar/Slimbar.html
@@ -75,7 +75,7 @@
     <div
       class="circle-group has-tooltip-right has-tooltip-primary"
       :data-tooltip="$t('pages.settings.settings')"
-      v-on:click="$store.commit('ui/toggleSettings', true)"
+      v-on:click="$store.commit('ui/toggleSettings', { show: true })"
     >
       <UiCircle type="icon" :size="40">
         <settings-icon size="0.75x" />
diff --git a/components/views/settings/Sidebar.vue b/components/views/settings/Sidebar.vue
index 348b79f670..744be4ae25 100644
--- a/components/views/settings/Sidebar.vue
+++ b/components/views/settings/Sidebar.vue
@@ -32,7 +32,7 @@ export default Vue.extend({
   },
   data() {
     return {
-      route: 'personalize',
+      route: this.$store.state.ui.settingsDefaultRoute,
       sidebarLayout: [
         {
           title: 'General',
diff --git a/components/views/settings/modal/Modal.vue b/components/views/settings/modal/Modal.vue
index 9581d0b042..75dfc26802 100644
--- a/components/views/settings/modal/Modal.vue
+++ b/components/views/settings/modal/Modal.vue
@@ -18,13 +18,13 @@ export default Vue.extend({
   },
   data() {
     return {
-      page: 'personalize',
+      page: this.$store.state.ui.settingsDefaultRoute,
       settingSwiperOption: {
         initialSlide: 0,
         resistanceRatio: 0,
         slidesPerView: 'auto',
         noSwiping: !this.$device.isMobile,
-        allowTouchMove: !!this.$device.isMobile,
+        allowTouchMove: this.$device.isMobile,
       },
     }
   },
@@ -76,7 +76,7 @@ export default Vue.extend({
      * @example
      */
     closeModal() {
-      this.$store.commit('ui/toggleSettings', false)
+      this.$store.commit('ui/toggleSettings', { show: false })
     },
   },
 })
diff --git a/store/ui/__snapshots__/state.test.ts.snap b/store/ui/__snapshots__/state.test.ts.snap
index f3706fbe14..8deaa6e027 100644
--- a/store/ui/__snapshots__/state.test.ts.snap
+++ b/store/ui/__snapshots__/state.test.ts.snap
@@ -73,6 +73,7 @@ Object {
     "messageID": null,
     "status": false,
   },
+  "settingsDefaultRoute": "personalize",
   "settingsSideBar": true,
   "showPinned": false,
   "showSearchResult": false,
diff --git a/store/ui/actions.ts b/store/ui/actions.ts
index 48c7c88151..e034cc1699 100644
--- a/store/ui/actions.ts
+++ b/store/ui/actions.ts
@@ -36,7 +36,7 @@ export default {
    * @example Mousetrap.bind('ctrl+s', dispatch('audio/toggleMute') )
    */
   openSettings({ commit, state }: any) {
-    commit('toggleSettings', !state.showSettings)
+    commit('toggleSettings', { show: !state.showSettings })
   },
   /**
    * @method activateKeybinds
diff --git a/store/ui/mutations.ts b/store/ui/mutations.ts
index d88dfea35a..017a883903 100644
--- a/store/ui/mutations.ts
+++ b/store/ui/mutations.ts
@@ -63,8 +63,14 @@ export default {
       route: options.route || 'emotes',
     }
   },
-  toggleSettings(state: UIState, show: boolean) {
+  toggleSettings(
+    state: UIState,
+    options: { show: boolean; defaultRoute?: string },
+  ) {
+    const { show, defaultRoute } = options
+
     state.showSettings = show
+    state.settingsDefaultRoute = defaultRoute || 'personalize'
   },
   toggleSettingsSidebar(state: UIState, show: boolean) {
     state.settingsSideBar = show
diff --git a/store/ui/state.ts b/store/ui/state.ts
index 2bba6099e7..0ce6850220 100644
--- a/store/ui/state.ts
+++ b/store/ui/state.ts
@@ -7,6 +7,7 @@ const InitialUIState = (): UIState => ({
   showSearchResult: false,
   showSettings: false,
   settingsSideBar: true,
+  settingsDefaultRoute: 'personalize',
   quickProfile: false,
   userProfile: {},
   contextMenuValues: [],
diff --git a/store/ui/types.ts b/store/ui/types.ts
index edf7734157..00c4012b7a 100644
--- a/store/ui/types.ts
+++ b/store/ui/types.ts
@@ -132,6 +132,7 @@ export interface UIState {
   quickProfilePosition: object
   showSettings: boolean
   settingsSideBar: boolean
+  settingsDefaultRoute: string
   showSidebarUsers: boolean
   showSearchResult: boolean
   showSidebar: boolean