add favicon setting and add compact layout for AttachmentSetting

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" />

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,

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 control-field">
-      <div class="controls">
+        <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;