Add ability to configure manifest settings in admin-fe

src/views/settings/components/Inputs.vue

@@ -167,6 +167,23 @@
       </div>
       <el-button icon="el-icon-plus" circle @click="addRowToMascots"/>
     </div>
+    <div v-if="setting.key === ':icons'">
+      <div v-for="(icon, index) in iconsValue" :key="index" class="mascot-container">
+        <div v-for="([key, value], index) in icon" :key="index" class="setting-input">
+          <el-input :value="key" placeholder="key" class="name-input" @input="parseIcons($event, 'key', index)"/> :
+          <el-input :value="value" placeholder="value" class="value-input" @input="parseIcons($event, 'value', index)"/>
+          <el-button icon="el-icon-minus" circle @click="deleteIcondRow(index)"/>
+        </div>
+        <div class="icons-button-container">
+          <el-button icon="el-icon-plus" circle @click="addValueToIcons"/>
+          <span class="icons-button-desc">Add another `key - value` pair to this icon</span>
+        </div>
+        <div class="icons-button-container">
+          <el-button icon="el-icon-plus" circle @click="addIconToIcons"/>
+          <span class="icons-button-desc">Add another icon configuration</span>
+        </div>
+      </div>
+    </div>
     <p class="expl">{{ setting.description }}</p>
   </el-form-item>
 </template>
@@ -224,6 +241,9 @@ export default {
         this.processNestedData([value], this.settingGroup.key, this.setting.key, this.data[this.setting.key])
       }
     },
+    iconsValue() {
+      return this.data[':icons'].map(icon => Object.keys(icon).map(key => [key, icon[key]]))
+    },
     inputValue() {
       if ([':esshd', ':cors_plug', ':quack', ':http_signatures'].includes(this.settingGroup.group) && this.data[this.setting.key]) {
         return this.data[this.setting.key].value
@@ -276,6 +296,8 @@ export default {
     }
   },
   methods: {
+    addIconToIcons() {},
+    addValueToIcons() {},
     addRowToEditableKeyword() {
       const updatedValue = this.editableKeywordData(this.data).reduce((acc, el, i) => {
         return { ...acc, [el[0]]: el[1] }
@@ -308,6 +330,7 @@ export default {
       console.log(updatedValue)
       this.updateSetting(updatedValue, this.settingGroup.key, this.setting.key)
     },
+    deleteIcondRow(index) {},
     deleteMascotsRow(index) {
       const filteredValues = this.data[':mascots'].filter((el, i) => index !== i)
       const updatedValue = filteredValues.reduce((acc, el, i) => {
@@ -340,6 +363,7 @@ export default {
       console.log(updatedValue)
       this.updateSetting(updatedValue, this.settingGroup.key, this.setting.key)
     },
+    parseIcons(value, inputType, index) {},
     parseMascots(value, inputType, index) {
       const updatedValue = this.data[':mascots'].reduce((acc, el, i) => {
         if (index === i) {

src/views/settings/components/Instance.vue

@@ -4,28 +4,32 @@
       <setting :setting-group="instance" :data="instanceData"/>
     </el-form>
     <div class="line"/>
-    <el-form ref="uriSchemesData" :model="uriSchemesData" :label-width="labelWidth">
+    <el-form ref="uriSchemes" :model="uriSchemesData" :label-width="labelWidth">
       <setting :setting-group="uriSchemes" :data="uriSchemesData"/>
     </el-form>
     <div class="line"/>
-    <el-form ref="adminTokenData" :model="adminTokenData" :label-width="labelWidth">
+    <el-form ref="adminToken" :model="adminTokenData" :label-width="labelWidth">
       <setting :setting-group="adminToken" :data="adminTokenData"/>
     </el-form>
     <div class="line"/>
-    <el-form ref="scheduledActivityData" :model="scheduledActivityData" :label-width="labelWidth">
+    <el-form ref="scheduledActivity" :model="scheduledActivityData" :label-width="labelWidth">
       <setting :setting-group="scheduledActivity" :data="scheduledActivityData"/>
     </el-form>
     <div class="line"/>
-    <el-form ref="fetchInitialPostsData" :model="fetchInitialPostsData" :label-width="labelWidth">
+    <el-form ref="fetchInitialPosts" :model="fetchInitialPostsData" :label-width="labelWidth">
       <setting :setting-group="fetchInitialPosts" :data="fetchInitialPostsData"/>
     </el-form>
     <div class="line"/>
-    <el-form ref="suggestionsData" :model="suggestionsData" :label-width="labelWidth">
+    <el-form ref="manifest" :model="manifestData" :label-width="labelWidth">
+      <setting :setting-group="manifest" :data="manifestData"/>
+    </el-form>
+    <div class="line"/>
+    <el-form ref="suggestions" :model="suggestionsData" :label-width="labelWidth">
       <el-form-item label="Suggestions:"/>
       <setting :setting-group="suggestions" :data="suggestionsData"/>
     </el-form>
     <div class="line"/>
-    <el-form ref="pleromaUserData" :model="pleromaUserData" :label-width="labelWidth">
+    <el-form ref="pleromaUser" :model="pleromaUserData" :label-width="labelWidth">
       <setting :setting-group="pleromaUser" :data="pleromaUserData"/>
       <el-form-item>
         <el-button type="primary" @click="onSubmit">Submit</el-button>
@@ -75,6 +79,12 @@ export default {
     loading() {
       return this.settings.loading
     },
+    manifest() {
+      return this.settings.description.find(setting => setting.key === ':manifest')
+    },
+    manifestData() {
+      return this.settings.settings.pleroma[':manifest']
+    },
     pleromaUser() {
       return this.settings.description.find(setting => setting.key === 'Pleroma.User')
     },

src/views/settings/components/Setting.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="!loading">
-    <el-form-item v-if="settingGroup.description" class="options-paragraph-container">
+    <el-form-item v-if="settingGroup.description" class="description-container">
-      <p class="options-paragraph">{{ settingGroup.description }}</p>
+      <p class="description">{{ settingGroup.description }}</p>
     </el-form-item>
     <div v-if="settingGroup.key === 'Pleroma.Emails.Mailer'">
       <div v-for="setting in settingGroup.children.filter(setting => !setting.group)" :key="setting.key">

src/views/settings/styles/main.scss

@@ -8,6 +8,18 @@
     font-family: monospace;
     padding: 0 3px 0 3px;
   }
+  .description {
+    font-size: 14px;
+    color: #606266;
+    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei";
+    font-weight: 700;
+    line-height: 20px;
+    margin: 0 0 14px 0;
+  }
+  .description-container {
+    overflow-wrap: break-word;
+    margin-bottom: 0;
+  }
   .el-form-item {
     margin-right: 30px;
   }
@@ -31,6 +43,16 @@
   .highlight {
   background-color: #e6e6e6;
   }
+  .icons-button-container {
+    width: 100%;
+    margin-bottom: 5px;
+  }
+  .icons-button-desc {
+    font-size: 14px;
+    color: #606266;
+    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei";
+    margin-left: 5px;
+  }
   label {
     white-space: nowrap;
     overflow: hidden;
@@ -70,18 +92,6 @@
     width: 30%;
     margin-right: 8px
   }
-  .options-paragraph {
-    font-size: 14px;
-    color: #606266;
-    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei";
-    font-weight: 700;
-    line-height: 20px;
-    margin: 0 0 14px 0;
-  }
-  .options-paragraph-container {
-    overflow-wrap: break-word;
-    margin-bottom: 0;
-  }
   .pattern-input {
     width: 20%;
     margin-right: 8px