Merge branch 'develop' into stable

2022-12-10 14:52:00 +00:00 · 2022-12-10 14:52:00 +00:00 · 9c9b4cc07c
parent 2c9b73646c 9bf310d509
commit 9c9b4cc07c
53 changed files with 1253 additions and 2469 deletions
--- a/.gitea/issue_template/bug.yml
+++ b/.gitea/issue_template/bug.yml
@ -0,0 +1,49 @@
+name: "Bug report"
+about: "Something isn't working as expected"
+title: "[bug] "
+body:
+  - type: markdown
+    attributes:
+      value: "Thanks for taking the time to file this bug report! Please try to be as specific and detailed as you can, so we can track down the issue and fix it as soon as possible."
+  - type: input
+    id: version
+    attributes:
+      label: "Version"
+      description: "Which version of pleroma-fe are you running? If running develop, specify the commit hash."
+      placeholder: "e.g. 2022.11, 40e86998e6"
+  - type: textarea
+    id: attempt
+    attributes:
+      label: "What were you trying to do?"
+      validations:
+        required: true
+  - type: textarea
+    id: expectation
+    attributes:
+      label: "What did you expect to happen?"
+      validations:
+        required: true
+  - type: textarea
+    id: reality
+    attributes:
+      label: "What actually happened?"
+      validations:
+        required: true
+  - type: dropdown
+    id: severity
+    attributes:
+      label: "Severity"
+      description: "Does this issue prevent you from using the software as normal?"
+      options:
+        - "I cannot use the software"
+        - "I cannot use it as easily as I'd like"
+        - "I can manage"
+      validations:
+        required: true
+  - type: checkboxes
+    id: searched
+    attributes:
+      label: "Have you searched for this issue?"
+      description: "Please double-check that your issue is not already being tracked on [the forums](https://meta.akkoma.dev) or [the issue tracker](https://akkoma.dev/AkkomaGang/pleroma-fe/issues)."
+      options:
+        - label: "I have double-checked and have not found this issue mentioned anywhere."
--- a/.gitea/issue_template/feat.yml
+++ b/.gitea/issue_template/feat.yml
@ -0,0 +1,29 @@
+name: "Feature request"
+about: "I'd like something to be added to pleroma-fe"
+title: "[feat] "
+body:
+  - type: markdown
+    attributes:
+      value: "Thanks for taking the time to request a new feature! Please be as concise and clear as you can in your proposal, so we could understand what you're going for."
+  - type: textarea
+    id: idea
+    attributes:
+      label: "The idea"
+      description: "What do you think you should be able to do in pleroma-fe?"
+      validations:
+        required: true
+  - type: textarea
+    id: reason
+    attributes:
+      label: "The reasoning"
+      description: "Why would this be a worthwhile feature? Does it solve any problems? Have people talked about wanting it?"
+      validations:
+        required: true
+  - type: checkboxes
+    id: searched
+    attributes:
+      label: "Have you searched for this feature request?"
+      description: "Please double-check that your issue is not already being tracked on [the forums](https://meta.akkoma.dev), [the issue tracker](https://akkoma.dev/AkkomaGang/pleroma-fe/issues), or the one for [the backend](https://akkoma.dev/AkkomaGang/akkoma/issues)."
+      options:
+        - label: "I have double-checked and have not found this feature request mentioned anywhere."
+        - label: "This feature is related to the pleroma-fe Akkoma frontend specifically, and not the backend."
--- a/.gitignore
+++ b/.gitignore
@ -9,3 +9,4 @@ selenium-debug.log
 config/local.json
 config/local.*.json
 docs/site/
+.vscode/
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@ -1,19 +1,13 @@
 {
  "extends": [
-    "stylelint-rscss/config",
+    "stylelint-config-recommended-vue/scss",
    "stylelint-config-recommended",
    "stylelint-config-standard"
  ],
+  "customSyntax": "postcss-scss",
  "rules": {
    "declaration-no-important": true,
-    "rscss/no-descendant-combinator": false,
-    "rscss/class-format": [
-      true,
-      {
-        "component": "pascal-case",
-        "variant": "^-[a-z]\\w+",
-        "element": "^[a-z]\\w+"
-      }
-    ]
+    "selector-class-pattern": null,
+    "custom-property-pattern": null
  }
 }
--- a/.woodpecker.yml
+++ b/.woodpecker.yml
@ -7,7 +7,7 @@ pipeline:
    commands:
    - yarn
    - yarn lint
-    - yarn stylelint
+    #- yarn stylelint

  test:
    when:
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@ -2,7 +2,6 @@ var path = require('path')
 var config = require('../config')
 var utils = require('./utils')
 var projectRoot = path.resolve(__dirname, '../')
-const WorkboxPlugin = require('workbox-webpack-plugin');
 var { VueLoaderPlugin } = require('vue-loader')

 var env = process.env.NODE_ENV
@ -119,11 +118,6 @@ module.exports = {
    ]
  },
  plugins: [
-    new WorkboxPlugin.InjectManifest({
-      swSrc: path.join(__dirname, '..', 'src/sw.js'),
-      swDest: 'sw-pleroma.js',
-      maximumFileSizeToCacheInBytes: 15 * 1024 * 1024,
-    }),
    new VueLoaderPlugin()
  ]
 }
--- a/build/webpack.prod.conf.js
+++ b/build/webpack.prod.conf.js
@ -2,6 +2,7 @@ var path = require('path')
 var config = require('../config')
 var utils = require('./utils')
 var webpack = require('webpack')
+const WorkboxPlugin = require('workbox-webpack-plugin');
 var { merge } = require('webpack-merge')
 var baseWebpackConfig = require('./webpack.base.conf')
 var MiniCssExtractPlugin = require('mini-css-extract-plugin')
@ -32,6 +33,11 @@ var webpackConfig = merge(baseWebpackConfig, {
    chunkFilename: utils.assetsPath('js/[name].[chunkhash].js')
  },
  plugins: [
+    new WorkboxPlugin.InjectManifest({
+      swSrc: path.join(__dirname, '..', 'src/sw.js'),
+      swDest: 'sw-pleroma.js',
+      maximumFileSizeToCacheInBytes: 15 * 1024 * 1024,
+    }),
    // http://vuejs.github.io/vue-loader/workflow/production.html
    new webpack.DefinePlugin({
      'process.env': env,
--- a/config/index.js
+++ b/config/index.js
@ -38,6 +38,11 @@ module.exports = {
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
+     '/manifest.json': {
+        target,
+        changeOrigin: true,
+        cookieDomainRewrite: 'localhost'
+      },
      '/api': {
        target,
        changeOrigin: true,
--- a/index.html
+++ b/index.html
@ -9,8 +9,10 @@
    <link rel="stylesheet" href="/static/font/tiresias.css">
    <link rel="stylesheet" href="/static/font/css/lato.css">
    <link rel="stylesheet" href="/static/mfm.css">
+    <link rel="stylesheet" href="/static/custom.css">
    <!--server-generated-meta-->
    <link rel="icon" type="image/png" href="/favicon.png">
+    <link rel="manifest" href="/manifest.json">
  </head>
  <body class="hidden">
    <noscript>To use Akkoma, please enable JavaScript.</noscript>
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "pleroma_fe",
-  "version": "3.2.0",
+  "version": "3.5.0",
  "description": "A frontend for Akkoma instances",
  "author": "Roger Braun <roger@rogerbraun.net>",
  "private": true,
@ -11,7 +11,7 @@
    "unit:watch": "karma start test/unit/karma.conf.js --single-run=false",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
-    "stylelint": "npx stylelint src/components/status/status.scss",
+    "stylelint": "stylelint src/**/*.scss",
    "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
    "lint-fix": "eslint --fix --ext .js,.vue src test/unit/specs test/e2e/specs"
  },
@ -23,8 +23,8 @@
    "@fortawesome/free-solid-svg-icons": "^6.2.0",
    "@fortawesome/vue-fontawesome": "3.0.1",
    "@kazvmoe-infra/pinch-zoom-element": "1.2.0",
-    "@vuelidate/core": "2.0.0-alpha.42",
-    "@vuelidate/validators": "2.0.0-alpha.30",
+    "@vuelidate/core": "^2.0.0",
+    "@vuelidate/validators": "^2.0.0",
    "body-scroll-lock": "2.7.1",
    "chromatism": "3.0.0",
    "click-outside-vue3": "4.0.1",
@ -33,8 +33,6 @@
    "escape-html": "1.0.3",
    "js-cookie": "^3.0.1",
    "localforage": "1.10.0",
-    "marked": "^4.2.2",
-    "marked-mfm": "^0.5.0",
    "parse-link-header": "^2.0.0",
    "phoenix": "1.6.2",
    "punycode.js": "2.1.0",
@ -103,7 +101,9 @@
    "nightwatch": "0.9.21",
    "opn": "4.0.2",
    "ora": "0.4.1",
+    "postcss-html": "^1.5.0",
    "postcss-loader": "3.0.0",
+    "postcss-sass": "^0.5.0",
    "raw-loader": "0.5.1",
    "sass": "^1.56.0",
    "sass-loader": "^13.2.0",
@ -112,9 +112,11 @@
    "shelljs": "0.8.5",
    "sinon": "2.4.1",
    "sinon-chai": "2.14.0",
-    "stylelint": "13.6.1",
-    "stylelint-config-standard": "20.0.0",
-    "stylelint-rscss": "0.4.0",
+    "stylelint": "^14.15.0",
+    "stylelint-config-recommended-vue": "^1.4.0",
+    "stylelint-config-standard": "^29.0.0",
+    "stylelint-config-standard-scss": "^6.1.0",
+    "stylelint-rscss": "^0.4.0",
    "url-loader": "^4.1.1",
    "vue-loader": "^17.0.0",
    "vue-style-loader": "^4.1.2",
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@ -150,6 +150,7 @@ const setSettings = async ({ apiConfig, staticConfig, store }) => {
  copyInstanceOption('showPanelNavShortcuts')
  copyInstanceOption('stopGifs')
  copyInstanceOption('logo')
+  copyInstanceOption('conversationDisplay')

  store.dispatch('setInstanceOption', {
    name: 'logoMask',
--- a/src/boot/routes.js
+++ b/src/boot/routes.js
@ -22,6 +22,8 @@ import Lists from 'components/lists/lists.vue'
 import ListTimeline from 'components/list_timeline/list_timeline.vue'
 import ListEdit from 'components/list_edit/list_edit.vue'
 import AnnouncementsPage from 'components/announcements_page/announcements_page.vue'
+import RegistrationRequestSent from 'components/registration_request_sent/registration_request_sent.vue'
+import AwaitingEmailConfirmation from 'components/awaiting_email_confirmation/awaiting_email_confirmation.vue'

 export default (store) => {
  const validateAuthenticatedRoute = (to, from, next) => {
@ -62,6 +64,8 @@ export default (store) => {
    { 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 },
+    { name: 'registration-request-sent', path: '/registration-request-sent', component: RegistrationRequestSent },
+    { name: 'awaiting-email-confirmation', path: '/awaiting-email-confirmation', component: AwaitingEmailConfirmation },
    { name: 'password-reset', path: '/password-reset', component: PasswordReset, props: true },
    { name: 'registration-token', path: '/registration/:token', component: Registration },
    { name: 'friend-requests', path: '/friend-requests', component: FollowRequests, beforeEnter: validateAuthenticatedRoute },
--- a/src/components/account_actions/account_actions.js
+++ b/src/components/account_actions/account_actions.js
@ -26,6 +26,9 @@ const AccountActions = {
    ConfirmModal
  },
  methods: {
+    refetchRelationship () {
+      return this.$store.dispatch('fetchUserRelationship', this.user.id)
+    },
    showConfirmBlock () {
      this.showingConfirmBlock = true
    },
@ -57,6 +60,14 @@ const AccountActions = {
    },
    reportUser () {
      this.$store.dispatch('openUserReportingModal', { userId: this.user.id })
+    },
+    muteDomain () {
+      this.$store.dispatch('muteDomain', this.user.screen_name.split('@')[1])
+        .then(() => this.refetchRelationship())
+    },
+    unmuteDomain () {
+      this.$store.dispatch('unmuteDomain', this.user.screen_name.split('@')[1])
+        .then(() => this.refetchRelationship())
    }
  },
  computed: {
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@ -55,6 +55,20 @@
          >
            {{ $t('user_card.report') }}
          </button>
+          <button
+            v-if="relationship.domain_blocking"
+            class="btn button-default btn-block dropdown-item"
+            @click="unmuteDomain"
+          >
+            {{ $t('user_card.domain_muted') }}
+          </button>
+          <button
+            v-else-if="!user.is_local"
+            class="btn button-default btn-block dropdown-item"
+            @click="muteDomain"
+          >
+            {{ $t('user_card.mute_domain') }}
+          </button>
        </div>
      </template>
      <template v-slot:trigger>
--- a/src/components/awaiting_email_confirmation/awaiting_email_confirmation.js
+++ b/src/components/awaiting_email_confirmation/awaiting_email_confirmation.js
@ -0,0 +1,4 @@
+export default {
+  computed: {
+  }
+}
--- a/src/components/awaiting_email_confirmation/awaiting_email_confirmation.vue
+++ b/src/components/awaiting_email_confirmation/awaiting_email_confirmation.vue
@ -0,0 +1,12 @@
+<template>
+  <div class="panel panel-default">
+    <div class="panel-heading">
+      <h4>{{ $t('registration.awaiting_email_confirmation_title') }}</h4>
+    </div>
+    <div class="panel-body">
+      <p>{{ $t('registration.awaiting_email_confirmation') }}</p>
+    </div>
+  </div>
+</template>
+
+<script src="./awaiting_email_confirmation.js"></script>
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@ -62,6 +62,10 @@ const EmojiPicker = {
      this.scrolledGroup(target)
      this.triggerLoadMore(target)
    },
+    onWheel (e) {
+      e.preventDefault()
+      this.$refs['emoji-tabs'].scrollBy(e.deltaY, 0)
+    },
    highlight (key) {
      this.setShowStickers(false)
      this.activeGroup = key
@ -138,7 +142,7 @@ const EmojiPicker = {
      if (this.keyword === '') return list
      const regex = new RegExp(escapeRegExp(trim(this.keyword)), 'i')
      return list.filter(emoji => {
-        return regex.test(emoji.displayText)
+        return (regex.test(emoji.displayText) || (!emoji.imageUrl && emoji.replacement === this.keyword))
      })
    }
  },
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@ -1,7 +1,11 @@
 <template>
  <div class="emoji-picker panel panel-default panel-body">
    <div class="heading">
-      <span class="emoji-tabs">
+      <span
+        class="emoji-tabs"
+        @wheel="onWheel"
+        ref="emoji-tabs"
+      >
        <span
          v-for="group in emojis"
          :key="group.id"
--- a/src/components/registration/registration.js
+++ b/src/components/registration/registration.js
@ -79,8 +79,16 @@ const registration = {

      if (!this.v$.$invalid) {
        try {
-          await this.signUp(this.user)
-          this.$router.push({ name: 'friends' })
+          const data = await this.signUp(this.user)
+          if (data.me) {
+            this.$router.push({ name: 'friends' })
+          } else if (data.identifier === 'awaiting_approval') {
+            this.$router.push({ name: 'registration-request-sent' })
+          } else if (data.identifier === 'missing_confirmed_email') {
+            this.$router.push({ name: 'awaiting-email-confirmation' })
+          } else {
+            console.warn('Unknown response from sign up', data)
+          }
        } catch (error) {
          console.warn('Registration failed: ', error)
          this.setCaptcha()
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@ -177,6 +177,7 @@
            <div
              v-if="accountApprovalRequired"
              class="form-group"
+              :class="{ 'form-group--error': v$.user.reason.$error }"
            >
              <label
                class="form--label"
--- a/src/components/registration_request_sent/registration_request_sent.js
+++ b/src/components/registration_request_sent/registration_request_sent.js
@ -0,0 +1,4 @@
+export default {
+  computed: {
+  }
+}
--- a/src/components/registration_request_sent/registration_request_sent.vue
+++ b/src/components/registration_request_sent/registration_request_sent.vue
@ -0,0 +1,12 @@
+<template>
+  <div class="panel panel-default">
+    <div class="panel-heading">
+      <h4>{{ $t('registration.request_sent_title') }}</h4>
+    </div>
+    <div class="panel-body">
+      <p>{{ $t('registration.request_sent') }}</p>
+    </div>
+  </div>
+</template>
+
+<script src="./registration_request_sent.js"></script>
--- a/src/components/rich_content/rich_content.jsx
+++ b/src/components/rich_content/rich_content.jsx
@ -2,8 +2,6 @@ import { unescape, flattenDeep } from 'lodash'
 import { getTagName, processTextForEmoji, getAttrs } from 'src/services/html_converter/utility.service.js'
 import { convertHtmlToTree } from 'src/services/html_converter/html_tree_converter.service.js'
 import { convertHtmlToLines } from 'src/services/html_converter/html_line_converter.service.js'
-import { marked } from 'marked'
-import markedMfm from 'marked-mfm'
 import StillImage from 'src/components/still-image/still-image.vue'
 import MentionsLine, { MENTIONS_LIMIT } from 'src/components/mentions_line/mentions_line.vue'
 import HashtagLink from 'src/components/hashtag_link/hashtag_link.vue'
--- a/src/components/scope_selector/scope_selector.vue
+++ b/src/components/scope_selector/scope_selector.vue
@ -16,7 +16,6 @@
        class="fa-scale-110 fa-old-padding"
      />
    </button>
-    {{ ' ' }}
    <button
      v-if="showPrivate"
      class="button-unstyled scope"
@ -30,7 +29,6 @@
        class="fa-scale-110 fa-old-padding"
      />
    </button>
-    {{ ' ' }}
    <button
      v-if="showUnlisted"
      class="button-unstyled scope"
@ -44,7 +42,6 @@
        class="fa-scale-110 fa-old-padding"
      />
    </button>
-    {{ ' ' }}
    <button
      v-if="showPublic"
      class="button-unstyled scope"
@ -87,6 +84,7 @@
    min-width: 1.3em;
    min-height: 1.3em;
    text-align: center;
+    margin-right: 0.4em;

    &.selected svg {
      color: $fallback--lightText;
--- a/src/components/search_bar/search_bar.vue
+++ b/src/components/search_bar/search_bar.vue
@ -73,6 +73,7 @@

  .search-bar-input {
    flex: 1 0 auto;
+    margin-left: 0.5em;
  }

  .cancel-search {
--- a/src/components/settings_modal/settings_modal.scss
+++ b/src/components/settings_modal/settings_modal.scss
@ -76,6 +76,10 @@
      position: absolute;
      right: 20px;
      padding-right: 10px;
+
+      @media all and (max-width: 800px) {
+        display: none;
+      }
    }
  }
 }
--- a/src/components/settings_modal/settings_modal.vue
+++ b/src/components/settings_modal/settings_modal.vue
@ -44,6 +44,10 @@
      <div class="panel-body">
        <SettingsModalContent v-if="modalOpenedOnce" />
      </div>
+      <span
+        id="unscrolled-content"
+        class="extra-content"
+      />
      <div class="panel-footer settings-footer">
        <Popover
          class="export"
@ -53,7 +57,7 @@
          :bound-to="{ x: 'container' }"
          remove-padding
        >
-          <template v-slot:trigger>
+          <template #trigger>
            <button
              class="btn button-default"
              :title="$t('general.close')"
@ -65,7 +69,7 @@
              />
            </button>
          </template>
-          <template v-slot:content="{close}">
+          <template #content="{close}">
            <div class="dropdown-menu">
              <button
                class="button-default dropdown-item dropdown-item-icon"
@ -103,14 +107,11 @@

        <Checkbox
          :model-value="!!expertLevel"
+          class="expertMode"
          @update:modelValue="expertLevel = Number($event)"
        >
          {{ $t("settings.expert_mode") }}
        </Checkbox>
-        <span
-          id="unscrolled-content"
-          class="extra-content"
-        />
        <button
          v-if="currentUser"
          class="button-default logout-button"
--- a/src/components/settings_modal/tabs/profile_tab.js
+++ b/src/components/settings_modal/tabs/profile_tab.js
@ -43,7 +43,9 @@ const ProfileTab = {
      bannerPreview: null,
      background: null,
      backgroundPreview: null,
-      emailLanguage: this.$store.state.users.currentUser.language || ''
+      emailLanguage: this.$store.state.users.currentUser.language || '',
+      newPostTTLDays: this.$store.state.users.currentUser.status_ttl_days,
+      expirePosts: this.$store.state.users.currentUser.status_ttl_days !== null,
    }
  },
  components: {
@ -123,7 +125,8 @@ const ProfileTab = {
        display_name: this.newName,
        fields_attributes: this.newFields.filter(el => el != null),
        bot: this.bot,
-        show_role: this.showRole
+        show_role: this.showRole,
+        status_ttl_days: this.expirePosts ? this.newPostTTLDays : -1
        /* eslint-enable camelcase */
      }

--- a/src/components/settings_modal/tabs/profile_tab.scss
+++ b/src/components/settings_modal/tabs/profile_tab.scss
@ -4,6 +4,10 @@
    margin: 0;
  }

+  .expire-posts-days {
+    margin-left: 1em;
+  }
+
  .visibility-tray {
    padding-top: 5px;
  }
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@ -89,6 +89,20 @@
          {{ $t('settings.bot') }}
        </Checkbox>
      </p>
+      <p>
+        <Checkbox v-model="expirePosts">
+          {{ $t('settings.expire_posts_enabled') }}
+        </Checkbox>
+        <input
+          v-model="newPostTTLDays"
+          :disabled="!expirePosts"
+          type="number"
+          min="1"
+          max="730"
+          class="expire-posts-days"
+          :placeholder="$t('settings.expire_posts_input_placeholder')"
+        />
+      </p>
      <p>
        <interface-language-switcher
          :prompt-text="$t('settings.email_language')"
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
@ -284,7 +284,6 @@
    box-shadow: none;
    background: transparent;
    color: var(--faint, $fallback--faint);
-    align-self: stretch;
  }

  .theme-color-cl,
@ -318,11 +317,11 @@

 .extra-content {
  .apply-container {
+    padding-left: 15vw;
    display: flex;
    flex-direction: row;
-    justify-content: space-around;
+    justify-content: space-evenly;
    flex-grow: 1;
-
    .btn {
      flex-grow: 1;
      min-height: 2em;
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
@ -958,20 +958,22 @@
      v-if="isActive"
      to="#unscrolled-content"
    >
-      <div class="apply-container">
-        <button
-          class="btn button-default submit"
-          :disabled="!themeValid"
-          @click="setCustomTheme"
-        >
-          {{ $t('general.apply') }}
-        </button>
-        <button
-          class="btn button-default"
-          @click="clearAll"
-        >
-          {{ $t('settings.style.switcher.reset') }}
-        </button>
+      <div class="panel-body settings-footer">
+        <div class="apply-container">
+          <button
+            class="btn button-default submit"
+            :disabled="!themeValid"
+            @click="setCustomTheme"
+          >
+            {{ $t('general.apply') }}
+          </button>
+          <button
+            class="btn button-default"
+            @click="clearAll"
+          >
+            {{ $t('settings.style.switcher.reset') }}
+          </button>
+        </div>
      </div>
    </teleport>
  </div>
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@ -1,4 +1,4 @@
-@import '../../_variables.scss';
+@import "../../_variables.scss";

 .Status {
  min-width: 0;
@ -42,6 +42,10 @@
    display: flex;
    padding: var(--status-margin, $status-margin);

+    .content {
+      overflow: hidden;
+    }
+
    > * {
      min-width: 0;
    }
@ -130,6 +134,15 @@
  .heading-left {
    display: flex;
    min-width: 0;
+    flex-wrap: wrap;
+
+    img {
+      aspect-ratio: 1 / 1;
+    }
+
+    .nowrap {
+      white-space: nowrap;
+    }
  }

  .heading-right {
@ -139,6 +152,7 @@
    .button-unstyled {
      padding: 5px;
      margin: -5px;
+      height: min-content;

      &:hover svg {
        color: $fallback--lightText;
@ -185,7 +199,7 @@

  .reply-to-popover {
    .reply-to:hover::before {
-      content: '';
+      content: "";
      display: block;
      position: absolute;
      bottom: 0;
@ -195,13 +209,12 @@
    }

    .faint-link:hover {
-      // override default
      text-decoration: none;
    }

    &.-strikethrough {
      .reply-to::after {
-        content: '';
+        content: "";
        display: block;
        position: absolute;
        top: 50%;
@ -293,10 +306,12 @@
    position: relative;
    width: 100%;
    display: flex;
+    flex-wrap: wrap;
+    justify-content: left;
    margin-top: var(--status-margin, $status-margin);

    > * {
-      max-width: 4em;
+      min-width: fit-content;
      flex: 1;
    }
  }
@ -340,7 +355,7 @@
      margin-left: 0.2em;

      &::before {
-        content: ' ';
+        content: " ";
      }
    }

@ -387,7 +402,7 @@
    align-items: center;

    &::before {
-      content: '';
+      content: "";
      position: absolute;
      height: 100%;
      width: 1px;
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@ -166,19 +166,21 @@
                >
                  {{ status.user.name }}
                </h4>
-                <router-link
-                  class="account-name"
-                  :title="status.user.screen_name_ui"
-                  :to="userProfileLink"
-                >
-                  {{ status.user.screen_name_ui }}
-                </router-link>
-                <img
-                  v-if="!!(status.user && status.user.favicon)"
-                  class="status-favicon"
-                  :src="status.user.favicon"
-                  :title="faviconAlt(status)"
-                >
+                <span class="nowrap">
+                  <router-link
+                    class="account-name"
+                    :title="status.user.screen_name_ui"
+                    :to="userProfileLink"
+                  >
+                    @{{ status.user.screen_name_ui }}
+                  </router-link>
+                  <img
+                    v-if="!!(status.user && status.user.favicon)"
+                    class="status-favicon"
+                    :src="status.user.favicon"
+                    :title="faviconAlt(status)"
+                  >
+                </span>
              </div>

              <span class="heading-right">
@ -350,22 +352,25 @@
            </div>
          </div>

-          <StatusContent
-            ref="content"
-            :status="status"
-            :no-heading="noHeading"
-            :highlight="highlight"
-            :focused="isFocused"
-            :controlled-showing-tall="controlledShowingTall"
-            :controlled-expanding-subject="controlledExpandingSubject"
-            :controlled-showing-long-subject="controlledShowingLongSubject"
-            :controlled-toggle-showing-tall="controlledToggleShowingTall"
-            :controlled-toggle-expanding-subject="controlledToggleExpandingSubject"
-            :controlled-toggle-showing-long-subject="controlledToggleShowingLongSubject"
-            @mediaplay="addMediaPlaying($event)"
-            @mediapause="removeMediaPlaying($event)"
-            @parseReady="setHeadTailLinks"
-          />
+          <div class="content">
+            <StatusContent
+              ref="content"
+              class="status-content"
+              :status="status"
+              :no-heading="noHeading"
+              :highlight="highlight"
+              :focused="isFocused"
+              :controlled-showing-tall="controlledShowingTall"
+              :controlled-expanding-subject="controlledExpandingSubject"
+              :controlled-showing-long-subject="controlledShowingLongSubject"
+              :controlled-toggle-showing-tall="controlledToggleShowingTall"
+              :controlled-toggle-expanding-subject="controlledToggleExpandingSubject"
+              :controlled-toggle-showing-long-subject="controlledToggleShowingLongSubject"
+              @mediaplay="addMediaPlaying($event)"
+              @mediapause="removeMediaPlaying($event)"
+              @parseReady="setHeadTailLinks"
+            />
+          </div>

          <div
            v-if="inConversation && !isPreview && replies && replies.length"
@ -532,6 +537,6 @@
  </div>
 </template>

-<script src="./status.js" ></script>
+<script src="./status.js"></script>

 <style src="./status.scss" lang="scss"></style>
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@ -6,11 +6,13 @@ import TimelineMenuTabs from '../timeline_menu_tabs/timeline_menu_tabs.vue'
 import TimelineQuickSettings from './timeline_quick_settings.vue'
 import { debounce, throttle, keyBy } from 'lodash'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faCircleNotch, faCog } from '@fortawesome/free-solid-svg-icons'
+import { faCircleNotch, faCog, faPlus, faMinus } from '@fortawesome/free-solid-svg-icons'

 library.add(
  faCircleNotch,
-  faCog
+  faCog,
+  faPlus,
+  faMinus
 )

 const Timeline = {
@ -90,6 +92,15 @@ const Timeline = {
    },
    showPanelNavShortcuts () {
      return this.$store.getters.mergedConfig.showPanelNavShortcuts
+    },
+    currentUser () {
+      return this.$store.state.users.currentUser
+    },
+    tagData () {
+      return this.$store.state.tags.tags[this.tag]
+    },
+    tagFollowed () {
+      return this.$store.state.tags.tags[this.tag]?.following
    }
  },
  created () {
@ -118,6 +129,10 @@ const Timeline = {
    }
    window.addEventListener('keydown', this.handleShortKey)
    setTimeout(this.determineVisibleStatuses, 250)
+
+    if (this.tag) {
+      this.$store.dispatch('getTag', this.tag)
+    }
  },
  unmounted () {
    window.removeEventListener('scroll', this.handleScroll)
@ -232,6 +247,12 @@ const Timeline = {
    }, 200),
    handleVisibilityChange () {
      this.unfocused = document.hidden
+    },
+    followTag (tag) {
+      return this.$store.dispatch('followTag', tag)
+    },
+    unfollowTag (tag) {
+      return this.$store.dispatch('unfollowTag', tag)
    }
  },
  watch: {
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@ -21,6 +21,36 @@
        {{ $t('timeline.up_to_date') }}
      </div>
      <TimelineQuickSettings v-if="!embedded" />
+      <div
+        v-if="currentUser && tag !== undefined && tagData && !tagFollowed"
+        class="followTag"
+      >
+        <button
+          class="button-default"
+          :title="$t('timeline.follow_tag')"
+          @click="followTag(tag)"
+        >
+          <FAIcon
+            size="sm"
+            icon="plus"
+          />
+        </button>
+      </div>
+      <div
+        v-if="currentUser && tag !== undefined && tagData && tagFollowed"
+        class="followTag"
+      >
+        <button
+          class="button-default"
+          :title="$t('timeline.unfollow_tag')"
+          @click="unfollowTag(tag)"
+        >
+          <FAIcon
+            size="sm"
+            icon="minus"
+          />
+        </button>
+      </div>
    </div>
    <div :class="classes.body">
      <div
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@ -154,14 +154,6 @@ export default {
    unmuteUser () {
      this.$store.dispatch('unmuteUser', this.user.id)
    },
-    muteDomain () {
-      this.$store.dispatch('muteDomain', this.user.screen_name.split('@')[1])
-        .then(() => this.refetchRelationship())
-    },
-    unmuteDomain () {
-      this.$store.dispatch('unmuteDomain', this.user.screen_name.split('@')[1])
-        .then(() => this.refetchRelationship())
-    },
    subscribeUser () {
      return this.$store.dispatch('subscribeUser', this.user.id)
    },
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@ -67,6 +67,17 @@
                  icon="external-link-alt"
                />
              </a>
+              <a
+                v-if="isOtherUser"
+                :href="user.statusnet_profile_url + '.rss'"
+                target="_blank"
+                class="button-unstyled external-link-button"
+              >
+                <FAIcon
+                  class="icon"
+                  icon="rss"
+                />
+              </a>
              <AccountActions
                v-if="isOtherUser && loggedIn"
                :user="user"
@ -225,22 +236,6 @@
              {{ $t('user_card.mute') }}
            </button>
          </div>
-          <div>
-            <button
-              v-if="relationship.domain_blocking"
-              class="btn button-default btn-block toggled"
-              @click="unmuteDomain"
-            >
-              {{ $t('user_card.domain_muted') }}
-            </button>
-            <button
-              v-else
-              class="btn button-default btn-block"
-              @click="muteDomain"
-            >
-              {{ $t('user_card.mute_domain') }}
-            </button>
-          </div>
          <div>
            <button
              class="btn button-default btn-block"
--- a/src/components/user_profile/user_profile.js
+++ b/src/components/user_profile/user_profile.js
@ -33,6 +33,8 @@ const FriendList = withLoadMore({
  additionalPropNames: ['userId']
 })(List)

+const isUserPage = ({ name }) => name === 'user-profile' || name === 'external-user-profile'
+
 const UserProfile = {
  data () {
    return {
@ -182,12 +184,12 @@ const UserProfile = {
  },
  watch: {
    '$route.params.id': function (newVal) {
-      if (newVal) {
+      if (isUserPage(this.$route) && newVal) {
        this.switchUser(newVal)
      }
    },
    '$route.params.name': function (newVal) {
-      if (newVal) {
+      if (isUserPage(this.$route) && newVal) {
        this.switchUser(newVal)
      }
    },
--- a/src/i18n/de.json
+++ b/src/i18n/de.json
@ -135,7 +135,7 @@
        },
        "scope_in_timeline": {
            "direct": "Direkt",
-            "local": "Lokal - nur deine eigene Instanz kann diesen Beitrag sehen",
+            "local": "Lokal - nur deine eigene Instanz kann diese Nachricht sehen",
            "private": "Nur an Folgende",
            "public": "Öffentlich",
            "unlisted": "Nicht gelistet"
@ -345,10 +345,10 @@
        },
        "content_warning": "Inhaltswarnung (optional)",
        "default": "Sitze gerade im Hofbräuhaus",
-        "direct_warning_to_all": "Dieser Beitrag wird für alle erwähnten Benutzer sichtbar sein.",
-        "direct_warning_to_first_only": "Dieser Beitrag wird für alle Benutzer, die am Anfang der Nachricht erwähnt wurden, sichtbar sein.",
+        "direct_warning_to_all": "Diese Nachricht wird für alle erwähnten Benutzer sichtbar sein.",
+        "direct_warning_to_first_only": "Diese Nachricht wird für alle Benutzer, die am Anfang der Nachricht erwähnt wurden, sichtbar sein.",
        "edit_remote_warning": "Änderungen könnten auf manchen Instanzen nicht sichtbar sein!",
-        "edit_status": "Beitrag ändern",
+        "edit_status": "Nachricht bearbeiten",
        "edit_unsupported_warning": "Umfragen und Erwähnungen werden durch die Bearbeitung nicht geändert.",
        "empty_status_error": "Eine Nachricht ohne Text und ohne Anhänge kann nicht gesendet werden",
        "media_description": "Medienbeschreibung",
@ -360,17 +360,17 @@
        "preview": "Vorschau",
        "preview_empty": "Leer",
        "scope": {
-            "direct": "Direkt - Beitrag nur an erwähnte Profile",
-            "local": "Lokal - diesen Beitrag nicht föderieren",
-            "private": "Nur Follower - Beitrag nur für Follower sichtbar",
-            "public": "Öffentlich - Beitrag an öffentliche Zeitleisten",
+            "direct": "Direkt - Nachricht nur an erwähnte Profile",
+            "local": "Lokal - diese Nachricht nicht föderieren",
+            "private": "Nur Follower - Nachricht nur für Follower sichtbar",
+            "public": "Öffentlich - Nachricht an öffentliche Zeitleisten",
            "unlisted": "Nicht gelistet - Nicht in öffentlichen Zeitleisten anzeigen"
        },
        "scope_notice": {
            "local": "Dieser Bericht ist auf anderen Instanzen nicht sichbar",
-            "private": "Dieser Beitrag wird nur für deine Follower sichtbar sein",
-            "public": "Dieser Beitrag wird für alle sichtbar sein",
-            "unlisted": "Dieser Beitrag wird weder in der öffentlichen Zeitleiste noch im gesamten bekannten Netzwerk sichtbar sein"
+            "private": "Diese Nachricht wird nur für deine Follower sichtbar sein",
+            "public": "Diese Nachricht wird für alle sichtbar sein",
+            "unlisted": "Diese Nachricht wird weder in der öffentlichen Zeitleiste noch im gesamten bekannten Netzwerk sichtbar sein"
        }
    },
    "registration": {
@ -465,10 +465,10 @@
        "confirm_dialogs": "Bestätigung erforderlich für:",
        "confirm_dialogs_approve_follow": "Annehmen einer Followanfrage",
        "confirm_dialogs_block": "Jemanden blockieren",
-        "confirm_dialogs_delete": "Löschen eines Beitrages",
+        "confirm_dialogs_delete": "Löschen einer Nachricht",
        "confirm_dialogs_deny_follow": "Ablehnen einer Followanfrage",
        "confirm_dialogs_mute": "Jemanden stummschalten",
-        "confirm_dialogs_repeat": "Wiederholen eines Beitrages",
+        "confirm_dialogs_repeat": "Wiederholen einer Nachricht",
        "confirm_dialogs_unfollow": "Folgen beenden",
        "confirm_new_password": "Neues Passwort bestätigen",
        "confirmation_dialogs": "Bestätigungs-Einstellungen",
@ -535,7 +535,7 @@
        "hide_media_previews": "Verstecke Vorschau von Medien",
        "hide_muted_posts": "Verberge Beiträge stummgeschalteter Nutzer",
        "hide_muted_threads": "Stummgeschaltete Unterhaltungen ausblenden",
-        "hide_post_stats": "Beitragsstatistiken verbergen (z.B. die Anzahl der Favoriten)",
+        "hide_post_stats": "Nachrichtenstatistiken verbergen (z.B. die Anzahl der Favoriten)",
        "hide_shoutbox": "Shoutbox der Instanz verbergen",
        "hide_site_favicon": "Favicon der Instanz im Top-Panel nicht anzeigen",
        "hide_site_name": "Instanznamen im Top-Panel nicht anzeigen",
@ -562,7 +562,7 @@
        "loop_video_silent_only": "Nur Videos ohne Ton wiederholen (z.B. Mastodons \"gifs\")",
        "mascot": "Mastodon-FE-Maskottchen",
        "max_depth_in_thread": "Maximale Tiefe, bis zu der Unterhaltungen standardmäßig angezeigt werden",
-        "max_thumbnails": "Maximale Anzahl von Vorschaubildern pro Beitrag",
+        "max_thumbnails": "Maximale Anzahl von Vorschaubildern pro Nachricht (leer = keine Beschränkung)",
        "mention_link_bolden_you": "eigene Erwähnungen hervorheben",
        "mention_link_display": "Erwähungs-Links anzeigen",
        "mention_link_display_full": "immer als vollständige Namen (z. B. {'@'}foo{'@'}example.org)",
@ -638,7 +638,7 @@
        "panelRadius": "Panel",
        "pause_on_unfocused": "Streaming pausieren, wenn das Tab nicht fokussiert ist",
        "play_videos_in_modal": "Videos in größerem Medienfenster abspielen",
-        "post_status_content_type": "Standard-Beitragsart",
+        "post_status_content_type": "Standard-Format für Nachrichten",
        "posts": "Beiträge",
        "preload_images": "Bilder vorausladen",
        "presets": "Voreinstellungen",
@ -656,7 +656,7 @@
        "remove_alias": "Dieses Pseudonym entfernen",
        "remove_backup": "Entfernen",
        "render_mfm": "Misskey-Markdown darstellen",
-        "render_mfm_on_hover": "MFM-Animationen pausieren, solange sich der Mauszeiger nicht über dem Beitrag befindet",
+        "render_mfm_on_hover": "MFM-Animationen pausieren, solange sich der Mauszeiger nicht über der Nachricht befindet",
        "replies_in_timeline": "Antworten in der Zeitleiste",
        "reply_visibility_all": "Alle Antworten zeigen",
        "reply_visibility_following": "Zeige nur Antworten an mich oder an Benutzer, denen ich folge",
@ -680,7 +680,7 @@
        "security": "Sicherheit",
        "security_tab": "Sicherheit",
        "sensitive_by_default": "Alle Beiträge standardmäßig als heikel markieren",
-        "sensitive_if_subject": "Bilder automatisch als heikel markieren, wenn der Beitrag eine Inhaltswarnung hat",
+        "sensitive_if_subject": "Bilder automatisch als heikel markieren, wenn die Nachricht eine Inhaltswarnung hat",
        "set_new_avatar": "Setze einen neuen Avatar",
        "set_new_mascot": "Neues Maskottchen einstellen",
        "set_new_profile_background": "Setze einen neuen Hintergrund für dein Profil",
@ -758,8 +758,8 @@
                "components": {
                    "input": "Eingabefelder",
                    "interface": "Oberfläche",
-                    "post": "Beitragstext",
-                    "postCode": "Dicktengleicher Text in einem Beitrag (Rich-Text)"
+                    "post": "Nachrichtentext",
+                    "postCode": "nichtproportionaler Text in einer Nachricht (Rich-Text)"
                },
                "custom": "Benutzerdefiniert",
                "family": "Schriftname",
@ -790,7 +790,7 @@
                "component": "Komponente",
                "components": {
                    "avatar": "Benutzer-Avatar (in der Profilansicht)",
-                    "avatarStatus": "Benutzer-Avatar (in der Beitragsanzeige)",
+                    "avatarStatus": "Benutzer-Avatar (in der Nachrichtenanzeige)",
                    "button": "Schaltfläche",
                    "buttonHover": "Schaltfläche (hover)",
                    "buttonPressed": "Schaltfläche (gedrückt)",
@ -861,7 +861,7 @@
        "tooltipRadius": "Tooltips/Warnungen",
        "translation_language": "Sprache für automatische Übersetzungen",
        "tree_advanced": "Weitere Knöpfe zum Öffnen und Schließen von Antworten anzeigen",
-        "tree_fade_ancestors": "Vorgänger des aktuellen Beitrags schwach darstellen",
+        "tree_fade_ancestors": "Vorgänger der aktuellen Nachricht schwach darstellen",
        "type_domains_to_mute": "Tippe die Domains ein, die du stummschalten willst",
        "upload_a_photo": "Lade ein Foto hoch",
        "useStreamingApi": "Empfange Posts und Benachrichtigungen in Echtzeit",
@ -888,14 +888,14 @@
        "wordfilter": "Wortfilter"
    },
    "status": {