Merge remote-tracking branch 'origin/develop' into shigusegubu

* origin/develop:
  fix tests by removing only and adding empty func for notification tests
  EntityNormalizer: Normalize thumbnail url.
  Translated using Weblate (Italian)
  show tag name in title for tag timelines
  fixed
  lint
  fix lain's bug
  fix reply popovers being too slim
  fixed some issues related to user avatar
  revert change to form resize logic
  Fix last line having slightly cut-off low-hanging parts of characters
  work around incorrect styles ordering in status popover
  fix issues with reply-link
  Fix muted notifications
  treat field name as text

src/components/attachment/attachment.vue

@@ -60,6 +60,7 @@
       @click="openModal"
     >
       <StillImage
+        class="image"
         :referrerpolicy="referrerpolicy"
         :mimetype="attachment.mimetype"
         :src="attachment.large_thumb_url || attachment.url"
@@ -281,8 +282,11 @@
   }
 
   .image-attachment {
-    width: 100%;
-    height: 100%;
+    &,
+    & .image {
+      width: 100%;
+      height: 100%;
+    }
 
     &.hidden {
       display: none;

src/components/chat_list_item/chat_list_item.scss

@@ -72,7 +72,7 @@
     }
   }
 
-  .avatar.still-image {
+  .Avatar {
     border-radius: $fallback--avatarAltRadius;
     border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
   }

src/components/chat_title/chat_title.vue

@@ -51,7 +51,7 @@
     }
   }
 
-  .still-image.avatar {
+  .Avatar {
     width: 23px;
     height: 23px;
     margin-right: 0.5em;

src/components/notification/notification.scss

@@ -0,0 +1,52 @@
+// TODO Copypaste from Status, should unify it somehow
+.Notification {
+  &.-muted {
+    padding: 0.25em 0.6em;
+    height: 1.2em;
+    line-height: 1.2em;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    display: flex;
+    flex-wrap: nowrap;
+
+    & .status-username,
+    & .mute-thread,
+    & .mute-words {
+      word-wrap: normal;
+      word-break: normal;
+      white-space: nowrap;
+    }
+
+    & .status-username,
+    & .mute-words {
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
+    .status-username {
+      font-weight: normal;
+      flex: 0 1 auto;
+      margin-right: 0.2em;
+      font-size: smaller;
+    }
+
+    .mute-thread {
+      flex: 0 0 auto;
+    }
+
+    .mute-words {
+      flex: 1 0 5em;
+      margin-left: 0.2em;
+
+      &::before {
+        content: ' ';
+      }
+    }
+
+    .unmute {
+      flex: 0 0 auto;
+      margin-left: auto;
+      display: block;
+    }
+  }
+}

src/components/notification/notification.vue

@@ -7,7 +7,7 @@
   <div v-else>
     <div
       v-if="needMute && !unmuted"
-      class="container muted"
+      class="Notification container -muted"
     >
       <small>
         <router-link :to="userProfileLink">
@@ -168,3 +168,4 @@
 </template>
 
 <script src="./notification.js"></script>
+<style src="./notification.scss" lang="scss"></style>

src/components/post_status_form/post_status_form.vue

@@ -143,6 +143,7 @@
             v-model="newStatus.status"
             :placeholder="placeholder || $t('post_status.default')"
             rows="1"
+            cols="1"
             :disabled="posting"
             class="form-post-body"
             :class="{ 'scrollable-form': !!maxHeight }"

src/components/status/status.scss

@@ -6,7 +6,7 @@ $status-margin: 0.75em;
 .Status {
   min-width: 0;
 
-  &:hover .avatar {
+  &:hover {
     --still-image-img: visible;
     --still-image-canvas: hidden;
   }
@@ -133,6 +133,13 @@ $status-margin: 0.75em;
     margin-right: 0.5em;
     max-width: 100%;
 
+    .reply-to-link {
+      white-space: nowrap;
+      word-break: break-word;
+      text-overflow: ellipsis;
+      overflow-x: hidden;
+    }
+
     .icon-reply {
       // mirror the icon
       transform: scaleX(-1);
@@ -143,11 +150,18 @@ $status-margin: 0.75em;
   & .reply-to-no-popover {
     min-width: 0;
     margin-right: 0.4em;
+    flex-shrink: 0;
   }
 
   .reply-to-popover {
-    &:hover {
+    .reply-to:hover::before {
+      content: '';
+      display: block;
+      position: absolute;
+      bottom: 0;
+      width: 100%;
       border-bottom: 1px solid var(--faint);
+      pointer-events: none;
     }
 
     .faint-link:hover {
@@ -156,21 +170,21 @@ $status-margin: 0.75em;
     }
 
     &.-strikethrough {
-      position: relative;
-
-      &::after {
+      .reply-to::after {
         content: '';
         display: block;
         position: absolute;
         top: 50%;
         width: 100%;
         border-bottom: 1px solid var(--faint);
+        pointer-events: none;
       }
     }
   }
 
   .reply-to {
     display: flex;
+    position: relative;
   }
 
   .reply-to-text {

src/components/status/status.vue

@@ -234,6 +234,7 @@
                   <span class="reply-to-text">{{ $t('status.reply_to') }}</span>
                 </span>
                 <router-link
+                  class="reply-to-link"
                   :title="replyToName"
                   :to="replyProfileLink"
                 >

src/components/status_popover/status_popover.vue

@@ -38,7 +38,8 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.status-popover {
+/* popover styles load on-demand, so we need to override */
+.status-popover.popover {
   font-size: 1rem;
   min-width: 15em;
   max-width: 95%;

src/components/still-image/still-image.vue

@@ -30,8 +30,6 @@
   position: relative;
   line-height: 0;
   overflow: hidden;
-  width: 100%;
-  height: 100%;
   display: flex;
   align-items: center;
 
@@ -68,6 +66,7 @@
       border-radius: $fallback--tooltipRadius;
       border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
       z-index: 2;
+      visibility: var(--still-image-label-visibility, visible);
     }
 
     &:hover canvas {

src/components/timeline_menu/timeline_menu.js

@@ -9,7 +9,8 @@ export const timelineNames = () => {
     'bookmarks': 'nav.bookmarks',
     'dms': 'nav.dms',
     'public-timeline': 'nav.public_tl',
-    'public-external-timeline': 'nav.twkn'
+    'public-external-timeline': 'nav.twkn',
+    'tag-timeline': 'tag'
   }
 }
 
@@ -40,6 +41,14 @@ const TimelineMenu = {
       setTimeout(() => {
         this.isOpen = true
       }, 25)
+    },
+    timelineName () {
+      const route = this.$route.name
+      if (route === 'tag-timeline') {
+        return '#' + this.$route.params.tag
+      }
+      const i18nkey = timelineNames()[this.$route.name]
+      return i18nkey ? this.$t(i18nkey) : route
     }
   },
   computed: {
@@ -47,10 +56,7 @@ const TimelineMenu = {
       currentUser: state => state.users.currentUser,
       privateMode: state => state.instance.private,
       federating: state => state.instance.federating
-    }),
-    timelineNames () {
-      return timelineNames()
-    }
+    })
   }
 }
 

src/components/timeline_menu/timeline_menu.vue

@@ -45,7 +45,7 @@
       slot="trigger"
       class="title timeline-menu-title"
     >
-      <span>{{ $t(timelineNames[$route.name]) }}</span>
+      <span>{{ timelineName() }}</span>
       <i class="icon-down-open" />
     </div>
   </Popover>

src/components/user_avatar/user_avatar.vue

@@ -1,6 +1,6 @@
 <template>
   <StillImage
-    class="avatar"
+    class="Avatar"
     :alt="user.screen_name"
     :title="user.screen_name"
     :src="imgSrc(user.profile_image_url_original)"
@@ -13,7 +13,9 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.avatar.still-image {
+.Avatar {
+  --still-image-label-visibility: hidden;
+
   width: 48px;
   height: 48px;
   box-shadow: var(--avatarStatusShadow);

src/components/user_card/user_card.vue

@@ -364,13 +364,9 @@
     }
   }
 
-  &:hover .animated.avatar {
-    canvas {
-      display: none;
-    }
-    img {
-      visibility: visible;
-    }
+  &:hover .avatar {
+    --still-image-img: visible;
+    --still-image-canvas: hidden;
   }
 
   &-avatar-link {

src/components/user_profile/user_profile.vue

@@ -20,13 +20,14 @@
           :key="index"
           class="user-profile-field"
         >
-          <!-- eslint-disable vue/no-v-html -->
           <dt
             :title="user.fields_text[index].name"
             class="user-profile-field-name"
             @click.prevent="linkClicked"
-            v-html="field.name"
-          />
+          >
+            {{ field.name }}
+          </dt>
+          <!-- eslint-disable vue/no-v-html -->
           <dd
             :title="user.fields_text[index].value"
             class="user-profile-field-value"

src/i18n/it.json

@@ -36,7 +36,8 @@
     "who_to_follow": "Chi seguire",
     "preferences": "Preferenze",
     "bookmarks": "Segnalibri",
-    "chats": "Conversazioni"
+    "chats": "Conversazioni",
+    "timelines": "Sequenze"
   },
   "notifications": {
     "followed_you": "ti segue",

src/services/entity_normalizer/entity_normalizer.service.js

@@ -209,6 +209,7 @@ export const parseAttachment = (data) => {
   }
 
   output.url = data.url
+  output.large_thumb_url = data.preview_url
   output.description = data.description
 
   return output

test/unit/specs/modules/statuses.spec.js

@@ -330,7 +330,7 @@ describe('Statuses module', () => {
       const deletion = makeMockStatus({ id: '4', type: 'deletion' })
       deletion.text = 'Dolus deleted notice {{tag:gs.smuglo.li,2016-11-18:noticeId=1038007:objectType=note}}.'
       deletion.uri = 'xxx'
-
+      const newNotificationSideEffects = () => {}
       mutations.addNewStatuses(state, { statuses: [status, otherStatus], user })
       mutations.addNewNotifications(
         state,
@@ -342,7 +342,8 @@ describe('Statuses module', () => {
             status: otherStatus,
             action: otherStatus,
             seen: false
-          }]
+          }],
+          newNotificationSideEffects
         })
 
       expect(state.notifications.data.length).to.eql(1)
@@ -356,7 +357,8 @@ describe('Statuses module', () => {
             status: mentionedStatus,
             action: mentionedStatus,
             seen: false
-          }]
+          }],
+          newNotificationSideEffects
         })
 
       mutations.addNewStatuses(state, { statuses: [mentionedStatus], user })

test/unit/specs/services/chat_service/chat_service.spec.js

@@ -17,8 +17,7 @@ const message3 = {
   created_at: (new Date('2020-07-22T18:45:59.000Z'))
 }
 
-// TODO: only
-describe.only('chatService', () => {
+describe('chatService', () => {
   describe('.add', () => {
     it("Doesn't add duplicates", () => {
       const chat = chatService.empty()