Adds a user search box

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">