Adjusted the active user indicator removing self and adding blinking …

…animation

resources/js/components/EntityDetail.vue

@@ -156,30 +156,10 @@
                 :icon-only="false"
             />
             <div class="d-flex flex-row gap-2">
-                <div
+                <ActiveUsers
                     v-if="state.activeUsers.length > 0"
-                    class="d-flex flex-row gap-1 align-items-center"
-                >
-                    <div class="avatar-list">
-                        <a
-                            v-for="user in state.activeUsers"
-                            :key="user.id"
-                            href="#"
-                            class="avatar-list-item"
-                            @click.prevent="showUserInfo(user)"
-                        >
-                            <user-avatar
-                                :user="user"
-                                :size="20"
-                                class="align-middle"
-                            />
-                        </a>
-                    </div>
-                    <DotIndicator
-                        :type="'success'"
-                        style="width: 0.6rem;"
-                    />
-                </div>
+                    :active-users="state.activeUsers"
+                />
                 <div class="d-flex flex-row gap-1 align-items-center">
                     <i class="fas fa-fw fa-user-edit" />
                     <span :title="date(state.lastModified, undefined, true, true)">
@@ -471,12 +451,14 @@
 
     import { usePreventNavigation } from '@/helpers/form.js';
 
+    import ActiveUsers from '@/components/user/ActiveUsers.vue';
     import MetadataTab from '@/components/entity/MetadataTab.vue';
     import EntityTypeLabel from '@/components/entity/EntityTypeLabel.vue';
     import DotIndicator from '@/components/indicators/DotIndicator.vue';
 
     export default {
         components: {
+            ActiveUsers,
             EntityTypeLabel,
             MetadataTab,
             DotIndicator,

resources/js/components/user/ActiveUsers.vue

@@ -0,0 +1,66 @@
+<template>
+    <div
+        v-if="otherUsers.length > 0"
+        class="d-flex flex-row gap-1 align-items-center rounded bg-white border border-1 border-primary p-1 px-2"
+    >
+        <DotIndicator
+            class="blink"
+            type="primary"
+            style="width: 0.6rem;"
+        />
+
+        <div class="d-flex align-items-center avatar-list ps-2">
+            <a
+                v-for="user in otherUsers"
+                :key="user.id"
+                href="#"
+                class="avatar-list-item d-flex align-items-center text-decoration-none"
+                @click.prevent="showUserInfo(user)"
+            >
+                <user-avatar
+                    :user="user"
+                    :size="20"
+                    class="align-middle"
+                />
+            </a>
+        </div>
+    </div>
+</template>
+
+<script>
+    import {
+        showUserInfo,
+    } from '@/helpers/modal.js';
+
+    import { computed } from 'vue';
+
+    import useUserStore from '@/bootstrap/stores/user.js';
+
+    import DotIndicator from '@/components/indicators/DotIndicator.vue';
+    import UserAvatar from '@/components/UserAvatar.vue';
+
+    export default {
+        components: {
+            DotIndicator,
+            UserAvatar,
+        },
+        props: {
+            activeUsers: {
+                required: true,
+                type: Array,
+            },
+        },
+        setup(props) {
+
+            const userStore = useUserStore();
+            const otherUsers = computed(() => {
+                return props.activeUsers.filter(user => user.id !== userStore.getCurrentUserId);
+            });
+
+            return {
+                otherUsers,
+                showUserInfo,
+            };
+        },
+    };
+</script>

resources/sass/_animations.scss

@@ -24,4 +24,14 @@
         opacity: 1;
         transform: rotate(0deg);
     }
+}
+
+
+.blink {
+    animation: blink ease-in-out 1s infinite;
+}
+@keyframes blink {
+    0% {opacity: 0;}
+    50% {opacity: 1;}
+    100% {opacity: 0;}
 }