MANIFEST EDITING FUCK YEAH

src/components/settings_modal/admin_tabs/instance_tab.vue

@@ -44,6 +44,7 @@
             path=":pleroma.:instance.:instance_thumbnail"
           />
         </li>
+        <h4>{{ $t('admin_dash.instance.pwa.manifest') }}</H4>
         <li>
           <PWAManifestIconsSetting path=":pleroma.:manifest.:icons" />
         </li>

src/components/settings_modal/helpers/pwa_manifest_icons_setting.js

@@ -1,12 +1,69 @@
 import { clone } from 'lodash'
+import { fileTypeExt } from 'src/services/file_type/file_type.service.js'
+
 import Setting from './setting.js'
+import Select from 'src/components/select/select.vue'
+import Attachment from 'src/components/attachment/attachment.vue'
+import MediaUpload from 'src/components/media_upload/media_upload.vue'
 
 export default {
   ...Setting,
+  components: {
+    ...Setting.components,
+    Select,
+    Attachment,
+    MediaUpload
+  },
+  computed: {
+    ...Setting.computed,
+    purposeOptions () {
+      return ['any','monochrome','maskable'].map(value => ({
+        value,
+        key: value,
+        label: this.$t('admin_dash.instance.pwa.icon.' + value)
+      }))
+    }
+  },
   methods: {
     ...Setting.methods,
-    optionPresent (option) {
+    attachment (e) {
-      return this.valueSet.has(option)
+      const path = e[':src']
+      if (!path) {
+        return {
+          mimetype: '',
+          url: ''
+        }
+      }
+      const url = path.includes('://') ? path : this.$store.state.instance.server + path
+
+      return {
+        mimetype: fileTypeExt(url),
+        url
+      }
+    },
+    setMediaFile ({ event, index }) {
+      this.update({
+        event: {
+          target: {
+            value: event.url
+          },
+        },
+        index,
+        eventType: 'edit',
+        field: ':src'
+      })
+    },
+    setPurpose ({ event, index }) {
+      this.update({
+        event: {
+          target: {
+            value: event
+          },
+        },
+        index,
+        eventType: 'edit',
+        field: ':purpose'
+      })
     },
     getValue ({ event, field, index, eventType }) {
       switch (eventType) {
@@ -27,7 +84,6 @@ export default {
           const post = this.visibleState.slice(index + 1)
           const item = clone(this.visibleState[index])
           const string = event.target.value
-          console.log(item)
 
           if (!string)  {
             delete item[field]
@@ -35,8 +91,6 @@ export default {
             item[field] = string
           }
 
-          console.log(item)
-
           return [...pre, item, ...post]
         }
       }

src/components/settings_modal/helpers/pwa_manifest_icons_setting.vue

@@ -7,6 +7,12 @@
       class="pwa-label setting-label"
       :class="{ 'faint': shouldBeDisabled }"
     >
+      <ModifiedIndicator
+        :changed="isChanged"
+        :onclick="reset"
+      />
+      <ProfileSettingIndicator :is-profile="isProfileSetting" />
+      {{ ' ' }}
       <template v-if="backendDescriptionLabel">
         {{ backendDescriptionLabel + ' ' }}
       </template>
@@ -22,106 +28,130 @@
     >
       {{ backendDescriptionDescription + ' ' }}
     </p>
-    <ul class="setting-list setting-control">
+    <div class="setting-control">
-      <li
+      <ul class="item-list">
-        v-for="(item, index) in visibleState"
+        <li
-        :key="index"
+          class="no_items"
-      >
+          v-if="visibleState.length === 0"
-        <div class="setting-item">
+        >
-          <dl>
+          {{ $t('admin_dash.instance.pwa.no_icons') }}
-            <dt><code>purpose</code></dt>
+          <button
-            <dd>
+            v-if="visibleState.length === 0"
-              <input
+            class="button-default add-button"
-                class="input string-input"
+            @click="e => update({ eventType: 'add' })"
+          >
+            <FAIcon icon="plus" />
+          </button>
+        </li>
+        <li
+          v-for="(item, index) in visibleState"
+          :key="index"
+        >
+          <div class="icon-element">
+            <div class="src-field">
+              <Attachment
+                class="src-attachment"
+                :compact="compact"
+                :attachment="attachment(item)"
+                size="small"
+                hide-description
+              />
+              <div class="src-url">
+                <label for="path">{{ $t('settings.url') }}</label>
+                <input
+                  class="input string-input"
+                  :id="path"
+                  :disabled="shouldBeDisabled"
+                  :value="item[':src']"
+                  @change="event => update({ event, index, eventType: 'edit', field: ':src' })"
+                >
+              </div>
+              <MediaUpload
+                ref="mediaUpload"
+                class="src-upload media-upload-icon"
                 :class="{ disabled: shouldBeDisabled }"
-                :value="item[':purpose']"
+                normal-button
-                @change="e => update({ event: e, index, eventType: 'edit', field: ':purpose' })"
+                :accept-types="acceptTypes"
+                @uploaded="event => setMediaFile({ event, index })"
+              />
+            </div>
+            <dl>
+              <dt>{{ $t('admin_dash.instance.pwa.icon.purpose') }}</dt>
+              <dd>
+                <Select
+                  :class="{ disabled: shouldBeDisabled }"
+                  :disabled="shouldBeDisabled"
+                  :model-value="item[':purpose']"
+                  @update:model-value="event => setPurpose({ event, index })"
+                >
+                  <option
+                    v-for="(purpose, index) in purposeOptions"
+                    :key="index"
+                    :value="purpose.value"
+                  >
+                    {{ purpose.label }}
+                  </option>
+                </Select>
+              </dd>
+              <dt><code>sizes</code>{{ $t('admin_dash.instance.pwa.optional') }}</dt>
+              <dd>
+                <input
+                  class="input string-input"
+                  :class="{ disabled: shouldBeDisabled }"
+                  :value="item[':sizes']"
+                  @change="e => update({ event: e, index, eventType: 'edit', field: ':sizes' })"
+                >
+              </dd>
+              <dt><code>type</code>{{ $t('admin_dash.instance.pwa.optional') }}</dt>
+              <dd>
+                <input
+                  class="input string-input"
+                  :class="{ disabled: shouldBeDisabled }"
+                  :value="item[':type']"
+                  @change="e => update({ event: e, index, eventType: 'edit', field: ':type' })"
+                >
+              </dd>
+            </dl>
+            <div class="buttons">
+              <button
+                v-if="index === visibleState.length - 1"
+                class="button-default add-button"
+                @click="e => update({ eventType: 'add' })"
               >
-            </dd>
+                <FAIcon icon="plus" />
-            <dt><code>sizes</code></dt>
+              </button>
-            <dd>
+              <button
-              <input
+                class="button-default delete-button"
-                class="input string-input"
+                @click="e => update({ index, eventType: 'remove' })"
-                :class="{ disabled: shouldBeDisabled }"
-                :value="item[':sizes']"
-                @change="e => update({ event: e, index, eventType: 'edit', field: ':sizes' })"
               >
-            </dd>
+                <FAIcon icon="times" />
-            <dt><code>src</code></dt>
+              </button>
-            <dd>
+            </div>
-              <input
-                class="input string-input"
-                :class="{ disabled: shouldBeDisabled }"
-                :value="item[':src']"
-                @change="e => update({ event: e, index, eventType: 'edit', field: ':src' })"
-              >
-            </dd>
-            <dt><code>type</code></dt>
-            <dd>
-              <input
-                class="input string-input"
-                :class="{ disabled: shouldBeDisabled }"
-                :value="item[':type']"
-                @change="e => update({ event: e, index, eventType: 'edit', field: ':type' })"
-              >
-            </dd>
-          </dl>
-          <div class="buttons">
-            <button
-              v-if="index === visibleState.length - 1"
-              class="button-default add-button"
-              @click="e => update({ eventType: 'add' })"
-            >
-              <FAIcon icon="plus" />
-            </button>
-            <button
-              class="button-default delete-button"
-              @click="e => update({ index, eventType: 'remove' })"
-            >
-              <FAIcon icon="times" />
-            </button>
           </div>
-        </div>
+        </li>
-      </li>
+      </ul>
-    </ul>
+    </div>
-    <ModifiedIndicator
-      :changed="isChanged"
-      :onclick="reset"
-    />
-    <ProfileSettingIndicator :is-profile="isProfileSetting" />
     <DraftButtons />
   </div>
 </template>
 
 <script src="./pwa_manifest_icons_setting.js"></script>
 <style lang="scss">
-.PWAManifestIconsSetting {
+div.PWAManifestIconsSetting {
   &.setting-item {
     display: grid;
     grid-template-areas:
-      "label control"
+      "label"
-      "desc control"
+      "desc"
-      ". draft";
+      "control"
+      "draft";
     grid-template-rows: 2em auto 1fr;
+    grid-template-columns: 1fr;
   }
 
   .pwa-label.setting-label {
     align-self: end;
-
+    text-align: left;
-  }
-
-  .setting-description {
-    text-align: right;
-    align-self: start;
-  }
-
-  .setting-list {
-    display: grid;
-    gap: 0.5em;
-  }
-
-  .setting-item {
-    display: inline-block;
   }
 
   .buttons {
@@ -135,16 +165,22 @@
     }
   }
 
+  ul {
+    list-style: none;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, 12em);
+    grid-gap: 2em;
+  }
+
   dl {
-    display: inline-grid;
+    display: grid;
-    grid-template-columns: auto auto;
+    grid-template-columns: 1fr;
-    gap: 0.5em;
+    margin-top: 0.5em;
+    gap: 0.25em;
     align-items: baseline;
 
     dt {
-      display: inline;
       font-weight: 800;
-      text-align: right;
 
       &::after {
         content: ':'
@@ -152,9 +188,38 @@
     }
 
     dd {
-      display: inline;
       margin: 0
     }
   }
+
+  .src-field {
+    display: grid;
+    grid-template-columns: auto;
+    justify-items: center;
+    gap: 0.5em;
+
+    .src-attachment {
+      width: 10em;
+      height: 10em;
+      display: block;
+      margin-bottom: 0.5em;
+    }
+
+    .src-upload {
+      display: block;
+      width: 100%;
+    }
+
+    .src-url {
+      display: flex;
+      flex-direction: column;
+      gap: 0.25em;
+      width: 100%;
+
+      label {
+        display: block;
+      }
+    }
+  }
 }
 </style>

src/components/settings_modal/helpers/setting.js

@@ -161,7 +161,6 @@ export default {
       }
     },
     backendDescriptionDescription () {
-      console.log('LOL', this.description)
       if (this.description) return this.description
       if (this.realSource !== 'admin') return ''
       if (this.hideDescription) return null

src/i18n/en.json

@@ -1391,6 +1391,32 @@
       "always": "Always",
       "never": "Never"
     },
+    "instance": {
+      "instance": "Instance information",
+      "pwa": {
+        "manifest": "PWA Manifest",
+        "optional": "(optional)",
+        "no_icons": "No icons defined",
+        "icon": {
+          "purpose": "Icon purpose",
+          "any": "Any",
+          "monochrome": "Monochrome",
+          "maskable": "Maskable"
+        }
+      },
+      "branding": "Branding",
+      "access": "Instance access",
+      "rich_metadata": "Metadata",
+      "restrict": {
+        "header": "Restrict access for anonymous visitors",
+        "description": "Detailed setting for allowing/disallowing access to certain aspects of API. By default (indeterminate state) it will disallow if instance is not public, ticked checkbox means disallow access even if instance is public, unticked means allow access even if instance is private. Please note that unexpected behavior might happen if some settings are set, i.e. if profile access is disabled posts will show without profile information.",
+        "timelines": "Timelines access",
+        "profiles": "User profiles access",
+        "activities": "Statuses/activities access"
+      },
+      ":unauthenticated": "Unauthenticated",
+      ":all": "Everyone"
+    },
     "temp_overrides": {
       ":pleroma": {
         ":connections_pool": {