Adds a user search box

app/Http/Controllers/SearchController.php

@@ -5,6 +5,7 @@ namespace App\Http\Controllers;
 use App\Models\Aircraft;
 use App\Models\Airline;
 use App\Models\Airport;
+use App\Models\User;
 use Illuminate\Http\Request;
 
 class SearchController extends Controller
@@ -82,4 +83,23 @@ class SearchController extends Controller
             ])
             ->values();
     }
+
+
+
+    public function users()
+    {
+        $q = request('q', '');
+
+        if (strlen($q) < 2) return [];
+
+        return User::where('name', 'ilike', "%{$q}%")
+            ->orderBy('name')
+            ->limit(50)
+            ->get(['id', 'name'])
+            ->map(fn($user) => [
+                'value' => $user->id,
+                'title' => $user->name,
+            ])
+            ->values();
+    }
 }

app/Http/Middleware/HandleInertiaRequests.php

@@ -38,6 +38,7 @@ class HandleInertiaRequests extends Middleware
                 'roles' => $request->user()?->getRoleNames() ?? [],
                 'permissions' => $request->user()?->getAllPermissions()->pluck('name') ?? [],
                 'apiToken' => session('api_token'),
+                'following' => $request->user()?->following()->with('followee')->get()->pluck('followee')->filter()->pluck('name')->toArray() ?? [],
             ],
             'flash' => [
                 'success' => $request->session()->get('success'),

resources/js/Components/FlightsGoneBy/Charts/ChartTypes/DonutChart.vue

@@ -250,7 +250,7 @@ const legendItems = computed(() => {
 
             <div v-if="mode === 'all'" class="ring-labels">
                 <span v-for="(r, i) in normalizedRings" :key="r.name">
-                    &#9899; {{ i === 0 ? 'Outer' : i === normalizedRings.length - 1 ? 'Inner' : `Ring ${i + 1}` }}
+                    {{ i === 0 ? 'Outer' : i === normalizedRings.length - 1 ? 'Inner' : `Ring ${i + 1}` }}
                     Ring = {{ r.name }}
                 </span>
             </div>

resources/js/Components/FlightsGoneBy/Charts/FlightTypeChart.vue

@@ -7,10 +7,9 @@ const props = defineProps<{
 </script>
 <template>
     <DonutChart
-        title="Flight Scopes"
+        title="Flight Scope"
         :height="280"
-        center-mode="count"
+        total-label="Flights"
-        total-label="Flight Scopes"
         :labels="flightStats.flightTypes.value.labels"
         :series="flightStats.flightTypes.value.series"
     />

resources/js/Components/FlightsGoneBy/FlightFilter.vue

@@ -23,6 +23,8 @@ const emit = defineEmits<{
         seatTypes: number[]
         manufacturers: string[]
         aircraftModels: number[]
+        engineTypes: string[]
+        engineCounts: number[]
         airportRegions: number[]
         otherUsers: string[]
     }]
@@ -62,6 +64,8 @@ function buildOptions(flights: Flight[]) {
     const regionRanges   = new Set<RegionRange>()
     const manufacturers  = new Map<string, { name: string }>()
     const aircraftModels = new Map<number, { id: number; name: string }>()
+    const engineTypes    = new Map<string, { name: string }>()
+    const engineCounts   = new Map<number, { count: number }>()
     const airportRegions = new Map<number, { id: number; name: string; countryCodes: Set<string> }>()
     const otherUsers = new Set<string>()
 
@@ -120,6 +124,12 @@ function buildOptions(flights: Flight[]) {
         if (f.aircraft?.id != null && f.aircraft?.display_name_short)
             aircraftModels.set(f.aircraft.id, { id: f.aircraft.id, name: f.aircraft.display_name_short })
 
+        if (f.aircraft?.engine_type)
+            engineTypes.set(f.aircraft.engine_type, { name: f.aircraft.engine_type })
+
+        if (f.aircraft?.engine_count != null)
+            engineCounts.set(f.aircraft.engine_count, { count: f.aircraft.engine_count })
+
         flightScopes.add(f.scope)
         flightRanges.add(f.range)
         regionRanges.add(f.region_range)
@@ -144,6 +154,8 @@ function buildOptions(flights: Flight[]) {
         regionRanges:   regionRangeOrder.filter(r => regionRanges.has(r)).map(r => ({ value: r, label: REGION_RANGE_LABELS[r] })),
         manufacturers:  [...manufacturers.values()].sort((a, b) => a.name.localeCompare(b.name)),
         aircraftModels: [...aircraftModels.values()].sort((a, b) => a.name.localeCompare(b.name)),
+        engineTypes:    [...engineTypes.values()].sort((a, b) => a.name.localeCompare(b.name)),
+        engineCounts:   [...engineCounts.values()].sort((a, b) => a.count - b.count),
         airportRegions: [...airportRegions.values()].sort((a, b) => a.name.localeCompare(b.name)),
         otherUsers: [...otherUsers].sort((a, b) => a.localeCompare(b)),
     }
@@ -167,6 +179,8 @@ const selectedFlightReasons  = ref<number[]>([])
 const selectedSeatTypes      = ref<number[]>([])
 const selectedManufacturers  = ref<string[]>([])
 const selectedAircraftModels = ref<number[]>([])
+const selectedEngineTypes    = ref<string[]>([])
+const selectedEngineCounts   = ref<number[]>([])
 const selectedAirportRegions = ref<number[]>([])
 const selectedOtherUsers = ref<string[]>([])
 
@@ -197,6 +211,8 @@ function emitFilters() {
         seatTypes:      selectedSeatTypes.value,
         manufacturers:  selectedManufacturers.value,
         aircraftModels: selectedAircraftModels.value,
+        engineTypes:    selectedEngineTypes.value,
+        engineCounts:   selectedEngineCounts.value,
         airportRegions: selectedAirportRegions.value,
         otherUsers: selectedOtherUsers.value,
     })
@@ -496,6 +512,42 @@ const countryFlagClass = (code: string) =>
             </template>
         </v-select>
 
+        <v-select
+            v-if="availableOptions.engineTypes.length > 0"
+            v-model="selectedEngineTypes"
+            :items="availableOptions.engineTypes"
+            item-title="name" item-value="name"
+            label="Engine Type"
+            multiple clearable hide-details
+            density="compact" variant="outlined"
+            @update:model-value="emitFilters"
+        >
+            <template #selection="{ item, index }">
+                <span v-if="index < 2" class="v-select__selection-text">
+                    {{ (item as any).name }}<span v-if="index < Math.min(selectedEngineTypes.length, 2) - 1">,&nbsp;</span>
+                </span>
+                <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedEngineTypes.length - 2 }}</span>
+            </template>
+        </v-select>
+
+        <v-select
+            v-if="availableOptions.engineCounts.length > 0"
+            v-model="selectedEngineCounts"
+            :items="availableOptions.engineCounts"
+            item-title="count" item-value="count"
+            label="Engine Count"
+            multiple clearable hide-details
+            density="compact" variant="outlined"
+            @update:model-value="emitFilters"
+        >
+            <template #selection="{ item, index }">
+                <span v-if="index < 2" class="v-select__selection-text">
+                    {{ (item as any).count }}<span v-if="index < Math.min(selectedEngineCounts.length, 2) - 1">,&nbsp;</span>
+                </span>
+                <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedEngineCounts.length - 2 }}</span>
+            </template>
+        </v-select>
+
         <v-select
             v-if="availableOptions.crewTypes.length > 0"
             v-model="selectedCrewTypes"

resources/js/Components/FlightsGoneBy/FlightMap.vue

@@ -659,7 +659,9 @@ export default defineComponent({
 
         const fitBounds = (): void => {
             if (!props.flights.length) return
-            const padding = props.compact ? 50 : 60
+            const padding = props.compact
+                ? { top: 20, bottom: 20, left: 55, right: 55 }
+                : { top: 60, bottom: 60, left: 60, right: 60 }
 
             const lngs = props.flights.flatMap(f => [f.departure_airport.longitude_deg, f.arrival_airport.longitude_deg])
             const lats = props.flights.flatMap(f => [f.departure_airport.latitude_deg,  f.arrival_airport.latitude_deg])

resources/js/Components/FlightsGoneBy/FollowingSelectBox.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { usePage, router } from "@inertiajs/vue3";
+import { SharedProps } from "@/Types/types";
+
+const props = withDefaults(
+    defineProps<{
+        redirectRoute: string;
+        routeParams?: Record<string, string | number>;
+        placeholder?: string;
+    }>(),
+    {
+        routeParams: () => ({}),
+    }
+);
+
+const page = usePage<SharedProps>().props;
+const following = [...page.auth?.following ?? [], page.auth?.user?.name]
+    .filter((x, i, a) => a.indexOf(x) === i);
+
+function onUpdate(user: string) {
+    if (!user) return;
+
+    router.get(
+        route(props.redirectRoute, {
+            user,
+            ...props.routeParams,
+        })
+    );
+}
+</script>
+
+<template>
+
+    <VSelect
+        v-if="following.length > 1"
+        :placeholder="placeholder"
+        variant="outlined"
+        density="comfortable"
+        :items="following"
+        @update:model-value="onUpdate"
+    >
+    </VSelect>
+</template>
+
+<style scoped>
+</style>

resources/js/Components/FlightsGoneBy/Liveries/LiveryImage.vue

@@ -25,5 +25,4 @@ defineProps<{
     background-size: cover;
     min-width: 300px;
 }
-
 </style>

resources/js/Components/FlightsGoneBy/MainHeader.vue

@@ -5,6 +5,7 @@ import type { SharedProps } from '@/Types/types'
 import { ref, onMounted, onUnmounted } from 'vue'
 import NotificationMenu from "@/Components/FlightsGoneBy/NotificationMenu.vue";
 import Logo from "@/Components/FlightsGoneBy/Logo.vue";
+import UserSearchBox from "@/Components/UserSearchBox.vue";
 
 const page = usePage<SharedProps>()
 const menuOpen = ref(false)
@@ -30,6 +31,7 @@ onUnmounted(() => document.removeEventListener('click', handleClickOutside))
             <Logo variant="color" />
         </Link>
 
+        <UserSearchBox density="compact" style="max-width:400px; width: 400px;" />
         <NotificationMenu v-if="page.props.auth?.user" :unread-count="page.props.unread_notification_count" />
 
         <!-- Desktop nav -->

resources/js/Components/UserSearchBox.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { Link } from '@inertiajs/vue3'
+
+defineProps<{
+    density?: null | 'default' | 'comfortable' | 'compact';
+}>()
+
+interface UserOption {
+    value: number
+    title: string
+}
+
+const search = ref('')
+const selectedUser = ref<UserOption | null>(null)
+const items = ref<UserOption[]>([])
+const loading = ref(false)
+
+let debounceTimeout: ReturnType<typeof setTimeout> | undefined
+
+async function fetchUsers(query: string) {
+    if (!query) {
+        items.value = []
+        return
+    }
+
+    loading.value = true
+    try {
+        const response = await fetch(`/search/users?q=${encodeURIComponent(query)}`)
+        if (!response.ok) throw new Error('Failed to fetch users')
+        items.value = await response.json()
+    } catch (error) {
+        console.error('User search failed:', error)
+        items.value = []
+    } finally {
+        loading.value = false
+    }
+}
+
+watch(search, (newQuery) => {
+    clearTimeout(debounceTimeout)
+    debounceTimeout = setTimeout(() => {
+        fetchUsers(newQuery)
+    }, 300)
+})
+</script>
+
+<template>
+    <div class="user-search-box">
+        <v-autocomplete
+            v-model="selectedUser"
+            v-model:search="search"
+            :items="items"
+            :loading="loading"
+            item-title="title"
+            item-value="value"
+            return-object
+            label="Search users"
+            placeholder="Type a name..."
+            prepend-inner-icon="mdi-magnify"
+            :density="density ?? 'default'"
+            variant="outlined"
+            no-filter
+            clearable
+            hide-details
+            autocomplete="off"
+        >
+            <template #item="{ item }">
+                <Link :href="`/u/${item.title}`" class="user-search-result">
+                    <v-list-item :title="item.title" />
+                </Link>
+            </template>
+        </v-autocomplete>
+    </div>
+</template>
+
+<style scoped>
+.user-search-box {
+    display: block;
+    align-self: center;
+    width: 100%;
+}
+</style>

resources/js/Composables/useFlightStats.ts

@@ -175,7 +175,7 @@ export function getCountries(flights: Flight[], upcomingFlights: Flight[]) {
     const result = {
         countries: sorted,
         series: [
-            { name: 'Departed',  data: sorted.map(s => s.past) },
+            { name: 'Flown',  data: sorted.map(s => s.past) },
             { name: 'Upcoming', data: sorted.map(s => s.upcoming) },
         ],
     }

resources/js/Pages/Feed.vue

@@ -9,6 +9,7 @@ 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";
+import UserSearchBox from "@/Components/UserSearchBox.vue";
 
 defineOptions({ layout: MainLayout })
 
@@ -46,8 +47,9 @@ const { data: following, loading: followingLoading } = useApiResource<User[]>('/
                 </div>
             </section>
 
+            <UserSearchBox />
+
             <div class="feed-grid">
-                <!-- FOLLOWING: secondary, supporting content -->
                 <aside class="following-box">
                     <h2>Following</h2>
                     <div v-if="followingLoading" class="following-loading">

resources/js/Pages/Profile/UserAchievement.vue

@@ -12,6 +12,7 @@ import {useFlights} from "@/Composables/useFlights";
 import InlineBadge from "@/Components/FlightsGoneBy/InlineBadge.vue";
 import GlassTooltip from "@/Components/FlightsGoneBy/GlassTooltip.vue";
 import ButtonLink from "@/Components/FlightsGoneBy/ButtonLink.vue";
+import FollowingSelectBox from "@/Components/FlightsGoneBy/FollowingSelectBox.vue";
 
 defineOptions({ layout: MainLayout })
 
@@ -119,6 +120,12 @@ const unlocked = computed(() => {
                 :families="aircraft_families"
                 :major-alliances="majorAlliances"
             />
+
+            <FollowingSelectBox
+                redirect-route="profile.achievement"
+                :route-params="{ achievement: achievement.internal_name }"
+                placeholder="View the Progress of Someone You Follow"
+            />
         </div>
     </ProfileLayout>
 </template>

resources/js/Pages/UserAchievements.vue

@@ -9,6 +9,7 @@ import MainLayout from "@/Layouts/MainLayout.vue";
 import Panel from "@/Components/FlightsGoneBy/Panels/Panel.vue";
 import PanelHeader from "@/Components/FlightsGoneBy/Panels/PanelHeader.vue";
 import {useUpdateSetting} from "@/Composables/useUpdateSetting";
+import FollowingSelectBox from "@/Components/FlightsGoneBy/FollowingSelectBox.vue";
 
 const {updateSetting} = useUpdateSetting()
 
@@ -121,6 +122,8 @@ const filteredUnlockedCount = computed(() =>
                     />
                 </div>
             </Panel>
+
+            <FollowingSelectBox redirect-route="profile.achievements" placeholder="View The Achievements of Someone You Follow" />
         </div>
     </ProfileLayout>
 </template>

resources/js/Pages/UserProfile.vue

@@ -56,6 +56,8 @@ const selectedFlightReasons  = ref<number[]>([])
 const selectedSeatTypes      = ref<number[]>([])
 const selectedManufacturers  = ref<string[]>([])
 const selectedAircraftModels = ref<number[]>([])
+const selectedEngineTypes    = ref<string[]>([])
+const selectedEngineCounts   = ref<number[]>([])
 const selectedAirportRegions = ref<number[]>([])
 const selectedOtherUsers = ref<string[]>([])
 
@@ -74,6 +76,8 @@ const activeFilterCount = computed(() =>
     selectedSeatTypes.value.length +
     selectedManufacturers.value.length +
     selectedAircraftModels.value.length +
+    selectedEngineTypes.value.length +
+    selectedEngineCounts.value.length +
     selectedAirportRegions.value.length +
     selectedOtherUsers.value.length
 )
@@ -93,6 +97,8 @@ function onFiltersChange(filters: {
     seatTypes: number[]
     manufacturers: string[]
     aircraftModels: number[]
+    engineTypes: string[]
+    engineCounts: number[]
     airportRegions: number[]
     otherUsers: string[]
 }) {
@@ -111,6 +117,8 @@ function onFiltersChange(filters: {
     selectedSeatTypes.value      = filters.seatTypes
     selectedManufacturers.value  = filters.manufacturers
     selectedAircraftModels.value = filters.aircraftModels
+    selectedEngineTypes.value    = filters.engineTypes
+    selectedEngineCounts.value   = filters.engineCounts
     selectedAirportRegions.value = filters.airportRegions
     selectedOtherUsers.value     = filters.otherUsers
 }
@@ -141,6 +149,8 @@ function matchesFilters(f: Flight): boolean {
     if (selectedSeatTypes.value.length && !selectedSeatTypes.value.includes(f.seat_type?.id ?? -1)) return false
     if (selectedManufacturers.value.length && !selectedManufacturers.value.includes(f.aircraft?.manufacturer_code ?? '')) return false
     if (selectedAircraftModels.value.length && !selectedAircraftModels.value.includes(f.aircraft?.id ?? -1)) return false
+    if (selectedEngineTypes.value.length && !selectedEngineTypes.value.includes(f.aircraft?.engine_type ?? '')) return false
+    if (selectedEngineCounts.value.length && !selectedEngineCounts.value.includes(f.aircraft?.engine_count ?? -1)) return false
     if (selectedAirportRegions.value.length) {
         const depRegion = f.departure_airport.region?.id
         const arrRegion = f.arrival_airport.region?.id

resources/js/Types/types.d.ts

@@ -101,6 +101,7 @@ export type SharedProps = import('@inertiajs/core').PageProps & {
         roles: string[];
         permissions: string[];
         apiToken: string | null;
+        following: string[];
     },
     flash: {
         success?: string;

routes/web.php

@@ -107,6 +107,7 @@ Route::middleware(['auth'])->group(function () {
     Route::get('/search/airlines', [SearchController::class, 'airlines'])->name('search.airlines');
     Route::get('/search/aircraft', [SearchController::class, 'aircraft'])->name('search.aircraft');
     Route::get('/search/airports', [SearchController::class, 'airports'])->name('search.airports');
+    Route::get('/search/users', [SearchController::class, 'users'])->name('search.users');
 
     Route::get('/u/{user}', [UserProfileController::class, 'view'])->name('profile.view');
     Route::get('/u/{user}/map', [UserProfileController::class, 'map'])->name('profile.map');