From 42a5da93ea14186b50c8612a8ef2d86e0079c0e8 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 3 Dec 2025 12:19:20 +0200
Subject: [PATCH] links tab done (finally)

---
 .../settings_modal/admin_tabs/links_tab.js    | 58 ++++++++++-
 .../settings_modal/admin_tabs/links_tab.scss  | 32 ++++++
 .../settings_modal/admin_tabs/links_tab.vue   | 98 ++++++++++++++++++-
 .../settings_modal/helpers/choice_setting.js  |  5 +-
 .../settings_modal/helpers/draft_buttons.vue  |  7 +-
 .../settings_modal/helpers/number_setting.vue |  4 +-
 .../settings_modal/helpers/setting.js         |  7 ++
 .../settings_modal/helpers/string_setting.vue |  3 +-
 .../settings_modal/settings_modal.scss        | 11 ++-
 src/i18n/en.json                              | 21 +++-
 10 files changed, 234 insertions(+), 12 deletions(-)
 create mode 100644 src/components/settings_modal/admin_tabs/links_tab.scss

diff --git a/src/components/settings_modal/admin_tabs/links_tab.js b/src/components/settings_modal/admin_tabs/links_tab.js
index 1bf626643..da70889ac 100644
--- a/src/components/settings_modal/admin_tabs/links_tab.js
+++ b/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
+        }
+      )
+    }
   }
 }
 
diff --git a/src/components/settings_modal/admin_tabs/links_tab.scss b/src/components/settings_modal/admin_tabs/links_tab.scss
new file mode 100644
index 000000000..eb56cd9f5
--- /dev/null
+++ b/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;
+    }
+  }
+}
diff --git a/src/components/settings_modal/admin_tabs/links_tab.vue b/src/components/settings_modal/admin_tabs/links_tab.vue
index c4677ee63..5e4598c08 100644
--- a/src/components/settings_modal/admin_tabs/links_tab.vue
+++ b/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>
diff --git a/src/components/settings_modal/helpers/choice_setting.js b/src/components/settings_modal/helpers/choice_setting.js
index c36b870a6..ed54e67be 100644
--- a/src/components/settings_modal/helpers/choice_setting.js
+++ b/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 => ({
diff --git a/src/components/settings_modal/helpers/draft_buttons.vue b/src/components/settings_modal/helpers/draft_buttons.vue
index 46a70e866..2cb4594db 100644
--- a/src/components/settings_modal/helpers/draft_buttons.vue
+++ b/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;
-
-  .button-default {
-    margin-left: 0.5em;
-  }
+  display: inline-flex;
+  gap: 0.5em;
 }
 
 .draft-tooltip {
diff --git a/src/components/settings_modal/helpers/number_setting.vue b/src/components/settings_modal/helpers/number_setting.vue
index 32dc6f83f..7e301d613 100644
--- a/src/components/settings_modal/helpers/number_setting.vue
+++ b/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"
diff --git a/src/components/settings_modal/helpers/setting.js b/src/components/settings_modal/helpers/setting.js
index 4e1e12e13..a6419a03e 100644
--- a/src/components/settings_modal/helpers/setting.js
+++ b/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 {
diff --git a/src/components/settings_modal/helpers/string_setting.vue b/src/components/settings_modal/helpers/string_setting.vue
index cf06af8d9..0c6e356c4 100644
--- a/src/components/settings_modal/helpers/string_setting.vue
+++ b/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"
diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss
index fd24697b6..7eca3ed16 100644
--- a/src/components/settings_modal/settings_modal.scss
+++ b/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%;
   }
 
diff --git a/src/i18n/en.json b/src/i18n/en.json
index f580dc9b1..cd5e6b2f7 100644
--- a/src/i18n/en.json
+++ b/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",