branding/manifest part done

src/components/settings_modal/helpers/color_setting.js

@@ -0,0 +1,17 @@
+import Setting from './setting.js'
+import ColorInput from 'src/components/color_input/color_input.vue'
+
+export default {
+  ...Setting,
+  components: {
+    ...Setting.components,
+    ColorInput
+  },
+  methods: {
+    ...Setting.methods,
+    getValue (e) {
+      console.log(e)
+      return e
+    }
+  }
+}

src/components/settings_modal/helpers/color_setting.vue

@@ -0,0 +1,54 @@
+<template>
+  <label
+    v-if="matchesExpertLevel"
+    class="ColorSetting"
+  >
+    <label
+      v-if="!hideLabel"
+      :for="path"
+      class="setting-label"
+      :class="{ 'faint': shouldBeDisabled }"
+    >
+      <template v-if="backendDescriptionLabel">
+        {{ backendDescriptionLabel + ' ' }}
+      </template>
+      <template v-else-if="source === 'admin'">
+        MISSING LABEL FOR {{ path }}
+      </template>
+      <slot v-else />
+    </label>
+    {{ ' ' }}
+    <ColorInput
+      :id="path"
+      class="color-setting-input"
+      :class="{ disabled: shouldBeDisabled }"
+      :disabled="shouldBeDisabled"
+      :placeholder="backendDescriptionSuggestions"
+      :model-value="realDraftMode ? draft : state"
+      @update:model-value="update"
+    />
+    {{ ' ' }}
+    <ModifiedIndicator
+      :changed="isChanged"
+      :onclick="reset"
+    />
+    <ProfileSettingIndicator :is-profile="isProfileSetting" />
+    <DraftButtons v-if="!hideDraftButtons" />
+    <p
+      v-if="backendDescriptionDescription"
+      class="setting-description"
+      :class="{ 'faint': shouldBeDisabled }"
+    >
+      {{ backendDescriptionDescription + ' ' }}
+    </p>
+  </label>
+</template>
+
+<style lang="scss">
+.ColorSetting {
+  .color-setting-input {
+    vertical-align: middle;
+  }
+}
+</style>
+<script src="./color_setting.js"></script>

src/components/settings_modal/helpers/list_tuple_setting.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="matchesExpertLevel"
-    class="ListSetting"
+    class="ListTupleSetting"
   >
     <label
       class="setting-label"
@@ -80,7 +80,7 @@
 </template>
 
 <style lang="scss">
-.ListSetting {
+.ListTupleSetting {
   .btn-group {
     display: flex
   }
@@ -89,6 +89,7 @@
     display: inline-grid;
     grid-template-columns: auto auto;
     gap: 0.5em;
+    align-items: baseline;
 
     dt {
       display: inline;

src/components/settings_modal/helpers/pwa_manifest_icons_setting.js

@@ -0,0 +1,45 @@
+import { clone } from 'lodash'
+import Setting from './setting.js'
+
+export default {
+  ...Setting,
+  methods: {
+    ...Setting.methods,
+    optionPresent (option) {
+      return this.valueSet.has(option)
+    },
+    getValue ({ event, field, index, eventType }) {
+      switch (eventType) {
+        case 'add': {
+          const res = [...this.visibleState, {}]
+          return res
+        }
+
+        case 'remove': {
+          const pre = this.visibleState.slice(0, index)
+          const post = this.visibleState.slice(index + 1)
+
+          return [...pre, ...post]
+        }
+
+        case 'edit': {
+          const pre = this.visibleState.slice(0, index)
+          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]
+          } else {
+            item[field] = string
+          }
+
+          console.log(item)
+
+          return [...pre, item, ...post]
+        }
+      }
+    }
+  }
+}

src/components/settings_modal/helpers/pwa_manifest_icons_setting.vue

@@ -0,0 +1,135 @@
+<template>
+  <div
+    v-if="matchesExpertLevel"
+    class="PWAManifestIconsSetting"
+  >
+    <label
+      class="setting-label"
+      :class="{ 'faint': shouldBeDisabled }"
+    >
+      <template v-if="backendDescriptionLabel">
+        {{ backendDescriptionLabel + ' ' }}
+      </template>
+      <template v-else-if="source === 'admin'">
+        MISSING LABEL FOR {{ path }}
+      </template>
+      <slot v-else />
+    </label>
+    <p
+      v-if="backendDescriptionDescription"
+      class="setting-description"
+      :class="{ 'faint': shouldBeDisabled }"
+    >
+      {{ backendDescriptionDescription + ' ' }}
+    </p>
+    <ul class="setting-list">
+      <li v-for="(item, index) in visibleState">
+        <div>
+          <dl>
+            <dt><code>purpose</code></dt>
+            <dd>
+              <input
+                class="input string-input"
+                :class="{ disabled: shouldBeDisabled }"
+                :value="item[':purpose']"
+                @change="e => update({ event: e, index, eventType: 'edit', field: ':purpose' })"
+              >
+            </dd>
+            <dt><code>sizes</code></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>src</code></dt>
+            <dd>
+              <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>
+    </ul>
+    <ModifiedIndicator
+      :changed="isChanged"
+      :onclick="reset"
+    />
+    <ProfileSettingIndicator :is-profile="isProfileSetting" />
+    <DraftButtons />
+  </div>
+</template>
+
+<style lang="scss">
+.PWAManifestIconsSetting {
+  display: inline-block;
+  .setting-list {
+    display: grid;
+    gap: 0.5em;
+  }
+
+  .buttons {
+    display: flex;
+    gap: 0.5em;
+    justify-content: right;
+    margin-top: 0.5em;
+
+    button {
+      line-height: 2;
+    }
+  }
+
+  dl {
+    display: inline-grid;
+    grid-template-columns: auto auto;
+    gap: 0.5em;
+    align-items: baseline;
+
+    dt {
+      display: inline;
+      font-weight: 800;
+      text-align: right;
+
+      &::after {
+        content: ':'
+      }
+    }
+
+    dd {
+      display: inline;
+      margin: 0
+    }
+  }
+}
+</style>
+<script src="./pwa_manifest_icons_setting.js"></script>

src/components/settings_modal/helpers/setting.js

@@ -242,7 +242,6 @@ export default {
       if (this.path == null) return null
       if (this.descriptionPathOverride) return this.descriptionPathOverride
       const path = Array.isArray(this.path) ? this.path : this.path.split('.')
-      console.log(this.path, this.subgroup)
       if (this.subgroup) {
         return [
             ...path.slice(0, path.length - 1),