Added Notifications

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

@@ -13,13 +13,14 @@ import FlightUpdatedFeedItem from "@/Components/FlightsGoneBy/Feed/FlightUpdated
 import FlightCancelledFeedItem from "@/Components/FlightsGoneBy/Feed/FlightCancelledFeedItem.vue";
 import FlightImportedFeedItem from "@/Components/FlightsGoneBy/Feed/FlightImportedFeedItem.vue";
 import FlightMovedFeedItem from "@/Components/FlightsGoneBy/Feed/FlightMovedFeedItem.vue";
+import ButtonLink from "@/Components/FlightsGoneBy/ButtonLink.vue";
 
 const props = defineProps<{
     action: UserAction
 }>()
 
 const flight = computed(() =>{
-    if (props.action.type === 'flight_booked' || props.action.type === 'flight_logged'){
+    if (props.action.type === 'flight_booked' || props.action.type === 'flight_logged' || props.action.type === 'flight_departing' || props.action.type === 'flight_arriving' || props.action.type === 'flight_imported'){
         return (props.action.data as UserActionFlightBookedData).flight
     } else if (props.action.type === 'flight_updated'){
         return (props.action.data as UserActionFlightUpdatedData).updated
@@ -77,15 +78,10 @@ function timeAgo(dateStr: string): string {
             <FlightImportedFeedItem v-if="action.type == 'flight_imported'" :flight="(action.data as UserActionFlightBookedData).flight" ></FlightImportedFeedItem>
             <FlightUpdatedFeedItem v-if="action.type == 'flight_updated'" :data="(action.data as UserActionFlightUpdatedData)" ></FlightUpdatedFeedItem>
             <FlightCancelledFeedItem v-if="action.type == 'flight_cancelled'" :data="(action.data as UserActionFlightCancelledData)"  flight=""></FlightCancelledFeedItem>
-            <FlightMovedFeedItem v-if="action.type == 'flight_departing' || action.type== 'flight_arriving'" :flight="(action.data as UserActionFlightBookedData).flight" ></FlightMovedFeedItem>/
+            <FlightMovedFeedItem v-if="action.type == 'flight_departing' || action.type== 'flight_arriving'" :action="action.type" :flight="(action.data as UserActionFlightBookedData).flight" ></FlightMovedFeedItem>
         </div>
         <div class="card-actions">
-            <Link v-if="flight" :href="`/u/${action.user?.name}/departure-board/${flight?.id}`" class="view-flight-link">
-                View Flight
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <path d="M5 12h14M13 6l6 6-6 6"/>
-                </svg>
-            </Link>
+            <ButtonLink  v-if="flight" :href="route('profile.flight', { user: action.user?.name, userFlight: flight?.id })"  label="View Flight" />
         </div>
     </div>
 </template>
@@ -146,13 +142,6 @@ function timeAgo(dateStr: string): string {
     color: #9ca3af;
 }
 
-.changes {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    gap: 0.3rem 1rem;
-    margin: 0;
-    font-size: 0.82rem;
-}
 
 .changes dt {
     color: #9ca3af;
@@ -166,24 +155,6 @@ function timeAgo(dateStr: string): string {
     word-break: break-word;
 }
 
-.view-flight-link {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.4rem;
-    font-size: 0.8rem;
-    font-weight: 500;
-    color: #818cf8;
-    text-decoration: none;
-    padding: 0.35rem 0.75rem;
-    border: 1px solid rgba(99, 102, 241, 0.25);
-    background: rgba(99, 102, 241, 0.08);
-    transition: background 0.15s, border-color 0.15s;
-}
-
-.view-flight-link:hover {
-    background: rgba(99, 102, 241, 0.18);
-    border-color: rgba(99, 102, 241, 0.45);
-}
 
 .view-flight-link svg {
     width: 0.85rem;

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

@@ -15,9 +15,22 @@ const actionText = computed(() => props.action === 'flight_departing' ? 'departe
 
 <template>
     <div class="flight-booked">
-        Flight <FlightBadge :flight="flight" /> from {{flight.departure_airport.municipality}} to {{flight.arrival_airport.municipality}} has {{actionText}}.
+        <span class="flight-summary">
+            Flight <FlightBadge :flight="flight" /> from {{flight.departure_airport.municipality}} to {{flight.arrival_airport.municipality}} has {{actionText}}.
+        </span>
     </div>
 </template>
 
 <style scoped>
+.flight-booked {
+    padding: 0.75rem 1.25rem;
+}
+
+.flight-summary {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.875rem;
+    color: #9ca3af;
+}
 </style>

resources/js/Components/FlightsGoneBy/MainHeader.vue

@@ -112,37 +112,6 @@ header {
     color: var(--text);
 }
 
-/* Notification button */
-.notif-btn {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 36px;
-    height: 36px;
-    background: none;
-    border: none;
-    cursor: pointer;
-    color: var(--text);
-    border-radius: 4px;
-    transition: color 0.15s ease, background 0.15s ease;
-}
-
-.notif-btn:hover {
-    color: var(--accent);
-    background: rgba(56, 189, 248, 0.07);
-}
-
-.notif-dot {
-    position: absolute;
-    top: 6px;
-    right: 6px;
-    width: 7px;
-    height: 7px;
-    background: var(--accent);
-    border-radius: 50%;
-    border: 1.5px solid var(--bg);
-}
 
 /* Shared nav link base */
 .nav-link {

resources/js/Components/FlightsGoneBy/NotificationMenu.vue

@@ -21,6 +21,10 @@ const markAllRead = async (notifications: Notification[]) => {
     unread.forEach(n => n.read_at = new Date().toISOString())
 }
 
+const emit = defineEmits<{
+    (e: 'update:unreadCount', value: number): void
+}>()
+
 watch(open, async (isOpen) => {
     if (!isOpen || notifications.value.length) return
     loading.value = true
@@ -28,6 +32,7 @@ watch(open, async (isOpen) => {
     notifications.value = data
     loading.value = false
     await markAllRead(notifications.value)
+    emit('update:unreadCount', 0)  // <-- add this
 })
 </script>
 
@@ -84,7 +89,8 @@ watch(open, async (isOpen) => {
 .notif-menu {
     position: absolute;
     top: calc(100% + 0.4rem);
-    right: 0;
+    left: 50%;
+    transform: translateX(-50%);
     width: 320px;
     background: var(--bg);
     border: 1px solid rgba(56, 189, 248, 0.12);