Session api token validation
This commit is contained in:
+175
-19
@@ -1,8 +1,14 @@
|
||||
<script setup lang="ts">
|
||||
import MainLayout from "@/Layouts/MainLayout.vue";
|
||||
import {User, UserAction} from "@/Types/types";
|
||||
import { Head } from "@inertiajs/vue3";
|
||||
import { User, UserAction } from "@/Types/types";
|
||||
import {Head, Link} from "@inertiajs/vue3";
|
||||
import FeedItem from "@/Components/FlightsGoneBy/Feed/FeedItem.vue";
|
||||
import ProfileLayout from "@/Components/FlightsGoneBy/ProfileLayout.vue";
|
||||
import FlightMap from "@/Components/FlightsGoneBy/FlightMap.vue";
|
||||
import PlaneLoader from "@/Components/FlightsGoneBy/PlaneLoader.vue";
|
||||
import { useFlights } from "@/Composables/useFlights";
|
||||
import { useApiResource } from "@/Composables/useApiResource";
|
||||
import Avatar from "@/Components/FlightsGoneBy/Feed/Avatar.vue";
|
||||
|
||||
defineOptions({ layout: MainLayout })
|
||||
|
||||
@@ -10,32 +16,78 @@ const props = defineProps<{
|
||||
user: User
|
||||
feed: UserAction[]
|
||||
}>()
|
||||
|
||||
// Flights belonging to people the user follows — adjust endpoint to match your API
|
||||
const { flights: followingFlights, flightsLoading } = useFlights('/internal/feed/following-flights')
|
||||
|
||||
// People the user follows — adjust shape/endpoint to match your API
|
||||
const { data: following, loading: followingLoading } = useApiResource<User[]>('/internal/feed/following')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head title="Feed" />
|
||||
<ProfileLayout :showCount="false" :user="user" followStatus="none" :canView="true" :loading="false">
|
||||
<Head title="Feed" />
|
||||
|
||||
<div class="feed-page">
|
||||
<header class="feed-header">
|
||||
<h1>Feed</h1>
|
||||
<span class="feed-count">{{ feed.length }} updates</span>
|
||||
</header>
|
||||
<div class="feed-page">
|
||||
<header class="feed-header">
|
||||
<h1>Feed</h1>
|
||||
<span class="feed-count">{{ feed.length }} updates</span>
|
||||
</header>
|
||||
|
||||
<div v-if="feed.length === 0" class="empty">
|
||||
<p>Nothing here yet — follow someone to see their flight updates!</p>
|
||||
<!-- MAP: the headline content -->
|
||||
<section class="map-section">
|
||||
<div class="map-caption">
|
||||
<span class="caption-icon">🛫</span>
|
||||
Recently logged by people you follow
|
||||
</div>
|
||||
<FlightMap v-if="!flightsLoading" :flights="followingFlights" :show-legend="false" />
|
||||
<div v-else class="loading-state">
|
||||
<PlaneLoader />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="feed-grid">
|
||||
<!-- FOLLOWING: secondary, supporting content -->
|
||||
<aside class="following-box">
|
||||
<h2>Following</h2>
|
||||
<div v-if="followingLoading" class="following-loading">
|
||||
<PlaneLoader />
|
||||
</div>
|
||||
<div v-else-if="!following?.length" class="empty-small">
|
||||
<p>You're not following anyone yet.</p>
|
||||
</div>
|
||||
<ul v-else class="following-list">
|
||||
<li v-for="person in following" :key="person.id" class="following-item">
|
||||
<Avatar :user="person" />
|
||||
<Link :href="route('profile.view', { user: person?.name })">
|
||||
<span class="following-name">{{ person.name }}</span>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</aside>
|
||||
|
||||
<!-- FEED: condensed, de-emphasised -->
|
||||
<div class="feed-condensed">
|
||||
<div v-if="feed.length === 0" class="empty">
|
||||
<p>Nothing here yet — follow someone to see their flight updates!</p>
|
||||
</div>
|
||||
<div v-else class="feed-list">
|
||||
<FeedItem v-for="action in feed" :key="action.id" :action="action" compact />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="feed-list">
|
||||
<FeedItem v-for="action in feed" :key="action.id" :action="action" />
|
||||
</div>
|
||||
</div>
|
||||
</ProfileLayout>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.feed-page {
|
||||
margin: 0 auto;
|
||||
padding: 2rem 1rem;
|
||||
width: 55%;
|
||||
width: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@@ -48,7 +100,6 @@ const props = defineProps<{
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.feed-header h1 {
|
||||
@@ -62,14 +113,119 @@ const props = defineProps<{
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
/* MAP */
|
||||
.map-section {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.map-caption {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
z-index: 10;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background: rgba(10, 15, 30, 0.65);
|
||||
backdrop-filter: blur(8px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
border-radius: 999px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.caption-icon {
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.loading-state {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 40dvh;
|
||||
}
|
||||
|
||||
/* GRID: following sidebar + condensed feed */
|
||||
.feed-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 240px 1fr;
|
||||
gap: 2rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.feed-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.following-box {
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.following-box h2 {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
margin: 0 0 0.75rem;
|
||||
}
|
||||
|
||||
.following-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.following-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.following-avatar {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.following-name {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.following-loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.empty-small p {
|
||||
font-size: 0.8rem;
|
||||
color: #6b7280;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* CONDENSED FEED — de-emphasised vs before */
|
||||
.feed-condensed {
|
||||
opacity: 0.92;
|
||||
}
|
||||
|
||||
.empty p {
|
||||
text-align: center;
|
||||
margin-top: 3rem;
|
||||
color: #6b7280;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.feed-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
gap: 1rem; /* tightened from 2rem */
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -56,7 +56,7 @@ const unlocked = computed(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ProfileLayout :title="`${achievement.name}`" :canView="canView" :achievementCount="achievementCount" :user="user" :followStatus="followStatus" :loading="flightsLoading">
|
||||
<ProfileLayout :title="`${achievement.name}`" :canView="canView" :achievementCount="achievementCount" :user="user" :followStatus="followStatus" :loading="flightsLoading" showCount>
|
||||
<div class="innerLayout">
|
||||
<ButtonLink variant="flat" icon="mdi-arrow-left" :label="`Back to ${user.name}'s Achievements`" :href="`${route('profile.achievements', { user: user.name })}#${achievement.internal_name}`" />
|
||||
|
||||
|
||||
@@ -1,30 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import MainLayout from "@/Layouts/MainLayout.vue";
|
||||
import { Head } from '@inertiajs/vue3';
|
||||
import {Flight, User} from "@/Types/types";
|
||||
import ProfileViewSwitcher from "@/Components/FlightsGoneBy/ProfileViewSwitcher.vue";
|
||||
import ProfileLayout from "@/Components/FlightsGoneBy/ProfileLayout.vue";
|
||||
import BoardingPasses from "@/Components/FlightsGoneBy/BoardingPasses.vue";
|
||||
|
||||
defineOptions({
|
||||
layout: MainLayout
|
||||
})
|
||||
|
||||
defineProps<{
|
||||
user: User
|
||||
flights: Flight[]
|
||||
canEdit: boolean
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head :title="`${user.name}'s Flights`" />
|
||||
<ProfileLayout :flights="flights" :user="user">
|
||||
<ProfileViewSwitcher :user="user" active-view="passes" />
|
||||
<BoardingPasses :flights="flights" :canEdit="canEdit" />
|
||||
</ProfileLayout>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -71,6 +71,7 @@ const filteredUnlockedCount = computed(() =>
|
||||
:loading="false"
|
||||
:canView="canView"
|
||||
:title="`${user.name}'s Achievements`"
|
||||
showCount
|
||||
>
|
||||
<ProfileViewSwitcher active-view="achievements" :user="user" />
|
||||
|
||||
|
||||
@@ -30,6 +30,7 @@ const props = defineProps<{
|
||||
:user="user"
|
||||
:followStatus="followStatus"
|
||||
:flight-count="flightCount"
|
||||
showCount
|
||||
:loading="false">
|
||||
<Head :title="`${flight.flight_number ?? user.name + '\'s Flight'}`" />
|
||||
|
||||
|
||||
@@ -187,7 +187,7 @@ function switchView(view: ProfileView) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ProfileLayout :title="`${user.name}'s Flights`" :canView="canView" :followStatus="followStatus" :flightCount="flightCount" :user="user" :loading="flightsLoading">
|
||||
<ProfileLayout :title="`${user.name}'s Flights`" :canView="canView" :followStatus="followStatus" :flightCount="flightCount" :user="user" :loading="flightsLoading" showCount>
|
||||
|
||||
<div class="toolbar">
|
||||
<ProfileViewSwitcher :user="user" :active-view="activeView" @update:active-view="switchView" />
|
||||
|
||||
Reference in New Issue
Block a user