From 93972530b8fad4dd48a161de8cb7314b9699d8d3 Mon Sep 17 00:00:00 2001
From: Murtaza Sultani <sultani@data-quest.de>
Date: Fri, 10 Oct 2025 10:35:36 +0200
Subject: Reqiester UserAvatar and UserAvatar Dropdown als global components

---
 resources/vue/base-components.js                   |   2 +
 resources/vue/components/UserAvatar.vue            | 102 ---------------------
 resources/vue/components/avatar/UserAvatar.vue     | 102 +++++++++++++++++++++
 .../vue/components/avatar/UserAvatarDropdown.vue   |  45 +++++++++
 resources/vue/components/forum/ForumMembers.vue    |   4 +-
 .../vue/components/forum/UserAvatarDropdown.vue    |  45 ---------
 resources/vue/components/forum/posts/Post.vue      |   2 +-
 .../components/forum/posts/PostReactionShow.vue    |   2 +-
 8 files changed, 153 insertions(+), 151 deletions(-)
 delete mode 100644 resources/vue/components/UserAvatar.vue
 create mode 100644 resources/vue/components/avatar/UserAvatar.vue
 create mode 100644 resources/vue/components/avatar/UserAvatarDropdown.vue
 delete mode 100644 resources/vue/components/forum/UserAvatarDropdown.vue

diff --git a/resources/vue/base-components.js b/resources/vue/base-components.js
index 2524642..904afa1 100644
--- a/resources/vue/base-components.js
+++ b/resources/vue/base-components.js
@@ -34,6 +34,8 @@ const BaseComponents = {
     StudipTooltipIcon: defineAsyncComponent(() => import('./components/StudipTooltipIcon.vue')),
     StudipWysiwyg: defineAsyncComponent(() => import('./components/StudipWysiwyg.vue')),
     UserFilterInput: defineAsyncComponent(() => import('./components/form_inputs/UserFilterInput.vue')),
+    UserAvatar: defineAsyncComponent(() => import('./components/avatar/UserAvatar.vue')),
+    UserAvatarDropdown: defineAsyncComponent(() => import('./components/avatar/UserAvatarDropdown.vue')),
 };
 
 export default BaseComponents;
diff --git a/resources/vue/components/UserAvatar.vue b/resources/vue/components/UserAvatar.vue
deleted file mode 100644
index 91153e9..0000000
--- a/resources/vue/components/UserAvatar.vue
+++ /dev/null
@@ -1,102 +0,0 @@
-<script setup>
-import {$gettext} from "../../assets/javascripts/lib/gettext";
-import StudipIcon from "./StudipIcon.vue";
-
-const props = defineProps({
-    user: {
-        type: Object,
-        required: true
-    }
-});
-
-const isOpen = defineModel({ default: false });
-const AUTH_ID = STUDIP.USER_ID;
-const vCardDownloadURL = STUDIP.URLHelper.getURL('dispatch.php/contact/vcard', {'user[]': props.user.username});
-const userProfileURL = STUDIP.URLHelper.getURL('dispatch.php/profile', {username: props.user.username});
-
-const writeMessage = () => {
-    STUDIP.Dialog.fromURL(
-        STUDIP.URLHelper.getURL('dispatch.php/messages/write'),
-        {
-            method: 'get',
-            data: {
-                username: props.user.username,
-                rec_uname: props.user.username
-            }
-        }
-    );
-
-    isOpen.value = false;
-}
-
-const openBlubberChat = () => {
-    STUDIP.Dialog.fromURL(
-        STUDIP.URLHelper.getURL(`dispatch.php/blubber/write_to/${props.user.id}`),
-        {
-            method: 'get'
-        }
-    );
-
-    isOpen.value = false;
-}
-</script>
-<template>
-    <div class="user-avatar">
-        <div class="user-avatar__header">
-            <img class="user-profile" :src="user.avatar_url" :alt="user.name" />
-            <div class="user-info">
-                <p class="user-name">{{ user.name }}</p>
-                <p v-if="user.motto">{{ user.motto }}</p>
-            </div>
-        </div>
-        <hr />
-        <ul class="user-avatar__actions">
-            <li>
-                <button
-                    v-if="user.id !== AUTH_ID"
-                    @click="openBlubberChat"
-                    class="action-item button-base"
-                    :title="$gettext('Blubber diesen Nutzer an')"
-                    :aria-label="$gettext('Blubber diesen Nutzer an')"
-                >
-                    <StudipIcon shape="blubber" :size="18" aria-hidden="true" />
-                    {{ $gettext('Chat starten (blubbern)') }}
-                </button>
-            </li>
-            <li>
-                <a
-                    class="action-item"
-                    :href="userProfileURL"
-                    :title="$gettext('Zum Profil von %{name}', { name: user.name })"
-                    :aria-label="$gettext('Zum Profil von %{name}', { name: user.name })"
-                >
-                    <StudipIcon shape="role" :size="18" aria-hidden="true" />
-                    {{ $gettext('Profil anzeigen') }}
-                </a>
-            </li>
-            <li>
-                <button
-                    v-if="user.id !== AUTH_ID"
-                    class="action-item button-base"
-                    :title="$gettext('Nachricht schreiben')"
-                    :aria-label="$gettext('Nachricht schreiben')"
-                    @click="writeMessage()"
-                >
-                    <StudipIcon shape="mail2" :size="18" aria-hidden="true" />
-                    {{ $gettext('Nachricht schreiben') }}
-                </button>
-            </li>
-            <li>
-                <a
-                    class="action-item"
-                    :href="vCardDownloadURL"
-                    :title="$gettext('vCard herunterladen')"
-                    :aria-label="$gettext('vCard herunterladen')"
-                >
-                    <StudipIcon shape="vcard" :size="18" aria-hidden="true" />
-                    {{ $gettext('Vcard speichern') }}
-                </a>
-            </li>
-        </ul>
-    </div>
-</template>
diff --git a/resources/vue/components/avatar/UserAvatar.vue b/resources/vue/components/avatar/UserAvatar.vue
new file mode 100644
index 0000000..dff5e4e
--- /dev/null
+++ b/resources/vue/components/avatar/UserAvatar.vue
@@ -0,0 +1,102 @@
+<script setup>
+import {$gettext} from "@/assets/javascripts/lib/gettext";
+import StudipIcon from "@/vue/components/StudipIcon.vue";
+
+const props = defineProps({
+    user: {
+        type: Object,
+        required: true
+    }
+});
+
+const isOpen = defineModel({ default: false });
+const AUTH_ID = STUDIP.USER_ID;
+const vCardDownloadURL = STUDIP.URLHelper.getURL('dispatch.php/contact/vcard', {'user[]': props.user.username});
+const userProfileURL = STUDIP.URLHelper.getURL('dispatch.php/profile', {username: props.user.username});
+
+const writeMessage = () => {
+    STUDIP.Dialog.fromURL(
+        STUDIP.URLHelper.getURL('dispatch.php/messages/write'),
+        {
+            method: 'get',
+            data: {
+                username: props.user.username,
+                rec_uname: props.user.username
+            }
+        }
+    );
+
+    isOpen.value = false;
+}
+
+const openBlubberChat = () => {
+    STUDIP.Dialog.fromURL(
+        STUDIP.URLHelper.getURL(`dispatch.php/blubber/write_to/${props.user.id}`),
+        {
+            method: 'get'
+        }
+    );
+
+    isOpen.value = false;
+}
+</script>
+<template>
+    <div class="user-avatar">
+        <div class="user-avatar__header">
+            <img class="user-profile" :src="user.avatar_url" :alt="user.name" />
+            <div class="user-info">
+                <p class="user-name">{{ user.name }}</p>
+                <p v-if="user.motto">{{ user.motto }}</p>
+            </div>
+        </div>
+        <hr />
+        <ul class="user-avatar__actions">
+            <li>
+                <button
+                    v-if="user.id !== AUTH_ID"
+                    @click="openBlubberChat"
+                    class="action-item button-base"
+                    :title="$gettext('Blubber diesen Nutzer an')"
+                    :aria-label="$gettext('Blubber diesen Nutzer an')"
+                >
+                    <StudipIcon shape="blubber" :size="18" aria-hidden="true" />
+                    {{ $gettext('Chat starten (blubbern)') }}
+                </button>
+            </li>
+            <li>
+                <a
+                    class="action-item"
+                    :href="userProfileURL"
+                    :title="$gettext('Zum Profil von %{name}', { name: user.name })"
+                    :aria-label="$gettext('Zum Profil von %{name}', { name: user.name })"
+                >
+                    <StudipIcon shape="role" :size="18" aria-hidden="true" />
+                    {{ $gettext('Profil anzeigen') }}
+                </a>
+            </li>
+            <li>
+                <button
+                    v-if="user.id !== AUTH_ID"
+                    class="action-item button-base"
+                    :title="$gettext('Nachricht schreiben')"
+                    :aria-label="$gettext('Nachricht schreiben')"
+                    @click="writeMessage()"
+                >
+                    <StudipIcon shape="mail2" :size="18" aria-hidden="true" />
+                    {{ $gettext('Nachricht schreiben') }}
+                </button>
+            </li>
+            <li>
+                <a
+                    class="action-item"
+                    :href="vCardDownloadURL"
+                    :title="$gettext('vCard herunterladen')"
+                    :aria-label="$gettext('vCard herunterladen')"
+                >
+                    <StudipIcon shape="vcard" :size="18" aria-hidden="true" />
+                    {{ $gettext('Vcard speichern') }}
+                </a>
+            </li>
+        </ul>
+    </div>
+</template>
diff --git a/resources/vue/components/avatar/UserAvatarDropdown.vue b/resources/vue/components/avatar/UserAvatarDropdown.vue
new file mode 100644
index 0000000..9cb17ee
--- /dev/null
+++ b/resources/vue/components/avatar/UserAvatarDropdown.vue
@@ -0,0 +1,45 @@
+<script setup>
+import {$gettext} from "@/assets/javascripts/lib/gettext";
+import Dropdown from "@/vue/components/Dropdown.vue";
+import UserAvatar from "@/vue/components/avatar/UserAvatar.vue";
+
+defineProps({
+    user: {
+        type: Object,
+        required: true
+    },
+    size: {
+        type: String,
+        default: '25px',
+    },
+    label: {
+        type: String,
+        default: ''
+    }
+});
+
+const isOpen = defineModel({ default: false });
+</script>
+<template>
+    <Dropdown class="user-avatar-dropdown" v-model="isOpen">
+        <template #trigger>
+            <button
+                class="user-avatar-dropdown__preview"
+                @click="isOpen = !isOpen"
+                v-bind="$attrs"
+                :class="{
+                    'active': isOpen
+                }"
+                :title="label ?? user.name"
+                :aria-label="label ?? $gettext('vCard')"
+                :aria-pressed="isOpen"
+            >
+                <img class="user-profile" :src="user.avatar_url" :style="{ width: size, height: size }" :alt="user.name" />
+            </button>
+        </template>
+
+        <template #content>
+            <UserAvatar :user="user" v-model="isOpen" />
+        </template>
+    </Dropdown>
+</template>
diff --git a/resources/vue/components/forum/ForumMembers.vue b/resources/vue/components/forum/ForumMembers.vue
index 7e0e385..7583b90 100644
--- a/resources/vue/components/forum/ForumMembers.vue
+++ b/resources/vue/components/forum/ForumMembers.vue
@@ -1,10 +1,10 @@
 <script setup>
 import {computed, ref} from "vue";
 import {$gettext} from "../../../assets/javascripts/lib/gettext";
-import UserAvatarDropdown from "./UserAvatarDropdown.vue";
 import Dropdown from "../Dropdown.vue";
 import StudipIcon from "@/vue/components/StudipIcon.vue";
-import UserAvatar from "../UserAvatar.vue";
+import UserAvatar from "@/vue/components/avatar/UserAvatar.vue";
+import UserAvatarDropdown from "@/vue/components/avatar/UserAvatarDropdown.vue";
 
 const props = defineProps({
     members: {
diff --git a/resources/vue/components/forum/UserAvatarDropdown.vue b/resources/vue/components/forum/UserAvatarDropdown.vue
deleted file mode 100644
index 82f693d..0000000
--- a/resources/vue/components/forum/UserAvatarDropdown.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<script setup>
-import {$gettext} from "../../../assets/javascripts/lib/gettext";
-import Dropdown from "../Dropdown.vue";
-import UserAvatar from "../UserAvatar.vue";
-
-defineProps({
-    user: {
-        type: Object,
-        required: true
-    },
-    size: {
-        type: String,
-        default: '25px',
-    },
-    label: {
-        type: String,
-        default: ''
-    }
-});
-
-const isOpen = defineModel({ default: false });
-</script>
-<template>
-    <Dropdown class="user-avatar-dropdown" v-model="isOpen">
-        <template #trigger>
-            <button
-                class="user-avatar-dropdown__preview"
-                @click="isOpen = !isOpen"
-                v-bind="$attrs"
-                :class="{
-                    'active': isOpen
-                }"
-                :title="label ?? user.name"
-                :aria-label="label ?? $gettext('vCard')"
-                :aria-pressed="isOpen"
-            >
-                <img class="user-profile" :src="user.avatar_url" :style="{ width: size, height: size }" :alt="user.name" />
-            </button>
-        </template>
-
-        <template #content>
-            <UserAvatar :user="user" v-model="isOpen" />
-        </template>
-    </Dropdown>
-</template>
diff --git a/resources/vue/components/forum/posts/Post.vue b/resources/vue/components/forum/posts/Post.vue
index 48921aa..16332fb 100644
--- a/resources/vue/components/forum/posts/Post.vue
+++ b/resources/vue/components/forum/posts/Post.vue
@@ -3,6 +3,7 @@ import {computed, ref, useTemplateRef} from "vue";
 import PostEditForm from "./PostEditForm.vue";
 import PostCreateForm from "./PostCreateForm.vue";
 import PostContent from "@/vue/components/forum/posts/PostContent.vue";
+import UserAvatarDropdown from "@/vue/components/avatar/UserAvatarDropdown.vue";
 import PostReactions from "./PostReactions.vue";
 import {useForumPost} from "../../../store/pinia/forum/ForumPost";
 import {getDiscussionURL} from "@/vue/components/forum/helpers/urls";
@@ -10,7 +11,6 @@ import StudipDateTime from "@/vue/components/StudipDateTime.vue";
 import StudipIcon from "@/vue/components/StudipIcon.vue";
 import {$gettext} from "@/assets/javascripts/lib/gettext";
 import LinksPreview from "@/vue/components/LinksPreview.vue";
-import UserAvatarDropdown from "../UserAvatarDropdown.vue";
 import {userProfileURL} from "../helpers/urls";
 import {useForumConfig} from "../../../store/pinia/forum/ForumConfig";
 
diff --git a/resources/vue/components/forum/posts/PostReactionShow.vue b/resources/vue/components/forum/posts/PostReactionShow.vue
index 8ad13a2..e5790b6 100644
--- a/resources/vue/components/forum/posts/PostReactionShow.vue
+++ b/resources/vue/components/forum/posts/PostReactionShow.vue
@@ -1,7 +1,7 @@
 <script setup>
 import {$gettext} from "../../../../assets/javascripts/lib/gettext";
 import StudipDateTime from "../../StudipDateTime.vue";
-import UserAvatarDropdown from "../UserAvatarDropdown.vue";
+import UserAvatarDropdown from "@/vue/components/avatar/UserAvatarDropdown.vue";
 import {REACTION_ICONS} from "./reactions";
 import {userProfileURL} from "../helpers/urls";
 import {computed, onMounted} from "vue";
-- 
cgit v1.0