Allowed filters in the url

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();
+    }
 }

resources/js/Components/FlightsGoneBy/FlightFilter.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { Airline, Alliance, Flight, RegionRange, FlightRange, FlightScope } from '@/Types/types'
-import { ref, watch } from 'vue'
+import { reactive, ref, watch, onMounted, nextTick } from 'vue'
 import AllianceLogo from "@/Components/FlightsGoneBy/AllianceLogo.vue"
 
 const props = defineProps<{
@@ -30,6 +30,56 @@ const emit = defineEmits<{
     }]
 }>()
 
+// ── Filter registry ──────────────────────────────────────────────────────────
+//
+// This is the single source of truth for every filter's identity. To add a
+// new filter:
+//   1. Add one entry here (name = the key used in `filters` + the URL param,
+//      emitKey = the key expected by the `change` event, kind = how to parse
+//      values coming back out of the URL).
+//   2. Add a <v-select> in the template with :name="'yourName'" and
+//      v-model="filters.yourName" (initialise it in `filters` below, or just
+//      let step 1 do it for you since `filters` is derived from this list).
+//
+// Nothing else needs to know about the new filter — URL loading, URL syncing,
+// and the emitted payload are all generic over this list.
+
+type FilterKind = 'number' | 'string'
+
+interface FilterDef {
+    name: string       // key in `filters`, and the URL query param name
+    emitKey: string     // key in the payload sent via the `change` event
+    kind: FilterKind    // how to coerce values parsed back out of the URL
+}
+
+const FILTER_DEFS: FilterDef[] = [
+    { name: 'year',          emitKey: 'years',          kind: 'number' },
+    { name: 'airline',       emitKey: 'airlines',       kind: 'number' },
+    { name: 'alliance',      emitKey: 'alliances',      kind: 'number' },
+    { name: 'country',       emitKey: 'countries',      kind: 'string' },
+    { name: 'continent',     emitKey: 'continents',     kind: 'string' },
+    { name: 'flightClass',   emitKey: 'flightClasses',  kind: 'number' },
+    { name: 'crewType',      emitKey: 'crewTypes',      kind: 'number' },
+    { name: 'flightScope',   emitKey: 'flightScopes',   kind: 'string' },
+    { name: 'flightRange',   emitKey: 'flightRanges',   kind: 'string' },
+    { name: 'regionRange',   emitKey: 'regionRanges',   kind: 'string' },
+    { name: 'flightReason',  emitKey: 'flightReasons',  kind: 'number' },
+    { name: 'seatType',      emitKey: 'seatTypes',      kind: 'number' },
+    { name: 'manufacturer',  emitKey: 'manufacturers',  kind: 'string' },
+    { name: 'aircraftModel', emitKey: 'aircraftModels', kind: 'number' },
+    { name: 'engineType',    emitKey: 'engineTypes',    kind: 'string' },
+    { name: 'engineCount',   emitKey: 'engineCounts',   kind: 'number' },
+    { name: 'airportRegion', emitKey: 'airportRegions', kind: 'number' },
+    { name: 'otherUsers',    emitKey: 'otherUsers',     kind: 'string' },
+]
+
+// Single reactive bag of filter state, one array per FILTER_DEFS entry.
+// `filters.year`, `filters.airline`, etc. This is what every v-select
+// v-models against.
+const filters = reactive<Record<string, any[]>>(
+    Object.fromEntries(FILTER_DEFS.map(d => [d.name, []])),
+)
+
 // ── Available options ─────────────────────────────────────────────────────────
 
 type AirlineData = { id: number; name: string; airline: Airline }
@@ -163,59 +213,87 @@ function buildOptions(flights: Flight[]) {
 
 const availableOptions = buildOptions(props.flights)
 
-// ── Filter state ──────────────────────────────────────────────────────────────
-
-const selectedYears          = ref<number[]>([])
-const selectedAirlines       = ref<number[]>([])
-const selectedAlliances      = ref<number[]>([])
-const selectedCountries      = ref<string[]>([])
-const selectedContinents     = ref<string[]>([])
-const selectedFlightClasses  = ref<number[]>([])
-const selectedCrewTypes      = ref<number[]>([])
-const selectedFlightScopes   = ref<FlightScope[]>([])
-const selectedFlightRanges   = ref<FlightRange[]>([])
-const selectedRegionRanges   = ref<RegionRange[]>([])
-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[]>([])
-
 // When selected countries change, drop any selected regions that no longer
 // belong to any of the selected countries.
-watch(selectedCountries, (countries) => {
+watch(() => filters.country, (countries) => {
     if (countries.length === 0) return
-    selectedAirportRegions.value = selectedAirportRegions.value.filter(regionId => {
+    filters.airportRegion = filters.airportRegion.filter((regionId: number) => {
         const region = availableOptions.airportRegions.find(r => r.id === regionId)
         if (!region) return false
-        return [...(region as any).countryCodes].some((code: string) => countries.includes(code))
+        return [...region.countryCodes].some((code: string) => countries.includes(code))
     })
 })
 
+// ── URL query sync ──────────────────────────────────────────────────────────
+
+function loadFiltersFromQuery(): boolean {
+    const params = new URLSearchParams(window.location.search)
+    let foundAny = false
+    for (const def of FILTER_DEFS) {
+        const raw = params.get(def.name)
+        if (!raw) continue
+        const values = raw.split(',').filter(Boolean)
+        filters[def.name] = def.kind === 'number'
+            ? values.map(Number).filter(n => !Number.isNaN(n))
+            : values
+        foundAny = true
+    }
+    return foundAny
+}
+
+function syncUrlWithFilters() {
+    const params = new URLSearchParams()
+    for (const def of FILTER_DEFS) {
+        const value = filters[def.name]
+        if (value.length > 0)
+            params.set(def.name, value.join(','))
+    }
+    const query = params.toString()
+    const newUrl = `${window.location.pathname}${query ? `?${query}` : ''}`
+    window.history.replaceState(window.history.state, '', newUrl)
+}
+
+// ── Emit ──────────────────────────────────────────────────────────────────────
+
 function emitFilters() {
-    emit('change', {
-        years:          selectedYears.value,
-        airlines:       selectedAirlines.value,
-        alliances:      selectedAlliances.value,
-        countries:      selectedCountries.value,
-        continents:     selectedContinents.value,
-        flightClasses:  selectedFlightClasses.value,
-        crewTypes:      selectedCrewTypes.value,
-        flightScopes:   selectedFlightScopes.value,
-        flightRanges:   selectedFlightRanges.value,
-        regionRanges:   selectedRegionRanges.value,
-        flightReasons:  selectedFlightReasons.value,
-        seatTypes:      selectedSeatTypes.value,
-        manufacturers:  selectedManufacturers.value,
-        aircraftModels: selectedAircraftModels.value,
-        engineTypes:    selectedEngineTypes.value,
-        engineCounts:   selectedEngineCounts.value,
-        airportRegions: selectedAirportRegions.value,
-        otherUsers: selectedOtherUsers.value,
-    })
+    syncUrlWithFilters()
+    const payload = Object.fromEntries(
+        FILTER_DEFS.map(def => [def.emitKey, filters[def.name]]),
+    )
+    emit('change', payload as Parameters<typeof emit>[1] extends [infer T] ? T : never)
+}
+
+onMounted(async () => {
+    const hasQueryFilters = loadFiltersFromQuery()
+
+    // Only emit if the URL actually seeded some filters - a plain page load
+    // (no query params) should behave exactly like before and not emit at all,
+    // since the parent already renders its own initial, unfiltered state.
+    if (!hasQueryFilters) return
+
+    // Wait a beat before emitting. Charts further down the tree (ApexCharts,
+    // in particular) initialize asynchronously on their own mount; firing our
+    // update in the same synchronous pass can hand them new series data before
+    // their internal chart instance exists yet, which throws inside the
+    // charting library. A couple of ticks is enough to let that settle.
+    await nextTick()
+    await nextTick()
+    emitFilters()
+})
+
+// ── Copy link ─────────────────────────────────────────────────────────────────
+
+const linkCopied = ref(false)
+
+async function copyFilterLink() {
+    try {
+        await navigator.clipboard.writeText(window.location.href)
+        linkCopied.value = true
+        setTimeout(() => { linkCopied.value = false }, 2000)
+    } catch {
+        // Clipboard API unavailable (e.g. non-secure context) - nothing to fall
+        // back to here, the button just silently no-ops.
+    }
 }
 
 // ── Helpers ───────────────────────────────────────────────────────────────────
@@ -225,362 +303,396 @@ const countryFlagClass = (code: string) =>
 </script>
 
 <template>
-    <div class="flight-filters">
+    <div class="flight-filters-wrapper">
+        <div class="flight-filters">
 
-        <v-select
-            v-model="selectedYears"
-            :items="availableOptions.years"
-            label="Year"
-            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 }}<span v-if="index < Math.min(selectedYears.length, 2) - 1">,&nbsp;</span>
-                </span>
-                <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedYears.length - 2 }}</span>
-            </template>
-        </v-select>
+            <v-select
+                name="year"
+                v-model="filters.year"
+                :items="availableOptions.years"
+                label="Year"
+                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 }}<span v-if="index < Math.min(filters.year.length, 2) - 1">,&nbsp;</span>
+                    </span>
+                    <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.year.length - 2 }}</span>
+                </template>
+            </v-select>
 
-        <v-select
-            v-model="selectedAirlines"
-            :items="availableOptions.airlines"
-            item-title="name" item-value="id"
-            label="Airline"
-            multiple clearable hide-details
-            density="compact" variant="outlined"
-            @update:model-value="emitFilters"
-        >
-            <template #item="{ item, props: itemProps }">
-                <v-list-item v-bind="itemProps">
-                    <template #prepend="{ isSelected }">
-                        <v-checkbox-btn :model-value="isSelected" tabindex="-1" />
-                    </template>
-                    <template #title>
-                        <img
-                            :src="(item as AirlineData).airline.logo_url"
-                            width="32" height="32"
-                            style="object-fit: contain; margin-right: 8px; vertical-align: middle;"
-                            alt=""
-                        />
-                        {{ (item as any).name }}
-                    </template>
-                </v-list-item>
-            </template>
-            <template #selection="{ item, index }">
-                <span v-if="index < 2" class="v-select__selection-text">
-                    {{ (item as any).name }}<span v-if="index < Math.min(selectedAirlines.length, 2) - 1">,&nbsp;</span>
-                </span>
-                <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedAirlines.length - 2 }}</span>
-            </template>
-        </v-select>
+            <v-select
+                name="airline"
+                v-model="filters.airline"
+                :items="availableOptions.airlines"
+                item-title="name" item-value="id"
+                label="Airline"
+                multiple clearable hide-details
+                density="compact" variant="outlined"
+                @update:model-value="emitFilters"
+            >
+                <template #item="{ item, props: itemProps }">
+                    <v-list-item v-bind="itemProps">
+                        <template #prepend="{ isSelected }">
+                            <v-checkbox-btn :model-value="isSelected" tabindex="-1" />
+                        </template>
+                        <template #title>
+                            <img
+                                :src="(item as AirlineData).airline.logo_url"
+                                width="32" height="32"
+                                style="object-fit: contain; margin-right: 8px; vertical-align: middle;"
+                                alt=""
+                            />
+                            {{ (item as any).name }}
+                        </template>
+                    </v-list-item>
+                </template>
+                <template #selection="{ item, index }">
+                    <span v-if="index < 2" class="v-select__selection-text">
+                        {{ (item as any).name }}<span v-if="index < Math.min(filters.airline.length, 2) - 1">,&nbsp;</span>
+                    </span>
+                    <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.airline.length - 2 }}</span>
+                </template>
+            </v-select>
 
-        <v-select
-            v-if="availableOptions.alliances.length > 0"
-            v-model="selectedAlliances"
-            :items="availableOptions.alliances"
-            item-title="name" item-value="id"
-            label="Alliance"
-            multiple clearable hide-details
-            density="compact" variant="outlined"
-            @update:model-value="emitFilters"
-        >
-            <template #item="{ item, props: itemProps }">
-                <v-list-item v-bind="itemProps">
-                    <template #prepend="{ isSelected }">
-                        <v-checkbox-btn :model-value="isSelected" tabindex="-1" />
-                    </template>
-                    <template #title>
-                        <AllianceLogo :size="22" :alliance="(item as any).alliance" style="margin-right: 8px;" />
-                        {{ (item as any).name }}
-                    </template>
-                </v-list-item>
-            </template>
-            <template #selection="{ item, index }">
-                <span v-if="index < 2" class="v-select__selection-text">
-                    {{ (item as any).name }}<span v-if="index < Math.min(selectedAlliances.length, 2) - 1">,&nbsp;</span>
-                </span>
-                <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedAlliances.length - 2 }}</span>
-            </template>
-        </v-select>
+            <v-select
+                v-if="availableOptions.alliances.length > 0"
+                name="alliance"
+                v-model="filters.alliance"
+                :items="availableOptions.alliances"
+                item-title="name" item-value="id"
+                label="Alliance"
+                multiple clearable hide-details
+                density="compact" variant="outlined"
+                @update:model-value="emitFilters"
+            >
+                <template #item="{ item, props: itemProps }">
+                    <v-list-item v-bind="itemProps">
+                        <template #prepend="{ isSelected }">
+                            <v-checkbox-btn :model-value="isSelected" tabindex="-1" />
+                        </template>
+                        <template #title>
+                            <AllianceLogo :size="22" :alliance="(item as any).alliance" style="margin-right: 8px;" />
+                            {{ (item as any).name }}
+                        </template>
+                    </v-list-item>
+                </template>
+                <template #selection="{ item, index }">
+                    <span v-if="index < 2" class="v-select__selection-text">
+                        {{ (item as any).name }}<span v-if="index < Math.min(filters.alliance.length, 2) - 1">,&nbsp;</span>
+                    </span>
+                    <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.alliance.length - 2 }}</span>
+                </template>
+            </v-select>
 
-        <v-select
-            v-model="selectedCountries"
-            :items="availableOptions.countries"
-            item-title="name" item-value="code"
-            label="Country"
-            multiple clearable hide-details
-            density="compact" variant="outlined"
-            @update:model-value="emitFilters"
-        >
-            <template #item="{ item, props: itemProps }">
-                <v-list-item v-bind="itemProps">
-                    <template #prepend="{ isSelected }">
-                        <v-checkbox-btn :model-value="isSelected" tabindex="-1" />
-                    </template>
-                    <template #title>
-                        <span :class="countryFlagClass((item as any).code)" style="margin-right: 8px; font-size: 1.1em;" />
-                        {{ (item as any).name }}
-                    </template>
-                </v-list-item>
-            </template>
-            <template #selection="{ item, index }">
-                <span v-if="index < 2" class="v-select__selection-text">
-                    <span :class="countryFlagClass((item as any).code)" style="margin-right: 4px;" />
-                    {{ (item as any).name }}<span v-if="index < Math.min(selectedCountries.length, 2) - 1">,&nbsp;</span>
-                </span>
-                <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedCountries.length - 2 }}</span>
-            </template>
-        </v-select>
+            <v-select
+                name="country"
+                v-model="filters.country"
+                :items="availableOptions.countries"
+                item-title="name" item-value="code"
+                label="Country"
+                multiple clearable hide-details
+                density="compact" variant="outlined"
+                @update:model-value="emitFilters"
+            >
+                <template #item="{ item, props: itemProps }">
+                    <v-list-item v-bind="itemProps">
+                        <template #prepend="{ isSelected }">
+                            <v-checkbox-btn :model-value="isSelected" tabindex="-1" />
+                        </template>
+                        <template #title>
+                            <span :class="countryFlagClass((item as any).code)" style="margin-right: 8px; font-size: 1.1em;" />
+                            {{ (item as any).name }}
+                        </template>
+                    </v-list-item>
+                </template>
+                <template #selection="{ item, index }">
+                    <span v-if="index < 2" class="v-select__selection-text">
+                        <span :class="countryFlagClass((item as any).code)" style="margin-right: 4px;" />
+                        {{ (item as any).name }}<span v-if="index < Math.min(filters.country.length, 2) - 1">,&nbsp;</span>
+                    </span>
+                    <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.country.length - 2 }}</span>
+                </template>
+            </v-select>
 
-        <v-select
-            v-if="availableOptions.flightScopes.length > 1"
-            v-model="selectedFlightScopes"
-            :items="availableOptions.flightScopes"
-            item-title="label" item-value="value"
-            label="Flight Scope"
-            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).label }}<span v-if="index < Math.min(selectedFlightScopes.length, 2) - 1">,&nbsp;</span>
-                </span>
-                <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedFlightScopes.length - 2 }}</span>
-            </template>
-        </v-select>
+            <v-select
+                v-if="availableOptions.flightScopes.length > 1"
+                name="flightScope"
+                v-model="filters.flightScope"
+                :items="availableOptions.flightScopes"
+                item-title="label" item-value="value"
+                label="Flight Scope"
+                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).label }}<span v-if="index < Math.min(filters.flightScope.length, 2) - 1">,&nbsp;</span>
+                    </span>
+                    <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.flightScope.length - 2 }}</span>
+                </template>
+            </v-select>
 
-        <v-select
-            v-if="availableOptions.airportRegions.length > 0"
-            v-model="selectedAirportRegions"
-            :items="availableOptions.airportRegions"
-            item-title="name" item-value="id"
-            label="Region"
-            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(selectedAirportRegions.length, 2) - 1">,&nbsp;</span>
-                </span>
-                <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedAirportRegions.length - 2 }}</span>
-            </template>
-        </v-select>
+            <v-select
+                v-if="availableOptions.airportRegions.length > 0"
+                name="airportRegion"
+                v-model="filters.airportRegion"
+                :items="availableOptions.airportRegions"
+                item-title="name" item-value="id"
+                label="Region"
+                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(filters.airportRegion.length, 2) - 1">,&nbsp;</span>
+                    </span>
+                    <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.airportRegion.length - 2 }}</span>
+                </template>
+            </v-select>
 
-        <v-select
-            v-if="availableOptions.regionRanges.length > 1"
-            v-model="selectedRegionRanges"
-            :items="availableOptions.regionRanges"
-            item-title="label" item-value="value"
-            label="Region Range"
-            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).label }}<span v-if="index < Math.min(selectedRegionRanges.length, 2) - 1">,&nbsp;</span>
-                </span>
-                <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedRegionRanges.length - 2 }}</span>
-            </template>
-        </v-select>
+            <v-select
+                v-if="availableOptions.regionRanges.length > 1"
+                name="regionRange"
+                v-model="filters.regionRange"
+                :items="availableOptions.regionRanges"
+                item-title="label" item-value="value"
+                label="Region Range"
+                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).label }}<span v-if="index < Math.min(filters.regionRange.length, 2) - 1">,&nbsp;</span>
+                    </span>
+                    <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.regionRange.length - 2 }}</span>
+                </template>
+            </v-select>
 
-        <v-select
-            v-model="selectedContinents"
-            :items="availableOptions.continents"
-            item-title="name" item-value="code"
-            label="Continent"
-            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(selectedContinents.length, 2) - 1">,&nbsp;</span>
-                </span>
-                <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedContinents.length - 2 }}</span>
-            </template>
-        </v-select>
+            <v-select
+                name="continent"
+                v-model="filters.continent"
+                :items="availableOptions.continents"
+                item-title="name" item-value="code"
+                label="Continent"
+                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(filters.continent.length, 2) - 1">,&nbsp;</span>
+                    </span>
+                    <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.continent.length - 2 }}</span>
+                </template>
+            </v-select>
 
-        <v-select
-            v-if="availableOptions.flightRanges.length > 1"
-            v-model="selectedFlightRanges"
-            :items="availableOptions.flightRanges"
-            item-title="label" item-value="value"
-            label="Flight Range"
-            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).label }}<span v-if="index < Math.min(selectedFlightRanges.length, 2) - 1">,&nbsp;</span>
-                </span>
-                <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedFlightRanges.length - 2 }}</span>
-            </template>
-        </v-select>
+            <v-select
+                v-if="availableOptions.flightRanges.length > 1"
+                name="flightRange"
+                v-model="filters.flightRange"
+                :items="availableOptions.flightRanges"
+                item-title="label" item-value="value"
+                label="Flight Range"
+                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).label }}<span v-if="index < Math.min(filters.flightRange.length, 2) - 1">,&nbsp;</span>
+                    </span>
+                    <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.flightRange.length - 2 }}</span>
+                </template>
+            </v-select>
 
-        <v-select
-            v-model="selectedFlightClasses"
-            :items="availableOptions.classes"
-            item-title="name" item-value="id"
-            label="Flight Class"
-            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(selectedFlightClasses.length, 2) - 1">,&nbsp;</span>
-                </span>
-                <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedFlightClasses.length - 2 }}</span>
-            </template>
-        </v-select>
+            <v-select
+                name="flightClass"
+                v-model="filters.flightClass"
+                :items="availableOptions.classes"
+                item-title="name" item-value="id"
+                label="Flight Class"
+                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(filters.flightClass.length, 2) - 1">,&nbsp;</span>
+                    </span>
+                    <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.flightClass.length - 2 }}</span>
+                </template>
+            </v-select>
 
-        <v-select
-            v-if="availableOptions.flightReasons.length > 0"
-            v-model="selectedFlightReasons"
-            :items="availableOptions.flightReasons"
-            item-title="name" item-value="id"
-            label="Flight Reason"
-            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(selectedFlightReasons.length, 2) - 1">,&nbsp;</span>
-                </span>
-                <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedFlightReasons.length - 2 }}</span>
-            </template>
-        </v-select>
+            <v-select
+                v-if="availableOptions.flightReasons.length > 0"
+                name="flightReason"
+                v-model="filters.flightReason"
+                :items="availableOptions.flightReasons"
+                item-title="name" item-value="id"
+                label="Flight Reason"
+                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(filters.flightReason.length, 2) - 1">,&nbsp;</span>
+                    </span>
+                    <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.flightReason.length - 2 }}</span>
+                </template>
+            </v-select>
 
-        <v-select
-            v-if="availableOptions.seatTypes.length > 0"
-            v-model="selectedSeatTypes"
-            :items="availableOptions.seatTypes"
-            item-title="name" item-value="id"
-            label="Seat 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(selectedSeatTypes.length, 2) - 1">,&nbsp;</span>
-                </span>
-                <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedSeatTypes.length - 2 }}</span>
-            </template>
-        </v-select>
+            <v-select
+                v-if="availableOptions.seatTypes.length > 0"
+                name="seatType"
+                v-model="filters.seatType"
+                :items="availableOptions.seatTypes"
+                item-title="name" item-value="id"
+                label="Seat 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(filters.seatType.length, 2) - 1">,&nbsp;</span>
+                    </span>
+                    <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.seatType.length - 2 }}</span>
+                </template>
+            </v-select>
 
-        <v-select
-            v-if="availableOptions.manufacturers.length > 0"
-            v-model="selectedManufacturers"
-            :items="availableOptions.manufacturers"
-            item-title="name" item-value="name"
-            label="Aircraft Manufacturer"
-            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(selectedManufacturers.length, 2) - 1">,&nbsp;</span>
-                </span>
-                <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedManufacturers.length - 2 }}</span>
-            </template>
-        </v-select>
+            <v-select
+                v-if="availableOptions.manufacturers.length > 0"
+                name="manufacturer"
+                v-model="filters.manufacturer"
+                :items="availableOptions.manufacturers"
+                item-title="name" item-value="name"
+                label="Aircraft Manufacturer"
+                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(filters.manufacturer.length, 2) - 1">,&nbsp;</span>
+                    </span>
+                    <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.manufacturer.length - 2 }}</span>
+                </template>
+            </v-select>
 
-        <v-select
-            v-if="availableOptions.aircraftModels.length > 0"
-            v-model="selectedAircraftModels"
-            :items="availableOptions.aircraftModels"
-            item-title="name" item-value="id"
-            label="Aircraft Model"
-            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(selectedAircraftModels.length, 2) - 1">,&nbsp;</span>
-                </span>
-                <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedAircraftModels.length - 2 }}</span>
-            </template>
-        </v-select>
+            <v-select
+                v-if="availableOptions.aircraftModels.length > 0"
+                name="aircraftModel"
+                v-model="filters.aircraftModel"
+                :items="availableOptions.aircraftModels"
+                item-title="name" item-value="id"
+                label="Aircraft Model"
+                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(filters.aircraftModel.length, 2) - 1">,&nbsp;</span>
+                    </span>
+                    <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.aircraftModel.length - 2 }}</span>
+                </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.engineTypes.length > 0"
+                name="engineType"
+                v-model="filters.engineType"
+                :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(filters.engineType.length, 2) - 1">,&nbsp;</span>
+                    </span>
+                    <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.engineType.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.engineCounts.length > 0"
+                name="engineCount"
+                v-model="filters.engineCount"
+                :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(filters.engineCount.length, 2) - 1">,&nbsp;</span>
+                    </span>
+                    <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.engineCount.length - 2 }}</span>
+                </template>
+            </v-select>
 
-        <v-select
-            v-if="availableOptions.crewTypes.length > 0"
-            v-model="selectedCrewTypes"
-            :items="availableOptions.crewTypes"
-            item-title="name" item-value="id"
-            label="Crew 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(selectedCrewTypes.length, 2) - 1">,&nbsp;</span>
-                </span>
-                <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedCrewTypes.length - 2 }}</span>
-            </template>
-        </v-select>
-        <v-select
-            v-if="availableOptions.otherUsers.length > 0"
-            v-model="selectedOtherUsers"
-            :items="availableOptions.otherUsers"
-            label="Flew With"
-            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 }}<span v-if="index < Math.min(selectedOtherUsers.length, 2) - 1">,&nbsp;</span>
-        </span>
-                <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedOtherUsers.length - 2 }}</span>
-            </template>
-        </v-select>
+            <v-select
+                v-if="availableOptions.crewTypes.length > 0"
+                name="crewType"
+                v-model="filters.crewType"
+                :items="availableOptions.crewTypes"
+                item-title="name" item-value="id"
+                label="Crew 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(filters.crewType.length, 2) - 1">,&nbsp;</span>
+                    </span>
+                    <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.crewType.length - 2 }}</span>
+                </template>
+            </v-select>
+
+            <v-select
+                v-if="availableOptions.otherUsers.length > 0"
+                name="otherUsers"
+                v-model="filters.otherUsers"
+                :items="availableOptions.otherUsers"
+                label="Flew With"
+                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 }}<span v-if="index < Math.min(filters.otherUsers.length, 2) - 1">,&nbsp;</span>
+                    </span>
+                    <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.otherUsers.length - 2 }}</span>
+                </template>
+            </v-select>
+
+        </div>
+
+        <div class="flight-filters-actions">
+            <v-btn
+                :prepend-icon="linkCopied ? 'mdi-check' : 'mdi-link-variant'"
+                :color="linkCopied ? 'success' : undefined"
+                variant="outlined"
+                size="small"
+                @click="copyFilterLink"
+            >
+                {{ linkCopied ? 'Copied!' : 'Copy Link to This Page With Filters' }}
+            </v-btn>
+        </div>
     </div>
 </template>
 
@@ -595,4 +707,8 @@ const countryFlagClass = (code: string) =>
 .flight-filters .v-select {
     flex: 1 1 160px;
 }
+
+.flight-filters-actions {
+    margin-top: 12px;
+}
 </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/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">

routes/web.php

@@ -103,10 +103,11 @@ Route::middleware(['auth'])->group(function () {
 
 
 
-//Search Routes
+    //Search Routes
     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');