Merge branch 'reply-mentions' into 'develop'

Support explicit addressing

See merge request soapbox-pub/soapbox-fe!930

app/soapbox/locales/pl.json

@@ -209,6 +209,7 @@
   "column.import_data": "Importuj dane",
   "column.info": "Informacje o serwerze",
   "column.lists": "Listy",
+  "column.mentions": "W odpowiedzi do",
   "column.mfa": "Uwierzytelnianie wieloetapowe",
   "column.mfa_cancel": "Anuluj",
   "column.mfa_confirm_button": "Potwierdź",
@@ -610,6 +611,7 @@
   "navigation_bar.mutes": "Wyciszeni użytkownicy",
   "navigation_bar.pins": "Przypięte wpisy",
   "navigation_bar.preferences": "Preferencje",
+  "navigation_bar.in_reply_to": "W odpowiedzi do",
   "navigation_bar.security": "Bezpieczeństwo",
   "navigation_bar.soapbox_config": "Konfiguracja Soapbox",
   "notification.chat_mention": "{name} wysłał(a) Ci wiadomośść",
@@ -754,6 +756,10 @@
   "remote_interaction.user_not_found_error": "Nie można odnaleźć podanego użytkownika",
   "remote_timeline.filter_message": "Przeglądasz oś czasu {instance}",
   "reply_indicator.cancel": "Anuluj",
+  "reply_mentions.account.add": "Dodaj do wspomnianych",
+  "reply_mentions.account.remove": "Usuń z wspomnianych",
+  "reply_mentions.more": "i {count} więcej",
+  "reply_mentions.reply": "W odpowiedzi do {accounts}{more}",
   "report.block": "Zablokuj {target}",
   "report.block_hint": "Czy chcesz też zablokować to konto?",
   "report.forward": "Przekaż na {target}",

app/styles/application.scss

@@ -50,6 +50,7 @@
 @import 'components/emoji-reacts';
 @import 'components/status';
 @import 'components/reply-indicator';
+@import 'components/reply-mentions';
 @import 'components/detailed-status';
 @import 'components/list-forms';
 @import 'components/media-gallery';

app/styles/components/modal.scss

@@ -725,7 +725,8 @@
   }
 }
 
-.compose-modal {
+.compose-modal,
+.reply-mentions-modal {
   overflow: hidden;
   background-color: var(--background-color);
   border-radius: 6px;
@@ -755,6 +756,15 @@
     }
   }
 
+  @media screen and (max-width: 895px) {
+    margin: 0;
+    border-radius: 0;
+    height: 100vh;
+    width: 100vw;
+  }
+}
+
+.compose-modal {
   &__close {
     position: absolute;
     right: 10px;
@@ -808,12 +818,27 @@
       padding: 10px 0;
     }
   }
+}
 
-  @media screen and (max-width: 895px) {
-    margin: 0;
-    border-radius: 0;
-    height: 100vh;
-    width: 100vw;
+.reply-mentions-modal {
+  &__back {
+    position: absolute;
+    left: 10px;
+    left: max(10px, env(safe-area-inset-right));
+    color: var(--primary-text-color--faint);
+
+    .svg-icon {
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  &__accounts {
+    display: block;
+    flex-direction: row;
+    flex: 1;
+    overflow-y: auto;
+    min-height: 300px;
   }
 }
 

app/styles/components/reply-mentions.scss

@@ -0,0 +1,24 @@
+.reply-mentions {
+  margin: 0 10px;
+  color: var(--primary-text-color--faint);
+  font-size: 15px;
+  text-decoration: none;
+
+  &__account,
+  a {
+    color: var(--highlight-text-color);
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.status__wrapper,
+.detailed-status {
+  .reply-mentions {
+    display: block;
+    margin: 4px 0 0 0;
+  }
+}