better frontends tab, now you can set default frontend

src/App.scss

@@ -646,6 +646,7 @@ option {
 }
 
 .cards-list {
+  list-style: none;
   display: grid;
   grid-auto-flow: row dense;
   grid-template-columns: 1fr 1fr;

src/components/settings_modal/admin_tabs/frontends_tab.js

@@ -51,6 +51,12 @@ const FrontendsTab = {
         .then((externalUser) => {
           this.$store.dispatch('loadFrontendsStuff')
         })
+    },
+    setDefault (frontend, suggestRef) {
+      const ref = suggestRef || frontend.refs[0]
+      const { name } = frontend
+
+      this.$store.commit('updateAdminDraft', { path: [':pleroma', ':frontends', ':primary'], value: { name, ref } })
     }
   }
 }

src/components/settings_modal/admin_tabs/frontends_tab.scss

@@ -8,6 +8,6 @@
     word-wrap: nowrap;
     white-space: nowrap;
     overflow-x: hidden;
-    max-width: 80%;
+    max-width: 10em;
   }
 }

src/components/settings_modal/admin_tabs/frontends_tab.vue

@@ -2,67 +2,157 @@
   <div class="frontends-tab" :label="$t('admin_dash.tabs.frontends')">
     <div class="setting-item">
       <h2>{{ $t('admin_dash.tabs.frontends') }}</h2>
-      <ul class="setting-list cards-list">
+      <p>{{ $t('admin_dash.frontend.wip_notice') }}</p>
-        <li v-for="frontend in frontends" :key="frontend.name">
+      <ul class="setting-list">
-          <strong>{{ frontend.name }}</strong>
+        <li>
-          <dl>
+          <h3>{{ $t('admin_dash.frontend.default_frontend') }}</h3>
-            <dt>{{ $t('admin_dash.frontend.repository') }}</dt>
+          <p>{{ $t('admin_dash.frontend.default_frontend_tip') }}</p>
-            <dd><a :href="frontend.git">{{ frontend.git }}</a></dd>
+          <p>{{ $t('admin_dash.frontend.default_frontend_tip2') }}</p>
-            <dt v-if="expertLevel">{{ $t('admin_dash.frontend.versions') }}</dt>
+        </li>
-            <dd v-if="expertLevel">{{ frontend.refs }}</dd>
+        <li>
-            <dt v-if="expertLevel">{{ $t('admin_dash.frontend.build_url') }}</dt>
+          <StringSetting path=":pleroma.:frontends.:primary.name">
-            <dd v-if="expertLevel">{{ frontend.build_url }}</dd>
+            NAME
-          </dl>
+          </StringSetting>
-          <div>
+        </li>
-            <span class="btn-group">
+        <li>
-              <button
+          <StringSetting path=":pleroma.:frontends.:primary.ref">
-                class="button button-default btn"
+            REF
-                type="button"
+          </StringSetting>
-                :title="$t('admin_dash.frontend.update')"
+        </li>
-                @click="update(frontend)"
+        <li>
-              >
+          <GroupSetting path=":pleroma.:frontends.:primary"/>
-                {{
-                    frontend.installed
-                    ? $t('admin_dash.frontend.reinstall')
-                    : $t('admin_dash.frontend.install')
-                }}
-              </button>
-              <Popover
-                v-if="frontend.refs.length > 1"
-                trigger="click"
-                class="button-dropdown"
-                placement="bottom"
-              >
-                <template #content>
-                  <div class="dropdown-menu">
-                    <button
-                      v-for="ref in frontend.refs"
-                      :key="ref"
-                      class="button-default dropdown-item"
-                      @click="update(frontend, ref)"
-                    >
-                      <i18n-t keypath="admin_dash.frontend.install_version">
-                        <template #version>
-                          <code>{{ ref }}</code>
-                        </template>
-                      </i18n-t>
-                    </button>
-                  </div>
-                </template>
-                <template #trigger>
-                  <button
-                    class="button button-default btn"
-                    type="button"
-                    :title="$t('admin_dash.frontend.update')"
-                  >
-                    <FAIcon icon="chevron-down" />
-                  </button>
-                </template>
-              </Popover>
-            </span>
-          </div>
         </li>
       </ul>
+      <div class="setting-list">
+        <h3>{{ $t('admin_dash.frontend.available_frontends') }}</h3>
+        <ul class="cards-list">
+          <li v-for="frontend in frontends" :key="frontend.name">
+            <strong>{{ frontend.name }}</strong>
+            {{ ' ' }}
+            <span v-if="adminDraft[':pleroma'][':frontends'][':primary'].name === frontend.name">
+              <i18n-t
+                keypath="admin_dash.frontend.is_default"
+                v-if="adminDraft[':pleroma'][':frontends'][':primary'].ref === frontend.refs[0]"
+              />
+              <i18n-t
+                keypath="admin_dash.frontend.is_default_custom"
+                v-else
+              >
+                <template #version>
+                  <code>{{ adminDraft[':pleroma'][':frontends'][':primary'].ref }}</code>
+                </template>
+              </i18n-t>
+            </span>
+            <dl>
+              <dt>{{ $t('admin_dash.frontend.repository') }}</dt>
+              <dd><a :href="frontend.git" target="_blank">{{ frontend.git }}</a></dd>
+              <template v-if="expertLevel">
+                <dt>{{ $t('admin_dash.frontend.versions') }}</dt>
+                <dd v-for="ref in frontend.refs" :key="ref"><code>{{ ref }}</code></dd>
+              </template>
+              <dt v-if="expertLevel">{{ $t('admin_dash.frontend.build_url') }}</dt>
+              <dd v-if="expertLevel"><a :href="frontend.build_url" target="_blank">{{ frontend.build_url }}</a></dd>
+            </dl>
+            <div>
+              <span class="btn-group">
+                <button
+                  class="button button-default btn"
+                  type="button"
+                  :title="$t('admin_dash.frontend.update')"
+                  @click="update(frontend)"
+                >
+                  {{
+                      frontend.installed
+                      ? $t('admin_dash.frontend.reinstall')
+                      : $t('admin_dash.frontend.install')
+                  }}
+                </button>
+                <Popover
+                  v-if="frontend.refs.length > 1"
+                  trigger="click"
+                  class="button-dropdown"
+                  placement="bottom"
+                >
+                  <template #content>
+                    <div class="dropdown-menu">
+                      <button
+                        v-for="ref in frontend.refs"
+                        :key="ref"
+                        class="button-default dropdown-item"
+                        @click="update(frontend, ref)"
+                      >
+                        <i18n-t keypath="admin_dash.frontend.install_version">
+                          <template #version>
+                            <code>{{ ref }}</code>
+                          </template>
+                        </i18n-t>
+                      </button>
+                    </div>
+                  </template>
+                  <template #trigger>
+                    <button
+                      class="button button-default btn dropdown-button"
+                      type="button"
+                      :title="$t('admin_dash.frontend.update')"
+                    >
+                      <FAIcon icon="chevron-down" />
+                    </button>
+                  </template>
+                </Popover>
+              </span>
+              <span class="btn-group" v-if="frontend.name !== 'admin-fe'">
+                <button
+                  class="button button-default btn"
+                  type="button"
+                  :disabled="
+                             adminDraft[':pleroma'][':frontends'][':primary'].name === frontend.name &&
+                             adminDraft[':pleroma'][':frontends'][':primary'].ref === frontend.refs[0]
+                             "
+                  :title="$t('admin_dash.frontend.update')"
+                  @click="setDefault(frontend)"
+                >
+                  {{
+                      $t('admin_dash.frontend.set_default')
+                  }}
+                </button>
+                {{ ' ' }}
+                <Popover
+                  v-if="frontend.refs.length > 1"
+                  trigger="click"
+                  class="button-dropdown"
+                  placement="bottom"
+                >
+                  <template #content>
+                    <div class="dropdown-menu">
+                      <button
+                        v-for="ref in frontend.refs.slice(1)"
+                        :key="ref"
+                        class="button-default dropdown-item"
+                        @click="setDefault(frontend, ref)"
+                      >
+                        <i18n-t keypath="admin_dash.frontend.set_default_version">
+                          <template #version>
+                            <code>{{ ref }}</code>
+                          </template>
+                        </i18n-t>
+                      </button>
+                    </div>
+                  </template>
+                  <template #trigger>
+                    <button
+                      class="button button-default btn dropdown-button"
+                      type="button"
+                      :title="$t('admin_dash.frontend.update')"
+                    >
+                      <FAIcon icon="chevron-down" />
+                    </button>
+                  </template>
+                </Popover>
+              </span>
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
   </div>
 </template>

src/components/settings_modal/helpers/group_setting.js

@@ -7,7 +7,6 @@ export default {
   computed: {
     ...Setting.computed,
     isDirty () {
-      console.log(this.state, this.draft)
       return !isEqual(this.state, this.draft)
     }
   }

src/components/settings_modal/helpers/setting.js

@@ -61,7 +61,7 @@ export default {
       // TODO allow passing shared draft object?
       get () {
         if (this.realSource === 'admin') {
-          return get(this.$store.state.adminSettings.draft, this.path)
+          return get(this.$store.state.adminSettings.draft, this.canonPath)
         } else {
           return this.localDraft
         }
@@ -75,7 +75,7 @@ export default {
       }
     },
     state () {
-      const value = get(this.configSource, this.path)
+      const value = get(this.configSource, this.canonPath)
       if (value === undefined) {
         return this.defaultState
       } else {

src/components/settings_modal/helpers/shared_computed_object.js

@@ -10,6 +10,9 @@ const SharedComputedObject = () => ({
   },
   adminConfig () {
     return this.$store.state.adminSettings.config
+  },
+  adminDraft () {
+    return this.$store.state.adminSettings.draft
   }
 })
 

src/components/settings_modal/settings_modal.scss

@@ -43,6 +43,9 @@
 
       .btn {
         min-height: 2em;
+      }
+
+      .btn:not(.dropdown-button) {
         padding: 0 2em;
       }
     }

src/components/settings_modal/settings_modal_admin_content.js

@@ -51,6 +51,9 @@ const SettingsModalAdminContent = {
     adminDbLoaded () {
       return this.$store.state.adminSettings.loaded
     },
+    adminDescriptionsLoaded () {
+      return this.$store.state.adminSettings.descriptions !== null
+    },
     noDb () {
       return this.$store.state.adminSettings.dbConfigEnabled === false
     }

src/components/settings_modal/settings_modal_admin_content.vue

@@ -1,5 +1,6 @@
 <template>
   <tab-switcher
+    v-if="adminDescriptionsLoaded && (noDb || adminDbLoaded)"
     ref="tabSwitcher"
     class="settings_tab-switcher"
     :side-tab-bar="true"

src/i18n/en.json

@@ -879,8 +879,17 @@
       "versions": "Available versions",
       "build_url": "Build URL",
       "reinstall": "Reinstall",
+      "is_default": "(Default)",
+      "is_default_custom": "(Default, version: {version})",
       "install": "Install",
-      "install_version": "Install version {version}"
+      "install_version": "Install version {version}",
+      "set_default": "Set default",
+      "set_default_version": "Set version {version} as default",
+      "wip_notice": "Please note that this section is a WIP and lacks certain features as backend implementation of front-end management is incomplete.",
+      "default_frontend": "Default front-end",
+      "default_frontend_tip": "Default front-end will be shown to all users. Currently there's no way to for a user to select personal front-end. If you switch away from PleromaFE you'll most likely have to use old and buggy AdminFE to do instance configuration until we replace it.",
+      "default_frontend_tip2": "WIP: Since Pleroma backend doesn't properly list all installed frontends you'll have to enter name and reference manually. List below provides shortcuts to fill the values.",
+      "available_frontends": "Available for install"
     }
   },
   "time": {