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

Open
MatteoGabriele wants to merge 8 commits into
base: main
Choose a base branch
from
+8 −20
Open

refactor: remove redirect while typing #408

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 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
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
23 changes: 7 additions & 16 deletions app/pages/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,14 @@
<script setup lang="ts">
import { debounce } from 'perfect-debounce'

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

const debouncedNavigate = debounce(() => {
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 @@ -49,13 +42,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 @@ -78,7 +70,6 @@ defineOgImageComponent('Default')
v-bind="noCorrect"
autofocus
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
5 changes: 1 addition & 4 deletions test/nuxt/composables/use-colors.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,8 +77,6 @@ describe('useCssVariables', () => {
await nextTick()

expect(useMutationObserverMock).not.toHaveBeenCalled()
expect(lastMutationObserverInstance).not.toBeNull()
expect(lastMutationObserverInstance!.observe).toHaveBeenCalledTimes(1)

wrapper.unmount()
})
Expand All @@ -95,8 +93,7 @@ describe('useCssVariables', () => {

await nextTick()

expect(lastMutationObserverInstance).not.toBeNull()
expect(lastMutationObserverInstance!.observe).toHaveBeenCalledTimes(1)
expect(useMutationObserverMock).toHaveBeenCalledOnce()

wrapper.unmount()
})
Expand Down
Loading