From 4de7c72b1edbb6fa69ac681e2b82f5f1a5d0e32f Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Wed, 16 Apr 2025 12:17:40 +0200
Subject: [PATCH] use external link component for links

---
 src/components/settings/ExternalLink.vue | 18 ++++++
 src/pages/AdminSettings.vue              | 71 ++++++++----------------
 src/pages/UserSettings.vue               | 23 ++------
 3 files changed, 47 insertions(+), 65 deletions(-)
 create mode 100644 src/components/settings/ExternalLink.vue

diff --git a/src/components/settings/ExternalLink.vue b/src/components/settings/ExternalLink.vue
new file mode 100644
index 0000000..80313fb
--- /dev/null
+++ b/src/components/settings/ExternalLink.vue
@@ -0,0 +1,18 @@
+<template>
+  <a
+    :href="href"
+    rel="noopener"
+    target="_blank"
+  >
+    <slot></slot>
+  </a>
+</template>
+
+<script setup>
+defineProps({
+  href: {
+    type: String,
+    required: true,
+  },
+})
+</script>
diff --git a/src/pages/AdminSettings.vue b/src/pages/AdminSettings.vue
index df7cb81..d3c7c84 100644
--- a/src/pages/AdminSettings.vue
+++ b/src/pages/AdminSettings.vue
@@ -468,33 +468,21 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
             :middle="true"
           />
           <SettingValue>
-            <a
-              target="_blank"
-              href="https://www.buymeacoffee.com/deblan"
-              rel="noopener"
-            >
+            <ExternalLink href="https://www.buymeacoffee.com/deblan">
               <NcButton variant="secondary">{{ trans('Buy me a coffee ☕') }}</NcButton>
-            </a>
+            </ExternalLink>
           </SettingValue>
         </SettingItem>
 
         <SettingItem>
           <SettingLabel label="Need help" />
           <SettingValue class="cm-settings-button-inline">
-            <a
-              target="_blank"
-              href="https://deblan.gitnet.page/side_menu_doc/"
-              rel="noopener"
-            >
+            <ExternalLink href="https://deblan.gitnet.page/side_menu_doc/">
               <NcButton variant="secondary">{{ trans('Open the documentation') }}</NcButton>
-            </a>
-            <a
-              target="_blank"
-              href="https://gitnet.fr/deblan/side_menu/issues/new?template=.gitea%2fissue_template%2fQUESTION_TEMPLATE.yml"
-              rel="noopener"
-            >
+            </ExternalLink>
+            <ExternalLink href="https://gitnet.fr/deblan/side_menu/issues/new?template=.gitea%2fissue_template%2fQUESTION_TEMPLATE.yml">
               <NcButton variant="secondary">{{ trans('Ask the developer') }}</NcButton>
-            </a>
+            </ExternalLink>
           </SettingValue>
         </SettingItem>
 
@@ -504,13 +492,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
             :middle="true"
           />
           <SettingValue>
-            <a
-              target="_blank"
-              href="https://gitnet.fr/deblan/side_menu/issues/new?template=.gitea%2fissue_template%2fFEATURE_TEMPLATE.yml"
-              rel="noopener"
-            >
+            <ExternalLink href="https://gitnet.fr/deblan/side_menu/issues/new?template=.gitea%2fissue_template%2fFEATURE_TEMPLATE.yml">
               <NcButton variant="secondary">{{ trans('New request') }}</NcButton>
-            </a>
+            </ExternalLink>
           </SettingValue>
         </SettingItem>
 
@@ -520,13 +504,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
             :top="true"
           />
           <SettingValue class="cm-settings-button-inline">
-            <a
-              target="_blank"
-              href="https://gitnet.fr/deblan/side_menu/issues/new?template=.gitea%2fissue_template%2fISSUE_TEMPLATE.yml"
-              rel="noopener"
-            >
+            <ExternalLink href="https://gitnet.fr/deblan/side_menu/issues/new?template=.gitea%2fissue_template%2fISSUE_TEMPLATE.yml">
               <NcButton variant="secondary">{{ trans('Report a bug') }}</NcButton>
-            </a>
+            </ExternalLink>
             <NcButton
               variant="secondary"
               @click="showConfig = true"
@@ -574,24 +554,21 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 import { NcContent, NcAppContent, NcButton, NcModal, NcAppNavigation, NcAppNavigationItem } from '@nextcloud/vue'
 import { ref, onMounted } from 'vue'
 import { useConfigStore } from '../store/config.js'
+import { SettingsSection, SettingItem, SettingLabel, SettingValue, SectionTitle, ExternalLink, AdminSaveButton } from '../components/settings'
+import {
+  FormRange,
+  FormColorPicker,
+  FormOpener,
+  FormSelect,
+  FormYesNo,
+  FormSize,
+  FormAppPicker,
+  FormAppSort,
+  FormCatSort,
+  FormDisplayPicker,
+  FormAppCategory,
+} from '../components/settings/form'
 
-import SettingsSection from '../components/settings/SettingsSection'
-import SettingItem from '../components/settings/SettingItem'
-import SettingLabel from '../components/settings/SettingLabel'
-import SettingValue from '../components/settings/SettingValue'
-import SectionTitle from '../components/settings/SectionTitle'
-import AdminSaveButton from '../components/settings/AdminSaveButton'
-import FormRange from '../components/settings/form/FormRange'
-import FormColorPicker from '../components/settings/form/FormColorPicker'
-import FormOpener from '../components/settings/form/FormOpener'
-import FormSelect from '../components/settings/form/FormSelect'
-import FormYesNo from '../components/settings/form/FormYesNo'
-import FormSize from '../components/settings/form/FormSize'
-import FormAppPicker from '../components/settings/form/FormAppPicker'
-import FormAppSort from '../components/settings/form/FormAppSort'
-import FormCatSort from '../components/settings/form/FormCatSort'
-import FormDisplayPicker from '../components/settings/form/FormDisplayPicker'
-import FormAppCategory from '../components/settings/form/FormAppCategory'
 
 const menu = [
   { label: 'Global', section: 'global', icon: '' },
diff --git a/src/pages/UserSettings.vue b/src/pages/UserSettings.vue
index f0f06ed..d3a7dfb 100644
--- a/src/pages/UserSettings.vue
+++ b/src/pages/UserSettings.vue
@@ -69,7 +69,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
             label="Open apps in new tab"
             :middle="true"
           />
-          <SettingValue>
+          <SettingValue class="cm-settings-children-inline">
             <FormSelect
               v-model="config['target-blank-mode']"
               :options="[
@@ -103,13 +103,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
             :middle="true"
           />
           <SettingValue>
-            <a
-              target="_blank"
-              href="https://www.buymeacoffee.com/deblan"
-              rel="noopener"
-            >
+            <ExternalLink href="https://www.buymeacoffee.com/deblan">
               <NcButton variant="secondary">{{ trans('Buy me a coffee ☕') }}</NcButton>
-            </a>
+            </ExternalLink>
           </SettingValue>
         </SettingItem>
 
@@ -123,17 +119,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 import { NcContent, NcAppContent, NcButton } from '@nextcloud/vue'
 import { ref, onMounted } from 'vue'
 import { useConfigStore } from '../store/config.js'
-
-import SettingsSection from '../components/settings/SettingsSection'
-import SettingItem from '../components/settings/SettingItem'
-import SettingLabel from '../components/settings/SettingLabel'
-import SettingValue from '../components/settings/SettingValue'
-import SectionTitle from '../components/settings/SectionTitle'
-import UserSaveButton from '../components/settings/UserSaveButton'
-import FormYesNo from '../components/settings/form/FormYesNo'
-import FormAppPicker from '../components/settings/form/FormAppPicker'
-import FormAppSort from '../components/settings/form/FormAppSort'
-import FormSelect from '../components/settings/form/FormSelect'
+import { FormSelect, FormYesNo, FormAppPicker, FormAppSort } from '../components/settings/form'
+import { SettingsSection, SettingItem, SettingLabel, SettingValue, SectionTitle, ExternalLink, UserSaveButton } from '../components/settings'
 
 const config = ref(null)
 const configStore = useConfigStore()