links tab done (finally)

src/components/settings_modal/admin_tabs/links_tab.js

@@ -6,6 +6,8 @@ import GroupSetting from '../helpers/group_setting.vue'
 import AttachmentSetting from '../helpers/attachment_setting.vue'
 import ListSetting from '../helpers/list_setting.vue'
 
+import Checkbox from 'src/components/checkbox/checkbox.vue'
+
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import { get } from 'lodash'
 
@@ -23,9 +25,22 @@ const MediaProxyTab = {
     StringSetting,
     AttachmentSetting,
     GroupSetting,
-    ListSetting
+    ListSetting,
+    Checkbox
   },
   computed: {
+    classIsPresent () {
+      return this.$store.state.adminSettings.draft[':pleroma']['Pleroma.Formatter'][':class'] !== false
+    },
+    relIsPresent () {
+      return this.$store.state.adminSettings.draft[':pleroma']['Pleroma.Formatter'][':rel'] !== false
+    },
+    truncateIsPresent () {
+      return this.$store.state.adminSettings.draft[':pleroma']['Pleroma.Formatter'][':truncate'] !== false
+    },
+    truncateDescription () {
+      return get(this.$store.state.adminSettings.descriptions, [':pleroma', 'Pleroma.Formatter', ':truncate'])
+    },
     ttlSettersOptions () {
       const desc = get(this.$store.state.adminSettings.descriptions, ':pleroma.:rich_media.:ttl_setters')
       return new Set(desc.suggestions.map(option => ({
@@ -40,6 +55,18 @@ const MediaProxyTab = {
         value: option
       })))
     },
+    validateTLDOptions () {
+      return [{
+        label: this.$t('general.yes'),
+        value: true
+      }, {
+        label: this.$t('general.no'),
+        value: false
+      }, {
+        label: this.$t('admin_dash.links.no_scheme'),
+        value: ':no_scheme'
+      }]
+    },
     mediaProxyEnabled () {
       return this.$store.state.adminSettings.draft[':pleroma'][':media_proxy'][':enabled']
     },
@@ -47,6 +74,35 @@ const MediaProxyTab = {
       return this.$store.state.adminSettings.draft[':pleroma'][':media_proxy'][':invalidation'][':provider']
     },
     ...SharedComputedObject()
+  },
+  methods: {
+    checkRel (e) {
+      this.$store.commit(
+        'updateAdminDraft',
+        {
+          path: [':pleroma','Pleroma.Formatter',':rel'],
+          value: e ? '' : false
+        }
+      )
+    },
+    checkClass (e) {
+      this.$store.commit(
+        'updateAdminDraft',
+        {
+          path: [':pleroma','Pleroma.Formatter',':class'],
+          value: e ? '' : false
+        }
+      )
+    },
+    checkTruncate (e) {
+      this.$store.commit(
+        'updateAdminDraft',
+        {
+          path: [':pleroma','Pleroma.Formatter',':truncate'],
+          value: e ? 20 : false
+        }
+      )
+    }
   }
 }
 

src/components/settings_modal/admin_tabs/links_tab.scss

@@ -0,0 +1,32 @@
+.LinksTab {
+  // awkward "disable = false" backend options
+  .weird-options {
+    .checkbox {
+      margin: 0;
+    }
+  }
+
+  .setting-list.suboptions.weird-suboptions {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5em;
+    margin: 0;
+
+    li {
+      margin: 0;
+      display: flex;
+    }
+
+    .GroupSetting {
+      display: inline-block;
+      margin: 0;
+      padding: 0;
+    }
+  }
+
+  .btn-group {
+    .button-default {
+      flex: 0 1 auto;
+    }
+  }
+}

src/components/settings_modal/admin_tabs/links_tab.vue

@@ -1,5 +1,8 @@
 <template>
-  <div :label="$t('admin_dash.tabs.media_proxy')">
+  <div
+    class="LinksTab"
+    :label="$t('admin_dash.tabs.media_proxy')"
+  >
     <div class="setting-item">
       <h3>{{ $t('admin_dash.links.link_previews') }}</h3>
       <ul class="setting-list">
@@ -33,8 +36,101 @@
           <ListSetting path=":pleroma.:rich_media.:ignore_hosts" />
         </li>
       </ul>
+      <h3>{{ $t('admin_dash.links.link_formatter') }}</h3>
+      <ul class="setting-list weird-options">
+        <li>
+          <Checkbox
+            :model-value="classIsPresent"
+            @update:model-value="checkClass"
+          >
+            <i18n-t
+              keypath="admin_dash.temp_overrides.:pleroma.Pleroma_DOT_Formatter.:attribute_toggle.label"
+              tag="span"
+              scope="global"
+            >
+              <template #attr>
+                <code>class</code>
+              </template>
+            </i18n-t>
+          </Checkbox>
+          <div class="setting-list suboptions weird-suboptions">
+            <StringSetting
+              v-if="classIsPresent"
+              :path="[':pleroma', 'Pleroma.Formatter', ':class']"
+              hide-label
+              hide-draft-buttons
+            />
+            <GroupSetting :path="[':pleroma', 'Pleroma.Formatter', ':class']" />
+          </div>
+        </li>
+        <li>
+          <Checkbox
+            :model-value="relIsPresent"
+            @update:model-value="checkRel"
+          >
+          <i18n-t
+            keypath="admin_dash.temp_overrides.:pleroma.Pleroma_DOT_Formatter.:attribute_toggle.label"
+            tag="span"
+            scope="global"
+          >
+            <template #attr>
+              <code>rel</code>
+            </template>
+          </i18n-t>
+          </Checkbox>
+          <div class="setting-list suboptions weird-suboptions">
+            <StringSetting
+              v-if="relIsPresent"
+              :path="[':pleroma', 'Pleroma.Formatter', ':rel']"
+              hide-label
+              hide-draft-buttons
+            />
+            <GroupSetting
+              :path="[':pleroma', 'Pleroma.Formatter', ':rel']"
+            />
+          </div>
+        </li>
+        <li>
+          <BooleanSetting :path="[':pleroma', 'Pleroma.Formatter', ':new_window']" />
+        </li>
+        <li>
+          <BooleanSetting :path="[':pleroma', 'Pleroma.Formatter', ':strip_prefix']" />
+        </li>
+        <li>
+          <BooleanSetting :path="[':pleroma', 'Pleroma.Formatter', ':extra']" />
+        </li>
+        <li>
+          <ChoiceSetting
+            :options="validateTLDOptions"
+            :path="[':pleroma', 'Pleroma.Formatter', ':validate_tld']"
+          />
+        </li>
+        <li>
+          <Checkbox
+            :model-value="truncateIsPresent"
+            @update:model-value="checkTruncate"
+          >
+            {{ truncateDescription.label }}
+          </Checkbox>
+          <div class="setting-list suboptions weird-suboptions">
+            <li>
+              <IntegerSetting
+                v-if="truncateIsPresent"
+                :path="[':pleroma', 'Pleroma.Formatter', ':truncate']"
+                hide-label
+                hide-draft-buttons
+              />
+            </li>
+            <li>
+              <GroupSetting :path="[':pleroma', 'Pleroma.Formatter', ':truncate']" />
+            </li>
+          </div>
+        </li>
+      </ul>
     </div>
   </div>
 </template>
 
+<style lang="scss" src="./links_tab.scss"></style>
+
 <script src="./links_tab.js"></script>

src/components/settings_modal/helpers/choice_setting.js

@@ -23,7 +23,10 @@ export default {
     ...Setting.computed,
     realOptions () {
       if (this.realSource === 'admin') {
-        if (!(this.backendDescriptionSuggestions?.length !== 0)) {
+        if (
+          !this.backendDescriptionSuggestions?.length ||
+            this.backendDescriptionSuggestions?.length === 0
+        ) {
           return this.options
         }
         return this.backendDescriptionSuggestions.map(x => ({

src/components/settings_modal/helpers/draft_buttons.vue

@@ -3,6 +3,7 @@
 <template>
   <span
     class="DraftButtons"
+    v-if="$parent.isDirty"
   >
     <Popover
       v-if="$parent.isDirty"
@@ -74,10 +75,8 @@ export default {
 .DraftButtons {
   display: inline-block;
   position: relative;
-
+  display: inline-flex;
-  .button-default {
+  gap: 0.5em;
-    margin-left: 0.5em;
-  }
 }
 
 .draft-tooltip {

src/components/settings_modal/helpers/number_setting.vue

@@ -4,7 +4,9 @@
     class="NumberSetting"
   >
     <label
+      v-if="!hideLabel"
       :for="path"
+      class="setting-label"
       :class="{ 'faint': shouldBeDisabled }"
     >
       <template v-if="backendDescriptionLabel">
@@ -32,7 +34,7 @@
       :onclick="reset"
     />
     <ProfileSettingIndicator :is-profile="isProfileSetting" />
-    <DraftButtons />
+    <DraftButtons v-if="!hideDraftButtons" />
     <p
       v-if="backendDescriptionDescription"
       class="setting-description"

src/components/settings_modal/helpers/setting.js

@@ -41,6 +41,12 @@ export default {
       type: String,
       default: undefined
     },
+    hideDraftButtons: { // this is for the weird backend hybrid (Boolean|String or Boolean|Number) settings
+      type: Boolean
+    },
+    hideLabel: {
+      type: Boolean
+    },
     hideDescription: {
       type: Boolean
     },
@@ -265,6 +271,7 @@ export default {
       }
     },
     reset () {
+      console.log('RS', this.state, this.draft)
       if (this.realDraftMode) {
         this.draft = cloneDeep(this.state)
       } else {

src/components/settings_modal/helpers/string_setting.vue

@@ -4,6 +4,7 @@
     class="StringSetting"
   >
     <label
+      v-if="!hideLabel"
       :for="path"
       class="setting-label"
       :class="{ 'faint': shouldBeDisabled }"
@@ -31,7 +32,7 @@
       :onclick="reset"
     />
     <ProfileSettingIndicator :is-profile="isProfileSetting" />
-    <DraftButtons />
+    <DraftButtons v-if="!hideDraftButtons" />
     <p
       v-if="backendDescriptionDescription"
       class="setting-description"

src/components/settings_modal/settings_modal.scss

@@ -42,7 +42,14 @@
     }
 
     li {
-      margin: 1em 0;
+      display: block;
+      margin: 0.75em 0;
+
+      > label {
+        display: block;
+        margin: 0.75em 0;
+        padding: 0.5em 0;
+      }
     }
 
     .suboptions {
@@ -62,7 +69,7 @@
 
   .setting-description {
     margin-top: 0.2em;
-    margin-bottom: 2em;
+    margin-bottom: 0;
     font-size: 70%;
   }
 

src/i18n/en.json

@@ -1157,7 +1157,8 @@
       "emoji": "Emoji",
       "uploads": "Uploads",
       "monitoring": "Monitoring",
-      "registrations": "Registrations"
+      "registrations": "Registrations",
+      "links": "Links"
     },
     "nodb": {
       "heading": "Database config is disabled",
@@ -1192,6 +1193,10 @@
         "email_message": "Via email"
       }
     },
+    "links": {
+      "link_previews": "Link previews",
+      "link_formatter": "Link formatter"
+    },
     "uploads": {
       "general": "General settings",
       "filenames": "Filenames, Titles and Descriptions",
@@ -1294,6 +1299,20 @@
     },
     "temp_overrides": {
       ":pleroma": {
+        "Pleroma_DOT_Formatter": {
+          ":attribute_toggle": {
+            "label": "Set {attr} attribute"
+          },
+          ":truncate_toggle": {
+            "label": "Truncate"
+          },
+          ":class": {
+            "label": "Value"
+          },
+          ":rel": {
+            "label": "Value"
+          }
+        },
         "Pleroma_DOT_Uploaders_DOT_Uploader": {
           ":timeout": {
             "label": "Timeout",