[WIP] feat: search content and users

app/Livewire/Home/Users.php → app/Livewire/Home/Search.php

@@ -5,18 +5,23 @@
 namespace App\Livewire\Home;
 
 use App\Livewire\Concerns\Followable;
+use App\Models\Question;
 use App\Models\User;
 use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Database\Eloquent\Collection;
+use Illuminate\Support\Collection as SupportCollection;
 use Illuminate\Support\Facades\Cache;
 use Illuminate\View\View;
+use Livewire\Attributes\Locked;
 use Livewire\Attributes\Url;
 use Livewire\Component;
 
-final class Users extends Component
+final class Search extends Component
 {
     use Followable;
 
+    private const int MIN_CONTENT_SEARCH_QUERY_LENGTH = 1;
+
     /**
      * The component's search query.
      */
@@ -28,18 +33,72 @@ final class Users extends Component
      */
     public bool $focusInput = false;
 
+    /**
+     * Indicates if the search result is for the welcome page.
+     */
+    #[Locked]
+    public bool $welcomeSearch = false;
+
     /**
      * Renders the component.
      */
     public function render(): View
     {
-        return view('livewire.home.users', [
-            'users' => $this->query !== ''
-                ? $this->usersByQuery()
+        return view('livewire.home.search', [
+            'results' => $this->query !== ''
+                ? $this->searchByQuery()
                 : $this->defaultUsers(),
         ]);
     }
 
+    /**
+     * Returns the users and questions by query.
+     *
+     * @return \Illuminate\Support\Collection<int, mixed>
+     */
+    private function searchByQuery(): SupportCollection
+    {
+        $users = $this->usersByQuery();
+
+        // Only search for questions if the query is long enough.
+        $questions = (mb_strlen($this->query) >= self::MIN_CONTENT_SEARCH_QUERY_LENGTH)
+            ? $this->questionsByQuery()
+            : collect();
+
+        return $this->welcomeSearch
+            ? $this->welcomeSearchResults($users, $questions)
+            : $users->merge($questions);
+    }
+
+    /**
+     * Returns the users and questions by query.
+     *
+     * @param  Collection<int, User>  $users
+     * @param  Collection<int, Question>|SupportCollection<int, mixed>  $questions
+     * @return SupportCollection<int, mixed>
+     */
+    private function welcomeSearchResults(Collection $users, Collection|SupportCollection $questions): SupportCollection
+    {
+        if ($questions->isEmpty()) {
+            return collect()->merge($users);
+        }
+
+        // With few matching users, fill results with questions, to reach 10.
+        if ($users->count() <= 6) {
+            return collect()
+                ->merge($users)
+                ->merge($questions->take(10 - $users->count()));
+        }
+
+        // Otherwise take up to 4 questions and users enough to reach 10 results.
+        $questions = $questions->take(4);
+        $users = $users->take(10 - $questions->count());
+
+        return collect()
+            ->merge($users)
+            ->merge($questions);
+    }
+
     /**
      * Returns the users by query, ordered by the number of questions received.
      *
@@ -68,6 +127,24 @@ private function usersByQuery(): Collection
             ->get();
     }
 
+    /**
+     * Returns the questions by query, ordered by the number of likes received.
+     *
+     * @return Collection<int, Question>
+     */
+    private function questionsByQuery(): Collection
+    {
+        return Question::query()
+            ->withCount('likes')
+            ->orderBy('likes_count', 'desc')
+            ->with(['to', 'from', 'likes'])
+            ->whereAny(['question', 'answer'], 'like', "%{$this->query}%")
+            ->where('is_reported', false)
+            ->where('is_ignored', false)
+            ->limit(10)
+            ->get();
+    }
+
     /**
      * Returns the default users, ordered by the number of questions received.
      *

resources/views/about.blade.php

@@ -104,7 +104,7 @@ class="mt-12 max-w-4xl text-center font-mona text-3xl font-light md:text-4xl"
             <div class="absolute -left-20 top-0 h-56 w-56 rounded-full bg-gradient-to-r from-teal-500 via-transparent to-emerald-300 blur-3xl"></div>
 
             <div class="z-10 order-2 mt-10 w-full max-w-sm md:order-1 md:mt-0">
-                <livewire:home.users />
+                <livewire:home.search welcomeSearch />
             </div>
 
             <div class="order-1 flex cursor-pointer flex-col items-center justify-center transition-transform duration-700 sm:max-w-md md:order-2 md:-translate-y-10 md:translate-x-10 md:items-start md:hover:-translate-y-5 md:hover:translate-x-5">

resources/views/components/found-avatar-with-name.blade.php

@@ -0,0 +1,39 @@
+@props(['user'])
+
+<a
+    href="{{ route('profile.show', ['username' => $user->username]) }}"
+    class="group flex items-center gap-3 rounded-2xl border border-slate-900 bg-slate-950 bg-opacity-80 p-4 transition-colors hover:bg-slate-900"
+    wire:navigate
+>
+    <figure class="{{ $user->is_company_verified ? 'rounded-md' : 'rounded-full' }} h-12 w-12 flex-shrink-0 overflow-hidden bg-slate-800 transition-opacity group-hover:opacity-90">
+        <img
+            class="{{ $user->is_company_verified ? 'rounded-md' : 'rounded-full' }} h-12 w-12"
+            src="{{ $user->avatar_url }}"
+            alt="{{ $user->username }}"
+        />
+    </figure>
+
+    <div class="flex flex-col overflow-hidden text-sm">
+        <div class="flex items-center space-x-2">
+            <p class="truncate font-medium">
+                {{ $user->name }}
+            </p>
+
+            @if ($user->is_verified && $user->is_company_verified)
+                <x-icons.verified-company
+                    :color="$user->right_color"
+                    class="size-4"
+                />
+            @elseif ($user->is_verified)
+                <x-icons.verified
+                    :color="$user->right_color"
+                    class="size-4"
+                />
+            @endif
+        </div>
+
+        <p class="truncate text-slate-500 transition-colors group-hover:text-slate-400">
+            {{ '@'.$user->username }}
+        </p>
+    </div>
+</a>

resources/views/components/home-menu.blade.php

@@ -42,8 +42,8 @@ class="h-6 w-6 xsm:mr-2"
 
     <a
         data-pan="home-tabs-search"
-        href="{{ route('home.users') }}"
-        class="{{ request()->routeIs('home.users') ? 'bg-pink-600 text-slate-100' : 'dark:text-slate-500 text-slate-400 dark:hover:text-slate-100 hover:text-slate-800 dark:bg-slate-900 bg-slate-50 ' }} inline-flex flex-1 items-center justify-center whitespace-nowrap rounded-md border dark:border-transparent border-slate-200 px-3 py-2 text-sm font-medium leading-4 transition duration-150 ease-in-out focus:outline-none"
+        href="{{ route('home.search') }}"
+        class="{{ request()->routeIs('home.search') ? 'bg-pink-600 text-slate-100' : 'dark:text-slate-500 text-slate-400 dark:hover:text-slate-100 hover:text-slate-800 dark:bg-slate-900 bg-slate-50 ' }} inline-flex flex-1 items-center justify-center whitespace-nowrap rounded-md border dark:border-transparent border-slate-200 px-3 py-2 text-sm font-medium leading-4 transition duration-150 ease-in-out focus:outline-none"
         title="{{ __('Search') }}"
         wire:navigate
         wire:transition

resources/views/home/users.blade.php → resources/views/home/search.blade.php

@@ -3,7 +3,7 @@
         <div class="min-h-screen w-full max-w-md overflow-hidden rounded-lg px-2 dark:shadow-md sm:px-0">
             <x-home-menu></x-home-menu>
 
-            <livewire:home.users :focus-input="true" />
+            <livewire:home.search :focus-input="true" />
         </div>
     </div>
 </x-app-layout>

resources/views/livewire/home/search.blade.php

@@ -0,0 +1,90 @@
+<div class="mb-12 w-full dark:text-slate-200 text-slate-400">
+    <div class="mb-8 w-full max-w-md">
+        <div class="relative flex items-center py-1">
+
+            <x-heroicon-o-magnifying-glass class="absolute left-5 z-50 size-5"/>
+
+            <x-text-input
+                x-ref="searchInput"
+                x-init="if ($wire.focusInput) $refs.searchInput.focus()"
+                wire:model.live.debounce.500ms="query"
+                name="q"
+                placeholder="Search for users and content..."
+                class="w-full mx-1 !rounded-2xl dark:!bg-slate-950 !bg-slate-50 !bg-opacity-80 py-3 pl-14"
+            />
+        </div>
+    </div>
+
+    @if ($results->isEmpty())
+        <section class="rounded-lg">
+            <p class="my-8 text-center text-lg text-slate-500">No matching users or content found.</p>
+        </section>
+    @else
+        <section class="max-w-2xl">
+            <ul class="flex flex-col gap-3">
+                @foreach ($results as $result)
+                    @if ($result instanceof App\Models\Question)
+                        <li>
+                            <livewire:questions.show
+                                    :questionId="$result->id"
+                                :key="'question-' . $result->id"
+                            />
+                        </li>
+                    @elseif ($result instanceof App\Models\User)
+                        @php($user = $result)
+                        <li
+                            data-parent=true
+                            x-data="clickHandler"
+                            x-on:click="handleNavigation($event)"
+                            wire:key="user-{{ $user->id }}"
+                        >
+                            <div class="group flex items-center gap-3 rounded-2xl border dark:border-slate-900 border-slate-200 dark:bg-slate-950 bg-slate-50 dark:bg-opacity-80 p-4 transition-colors dark:hover:bg-slate-900 hover:bg-slate-100">
+                                <figure class="{{ $user->is_company_verified ? 'rounded-md' : 'rounded-full' }} h-12 w-12 flex-shrink-0 overflow-hidden bg-slate-800 transition-opacity group-hover:opacity-90">
+                                    <img
+                                        class="{{ $user->is_company_verified ? 'rounded-md' : 'rounded-full' }} h-12 w-12"
+                                        src="{{ $user->avatar_url }}"
+                                        alt="{{ $user->username }}"
+                                    />
+                                </figure>
+                                <div class="flex flex-col overflow-hidden text-sm text-left">
+                                    <a
+                                        class="flex items-center space-x-2"
+                                        href="{{ route('profile.show', ['username' => $user->username]) }}"
+                                        wire:navigate
+                                        x-ref="parentLink"
+                                    >
+                                        <p class="text-wrap truncate font-medium dark:text-white text-black">
+                                            {{ $user->name }}
+                                        </p>
+
+                                        @if ($user->is_verified && $user->is_company_verified)
+                                            <x-icons.verified-company
+                                                :color="$user->right_color"
+                                                class="size-4"
+                                            />
+                                        @elseif ($user->is_verified)
+                                            <x-icons.verified
+                                                :color="$user->right_color"
+                                                class="size-4"
+                                            />
+                                        @endif
+                                    </a>
+                                    <p class="truncate text-slate-500 transition-colors group-hover:text-slate-400">
+                                        {{ '@'.$user->username }}
+                                    </p>
+                                </div>
+                                <x-follow-button
+                                    :id="$user->id"
+                                    :isFollower="auth()->check() && $user->is_follower"
+                                    :isFollowing="auth()->check() && $user->is_following"
+                                    class="ml-auto"
+                                    wire:key="follow-button-{{ $user->id }}"
+                                />
+                            </div>
+                        </li>
+                    @endif
+                @endforeach
+            </ul>
+        </section>
+    @endif
+</div>

routes/web.php

@@ -22,7 +22,7 @@
 Route::redirect('/for-you', '/following')->name('home.for_you');
 Route::view('/following', 'home/following')->name('home.following');
 Route::view('/trending', 'home/trending-questions')->name('home.trending');
-Route::view('/users', 'home/users')->name('home.users');
+Route::view('/search', 'home/search')->name('home.search');
 
 Route::get('/hashtag/{hashtag}', HashtagController::class)->name('hashtag.show');
 

tests/Http/Home/SearchTest.php

@@ -0,0 +1,13 @@
+<?php
+
+declare(strict_types=1);
+
+use App\Livewire\Home\Search;
+
+it('can see the "search" view', function () {
+    $response = $this->get(route('home.search'));
+
+    $response->assertOk()
+        ->assertSee('Search')
+        ->assertSeeLivewire(Search::class);
+});