Merge remote-tracking branch 'origin/develop' into navigation-update

* origin/develop:
  Update dependency opn to v5
  fix notices being under the navbar, also change offset to use variable
  fix modals not having proper z index
  reduce indexes to be below 9999 so that develop error messages appear above
  Do not allow to find by name in findUser()
  Use lookup endpoint to obtain users by nickname
  Use $ for id UserProfile routes
  Allow opening profile: multiChoiceProprties record, anonymous access
  Allow opening profile when clicking an avatar inside of user popover

12 files changed, 85 insertions, 35 deletions

diff --git a/src/App.scss b/src/App.scss
index 665d52ff..9c08c6b2 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -5,12 +5,12 @@
   --navbar-height: 3.5rem;
   --post-line-height: 1.4;
   // Z-Index stuff
-  --ZI_media_modal: 90000;
-  --ZI_modals_popovers: 85000;
-  --ZI_modals: 80000;
-  --ZI_navbar_popovers: 75000;
-  --ZI_navbar: 70000;
-  --ZI_popovers: 60000;
+  --ZI_media_modal: 9000;
+  --ZI_modals_popovers: 8500;
+  --ZI_modals: 8000;
+  --ZI_navbar_popovers: 7500;
+  --ZI_navbar: 7000;
+  --ZI_popovers: 6000;
 }
 
 html {
@@ -158,6 +158,11 @@ nav {
   grid-area: sidebar;
 }
 
+#modal {
+  position: absolute;
+  z-index: var(--ZI_modals);
+}
+
 .column.-scrollable {
   top: var(--navbar-height);
   position: sticky;
diff --git a/src/boot/routes.js b/src/boot/routes.js
index 6b9c8db2..63dd1297 100644
--- a/src/boot/routes.js
+++ b/src/boot/routes.js
@@ -62,7 +62,7 @@ export default (store) => {
       component: RemoteUserResolver,
       beforeEnter: validateAuthenticatedRoute
     },
-    { name: 'external-user-profile', path: '/users/:id', component: UserProfile },
+    { name: 'external-user-profile', path: '/users/$:id', component: UserProfile },
     { name: 'interactions', path: '/users/:username/interactions', component: Interactions, beforeEnter: validateAuthenticatedRoute },
     { name: 'dms', path: '/users/:username/dms', component: DMs, beforeEnter: validateAuthenticatedRoute },
     { name: 'registration', path: '/registration', component: Registration },
@@ -76,7 +76,8 @@ export default (store) => {
     { name: 'search', path: '/search', component: Search, props: (route) => ({ query: route.query.query }) },
     { name: 'who-to-follow', path: '/who-to-follow', component: WhoToFollow, beforeEnter: validateAuthenticatedRoute },
     { name: 'about', path: '/about', component: About },
-    { name: 'user-profile', path: '/:_(users)?/:name', component: UserProfile },
+    { name: 'user-profile', path: '/users/:name', component: UserProfile },
+    { name: 'legacy-user-profile', path: '/:name', component: UserProfile },
     { name: 'lists', path: '/lists', component: Lists },
     { name: 'lists-timeline', path: '/lists/:id', component: ListsTimeline },
     { name: 'lists-edit', path: '/lists/:id/edit', component: ListsEdit },
diff --git a/src/components/global_notice_list/global_notice_list.vue b/src/components/global_notice_list/global_notice_list.vue
index 09904761..d828b819 100644
--- a/src/components/global_notice_list/global_notice_list.vue
+++ b/src/components/global_notice_list/global_notice_list.vue
@@ -29,10 +29,10 @@
 
 .global-notice-list {
   position: fixed;
-  top: 50px;
+  top: calc(var(--navbar-height) + 0.5em);
   width: 100%;
   pointer-events: none;
-  z-index: var(--ZI_popovers);
+  z-index: var(--ZI_navbar_popovers);
   display: flex;
   flex-direction: column;
   align-items: center;
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index a22b9b03..ea24d6ad 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -44,6 +44,11 @@ const GeneralTab = {
         value: mode,
         label: this.$t(`settings.third_column_mode_${mode}`)
       })),
+      userPopoverAvatarActionOptions: ['close', 'zoom', 'open'].map(mode => ({
+        key: mode,
+        value: mode,
+        label: this.$t(`settings.user_popover_avatar_action_${mode}`)
+      })),
       loopSilentAvailable:
       // Firefox
       Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') ||
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 815a32fa..8561647b 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -60,12 +60,14 @@
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting
-            path="userPopoverZoom"
+          <ChoiceSetting
+            id="userPopoverAvatarAction"
+            path="userPopoverAvatarAction"
+            :options="userPopoverAvatarActionOptions"
             expert="1"
           >
-            {{ $t('settings.user_popover_avatar_zoom') }}
-          </BooleanSetting>
+            {{ $t('settings.user_popover_avatar_action') }}
+          </ChoiceSetting>
         </li>
         <li>
           <BooleanSetting
diff --git a/src/components/user_popover/user_popover.js b/src/components/user_popover/user_popover.js
index 69b25383..3b12aa1e 100644
--- a/src/components/user_popover/user_popover.js
+++ b/src/components/user_popover/user_popover.js
@@ -11,8 +11,8 @@ const UserPopover = {
     Popover: defineAsyncComponent(() => import('../popover/popover.vue'))
   },
   computed: {
-    userPopoverZoom () {
-      return this.$store.getters.mergedConfig.userPopoverZoom
+    userPopoverAvatarAction () {
+      return this.$store.getters.mergedConfig.userPopoverAvatarAction
     },
     userPopoverOverlay () {
       return this.$store.getters.mergedConfig.userPopoverOverlay
diff --git a/src/components/user_popover/user_popover.vue b/src/components/user_popover/user_popover.vue
index 4e999672..53d51fc4 100644
--- a/src/components/user_popover/user_popover.vue
+++ b/src/components/user_popover/user_popover.vue
@@ -14,7 +14,7 @@
         class="user-popover"
         :user-id="userId"
         :hide-bio="true"
-        :avatar-action="userPopoverZoom ? 'zoom' : close"
+        :avatar-action="userPopoverAvatarAction == 'close' ? close : userPopoverAvatarAction"
         :on-close="close"
       />
     </template>
diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
index f779b823..08adaeab 100644
--- a/src/components/user_profile/user_profile.js
+++ b/src/components/user_profile/user_profile.js
@@ -45,7 +45,7 @@ const UserProfile = {
   },
   created () {
     const routeParams = this.$route.params
-    this.load(routeParams.name || routeParams.id)
+    this.load({ name: routeParams.name, id: routeParams.id })
     this.tab = get(this.$route, 'query.tab', defaultTabKey)
   },
   unmounted () {
@@ -106,12 +106,17 @@ const UserProfile = {
       this.userId = null
       this.error = false
 
+      const maybeId = userNameOrId.id
+      const maybeName = userNameOrId.name
+
       // Check if user data is already loaded in store
-      const user = this.$store.getters.findUser(userNameOrId)
+      const user = maybeId ? this.$store.getters.findUser(maybeId) : this.$store.getters.findUserByName(maybeName)
       if (user) {
         loadById(user.id)
       } else {
-        this.$store.dispatch('fetchUser', userNameOrId)
+        (maybeId
+          ? this.$store.dispatch('fetchUser', maybeId)
+          : this.$store.dispatch('fetchUserByName', maybeName))
           .then(({ id }) => loadById(id))
           .catch((reason) => {
             const errorMessage = get(reason, 'error.error')
@@ -150,12 +155,12 @@ const UserProfile = {
   watch: {
     '$route.params.id': function (newVal) {
       if (newVal) {
-        this.switchUser(newVal)
+        this.switchUser({ id: newVal })
       }
     },
     '$route.params.name': function (newVal) {
       if (newVal) {
-        this.switchUser(newVal)
+        this.switchUser({ name: newVal })
       }
     },
     '$route.query': function (newVal) {
diff --git a/src/i18n/en.json b/src/i18n/en.json
index da3da26b..b7839a12 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -584,7 +584,10 @@
     "mention_link_show_avatar_quick": "Show user avatar next to mentions",
     "mention_link_fade_domain": "Fade domains (e.g. {'@'}example.org in {'@'}foo{'@'}example.org)",
     "mention_link_bolden_you": "Highlight mention of you when you are mentioned",
-    "user_popover_avatar_zoom": "Clicking on user avatar in popover zooms it instead of closing the popover",
+    "user_popover_avatar_action": "Popover avatar click action",
+    "user_popover_avatar_action_zoom": "Zoom the avatar",
+    "user_popover_avatar_action_close": "Close the popover",
+    "user_popover_avatar_action_open": "Open profile",
     "user_popover_avatar_overlay": "Show user popover over user avatar",
     "fun": "Fun",
     "greentext": "Meme arrows",
diff --git a/src/modules/config.js b/src/modules/config.js
index c9082895..eeaac917 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -17,7 +17,8 @@ export const multiChoiceProperties = [
   'subjectLineBehavior',
   'conversationDisplay', // tree | linear
   'conversationOtherRepliesButton', // below | inside
-  'mentionLinkDisplay' // short | full_for_remote | full
+  'mentionLinkDisplay', // short | full_for_remote | full
+  'userPopoverAvatarAction' // close | zoom | open
 ]
 
 export const defaultState = {
@@ -82,7 +83,7 @@ export const defaultState = {
   useContainFit: true,
   disableStickyHeaders: false,
   showScrollbars: false,
-  userPopoverZoom: false,
+  userPopoverAvatarAction: 'close',
   userPopoverOverlay: true,
   sidebarColumnWidth: '25rem',
   contentColumnWidth: '45rem',
diff --git a/src/modules/users.js b/src/modules/users.js
index 59e8b391..de28766a 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -16,9 +16,6 @@ export const mergeOrAdd = (arr, obj, item) => {
     // This is a new item, prepare it
     arr.push(item)
     obj[item.id] = item
-    if (item.screen_name && !item.screen_name.includes('@')) {
-      obj[item.screen_name.toLowerCase()] = item
-    }
     return { item, new: true }
   }
 }
@@ -162,7 +159,11 @@ export const mutations = {
       if (user.relationship) {
         state.relationships[user.relationship.id] = user.relationship
       }
-      mergeOrAdd(state.users, state.usersObject, user)
+      const res = mergeOrAdd(state.users, state.usersObject, user)
+      const item = res.item
+      if (res.new && item.screen_name && !item.screen_name.includes('@')) {
+        state.usersByNameObject[item.screen_name.toLowerCase()] = item
+      }
     })
   },
   updateUserRelationship (state, relationships) {
@@ -242,12 +243,10 @@ export const mutations = {
 
 export const getters = {
   findUser: state => query => {
-    const result = state.usersObject[query]
-    // In case it's a screen_name, we can try searching case-insensitive
-    if (!result && typeof query === 'string') {
-      return state.usersObject[query.toLowerCase()]
-    }
-    return result
+    return state.usersObject[query]
+  },
+  findUserByName: state => query => {
+    return state.usersByNameObject[query.toLowerCase()]
   },
   findUserByUrl: state => query => {
     return state.users
@@ -266,6 +265,7 @@ export const defaultState = {
   currentUser: false,
   users: [],
   usersObject: {},
+  usersByNameObject: {},
   signUpPending: false,
   signUpErrors: [],
   relationships: {}
@@ -288,6 +288,13 @@ const users = {
           return user
         })
     },
+    fetchUserByName (store, name) {
+      return store.rootState.api.backendInteractor.fetchUserByName({ name })
+        .then((user) => {
+          store.commit('addNewUsers', [user])
+          return user
+        })
+    },
     fetchUserRelationship (store, id) {
       if (store.state.currentUser) {
         store.rootState.api.backendInteractor.fetchUserRelationship({ id })
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index df899827..dd85b281 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -50,6 +50,7 @@ const MASTODON_USER_HOME_TIMELINE_URL = '/api/v1/timelines/home'
 const MASTODON_STATUS_URL = id => `/api/v1/statuses/${id}`
 const MASTODON_STATUS_CONTEXT_URL = id => `/api/v1/statuses/${id}/context`
 const MASTODON_USER_URL = '/api/v1/accounts'
+const MASTODON_USER_LOOKUP_URL = '/api/v1/accounts/lookup'
 const MASTODON_USER_RELATIONSHIPS_URL = '/api/v1/accounts/relationships'
 const MASTODON_USER_TIMELINE_URL = id => `/api/v1/accounts/${id}/statuses`
 const MASTODON_USER_IN_LISTS = id => `/api/v1/accounts/${id}/lists`
@@ -326,6 +327,25 @@ const fetchUser = ({ id, credentials }) => {
     .then((data) => parseUser(data))
 }
 
+const fetchUserByName = ({ name, credentials }) => {
+  return promisedRequest({
+    url: MASTODON_USER_LOOKUP_URL,
+    credentials,
+    params: { acct: name }
+  })
+    .then(data => data.id)
+    .catch(error => {
+      if (error && error.statusCode === 404) {
+        // Either the backend does not support lookup endpoint,
+        // or there is no user with such name. Fallback and treat name as id.
+        return name
+      } else {
+        throw error
+      }
+    })
+    .then(id => fetchUser({ id, credentials }))
+}
+
 const fetchUserRelationship = ({ id, credentials }) => {
   const url = `${MASTODON_USER_RELATIONSHIPS_URL}/?id=${id}`
   return fetch(url, { headers: authHeaders(credentials) })
@@ -1489,6 +1509,7 @@ const apiService = {
   blockUser,
   unblockUser,
   fetchUser,
+  fetchUserByName,
   fetchUserRelationship,
   favorite,
   unfavorite,