From f354cef01065ab3ff9b00e522ec6ae9b1aabcc97 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 1 Nov 2023 21:44:14 +0200
Subject: [PATCH 1/9] fix no feedback and no dropdown close for actions in
 frontends tab, better default suggest

---
 .../admin_tabs/frontends_tab.js               | 40 +++++++++++++++++--
 .../admin_tabs/frontends_tab.vue              | 22 +++++++---
 src/i18n/en.json                              |  4 +-
 src/modules/adminSettings.js                  |  1 +
 4 files changed, 58 insertions(+), 9 deletions(-)

diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.js b/src/components/settings_modal/admin_tabs/frontends_tab.js
index a2c27c2a..57825a46 100644
--- a/src/components/settings_modal/admin_tabs/frontends_tab.js
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.js
@@ -42,18 +42,52 @@ const FrontendsTab = {
     ...SharedComputedObject()
   },
   methods: {
+    canInstall (frontend) {
+      const fe = this.frontends.find(f => f.name === frontend.name)
+      if (!fe) return false
+      return fe.refs.includes(frontend.ref)
+    },
+    getSuggestedRef (frontend) {
+      const defaultFe = this.adminDraft[':pleroma'][':frontends'][':primary']
+      if (defaultFe.name === frontend.name && this.canInstall(defaultFe)) {
+        return defaultFe.ref
+      } else {
+        return frontend.refs[0]
+      }
+    },
     update (frontend, suggestRef) {
-      const ref = suggestRef || frontend.refs[0]
+      const ref = suggestRef || this.getSuggestedRef(frontend)
       const { name } = frontend
       const payload = { name, ref }
 
       this.$store.state.api.backendInteractor.installFrontend({ payload })
-        .then((externalUser) => {
+        .then(async (response) => {
           this.$store.dispatch('loadFrontendsStuff')
+          if (response.error) {
+            const reason = await response.error.json()
+            this.$store.dispatch('pushGlobalNotice', {
+              level: 'error',
+              messageKey: 'admin_dash.frontend.failure_installing_frontend',
+              messageArgs: {
+                version: name + '/' + ref,
+                reason: reason.error
+              },
+              timeout: 5000
+            })
+          } else {
+            this.$store.dispatch('pushGlobalNotice', {
+              level: 'success',
+              messageKey: 'admin_dash.frontend.success_installing_frontend',
+              messageArgs: {
+                version: name + '/' + ref
+              },
+              timeout: 2000
+            })
+          }
         })
     },
     setDefault (frontend, suggestRef) {
-      const ref = suggestRef || frontend.refs[0]
+      const ref = suggestRef || this.getSuggestedRef(frontend)
       const { name } = frontend
 
       this.$store.commit('updateAdminDraft', { path: [':pleroma', ':frontends', ':primary'], value: { name, ref } })
diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.vue b/src/components/settings_modal/admin_tabs/frontends_tab.vue
index 13b8fa6b..3b8d0eab 100644
--- a/src/components/settings_modal/admin_tabs/frontends_tab.vue
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.vue
@@ -86,6 +86,11 @@
                       ? $t('admin_dash.frontend.reinstall')
                       : $t('admin_dash.frontend.install')
                   }}
+                  <code>
+                    {{
+                      getSuggestedRef(frontend)
+                    }}
+                  </code>
                 </button>
                 <Popover
                   v-if="frontend.refs.length > 1"
@@ -93,13 +98,14 @@
                   class="button-dropdown"
                   placement="bottom"
                 >
-                  <template #content>
+                  <template #content="{close}">
                     <div class="dropdown-menu">
                       <button
                         v-for="ref in frontend.refs"
                         :key="ref"
                         class="button-default dropdown-item"
-                        @click="update(frontend, ref)"
+                        @click.prevent="update(frontend, ref)"
+                        @click="close"
                       >
                         <i18n-t keypath="admin_dash.frontend.install_version">
                           <template #version>
@@ -136,6 +142,11 @@
                   {{
                     $t('admin_dash.frontend.set_default')
                   }}
+                  <code>
+                    {{
+                      getSuggestedRef(frontend)
+                    }}
+                  </code>
                 </button>
                 {{ ' ' }}
                 <Popover
@@ -144,13 +155,14 @@
                   class="button-dropdown"
                   placement="bottom"
                 >
-                  <template #content>
+                  <template #content="{close}">
                     <div class="dropdown-menu">
                       <button
-                        v-for="ref in frontend.refs.slice(1)"
+                        v-for="ref in frontend.installedRefs || frontend.refs"
                         :key="ref"
                         class="button-default dropdown-item"
-                        @click="setDefault(frontend, ref)"
+                        @click.prevent="setDefault(frontend, ref)"
+                        @click="close"
                       >
                         <i18n-t keypath="admin_dash.frontend.set_default_version">
                           <template #version>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 1658a25d..7955e275 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -914,7 +914,9 @@
       "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"
+      "available_frontends": "Available for install",
+      "failure_installing_frontend": "Failed to install frontend {version}: {reason}",
+      "success_installing_frontend": "Frontend {version} successfully installed"
     },
     "temp_overrides": {
       ":pleroma": {
diff --git a/src/modules/adminSettings.js b/src/modules/adminSettings.js
index cad9c0ca..3df3647f 100644
--- a/src/modules/adminSettings.js
+++ b/src/modules/adminSettings.js
@@ -26,6 +26,7 @@ const adminSettingsStorage = {
     },
     setAvailableFrontends (state, { frontends }) {
       state.frontends = frontends.map(f => {
+        f.installedRefs = f.installed_refs
         if (f.name === 'pleroma-fe') {
           f.refs = ['master', 'develop']
         } else {

From c99390e864ef4367e32813432ff236b2129bbf80 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 1 Nov 2023 21:48:05 +0200
Subject: [PATCH 2/9] make notices appear above admin dash modal

---
 src/components/global_notice_list/global_notice_list.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/global_notice_list/global_notice_list.vue b/src/components/global_notice_list/global_notice_list.vue
index 0e58476f..9e9ec7aa 100644
--- a/src/components/global_notice_list/global_notice_list.vue
+++ b/src/components/global_notice_list/global_notice_list.vue
@@ -32,7 +32,7 @@
   top: calc(var(--navbar-height) + 0.5em);
   width: 100%;
   pointer-events: none;
-  z-index: var(--ZI_navbar_popovers);
+  z-index: var(--ZI_modals_popovers);
   display: flex;
   flex-direction: column;
   align-items: center;

From b6a4b62058ca8e6a1a0f91aa23cf3cd78cd33009 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 1 Nov 2023 21:53:50 +0200
Subject: [PATCH 3/9] add better indication that stuff is happening

---
 .../settings_modal/admin_tabs/frontends_tab.js   | 11 +++++++++++
 .../settings_modal/admin_tabs/frontends_tab.scss | 16 ++++++++++++++++
 .../settings_modal/admin_tabs/frontends_tab.vue  |  3 ++-
 3 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.js b/src/components/settings_modal/admin_tabs/frontends_tab.js
index 57825a46..57af2c27 100644
--- a/src/components/settings_modal/admin_tabs/frontends_tab.js
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.js
@@ -4,6 +4,7 @@ import IntegerSetting from '../helpers/integer_setting.vue'
 import StringSetting from '../helpers/string_setting.vue'
 import GroupSetting from '../helpers/group_setting.vue'
 import Popover from 'src/components/popover/popover.vue'
+import PanelLoading from 'src/components/panel_loading/panel_loading.vue'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -22,12 +23,18 @@ const FrontendsTab = {
       defaultSource: 'admin'
     }
   },
+  data () {
+    return {
+      working: false
+    }
+  },
   components: {
     BooleanSetting,
     ChoiceSetting,
     IntegerSetting,
     StringSetting,
     GroupSetting,
+    PanelLoading,
     Popover
   },
   created () {
@@ -60,7 +67,11 @@ const FrontendsTab = {
       const { name } = frontend
       const payload = { name, ref }
 
+      this.working = true
       this.$store.state.api.backendInteractor.installFrontend({ payload })
+        .finally(() => {
+          this.working = false
+        })
         .then(async (response) => {
           this.$store.dispatch('loadFrontendsStuff')
           if (response.error) {
diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.scss b/src/components/settings_modal/admin_tabs/frontends_tab.scss
index e3e04bc6..420d20b3 100644
--- a/src/components/settings_modal/admin_tabs/frontends_tab.scss
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.scss
@@ -3,6 +3,22 @@
     padding: 0;
   }
 
+  .relative {
+    position: relative;
+  }
+
+  .overlay {
+    position: absolute;
+    background: var(--bg);
+    // fix buttons showing through
+    z-index: 2;
+    opacity: 0.9;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+
   dd {
     text-overflow: ellipsis;
     word-wrap: nowrap;
diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.vue b/src/components/settings_modal/admin_tabs/frontends_tab.vue
index 3b8d0eab..08e621fa 100644
--- a/src/components/settings_modal/admin_tabs/frontends_tab.vue
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.vue
@@ -24,7 +24,8 @@
           </ul>
         </li>
       </ul>
-      <div class="setting-list">
+      <div class="setting-list relative">
+        <PanelLoading class="overlay" v-if="working"/>
         <h3>{{ $t('admin_dash.frontend.available_frontends') }}</h3>
         <ul class="cards-list">
           <li

From ce109c38f3b51752f97c04c6b9df59a794212f8a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 1 Nov 2023 22:10:46 +0200
Subject: [PATCH 4/9] add favicon setting and add compact layout for
 AttachmentSetting

---
 .../admin_tabs/instance_tab.vue               |  6 ++-
 .../helpers/attachment_setting.js             |  1 +
 .../helpers/attachment_setting.vue            | 38 +++++++++++++++++--
 3 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/src/components/settings_modal/admin_tabs/instance_tab.vue b/src/components/settings_modal/admin_tabs/instance_tab.vue
index a6be776b..a0e3351e 100644
--- a/src/components/settings_modal/admin_tabs/instance_tab.vue
+++ b/src/components/settings_modal/admin_tabs/instance_tab.vue
@@ -6,6 +6,10 @@
         <li>
           <StringSetting path=":pleroma.:instance.:name" />
         </li>
+        <!-- See https://git.pleroma.social/pleroma/pleroma/-/merge_requests/3963 -->
+        <li v-if="adminDraft[':pleroma'][':instance'][':favicon'] !== undefined">
+          <AttachmentSetting compact path=":pleroma.:instance.:favicon" />
+        </li>
         <li>
           <StringSetting path=":pleroma.:instance.:email" />
         </li>
@@ -16,7 +20,7 @@
           <StringSetting path=":pleroma.:instance.:short_description" />
         </li>
         <li>
-          <AttachmentSetting path=":pleroma.:instance.:instance_thumbnail" />
+          <AttachmentSetting compact path=":pleroma.:instance.:instance_thumbnail" />
         </li>
         <li>
           <AttachmentSetting path=":pleroma.:instance.:background_image" />
diff --git a/src/components/settings_modal/helpers/attachment_setting.js b/src/components/settings_modal/helpers/attachment_setting.js
index ac5c6f86..c4c04b2b 100644
--- a/src/components/settings_modal/helpers/attachment_setting.js
+++ b/src/components/settings_modal/helpers/attachment_setting.js
@@ -7,6 +7,7 @@ export default {
   ...Setting,
   props: {
     ...Setting.props,
+    compact: Boolean,
     acceptTypes: {
       type: String,
       required: false,
diff --git a/src/components/settings_modal/helpers/attachment_setting.vue b/src/components/settings_modal/helpers/attachment_setting.vue
index bbc5172c..b50231f2 100644
--- a/src/components/settings_modal/helpers/attachment_setting.vue
+++ b/src/components/settings_modal/helpers/attachment_setting.vue
@@ -2,6 +2,7 @@
   <span
     v-if="matchesExpertLevel"
     class="AttachmentSetting"
+    :class="{ '-compact': compact }"
   >
     <label
       :for="path"
@@ -24,8 +25,8 @@
       {{ backendDescriptionDescription + ' ' }}
     </p>
     <div class="attachment-input">
-      <div>{{ $t('settings.url') }}</div>
-      <div class="controls">
+      <div class="controls control-field">
+        <label for="path">{{ $t('settings.url') }}</label>
         <input
           :id="path"
           class="string-input"
@@ -40,7 +41,7 @@
         />
         <ProfileSettingIndicator :is-profile="isProfileSetting" />
       </div>
-      <div>{{ $t('settings.preview') }}</div>
+      <div v-if="!compact">{{ $t('settings.preview') }}</div>
       <Attachment
         class="attachment"
         :compact="compact"
@@ -50,7 +51,7 @@
         @setMedia="onMedia"
         @naturalSizeLoad="onNaturalSizeLoad"
       />
-      <div class="controls">
+      <div class="controls control-upload">
         <MediaUpload
           ref="mediaUpload"
           class="media-upload-icon"
@@ -84,6 +85,35 @@
     width: 20em;
   }
 
+  &.-compact {
+    .attachment-input {
+      flex-direction: row;
+      align-items: flex-end;
+    }
+
+    .attachment {
+      flex: 0;
+      order: 0;
+      display: block;
+      min-width: 4em;
+      height: 4em;
+      align-self: center;
+      margin-bottom: 0;
+    }
+
+    .control-field {
+      order: 1;
+      min-width: 12em;
+      margin-left: 0.5em;
+    }
+
+    .control-upload {
+      order: 2;
+      min-width: 12em;
+      padding: 0 0.5em;
+    }
+  }
+
   .controls {
     margin-bottom: 0.5em;
 

From bf49aeb7561f668d3e9eb3a6afcc116a3ce4ddcc Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 12 Nov 2023 22:18:54 +0200
Subject: [PATCH 5/9] changelog

---
 changelog.d/admin-dash-fixes.fix | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 changelog.d/admin-dash-fixes.fix

diff --git a/changelog.d/admin-dash-fixes.fix b/changelog.d/admin-dash-fixes.fix
new file mode 100644
index 00000000..ff8eb0a2
--- /dev/null
+++ b/changelog.d/admin-dash-fixes.fix
@@ -0,0 +1 @@
+fix admin dashboard not having any feedback on frontend installation

From d9ea160a67597cc3a2531fef0ad506c9eaf5eec9 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 13 Nov 2023 17:31:12 +0200
Subject: [PATCH 6/9] account for if there's no primary frontend setup

---
 src/components/settings_modal/admin_tabs/frontends_tab.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.js b/src/components/settings_modal/admin_tabs/frontends_tab.js
index 57af2c27..8163af59 100644
--- a/src/components/settings_modal/admin_tabs/frontends_tab.js
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.js
@@ -56,7 +56,7 @@ const FrontendsTab = {
     },
     getSuggestedRef (frontend) {
       const defaultFe = this.adminDraft[':pleroma'][':frontends'][':primary']
-      if (defaultFe.name === frontend.name && this.canInstall(defaultFe)) {
+      if (defaultFe?.name === frontend.name && this.canInstall(defaultFe)) {
         return defaultFe.ref
       } else {
         return frontend.refs[0]

From a190ef2c562da20f4e9050734acc25d51cd5ca0a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 19 Nov 2023 10:02:42 +0200
Subject: [PATCH 7/9] fix crash added in this MR

---
 src/components/settings_modal/admin_tabs/frontends_tab.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.vue b/src/components/settings_modal/admin_tabs/frontends_tab.vue
index 9f522f7f..d2855ffb 100644
--- a/src/components/settings_modal/admin_tabs/frontends_tab.vue
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.vue
@@ -135,8 +135,8 @@
                   class="button button-default btn"
                   type="button"
                   :disabled="
-                    adminDraft[':pleroma'][':frontends'][':primary'].name === frontend.name &&
-                      adminDraft[':pleroma'][':frontends'][':primary'].ref === frontend.refs[0]
+                    adminDraft[':pleroma'][':frontends'][':primary']?.name === frontend.name &&
+                      adminDraft[':pleroma'][':frontends'][':primary']?.ref === frontend.refs[0]
                   "
                   @click="setDefault(frontend)"
                 >

From 1037a3bb72ab0eba1d2dc352f2ea8e85e4df4fb5 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 19 Nov 2023 10:06:06 +0200
Subject: [PATCH 8/9] remove the WIP tip since pleroma!3862 is in stable

---
 src/components/settings_modal/admin_tabs/frontends_tab.vue | 1 -
 src/i18n/en.json                                           | 1 -
 src/i18n/zh.json                                           | 1 -
 3 files changed, 3 deletions(-)

diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.vue b/src/components/settings_modal/admin_tabs/frontends_tab.vue
index d2855ffb..dd4c9790 100644
--- a/src/components/settings_modal/admin_tabs/frontends_tab.vue
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.vue
@@ -10,7 +10,6 @@
         <li>
           <h3>{{ $t('admin_dash.frontend.default_frontend') }}</h3>
           <p>{{ $t('admin_dash.frontend.default_frontend_tip') }}</p>
-          <p>{{ $t('admin_dash.frontend.default_frontend_tip2') }}</p>
           <ul class="setting-list">
             <li>
               <StringSetting path=":pleroma.:frontends.:primary.name" />
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 5352c161..6bb9e4bb 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -914,7 +914,6 @@
       "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",
       "failure_installing_frontend": "Failed to install frontend {version}: {reason}",
       "success_installing_frontend": "Frontend {version} successfully installed"
diff --git a/src/i18n/zh.json b/src/i18n/zh.json
index 69266caa..20cad1cb 100644
--- a/src/i18n/zh.json
+++ b/src/i18n/zh.json
@@ -1266,7 +1266,6 @@
       "wip_notice": "请注意，此部分是一个WIP，缺乏某些功能，因为前端管理的后台实现并不完整。",
       "default_frontend": "默认前端",
       "default_frontend_tip": "默认的前端将显示给所有用户。目前还没有办法让用户选择个人的前端。如果你不使用 PleromaFE，你很可能不得不使用旧的和有问题的 AdminFE 来进行实例配置，直到我们替换它。",
-      "default_frontend_tip2": "WIP: 由于 Pleroma 后端没有正确列出所有已安装的前端，你必须手动输入名称和引用。下面的列表提供了填写这些值的快捷方式。",
       "available_frontends": "可供安装"
     },
     "temp_overrides": {

From b707a14b10717e037e564b5f0eab3e0a7ceb0b37 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 22 Nov 2023 22:05:16 +0200
Subject: [PATCH 9/9] make sure generated meta goes below FE-provided favicon
 so that BE's one get prioritized

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index a02939f7..e790fb57 100644
--- a/index.html
+++ b/index.html
@@ -3,8 +3,8 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
-    <!--server-generated-meta-->
     <link rel="icon" type="image/png" href="/favicon.png">
+    <!--server-generated-meta-->
   </head>
   <body class="hidden">
     <noscript>To use Pleroma, please enable JavaScript.</noscript>