Add table with available frontends on Frontend settings tab

src/lang/en.js

@@ -455,7 +455,13 @@ export default {
     uploadImage: 'Upload image',
     remove: 'Remove',
     instancePanel: 'Instance Panel Document',
-    termsOfServices: 'Terms of Service'
+    termsOfServices: 'Terms of Service',
+    availableFrontends: 'Available Frontends',
+    installFrontends: 'This is the list of available frontends. You can switch to one of the listed frontends or specify all the required options and install another frontend',
+    install: 'Install',
+    installed: 'Installed',
+    name: 'Name',
+    git: 'Git'
   },
   invites: {
     inviteTokens: 'Invite tokens',
@@ -540,6 +546,5 @@ export default {
     emptyPack: 'This emoji pack is empty',
     emojiWarning: 'Pack names cannot include any of the following characters: # / < > & +',
     image: 'Image'
-
   }
 }

src/views/settings/components/Frontend.vue

 <template>
   <div v-if="!loading" :class="isSidebarOpen" class="form-container">
+    <el-form :label-position="labelPosition" :label-width="labelWidth">
+      <el-form-item class="description-container">
+        <span class="setting-label">{{ $t('settings.availableFrontends') }}</span>
+        <span class="expl no-top-margin"><p>{{ $t('settings.installFrontends') }}</p></span>
+      </el-form-item>
+      <el-form-item>
+        <el-table
+          :data="availableFrontends"
+          class="frontends-table">
+          <el-table-column
+            :label="$t('settings.name')"
+            prop="name"
+            width="120"/>
+          <el-table-column
+            :label="$t('settings.git')"
+            prop="git"/>
+          <el-table-column
+            :label="$t('settings.installed')"
+            prop="installed">
+            <template slot-scope="scope">
+              <el-button
+                v-if="!scope.row.installed"
+                disabled
+                type="text"
+                size="small">
+                {{ $t('settings.installed') }}
+              </el-button>
+              <el-button
+                v-else
+                type="text"
+                size="small"
+                @click="installFrontend(scope.row)">
+                {{ $t('settings.install') }}
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-form-item>
+    </el-form>
     <el-form :model="frontendData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="frontend" :data="frontendData"/>
     </el-form>
@@ -56,6 +95,9 @@ export default {
     assetsData() {
       return _.get(this.settings.settings, [':pleroma', ':assets']) || {}
     },
+    availableFrontends() {
+      return this.settings.frontends
+    },
     chat() {
       return this.settings.description.find(setting => setting.key === ':chat')
     },

src/views/settings/styles/main.scss

@@ -75,6 +75,10 @@
   .form-container {
     margin-bottom: 80px;
   }
+  .frontends-table {
+    width: 100%;
+    margin-right: 30px;
+  }
   .grouped-settings-header {
     margin: 0 0 14px 0;
   }