[WIP] feat: search content and users #375

awietz · 2024-07-08T07:54:07Z

This pull request add the option to search for questions and answers, in addition to users.

The home "Users" tab has been renamed to "Search".

The search result now contains users, questions and answers, matching the entered search query, using a LIKE statement.

Questions and answers are only searched, when the search query is at least 3 characters long. Otherwise, only users are searched.

Only the first 10 users are returned in the search result (like before).

Only the first 10 questions and answers are returned in the search result.

When nothing is entered in the search field, a set of famous users are displayed instead (just like before).

QUESTIONS

Right now only the answer to a question is clickable as a link. Shouldn't it be the entire content element in the search results (question and answer)?
The answer to a question changes the background on hover. Should that be changed, in the search results, so the entire element changes background color instead, as it's also the entire element that is clickable?
Each question offers a lot of functions (such as like, etc.). Should these also work / we available in the arch results?

TODO

Sanitise search input (leading and trailing whitespace, ``` and other parsed characters...)
~~When query starts with @, only search for users~~ (maybe later in another PR)
Layout for search results (mainly questions)
Tests

nunomaduro · 2024-07-08T22:41:53Z

It's looking great; share some screenshots when you can.

CamKem

Looks great so far!
I added a couple of suggestions you may like to look at.

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

awietz · 2024-07-14T13:44:45Z

I have a few questions listed above, I would like to get feedback on.
I guess when they are answered, the feature can be finished and I can write tests covering all the changes.

CamKem

Code looks really good. Just a name change of that blade file.

In terms of the styling, I'm not sure on the outline being present above the shared updates too... What do you guys think @MrPunyapal & @nunomaduro

CamKem · 2024-07-14T22:24:16Z

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

I would name this component "user-card" - a more general name.

awietz · 2024-07-15T07:57:46Z

On the welcome page there is a users search field, teasing "Lots of interesting profiles".
That should probably remain unchanged, right?

Since the same component is used twice, there would be a little work left for me there.

MrPunyapal · 2024-07-15T08:01:51Z

As per Nuno I think default behaviour should be same and if someone searches it should bring Posts with users 🤔

…e component initialization

MrPunyapal · 2024-11-29T13:17:05Z

@CamKem can you pull the latest and give some ideas on UI?

CamKem · 2024-12-20T02:32:21Z

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

This file should called user-card.blade.php so it more clear what its purpose is.
The card in the file below should be move here.

CamKem · 2024-12-20T02:32:49Z

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

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


Suggested change

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

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

CamKem · 2024-12-20T02:47:38Z

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

+                        @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>


After changing the name & adding the markup for the user card component, utilise it here.

Suggested change

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

<x-user-card

data-parent=true

x-data="clickHandler"

x-on:click="handleNavigation($event)"

wire:key="user-{{ $result->id }}"

:user="$result"

/>

</li>

CamKem · 2024-12-20T02:51:03Z

@CamKem can you pull the latest and give some ideas on UI?

@MrPunyapal - Pulled the latest (sorry for the delay) and had a look, it might be a good idea to include @nunowar regarding UI considerations, as this will work in with the new design, where the search bar will be the one at the top in #733 implementation.

I would say once my review has been addressed we could merge this for now as an interim solution, then we can update the cards to fit with the new design.

CamKem requested changes Jul 10, 2024

View reviewed changes

resources/views/livewire/home/search.blade.php Outdated Show resolved Hide resolved

resources/views/livewire/home/search.blade.php Show resolved Hide resolved

awietz requested a review from CamKem July 14, 2024 13:53

CamKem reviewed Jul 14, 2024

View reviewed changes

nunomaduro approved these changes Nov 28, 2024

View reviewed changes

awietz and others added 17 commits November 29, 2024 18:07

Rename users livewire component and view to search

df5f890

Change placeholder

4df5c28

Change headline

67c687a

Add questions search query

8716138

Show questions in search result

8c8ed1f

Rename test files

6571f22

Use existing component instead

17ea8ca

Move to new component

f647602

Improve layout of mixed content results

d4e257c

Fix comments

a7c3273

Implement custom search logic for welcome page

c6af1ff

Add return type

2a68996

Fix collection merge

11cc067

Update logic

011479d

Add tests

aa6d80c

Make property locked

17e1851

Remove border

9005fae

MrPunyapal force-pushed the feat/search-content-and-users branch from 4339061 to 9005fae Compare November 29, 2024 12:45

MrPunyapal added 2 commits November 29, 2024 18:26

Refactor SearchTest to use 'results' instead of 'users' and streamlin…

0de1c92

…e component initialization

Remove title slot from search layout

ee8935f

MrPunyapal requested a review from CamKem November 29, 2024 13:16

CamKem mentioned this pull request Dec 20, 2024

Feat: Search anything #710

Closed

CamKem requested changes Dec 20, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[WIP] feat: search content and users #375

[WIP] feat: search content and users #375

awietz commented Jul 8, 2024 •

edited

Loading

nunomaduro commented Jul 8, 2024

CamKem left a comment

awietz commented Jul 14, 2024

CamKem left a comment

CamKem Jul 14, 2024 •

edited

Loading

awietz commented Jul 15, 2024

MrPunyapal commented Jul 15, 2024

MrPunyapal commented Nov 29, 2024

CamKem Dec 20, 2024

CamKem Dec 20, 2024

CamKem Dec 20, 2024

CamKem commented Dec 20, 2024

[WIP] feat: search content and users #375

Are you sure you want to change the base?

[WIP] feat: search content and users #375

Conversation

awietz commented Jul 8, 2024 • edited Loading

QUESTIONS

TODO

nunomaduro commented Jul 8, 2024

CamKem left a comment

Choose a reason for hiding this comment

awietz commented Jul 14, 2024

CamKem left a comment

Choose a reason for hiding this comment

CamKem Jul 14, 2024 • edited Loading

Choose a reason for hiding this comment

awietz commented Jul 15, 2024

MrPunyapal commented Jul 15, 2024

MrPunyapal commented Nov 29, 2024

CamKem Dec 20, 2024

Choose a reason for hiding this comment

CamKem Dec 20, 2024

Choose a reason for hiding this comment

CamKem Dec 20, 2024

Choose a reason for hiding this comment

CamKem commented Dec 20, 2024

awietz commented Jul 8, 2024 •

edited

Loading

CamKem Jul 14, 2024 •

edited

Loading