Skip to content

refactor: remove redirect while typing #408

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
MatteoGabriele wants to merge 16 commits into from
Closed

refactor: remove redirect while typing #408

Changes from 12 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
215db77
refactor(home): remove redirect while typing
MatteoGabriele Jan 30, 2026
cec25c7
Merge branch 'main' into refactor/remove-redirect-on-typing
MatteoGabriele Jan 30, 2026
1ef63f5
refactor: remove unnecessary focus logic
MatteoGabriele Jan 30, 2026
2c5502d
Merge branch 'refactor/remove-redirect-on-typing' of https://github.c…
MatteoGabriele Jan 30, 2026
2df242d
Merge branch 'main' into refactor/remove-redirect-on-typing
MatteoGabriele Jan 30, 2026
d61ac5c
test(use-colors): change test expectations
MatteoGabriele Jan 30, 2026
49e1e92
Merge branch 'refactor/remove-redirect-on-typing' of https://github.c…
MatteoGabriele Jan 30, 2026
6ca8d8e
Merge branch 'main' into refactor/remove-redirect-on-typing
MatteoGabriele Jan 30, 2026
954e5b5
Merge branch 'main' into refactor/remove-redirect-on-typing
MatteoGabriele Jan 31, 2026
df9b58b
Merge branch 'main' into refactor/remove-redirect-on-typing
MatteoGabriele Jan 31, 2026
106902d
test: revert changes
MatteoGabriele Jan 31, 2026
c39cb59
Merge branch 'main' into refactor/remove-redirect-on-typing
MatteoGabriele Jan 31, 2026
f25d0b7
refactor: use v-model trim modifier
MatteoGabriele Jan 31, 2026
9ce4495
Merge branch 'refactor/remove-redirect-on-typing' of https://github.c…
MatteoGabriele Jan 31, 2026
a17929c
Merge branch 'main' into refactor/remove-redirect-on-typing
MatteoGabriele Jan 31, 2026
146dcdf
merge: resolve conflicts with main
danielroe Feb 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 8 additions & 18 deletions app/pages/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,15 @@
<script setup lang="ts">
import { debounce } from 'perfect-debounce'

const isMobile = useIsMobile()
const router = useRouter()
const searchQuery = shallowRef('')
const searchInputRef = useTemplateRef('searchInputRef')
const { focused: isSearchFocused } = useFocus(searchInputRef)

const isMobile = useIsMobile()

const debouncedNavigate = debounce(() => {
Copy link
Copy Markdown
Member

@danielroe danielroe Jan 31, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what about instead using a trailing rather than leading debounce? it would likely have the same effect....

Copy link
Copy Markdown
Member Author

@MatteoGabriele MatteoGabriele Jan 31, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But we don't actually redirect unless the user presses Enter or clicks "Search".
This makes the experience less unexpected in my opinion, since people might be trying to remember things while typing.

PS: For the trim, I just remembered that v-model has a .trim modifier built in.

Copy link
Copy Markdown
Member Author

@MatteoGabriele MatteoGabriele Feb 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@danielroe, do you want me to try anything in particular for this one? Maybe I didn't fully understand your comment

Copy link
Copy Markdown
Member

@danielroe danielroe Feb 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no, I fixed that in a separate PR: #526

does that fix any of the issues you were trying to fix here?

Copy link
Copy Markdown
Member Author

@MatteoGabriele MatteoGabriele Feb 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The focus issue seems to be resolved with your PR. 👍
There’s also a UX preference question around whether the animation should exist at all, which is more subjective. If you’d prefer, we can close this PR and keep the animation as-is.

Copy link
Copy Markdown
Member Author

@MatteoGabriele MatteoGabriele Feb 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Update: I have encountered the missing letter again when typing. It's hard to reproduce, but it's out there somewhere. just FYI

function handleSubmit() {
router.push({
path: '/search',
query: searchQuery.value.trim() ? { q: searchQuery.value.trim() } : undefined,
name: 'search',
query: {
q: searchQuery.value.trim(),
},
})
}, 250)

function handleSearch() {
// If input is empty, navigate immediately (no need to debounce)
return searchQuery.value.trim() ? debouncedNavigate() : router.push('/search')
}

useSeoMeta({
Expand Down Expand Up @@ -64,13 +56,12 @@ defineOgImageComponent('Default', {
class="w-full max-w-xl motion-safe:animate-slide-up motion-safe:animate-fill-both"
style="animation-delay: 0.2s"
>
<form method="GET" action="/search" class="relative" @submit.prevent="handleSearch">
<form method="GET" action="/search" class="relative" @submit.prevent="handleSubmit">
<label for="home-search" class="sr-only">
{{ $t('search.label') }}
</label>

<!-- Search input with glow effect on focus -->
<div class="relative group" :class="{ 'is-focused': isSearchFocused }">
<div class="relative group">
<!-- Subtle glow effect -->
<div
class="absolute -inset-px rounded-lg bg-gradient-to-r from-fg/0 via-fg/5 to-fg/0 opacity-0 transition-opacity duration-500 blur-sm group-[.is-focused]:opacity-100"
Expand All @@ -93,7 +84,6 @@ defineOgImageComponent('Default', {
v-bind="noCorrect"
:autofocus="!isMobile"
class="w-full bg-bg-subtle border border-border rounded-lg ps-8 pe-24 py-4 font-mono text-base text-fg placeholder:text-fg-subtle transition-border-color duration-300 focus:border-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
@input="handleSearch"
/>

<button
Expand Down
Loading