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

<script setup lang="ts">
import {
    UserAction,
    UserActionFlightBookedData,
    UserActionFlightCancelledData,
    UserActionFlightUpdatedData
} from "@/Types/types";
import InlineBadge from "@/Components/FlightsGoneBy/InlineBadge.vue";
import FlightBookedFeedItem from "@/Components/FlightsGoneBy/Feed/FlightBookedFeedItem.vue";
import {computed} from "vue";
import {Link} from "@inertiajs/vue3";
import FlightUpdatedFeedItem from "@/Components/FlightsGoneBy/Feed/FlightUpdatedFeedItem.vue";
import FlightCancelledFeedItem from "@/Components/FlightsGoneBy/Feed/FlightCancelledFeedItem.vue";
import FlightImportedFeedItem from "@/Components/FlightsGoneBy/Feed/FlightImportedFeedItem.vue";

const props = defineProps<{
    action: UserAction
}>()

const flight = computed(() =>{
    if (props.action.type === 'flight_booked' || props.action.type === 'flight_logged'){
        return (props.action.data as UserActionFlightBookedData).flight
    } else if (props.action.type === 'flight_updated'){
        return (props.action.data as UserActionFlightUpdatedData).updated
    } else {
        return null
    }
})

const badgeVariant = computed(() => {
    switch (props.action.type) {
        case 'flight_booked': return 'generic'
        case 'flight_logged': return 'generic'
        case 'flight_imported': return 'economy'
        case 'flight_updated': return 'economy'
        case 'flight_cancelled': return 'crew'
        default: return 'economy'
    }
})

function timeAgo(dateStr: string): string {
    const diff = Date.now() - new Date(dateStr).getTime()
    const mins = Math.floor(diff / 60000)
    if (mins < 1) return 'just now'
    if (mins < 60) return `${mins}m ago`
    const hrs = Math.floor(mins / 60)
    if (hrs < 24) return `${hrs}h ago`
    return `${Math.floor(hrs / 24)}d ago`
}
</script>

<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>
            <div class="meta">
                <span class="name">
                    <Link :href="route('profile.view', { user: action.user?.name })">
                        {{ action.user?.name ?? 'Unknown' }}
                    </Link>
                </span>
                <span class="time">{{ timeAgo(action.created_at) }}</span>
            </div>
            <span class="type-badge">
                <InlineBadge :variant="badgeVariant">{{ action.display_type }}</InlineBadge>
            </span>
        </div>
        <div class="card-content">
            <FlightBookedFeedItem v-if="action.type == 'flight_booked' || action.type == 'flight_logged'" :flight="(action.data as UserActionFlightBookedData).flight" ></FlightBookedFeedItem>
            <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>
        </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>
        </div>
    </div>
</template>

<style scoped>
.feed-item {
    padding: 0;
    overflow: hidden;
}

.card-top {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem;
}

.card-content {
    padding: 0;
}

.card-actions {
    display: flex;
    justify-content: flex-end;
    padding: 0.75rem 1.25rem;
    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;
    gap: 0.1rem;
    flex: 1;
}

.name {
    font-weight: 600;
    font-size: 0.9rem;
}

.time {
    font-size: 0.75rem;
    color: #9ca3af;
}

.changes {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.3rem 1rem;
    margin: 0;
    font-size: 0.82rem;
}

.changes dt {
    color: #9ca3af;
    text-transform: capitalize;
    white-space: nowrap;
}

.changes dd {
    margin: 0;
    font-weight: 500;
    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;
    height: 0.85rem;
}
</style>