use external link component for links

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>

src/pages/AdminSettings.vue

@@ -468,33 +468,21 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
             :middle="true"
           />
           <SettingValue>
-            <a
+            <ExternalLink href="https://www.buymeacoffee.com/deblan">
-              target="_blank"
-              href="https://www.buymeacoffee.com/deblan"
-              rel="noopener"
-            >
               <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
+            <ExternalLink href="https://deblan.gitnet.page/side_menu_doc/">
-              target="_blank"
-              href="https://deblan.gitnet.page/side_menu_doc/"
-              rel="noopener"
-            >
               <NcButton variant="secondary">{{ trans('Open the documentation') }}</NcButton>
-            </a>
+            </ExternalLink>
-            <a
+            <ExternalLink href="https://gitnet.fr/deblan/side_menu/issues/new?template=.gitea%2fissue_template%2fQUESTION_TEMPLATE.yml">
-              target="_blank"
-              href="https://gitnet.fr/deblan/side_menu/issues/new?template=.gitea%2fissue_template%2fQUESTION_TEMPLATE.yml"
-              rel="noopener"
-            >
               <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
+            <ExternalLink href="https://gitnet.fr/deblan/side_menu/issues/new?template=.gitea%2fissue_template%2fFEATURE_TEMPLATE.yml">
-              target="_blank"
-              href="https://gitnet.fr/deblan/side_menu/issues/new?template=.gitea%2fissue_template%2fFEATURE_TEMPLATE.yml"
-              rel="noopener"
-            >
               <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
+            <ExternalLink href="https://gitnet.fr/deblan/side_menu/issues/new?template=.gitea%2fissue_template%2fISSUE_TEMPLATE.yml">
-              target="_blank"
-              href="https://gitnet.fr/deblan/side_menu/issues/new?template=.gitea%2fissue_template%2fISSUE_TEMPLATE.yml"
-              rel="noopener"
-            >
               <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: '' },

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
+            <ExternalLink href="https://www.buymeacoffee.com/deblan">
-              target="_blank"
-              href="https://www.buymeacoffee.com/deblan"
-              rel="noopener"
-            >
               <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 { FormSelect, FormYesNo, FormAppPicker, FormAppSort } from '../components/settings/form'
-import SettingsSection from '../components/settings/SettingsSection'
+import { SettingsSection, SettingItem, SettingLabel, SettingValue, SectionTitle, ExternalLink, UserSaveButton } from '../components/settings'
-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'
 
 const config = ref(null)
 const configStore = useConfigStore()