Session api token validation

resources/js/Components/FlightsGoneBy/Feed/FeedItem.vue

@@ -14,6 +14,7 @@ import FlightCancelledFeedItem from "@/Components/FlightsGoneBy/Feed/FlightCance
 import FlightImportedFeedItem from "@/Components/FlightsGoneBy/Feed/FlightImportedFeedItem.vue";
 import FlightMovedFeedItem from "@/Components/FlightsGoneBy/Feed/FlightMovedFeedItem.vue";
 import ButtonLink from "@/Components/FlightsGoneBy/ButtonLink.vue";
+import Avatar from "@/Components/FlightsGoneBy/Feed/Avatar.vue";
 
 const props = defineProps<{
     action: UserAction
@@ -56,11 +57,7 @@ function timeAgo(dateStr: string): string {
 <template>
     <div class="feed-item glass glass-border">
         <div class="card-top">
-            <div class="avatar">
-                <Link :href="route('profile.view', { user: action.user?.name })">
-                {{ action.user?.name?.charAt(0).toUpperCase() ?? '?' }}
-                </Link>
-            </div>
+            <Avatar :user="action.user" />
             <div class="meta">
                 <span class="name">
                     <Link :href="route('profile.view', { user: action.user?.name })">
@@ -110,21 +107,6 @@ function timeAgo(dateStr: string): string {
     border-top: 1px solid rgba(255, 255, 255, 0.06);
 }
 
-.avatar {
-    width: 2.25rem;
-    height: 2.25rem;
-    border-radius: 50%;
-    background: rgba(99, 102, 241, 0.2);
-    border: 1px solid rgba(99, 102, 241, 0.35);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-weight: 600;
-    font-size: 0.9rem;
-    color: #818cf8;
-    flex-shrink: 0;
-}
-
 .meta {
     display: flex;
     flex-direction: column;