From 5fcfe5c903302c89319fc7d3a5692f7f22876c9a Mon Sep 17 00:00:00 2001
From: Sean Luis <seanluis47@gmail.com>
Date: Fri, 21 Feb 2025 12:27:59 -0300
Subject: [PATCH 01/11] feat: enhance search functionality and theme toggle
 component with improved conditions and transitions

---
 components/SearchInput.vue | 464 +++++++++++++++++++++++++++++++++++++
 components/ThemeToggle.vue |  77 ++++--
 pages/index.vue            |  30 +--
 services/github.ts         |  35 ++-
 4 files changed, 560 insertions(+), 46 deletions(-)
 create mode 100644 components/SearchInput.vue

diff --git a/components/SearchInput.vue b/components/SearchInput.vue
new file mode 100644
index 0000000..0c7a727
--- /dev/null
+++ b/components/SearchInput.vue
@@ -0,0 +1,464 @@
+<script setup lang="ts">
+import { ref, watch, computed, nextTick, onMounted, onUnmounted } from 'vue'
+// Si quieres usar useTimeout de VueUse, necesitas importarlo:
+// import { useTimeout } from '@vueuse/core'
+
+interface SearchToken {
+  type: 'qualifier' | 'text' | 'space';
+  value: string;
+  qualifier?: string;
+}
+
+const props = defineProps<{
+  modelValue: string;
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void;
+  (e: 'search'): void;
+}>()
+
+const input = ref<HTMLInputElement | null>(null)
+const searchInput = ref(props.modelValue)
+const showSuggestions = ref(false)
+const cursorPosition = ref(0)
+const containerWidth = ref(0)
+const searchContainer = ref<HTMLDivElement | null>(null)
+const dropdownPosition = ref({ left: 0, top: 0 })
+const isInputFocused = ref(false)
+
+// Función simplificada para colorear el texto
+const colorText = (text: string) => {
+  const parts: { text: string; type: 'qualifier' | 'value' | 'normal' }[] = []
+  let currentPosition = 0
+
+  while (currentPosition < text.length) {
+    let matched = false
+
+    // Buscar qualifiers
+    for (const qualifier of Object.keys(QUALIFIERS)) {
+      if (text.slice(currentPosition).toLowerCase().startsWith(qualifier.toLowerCase())) {
+        // Agregar qualifier
+        parts.push({
+          text: qualifier,
+          type: 'qualifier'
+        })
+        
+        currentPosition += qualifier.length
+        
+        // Buscar valor hasta el espacio
+        let valueStart = currentPosition
+        while (currentPosition < text.length && text[currentPosition] !== ' ') {
+          currentPosition++
+        }
+        
+        if (currentPosition > valueStart) {
+          parts.push({
+            text: text.slice(valueStart, currentPosition),
+            type: 'value'
+          })
+        }
+        
+        matched = true
+        break
+      }
+    }
+
+    if (!matched) {
+      // Agregar texto normal hasta el siguiente qualifier o final
+      let normalText = ''
+      while (currentPosition < text.length) {
+        let isQualifier = false
+        for (const qualifier of Object.keys(QUALIFIERS)) {
+          if (text.slice(currentPosition).toLowerCase().startsWith(qualifier.toLowerCase())) {
+            isQualifier = true
+            break
+          }
+        }
+        if (isQualifier) break
+        normalText += text[currentPosition]
+        currentPosition++
+      }
+      if (normalText) {
+        parts.push({
+          text: normalText,
+          type: 'normal'
+        })
+      }
+    }
+  }
+
+  return parts
+}
+
+const coloredParts = computed(() => colorText(searchInput.value))
+
+const handleInput = (event: Event) => {
+  const value = (event.target as HTMLInputElement).value
+  searchInput.value = value
+  emit('update:modelValue', value)
+}
+
+// GitHub search qualifiers
+const QUALIFIERS = {
+  'repo:': 'Repository (user/repo)',  // Actualizado para clarificar el formato
+  'user:': 'User',
+  'org:': 'Organization',
+  'in:': 'Search in',
+  'size:': 'Size',
+  'stars:': 'Stars',
+  'language:': 'Language',
+  'created:': 'Created date',
+  'pushed:': 'Push date',
+  'topic:': 'Topic',
+  'is:': 'State',
+  'fork:': 'Fork',
+} as const
+
+// Parse search input into tokens
+const parseSearchTokens = (value: string): SearchToken[] => {
+  const tokens: SearchToken[] = []
+  let i = 0
+
+  while (i < value.length) {
+    let matchedQualifier = false
+    
+    // Buscar cualquier qualifier al inicio de la posición actual
+    for (const qualifier of Object.keys(QUALIFIERS)) {
+      if (value.slice(i).toLowerCase().startsWith(qualifier.toLowerCase())) {
+        let j = i + qualifier.length
+        let qualifierValue = ''
+        
+        // Capturar todo hasta el próximo espacio o el final
+        while (j < value.length && value[j] !== ' ') {
+          qualifierValue += value[j]
+          j++
+        }
+
+        if (qualifierValue) {
+          tokens.push({
+            type: 'qualifier',
+            qualifier: qualifier.slice(0, -1),
+            value: qualifierValue
+          })
+        }
+
+        i = j
+        matchedQualifier = true
+        break
+      }
+    }
+
+    if (!matchedQualifier) {
+      if (value[i] === ' ') {
+        tokens.push({ type: 'space', value: ' ' })
+      } else {
+        let textValue = ''
+        while (i < value.length && !Object.keys(QUALIFIERS).some(q => 
+          value.slice(i).toLowerCase().startsWith(q.toLowerCase())
+        ) && value[i] !== ' ') {
+          textValue += value[i]
+          i++
+        }
+        if (textValue) {
+          tokens.push({ type: 'text', value: textValue })
+        }
+        continue
+      }
+    }
+    i++
+  }
+
+  return tokens
+}
+
+const searchTokens = computed(() => parseSearchTokens(searchInput.value))
+
+// Función para obtener las partes coloreadas del texto
+const getColoredParts = computed(() => {
+  const parts: { text: string; isQualifier: boolean; isValue: boolean }[] = []
+  let text = searchInput.value
+  let position = 0
+
+  while (position < text.length) {
+    let matched = false
+    
+    // Buscar qualifiers
+    for (const qualifier of Object.keys(QUALIFIERS)) {
+      if (text.slice(position).toLowerCase().startsWith(qualifier.toLowerCase())) {
+        // Agregar el qualifier
+        parts.push({
+          text: text.slice(position, position + qualifier.length),
+          isQualifier: true,
+          isValue: false
+        })
+        
+        position += qualifier.length
+        
+        // Buscar el valor hasta el siguiente espacio
+        let valueStart = position
+        while (position < text.length && text[position] !== ' ') {
+          position++
+        }
+        
+        if (position > valueStart) {
+          parts.push({
+            text: text.slice(valueStart, position),
+            isQualifier: false,
+            isValue: true
+          })
+        }
+        
+        matched = true
+        break
+      }
+    }
+    
+    if (!matched) {
+      // Agregar texto normal hasta el siguiente qualifier o espacio
+      let normalText = ''
+      while (position < text.length) {
+        let foundQualifier = false
+        for (const qualifier of Object.keys(QUALIFIERS)) {
+          if (text.slice(position).toLowerCase().startsWith(qualifier.toLowerCase())) {
+            foundQualifier = true
+            break
+          }
+        }
+        if (foundQualifier) break
+        normalText += text[position]
+        position++
+      }
+      if (normalText) {
+        parts.push({
+          text: normalText,
+          isQualifier: false,
+          isValue: false
+        })
+      }
+    }
+  }
+  
+  return parts
+})
+
+// Manejadores de eventos actualizados
+const handleKeyDown = (event: KeyboardEvent) => {
+  if (event.key === 'Enter') {
+    emit('search')
+  }
+}
+
+// Suggestions system
+const suggestions = computed(() => {
+  const pos = cursorPosition.value
+  const textUpToCursor = searchInput.value.slice(0, pos)
+  const lastQualifier = Object.keys(QUALIFIERS).find(q => textUpToCursor.endsWith(q))
+  
+  if (!lastQualifier) {
+    return Object.keys(QUALIFIERS).filter(q => 
+      !searchInput.value.includes(q) && q.startsWith(textUpToCursor.split(' ').pop() || '')
+    )
+  }
+  
+  return []
+})
+
+const updateCursorPosition = () => {
+  if (input.value) {
+    cursorPosition.value = input.value.selectionStart || 0
+  }
+}
+
+// Función para manejar el cierre retardado de sugerencias
+const handleBlur = () => {
+  isInputFocused.value = false
+  setTimeout(() => {
+    showSuggestions.value = false
+  }, 200)
+}
+
+const handleFocus = () => {
+  isInputFocused.value = true
+  showSuggestions.value = true
+}
+
+const handleSuggestionClick = (suggestion: string) => {
+  const currentValue = searchInput.value
+  const needsSpace = currentValue && !currentValue.endsWith(' ')
+  // Remove the extra space at the end
+  searchInput.value = `${currentValue}${needsSpace ? ' ' : ''}${suggestion}`
+  emit('update:modelValue', searchInput.value)
+}
+
+const updateContainerWidth = () => {
+  if (searchContainer.value) {
+    containerWidth.value = searchContainer.value.offsetWidth
+  }
+}
+
+// Actualizar la posición del dropdown cuando se hace scroll
+const updateDropdownPosition = () => {
+  if (searchContainer.value) {
+    containerWidth.value = searchContainer.value.offsetWidth
+  }
+}
+
+onMounted(() => {
+  updateContainerWidth()
+  window.addEventListener('resize', updateContainerWidth)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', updateContainerWidth)
+})
+
+watch(() => props.modelValue, (newValue) => {
+  if (newValue !== searchInput.value) {
+    searchInput.value = newValue
+  }
+})
+</script>
+
+<template>
+  <div 
+    ref="searchContainer"
+    class="relative w-full"
+  >
+    <div 
+      class="relative flex items-center w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background"
+      :class="{ 'ring-2 ring-ring ring-offset-2': showSuggestions }"
+    >
+      <Icon 
+        name="octicon:search-16"
+        class="mr-2 h-4 w-4 shrink-0 opacity-50"
+      />
+      
+      <div class="relative flex-1">
+        <!-- Input con vista previa coloreada y cursor -->
+        <div 
+          aria-hidden="true"
+          class="absolute inset-0 pointer-events-none flex items-center whitespace-pre overflow-hidden"
+        >
+          <template v-for="(part, index) in coloredParts" :key="index">
+            <span v-if="part.type === 'value'" class="search-badge">{{ part.text }}</span>
+            <span
+              v-else
+              :class="{
+                'text-primary font-medium': part.type === 'qualifier',
+              }"
+            >{{ part.text }}</span>
+          </template>
+          <span v-if="isInputFocused" class="typing-cursor"></span>
+        </div>
+
+        <input
+          ref="input"
+          :value="searchInput"
+          type="text"
+          class="w-full bg-transparent outline-none"
+          :class="{ 'text-transparent': searchInput }"
+          placeholder="Search repositories..."
+          @input="handleInput"
+          @keydown="handleKeyDown"
+          @focus="handleFocus"
+          @blur="handleBlur"
+        />
+      </div>
+
+      <kbd 
+        v-if="!showSuggestions"
+        class="pointer-events-none hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex"
+      >
+        <span class="text-xs">⌘</span>K
+      </kbd>
+    </div>
+
+    <!-- Suggestions dropdown with absolute positioning -->
+    <div
+      v-if="showSuggestions && suggestions?.length > 0"
+      class="suggestions-dropdown"
+      :style="{ width: `${containerWidth}px` }"
+    >
+      <div 
+        v-for="suggestion in suggestions"
+        :key="suggestion"
+        class="suggestion-item"
+        @mousedown.prevent="handleSuggestionClick(suggestion)"
+      >
+        <Icon name="octicon:search-16" class="h-4 w-4 opacity-50" />
+        <span>{{ QUALIFIERS[suggestion as keyof typeof QUALIFIERS] }}</span>
+        <span class="text-muted-foreground ml-auto">{{ suggestion }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.suggestions-dropdown {
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  left: 0;
+  right: 0;
+  background-color: hsl(var(--background));
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.375rem;
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  z-index: 50;
+  padding: 0.5rem 0;
+}
+
+.suggestion-item {
+  padding: 0.375rem 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  font-size: 0.875rem;
+}
+
+.suggestion-item:hover {
+  background-color: hsl(var(--muted));
+}
+
+/* ...rest of existing styles... */
+.text-transparent {
+  -webkit-text-fill-color: currentColor;
+}
+
+.typing-cursor {
+  display: inline-block;
+  width: 2px;
+  height: 1.2em;
+  background-color: currentColor;
+  margin-left: 1px;
+  animation: blink 1s step-end infinite;
+}
+
+@keyframes blink {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+}
+
+.search-badge {
+  display: inline-flex;
+  align-items: center;
+  background-color: #ddf4ff;
+  color: #0969da;
+  border-radius: .2rem;
+  padding: 0 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  margin: 0 1px;
+}
+
+:root[class~="dark"] .search-badge {
+  background-color: #1a384d;
+  color: #2f81f7;
+}
+</style>
diff --git a/components/ThemeToggle.vue b/components/ThemeToggle.vue
index c6103a7..8f0e554 100644
--- a/components/ThemeToggle.vue
+++ b/components/ThemeToggle.vue
@@ -3,36 +3,85 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigge
 import { Button } from '#components'
 
 const colorMode = useColorMode()
+
+// Función para cambiar el tema de manera inmediata
+const changeTheme = (theme: 'light' | 'dark' | 'system') => {
+  colorMode.preference = theme
+  // Si es system, usar la preferencia del sistema
+  if (theme === 'system') {
+    colorMode.value = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  } else {
+    colorMode.value = theme
+  }
+  
+  nextTick(() => {
+    document.documentElement.setAttribute('data-theme', colorMode.value)
+  })
+}
 </script>
 
 <template>
   <DropdownMenu>
     <DropdownMenuTrigger asChild>
       <Button variant="ghost" size="icon">
-        <Icon
-          name="ph:sun-bold"
-          class="h-5 w-5 rotate-0 scale-100 transition-transform dark:-rotate-90 dark:scale-0"
-        />
-        <Icon
-          name="ph:moon-bold"
-          class="absolute h-5 w-5 rotate-90 scale-0 transition-transform dark:rotate-0 dark:scale-100"
-        />
+        <transition name="theme-icon" mode="out-in">
+          <Icon
+            v-if="colorMode.value === 'light'"
+            key="light"
+            name="ph:sun-bold"
+            class="h-5 w-5"
+          />
+          <Icon
+            v-else
+            key="dark"
+            name="ph:moon-bold"
+            class="h-5 w-5"
+          />
+        </transition>
         <span class="sr-only">Toggle theme</span>
       </Button>
     </DropdownMenuTrigger>
     <DropdownMenuContent align="end">
-      <DropdownMenuItem @click="colorMode.preference = 'light'">
+      <DropdownMenuItem @click="changeTheme('light')">
         <Icon name="ph:sun-bold" class="mr-2 h-4 w-4" />
-        Light
+        <span>Light</span>
+        <Icon
+          v-if="colorMode.value === 'light'"
+          name="ph:check-bold"
+          class="ml-auto h-4 w-4"
+        />
       </DropdownMenuItem>
-      <DropdownMenuItem @click="colorMode.preference = 'dark'">
+      <DropdownMenuItem @click="changeTheme('dark')">
         <Icon name="ph:moon-bold" class="mr-2 h-4 w-4" />
-        Dark
+        <span>Dark</span>
+        <Icon
+          v-if="colorMode.value === 'dark'"
+          name="ph:check-bold"
+          class="ml-auto h-4 w-4"
+        />
       </DropdownMenuItem>
-      <DropdownMenuItem @click="colorMode.preference = 'system'">
+      <DropdownMenuItem @click="changeTheme('system')">
         <Icon name="ph:desktop-bold" class="mr-2 h-4 w-4" />
-        System
+        <span>System</span>
+        <Icon
+          v-if="colorMode.preference === 'system'"
+          name="ph:check-bold"
+          class="ml-auto h-4 w-4"
+        />
       </DropdownMenuItem>
     </DropdownMenuContent>
   </DropdownMenu>
 </template>
+
+<style scoped>
+.theme-icon-enter-active,
+.theme-icon-leave-active {
+  transition: transform 0.2s ease, opacity 0.2s ease;
+}
+
+.theme-icon-enter-from,
+.theme-icon-leave-to {
+  opacity: 0;
+  transform: scale(0.95);
+}
+</style>
diff --git a/pages/index.vue b/pages/index.vue
index 85d1272..4d1b8d1 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { useGithubStore } from '~/stores/github'
-import { useDebounceFn } from '@vueuse/core'
 import { ref, watch, onMounted, computed } from 'vue'
 import { GitHubService } from '~/services/github'
 import {
@@ -64,19 +63,13 @@ const filters = ref<Filters>({
 const selectedLanguage = ref<string>('all')
 const languages = ref(GitHubService.getLanguages())
 
-const debouncedSearch = useDebounceFn(() => {
-  if (!searchQuery.value && !selectedLanguage.value) return
-  
+const onSearch = () => {
   store.searchRepositories({
     query: searchQuery.value,
-    language: selectedLanguage.value,
-    minStars: 100
+    language: selectedLanguage.value === 'all' ? undefined : selectedLanguage.value,
+    minStars: filters.value.minStars
   })
-}, 500)
-
-watch([searchQuery, selectedLanguage], () => {
-  debouncedSearch()
-})
+}
 
 const onFiltersApply = () => {
   const searchParams = {
@@ -160,8 +153,9 @@ const clearFilter = (key: keyof Filters) => {
 
 <template>
   <div>
-    <section class="text-center py-16 mb-8 border rounded-xl bg-gradient-to-br from-primary/5 to-background relative overflow-hidden">
-      <div class="absolute inset-0 bg-grid-pattern opacity-10" />
+    <section class="text-center py-16 mb-8 border rounded-xl bg-gradient-to-br from-primary/5 to-background relative">
+      <!-- Removido overflow-hidden de la section y movido solo al div del patrón -->
+      <div class="absolute inset-0 bg-grid-pattern opacity-10 overflow-hidden" />
       
       <div class="relative px-4 sm:px-6">
         <h1 class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl mb-4">
@@ -174,15 +168,9 @@ const clearFilter = (key: keyof Filters) => {
         <div class="max-w-4xl mx-auto space-y-4">
           <div class="flex flex-col sm:flex-row gap-4 px-2 sm:px-0">
             <div class="relative flex-1">
-              <Icon 
-                name="octicon:search-16"
-                class="absolute left-4 top-1/2 transform -translate-y-1/2 text-muted-foreground"
-              />
-              <Input
+              <SearchInput
                 v-model="searchQuery"
-                type="search"
-                placeholder="Search repositories..."
-                class="w-full pl-12"
+                @search="onSearch"
               />
             </div>
 
diff --git a/services/github.ts b/services/github.ts
index cee3a2b..1fdbc4d 100644
--- a/services/github.ts
+++ b/services/github.ts
@@ -28,34 +28,47 @@ export class GitHubService {
   }): string {
     const conditions: string[] = []
     
-    if (params.minStars && params.minStars > 0) {
-      conditions.push(`stars:>=${params.minStars}`)
-    } else {
-      conditions.push('stars:>100') // filtro por defecto
+    if (params.query?.trim()) {
+      // Validar y formatear repo: queries
+      const formattedQuery = params.query.trim().split(' ').map(part => {
+        if (part.toLowerCase().startsWith('repo:')) {
+          const repoValue = part.slice(5) // remover 'repo:'
+          // Si solo se proporciona un término, tratarlo como una búsqueda general
+          if (!repoValue.includes('/')) {
+            return repoValue // quitar el qualifier repo: si no tiene el formato correcto
+          }
+        }
+        return part
+      }).join(' ')
+      
+      conditions.push(formattedQuery)
     }
     
-    if (params.query?.trim()) {
-      conditions.push(params.query.trim())
+    // Solo agregar condiciones si no están ya presentes en el query
+    const query = params.query?.toLowerCase() || ''
+    
+    if (params.minStars && params.minStars > 0 && !query.includes('stars:')) {
+      conditions.push(`stars:>=${params.minStars}`)
     }
     
-    if (params.language && params.language !== 'all') {
+    if (params.language && params.language !== 'all' && !query.includes('language:')) {
       conditions.push(`language:${params.language}`)
     }
     
-    if (params.topics && params.topics.length > 0) {
+    if (params.topics?.length && !query.includes('topic:')) {
       params.topics.forEach(topic => {
         conditions.push(`topic:${topic}`)
       })
     }
 
-    if (params.hasTests) {
+    if (params.hasTests && !query.includes('topic:testing')) {
       conditions.push('topic:testing')
     }
-    if (params.isTemplate) {
+
+    if (params.isTemplate && !query.includes('is:template')) {
       conditions.push('is:template')
     }
 
-    console.log('Search conditions:', conditions)
     return conditions.join(' ')
   }
 

From 37b30b536ac53d32e153712c3810dcb308bb6cff Mon Sep 17 00:00:00 2001
From: Sean Luis <seanluis47@gmail.com>
Date: Fri, 21 Feb 2025 20:46:37 -0300
Subject: [PATCH 02/11] feat: implement search functionality with qualifiers,
 suggestions, and dialog components

---
 components/SearchInput.vue                    | 1006 +++++++++++++++--
 components/search/SearchDialog.vue            |  100 ++
 components/search/SearchHighlight.vue         |   51 +
 components/search/SearchInput.vue             |  374 ++++++
 components/search/SearchSuggestions.vue       |  105 ++
 .../search/composables/useSearchInput.ts      |  171 +++
 .../search/composables/useSearchShortcuts.ts  |   28 +
 .../composables/useSearchSuggestions.ts       |   43 +
 components/search/constants.ts                |   14 +
 components/search/types.ts                    |   18 +
 pages/index.vue                               |    2 +
 11 files changed, 1807 insertions(+), 105 deletions(-)
 create mode 100644 components/search/SearchDialog.vue
 create mode 100644 components/search/SearchHighlight.vue
 create mode 100644 components/search/SearchInput.vue
 create mode 100644 components/search/SearchSuggestions.vue
 create mode 100644 components/search/composables/useSearchInput.ts
 create mode 100644 components/search/composables/useSearchShortcuts.ts
 create mode 100644 components/search/composables/useSearchSuggestions.ts
 create mode 100644 components/search/constants.ts
 create mode 100644 components/search/types.ts

diff --git a/components/SearchInput.vue b/components/SearchInput.vue
index 0c7a727..13a48f4 100644
--- a/components/SearchInput.vue
+++ b/components/SearchInput.vue
@@ -11,6 +11,7 @@ interface SearchToken {
 
 const props = defineProps<{
   modelValue: string;
+  mode?: 'inline' | 'modal'; // Nuevo prop para el modo de visualización
 }>()
 
 const emit = defineEmits<{
@@ -26,6 +27,10 @@ const containerWidth = ref(0)
 const searchContainer = ref<HTMLDivElement | null>(null)
 const dropdownPosition = ref({ left: 0, top: 0 })
 const isInputFocused = ref(false)
+const isExpanded = ref(false)
+const originalPosition = ref(0)
+
+const isInlineMode = computed(() => props.mode === 'inline')
 
 // Función simplificada para colorear el texto
 const colorText = (text: string) => {
@@ -97,22 +102,25 @@ const handleInput = (event: Event) => {
   const value = (event.target as HTMLInputElement).value
   searchInput.value = value
   emit('update:modelValue', value)
+  nextTick(() => {
+    updateCursorPosition() // Actualizar la posición del cursor después del render
+  })
 }
 
 // GitHub search qualifiers
 const QUALIFIERS = {
-  'repo:': 'Repository (user/repo)',  // Actualizado para clarificar el formato
-  'user:': 'User',
-  'org:': 'Organization',
-  'in:': 'Search in',
-  'size:': 'Size',
-  'stars:': 'Stars',
-  'language:': 'Language',
-  'created:': 'Created date',
-  'pushed:': 'Push date',
-  'topic:': 'Topic',
-  'is:': 'State',
-  'fork:': 'Fork',
+  'repo:': { label: 'Repository (user/repo)', icon: 'octicon:repo-16' },
+  'user:': { label: 'User', icon: 'octicon:person-16' },
+  'org:': { label: 'Organization', icon: 'octicon:organization-16' },
+  'in:': { label: 'Search in', icon: 'octicon:search-16' },
+  'size:': { label: 'Size', icon: 'octicon:file-16' },
+  'stars:': { label: 'Stars', icon: 'octicon:star-16' },
+  'language:': { label: 'Language', icon: 'octicon:code-16' },
+  'created:': { label: 'Created date', icon: 'octicon:calendar-16' },
+  'pushed:': { label: 'Push date', icon: 'octicon:git-commit-16' },
+  'topic:': { label: 'Topic', icon: 'octicon:hash-16' },
+  'is:': { label: 'State', icon: 'octicon:circle-16' },
+  'fork:': { label: 'Fork', icon: 'octicon:repo-forked-16' },
 } as const
 
 // Parse search input into tokens
@@ -243,54 +251,155 @@ const getColoredParts = computed(() => {
 })
 
 // Manejadores de eventos actualizados
+const lockScroll = () => {
+  originalPosition.value = window.scrollY
+  document.body.style.position = 'fixed'
+  document.body.style.top = `-${originalPosition.value}px`
+  document.body.style.width = '100%'
+}
+
+const unlockScroll = () => {
+  document.body.style.position = ''
+  document.body.style.top = ''
+  document.body.style.width = ''
+  window.scrollTo(0, originalPosition.value)
+}
+
+const handleFocus = () => {
+  isInputFocused.value = true
+  showSuggestions.value = true
+  
+  if (!isInlineMode.value) {
+    isExpanded.value = true
+    lockScroll()
+    nextTick(() => {
+      input.value?.focus()
+    })
+  }
+}
+
+const closeSearch = () => {
+  isInputFocused.value = false
+  showSuggestions.value = false
+  isExpanded.value = false
+  unlockScroll()
+}
+
+// Modificar el handleBlur para que solo se ejecute cuando realmente queremos cerrar
+const handleBlur = (event: FocusEvent) => {
+  // Si el elemento relacionado está dentro del diálogo, no hacer nada
+  const dialogContent = document.querySelector('.search-dialog-content')
+  if (dialogContent?.contains(event.relatedTarget as Node)) {
+    return
+  }
+  
+  // Si no hay elemento relacionado (clic fuera) o está fuera del diálogo, cerrar
+  if (!event.relatedTarget || !dialogContent?.contains(event.relatedTarget as Node)) {
+    closeSearch()
+  }
+}
+
+// Agregar método para cerrar con el botón X
+const handleClose = () => {
+  closeSearch()
+}
+
+// Add escape key handler
 const handleKeyDown = (event: KeyboardEvent) => {
   if (event.key === 'Enter') {
     emit('search')
+    if (!isInlineMode.value) {
+      closeSearch()
+    }
+  } else if (event.key === 'Escape' && isExpanded.value) {
+    closeSearch()
   }
+  // Permitir navegación normal con teclas de flecha
+  updateCursorPosition()
 }
 
 // Suggestions system
 const suggestions = computed(() => {
-  const pos = cursorPosition.value
-  const textUpToCursor = searchInput.value.slice(0, pos)
-  const lastQualifier = Object.keys(QUALIFIERS).find(q => textUpToCursor.endsWith(q))
-  
-  if (!lastQualifier) {
-    return Object.keys(QUALIFIERS).filter(q => 
-      !searchInput.value.includes(q) && q.startsWith(textUpToCursor.split(' ').pop() || '')
-    )
-  }
-  
-  return []
+  // Obtener los qualifiers usados con sus valores
+  const usedQualifiers = searchTokens.value
+    .filter(token => token.type === 'qualifier')
+    .map(token => ({
+      qualifier: token.qualifier + ':',
+      value: token.value
+    }))
+
+  // Devolver todos los qualifiers con su estado de uso
+  return Object.keys(QUALIFIERS).map(qualifier => ({
+    qualifier,
+    isUsed: usedQualifiers.some(used => used.qualifier === qualifier),
+    value: usedQualifiers.find(used => used.qualifier === qualifier)?.value
+  }))
 })
 
-const updateCursorPosition = () => {
-  if (input.value) {
-    cursorPosition.value = input.value.selectionStart || 0
+// Modificar la función removeQualifier para que solo elimine el qualifier específico con su valor exacto
+const removeQualifier = (qualifierToRemove: string, valueToRemove: string) => {
+  const tokens = searchTokens.value
+  let newSearchText = ''
+
+  for (let i = 0; i < tokens.length; i++) {
+    const token = tokens[i]
+    
+    // Solo eliminar si coincide tanto el qualifier como el valor
+    if (token.type === 'qualifier' && 
+        token.qualifier + ':' === qualifierToRemove && 
+        token.value === valueToRemove) {
+      // Saltar este token y el siguiente espacio si existe
+      if (i + 1 < tokens.length && tokens[i + 1].type === 'space') {
+        i++
+      }
+      continue
+    }
+    
+    newSearchText += token.value
   }
-}
 
-// Función para manejar el cierre retardado de sugerencias
-const handleBlur = () => {
-  isInputFocused.value = false
-  setTimeout(() => {
-    showSuggestions.value = false
-  }, 200)
+  searchInput.value = newSearchText.trim()
+  emit('update:modelValue', searchInput.value)
+  nextTick(() => {
+    input.value?.focus()
+    updateCursorPosition()
+  })
 }
 
-const handleFocus = () => {
-  isInputFocused.value = true
-  showSuggestions.value = true
-}
+const updateCursorPosition = () => {
+  if (input.value) {
+    const inputElement = input.value
+    cursorPosition.value = inputElement.selectionStart || 0
+    const container = inputElement.parentElement
 
-const handleSuggestionClick = (suggestion: string) => {
-  const currentValue = searchInput.value
-  const needsSpace = currentValue && !currentValue.endsWith(' ')
-  // Remove the extra space at the end
-  searchInput.value = `${currentValue}${needsSpace ? ' ' : ''}${suggestion}`
-  emit('update:modelValue', searchInput.value)
+    if (container) {
+      const measureElement = document.createElement('span')
+      measureElement.style.font = window.getComputedStyle(inputElement).font
+      measureElement.style.visibility = 'hidden'
+      measureElement.style.position = 'absolute'
+      measureElement.style.whiteSpace = 'pre'
+      measureElement.textContent = inputElement.value.substring(0, inputElement.selectionStart || 0)
+      document.body.appendChild(measureElement)
+      
+      const cursorOffset = measureElement.offsetWidth
+      const containerWidth = container.offsetWidth
+      const scrollLeft = container.scrollLeft
+      
+      document.body.removeChild(measureElement)
+
+      // Si el cursor está cerca del final visible, scroll automático
+      if (cursorOffset > scrollLeft + containerWidth - 80) {
+        container.scrollLeft = cursorOffset - containerWidth + 80
+      }
+      // Si el cursor está cerca del inicio visible
+      else if (cursorOffset < scrollLeft + 80) {
+        container.scrollLeft = Math.max(0, cursorOffset - 80)
+      }
+    }
+  }
 }
 
+// Función para manejar el cierre retardado de sugerencias
 const updateContainerWidth = () => {
   if (searchContainer.value) {
     containerWidth.value = searchContainer.value.offsetWidth
@@ -304,93 +413,305 @@ const updateDropdownPosition = () => {
   }
 }
 
+const handleSuggestionClick = (suggestion: string) => {
+  const currentValue = searchInput.value
+  // Añadir espacio si el valor actual no termina en espacio
+  const space = currentValue && !currentValue.endsWith(' ') ? ' ' : ''
+  searchInput.value = currentValue + space + suggestion
+  emit('update:modelValue', searchInput.value)
+  
+  // Solo actualizar el cursor y mantener el foco
+  nextTick(() => {
+    input.value?.focus()
+    updateCursorPosition()
+    showSuggestions.value = true // Mantener las sugerencias visibles
+  })
+}
+
+// Añadir manejo de scroll sincronizado
+const handleInputScroll = (event: Event) => {
+  const input = event.target as HTMLElement
+  const mirror = input.previousElementSibling as HTMLElement
+  if (mirror) {
+    mirror.scrollLeft = input.scrollLeft
+  }
+}
+
 onMounted(() => {
   updateContainerWidth()
   window.addEventListener('resize', updateContainerWidth)
+
+  // 1. Global slash shortcut
+  window.addEventListener('keydown', handleGlobalShortcut)
 })
 
 onUnmounted(() => {
   window.removeEventListener('resize', updateContainerWidth)
+  window.removeEventListener('keydown', handleGlobalShortcut)
 })
 
+// Simplify global shortcut handler to only use "/"
+const handleGlobalShortcut = (event: KeyboardEvent) => {
+  // Only trigger if it's exactly the "/" key and not inside an input/textarea
+  if (event.key === '/' && !['INPUT', 'TEXTAREA'].includes((event.target as HTMLElement).tagName)) {
+    event.preventDefault()
+    handleFocus()
+    nextTick(() => {
+      // Remove the "/" character that was typed
+      if (input.value) {
+        input.value.value = input.value.value.replace('/', '')
+      }
+    })
+  }
+}
+
 watch(() => props.modelValue, (newValue) => {
   if (newValue !== searchInput.value) {
     searchInput.value = newValue
   }
 })
+
+// Modificar el computed de sugerencias para separar en usados y no usados
+const suggestionGroups = computed(() => {
+  const usedQualifiers = searchTokens.value
+    .filter(token => token.type === 'qualifier')
+    .map(token => ({
+      qualifier: token.qualifier + ':',
+      value: token.value
+    }))
+
+  const allQualifiers = Object.keys(QUALIFIERS).map(qualifier => ({
+    qualifier,
+    isUsed: usedQualifiers.some(used => used.qualifier === qualifier),
+    value: usedQualifiers.find(used => used.qualifier === qualifier)?.value
+  }))
+
+  return {
+    used: allQualifiers.filter(q => q.isUsed),
+    available: allQualifiers.filter(q => !q.isUsed)
+  }
+})
 </script>
 
 <template>
-  <div 
-    ref="searchContainer"
-    class="relative w-full"
-  >
+  <div class="relative w-full">
+    <!-- Normal search input -->
     <div 
-      class="relative flex items-center w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background"
-      :class="{ 'ring-2 ring-ring ring-offset-2': showSuggestions }"
+      ref="searchContainer"
+      class="relative w-full"
+      :class="{ 'search-active': isExpanded }"
     >
-      <Icon 
-        name="octicon:search-16"
-        class="mr-2 h-4 w-4 shrink-0 opacity-50"
-      />
-      
-      <div class="relative flex-1">
-        <!-- Input con vista previa coloreada y cursor -->
-        <div 
-          aria-hidden="true"
-          class="absolute inset-0 pointer-events-none flex items-center whitespace-pre overflow-hidden"
-        >
-          <template v-for="(part, index) in coloredParts" :key="index">
-            <span v-if="part.type === 'value'" class="search-badge">{{ part.text }}</span>
-            <span
-              v-else
-              :class="{
-                'text-primary font-medium': part.type === 'qualifier',
-              }"
-            >{{ part.text }}</span>
-          </template>
-          <span v-if="isInputFocused" class="typing-cursor"></span>
+      <div 
+        class="relative flex items-center w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background transition-all duration-200"
+        :class="{ 
+          'ring-2 ring-ring ring-offset-2': showSuggestions,
+          'search-input-expanded': isExpanded 
+        }"
+      >
+        <Icon 
+          name="octicon:search-16"
+          class="mr-2 h-4 w-4 shrink-0 opacity-50"
+        />
+        
+        <!-- Modificar el contenedor del input -->
+        <div class="relative flex-1 overflow-hidden">
+          <div class="relative w-full overflow-x-auto search-scroll-container">
+            <!-- Capa de resaltado con contenido -->
+            <div 
+              class="search-highlight absolute inset-0 whitespace-pre pointer-events-none flex items-center"
+              :style="{ minWidth: '100%' }"
+            >
+              <template v-for="(part, index) in coloredParts" :key="index">
+                <span 
+                  v-if="part.type === 'value'" 
+                  class="search-badge"
+                >{{ part.text }}</span>
+                <span
+                  v-else
+                  :class="{ 'text-primary font-medium': part.type === 'qualifier' }"
+                >{{ part.text }}</span>
+              </template>
+              <!-- Espacio para el cursor -->
+              <span class="pl-px"></span>
+            </div>
+
+            <!-- Input real -->
+            <input
+              ref="input"
+              :value="searchInput"
+              type="text"
+              class="search-input-field relative w-full"
+              :class="{ 'has-content': searchInput }"
+              placeholder="Search repositories..."
+              @input="handleInput"
+              @keydown="handleKeyDown"
+              @focus="handleFocus"
+              @blur="handleBlur"
+              @scroll="handleInputScroll"
+            />
+          </div>
+          <!-- Cursor que se mueve con el input -->
+          <span 
+            v-if="isInputFocused" 
+            class="typing-cursor absolute"
+            :style="{ 
+              left: `${cursorPosition}px`,
+              top: '50%',
+              transform: 'translateY(-50%)'
+            }"
+          ></span>
         </div>
 
-        <input
-          ref="input"
-          :value="searchInput"
-          type="text"
-          class="w-full bg-transparent outline-none"
-          :class="{ 'text-transparent': searchInput }"
-          placeholder="Search repositories..."
-          @input="handleInput"
-          @keydown="handleKeyDown"
-          @focus="handleFocus"
-          @blur="handleBlur"
-        />
+        <kbd 
+          v-if="!showSuggestions"
+          class="pointer-events-none hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex"
+        >
+          <span class="text-xs">/</span>
+        </kbd>
       </div>
 
-      <kbd 
-        v-if="!showSuggestions"
-        class="pointer-events-none hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex"
+      <!-- Inline suggestions dropdown -->
+      <div
+        v-if="isInlineMode && showSuggestions && suggestions?.length > 0"
+        class="suggestions-dropdown-inline"
       >
-        <span class="text-xs">⌘</span>K
-      </kbd>
+        <div class="px-2 py-1 text-xs text-muted-foreground font-medium">
+          Available filters
+        </div>
+        <div 
+          v-for="suggestion in suggestions"
+          :key="suggestion.qualifier"
+          class="suggestion-item"
+          :class="{ 'is-used': suggestion.isUsed }"
+          @mousedown.prevent="suggestion.isUsed ? 
+            removeQualifier(suggestion.qualifier, suggestion.value!) : 
+            handleSuggestionClick(suggestion.qualifier)"
+        >
+          <Icon 
+            :name="QUALIFIERS[suggestion.qualifier as keyof typeof QUALIFIERS].icon" 
+            class="h-3.5 w-3.5 opacity-50" 
+          />
+          <span class="suggestion-label text-xs">
+            {{ QUALIFIERS[suggestion.qualifier as keyof typeof QUALIFIERS].label }}
+          </span>
+          <div class="ml-auto flex items-center gap-2">
+            <span v-if="suggestion.isUsed" class="text-xs text-muted-foreground">
+              {{ suggestion.value }}
+            </span>
+            <span class="text-xs text-muted-foreground">
+              {{ suggestion.qualifier }}
+            </span>
+            <Icon 
+              v-if="suggestion.isUsed"
+              name="octicon:x-16"
+              class="h-3.5 w-3.5 opacity-50" 
+            />
+          </div>
+        </div>
+      </div>
     </div>
 
-    <!-- Suggestions dropdown with absolute positioning -->
-    <div
-      v-if="showSuggestions && suggestions?.length > 0"
-      class="suggestions-dropdown"
-      :style="{ width: `${containerWidth}px` }"
-    >
+    <!-- Modal overlay (solo se muestra en modo modal) -->
+    <Transition name="search-overlay">
       <div 
-        v-for="suggestion in suggestions"
-        :key="suggestion"
-        class="suggestion-item"
-        @mousedown.prevent="handleSuggestionClick(suggestion)"
+        v-if="!isInlineMode && isExpanded" 
+        class="search-overlay"
+        @click="handleClose"
       >
-        <Icon name="octicon:search-16" class="h-4 w-4 opacity-50" />
-        <span>{{ QUALIFIERS[suggestion as keyof typeof QUALIFIERS] }}</span>
-        <span class="text-muted-foreground ml-auto">{{ suggestion }}</span>
+        <div 
+          class="search-dialog"
+          @click.stop
+        >
+          <div class="search-dialog-content">
+            <div class="flex items-center justify-between mb-4">
+              <h2 class="text-lg font-semibold">Search repositories</h2>
+              <button 
+                class="p-1 rounded-md hover:bg-accent"
+                @click="handleClose"
+              >
+                <Icon name="octicon:x-16" class="h-4 w-4" />
+              </button>
+            </div>
+            
+            <!-- Search input when expanded -->
+            <div class="relative flex items-center w-full rounded-md border border-input bg-background px-3 py-2 text-sm">
+              <Icon 
+                name="octicon:search-16"
+                class="mr-2 h-4 w-4 shrink-0 opacity-50"
+              />
+              
+              <div class="relative flex-1">
+                <!-- Colored preview and cursor -->
+                <div 
+                  aria-hidden="true"
+                  class="search-input-mirror absolute inset-0 pointer-events-none flex items-center whitespace-pre overflow-x-auto"
+                >
+                  <template v-for="(part, index) in coloredParts" :key="index">
+                    <span v-if="part.type === 'value'" class="search-badge whitespace-pre">{{ part.text }}</span>
+                    <span
+                      v-else
+                      :class="{
+                        'text-primary font-medium whitespace-pre': part.type === 'qualifier',
+                      }"
+                    >{{ part.text }}</span>
+                  </template>
+                  <span v-if="isInputFocused" class="typing-cursor"></span>
+                </div>
+
+                <input
+                  ref="input"
+                  :value="searchInput"
+                  type="text"
+                  class="search-input w-full bg-transparent outline-none relative"
+                  :class="{ 'text-transparent': searchInput }"
+                  placeholder="Search repositories..."
+                  @input="handleInput"
+                  @keydown="handleKeyDown"
+                  @scroll="handleInputScroll"
+                />
+              </div>
+            </div>
+
+            <!-- Suggestions in dialog -->
+            <div v-if="suggestions?.length > 0" class="mt-2">
+              <div class="px-2 mb-2 text-xs text-muted-foreground font-medium">
+                Available filters
+              </div>
+              <div 
+                v-for="suggestion in suggestions"
+                :key="suggestion.qualifier"
+                class="suggestion-item"
+                :class="{ 'is-used': suggestion.isUsed }"
+                @mousedown.prevent="suggestion.isUsed ? 
+                  removeQualifier(suggestion.qualifier, suggestion.value!) : 
+                  handleSuggestionClick(suggestion.qualifier)"
+              >
+                <Icon 
+                  :name="QUALIFIERS[suggestion.qualifier as keyof typeof QUALIFIERS].icon" 
+                  class="h-3.5 w-3.5 opacity-50" 
+                />
+                <span class="suggestion-label text-xs">
+                  {{ QUALIFIERS[suggestion.qualifier as keyof typeof QUALIFIERS].label }}
+                </span>
+                <div class="ml-auto flex items-center gap-2">
+                  <span v-if="suggestion.isUsed" class="text-xs text-muted-foreground">
+                    {{ suggestion.value }}
+                  </span>
+                  <span class="text-xs text-muted-foreground">
+                    {{ suggestion.qualifier }}
+                  </span>
+                  <Icon 
+                    v-if="suggestion.isUsed"
+                    name="octicon:x-16"
+                    class="h-3.5 w-3.5 opacity-50" 
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
-    </div>
+    </Transition>
   </div>
 </template>
 
@@ -409,16 +730,33 @@ watch(() => props.modelValue, (newValue) => {
 }
 
 .suggestion-item {
-  padding: 0.375rem 0.5rem;
+  padding: 0.5rem;
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.625rem;
   cursor: pointer;
-  font-size: 0.875rem;
+  border-radius: 0.375rem;
+  transition: background-color 0.2s ease;
+  font-size: 0.75rem;
+  line-height: 1rem;
 }
 
 .suggestion-item:hover {
-  background-color: hsl(var(--muted));
+  background-color: hsl(var(--accent));
+}
+
+.suggestion-item.is-used {
+  background-color: hsl(var(--muted)/0.1);
+}
+
+.suggestion-item.is-used:hover {
+  background-color: hsl(var(--muted)/0.2);
+}
+
+.suggestion-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 /* ...rest of existing styles... */
@@ -461,4 +799,462 @@ watch(() => props.modelValue, (newValue) => {
   background-color: #1a384d;
   color: #2f81f7;
 }
+
+.search-expanded {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3.5rem; /* Match header height */
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  background-color: hsl(var(--background));
+  border-bottom: 1px solid hsl(var(--border));
+  backdrop-filter: blur(8px);
+}
+
+.search-input-expanded {
+  max-width: 60rem;
+  margin: 0 auto;
+  width: 100%;
+  position: relative;
+}
+
+.suggestions-dropdown {
+  position: fixed;
+  top: 3.5rem; /* Position right below the header */
+  left: 50%;
+  transform: translateX(-50%);
+  width: 60rem !important;
+  max-width: calc(100vw - 2rem);
+  margin-top: 0;
+  background-color: hsl(var(--background));
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.375rem;
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+}
+
+/* Ensure proper stacking */
+:root {
+  --search-z-index: 100; /* Increased to appear above header */
+}
+
+.search-expanded {
+  z-index: var(--search-z-index);
+}
+
+.suggestions-dropdown {
+  z-index: calc(var(--search-z-index) + 1);
+}
+
+/* Add backdrop blur for better visibility */
+.search-expanded {
+  background-color: hsl(var(--background)/95%);
+  backdrop-filter: blur(8px);
+}
+
+/* Add smooth transitions */
+.search-expanded,
+.search-input-expanded,
+.suggestions-dropdown {
+  transition: all 0.2s ease-out;
+}
+
+.search-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(4px);
+  z-index: 100;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 4rem;
+}
+
+.search-dialog {
+  width: 100%;
+  max-width: 80rem;
+  margin: 0 1rem;
+}
+
+.search-dialog-content {
+  background-color: hsl(var(--background));
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.75rem;
+  padding: 1.5rem;
+  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+}
+
+/* Transition animations */
+.search-overlay-enter-active,
+.search-overlay-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.search-overlay-enter-from,
+.search-overlay-leave-to {
+  opacity: 0;
+}
+
+.search-overlay-enter-active .search-dialog,
+.search-overlay-leave-active .search-dialog {
+  transition: transform 0.15s ease-out;
+}
+
+.search-overlay-enter-from .search-dialog,
+.search-overlay-leave-to .search-dialog {
+  transform: translateY(-1rem);
+}
+
+/* Asegurar que el diálogo permanezca visible */
+.search-dialog {
+  transform: translateY(0);
+}
+
+.search-active {
+  @apply invisible;
+}
+
+.suggestions-dropdown-inline {
+  position: absolute;
+  top: calc(100% + 0.25rem);
+  left: 0;
+  right: 0;
+  background-color: hsl(var(--background));
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.375rem;
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  z-index: 50;
+  padding: 0.5rem 0;
+  max-height: 16rem;
+  overflow-y: auto;
+}
+
+/* Asegurar que el input mantenga el texto visible */
+.text-transparent {
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+  caret-color: currentColor; /* Mantener el cursor visible */
+}
+
+.search-input-mirror {
+  overflow-x: auto;
+  white-space: pre;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+}
+
+.search-input-mirror::-webkit-scrollbar {
+  display: none; /* Chrome, Safari and Opera */
+}
+
+.search-input {
+  white-space: pre;
+  overflow-x: auto;
+}
+
+/* Ajustar el estilo del texto transparente para mejor visibilidad */
+.text-transparent {
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+}
+
+/* Asegurar que los badges mantengan su espacio */
+.search-badge {
+  flex-shrink: 0;
+  display: inline-flex;
+  white-space: pre;
+}
+
+/* Asegurar que el contenedor mantenga el scroll sincronizado */
+.relative.flex-1 {
+  overflow: hidden;
+}
+
+.search-wrapper {
+  position: relative;
+  overflow-x: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.search-wrapper::-webkit-scrollbar {
+  display: none;
+}
+
+.search-mirror {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: inherit;
+  pointer-events: none;
+  visibility: visible;
+  white-space: pre;
+  display: flex;
+  align-items: center;
+}
+
+.search-input {
+  width: 100%;
+  background: transparent;
+  outline: none;
+  color: transparent;
+  caret-color: currentColor;
+  position: relative;
+  white-space: pre;
+  padding: inherit;
+}
+
+.search-input.has-content {
+  -webkit-text-fill-color: transparent;
+}
+
+.search-input::placeholder {
+  -webkit-text-fill-color: initial;
+  color: initial;
+}
+
+.search-badge {
+  display: inline-flex;
+  align-items: center;
+  background-color: #ddf4ff;
+  color: #0969da;
+  border-radius: .2rem;
+  padding: 0 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  margin: 0 1px;
+  white-space: pre;
+}
+
+:root[class~="dark"] .search-badge {
+  background-color: #1a384d;
+  color: #2f81f7;
+}
+
+.search-container {
+  position: relative;
+  min-width: 0;
+  width: 100%;
+}
+
+.search-content-wrapper {
+  position: relative;
+  width: 100%;
+  overflow-x: auto;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.search-content-wrapper::-webkit-scrollbar {
+  display: none;
+}
+
+.search-mirror {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  pointer-events: none;
+  white-space: pre;
+  padding: 2px 0;
+  min-width: min-content;
+  display: flex;
+  align-items: center;
+}
+
+.search-input {
+  width: 90%;
+  background: transparent;
+  outline: none;
+  position: relative;
+  white-space: pre;
+  padding: 2px 0;
+  min-width: 90%;
+  color: transparent;
+  caret-color: currentColor;
+}
+
+.search-input::placeholder {
+  color: hsl(var(--muted-foreground));
+  -webkit-text-fill-color: initial;
+}
+
+.search-badge {
+  display: inline-flex;
+  align-items: center;
+  background-color: #ddf4ff;
+  color: #0969da;
+  border-radius: .2rem;
+  padding: 0 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+}
+
+.search-input-container {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+
+.search-input-wrapper {
+  position: relative;
+  width: 100%;
+}
+
+.search-highlight-layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  white-space: pre;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem; /* Nuevo: separación consistente entre elementos */
+}
+
+.search-input-field {
+  width: 100%;
+  background: transparent;
+  outline: none;
+  color: transparent;
+  caret-color: currentColor;
+  white-space: pre;
+}
+
+.search-input-field::placeholder {
+  color: hsl(var(--muted-foreground));
+  -webkit-text-fill-color: initial;
+}
+
+.search-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 0.25rem;
+  border-radius: 0.2rem;
+  background: #ddf4ff;
+  color: #0969da;
+  font-size: 0.875rem;
+  font-weight: 500;
+  white-space: pre;
+  /* Se puede eliminar o reducir "margin" ya que el gap se encarga */
+}
+
+:root[class~="dark"] .search-badge {
+  background: #1a384d;
+  color: #2f81f7;
+}
+
+.extra-space {
+  /* Forzar al menos 2 caracteres de espacio extra */
+  min-width: 2ch;
+  flex-shrink: 0;
+}
+
+/* Remove duplicate styles and keep only these essential ones */
+.search-scroll-container {
+  display: flex;
+  align-items: center;
+  overflow-x: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  margin-right: -8px; /* Compensar el padding del contenedor */
+  padding-right: 8px;
+}
+
+.search-scroll-container::-webkit-scrollbar {
+  display: none;
+}
+
+/* Ajustar el input */
+.search-input-field {
+  background: transparent;
+  outline: none;
+  color: transparent;
+  caret-color: currentColor;
+  min-width: 100%;
+  position: relative;
+  white-space: pre;
+  padding: 2px 0;
+}
+
+.search-input-field.has-content {
+  -webkit-text-fill-color: transparent;
+}
+
+.search-input-field::placeholder {
+  -webkit-text-fill-color: initial;
+  color: hsl(var(--muted-foreground));
+}
+
+/* Ajustar la capa de resaltado */
+.search-highlight {
+  display: flex;
+  align-items: center;
+  white-space: pre;
+  padding: 2px 0;
+}
+
+/* Asegurar que los badges mantengan su forma */
+.search-badge {
+  display: inline-flex;
+  align-items: center;
+  white-space: pre;
+  flex-shrink: 0;
+}
+
+/* Ajustar el cursor */
+.typing-cursor {
+  width: 2px;
+  height: 1.2em;
+  background-color: currentColor;
+  pointer-events: none;
+}
+
+.suggestions-group + .suggestions-group {
+  margin-top: 0.5rem;
+}
+
+.search-badge-mini {
+  background-color: hsl(var(--accent));
+  color: hsl(var(--accent-foreground));
+  padding: 0 0.375rem;
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+}
+
+.suggestion-item.is-used {
+  background-color: hsl(var(--muted)/0.1);
+}
+
+.suggestion-item.is-used:hover {
+  background-color: hsl(var(--destructive)/0.1);
+}
+
+.suggestions-container {
+  background-color: hsl(var(--background));
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.375rem;
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  max-height: 24rem;
+  overflow-y: auto;
+}
+
+.suggestion-item.is-used:hover {
+  background-color: hsl(var(--destructive)/0.1);
+  color: hsl(var(--destructive));
+}
+
+.suggestion-item.is-used:hover .search-badge-mini {
+  background-color: hsl(var(--destructive)/0.2);
+  color: hsl(var(--destructive));
+}
 </style>
diff --git a/components/search/SearchDialog.vue b/components/search/SearchDialog.vue
new file mode 100644
index 0000000..45cca6d
--- /dev/null
+++ b/components/search/SearchDialog.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import type { QualifierSuggestion } from './types'
+
+defineProps<{
+  modelValue: string
+  suggestions: QualifierSuggestion[]
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+  (e: 'close'): void
+  (e: 'search'): void
+}>()
+</script>
+
+<template>
+  <div 
+    class="search-overlay"
+    @click="emit('close')"
+  >
+    <div 
+      class="search-dialog"
+      @click.stop
+    >
+      <div class="search-dialog-content">
+        <div class="flex items-center justify-between mb-4">
+          <h2 class="text-lg font-semibold">Search repositories</h2>
+          <button 
+            class="p-1 rounded-md hover:bg-accent"
+            @click="emit('close')"
+          >
+            <Icon name="octicon:x-16" class="h-4 w-4" />
+          </button>
+        </div>
+
+        <!-- Search input -->
+        <div class="relative mb-4">
+          <slot name="search-input"></slot>
+        </div>
+
+        <!-- Suggestions -->
+        <div class="suggestions-container">
+          <SearchSuggestions
+            :suggestions="suggestions"
+            mode="modal"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.search-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  z-index: 100;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 6rem;
+}
+
+.search-dialog {
+  width: 100%;
+  max-width: 640px;
+  margin: 0 1rem;
+  animation: dialog-enter 0.2s ease-out;
+}
+
+.search-dialog-content {
+  background-color: hsl(var(--background));
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.75rem;
+  padding: 1.25rem;
+  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+}
+
+.suggestions-container {
+  max-height: calc(100vh - 20rem);
+  overflow-y: auto;
+  margin: 0 -1.25rem;
+  padding: 0 1.25rem;
+  border-top: 1px solid hsl(var(--border));
+  padding-top: 1rem;
+}
+
+@keyframes dialog-enter {
+  from {
+    opacity: 0;
+    transform: translateY(-1rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</style>
diff --git a/components/search/SearchHighlight.vue b/components/search/SearchHighlight.vue
new file mode 100644
index 0000000..1d206e7
--- /dev/null
+++ b/components/search/SearchHighlight.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { SearchToken } from './types'
+
+defineProps<{
+  tokens: SearchToken[]
+}>()
+</script>
+
+<template>
+  <div class="search-highlight absolute inset-0 whitespace-pre pointer-events-none flex items-center">
+    <template v-for="(token, index) in tokens" :key="index">
+      <template v-if="token.type === 'qualifier'">
+        <span class="text-primary font-medium">{{ token.qualifier }}:</span>
+        <span class="search-badge">{{ token.value }}</span>
+      </template>
+      <template v-else>
+        <span>{{ token.value }}</span>
+      </template>
+    </template>
+    <span class="pl-px"></span>
+  </div>
+</template>
+
+<style scoped>
+.search-highlight {
+  display: flex;
+  align-items: center;
+  white-space: pre;
+  padding: 2px 0;
+}
+
+.search-badge {
+  display: inline-flex;
+  align-items: center;
+  background-color: #ddf4ff;
+  color: #0969da;
+  border-radius: .2rem;
+  padding: 0 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  margin: 0 1px;
+  white-space: pre;
+  flex-shrink: 0;
+}
+
+:root[class~="dark"] .search-badge {
+  background-color: #1a384d;
+  color: #2f81f7;
+}
+</style>
diff --git a/components/search/SearchInput.vue b/components/search/SearchInput.vue
new file mode 100644
index 0000000..c15c8ea
--- /dev/null
+++ b/components/search/SearchInput.vue
@@ -0,0 +1,374 @@
+<script setup lang="ts">
+import { ref, computed, watch, nextTick } from 'vue'
+import { useSearchInput } from './composables/useSearchInput'
+import { useSearchSuggestions } from './composables/useSearchSuggestions'
+import { useSearchShortcuts } from './composables/useSearchShortcuts'
+import SearchDialog from './SearchDialog.vue'
+import SearchHighlight from './SearchHighlight.vue'
+import SearchSuggestions from './SearchSuggestions.vue'
+import type { SearchMode } from './types'
+
+const props = defineProps<{
+  modelValue: string
+  mode?: SearchMode
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+  (e: 'search'): void
+}>()
+
+const {
+  searchInput,
+  input,
+  cursorPosition,
+  isInputFocused,
+  coloredParts,
+  parseSearchTokens,
+  updateCursorPosition
+} = useSearchInput()
+
+const tokens = computed(() => parseSearchTokens(searchInput.value))
+const {
+  showSuggestions,
+  suggestions,
+  handleSuggestionSelect,
+  handleSuggestionRemove
+} = useSearchSuggestions(
+  () => tokens.value,
+  () => searchInput.value
+)
+
+// Estado local
+const isExpanded = ref(false)
+const originalPosition = ref(0)
+const isInlineMode = computed(() => props.mode === 'inline')
+
+// Funciones de manejo de scroll
+const lockScroll = () => {
+  originalPosition.value = window.scrollY
+  document.body.style.position = 'fixed'
+  document.body.style.top = `-${originalPosition.value}px`
+  document.body.style.width = '100%'
+}
+
+const unlockScroll = () => {
+  document.body.style.position = ''
+  document.body.style.top = ''
+  document.body.style.width = ''
+  window.scrollTo(0, originalPosition.value)
+}
+
+// Manejadores de eventos
+const handleFocus = () => {
+  isInputFocused.value = true
+  showSuggestions.value = true
+  
+  if (!isInlineMode.value) {
+    isExpanded.value = true
+    lockScroll()
+    nextTick(() => {
+      input.value?.focus()
+    })
+  }
+}
+
+const closeSearch = () => {
+  isInputFocused.value = false
+  showSuggestions.value = false
+  isExpanded.value = false
+  unlockScroll()
+}
+
+const handleBlur = (event: FocusEvent) => {
+  const dialogContent = document.querySelector('.search-dialog-content')
+  if (dialogContent?.contains(event.relatedTarget as Node)) {
+    return
+  }
+  
+  if (!event.relatedTarget || !dialogContent?.contains(event.relatedTarget as Node)) {
+    closeSearch()
+  }
+}
+
+const handleClose = () => {
+  closeSearch()
+}
+
+const handleKeyDown = (event: KeyboardEvent) => {
+  if (event.key === 'Enter') {
+    emit('search')
+    if (!isInlineMode.value) {
+      closeSearch()
+    }
+  } else if (event.key === 'Escape' && isExpanded.value) {
+    closeSearch()
+  }
+  updateCursorPosition()
+}
+
+const handleInput = (event: Event) => {
+  const value = (event.target as HTMLInputElement).value
+  searchInput.value = value
+  emit('update:modelValue', value)
+  nextTick(() => {
+    updateCursorPosition()
+  })
+}
+
+// Modificar handleSuggestionClick para agregar el qualifier correctamente
+const handleSuggestionClick = (qualifier: string) => {
+  const currentValue = searchInput.value
+  // Añadir espacio si el valor actual no termina en espacio
+  const space = currentValue && !currentValue.endsWith(' ') ? ' ' : ''
+  searchInput.value = currentValue + space + qualifier
+  emit('update:modelValue', searchInput.value)
+  
+  nextTick(() => {
+    input.value?.focus()
+    updateCursorPosition()
+    showSuggestions.value = true // Mantener las sugerencias visibles
+  })
+}
+
+// Modificar la función handleSuggestionRemoveClick para coincidir con la firma esperada
+const handleSuggestionRemoveClick = (qualifier: string, value: string) => {
+  const fullQualifier = qualifier.endsWith(':') ? qualifier : `${qualifier}:`
+  const pattern = new RegExp(`${fullQualifier}\\s*${value}\\s*`, 'i')
+  searchInput.value = searchInput.value.replace(pattern, '').trim()
+  emit('update:modelValue', searchInput.value)
+  nextTick(() => {
+    input.value?.focus()
+    updateCursorPosition()
+  })
+}
+
+// Agregar el método handleSearch faltante
+const handleSearch = () => {
+  emit('search')
+  if (!isInlineMode.value) {
+    closeSearch()
+  }
+}
+
+// Keyboard shortcuts
+useSearchShortcuts(handleFocus, () => input.value)
+
+// Sincronización con v-model
+watch(() => props.modelValue, (newValue) => {
+  if (newValue !== searchInput.value) {
+    searchInput.value = newValue
+  }
+})
+
+watch(searchInput, (newValue) => {
+  emit('update:modelValue', newValue)
+})
+</script>
+
+<template>
+  <div class="relative w-full">
+    <div 
+      class="relative flex items-center w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background transition-all duration-200"
+      :class="{ 
+        'ring-2 ring-ring ring-offset-2': showSuggestions,
+        'search-input-expanded': isExpanded 
+      }"
+    >
+      <Icon 
+        name="octicon:search-16"
+        class="mr-2 h-4 w-4 shrink-0 opacity-50"
+      />
+
+      <!-- Input container -->
+      <div class="relative flex-1 overflow-hidden">
+        <div class="relative w-full overflow-x-auto search-scroll-container">
+          <!-- Capa de resaltado con contenido -->
+          <div class="search-highlight absolute inset-0 whitespace-pre pointer-events-none flex items-center">
+            <template v-for="(part, index) in coloredParts" :key="index">
+              <template v-if="part.type === 'qualifier'">
+                <span class="text-primary font-medium">{{ part.text }}</span>
+              </template>
+              <template v-else-if="part.type === 'value'">
+                <span class="search-badge">{{ part.text }}</span>
+              </template>
+              <template v-else>
+                <span>{{ part.text }}</span>
+              </template>
+            </template>
+            <!-- Espacio para el cursor -->
+            <span class="pl-px"></span>
+          </div>
+
+          <!-- Input real -->
+          <input
+            ref="input"
+            v-model="searchInput"
+            type="text"
+            class="search-input-field relative w-full"
+            :class="{ 'has-content': searchInput }"
+            placeholder="Search repositories..."
+            @input="handleInput"
+            @keydown="updateCursorPosition"
+            @keyup="updateCursorPosition"
+            @click="updateCursorPosition"
+            @focus="handleFocus"
+            @blur="handleBlur"
+          />
+
+          <!-- Cursor animado -->
+          <span 
+            v-if="isInputFocused" 
+            class="typing-cursor absolute"
+            :style="{ 
+              left: `${cursorPosition}px`,
+              top: '50%',
+              transform: 'translateY(-50%)'
+            }"
+          ></span>
+        </div>
+      </div>
+
+      <kbd 
+        v-if="!showSuggestions"
+        class="pointer-events-none hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex"
+      >
+        <span class="text-xs">/</span>
+      </kbd>
+    </div>
+
+    <!-- Suggestions (inline mode) -->
+    <SearchSuggestions
+      v-if="isInlineMode && showSuggestions"
+      :suggestions="suggestions"
+      mode="inline"
+      @select="handleSuggestionClick"
+      @remove="handleSuggestionRemoveClick"
+    />
+
+    <!-- Search Dialog (modal mode) -->
+    <SearchDialog
+      v-if="!isInlineMode && isExpanded"
+      v-model="searchInput"
+      :suggestions="suggestions"
+      @close="handleClose"
+      @search="handleSearch"
+    >
+      <template #search-input>
+        <div class="relative flex-1 overflow-hidden">
+          <div class="relative w-full overflow-x-auto search-scroll-container">
+            <SearchHighlight :tokens="tokens" />
+            <input
+              ref="input"
+              v-model="searchInput"
+              type="text"
+              class="search-input-field relative w-full"
+              :class="{ 'has-content': searchInput }"
+              placeholder="Search repositories..."
+              @input="updateCursorPosition"
+              @keydown="handleKeyDown"
+            />
+          </div>
+        </div>
+      </template>
+    </SearchDialog>
+  </div>
+</template>
+
+<style scoped>
+.search-scroll-container {
+  position: relative; /* Asegura que el contenedor sea relativo */
+  display: flex;
+  align-items: center;
+  overflow-x: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  margin-right: -8px;
+  padding-right: 8px;
+}
+
+.search-scroll-container::-webkit-scrollbar {
+  display: none;
+}
+
+.search-input-field {
+  position: relative;
+  background: transparent;
+  outline: none;
+  color: transparent;
+  caret-color: transparent; /* Ocultar el cursor nativo */
+  min-width: 100%;
+  white-space: pre;
+  padding: 2px 0;
+}
+
+.search-input-field.has-content {
+  -webkit-text-fill-color: transparent;
+}
+
+.search-input-field::placeholder {
+  -webkit-text-fill-color: initial;
+  color: hsl(var(--muted-foreground));
+}
+
+.typing-cursor {
+  position: absolute;
+  width: 2px;
+  height: 1.2em;
+  background-color: currentColor;
+  pointer-events: none;
+  animation: blink 1s step-end infinite;
+  z-index: 10; /* Asegura que el cursor esté siempre visible */
+  margin-left: -1px; /* Ajuste fino de la posición */
+}
+
+@keyframes blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
+
+.search-badge {
+  display: inline-flex;
+  align-items: center;
+  background-color: #ddf4ff;
+  color: #0969da;
+  border-radius: .2rem;
+  padding: 0 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  margin: 0 1px;
+  white-space: pre;
+}
+
+:root[class~="dark"] .search-badge {
+  background-color: #1a384d;
+  color: #2f81f7;
+}
+
+.search-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(4px);
+  z-index: 100;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 4rem;
+}
+
+.search-dialog {
+  width: 100%;
+  max-width: 80rem;
+  margin: 0 1rem;
+}
+
+.search-dialog-content {
+  background-color: hsl(var(--background));
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.75rem;
+  padding: 1.5rem;
+  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+}
+</style>
diff --git a/components/search/SearchSuggestions.vue b/components/search/SearchSuggestions.vue
new file mode 100644
index 0000000..52f4e09
--- /dev/null
+++ b/components/search/SearchSuggestions.vue
@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import type { QualifierSuggestion } from './types'
+import { QUALIFIERS } from './constants'
+
+defineProps<{
+  suggestions: QualifierSuggestion[]
+  mode?: 'inline' | 'modal'
+}>()
+
+const emit = defineEmits<{
+  (e: 'select', qualifier: string): void
+  (e: 'remove', qualifier: string, value: string): void
+}>()
+</script>
+
+<template>
+  <div 
+    :class="[
+      mode === 'inline' ? 'suggestions-dropdown-inline' : 'suggestions-dropdown'
+    ]"
+  >
+    <div class="px-2 py-1 text-xs text-muted-foreground font-medium">
+      Available filters
+    </div>
+    <div 
+      v-for="suggestion in suggestions"
+      :key="suggestion.qualifier"
+      class="suggestion-item"
+      :class="{ 'is-used': suggestion.isUsed }"
+      @mousedown.prevent="suggestion.isUsed ? 
+        emit('remove', suggestion.qualifier, suggestion.value!) : 
+        emit('select', suggestion.qualifier)"
+    >
+      <Icon 
+        :name="QUALIFIERS[suggestion.qualifier as keyof typeof QUALIFIERS].icon" 
+        class="h-3.5 w-3.5 opacity-50" 
+      />
+      <span class="suggestion-label text-xs">
+        {{ QUALIFIERS[suggestion.qualifier as keyof typeof QUALIFIERS].label }}
+      </span>
+      <div class="ml-auto flex items-center gap-2">
+        <span v-if="suggestion.isUsed" class="text-xs text-muted-foreground">
+          {{ suggestion.value }}
+        </span>
+        <span class="text-xs text-muted-foreground">
+          {{ suggestion.qualifier }}
+        </span>
+        <Icon 
+          v-if="suggestion.isUsed"
+          name="octicon:x-16"
+          class="h-3.5 w-3.5 opacity-50" 
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.suggestions-dropdown,
+.suggestions-dropdown-inline {
+  position: absolute;
+  background-color: hsl(var(--background));
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.375rem;
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  z-index: 50;
+  padding: 0.5rem 0;
+}
+
+.suggestions-dropdown-inline {
+  top: calc(100% + 0.25rem);
+  left: 0;
+  right: 0;
+  max-height: 16rem;
+  overflow-y: auto;
+}
+
+.suggestion-item {
+  padding: 0.75rem 1.25rem;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.suggestion-item:hover {
+  background-color: hsl(var(--accent));
+}
+
+.suggestion-item.is-used {
+  background-color: hsl(var(--muted)/0.1);
+}
+
+.suggestion-item.is-used:hover {
+  background-color: hsl(var(--destructive)/0.1);
+  color: hsl(var(--destructive));
+}
+
+.suggestion-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>
diff --git a/components/search/composables/useSearchInput.ts b/components/search/composables/useSearchInput.ts
new file mode 100644
index 0000000..1882a4a
--- /dev/null
+++ b/components/search/composables/useSearchInput.ts
@@ -0,0 +1,171 @@
+import { ref, computed } from 'vue'
+import type { SearchToken } from '../types'
+import { QUALIFIERS } from '../constants'
+
+export function useSearchInput() {
+  const searchInput = ref('')
+  const input = ref<HTMLInputElement | null>(null)
+  const cursorPosition = ref(0)
+  const isInputFocused = ref(false)
+  const containerWidth = ref(0)
+  const searchContainer = ref<HTMLDivElement | null>(null)
+
+  const colorText = (text: string) => {
+    const parts: { text: string; type: 'qualifier' | 'value' | 'normal' }[] = []
+    let currentPosition = 0
+
+    while (currentPosition < text.length) {
+      let matched = false
+
+      // Buscar qualifiers
+      for (const qualifier of Object.keys(QUALIFIERS)) {
+        if (text.slice(currentPosition).toLowerCase().startsWith(qualifier.toLowerCase())) {
+          parts.push({
+            text: qualifier,
+            type: 'qualifier'
+          })
+          
+          currentPosition += qualifier.length
+          
+          let valueStart = currentPosition
+          while (currentPosition < text.length && text[currentPosition] !== ' ') {
+            currentPosition++
+          }
+          
+          if (currentPosition > valueStart) {
+            parts.push({
+              text: text.slice(valueStart, currentPosition),
+              type: 'value'
+            })
+          }
+          
+          matched = true
+          break
+        }
+      }
+
+      if (!matched) {
+        let normalText = ''
+        while (currentPosition < text.length) {
+          let isQualifier = false
+          for (const qualifier of Object.keys(QUALIFIERS)) {
+            if (text.slice(currentPosition).toLowerCase().startsWith(qualifier.toLowerCase())) {
+              isQualifier = true
+              break
+            }
+          }
+          if (isQualifier) break
+          normalText += text[currentPosition]
+          currentPosition++
+        }
+        if (normalText) {
+          parts.push({
+            text: normalText,
+            type: 'normal'
+          })
+        }
+      }
+    }
+
+    return parts
+  }
+
+  const coloredParts = computed(() => colorText(searchInput.value))
+
+  const parseSearchTokens = (value: string): SearchToken[] => {
+    const tokens: SearchToken[] = []
+    let i = 0
+
+    while (i < value.length) {
+      let matchedQualifier = false
+      
+      for (const qualifier of Object.keys(QUALIFIERS)) {
+        if (value.slice(i).toLowerCase().startsWith(qualifier.toLowerCase())) {
+          let j = i + qualifier.length
+          let qualifierValue = ''
+          
+          while (j < value.length && value[j] !== ' ') {
+            qualifierValue += value[j]
+            j++
+          }
+
+          if (qualifierValue) {
+            tokens.push({
+              type: 'qualifier',
+              qualifier: qualifier.slice(0, -1),
+              value: qualifierValue
+            })
+          }
+
+          i = j
+          matchedQualifier = true
+          break
+        }
+      }
+
+      if (!matchedQualifier) {
+        if (value[i] === ' ') {
+          tokens.push({ type: 'space', value: ' ' })
+          i++
+        } else {
+          let textValue = ''
+          let start = i
+          
+          while (i < value.length) {
+            let isQualifier = false
+            for (const qualifier of Object.keys(QUALIFIERS)) {
+              if (value.slice(i).toLowerCase().startsWith(qualifier.toLowerCase())) {
+                isQualifier = true
+                break
+              }
+            }
+            if (isQualifier || value[i] === ' ') break
+            textValue += value[i]
+            i++
+          }
+          
+          if (textValue) {
+            tokens.push({ type: 'text', value: textValue })
+          }
+        }
+      }
+    }
+
+    return tokens
+  }
+
+  const updateCursorPosition = () => {
+    if (input.value) {
+      const inputElement = input.value
+      cursorPosition.value = inputElement.selectionStart || 0
+      
+      // Usar el mismo contenedor que el input para medir
+      const container = document.createElement('div')
+      container.style.position = 'absolute'
+      container.style.top = '0'
+      container.style.left = '0'
+      container.style.visibility = 'hidden'
+      container.style.whiteSpace = 'pre'
+      container.style.font = window.getComputedStyle(inputElement).font
+      
+      // Medir solo hasta la posición del cursor
+      container.textContent = inputElement.value.substring(0, inputElement.selectionStart || 0)
+      
+      document.body.appendChild(container)
+      cursorPosition.value = container.offsetWidth
+      document.body.removeChild(container)
+    }
+  }
+
+  return {
+    searchInput,
+    input,
+    cursorPosition,
+    isInputFocused,
+    searchContainer,
+    containerWidth,
+    coloredParts,
+    parseSearchTokens,
+    updateCursorPosition
+  }
+}
diff --git a/components/search/composables/useSearchShortcuts.ts b/components/search/composables/useSearchShortcuts.ts
new file mode 100644
index 0000000..43d3f0a
--- /dev/null
+++ b/components/search/composables/useSearchShortcuts.ts
@@ -0,0 +1,28 @@
+import { onMounted, onUnmounted } from 'vue'
+
+export function useSearchShortcuts(
+  handleFocus: () => void,
+  input: () => HTMLInputElement | null
+) {
+  const handleGlobalShortcut = (event: KeyboardEvent) => {
+    if (
+      event.key === '/' && 
+      !['INPUT', 'TEXTAREA'].includes((event.target as HTMLElement).tagName)
+    ) {
+      event.preventDefault()
+      handleFocus()
+    }
+  }
+
+  onMounted(() => {
+    window.addEventListener('keydown', handleGlobalShortcut)
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('keydown', handleGlobalShortcut)
+  })
+
+  return {
+    handleGlobalShortcut
+  }
+}
diff --git a/components/search/composables/useSearchSuggestions.ts b/components/search/composables/useSearchSuggestions.ts
new file mode 100644
index 0000000..9eb71c9
--- /dev/null
+++ b/components/search/composables/useSearchSuggestions.ts
@@ -0,0 +1,43 @@
+import { ref, computed } from 'vue'
+import type { SearchToken, QualifierSuggestion } from '../types'
+import { QUALIFIERS } from '../constants'
+
+export function useSearchSuggestions(
+  searchTokens: () => SearchToken[],
+  getCurrentInput: () => string
+) {
+  const showSuggestions = ref(false)
+
+  const suggestions = computed<QualifierSuggestion[]>(() => {
+    const usedQualifiers = searchTokens()
+      .filter(token => token.type === 'qualifier')
+      .map(token => ({
+        qualifier: token.qualifier + ':',
+        value: token.value
+      }))
+
+    return Object.keys(QUALIFIERS).map(qualifier => ({
+      qualifier,
+      isUsed: usedQualifiers.some(used => used.qualifier === qualifier),
+      value: usedQualifiers.find(used => used.qualifier === qualifier)?.value
+    }))
+  })
+
+  const handleSuggestionSelect = (qualifier: string) => {
+    return qualifier.endsWith(':') ? qualifier : `${qualifier}:`
+  }
+
+  const handleSuggestionRemove = (qualifier: string, value: string) => {
+    const currentInput = getCurrentInput()
+    const fullQualifier = qualifier.endsWith(':') ? qualifier : `${qualifier}:`
+    const pattern = new RegExp(`${fullQualifier}\\s*${value}\\s*`, 'i')
+    return currentInput.replace(pattern, '').trim()
+  }
+
+  return {
+    showSuggestions,
+    suggestions,
+    handleSuggestionSelect,
+    handleSuggestionRemove
+  }
+}
diff --git a/components/search/constants.ts b/components/search/constants.ts
new file mode 100644
index 0000000..5ce7de2
--- /dev/null
+++ b/components/search/constants.ts
@@ -0,0 +1,14 @@
+export const QUALIFIERS = {
+  'repo:': { label: 'Repository (user/repo)', icon: 'octicon:repo-16' },
+  'user:': { label: 'User', icon: 'octicon:person-16' },
+  'org:': { label: 'Organization', icon: 'octicon:organization-16' },
+  'in:': { label: 'Search in', icon: 'octicon:search-16' },
+  'size:': { label: 'Size', icon: 'octicon:file-16' },
+  'stars:': { label: 'Stars', icon: 'octicon:star-16' },
+  'language:': { label: 'Language', icon: 'octicon:code-16' },
+  'created:': { label: 'Created date', icon: 'octicon:calendar-16' },
+  'pushed:': { label: 'Push date', icon: 'octicon:git-commit-16' },
+  'topic:': { label: 'Topic', icon: 'octicon:hash-16' },
+  'is:': { label: 'State', icon: 'octicon:circle-16' },
+  'fork:': { label: 'Fork', icon: 'octicon:repo-forked-16' },
+} as const
diff --git a/components/search/types.ts b/components/search/types.ts
new file mode 100644
index 0000000..48c5150
--- /dev/null
+++ b/components/search/types.ts
@@ -0,0 +1,18 @@
+export interface SearchToken {
+  type: 'qualifier' | 'text' | 'space'
+  value: string
+  qualifier?: string
+}
+
+export interface Qualifier {
+  label: string
+  icon: string
+}
+
+export interface QualifierSuggestion {
+  qualifier: string
+  isUsed: boolean
+  value?: string
+}
+
+export type SearchMode = 'inline' | 'modal'
diff --git a/pages/index.vue b/pages/index.vue
index 4d1b8d1..3cda3e0 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -10,6 +10,7 @@ import {
   SelectValue,
 } from '#components'
 import { OrderOptions, SortOptions } from '~/types'
+import SearchInput from '~/components/SearchInput.vue'
 
 // Agregar meta tags dinámicos
 useSeoMeta({
@@ -170,6 +171,7 @@ const clearFilter = (key: keyof Filters) => {
             <div class="relative flex-1">
               <SearchInput
                 v-model="searchQuery"
+                mode="modal"
                 @search="onSearch"
               />
             </div>

From b9c0e4f56a1da84d1b7a0f98fe9f660460c45c97 Mon Sep 17 00:00:00 2001
From: Sean Luis <seanluis47@gmail.com>
Date: Sat, 22 Feb 2025 01:10:35 -0300
Subject: [PATCH 03/11] feat: add search input handling, qualifiers, and scroll
 lock functionality

---
 components/SearchInput.vue           | 547 ++++-----------------------
 composables/useQualifiers.ts         |  22 ++
 composables/useScrollLock.ts         |  24 ++
 composables/useSearchInput.ts        |  99 +++++
 composables/useSearchInteractions.ts | 163 ++++++++
 composables/useSearchParser.ts       | 122 ++++++
 pages/index.vue                      |   2 +-
 types/search.ts                      |  25 ++
 8 files changed, 528 insertions(+), 476 deletions(-)
 create mode 100644 composables/useQualifiers.ts
 create mode 100644 composables/useScrollLock.ts
 create mode 100644 composables/useSearchInput.ts
 create mode 100644 composables/useSearchInteractions.ts
 create mode 100644 composables/useSearchParser.ts
 create mode 100644 types/search.ts

diff --git a/components/SearchInput.vue b/components/SearchInput.vue
index 13a48f4..cb4af0c 100644
--- a/components/SearchInput.vue
+++ b/components/SearchInput.vue
@@ -1,326 +1,71 @@
 <script setup lang="ts">
-import { ref, watch, computed, nextTick, onMounted, onUnmounted } from 'vue'
-// Si quieres usar useTimeout de VueUse, necesitas importarlo:
-// import { useTimeout } from '@vueuse/core'
-
-interface SearchToken {
-  type: 'qualifier' | 'text' | 'space';
-  value: string;
-  qualifier?: string;
-}
+import { watch, computed } from 'vue'
+import { useQualifiers } from '../composables/useQualifiers'
+import { useSearchParser } from '../composables/useSearchParser'
+import { useScrollLock } from '../composables/useScrollLock'
+import { useSearchInput } from '../composables/useSearchInput'
+import { useSearchInteractions } from '../composables/useSearchInteractions'
 
 const props = defineProps<{
-  modelValue: string;
-  mode?: 'inline' | 'modal'; // Nuevo prop para el modo de visualización
+  modelValue: string
+  mode?: 'inline' | 'modal'
 }>()
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: string): void;
-  (e: 'search'): void;
+  (e: 'update:modelValue', value: string): void
+  (e: 'search'): void
 }>()
 
-const input = ref<HTMLInputElement | null>(null)
-const searchInput = ref(props.modelValue)
-const showSuggestions = ref(false)
-const cursorPosition = ref(0)
-const containerWidth = ref(0)
-const searchContainer = ref<HTMLDivElement | null>(null)
-const dropdownPosition = ref({ left: 0, top: 0 })
-const isInputFocused = ref(false)
-const isExpanded = ref(false)
-const originalPosition = ref(0)
-
-const isInlineMode = computed(() => props.mode === 'inline')
-
-// Función simplificada para colorear el texto
-const colorText = (text: string) => {
-  const parts: { text: string; type: 'qualifier' | 'value' | 'normal' }[] = []
-  let currentPosition = 0
-
-  while (currentPosition < text.length) {
-    let matched = false
-
-    // Buscar qualifiers
-    for (const qualifier of Object.keys(QUALIFIERS)) {
-      if (text.slice(currentPosition).toLowerCase().startsWith(qualifier.toLowerCase())) {
-        // Agregar qualifier
-        parts.push({
-          text: qualifier,
-          type: 'qualifier'
-        })
-        
-        currentPosition += qualifier.length
-        
-        // Buscar valor hasta el espacio
-        let valueStart = currentPosition
-        while (currentPosition < text.length && text[currentPosition] !== ' ') {
-          currentPosition++
-        }
-        
-        if (currentPosition > valueStart) {
-          parts.push({
-            text: text.slice(valueStart, currentPosition),
-            type: 'value'
-          })
-        }
-        
-        matched = true
-        break
-      }
-    }
-
-    if (!matched) {
-      // Agregar texto normal hasta el siguiente qualifier o final
-      let normalText = ''
-      while (currentPosition < text.length) {
-        let isQualifier = false
-        for (const qualifier of Object.keys(QUALIFIERS)) {
-          if (text.slice(currentPosition).toLowerCase().startsWith(qualifier.toLowerCase())) {
-            isQualifier = true
-            break
-          }
-        }
-        if (isQualifier) break
-        normalText += text[currentPosition]
-        currentPosition++
-      }
-      if (normalText) {
-        parts.push({
-          text: normalText,
-          type: 'normal'
-        })
-      }
-    }
-  }
-
-  return parts
-}
-
-const coloredParts = computed(() => colorText(searchInput.value))
-
-const handleInput = (event: Event) => {
-  const value = (event.target as HTMLInputElement).value
-  searchInput.value = value
-  emit('update:modelValue', value)
-  nextTick(() => {
-    updateCursorPosition() // Actualizar la posición del cursor después del render
-  })
-}
-
-// GitHub search qualifiers
-const QUALIFIERS = {
-  'repo:': { label: 'Repository (user/repo)', icon: 'octicon:repo-16' },
-  'user:': { label: 'User', icon: 'octicon:person-16' },
-  'org:': { label: 'Organization', icon: 'octicon:organization-16' },
-  'in:': { label: 'Search in', icon: 'octicon:search-16' },
-  'size:': { label: 'Size', icon: 'octicon:file-16' },
-  'stars:': { label: 'Stars', icon: 'octicon:star-16' },
-  'language:': { label: 'Language', icon: 'octicon:code-16' },
-  'created:': { label: 'Created date', icon: 'octicon:calendar-16' },
-  'pushed:': { label: 'Push date', icon: 'octicon:git-commit-16' },
-  'topic:': { label: 'Topic', icon: 'octicon:hash-16' },
-  'is:': { label: 'State', icon: 'octicon:circle-16' },
-  'fork:': { label: 'Fork', icon: 'octicon:repo-forked-16' },
-} as const
-
-// Parse search input into tokens
-const parseSearchTokens = (value: string): SearchToken[] => {
-  const tokens: SearchToken[] = []
-  let i = 0
-
-  while (i < value.length) {
-    let matchedQualifier = false
-    
-    // Buscar cualquier qualifier al inicio de la posición actual
-    for (const qualifier of Object.keys(QUALIFIERS)) {
-      if (value.slice(i).toLowerCase().startsWith(qualifier.toLowerCase())) {
-        let j = i + qualifier.length
-        let qualifierValue = ''
-        
-        // Capturar todo hasta el próximo espacio o el final
-        while (j < value.length && value[j] !== ' ') {
-          qualifierValue += value[j]
-          j++
-        }
-
-        if (qualifierValue) {
-          tokens.push({
-            type: 'qualifier',
-            qualifier: qualifier.slice(0, -1),
-            value: qualifierValue
-          })
-        }
-
-        i = j
-        matchedQualifier = true
-        break
-      }
-    }
-
-    if (!matchedQualifier) {
-      if (value[i] === ' ') {
-        tokens.push({ type: 'space', value: ' ' })
-      } else {
-        let textValue = ''
-        while (i < value.length && !Object.keys(QUALIFIERS).some(q => 
-          value.slice(i).toLowerCase().startsWith(q.toLowerCase())
-        ) && value[i] !== ' ') {
-          textValue += value[i]
-          i++
-        }
-        if (textValue) {
-          tokens.push({ type: 'text', value: textValue })
-        }
-        continue
-      }
-    }
-    i++
-  }
-
-  return tokens
-}
-
-const searchTokens = computed(() => parseSearchTokens(searchInput.value))
-
-// Función para obtener las partes coloreadas del texto
-const getColoredParts = computed(() => {
-  const parts: { text: string; isQualifier: boolean; isValue: boolean }[] = []
-  let text = searchInput.value
-  let position = 0
-
-  while (position < text.length) {
-    let matched = false
-    
-    // Buscar qualifiers
-    for (const qualifier of Object.keys(QUALIFIERS)) {
-      if (text.slice(position).toLowerCase().startsWith(qualifier.toLowerCase())) {
-        // Agregar el qualifier
-        parts.push({
-          text: text.slice(position, position + qualifier.length),
-          isQualifier: true,
-          isValue: false
-        })
-        
-        position += qualifier.length
-        
-        // Buscar el valor hasta el siguiente espacio
-        let valueStart = position
-        while (position < text.length && text[position] !== ' ') {
-          position++
-        }
-        
-        if (position > valueStart) {
-          parts.push({
-            text: text.slice(valueStart, position),
-            isQualifier: false,
-            isValue: true
-          })
-        }
-        
-        matched = true
-        break
-      }
-    }
-    
-    if (!matched) {
-      // Agregar texto normal hasta el siguiente qualifier o espacio
-      let normalText = ''
-      while (position < text.length) {
-        let foundQualifier = false
-        for (const qualifier of Object.keys(QUALIFIERS)) {
-          if (text.slice(position).toLowerCase().startsWith(qualifier.toLowerCase())) {
-            foundQualifier = true
-            break
-          }
-        }
-        if (foundQualifier) break
-        normalText += text[position]
-        position++
-      }
-      if (normalText) {
-        parts.push({
-          text: normalText,
-          isQualifier: false,
-          isValue: false
-        })
-      }
-    }
-  }
-  
-  return parts
-})
-
-// Manejadores de eventos actualizados
-const lockScroll = () => {
-  originalPosition.value = window.scrollY
-  document.body.style.position = 'fixed'
-  document.body.style.top = `-${originalPosition.value}px`
-  document.body.style.width = '100%'
-}
-
-const unlockScroll = () => {
-  document.body.style.position = ''
-  document.body.style.top = ''
-  document.body.style.width = ''
-  window.scrollTo(0, originalPosition.value)
-}
-
-const handleFocus = () => {
-  isInputFocused.value = true
-  showSuggestions.value = true
-  
-  if (!isInlineMode.value) {
-    isExpanded.value = true
-    lockScroll()
-    nextTick(() => {
-      input.value?.focus()
-    })
-  }
-}
-
-const closeSearch = () => {
-  isInputFocused.value = false
-  showSuggestions.value = false
-  isExpanded.value = false
-  unlockScroll()
-}
-
-// Modificar el handleBlur para que solo se ejecute cuando realmente queremos cerrar
-const handleBlur = (event: FocusEvent) => {
-  // Si el elemento relacionado está dentro del diálogo, no hacer nada
-  const dialogContent = document.querySelector('.search-dialog-content')
-  if (dialogContent?.contains(event.relatedTarget as Node)) {
-    return
-  }
-  
-  // Si no hay elemento relacionado (clic fuera) o está fuera del diálogo, cerrar
-  if (!event.relatedTarget || !dialogContent?.contains(event.relatedTarget as Node)) {
-    closeSearch()
-  }
-}
-
-// Agregar método para cerrar con el botón X
-const handleClose = () => {
-  closeSearch()
-}
-
-// Add escape key handler
-const handleKeyDown = (event: KeyboardEvent) => {
-  if (event.key === 'Enter') {
-    emit('search')
-    if (!isInlineMode.value) {
-      closeSearch()
-    }
-  } else if (event.key === 'Escape' && isExpanded.value) {
-    closeSearch()
-  }
-  // Permitir navegación normal con teclas de flecha
-  updateCursorPosition()
-}
-
-// Suggestions system
+// 1. Primero inicializamos los composables base
+const { QUALIFIERS } = useQualifiers()
+const { parseSearchTokens, colorText } = useSearchParser()
+const { lockScroll, unlockScroll } = useScrollLock()
+
+// 1. Crear una función handleFocus que usaremos más tarde
+const handleFocusWrapper = () => {
+  searchInteractions.handleFocus()
+}
+
+// 2. Inicializar useSearchInput primero, pasando la función wrapper
+const searchInput = useSearchInput(handleFocusWrapper)
+
+// 3. Inicializar useSearchInteractions después
+const searchInteractions = useSearchInteractions(
+  props,
+  emit,
+  searchInput.input,
+  searchInput.updateCursorPosition,
+  lockScroll,
+  unlockScroll
+)
+
+// 4. Desestructurar los valores que necesitamos de ambos composables
+const {
+  input,
+  cursorPosition,
+  searchContainer,
+  isInputFocused,
+  handleInputScroll
+} = searchInput
+
+const {
+  searchInput: searchValue,
+  showSuggestions,
+  isInlineMode,
+  searchTokens,
+  isExpanded,
+  handleInput,
+  handleFocus,
+  handleBlur,
+  handleClose,
+  handleKeyDown,
+  handleSuggestionClick,
+  removeQualifier
+} = searchInteractions
+
+// 4. Finalmente las computed properties que dependen de todo lo anterior
+const coloredParts = computed(() => colorText(searchValue.value))
 const suggestions = computed(() => {
-  // Obtener los qualifiers usados con sus valores
   const usedQualifiers = searchTokens.value
     .filter(token => token.type === 'qualifier')
     .map(token => ({
@@ -328,7 +73,6 @@ const suggestions = computed(() => {
       value: token.value
     }))
 
-  // Devolver todos los qualifiers con su estado de uso
   return Object.keys(QUALIFIERS).map(qualifier => ({
     qualifier,
     isUsed: usedQualifiers.some(used => used.qualifier === qualifier),
@@ -336,159 +80,10 @@ const suggestions = computed(() => {
   }))
 })
 
-// Modificar la función removeQualifier para que solo elimine el qualifier específico con su valor exacto
-const removeQualifier = (qualifierToRemove: string, valueToRemove: string) => {
-  const tokens = searchTokens.value
-  let newSearchText = ''
-
-  for (let i = 0; i < tokens.length; i++) {
-    const token = tokens[i]
-    
-    // Solo eliminar si coincide tanto el qualifier como el valor
-    if (token.type === 'qualifier' && 
-        token.qualifier + ':' === qualifierToRemove && 
-        token.value === valueToRemove) {
-      // Saltar este token y el siguiente espacio si existe
-      if (i + 1 < tokens.length && tokens[i + 1].type === 'space') {
-        i++
-      }
-      continue
-    }
-    
-    newSearchText += token.value
-  }
-
-  searchInput.value = newSearchText.trim()
-  emit('update:modelValue', searchInput.value)
-  nextTick(() => {
-    input.value?.focus()
-    updateCursorPosition()
-  })
-}
-
-const updateCursorPosition = () => {
-  if (input.value) {
-    const inputElement = input.value
-    cursorPosition.value = inputElement.selectionStart || 0
-    const container = inputElement.parentElement
-
-    if (container) {
-      const measureElement = document.createElement('span')
-      measureElement.style.font = window.getComputedStyle(inputElement).font
-      measureElement.style.visibility = 'hidden'
-      measureElement.style.position = 'absolute'
-      measureElement.style.whiteSpace = 'pre'
-      measureElement.textContent = inputElement.value.substring(0, inputElement.selectionStart || 0)
-      document.body.appendChild(measureElement)
-      
-      const cursorOffset = measureElement.offsetWidth
-      const containerWidth = container.offsetWidth
-      const scrollLeft = container.scrollLeft
-      
-      document.body.removeChild(measureElement)
-
-      // Si el cursor está cerca del final visible, scroll automático
-      if (cursorOffset > scrollLeft + containerWidth - 80) {
-        container.scrollLeft = cursorOffset - containerWidth + 80
-      }
-      // Si el cursor está cerca del inicio visible
-      else if (cursorOffset < scrollLeft + 80) {
-        container.scrollLeft = Math.max(0, cursorOffset - 80)
-      }
-    }
-  }
-}
-
-// Función para manejar el cierre retardado de sugerencias
-const updateContainerWidth = () => {
-  if (searchContainer.value) {
-    containerWidth.value = searchContainer.value.offsetWidth
-  }
-}
-
-// Actualizar la posición del dropdown cuando se hace scroll
-const updateDropdownPosition = () => {
-  if (searchContainer.value) {
-    containerWidth.value = searchContainer.value.offsetWidth
-  }
-}
-
-const handleSuggestionClick = (suggestion: string) => {
-  const currentValue = searchInput.value
-  // Añadir espacio si el valor actual no termina en espacio
-  const space = currentValue && !currentValue.endsWith(' ') ? ' ' : ''
-  searchInput.value = currentValue + space + suggestion
-  emit('update:modelValue', searchInput.value)
-  
-  // Solo actualizar el cursor y mantener el foco
-  nextTick(() => {
-    input.value?.focus()
-    updateCursorPosition()
-    showSuggestions.value = true // Mantener las sugerencias visibles
-  })
-}
-
-// Añadir manejo de scroll sincronizado
-const handleInputScroll = (event: Event) => {
-  const input = event.target as HTMLElement
-  const mirror = input.previousElementSibling as HTMLElement
-  if (mirror) {
-    mirror.scrollLeft = input.scrollLeft
-  }
-}
-
-onMounted(() => {
-  updateContainerWidth()
-  window.addEventListener('resize', updateContainerWidth)
-
-  // 1. Global slash shortcut
-  window.addEventListener('keydown', handleGlobalShortcut)
-})
-
-onUnmounted(() => {
-  window.removeEventListener('resize', updateContainerWidth)
-  window.removeEventListener('keydown', handleGlobalShortcut)
-})
-
-// Simplify global shortcut handler to only use "/"
-const handleGlobalShortcut = (event: KeyboardEvent) => {
-  // Only trigger if it's exactly the "/" key and not inside an input/textarea
-  if (event.key === '/' && !['INPUT', 'TEXTAREA'].includes((event.target as HTMLElement).tagName)) {
-    event.preventDefault()
-    handleFocus()
-    nextTick(() => {
-      // Remove the "/" character that was typed
-      if (input.value) {
-        input.value.value = input.value.value.replace('/', '')
-      }
-    })
-  }
-}
-
+// Watchers
 watch(() => props.modelValue, (newValue) => {
-  if (newValue !== searchInput.value) {
-    searchInput.value = newValue
-  }
-})
-
-// Modificar el computed de sugerencias para separar en usados y no usados
-const suggestionGroups = computed(() => {
-  const usedQualifiers = searchTokens.value
-    .filter(token => token.type === 'qualifier')
-    .map(token => ({
-      qualifier: token.qualifier + ':',
-      value: token.value
-    }))
-
-  const allQualifiers = Object.keys(QUALIFIERS).map(qualifier => ({
-    qualifier,
-    isUsed: usedQualifiers.some(used => used.qualifier === qualifier),
-    value: usedQualifiers.find(used => used.qualifier === qualifier)?.value
-  }))
-
-  return {
-    used: allQualifiers.filter(q => q.isUsed),
-    available: allQualifiers.filter(q => !q.isUsed)
+  if (newValue !== searchValue.value) {
+    searchValue.value = newValue
   }
 })
 </script>
@@ -498,8 +93,9 @@ const suggestionGroups = computed(() => {
     <!-- Normal search input -->
     <div 
       ref="searchContainer"
-      class="relative w-full"
+      class="relative w-full cursor-pointer"
       :class="{ 'search-active': isExpanded }"
+      @click="handleFocus" 
     >
       <div 
         class="relative flex items-center w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background transition-all duration-200"
@@ -538,10 +134,10 @@ const suggestionGroups = computed(() => {
             <!-- Input real -->
             <input
               ref="input"
-              :value="searchInput"
+              :value="searchValue"
               type="text"
               class="search-input-field relative w-full"
-              :class="{ 'has-content': searchInput }"
+              :class="{ 'has-content': searchValue }"
               placeholder="Search repositories..."
               @input="handleInput"
               @keydown="handleKeyDown"
@@ -552,7 +148,7 @@ const suggestionGroups = computed(() => {
           </div>
           <!-- Cursor que se mueve con el input -->
           <span 
-            v-if="isInputFocused" 
+            v-if="isInputFocused && (isExpanded || isInlineMode)"
             class="typing-cursor absolute"
             :style="{ 
               left: `${cursorPosition}px`,
@@ -616,7 +212,7 @@ const suggestionGroups = computed(() => {
       <div 
         v-if="!isInlineMode && isExpanded" 
         class="search-overlay"
-        @click="handleClose"
+        @click.self="handleClose"
       >
         <div 
           class="search-dialog"
@@ -627,7 +223,8 @@ const suggestionGroups = computed(() => {
               <h2 class="text-lg font-semibold">Search repositories</h2>
               <button 
                 class="p-1 rounded-md hover:bg-accent"
-                @click="handleClose"
+                type="button"
+                @click.stop="handleClose"
               >
                 <Icon name="octicon:x-16" class="h-4 w-4" />
               </button>
@@ -660,10 +257,10 @@ const suggestionGroups = computed(() => {
 
                 <input
                   ref="input"
-                  :value="searchInput"
+                  :value="searchValue"
                   type="text"
                   class="search-input w-full bg-transparent outline-none relative"
-                  :class="{ 'text-transparent': searchInput }"
+                  :class="{ 'text-transparent': searchValue }"
                   placeholder="Search repositories..."
                   @input="handleInput"
                   @keydown="handleKeyDown"
diff --git a/composables/useQualifiers.ts b/composables/useQualifiers.ts
new file mode 100644
index 0000000..bfa6fe0
--- /dev/null
+++ b/composables/useQualifiers.ts
@@ -0,0 +1,22 @@
+import type { QualifierData } from "~/types/search"
+
+export const QUALIFIERS: QualifierData = {
+  'repo:': { label: 'Repository (user/repo)', icon: 'octicon:repo-16' },
+  'user:': { label: 'User', icon: 'octicon:person-16' },
+  'org:': { label: 'Organization', icon: 'octicon:organization-16' },
+  'in:': { label: 'Search in', icon: 'octicon:search-16' },
+  'size:': { label: 'Size', icon: 'octicon:file-16' },
+  'stars:': { label: 'Stars', icon: 'octicon:star-16' },
+  'language:': { label: 'Language', icon: 'octicon:code-16' },
+  'created:': { label: 'Created date', icon: 'octicon:calendar-16' },
+  'pushed:': { label: 'Push date', icon: 'octicon:git-commit-16' },
+  'topic:': { label: 'Topic', icon: 'octicon:hash-16' },
+  'is:': { label: 'State', icon: 'octicon:circle-16' },
+  'fork:': { label: 'Fork', icon: 'octicon:repo-forked-16' },
+}
+
+export function useQualifiers() {
+  return {
+    QUALIFIERS
+  }
+}
diff --git a/composables/useScrollLock.ts b/composables/useScrollLock.ts
new file mode 100644
index 0000000..a71acd1
--- /dev/null
+++ b/composables/useScrollLock.ts
@@ -0,0 +1,24 @@
+import { ref } from 'vue'
+
+export function useScrollLock() {
+  const originalPosition = ref(0)
+
+  const lockScroll = () => {
+    originalPosition.value = window.scrollY
+    document.body.style.position = 'fixed'
+    document.body.style.top = `-${originalPosition.value}px`
+    document.body.style.width = '100%'
+  }
+
+  const unlockScroll = () => {
+    document.body.style.position = ''
+    document.body.style.top = ''
+    document.body.style.width = ''
+    window.scrollTo(0, originalPosition.value)
+  }
+
+  return {
+    lockScroll,
+    unlockScroll
+  }
+}
diff --git a/composables/useSearchInput.ts b/composables/useSearchInput.ts
new file mode 100644
index 0000000..cf02972
--- /dev/null
+++ b/composables/useSearchInput.ts
@@ -0,0 +1,99 @@
+import { ref, nextTick, onMounted, onUnmounted } from 'vue'
+
+export function useSearchInput(onHandleFocus?: () => void) {
+  const input = ref<HTMLInputElement | null>(null)
+  const cursorPosition = ref(0)
+  const searchContainer = ref<HTMLDivElement | null>(null)
+  const containerWidth = ref(0)
+  const dropdownPosition = ref({ left: 0, top: 0 })
+  const isInputFocused = ref(false)
+
+  const updateCursorPosition = () => {
+    nextTick(() => {
+      if (input.value) {
+        const inputElement = input.value
+        cursorPosition.value = inputElement.selectionStart || 0
+        const container = inputElement.parentElement
+
+        if (container) {
+          const measureElement = document.createElement('span')
+          measureElement.style.font = window.getComputedStyle(inputElement).font
+          measureElement.style.visibility = 'hidden'
+          measureElement.style.position = 'absolute'
+          measureElement.style.whiteSpace = 'pre'
+          measureElement.textContent = inputElement.value.substring(0, inputElement.selectionStart || 0)
+          document.body.appendChild(measureElement)
+          
+          const cursorOffset = measureElement.offsetWidth
+          const containerWidth = container.offsetWidth
+          const scrollLeft = container.scrollLeft
+          
+          document.body.removeChild(measureElement)
+
+          if (cursorOffset > scrollLeft + containerWidth - 80) {
+            container.scrollLeft = cursorOffset - containerWidth + 80
+          }
+          else if (cursorOffset < scrollLeft + 80) {
+            container.scrollLeft = Math.max(0, cursorOffset - 80)
+          }
+        }
+      }
+    })
+  }
+
+  const handleInputScroll = (event: Event) => {
+    const input = event.target as HTMLElement
+    const mirror = input.previousElementSibling as HTMLElement
+    if (mirror) {
+      mirror.scrollLeft = input.scrollLeft
+    }
+  }
+
+  const updateContainerWidth = () => {
+    if (searchContainer.value) {
+      containerWidth.value = searchContainer.value.offsetWidth
+    }
+  }
+
+  const updateDropdownPosition = () => {
+    if (searchContainer.value) {
+      containerWidth.value = searchContainer.value.offsetWidth
+    }
+  }
+
+  const handleGlobalShortcut = (event: KeyboardEvent) => {
+    if (event.key === '/' && !['INPUT', 'TEXTAREA'].includes((event.target as HTMLElement).tagName)) {
+      event.preventDefault()
+      isInputFocused.value = true
+      onHandleFocus?.()
+      nextTick(() => {
+        input.value?.focus()
+      })
+    }
+  }
+
+  onMounted(() => {
+    updateContainerWidth()
+    window.addEventListener('resize', updateContainerWidth)
+    window.addEventListener('keydown', handleGlobalShortcut)
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', updateContainerWidth)
+    window.removeEventListener('keydown', handleGlobalShortcut)
+  })
+
+  return {
+    input,
+    cursorPosition,
+    searchContainer,
+    containerWidth,
+    dropdownPosition,
+    isInputFocused,
+    updateCursorPosition,
+    handleInputScroll,
+    updateContainerWidth,
+    updateDropdownPosition,
+    handleGlobalShortcut
+  }
+}
diff --git a/composables/useSearchInteractions.ts b/composables/useSearchInteractions.ts
new file mode 100644
index 0000000..787271d
--- /dev/null
+++ b/composables/useSearchInteractions.ts
@@ -0,0 +1,163 @@
+import { ref, computed, nextTick } from 'vue'
+import type { SearchToken } from '../types/search'
+import { useSearchParser } from './useSearchParser'
+
+export function useSearchInteractions(
+  props: { modelValue: string, mode?: 'inline' | 'modal' },
+  emit: { (e: 'update:modelValue', value: string): void, (e: 'search'): void },
+  input: any,
+  updateCursorPosition: () => void,
+  lockScroll: () => void,
+  unlockScroll: () => void
+) {
+  const { parseSearchTokens } = useSearchParser()
+  const searchInput = ref(props.modelValue)
+  const showSuggestions = ref(false)
+  const isInputFocused = ref(false)
+  const isExpanded = ref(false)
+
+  const isInlineMode = computed(() => props.mode === 'inline')
+  const searchTokens = computed(() => parseSearchTokens(searchInput.value))
+
+  const handleInput = (event: Event) => {
+    const value = (event.target as HTMLInputElement).value
+    searchInput.value = value
+    emit('update:modelValue', value)
+    updateCursorPosition()
+    showSuggestions.value = true // Mantener sugerencias visibles al escribir
+  }
+
+  const handleFocus = () => {
+    if (!isInlineMode.value && !isExpanded.value) {
+      isExpanded.value = true
+      isInputFocused.value = true
+      showSuggestions.value = true
+      lockScroll()
+      nextTick(() => {
+        input.value?.focus()
+      })
+    } else {
+      isInputFocused.value = true
+      showSuggestions.value = true
+    }
+  }
+
+  const closeSearch = () => {
+    if (!isInlineMode.value) {
+      isExpanded.value = false
+      isInputFocused.value = false
+      showSuggestions.value = false
+      unlockScroll()
+    } else {
+      isInputFocused.value = false
+      showSuggestions.value = false
+    }
+  }
+
+  const handleBlur = (event: FocusEvent) => {
+    const dialogContent = document.querySelector('.search-dialog-content')
+    if (dialogContent?.contains(event.relatedTarget as Node)) {
+      return
+    }
+    
+    if (!event.relatedTarget || !dialogContent?.contains(event.relatedTarget as Node)) {
+      closeSearch()
+    }
+  }
+
+  const handleClose = () => {
+    closeSearch()
+  }
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key === 'Enter') {
+      emit('search')
+      closeSearch()
+    } else if (event.key === 'Escape' && isExpanded.value) {
+      closeSearch()
+    }
+    updateCursorPosition()
+  }
+
+  const handleSuggestionClick = (suggestion: string) => {
+    const currentValue = searchInput.value
+    const space = currentValue && !currentValue.endsWith(' ') ? ' ' : ''
+    searchInput.value = currentValue + space + suggestion
+    emit('update:modelValue', searchInput.value)
+    input.value?.focus()
+    updateCursorPosition()
+    showSuggestions.value = true
+  }
+
+  const removeQualifier = (qualifierToRemove: string, valueToRemove: string) => {
+    const tokens = searchTokens.value
+    let newSearchText = ''
+    let skipNext = false
+    let needsSpace = false
+  
+    for (let i = 0; i < tokens.length; i++) {
+      const token = tokens[i]
+      
+      // Si este token debe ser saltado
+      if (skipNext) {
+        skipNext = false
+        continue
+      }
+  
+      // Si es el qualifier que queremos remover
+      if (token.type === 'qualifier' && 
+          token.qualifier + ':' === qualifierToRemove && 
+          token.value === valueToRemove) {
+        // Si hay un espacio después, marcarlo para saltar
+        if (i + 1 < tokens.length && tokens[i + 1].type === 'space') {
+          skipNext = true
+        }
+        // Si hay un espacio antes, no añadir espacio extra
+        if (i > 0 && tokens[i - 1].type === 'space') {
+          needsSpace = false
+        }
+        continue
+      }
+  
+      // Añadir espacio si es necesario
+      if (needsSpace && token.type !== 'space') {
+        newSearchText += ' '
+      }
+  
+      // Añadir el token actual
+      if (token.type === 'qualifier') {
+        newSearchText += token.qualifier + ':' + token.value
+        needsSpace = true
+      } else if (token.type === 'text') {
+        newSearchText += token.value
+        needsSpace = true
+      } else if (token.type === 'space') {
+        needsSpace = false
+      }
+    }
+  
+    searchInput.value = newSearchText.trim()
+    emit('update:modelValue', searchInput.value)
+    nextTick(() => {
+      input.value?.focus()
+      updateCursorPosition()
+    })
+  }
+
+  return {
+    searchInput,
+    showSuggestions,
+    isInputFocused,
+    isExpanded,
+    isInlineMode,
+    searchTokens, // Exportar searchTokens
+    handleInput,
+    handleFocus,
+    closeSearch,
+    handleBlur,
+    handleClose,
+    handleKeyDown,
+    handleSuggestionClick,
+    removeQualifier
+  }
+}
diff --git a/composables/useSearchParser.ts b/composables/useSearchParser.ts
new file mode 100644
index 0000000..677e3ee
--- /dev/null
+++ b/composables/useSearchParser.ts
@@ -0,0 +1,122 @@
+import type { ColoredPart, SearchToken } from '~/types/search'
+import { QUALIFIERS } from './useQualifiers'
+
+export function useSearchParser() {
+  const parseSearchTokens = (value: string): SearchToken[] => {
+    const tokens: SearchToken[] = []
+    let i = 0
+
+    while (i < value.length) {
+      let matchedQualifier = false
+      
+      for (const qualifier of Object.keys(QUALIFIERS)) {
+        if (value.slice(i).toLowerCase().startsWith(qualifier.toLowerCase())) {
+          let j = i + qualifier.length
+          let qualifierValue = ''
+          
+          while (j < value.length && value[j] !== ' ') {
+            qualifierValue += value[j]
+            j++
+          }
+
+          if (qualifierValue) {
+            tokens.push({
+              type: 'qualifier',
+              qualifier: qualifier.slice(0, -1),
+              value: qualifierValue
+            })
+          }
+
+          i = j
+          matchedQualifier = true
+          break
+        }
+      }
+
+      if (!matchedQualifier) {
+        if (value[i] === ' ') {
+          tokens.push({ type: 'space', value: ' ' })
+        } else {
+          let textValue = ''
+          while (i < value.length && !Object.keys(QUALIFIERS).some(q => 
+            value.slice(i).toLowerCase().startsWith(q.toLowerCase())
+          ) && value[i] !== ' ') {
+            textValue += value[i]
+            i++
+          }
+          if (textValue) {
+            tokens.push({ type: 'text', value: textValue })
+          }
+          continue
+        }
+      }
+      i++
+    }
+
+    return tokens
+  }
+
+  const colorText = (text: string): ColoredPart[] => {
+    const parts: ColoredPart[] = []
+    let currentPosition = 0
+
+    while (currentPosition < text.length) {
+      let matched = false
+
+      for (const qualifier of Object.keys(QUALIFIERS)) {
+        if (text.slice(currentPosition).toLowerCase().startsWith(qualifier.toLowerCase())) {
+          parts.push({
+            text: qualifier,
+            type: 'qualifier'
+          })
+          
+          currentPosition += qualifier.length
+          
+          let valueStart = currentPosition
+          while (currentPosition < text.length && text[currentPosition] !== ' ') {
+            currentPosition++
+          }
+          
+          if (currentPosition > valueStart) {
+            parts.push({
+              text: text.slice(valueStart, currentPosition),
+              type: 'value'
+            })
+          }
+          
+          matched = true
+          break
+        }
+      }
+
+      if (!matched) {
+        let normalText = ''
+        while (currentPosition < text.length) {
+          let isQualifier = false
+          for (const qualifier of Object.keys(QUALIFIERS)) {
+            if (text.slice(currentPosition).toLowerCase().startsWith(qualifier.toLowerCase())) {
+              isQualifier = true
+              break
+            }
+          }
+          if (isQualifier) break
+          normalText += text[currentPosition]
+          currentPosition++
+        }
+        if (normalText) {
+          parts.push({
+            text: normalText,
+            type: 'normal'
+          })
+        }
+      }
+    }
+
+    return parts
+  }
+
+  return {
+    parseSearchTokens,
+    colorText
+  }
+}
diff --git a/pages/index.vue b/pages/index.vue
index 3cda3e0..1a364b5 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -171,7 +171,7 @@ const clearFilter = (key: keyof Filters) => {
             <div class="relative flex-1">
               <SearchInput
                 v-model="searchQuery"
-                mode="modal"
+                mode="inline"
                 @search="onSearch"
               />
             </div>
diff --git a/types/search.ts b/types/search.ts
new file mode 100644
index 0000000..ccc4f7d
--- /dev/null
+++ b/types/search.ts
@@ -0,0 +1,25 @@
+export interface SearchToken {
+  type: 'qualifier' | 'text' | 'space';
+  value: string;
+  qualifier?: string;
+}
+
+export interface QualifierInfo {
+  label: string;
+  icon: string;
+}
+
+export interface QualifierData {
+  [key: string]: QualifierInfo;
+}
+
+export interface SuggestionItem {
+  qualifier: string;
+  isUsed: boolean;
+  value?: string;
+}
+
+export interface ColoredPart {
+  text: string;
+  type: 'qualifier' | 'value' | 'normal';
+}

From 106825179f8e1aef6b18669e4e19d6864ac404a1 Mon Sep 17 00:00:00 2001
From: Sean Luis <seanluis47@gmail.com>
Date: Sat, 22 Feb 2025 11:26:08 -0300
Subject: [PATCH 04/11] feat: simplify search input container and enhance
 cursor visibility in inline mode

---
 components/SearchInput.vue | 112 ++++++++++++++++++++++---------------
 pages/index.vue            |   2 +-
 2 files changed, 68 insertions(+), 46 deletions(-)

diff --git a/components/SearchInput.vue b/components/SearchInput.vue
index cb4af0c..69f8313 100644
--- a/components/SearchInput.vue
+++ b/components/SearchInput.vue
@@ -109,53 +109,45 @@ watch(() => props.modelValue, (newValue) => {
           class="mr-2 h-4 w-4 shrink-0 opacity-50"
         />
         
-        <!-- Modificar el contenedor del input -->
-        <div class="relative flex-1 overflow-hidden">
-          <div class="relative w-full overflow-x-auto search-scroll-container">
-            <!-- Capa de resaltado con contenido -->
-            <div 
-              class="search-highlight absolute inset-0 whitespace-pre pointer-events-none flex items-center"
-              :style="{ minWidth: '100%' }"
-            >
-              <template v-for="(part, index) in coloredParts" :key="index">
-                <span 
-                  v-if="part.type === 'value'" 
-                  class="search-badge"
-                >{{ part.text }}</span>
-                <span
-                  v-else
-                  :class="{ 'text-primary font-medium': part.type === 'qualifier' }"
-                >{{ part.text }}</span>
-              </template>
-              <!-- Espacio para el cursor -->
-              <span class="pl-px"></span>
-            </div>
-
-            <!-- Input real -->
-            <input
-              ref="input"
-              :value="searchValue"
-              type="text"
-              class="search-input-field relative w-full"
-              :class="{ 'has-content': searchValue }"
-              placeholder="Search repositories..."
-              @input="handleInput"
-              @keydown="handleKeyDown"
-              @focus="handleFocus"
-              @blur="handleBlur"
-              @scroll="handleInputScroll"
-            />
+        <!-- Simplificar el contenedor del input -->
+        <div class="relative flex-1">
+          <!-- Colored preview -->
+          <div 
+            aria-hidden="true"
+            class="search-input-mirror absolute inset-0 pointer-events-none flex items-center overflow-hidden"
+          >
+            <template v-for="(part, index) in coloredParts" :key="index">
+              <span 
+                v-if="part.type === 'value'" 
+                class="search-badge"
+              >{{ part.text }}</span>
+              <span
+                v-else
+                :class="{
+                  'text-primary font-medium': part.type === 'qualifier',
+                }"
+              >{{ part.text }}</span>
+            </template>
+            <!-- Agregar el cursor aquí también -->
+            <span v-if="isInputFocused" class="typing-cursor"></span>
           </div>
-          <!-- Cursor que se mueve con el input -->
-          <span 
-            v-if="isInputFocused && (isExpanded || isInlineMode)"
-            class="typing-cursor absolute"
-            :style="{ 
-              left: `${cursorPosition}px`,
-              top: '50%',
-              transform: 'translateY(-50%)'
+
+          <input
+            ref="input"
+            :value="searchValue"
+            type="text"
+            class="search-input w-full relative"
+            :class="{ 
+              'has-content': searchValue,
+              'text-transparent': searchValue
             }"
-          ></span>
+            placeholder="Search repositories..."
+            @input="handleInput"
+            @keydown="handleKeyDown"
+            @focus="handleFocus"
+            @blur="handleBlur"
+            @scroll="handleInputScroll"
+          />
         </div>
 
         <kbd 
@@ -368,6 +360,8 @@ watch(() => props.modelValue, (newValue) => {
   background-color: currentColor;
   margin-left: 1px;
   animation: blink 1s step-end infinite;
+  position: relative;
+  top: 1px;
 }
 
 @keyframes blink {
@@ -854,4 +848,32 @@ watch(() => props.modelValue, (newValue) => {
   background-color: hsl(var(--destructive)/0.2);
   color: hsl(var(--destructive));
 }
+
+.search-input-field {
+  background: transparent;
+  outline: none;
+  position: relative;
+  white-space: pre;
+  padding: 2px 0;
+  caret-color: currentColor; /* Asegura que el cursor sea visible */
+  color: currentColor; /* Color del texto igual al tema actual */
+}
+
+/* Solo hacer el texto transparente cuando tiene contenido y no está en modo inline */
+.search-input-field.has-content:not(.inline-mode) {
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+}
+
+/* Asegurar que el cursor sea visible en modo inline */
+.search-input-field.inline-mode {
+  color: currentColor;
+  -webkit-text-fill-color: currentColor;
+}
+
+/* Mantener el placeholder visible */
+.search-input-field::placeholder {
+  -webkit-text-fill-color: initial;
+  color: hsl(var(--muted-foreground));
+}
 </style>
diff --git a/pages/index.vue b/pages/index.vue
index 1a364b5..3cda3e0 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -171,7 +171,7 @@ const clearFilter = (key: keyof Filters) => {
             <div class="relative flex-1">
               <SearchInput
                 v-model="searchQuery"
-                mode="inline"
+                mode="modal"
                 @search="onSearch"
               />
             </div>

From 7c103f03afdb59fe03d52d0b6993c12cb36cc5e4 Mon Sep 17 00:00:00 2001
From: Sean Luis <seanluis47@gmail.com>
Date: Sat, 22 Feb 2025 11:50:38 -0300
Subject: [PATCH 05/11] feat: reorganize search component structure and remove
 unused types and files

---
 components/SearchInput.vue                    |  879 --------------
 components/search/SearchDialog.vue            |  100 --
 components/search/SearchHighlight.vue         |   51 -
 components/search/SearchInput.vue             | 1015 ++++++++++++-----
 components/search/SearchSuggestions.vue       |  105 --
 .../search/composables}/useQualifiers.ts      |    2 +-
 .../search/composables}/useScrollLock.ts      |    0
 .../search/composables/useSearchInput.ts      |  210 ++--
 .../composables}/useSearchInteractions.ts     |    2 +-
 .../search/composables}/useSearchParser.ts    |    2 +-
 .../search/composables/useSearchShortcuts.ts  |   28 -
 .../composables/useSearchSuggestions.ts       |   43 -
 components/search/constants.ts                |   14 -
 {types => components/search}/search.ts        |    0
 components/search/types.ts                    |   18 -
 composables/useSearchInput.ts                 |   99 --
 pages/index.vue                               |    2 +-
 17 files changed, 833 insertions(+), 1737 deletions(-)
 delete mode 100644 components/SearchInput.vue
 delete mode 100644 components/search/SearchDialog.vue
 delete mode 100644 components/search/SearchHighlight.vue
 delete mode 100644 components/search/SearchSuggestions.vue
 rename {composables => components/search/composables}/useQualifiers.ts (93%)
 rename {composables => components/search/composables}/useScrollLock.ts (100%)
 rename {composables => components/search/composables}/useSearchInteractions.ts (98%)
 rename {composables => components/search/composables}/useSearchParser.ts (97%)
 delete mode 100644 components/search/composables/useSearchShortcuts.ts
 delete mode 100644 components/search/composables/useSearchSuggestions.ts
 delete mode 100644 components/search/constants.ts
 rename {types => components/search}/search.ts (100%)
 delete mode 100644 components/search/types.ts
 delete mode 100644 composables/useSearchInput.ts

diff --git a/components/SearchInput.vue b/components/SearchInput.vue
deleted file mode 100644
index 69f8313..0000000
--- a/components/SearchInput.vue
+++ /dev/null
@@ -1,879 +0,0 @@
-<script setup lang="ts">
-import { watch, computed } from 'vue'
-import { useQualifiers } from '../composables/useQualifiers'
-import { useSearchParser } from '../composables/useSearchParser'
-import { useScrollLock } from '../composables/useScrollLock'
-import { useSearchInput } from '../composables/useSearchInput'
-import { useSearchInteractions } from '../composables/useSearchInteractions'
-
-const props = defineProps<{
-  modelValue: string
-  mode?: 'inline' | 'modal'
-}>()
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: string): void
-  (e: 'search'): void
-}>()
-
-// 1. Primero inicializamos los composables base
-const { QUALIFIERS } = useQualifiers()
-const { parseSearchTokens, colorText } = useSearchParser()
-const { lockScroll, unlockScroll } = useScrollLock()
-
-// 1. Crear una función handleFocus que usaremos más tarde
-const handleFocusWrapper = () => {
-  searchInteractions.handleFocus()
-}
-
-// 2. Inicializar useSearchInput primero, pasando la función wrapper
-const searchInput = useSearchInput(handleFocusWrapper)
-
-// 3. Inicializar useSearchInteractions después
-const searchInteractions = useSearchInteractions(
-  props,
-  emit,
-  searchInput.input,
-  searchInput.updateCursorPosition,
-  lockScroll,
-  unlockScroll
-)
-
-// 4. Desestructurar los valores que necesitamos de ambos composables
-const {
-  input,
-  cursorPosition,
-  searchContainer,
-  isInputFocused,
-  handleInputScroll
-} = searchInput
-
-const {
-  searchInput: searchValue,
-  showSuggestions,
-  isInlineMode,
-  searchTokens,
-  isExpanded,
-  handleInput,
-  handleFocus,
-  handleBlur,
-  handleClose,
-  handleKeyDown,
-  handleSuggestionClick,
-  removeQualifier
-} = searchInteractions
-
-// 4. Finalmente las computed properties que dependen de todo lo anterior
-const coloredParts = computed(() => colorText(searchValue.value))
-const suggestions = computed(() => {
-  const usedQualifiers = searchTokens.value
-    .filter(token => token.type === 'qualifier')
-    .map(token => ({
-      qualifier: token.qualifier + ':',
-      value: token.value
-    }))
-
-  return Object.keys(QUALIFIERS).map(qualifier => ({
-    qualifier,
-    isUsed: usedQualifiers.some(used => used.qualifier === qualifier),
-    value: usedQualifiers.find(used => used.qualifier === qualifier)?.value
-  }))
-})
-
-// Watchers
-watch(() => props.modelValue, (newValue) => {
-  if (newValue !== searchValue.value) {
-    searchValue.value = newValue
-  }
-})
-</script>
-
-<template>
-  <div class="relative w-full">
-    <!-- Normal search input -->
-    <div 
-      ref="searchContainer"
-      class="relative w-full cursor-pointer"
-      :class="{ 'search-active': isExpanded }"
-      @click="handleFocus" 
-    >
-      <div 
-        class="relative flex items-center w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background transition-all duration-200"
-        :class="{ 
-          'ring-2 ring-ring ring-offset-2': showSuggestions,
-          'search-input-expanded': isExpanded 
-        }"
-      >
-        <Icon 
-          name="octicon:search-16"
-          class="mr-2 h-4 w-4 shrink-0 opacity-50"
-        />
-        
-        <!-- Simplificar el contenedor del input -->
-        <div class="relative flex-1">
-          <!-- Colored preview -->
-          <div 
-            aria-hidden="true"
-            class="search-input-mirror absolute inset-0 pointer-events-none flex items-center overflow-hidden"
-          >
-            <template v-for="(part, index) in coloredParts" :key="index">
-              <span 
-                v-if="part.type === 'value'" 
-                class="search-badge"
-              >{{ part.text }}</span>
-              <span
-                v-else
-                :class="{
-                  'text-primary font-medium': part.type === 'qualifier',
-                }"
-              >{{ part.text }}</span>
-            </template>
-            <!-- Agregar el cursor aquí también -->
-            <span v-if="isInputFocused" class="typing-cursor"></span>
-          </div>
-
-          <input
-            ref="input"
-            :value="searchValue"
-            type="text"
-            class="search-input w-full relative"
-            :class="{ 
-              'has-content': searchValue,
-              'text-transparent': searchValue
-            }"
-            placeholder="Search repositories..."
-            @input="handleInput"
-            @keydown="handleKeyDown"
-            @focus="handleFocus"
-            @blur="handleBlur"
-            @scroll="handleInputScroll"
-          />
-        </div>
-
-        <kbd 
-          v-if="!showSuggestions"
-          class="pointer-events-none hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex"
-        >
-          <span class="text-xs">/</span>
-        </kbd>
-      </div>
-
-      <!-- Inline suggestions dropdown -->
-      <div
-        v-if="isInlineMode && showSuggestions && suggestions?.length > 0"
-        class="suggestions-dropdown-inline"
-      >
-        <div class="px-2 py-1 text-xs text-muted-foreground font-medium">
-          Available filters
-        </div>
-        <div 
-          v-for="suggestion in suggestions"
-          :key="suggestion.qualifier"
-          class="suggestion-item"
-          :class="{ 'is-used': suggestion.isUsed }"
-          @mousedown.prevent="suggestion.isUsed ? 
-            removeQualifier(suggestion.qualifier, suggestion.value!) : 
-            handleSuggestionClick(suggestion.qualifier)"
-        >
-          <Icon 
-            :name="QUALIFIERS[suggestion.qualifier as keyof typeof QUALIFIERS].icon" 
-            class="h-3.5 w-3.5 opacity-50" 
-          />
-          <span class="suggestion-label text-xs">
-            {{ QUALIFIERS[suggestion.qualifier as keyof typeof QUALIFIERS].label }}
-          </span>
-          <div class="ml-auto flex items-center gap-2">
-            <span v-if="suggestion.isUsed" class="text-xs text-muted-foreground">
-              {{ suggestion.value }}
-            </span>
-            <span class="text-xs text-muted-foreground">
-              {{ suggestion.qualifier }}
-            </span>
-            <Icon 
-              v-if="suggestion.isUsed"
-              name="octicon:x-16"
-              class="h-3.5 w-3.5 opacity-50" 
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Modal overlay (solo se muestra en modo modal) -->
-    <Transition name="search-overlay">
-      <div 
-        v-if="!isInlineMode && isExpanded" 
-        class="search-overlay"
-        @click.self="handleClose"
-      >
-        <div 
-          class="search-dialog"
-          @click.stop
-        >
-          <div class="search-dialog-content">
-            <div class="flex items-center justify-between mb-4">
-              <h2 class="text-lg font-semibold">Search repositories</h2>
-              <button 
-                class="p-1 rounded-md hover:bg-accent"
-                type="button"
-                @click.stop="handleClose"
-              >
-                <Icon name="octicon:x-16" class="h-4 w-4" />
-              </button>
-            </div>
-            
-            <!-- Search input when expanded -->
-            <div class="relative flex items-center w-full rounded-md border border-input bg-background px-3 py-2 text-sm">
-              <Icon 
-                name="octicon:search-16"
-                class="mr-2 h-4 w-4 shrink-0 opacity-50"
-              />
-              
-              <div class="relative flex-1">
-                <!-- Colored preview and cursor -->
-                <div 
-                  aria-hidden="true"
-                  class="search-input-mirror absolute inset-0 pointer-events-none flex items-center whitespace-pre overflow-x-auto"
-                >
-                  <template v-for="(part, index) in coloredParts" :key="index">
-                    <span v-if="part.type === 'value'" class="search-badge whitespace-pre">{{ part.text }}</span>
-                    <span
-                      v-else
-                      :class="{
-                        'text-primary font-medium whitespace-pre': part.type === 'qualifier',
-                      }"
-                    >{{ part.text }}</span>
-                  </template>
-                  <span v-if="isInputFocused" class="typing-cursor"></span>
-                </div>
-
-                <input
-                  ref="input"
-                  :value="searchValue"
-                  type="text"
-                  class="search-input w-full bg-transparent outline-none relative"
-                  :class="{ 'text-transparent': searchValue }"
-                  placeholder="Search repositories..."
-                  @input="handleInput"
-                  @keydown="handleKeyDown"
-                  @scroll="handleInputScroll"
-                />
-              </div>
-            </div>
-
-            <!-- Suggestions in dialog -->
-            <div v-if="suggestions?.length > 0" class="mt-2">
-              <div class="px-2 mb-2 text-xs text-muted-foreground font-medium">
-                Available filters
-              </div>
-              <div 
-                v-for="suggestion in suggestions"
-                :key="suggestion.qualifier"
-                class="suggestion-item"
-                :class="{ 'is-used': suggestion.isUsed }"
-                @mousedown.prevent="suggestion.isUsed ? 
-                  removeQualifier(suggestion.qualifier, suggestion.value!) : 
-                  handleSuggestionClick(suggestion.qualifier)"
-              >
-                <Icon 
-                  :name="QUALIFIERS[suggestion.qualifier as keyof typeof QUALIFIERS].icon" 
-                  class="h-3.5 w-3.5 opacity-50" 
-                />
-                <span class="suggestion-label text-xs">
-                  {{ QUALIFIERS[suggestion.qualifier as keyof typeof QUALIFIERS].label }}
-                </span>
-                <div class="ml-auto flex items-center gap-2">
-                  <span v-if="suggestion.isUsed" class="text-xs text-muted-foreground">
-                    {{ suggestion.value }}
-                  </span>
-                  <span class="text-xs text-muted-foreground">
-                    {{ suggestion.qualifier }}
-                  </span>
-                  <Icon 
-                    v-if="suggestion.isUsed"
-                    name="octicon:x-16"
-                    class="h-3.5 w-3.5 opacity-50" 
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </Transition>
-  </div>
-</template>
-
-<style scoped>
-.suggestions-dropdown {
-  position: absolute;
-  top: calc(100% + 0.5rem);
-  left: 0;
-  right: 0;
-  background-color: hsl(var(--background));
-  border: 1px solid hsl(var(--border));
-  border-radius: 0.375rem;
-  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  z-index: 50;
-  padding: 0.5rem 0;
-}
-
-.suggestion-item {
-  padding: 0.5rem;
-  display: flex;
-  align-items: center;
-  gap: 0.625rem;
-  cursor: pointer;
-  border-radius: 0.375rem;
-  transition: background-color 0.2s ease;
-  font-size: 0.75rem;
-  line-height: 1rem;
-}
-
-.suggestion-item:hover {
-  background-color: hsl(var(--accent));
-}
-
-.suggestion-item.is-used {
-  background-color: hsl(var(--muted)/0.1);
-}
-
-.suggestion-item.is-used:hover {
-  background-color: hsl(var(--muted)/0.2);
-}
-
-.suggestion-label {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* ...rest of existing styles... */
-.text-transparent {
-  -webkit-text-fill-color: currentColor;
-}
-
-.typing-cursor {
-  display: inline-block;
-  width: 2px;
-  height: 1.2em;
-  background-color: currentColor;
-  margin-left: 1px;
-  animation: blink 1s step-end infinite;
-  position: relative;
-  top: 1px;
-}
-
-@keyframes blink {
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0;
-  }
-}
-
-.search-badge {
-  display: inline-flex;
-  align-items: center;
-  background-color: #ddf4ff;
-  color: #0969da;
-  border-radius: .2rem;
-  padding: 0 0.5rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: 500;
-  margin: 0 1px;
-}
-
-:root[class~="dark"] .search-badge {
-  background-color: #1a384d;
-  color: #2f81f7;
-}
-
-.search-expanded {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 3.5rem; /* Match header height */
-  z-index: 50;
-  display: flex;
-  align-items: center;
-  background-color: hsl(var(--background));
-  border-bottom: 1px solid hsl(var(--border));
-  backdrop-filter: blur(8px);
-}
-
-.search-input-expanded {
-  max-width: 60rem;
-  margin: 0 auto;
-  width: 100%;
-  position: relative;
-}
-
-.suggestions-dropdown {
-  position: fixed;
-  top: 3.5rem; /* Position right below the header */
-  left: 50%;
-  transform: translateX(-50%);
-  width: 60rem !important;
-  max-width: calc(100vw - 2rem);
-  margin-top: 0;
-  background-color: hsl(var(--background));
-  border: 1px solid hsl(var(--border));
-  border-radius: 0.375rem;
-  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-}
-
-/* Ensure proper stacking */
-:root {
-  --search-z-index: 100; /* Increased to appear above header */
-}
-
-.search-expanded {
-  z-index: var(--search-z-index);
-}
-
-.suggestions-dropdown {
-  z-index: calc(var(--search-z-index) + 1);
-}
-
-/* Add backdrop blur for better visibility */
-.search-expanded {
-  background-color: hsl(var(--background)/95%);
-  backdrop-filter: blur(8px);
-}
-
-/* Add smooth transitions */
-.search-expanded,
-.search-input-expanded,
-.suggestions-dropdown {
-  transition: all 0.2s ease-out;
-}
-
-.search-overlay {
-  position: fixed;
-  inset: 0;
-  background-color: rgba(0, 0, 0, 0.4);
-  backdrop-filter: blur(4px);
-  z-index: 100;
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  padding-top: 4rem;
-}
-
-.search-dialog {
-  width: 100%;
-  max-width: 80rem;
-  margin: 0 1rem;
-}
-
-.search-dialog-content {
-  background-color: hsl(var(--background));
-  border: 1px solid hsl(var(--border));
-  border-radius: 0.75rem;
-  padding: 1.5rem;
-  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-}
-
-/* Transition animations */
-.search-overlay-enter-active,
-.search-overlay-leave-active {
-  transition: opacity 0.2s ease;
-}
-
-.search-overlay-enter-from,
-.search-overlay-leave-to {
-  opacity: 0;
-}
-
-.search-overlay-enter-active .search-dialog,
-.search-overlay-leave-active .search-dialog {
-  transition: transform 0.15s ease-out;
-}
-
-.search-overlay-enter-from .search-dialog,
-.search-overlay-leave-to .search-dialog {
-  transform: translateY(-1rem);
-}
-
-/* Asegurar que el diálogo permanezca visible */
-.search-dialog {
-  transform: translateY(0);
-}
-
-.search-active {
-  @apply invisible;
-}
-
-.suggestions-dropdown-inline {
-  position: absolute;
-  top: calc(100% + 0.25rem);
-  left: 0;
-  right: 0;
-  background-color: hsl(var(--background));
-  border: 1px solid hsl(var(--border));
-  border-radius: 0.375rem;
-  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  z-index: 50;
-  padding: 0.5rem 0;
-  max-height: 16rem;
-  overflow-y: auto;
-}
-
-/* Asegurar que el input mantenga el texto visible */
-.text-transparent {
-  -webkit-text-fill-color: transparent;
-  color: transparent;
-  caret-color: currentColor; /* Mantener el cursor visible */
-}
-
-.search-input-mirror {
-  overflow-x: auto;
-  white-space: pre;
-  scrollbar-width: none; /* Firefox */
-  -ms-overflow-style: none; /* IE and Edge */
-}
-
-.search-input-mirror::-webkit-scrollbar {
-  display: none; /* Chrome, Safari and Opera */
-}
-
-.search-input {
-  white-space: pre;
-  overflow-x: auto;
-}
-
-/* Ajustar el estilo del texto transparente para mejor visibilidad */
-.text-transparent {
-  -webkit-text-fill-color: transparent;
-  color: transparent;
-}
-
-/* Asegurar que los badges mantengan su espacio */
-.search-badge {
-  flex-shrink: 0;
-  display: inline-flex;
-  white-space: pre;
-}
-
-/* Asegurar que el contenedor mantenga el scroll sincronizado */
-.relative.flex-1 {
-  overflow: hidden;
-}
-
-.search-wrapper {
-  position: relative;
-  overflow-x: auto;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-
-.search-wrapper::-webkit-scrollbar {
-  display: none;
-}
-
-.search-mirror {
-  position: absolute;
-  top: 0;
-  left: 0;
-  padding: inherit;
-  pointer-events: none;
-  visibility: visible;
-  white-space: pre;
-  display: flex;
-  align-items: center;
-}
-
-.search-input {
-  width: 100%;
-  background: transparent;
-  outline: none;
-  color: transparent;
-  caret-color: currentColor;
-  position: relative;
-  white-space: pre;
-  padding: inherit;
-}
-
-.search-input.has-content {
-  -webkit-text-fill-color: transparent;
-}
-
-.search-input::placeholder {
-  -webkit-text-fill-color: initial;
-  color: initial;
-}
-
-.search-badge {
-  display: inline-flex;
-  align-items: center;
-  background-color: #ddf4ff;
-  color: #0969da;
-  border-radius: .2rem;
-  padding: 0 0.5rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: 500;
-  margin: 0 1px;
-  white-space: pre;
-}
-
-:root[class~="dark"] .search-badge {
-  background-color: #1a384d;
-  color: #2f81f7;
-}
-
-.search-container {
-  position: relative;
-  min-width: 0;
-  width: 100%;
-}
-
-.search-content-wrapper {
-  position: relative;
-  width: 100%;
-  overflow-x: auto;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-
-.search-content-wrapper::-webkit-scrollbar {
-  display: none;
-}
-
-.search-mirror {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  pointer-events: none;
-  white-space: pre;
-  padding: 2px 0;
-  min-width: min-content;
-  display: flex;
-  align-items: center;
-}
-
-.search-input {
-  width: 90%;
-  background: transparent;
-  outline: none;
-  position: relative;
-  white-space: pre;
-  padding: 2px 0;
-  min-width: 90%;
-  color: transparent;
-  caret-color: currentColor;
-}
-
-.search-input::placeholder {
-  color: hsl(var(--muted-foreground));
-  -webkit-text-fill-color: initial;
-}
-
-.search-badge {
-  display: inline-flex;
-  align-items: center;
-  background-color: #ddf4ff;
-  color: #0969da;
-  border-radius: .2rem;
-  padding: 0 0.5rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: 500;
-}
-
-.search-input-container {
-  position: relative;
-  width: 100%;
-  overflow: hidden;
-}
-
-.search-input-wrapper {
-  position: relative;
-  width: 100%;
-}
-
-.search-highlight-layer {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  pointer-events: none;
-  white-space: pre;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  gap: 0.25rem; /* Nuevo: separación consistente entre elementos */
-}
-
-.search-input-field {
-  width: 100%;
-  background: transparent;
-  outline: none;
-  color: transparent;
-  caret-color: currentColor;
-  white-space: pre;
-}
-
-.search-input-field::placeholder {
-  color: hsl(var(--muted-foreground));
-  -webkit-text-fill-color: initial;
-}
-
-.search-badge {
-  display: inline-flex;
-  align-items: center;
-  padding: 0 0.25rem;
-  border-radius: 0.2rem;
-  background: #ddf4ff;
-  color: #0969da;
-  font-size: 0.875rem;
-  font-weight: 500;
-  white-space: pre;
-  /* Se puede eliminar o reducir "margin" ya que el gap se encarga */
-}
-
-:root[class~="dark"] .search-badge {
-  background: #1a384d;
-  color: #2f81f7;
-}
-
-.extra-space {
-  /* Forzar al menos 2 caracteres de espacio extra */
-  min-width: 2ch;
-  flex-shrink: 0;
-}
-
-/* Remove duplicate styles and keep only these essential ones */
-.search-scroll-container {
-  display: flex;
-  align-items: center;
-  overflow-x: auto;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  margin-right: -8px; /* Compensar el padding del contenedor */
-  padding-right: 8px;
-}
-
-.search-scroll-container::-webkit-scrollbar {
-  display: none;
-}
-
-/* Ajustar el input */
-.search-input-field {
-  background: transparent;
-  outline: none;
-  color: transparent;
-  caret-color: currentColor;
-  min-width: 100%;
-  position: relative;
-  white-space: pre;
-  padding: 2px 0;
-}
-
-.search-input-field.has-content {
-  -webkit-text-fill-color: transparent;
-}
-
-.search-input-field::placeholder {
-  -webkit-text-fill-color: initial;
-  color: hsl(var(--muted-foreground));
-}
-
-/* Ajustar la capa de resaltado */
-.search-highlight {
-  display: flex;
-  align-items: center;
-  white-space: pre;
-  padding: 2px 0;
-}
-
-/* Asegurar que los badges mantengan su forma */
-.search-badge {
-  display: inline-flex;
-  align-items: center;
-  white-space: pre;
-  flex-shrink: 0;
-}
-
-/* Ajustar el cursor */
-.typing-cursor {
-  width: 2px;
-  height: 1.2em;
-  background-color: currentColor;
-  pointer-events: none;
-}
-
-.suggestions-group + .suggestions-group {
-  margin-top: 0.5rem;
-}
-
-.search-badge-mini {
-  background-color: hsl(var(--accent));
-  color: hsl(var(--accent-foreground));
-  padding: 0 0.375rem;
-  border-radius: 0.25rem;
-  font-size: 0.75rem;
-  line-height: 1.25rem;
-}
-
-.suggestion-item.is-used {
-  background-color: hsl(var(--muted)/0.1);
-}
-
-.suggestion-item.is-used:hover {
-  background-color: hsl(var(--destructive)/0.1);
-}
-
-.suggestions-container {
-  background-color: hsl(var(--background));
-  border: 1px solid hsl(var(--border));
-  border-radius: 0.375rem;
-  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  max-height: 24rem;
-  overflow-y: auto;
-}
-
-.suggestion-item.is-used:hover {
-  background-color: hsl(var(--destructive)/0.1);
-  color: hsl(var(--destructive));
-}
-
-.suggestion-item.is-used:hover .search-badge-mini {
-  background-color: hsl(var(--destructive)/0.2);
-  color: hsl(var(--destructive));
-}
-
-.search-input-field {
-  background: transparent;
-  outline: none;
-  position: relative;
-  white-space: pre;
-  padding: 2px 0;
-  caret-color: currentColor; /* Asegura que el cursor sea visible */
-  color: currentColor; /* Color del texto igual al tema actual */
-}
-
-/* Solo hacer el texto transparente cuando tiene contenido y no está en modo inline */
-.search-input-field.has-content:not(.inline-mode) {
-  color: transparent;
-  -webkit-text-fill-color: transparent;
-}
-
-/* Asegurar que el cursor sea visible en modo inline */
-.search-input-field.inline-mode {
-  color: currentColor;
-  -webkit-text-fill-color: currentColor;
-}
-
-/* Mantener el placeholder visible */
-.search-input-field::placeholder {
-  -webkit-text-fill-color: initial;
-  color: hsl(var(--muted-foreground));
-}
-</style>
diff --git a/components/search/SearchDialog.vue b/components/search/SearchDialog.vue
deleted file mode 100644
index 45cca6d..0000000
--- a/components/search/SearchDialog.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<script setup lang="ts">
-import type { QualifierSuggestion } from './types'
-
-defineProps<{
-  modelValue: string
-  suggestions: QualifierSuggestion[]
-}>()
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: string): void
-  (e: 'close'): void
-  (e: 'search'): void
-}>()
-</script>
-
-<template>
-  <div 
-    class="search-overlay"
-    @click="emit('close')"
-  >
-    <div 
-      class="search-dialog"
-      @click.stop
-    >
-      <div class="search-dialog-content">
-        <div class="flex items-center justify-between mb-4">
-          <h2 class="text-lg font-semibold">Search repositories</h2>
-          <button 
-            class="p-1 rounded-md hover:bg-accent"
-            @click="emit('close')"
-          >
-            <Icon name="octicon:x-16" class="h-4 w-4" />
-          </button>
-        </div>
-
-        <!-- Search input -->
-        <div class="relative mb-4">
-          <slot name="search-input"></slot>
-        </div>
-
-        <!-- Suggestions -->
-        <div class="suggestions-container">
-          <SearchSuggestions
-            :suggestions="suggestions"
-            mode="modal"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.search-overlay {
-  position: fixed;
-  inset: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  backdrop-filter: blur(4px);
-  z-index: 100;
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  padding-top: 6rem;
-}
-
-.search-dialog {
-  width: 100%;
-  max-width: 640px;
-  margin: 0 1rem;
-  animation: dialog-enter 0.2s ease-out;
-}
-
-.search-dialog-content {
-  background-color: hsl(var(--background));
-  border: 1px solid hsl(var(--border));
-  border-radius: 0.75rem;
-  padding: 1.25rem;
-  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-}
-
-.suggestions-container {
-  max-height: calc(100vh - 20rem);
-  overflow-y: auto;
-  margin: 0 -1.25rem;
-  padding: 0 1.25rem;
-  border-top: 1px solid hsl(var(--border));
-  padding-top: 1rem;
-}
-
-@keyframes dialog-enter {
-  from {
-    opacity: 0;
-    transform: translateY(-1rem);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-</style>
diff --git a/components/search/SearchHighlight.vue b/components/search/SearchHighlight.vue
deleted file mode 100644
index 1d206e7..0000000
--- a/components/search/SearchHighlight.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<script setup lang="ts">
-import type { SearchToken } from './types'
-
-defineProps<{
-  tokens: SearchToken[]
-}>()
-</script>
-
-<template>
-  <div class="search-highlight absolute inset-0 whitespace-pre pointer-events-none flex items-center">
-    <template v-for="(token, index) in tokens" :key="index">
-      <template v-if="token.type === 'qualifier'">
-        <span class="text-primary font-medium">{{ token.qualifier }}:</span>
-        <span class="search-badge">{{ token.value }}</span>
-      </template>
-      <template v-else>
-        <span>{{ token.value }}</span>
-      </template>
-    </template>
-    <span class="pl-px"></span>
-  </div>
-</template>
-
-<style scoped>
-.search-highlight {
-  display: flex;
-  align-items: center;
-  white-space: pre;
-  padding: 2px 0;
-}
-
-.search-badge {
-  display: inline-flex;
-  align-items: center;
-  background-color: #ddf4ff;
-  color: #0969da;
-  border-radius: .2rem;
-  padding: 0 0.5rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: 500;
-  margin: 0 1px;
-  white-space: pre;
-  flex-shrink: 0;
-}
-
-:root[class~="dark"] .search-badge {
-  background-color: #1a384d;
-  color: #2f81f7;
-}
-</style>
diff --git a/components/search/SearchInput.vue b/components/search/SearchInput.vue
index c15c8ea..291903d 100644
--- a/components/search/SearchInput.vue
+++ b/components/search/SearchInput.vue
@@ -1,16 +1,14 @@
 <script setup lang="ts">
-import { ref, computed, watch, nextTick } from 'vue'
+import { watch, computed } from 'vue'
+import { useQualifiers } from './composables/useQualifiers'
+import { useSearchParser } from './composables/useSearchParser'
+import { useScrollLock } from './composables/useScrollLock'
 import { useSearchInput } from './composables/useSearchInput'
-import { useSearchSuggestions } from './composables/useSearchSuggestions'
-import { useSearchShortcuts } from './composables/useSearchShortcuts'
-import SearchDialog from './SearchDialog.vue'
-import SearchHighlight from './SearchHighlight.vue'
-import SearchSuggestions from './SearchSuggestions.vue'
-import type { SearchMode } from './types'
+import { useSearchInteractions } from './composables/useSearchInteractions'
 
 const props = defineProps<{
   modelValue: string
-  mode?: SearchMode
+  mode?: 'inline' | 'modal'
 }>()
 
 const emit = defineEmits<{
@@ -18,313 +16,361 @@ const emit = defineEmits<{
   (e: 'search'): void
 }>()
 
+// 1. Primero inicializamos los composables base
+const { QUALIFIERS } = useQualifiers()
+const { parseSearchTokens, colorText } = useSearchParser()
+const { lockScroll, unlockScroll } = useScrollLock()
+
+// 1. Crear una función handleFocus que usaremos más tarde
+const handleFocusWrapper = () => {
+  searchInteractions.handleFocus()
+}
+
+// 2. Inicializar useSearchInput primero, pasando la función wrapper
+const searchInput = useSearchInput(handleFocusWrapper)
+
+// 3. Inicializar useSearchInteractions después
+const searchInteractions = useSearchInteractions(
+  props,
+  emit,
+  searchInput.input,
+  searchInput.updateCursorPosition,
+  lockScroll,
+  unlockScroll
+)
+
+// 4. Desestructurar los valores que necesitamos de ambos composables
 const {
-  searchInput,
   input,
   cursorPosition,
+  searchContainer,
   isInputFocused,
-  coloredParts,
-  parseSearchTokens,
-  updateCursorPosition
-} = useSearchInput()
+  handleInputScroll
+} = searchInput
 
-const tokens = computed(() => parseSearchTokens(searchInput.value))
 const {
+  searchInput: searchValue,
   showSuggestions,
-  suggestions,
-  handleSuggestionSelect,
-  handleSuggestionRemove
-} = useSearchSuggestions(
-  () => tokens.value,
-  () => searchInput.value
-)
-
-// Estado local
-const isExpanded = ref(false)
-const originalPosition = ref(0)
-const isInlineMode = computed(() => props.mode === 'inline')
-
-// Funciones de manejo de scroll
-const lockScroll = () => {
-  originalPosition.value = window.scrollY
-  document.body.style.position = 'fixed'
-  document.body.style.top = `-${originalPosition.value}px`
-  document.body.style.width = '100%'
-}
-
-const unlockScroll = () => {
-  document.body.style.position = ''
-  document.body.style.top = ''
-  document.body.style.width = ''
-  window.scrollTo(0, originalPosition.value)
-}
-
-// Manejadores de eventos
-const handleFocus = () => {
-  isInputFocused.value = true
-  showSuggestions.value = true
-  
-  if (!isInlineMode.value) {
-    isExpanded.value = true
-    lockScroll()
-    nextTick(() => {
-      input.value?.focus()
-    })
-  }
-}
-
-const closeSearch = () => {
-  isInputFocused.value = false
-  showSuggestions.value = false
-  isExpanded.value = false
-  unlockScroll()
-}
-
-const handleBlur = (event: FocusEvent) => {
-  const dialogContent = document.querySelector('.search-dialog-content')
-  if (dialogContent?.contains(event.relatedTarget as Node)) {
-    return
-  }
-  
-  if (!event.relatedTarget || !dialogContent?.contains(event.relatedTarget as Node)) {
-    closeSearch()
-  }
-}
-
-const handleClose = () => {
-  closeSearch()
-}
-
-const handleKeyDown = (event: KeyboardEvent) => {
-  if (event.key === 'Enter') {
-    emit('search')
-    if (!isInlineMode.value) {
-      closeSearch()
-    }
-  } else if (event.key === 'Escape' && isExpanded.value) {
-    closeSearch()
-  }
-  updateCursorPosition()
-}
-
-const handleInput = (event: Event) => {
-  const value = (event.target as HTMLInputElement).value
-  searchInput.value = value
-  emit('update:modelValue', value)
-  nextTick(() => {
-    updateCursorPosition()
-  })
-}
-
-// Modificar handleSuggestionClick para agregar el qualifier correctamente
-const handleSuggestionClick = (qualifier: string) => {
-  const currentValue = searchInput.value
-  // Añadir espacio si el valor actual no termina en espacio
-  const space = currentValue && !currentValue.endsWith(' ') ? ' ' : ''
-  searchInput.value = currentValue + space + qualifier
-  emit('update:modelValue', searchInput.value)
-  
-  nextTick(() => {
-    input.value?.focus()
-    updateCursorPosition()
-    showSuggestions.value = true // Mantener las sugerencias visibles
-  })
-}
-
-// Modificar la función handleSuggestionRemoveClick para coincidir con la firma esperada
-const handleSuggestionRemoveClick = (qualifier: string, value: string) => {
-  const fullQualifier = qualifier.endsWith(':') ? qualifier : `${qualifier}:`
-  const pattern = new RegExp(`${fullQualifier}\\s*${value}\\s*`, 'i')
-  searchInput.value = searchInput.value.replace(pattern, '').trim()
-  emit('update:modelValue', searchInput.value)
-  nextTick(() => {
-    input.value?.focus()
-    updateCursorPosition()
-  })
-}
-
-// Agregar el método handleSearch faltante
-const handleSearch = () => {
-  emit('search')
-  if (!isInlineMode.value) {
-    closeSearch()
-  }
-}
-
-// Keyboard shortcuts
-useSearchShortcuts(handleFocus, () => input.value)
+  isInlineMode,
+  searchTokens,
+  isExpanded,
+  handleInput,
+  handleFocus,
+  handleBlur,
+  handleClose,
+  handleKeyDown,
+  handleSuggestionClick,
+  removeQualifier
+} = searchInteractions
+
+// 4. Finalmente las computed properties que dependen de todo lo anterior
+const coloredParts = computed(() => colorText(searchValue.value))
+const suggestions = computed(() => {
+  const usedQualifiers = searchTokens.value
+    .filter(token => token.type === 'qualifier')
+    .map(token => ({
+      qualifier: token.qualifier + ':',
+      value: token.value
+    }))
+
+  return Object.keys(QUALIFIERS).map(qualifier => ({
+    qualifier,
+    isUsed: usedQualifiers.some(used => used.qualifier === qualifier),
+    value: usedQualifiers.find(used => used.qualifier === qualifier)?.value
+  }))
+})
 
-// Sincronización con v-model
+// Watchers
 watch(() => props.modelValue, (newValue) => {
-  if (newValue !== searchInput.value) {
-    searchInput.value = newValue
+  if (newValue !== searchValue.value) {
+    searchValue.value = newValue
   }
 })
-
-watch(searchInput, (newValue) => {
-  emit('update:modelValue', newValue)
-})
 </script>
 
 <template>
   <div class="relative w-full">
+    <!-- Normal search input -->
     <div 
-      class="relative flex items-center w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background transition-all duration-200"
-      :class="{ 
-        'ring-2 ring-ring ring-offset-2': showSuggestions,
-        'search-input-expanded': isExpanded 
-      }"
+      ref="searchContainer"
+      class="relative w-full cursor-pointer"
+      :class="{ 'search-active': isExpanded }"
+      @click="handleFocus" 
     >
-      <Icon 
-        name="octicon:search-16"
-        class="mr-2 h-4 w-4 shrink-0 opacity-50"
-      />
-
-      <!-- Input container -->
-      <div class="relative flex-1 overflow-hidden">
-        <div class="relative w-full overflow-x-auto search-scroll-container">
-          <!-- Capa de resaltado con contenido -->
-          <div class="search-highlight absolute inset-0 whitespace-pre pointer-events-none flex items-center">
+      <div 
+        class="h-9 relative flex items-center w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background transition-all duration-200"
+        :class="{ 
+          'ring-2 ring-ring ring-offset-2': showSuggestions,
+          'search-input-expanded': isExpanded 
+        }"
+      >
+        <Icon 
+          name="octicon:search-16"
+          class="mr-2 h-4 w-4 shrink-0 opacity-50"
+        />
+        
+        <!-- Simplificar el contenedor del input -->
+        <div class="relative flex-1">
+          <!-- Colored preview -->
+          <div 
+            aria-hidden="true"
+            class="search-input-mirror absolute inset-0 pointer-events-none flex items-center overflow-hidden"
+          >
             <template v-for="(part, index) in coloredParts" :key="index">
-              <template v-if="part.type === 'qualifier'">
-                <span class="text-primary font-medium">{{ part.text }}</span>
-              </template>
-              <template v-else-if="part.type === 'value'">
-                <span class="search-badge">{{ part.text }}</span>
-              </template>
-              <template v-else>
-                <span>{{ part.text }}</span>
-              </template>
+              <span 
+                v-if="part.type === 'value'" 
+                class="search-badge"
+              >{{ part.text }}</span>
+              <span
+                v-else
+                :class="{
+                  'text-primary font-medium': part.type === 'qualifier',
+                }"
+              >{{ part.text }}</span>
             </template>
-            <!-- Espacio para el cursor -->
-            <span class="pl-px"></span>
+            <!-- Agregar el cursor aquí también -->
+            <span v-if="isInputFocused" class="typing-cursor"></span>
           </div>
 
-          <!-- Input real -->
           <input
             ref="input"
-            v-model="searchInput"
+            :value="searchValue"
             type="text"
-            class="search-input-field relative w-full"
-            :class="{ 'has-content': searchInput }"
+            class="search-input w-full relative"
+            :class="{ 
+              'has-content': searchValue,
+              'text-transparent': searchValue
+            }"
             placeholder="Search repositories..."
             @input="handleInput"
-            @keydown="updateCursorPosition"
-            @keyup="updateCursorPosition"
-            @click="updateCursorPosition"
+            @keydown="handleKeyDown"
             @focus="handleFocus"
             @blur="handleBlur"
+            @scroll="handleInputScroll"
           />
-
-          <!-- Cursor animado -->
-          <span 
-            v-if="isInputFocused" 
-            class="typing-cursor absolute"
-            :style="{ 
-              left: `${cursorPosition}px`,
-              top: '50%',
-              transform: 'translateY(-50%)'
-            }"
-          ></span>
         </div>
+
+        <kbd 
+          v-if="!showSuggestions"
+          class="pointer-events-none hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex"
+        >
+          <span class="text-xs">/</span>
+        </kbd>
       </div>
 
-      <kbd 
-        v-if="!showSuggestions"
-        class="pointer-events-none hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex"
+      <!-- Inline suggestions dropdown -->
+      <div
+        v-if="isInlineMode && showSuggestions && suggestions?.length > 0"
+        class="suggestions-dropdown-inline"
       >
-        <span class="text-xs">/</span>
-      </kbd>
+        <div class="px-2 py-1 text-xs text-muted-foreground font-medium">
+          Available filters
+        </div>
+        <div 
+          v-for="suggestion in suggestions"
+          :key="suggestion.qualifier"
+          class="suggestion-item"
+          :class="{ 'is-used': suggestion.isUsed }"
+          @mousedown.prevent="suggestion.isUsed ? 
+            removeQualifier(suggestion.qualifier, suggestion.value!) : 
+            handleSuggestionClick(suggestion.qualifier)"
+        >
+          <Icon 
+            :name="QUALIFIERS[suggestion.qualifier as keyof typeof QUALIFIERS].icon" 
+            class="h-3.5 w-3.5 opacity-50" 
+          />
+          <span class="suggestion-label text-xs">
+            {{ QUALIFIERS[suggestion.qualifier as keyof typeof QUALIFIERS].label }}
+          </span>
+          <div class="ml-auto flex items-center gap-2">
+            <span v-if="suggestion.isUsed" class="text-xs text-muted-foreground">
+              {{ suggestion.value }}
+            </span>
+            <span class="text-xs text-muted-foreground">
+              {{ suggestion.qualifier }}
+            </span>
+            <Icon 
+              v-if="suggestion.isUsed"
+              name="octicon:x-16"
+              class="h-3.5 w-3.5 opacity-50" 
+            />
+          </div>
+        </div>
+      </div>
     </div>
 
-    <!-- Suggestions (inline mode) -->
-    <SearchSuggestions
-      v-if="isInlineMode && showSuggestions"
-      :suggestions="suggestions"
-      mode="inline"
-      @select="handleSuggestionClick"
-      @remove="handleSuggestionRemoveClick"
-    />
-
-    <!-- Search Dialog (modal mode) -->
-    <SearchDialog
-      v-if="!isInlineMode && isExpanded"
-      v-model="searchInput"
-      :suggestions="suggestions"
-      @close="handleClose"
-      @search="handleSearch"
-    >
-      <template #search-input>
-        <div class="relative flex-1 overflow-hidden">
-          <div class="relative w-full overflow-x-auto search-scroll-container">
-            <SearchHighlight :tokens="tokens" />
-            <input
-              ref="input"
-              v-model="searchInput"
-              type="text"
-              class="search-input-field relative w-full"
-              :class="{ 'has-content': searchInput }"
-              placeholder="Search repositories..."
-              @input="updateCursorPosition"
-              @keydown="handleKeyDown"
-            />
+    <!-- Modal overlay (solo se muestra en modo modal) -->
+    <Transition name="search-overlay">
+      <div 
+        v-if="!isInlineMode && isExpanded" 
+        class="search-overlay"
+        @click.self="handleClose"
+      >
+        <div 
+          class="search-dialog"
+          @click.stop
+        >
+          <div class="search-dialog-content">
+            <div class="flex items-center justify-between mb-4">
+              <h2 class="text-lg font-semibold">Search repositories</h2>
+              <button 
+                class="p-1 rounded-md hover:bg-accent"
+                type="button"
+                @click.stop="handleClose"
+              >
+                <Icon name="octicon:x-16" class="h-4 w-4" />
+              </button>
+            </div>
+            
+            <!-- Search input when expanded -->
+            <div class="relative flex items-center w-full rounded-md border border-input bg-background px-3 py-2 text-sm">
+              <Icon 
+                name="octicon:search-16"
+                class="mr-2 h-4 w-4 shrink-0 opacity-50"
+              />
+              
+              <div class="relative flex-1">
+                <!-- Colored preview and cursor -->
+                <div 
+                  aria-hidden="true"
+                  class="search-input-mirror absolute inset-0 pointer-events-none flex items-center whitespace-pre overflow-x-auto"
+                >
+                  <template v-for="(part, index) in coloredParts" :key="index">
+                    <span v-if="part.type === 'value'" class="search-badge whitespace-pre">{{ part.text }}</span>
+                    <span
+                      v-else
+                      :class="{
+                        'text-primary font-medium whitespace-pre': part.type === 'qualifier',
+                      }"
+                    >{{ part.text }}</span>
+                  </template>
+                  <span v-if="isInputFocused" class="typing-cursor"></span>
+                </div>
+
+                <input
+                  ref="input"
+                  :value="searchValue"
+                  type="text"
+                  class="search-input w-full bg-transparent outline-none relative"
+                  :class="{ 'text-transparent': searchValue }"
+                  placeholder="Search repositories..."
+                  @input="handleInput"
+                  @keydown="handleKeyDown"
+                  @scroll="handleInputScroll"
+                />
+              </div>
+            </div>
+
+            <!-- Suggestions in dialog -->
+            <div v-if="suggestions?.length > 0" class="mt-2">
+              <div class="px-2 mb-2 text-xs text-muted-foreground font-medium">
+                Available filters
+              </div>
+              <div 
+                v-for="suggestion in suggestions"
+                :key="suggestion.qualifier"
+                class="suggestion-item"
+                :class="{ 'is-used': suggestion.isUsed }"
+                @mousedown.prevent="suggestion.isUsed ? 
+                  removeQualifier(suggestion.qualifier, suggestion.value!) : 
+                  handleSuggestionClick(suggestion.qualifier)"
+              >
+                <Icon 
+                  :name="QUALIFIERS[suggestion.qualifier as keyof typeof QUALIFIERS].icon" 
+                  class="h-3.5 w-3.5 opacity-50" 
+                />
+                <span class="suggestion-label text-xs">
+                  {{ QUALIFIERS[suggestion.qualifier as keyof typeof QUALIFIERS].label }}
+                </span>
+                <div class="ml-auto flex items-center gap-2">
+                  <span v-if="suggestion.isUsed" class="text-xs text-muted-foreground">
+                    {{ suggestion.value }}
+                  </span>
+                  <span class="text-xs text-muted-foreground">
+                    {{ suggestion.qualifier }}
+                  </span>
+                  <Icon 
+                    v-if="suggestion.isUsed"
+                    name="octicon:x-16"
+                    class="h-3.5 w-3.5 opacity-50" 
+                  />
+                </div>
+              </div>
+            </div>
           </div>
         </div>
-      </template>
-    </SearchDialog>
+      </div>
+    </Transition>
   </div>
 </template>
 
 <style scoped>
-.search-scroll-container {
-  position: relative; /* Asegura que el contenedor sea relativo */
+.suggestions-dropdown {
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  left: 0;
+  right: 0;
+  background-color: hsl(var(--background));
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.375rem;
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  z-index: 50;
+  padding: 0.5rem 0;
+}
+
+.suggestion-item {
+  padding: 0.5rem;
   display: flex;
   align-items: center;
-  overflow-x: auto;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  margin-right: -8px;
-  padding-right: 8px;
+  gap: 0.625rem;
+  cursor: pointer;
+  border-radius: 0.375rem;
+  transition: background-color 0.2s ease;
+  font-size: 0.75rem;
+  line-height: 1rem;
 }
 
-.search-scroll-container::-webkit-scrollbar {
-  display: none;
+.suggestion-item:hover {
+  background-color: hsl(var(--accent));
 }
 
-.search-input-field {
-  position: relative;
-  background: transparent;
-  outline: none;
-  color: transparent;
-  caret-color: transparent; /* Ocultar el cursor nativo */
-  min-width: 100%;
-  white-space: pre;
-  padding: 2px 0;
+.suggestion-item.is-used {
+  background-color: hsl(var(--muted)/0.1);
 }
 
-.search-input-field.has-content {
-  -webkit-text-fill-color: transparent;
+.suggestion-item.is-used:hover {
+  background-color: hsl(var(--muted)/0.2);
 }
 
-.search-input-field::placeholder {
-  -webkit-text-fill-color: initial;
-  color: hsl(var(--muted-foreground));
+.suggestion-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ...rest of existing styles... */
+.text-transparent {
+  -webkit-text-fill-color: currentColor;
 }
 
 .typing-cursor {
-  position: absolute;
+  display: inline-block;
   width: 2px;
   height: 1.2em;
   background-color: currentColor;
-  pointer-events: none;
+  margin-left: 1px;
   animation: blink 1s step-end infinite;
-  z-index: 10; /* Asegura que el cursor esté siempre visible */
-  margin-left: -1px; /* Ajuste fino de la posición */
+  position: relative;
+  top: 1px;
 }
 
 @keyframes blink {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0; }
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
 }
 
 .search-badge {
@@ -338,7 +384,6 @@ watch(searchInput, (newValue) => {
   line-height: 1.25rem;
   font-weight: 500;
   margin: 0 1px;
-  white-space: pre;
 }
 
 :root[class~="dark"] .search-badge {
@@ -346,6 +391,67 @@ watch(searchInput, (newValue) => {
   color: #2f81f7;
 }
 
+.search-expanded {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3.5rem; /* Match header height */
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  background-color: hsl(var(--background));
+  border-bottom: 1px solid hsl(var(--border));
+  backdrop-filter: blur(8px);
+}
+
+.search-input-expanded {
+  max-width: 60rem;
+  margin: 0 auto;
+  width: 100%;
+  position: relative;
+}
+
+.suggestions-dropdown {
+  position: fixed;
+  top: 3.5rem; /* Position right below the header */
+  left: 50%;
+  transform: translateX(-50%);
+  width: 60rem !important;
+  max-width: calc(100vw - 2rem);
+  margin-top: 0;
+  background-color: hsl(var(--background));
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.375rem;
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+}
+
+/* Ensure proper stacking */
+:root {
+  --search-z-index: 100; /* Increased to appear above header */
+}
+
+.search-expanded {
+  z-index: var(--search-z-index);
+}
+
+.suggestions-dropdown {
+  z-index: calc(var(--search-z-index) + 1);
+}
+
+/* Add backdrop blur for better visibility */
+.search-expanded {
+  background-color: hsl(var(--background)/95%);
+  backdrop-filter: blur(8px);
+}
+
+/* Add smooth transitions */
+.search-expanded,
+.search-input-expanded,
+.suggestions-dropdown {
+  transition: all 0.2s ease-out;
+}
+
 .search-overlay {
   position: fixed;
   inset: 0;
@@ -371,4 +477,403 @@ watch(searchInput, (newValue) => {
   padding: 1.5rem;
   box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
 }
+
+/* Transition animations */
+.search-overlay-enter-active,
+.search-overlay-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.search-overlay-enter-from,
+.search-overlay-leave-to {
+  opacity: 0;
+}
+
+.search-overlay-enter-active .search-dialog,
+.search-overlay-leave-active .search-dialog {
+  transition: transform 0.15s ease-out;
+}
+
+.search-overlay-enter-from .search-dialog,
+.search-overlay-leave-to .search-dialog {
+  transform: translateY(-1rem);
+}
+
+/* Asegurar que el diálogo permanezca visible */
+.search-dialog {
+  transform: translateY(0);
+}
+
+.search-active {
+  @apply invisible;
+}
+
+.suggestions-dropdown-inline {
+  position: absolute;
+  top: calc(100% + 0.25rem);
+  left: 0;
+  right: 0;
+  background-color: hsl(var(--background));
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.375rem;
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  z-index: 50;
+  padding: 0.5rem 0;
+  max-height: 16rem;
+  overflow-y: auto;
+}
+
+/* Asegurar que el input mantenga el texto visible */
+.text-transparent {
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+  caret-color: currentColor; /* Mantener el cursor visible */
+}
+
+.search-input-mirror {
+  overflow-x: auto;
+  white-space: pre;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+}
+
+.search-input-mirror::-webkit-scrollbar {
+  display: none; /* Chrome, Safari and Opera */
+}
+
+.search-input {
+  white-space: pre;
+  overflow-x: auto;
+}
+
+/* Ajustar el estilo del texto transparente para mejor visibilidad */
+.text-transparent {
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+}
+
+/* Asegurar que los badges mantengan su espacio */
+.search-badge {
+  flex-shrink: 0;
+  display: inline-flex;
+  white-space: pre;
+}
+
+/* Asegurar que el contenedor mantenga el scroll sincronizado */
+.relative.flex-1 {
+  overflow: hidden;
+}
+
+.search-wrapper {
+  position: relative;
+  overflow-x: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.search-wrapper::-webkit-scrollbar {
+  display: none;
+}
+
+.search-mirror {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: inherit;
+  pointer-events: none;
+  visibility: visible;
+  white-space: pre;
+  display: flex;
+  align-items: center;
+}
+
+.search-input {
+  width: 100%;
+  background: transparent;
+  outline: none;
+  color: transparent;
+  caret-color: currentColor;
+  position: relative;
+  white-space: pre;
+  padding: inherit;
+}
+
+.search-input.has-content {
+  -webkit-text-fill-color: transparent;
+}
+
+.search-input::placeholder {
+  -webkit-text-fill-color: initial;
+  color: initial;
+}
+
+.search-badge {
+  display: inline-flex;
+  align-items: center;
+  background-color: #ddf4ff;
+  color: #0969da;
+  border-radius: .2rem;
+  padding: 0 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  margin: 0 1px;
+  white-space: pre;
+}
+
+:root[class~="dark"] .search-badge {
+  background-color: #1a384d;
+  color: #2f81f7;
+}
+
+.search-container {
+  position: relative;
+  min-width: 0;
+  width: 100%;
+}
+
+.search-content-wrapper {
+  position: relative;
+  width: 100%;
+  overflow-x: auto;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.search-content-wrapper::-webkit-scrollbar {
+  display: none;
+}
+
+.search-mirror {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  pointer-events: none;
+  white-space: pre;
+  padding: 2px 0;
+  min-width: min-content;
+  display: flex;
+  align-items: center;
+}
+
+.search-input {
+  width: 90%;
+  background: transparent;
+  outline: none;
+  position: relative;
+  white-space: pre;
+  padding: 2px 0;
+  min-width: 90%;
+  color: transparent;
+  caret-color: currentColor;
+}
+
+.search-input::placeholder {
+  color: hsl(var(--muted-foreground));
+  -webkit-text-fill-color: initial;
+}
+
+.search-badge {
+  display: inline-flex;
+  align-items: center;
+  background-color: #ddf4ff;
+  color: #0969da;
+  border-radius: .2rem;
+  padding: 0 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+}
+
+.search-input-container {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+
+.search-input-wrapper {
+  position: relative;
+  width: 100%;
+}
+
+.search-highlight-layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  white-space: pre;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem; /* Nuevo: separación consistente entre elementos */
+}
+
+.search-input-field {
+  width: 100%;
+  background: transparent;
+  outline: none;
+  color: transparent;
+  caret-color: currentColor;
+  white-space: pre;
+}
+
+.search-input-field::placeholder {
+  color: hsl(var(--muted-foreground));
+  -webkit-text-fill-color: initial;
+}
+
+.search-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 0.25rem;
+  border-radius: 0.2rem;
+  background: #ddf4ff;
+  color: #0969da;
+  font-size: 0.875rem;
+  font-weight: 500;
+  white-space: pre;
+  /* Se puede eliminar o reducir "margin" ya que el gap se encarga */
+}
+
+:root[class~="dark"] .search-badge {
+  background: #1a384d;
+  color: #2f81f7;
+}
+
+.extra-space {
+  /* Forzar al menos 2 caracteres de espacio extra */
+  min-width: 2ch;
+  flex-shrink: 0;
+}
+
+/* Remove duplicate styles and keep only these essential ones */
+.search-scroll-container {
+  display: flex;
+  align-items: center;
+  overflow-x: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  margin-right: -8px; /* Compensar el padding del contenedor */
+  padding-right: 8px;
+}
+
+.search-scroll-container::-webkit-scrollbar {
+  display: none;
+}
+
+/* Ajustar el input */
+.search-input-field {
+  background: transparent;
+  outline: none;
+  color: transparent;
+  caret-color: currentColor;
+  min-width: 100%;
+  position: relative;
+  white-space: pre;
+  padding: 2px 0;
+}
+
+.search-input-field.has-content {
+  -webkit-text-fill-color: transparent;
+}
+
+.search-input-field::placeholder {
+  -webkit-text-fill-color: initial;
+  color: hsl(var(--muted-foreground));
+}
+
+/* Ajustar la capa de resaltado */
+.search-highlight {
+  display: flex;
+  align-items: center;
+  white-space: pre;
+  padding: 2px 0;
+}
+
+/* Asegurar que los badges mantengan su forma */
+.search-badge {
+  display: inline-flex;
+  align-items: center;
+  white-space: pre;
+  flex-shrink: 0;
+}
+
+/* Ajustar el cursor */
+.typing-cursor {
+  width: 2px;
+  height: 1.2em;
+  background-color: currentColor;
+  pointer-events: none;
+}
+
+.suggestions-group + .suggestions-group {
+  margin-top: 0.5rem;
+}
+
+.search-badge-mini {
+  background-color: hsl(var(--accent));
+  color: hsl(var(--accent-foreground));
+  padding: 0 0.375rem;
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+}
+
+.suggestion-item.is-used {
+  background-color: hsl(var(--muted)/0.1);
+}
+
+.suggestion-item.is-used:hover {
+  background-color: hsl(var(--destructive)/0.1);
+}
+
+.suggestions-container {
+  background-color: hsl(var(--background));
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.375rem;
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  max-height: 24rem;
+  overflow-y: auto;
+}
+
+.suggestion-item.is-used:hover {
+  background-color: hsl(var(--destructive)/0.1);
+  color: hsl(var(--destructive));
+}
+
+.suggestion-item.is-used:hover .search-badge-mini {
+  background-color: hsl(var(--destructive)/0.2);
+  color: hsl(var(--destructive));
+}
+
+.search-input-field {
+  background: transparent;
+  outline: none;
+  position: relative;
+  white-space: pre;
+  padding: 2px 0;
+  caret-color: currentColor; /* Asegura que el cursor sea visible */
+  color: currentColor; /* Color del texto igual al tema actual */
+}
+
+/* Solo hacer el texto transparente cuando tiene contenido y no está en modo inline */
+.search-input-field.has-content:not(.inline-mode) {
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+}
+
+/* Asegurar que el cursor sea visible en modo inline */
+.search-input-field.inline-mode {
+  color: currentColor;
+  -webkit-text-fill-color: currentColor;
+}
+
+/* Mantener el placeholder visible */
+.search-input-field::placeholder {
+  -webkit-text-fill-color: initial;
+  color: hsl(var(--muted-foreground));
+}
 </style>
diff --git a/components/search/SearchSuggestions.vue b/components/search/SearchSuggestions.vue
deleted file mode 100644
index 52f4e09..0000000
--- a/components/search/SearchSuggestions.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<script setup lang="ts">
-import type { QualifierSuggestion } from './types'
-import { QUALIFIERS } from './constants'
-
-defineProps<{
-  suggestions: QualifierSuggestion[]
-  mode?: 'inline' | 'modal'
-}>()
-
-const emit = defineEmits<{
-  (e: 'select', qualifier: string): void
-  (e: 'remove', qualifier: string, value: string): void
-}>()
-</script>
-
-<template>
-  <div 
-    :class="[
-      mode === 'inline' ? 'suggestions-dropdown-inline' : 'suggestions-dropdown'
-    ]"
-  >
-    <div class="px-2 py-1 text-xs text-muted-foreground font-medium">
-      Available filters
-    </div>
-    <div 
-      v-for="suggestion in suggestions"
-      :key="suggestion.qualifier"
-      class="suggestion-item"
-      :class="{ 'is-used': suggestion.isUsed }"
-      @mousedown.prevent="suggestion.isUsed ? 
-        emit('remove', suggestion.qualifier, suggestion.value!) : 
-        emit('select', suggestion.qualifier)"
-    >
-      <Icon 
-        :name="QUALIFIERS[suggestion.qualifier as keyof typeof QUALIFIERS].icon" 
-        class="h-3.5 w-3.5 opacity-50" 
-      />
-      <span class="suggestion-label text-xs">
-        {{ QUALIFIERS[suggestion.qualifier as keyof typeof QUALIFIERS].label }}
-      </span>
-      <div class="ml-auto flex items-center gap-2">
-        <span v-if="suggestion.isUsed" class="text-xs text-muted-foreground">
-          {{ suggestion.value }}
-        </span>
-        <span class="text-xs text-muted-foreground">
-          {{ suggestion.qualifier }}
-        </span>
-        <Icon 
-          v-if="suggestion.isUsed"
-          name="octicon:x-16"
-          class="h-3.5 w-3.5 opacity-50" 
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.suggestions-dropdown,
-.suggestions-dropdown-inline {
-  position: absolute;
-  background-color: hsl(var(--background));
-  border: 1px solid hsl(var(--border));
-  border-radius: 0.375rem;
-  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  z-index: 50;
-  padding: 0.5rem 0;
-}
-
-.suggestions-dropdown-inline {
-  top: calc(100% + 0.25rem);
-  left: 0;
-  right: 0;
-  max-height: 16rem;
-  overflow-y: auto;
-}
-
-.suggestion-item {
-  padding: 0.75rem 1.25rem;
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  cursor: pointer;
-  transition: background-color 0.2s ease;
-}
-
-.suggestion-item:hover {
-  background-color: hsl(var(--accent));
-}
-
-.suggestion-item.is-used {
-  background-color: hsl(var(--muted)/0.1);
-}
-
-.suggestion-item.is-used:hover {
-  background-color: hsl(var(--destructive)/0.1);
-  color: hsl(var(--destructive));
-}
-
-.suggestion-label {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-</style>
diff --git a/composables/useQualifiers.ts b/components/search/composables/useQualifiers.ts
similarity index 93%
rename from composables/useQualifiers.ts
rename to components/search/composables/useQualifiers.ts
index bfa6fe0..7fb2af2 100644
--- a/composables/useQualifiers.ts
+++ b/components/search/composables/useQualifiers.ts
@@ -1,4 +1,4 @@
-import type { QualifierData } from "~/types/search"
+import type { QualifierData } from "~/components/search/search"
 
 export const QUALIFIERS: QualifierData = {
   'repo:': { label: 'Repository (user/repo)', icon: 'octicon:repo-16' },
diff --git a/composables/useScrollLock.ts b/components/search/composables/useScrollLock.ts
similarity index 100%
rename from composables/useScrollLock.ts
rename to components/search/composables/useScrollLock.ts
diff --git a/components/search/composables/useSearchInput.ts b/components/search/composables/useSearchInput.ts
index 1882a4a..cf02972 100644
--- a/components/search/composables/useSearchInput.ts
+++ b/components/search/composables/useSearchInput.ts
@@ -1,171 +1,99 @@
-import { ref, computed } from 'vue'
-import type { SearchToken } from '../types'
-import { QUALIFIERS } from '../constants'
+import { ref, nextTick, onMounted, onUnmounted } from 'vue'
 
-export function useSearchInput() {
-  const searchInput = ref('')
+export function useSearchInput(onHandleFocus?: () => void) {
   const input = ref<HTMLInputElement | null>(null)
   const cursorPosition = ref(0)
-  const isInputFocused = ref(false)
-  const containerWidth = ref(0)
   const searchContainer = ref<HTMLDivElement | null>(null)
+  const containerWidth = ref(0)
+  const dropdownPosition = ref({ left: 0, top: 0 })
+  const isInputFocused = ref(false)
 
-  const colorText = (text: string) => {
-    const parts: { text: string; type: 'qualifier' | 'value' | 'normal' }[] = []
-    let currentPosition = 0
-
-    while (currentPosition < text.length) {
-      let matched = false
+  const updateCursorPosition = () => {
+    nextTick(() => {
+      if (input.value) {
+        const inputElement = input.value
+        cursorPosition.value = inputElement.selectionStart || 0
+        const container = inputElement.parentElement
 
-      // Buscar qualifiers
-      for (const qualifier of Object.keys(QUALIFIERS)) {
-        if (text.slice(currentPosition).toLowerCase().startsWith(qualifier.toLowerCase())) {
-          parts.push({
-            text: qualifier,
-            type: 'qualifier'
-          })
+        if (container) {
+          const measureElement = document.createElement('span')
+          measureElement.style.font = window.getComputedStyle(inputElement).font
+          measureElement.style.visibility = 'hidden'
+          measureElement.style.position = 'absolute'
+          measureElement.style.whiteSpace = 'pre'
+          measureElement.textContent = inputElement.value.substring(0, inputElement.selectionStart || 0)
+          document.body.appendChild(measureElement)
           
-          currentPosition += qualifier.length
+          const cursorOffset = measureElement.offsetWidth
+          const containerWidth = container.offsetWidth
+          const scrollLeft = container.scrollLeft
           
-          let valueStart = currentPosition
-          while (currentPosition < text.length && text[currentPosition] !== ' ') {
-            currentPosition++
+          document.body.removeChild(measureElement)
+
+          if (cursorOffset > scrollLeft + containerWidth - 80) {
+            container.scrollLeft = cursorOffset - containerWidth + 80
           }
-          
-          if (currentPosition > valueStart) {
-            parts.push({
-              text: text.slice(valueStart, currentPosition),
-              type: 'value'
-            })
+          else if (cursorOffset < scrollLeft + 80) {
+            container.scrollLeft = Math.max(0, cursorOffset - 80)
           }
-          
-          matched = true
-          break
         }
       }
+    })
+  }
 
-      if (!matched) {
-        let normalText = ''
-        while (currentPosition < text.length) {
-          let isQualifier = false
-          for (const qualifier of Object.keys(QUALIFIERS)) {
-            if (text.slice(currentPosition).toLowerCase().startsWith(qualifier.toLowerCase())) {
-              isQualifier = true
-              break
-            }
-          }
-          if (isQualifier) break
-          normalText += text[currentPosition]
-          currentPosition++
-        }
-        if (normalText) {
-          parts.push({
-            text: normalText,
-            type: 'normal'
-          })
-        }
-      }
+  const handleInputScroll = (event: Event) => {
+    const input = event.target as HTMLElement
+    const mirror = input.previousElementSibling as HTMLElement
+    if (mirror) {
+      mirror.scrollLeft = input.scrollLeft
     }
-
-    return parts
   }
 
-  const coloredParts = computed(() => colorText(searchInput.value))
-
-  const parseSearchTokens = (value: string): SearchToken[] => {
-    const tokens: SearchToken[] = []
-    let i = 0
-
-    while (i < value.length) {
-      let matchedQualifier = false
-      
-      for (const qualifier of Object.keys(QUALIFIERS)) {
-        if (value.slice(i).toLowerCase().startsWith(qualifier.toLowerCase())) {
-          let j = i + qualifier.length
-          let qualifierValue = ''
-          
-          while (j < value.length && value[j] !== ' ') {
-            qualifierValue += value[j]
-            j++
-          }
-
-          if (qualifierValue) {
-            tokens.push({
-              type: 'qualifier',
-              qualifier: qualifier.slice(0, -1),
-              value: qualifierValue
-            })
-          }
-
-          i = j
-          matchedQualifier = true
-          break
-        }
-      }
-
-      if (!matchedQualifier) {
-        if (value[i] === ' ') {
-          tokens.push({ type: 'space', value: ' ' })
-          i++
-        } else {
-          let textValue = ''
-          let start = i
-          
-          while (i < value.length) {
-            let isQualifier = false
-            for (const qualifier of Object.keys(QUALIFIERS)) {
-              if (value.slice(i).toLowerCase().startsWith(qualifier.toLowerCase())) {
-                isQualifier = true
-                break
-              }
-            }
-            if (isQualifier || value[i] === ' ') break
-            textValue += value[i]
-            i++
-          }
-          
-          if (textValue) {
-            tokens.push({ type: 'text', value: textValue })
-          }
-        }
-      }
+  const updateContainerWidth = () => {
+    if (searchContainer.value) {
+      containerWidth.value = searchContainer.value.offsetWidth
     }
+  }
 
-    return tokens
+  const updateDropdownPosition = () => {
+    if (searchContainer.value) {
+      containerWidth.value = searchContainer.value.offsetWidth
+    }
   }
 
-  const updateCursorPosition = () => {
-    if (input.value) {
-      const inputElement = input.value
-      cursorPosition.value = inputElement.selectionStart || 0
-      
-      // Usar el mismo contenedor que el input para medir
-      const container = document.createElement('div')
-      container.style.position = 'absolute'
-      container.style.top = '0'
-      container.style.left = '0'
-      container.style.visibility = 'hidden'
-      container.style.whiteSpace = 'pre'
-      container.style.font = window.getComputedStyle(inputElement).font
-      
-      // Medir solo hasta la posición del cursor
-      container.textContent = inputElement.value.substring(0, inputElement.selectionStart || 0)
-      
-      document.body.appendChild(container)
-      cursorPosition.value = container.offsetWidth
-      document.body.removeChild(container)
+  const handleGlobalShortcut = (event: KeyboardEvent) => {
+    if (event.key === '/' && !['INPUT', 'TEXTAREA'].includes((event.target as HTMLElement).tagName)) {
+      event.preventDefault()
+      isInputFocused.value = true
+      onHandleFocus?.()
+      nextTick(() => {
+        input.value?.focus()
+      })
     }
   }
 
+  onMounted(() => {
+    updateContainerWidth()
+    window.addEventListener('resize', updateContainerWidth)
+    window.addEventListener('keydown', handleGlobalShortcut)
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', updateContainerWidth)
+    window.removeEventListener('keydown', handleGlobalShortcut)
+  })
+
   return {
-    searchInput,
     input,
     cursorPosition,
-    isInputFocused,
     searchContainer,
     containerWidth,
-    coloredParts,
-    parseSearchTokens,
-    updateCursorPosition
+    dropdownPosition,
+    isInputFocused,
+    updateCursorPosition,
+    handleInputScroll,
+    updateContainerWidth,
+    updateDropdownPosition,
+    handleGlobalShortcut
   }
 }
diff --git a/composables/useSearchInteractions.ts b/components/search/composables/useSearchInteractions.ts
similarity index 98%
rename from composables/useSearchInteractions.ts
rename to components/search/composables/useSearchInteractions.ts
index 787271d..77cab63 100644
--- a/composables/useSearchInteractions.ts
+++ b/components/search/composables/useSearchInteractions.ts
@@ -1,5 +1,5 @@
 import { ref, computed, nextTick } from 'vue'
-import type { SearchToken } from '../types/search'
+import type { SearchToken } from '../search'
 import { useSearchParser } from './useSearchParser'
 
 export function useSearchInteractions(
diff --git a/composables/useSearchParser.ts b/components/search/composables/useSearchParser.ts
similarity index 97%
rename from composables/useSearchParser.ts
rename to components/search/composables/useSearchParser.ts
index 677e3ee..b37bb5b 100644
--- a/composables/useSearchParser.ts
+++ b/components/search/composables/useSearchParser.ts
@@ -1,4 +1,4 @@
-import type { ColoredPart, SearchToken } from '~/types/search'
+import type { ColoredPart, SearchToken } from '~/components/search/search'
 import { QUALIFIERS } from './useQualifiers'
 
 export function useSearchParser() {
diff --git a/components/search/composables/useSearchShortcuts.ts b/components/search/composables/useSearchShortcuts.ts
deleted file mode 100644
index 43d3f0a..0000000
--- a/components/search/composables/useSearchShortcuts.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { onMounted, onUnmounted } from 'vue'
-
-export function useSearchShortcuts(
-  handleFocus: () => void,
-  input: () => HTMLInputElement | null
-) {
-  const handleGlobalShortcut = (event: KeyboardEvent) => {
-    if (
-      event.key === '/' && 
-      !['INPUT', 'TEXTAREA'].includes((event.target as HTMLElement).tagName)
-    ) {
-      event.preventDefault()
-      handleFocus()
-    }
-  }
-
-  onMounted(() => {
-    window.addEventListener('keydown', handleGlobalShortcut)
-  })
-
-  onUnmounted(() => {
-    window.removeEventListener('keydown', handleGlobalShortcut)
-  })
-
-  return {
-    handleGlobalShortcut
-  }
-}
diff --git a/components/search/composables/useSearchSuggestions.ts b/components/search/composables/useSearchSuggestions.ts
deleted file mode 100644
index 9eb71c9..0000000
--- a/components/search/composables/useSearchSuggestions.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { ref, computed } from 'vue'
-import type { SearchToken, QualifierSuggestion } from '../types'
-import { QUALIFIERS } from '../constants'
-
-export function useSearchSuggestions(
-  searchTokens: () => SearchToken[],
-  getCurrentInput: () => string
-) {
-  const showSuggestions = ref(false)
-
-  const suggestions = computed<QualifierSuggestion[]>(() => {
-    const usedQualifiers = searchTokens()
-      .filter(token => token.type === 'qualifier')
-      .map(token => ({
-        qualifier: token.qualifier + ':',
-        value: token.value
-      }))
-
-    return Object.keys(QUALIFIERS).map(qualifier => ({
-      qualifier,
-      isUsed: usedQualifiers.some(used => used.qualifier === qualifier),
-      value: usedQualifiers.find(used => used.qualifier === qualifier)?.value
-    }))
-  })
-
-  const handleSuggestionSelect = (qualifier: string) => {
-    return qualifier.endsWith(':') ? qualifier : `${qualifier}:`
-  }
-
-  const handleSuggestionRemove = (qualifier: string, value: string) => {
-    const currentInput = getCurrentInput()
-    const fullQualifier = qualifier.endsWith(':') ? qualifier : `${qualifier}:`
-    const pattern = new RegExp(`${fullQualifier}\\s*${value}\\s*`, 'i')
-    return currentInput.replace(pattern, '').trim()
-  }
-
-  return {
-    showSuggestions,
-    suggestions,
-    handleSuggestionSelect,
-    handleSuggestionRemove
-  }
-}
diff --git a/components/search/constants.ts b/components/search/constants.ts
deleted file mode 100644
index 5ce7de2..0000000
--- a/components/search/constants.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export const QUALIFIERS = {
-  'repo:': { label: 'Repository (user/repo)', icon: 'octicon:repo-16' },
-  'user:': { label: 'User', icon: 'octicon:person-16' },
-  'org:': { label: 'Organization', icon: 'octicon:organization-16' },
-  'in:': { label: 'Search in', icon: 'octicon:search-16' },
-  'size:': { label: 'Size', icon: 'octicon:file-16' },
-  'stars:': { label: 'Stars', icon: 'octicon:star-16' },
-  'language:': { label: 'Language', icon: 'octicon:code-16' },
-  'created:': { label: 'Created date', icon: 'octicon:calendar-16' },
-  'pushed:': { label: 'Push date', icon: 'octicon:git-commit-16' },
-  'topic:': { label: 'Topic', icon: 'octicon:hash-16' },
-  'is:': { label: 'State', icon: 'octicon:circle-16' },
-  'fork:': { label: 'Fork', icon: 'octicon:repo-forked-16' },
-} as const
diff --git a/types/search.ts b/components/search/search.ts
similarity index 100%
rename from types/search.ts
rename to components/search/search.ts
diff --git a/components/search/types.ts b/components/search/types.ts
deleted file mode 100644
index 48c5150..0000000
--- a/components/search/types.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-export interface SearchToken {
-  type: 'qualifier' | 'text' | 'space'
-  value: string
-  qualifier?: string
-}
-
-export interface Qualifier {
-  label: string
-  icon: string
-}
-
-export interface QualifierSuggestion {
-  qualifier: string
-  isUsed: boolean
-  value?: string
-}
-
-export type SearchMode = 'inline' | 'modal'
diff --git a/composables/useSearchInput.ts b/composables/useSearchInput.ts
deleted file mode 100644
index cf02972..0000000
--- a/composables/useSearchInput.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-import { ref, nextTick, onMounted, onUnmounted } from 'vue'
-
-export function useSearchInput(onHandleFocus?: () => void) {
-  const input = ref<HTMLInputElement | null>(null)
-  const cursorPosition = ref(0)
-  const searchContainer = ref<HTMLDivElement | null>(null)
-  const containerWidth = ref(0)
-  const dropdownPosition = ref({ left: 0, top: 0 })
-  const isInputFocused = ref(false)
-
-  const updateCursorPosition = () => {
-    nextTick(() => {
-      if (input.value) {
-        const inputElement = input.value
-        cursorPosition.value = inputElement.selectionStart || 0
-        const container = inputElement.parentElement
-
-        if (container) {
-          const measureElement = document.createElement('span')
-          measureElement.style.font = window.getComputedStyle(inputElement).font
-          measureElement.style.visibility = 'hidden'
-          measureElement.style.position = 'absolute'
-          measureElement.style.whiteSpace = 'pre'
-          measureElement.textContent = inputElement.value.substring(0, inputElement.selectionStart || 0)
-          document.body.appendChild(measureElement)
-          
-          const cursorOffset = measureElement.offsetWidth
-          const containerWidth = container.offsetWidth
-          const scrollLeft = container.scrollLeft
-          
-          document.body.removeChild(measureElement)
-
-          if (cursorOffset > scrollLeft + containerWidth - 80) {
-            container.scrollLeft = cursorOffset - containerWidth + 80
-          }
-          else if (cursorOffset < scrollLeft + 80) {
-            container.scrollLeft = Math.max(0, cursorOffset - 80)
-          }
-        }
-      }
-    })
-  }
-
-  const handleInputScroll = (event: Event) => {
-    const input = event.target as HTMLElement
-    const mirror = input.previousElementSibling as HTMLElement
-    if (mirror) {
-      mirror.scrollLeft = input.scrollLeft
-    }
-  }
-
-  const updateContainerWidth = () => {
-    if (searchContainer.value) {
-      containerWidth.value = searchContainer.value.offsetWidth
-    }
-  }
-
-  const updateDropdownPosition = () => {
-    if (searchContainer.value) {
-      containerWidth.value = searchContainer.value.offsetWidth
-    }
-  }
-
-  const handleGlobalShortcut = (event: KeyboardEvent) => {
-    if (event.key === '/' && !['INPUT', 'TEXTAREA'].includes((event.target as HTMLElement).tagName)) {
-      event.preventDefault()
-      isInputFocused.value = true
-      onHandleFocus?.()
-      nextTick(() => {
-        input.value?.focus()
-      })
-    }
-  }
-
-  onMounted(() => {
-    updateContainerWidth()
-    window.addEventListener('resize', updateContainerWidth)
-    window.addEventListener('keydown', handleGlobalShortcut)
-  })
-
-  onUnmounted(() => {
-    window.removeEventListener('resize', updateContainerWidth)
-    window.removeEventListener('keydown', handleGlobalShortcut)
-  })
-
-  return {
-    input,
-    cursorPosition,
-    searchContainer,
-    containerWidth,
-    dropdownPosition,
-    isInputFocused,
-    updateCursorPosition,
-    handleInputScroll,
-    updateContainerWidth,
-    updateDropdownPosition,
-    handleGlobalShortcut
-  }
-}
diff --git a/pages/index.vue b/pages/index.vue
index 3cda3e0..2a9c199 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -10,7 +10,7 @@ import {
   SelectValue,
 } from '#components'
 import { OrderOptions, SortOptions } from '~/types'
-import SearchInput from '~/components/SearchInput.vue'
+import SearchInput from '~/components/search/SearchInput.vue'
 
 // Agregar meta tags dinámicos
 useSeoMeta({

From 63dbb190d739f83d0edf1aba713d58ec71c2b545 Mon Sep 17 00:00:00 2001
From: Sean Luis <seanluis47@gmail.com>
Date: Sat, 22 Feb 2025 17:20:45 -0300
Subject: [PATCH 06/11] feat: update search input styles for full-width display
 and improved responsiveness

---
 components/search/SearchInput.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/search/SearchInput.vue b/components/search/SearchInput.vue
index 291903d..fbc4e22 100644
--- a/components/search/SearchInput.vue
+++ b/components/search/SearchInput.vue
@@ -658,13 +658,13 @@ watch(() => props.modelValue, (newValue) => {
 }
 
 .search-input {
-  width: 90%;
+  width: 100%;
   background: transparent;
   outline: none;
   position: relative;
   white-space: pre;
   padding: 2px 0;
-  min-width: 90%;
+  min-width: 100%;
   color: transparent;
   caret-color: currentColor;
 }

From a1a59062270359c727ea7d165487990b5fc36789 Mon Sep 17 00:00:00 2001
From: Sean Luis <seanluis47@gmail.com>
Date: Sun, 23 Feb 2025 16:02:19 -0300
Subject: [PATCH 07/11] feat: implement search text highlighting and improve
 input handling

---
 components/search/SearchInput.vue             | 154 ++++++++++++++----
 .../composables/useSearchHighlighter.ts       |  27 +++
 .../search/composables/useSearchParser.ts     |  73 +++++----
 pages/index.vue                               |   4 +-
 4 files changed, 190 insertions(+), 68 deletions(-)
 create mode 100644 components/search/composables/useSearchHighlighter.ts

diff --git a/components/search/SearchInput.vue b/components/search/SearchInput.vue
index fbc4e22..6920c71 100644
--- a/components/search/SearchInput.vue
+++ b/components/search/SearchInput.vue
@@ -5,6 +5,7 @@ import { useSearchParser } from './composables/useSearchParser'
 import { useScrollLock } from './composables/useScrollLock'
 import { useSearchInput } from './composables/useSearchInput'
 import { useSearchInteractions } from './composables/useSearchInteractions'
+import { useSearchHighlighter } from './composables/useSearchHighlighter'  // Nuevo: importar highlighter
 
 const props = defineProps<{
   modelValue: string
@@ -63,8 +64,11 @@ const {
   removeQualifier
 } = searchInteractions
 
-// 4. Finalmente las computed properties que dependen de todo lo anterior
-const coloredParts = computed(() => colorText(searchValue.value))
+// Nuevo: usar el highlighter que devuelve un string HTML
+const { highlightText } = useSearchHighlighter()
+const highlightedHTML = computed(() => highlightText(searchValue.value))
+
+// Nuevo: agregar computed property 'suggestions'
 const suggestions = computed(() => {
   const usedQualifiers = searchTokens.value
     .filter(token => token.type === 'qualifier')
@@ -72,7 +76,6 @@ const suggestions = computed(() => {
       qualifier: token.qualifier + ':',
       value: token.value
     }))
-
   return Object.keys(QUALIFIERS).map(qualifier => ({
     qualifier,
     isUsed: usedQualifiers.some(used => used.qualifier === qualifier),
@@ -80,6 +83,9 @@ const suggestions = computed(() => {
   }))
 })
 
+// Eliminar o comentar el uso anterior de coloredParts
+// const coloredParts = computed(() => colorText(searchValue.value))
+
 // Watchers
 watch(() => props.modelValue, (newValue) => {
   if (newValue !== searchValue.value) {
@@ -111,25 +117,16 @@ watch(() => props.modelValue, (newValue) => {
         
         <!-- Simplificar el contenedor del input -->
         <div class="relative flex-1">
-          <!-- Colored preview -->
+          <!-- Nuevo: colored preview usando v-html -->
           <div 
             aria-hidden="true"
             class="search-input-mirror absolute inset-0 pointer-events-none flex items-center overflow-hidden"
           >
-            <template v-for="(part, index) in coloredParts" :key="index">
-              <span 
-                v-if="part.type === 'value'" 
-                class="search-badge"
-              >{{ part.text }}</span>
-              <span
-                v-else
-                :class="{
-                  'text-primary font-medium': part.type === 'qualifier',
-                }"
-              >{{ part.text }}</span>
-            </template>
-            <!-- Agregar el cursor aquí también -->
-            <span v-if="isInputFocused" class="typing-cursor"></span>
+            <span v-html="highlightedHTML"></span>
+            <span 
+              v-if="isInputFocused && searchValue" 
+              class="typing-cursor"
+            ></span>
           </div>
 
           <input
@@ -141,7 +138,7 @@ watch(() => props.modelValue, (newValue) => {
               'has-content': searchValue,
               'text-transparent': searchValue
             }"
-            placeholder="Search repositories..."
+            placeholder="Press / to search repositories..."
             @input="handleInput"
             @keydown="handleKeyDown"
             @focus="handleFocus"
@@ -230,20 +227,12 @@ watch(() => props.modelValue, (newValue) => {
               />
               
               <div class="relative flex-1">
-                <!-- Colored preview and cursor -->
+                <!-- Nuevo: Use v-html for highlighted HTML instead of coloredParts -->
                 <div 
                   aria-hidden="true"
                   class="search-input-mirror absolute inset-0 pointer-events-none flex items-center whitespace-pre overflow-x-auto"
                 >
-                  <template v-for="(part, index) in coloredParts" :key="index">
-                    <span v-if="part.type === 'value'" class="search-badge whitespace-pre">{{ part.text }}</span>
-                    <span
-                      v-else
-                      :class="{
-                        'text-primary font-medium whitespace-pre': part.type === 'qualifier',
-                      }"
-                    >{{ part.text }}</span>
-                  </template>
+                  <span v-html="highlightedHTML"></span>
                   <span v-if="isInputFocused" class="typing-cursor"></span>
                 </div>
 
@@ -253,7 +242,7 @@ watch(() => props.modelValue, (newValue) => {
                   type="text"
                   class="search-input w-full bg-transparent outline-none relative"
                   :class="{ 'text-transparent': searchValue }"
-                  placeholder="Search repositories..."
+                  placeholder="Press / to search repositories..."
                   @input="handleInput"
                   @keydown="handleKeyDown"
                   @scroll="handleInputScroll"
@@ -353,6 +342,42 @@ watch(() => props.modelValue, (newValue) => {
   -webkit-text-fill-color: currentColor;
 }
 
+.typing-cursor {
+  display: inline-block;
+  width: 1px; /* Más fino */
+  height: 1.25em;
+  background-color: currentColor;
+  margin-left: 1px;
+  animation: blink 1s step-end infinite;
+  position: relative;
+  opacity: 0.8; /* Más sutil */
+  top: 1px;
+}
+
+/* Ajustar la animación para que sea más suave */
+@keyframes blink {
+  0%, 100% {
+    opacity: 0.8;
+  }
+  50% {
+    opacity: 0;
+  }
+}
+
+/* Asegurar que el caret del input nativo esté oculto */
+.search-input {
+  caret-color: transparent !important;
+}
+
+/* Solo mostrar el caret personalizado cuando el input está enfocado */
+.search-input:focus + .typing-cursor {
+  display: block;
+}
+
+.search-input:not(:focus) + .typing-cursor {
+  display: none;
+}
+
 .typing-cursor {
   display: inline-block;
   width: 2px;
@@ -876,4 +901,73 @@ watch(() => props.modelValue, (newValue) => {
   -webkit-text-fill-color: initial;
   color: hsl(var(--muted-foreground));
 }
+
+/* Nuevos estilos para el resaltado */
+:deep(.search-token-qualifier) {
+  color: #0969da;
+  font-weight: 500;
+  white-space: pre;
+}
+
+:deep(.search-token-value) {
+  display: inline-flex;
+  align-items: center;
+  background-color: #ddf4ff;
+  color: #0969da;
+  border-radius: 3px;
+  padding: 0 4px;
+  margin: 0 1px;
+  font-weight: 500;
+  white-space: pre;
+}
+
+:deep(.search-token-text) {
+  color: currentColor;
+  white-space: pre;
+}
+
+/* Dark mode */
+:root[class~="dark"] :deep(.search-token-qualifier),
+:root[class~="dark"] :deep(.search-token-value) {
+  color: #2f81f7;
+}
+
+:root[class~="dark"] :deep(.search-token-value) {
+  background-color: #1a384d;
+}
+
+/* Asegurar que el texto del input sea transparente cuando tiene contenido */
+.search-input.has-content {
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+}
+
+/* Asegurar que el input mantenga el texto transparente */
+.search-input {
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+  caret-color: currentColor;
+}
+
+.search-input::placeholder {
+  -webkit-text-fill-color: var(--tw-text-opacity, 1);
+  color: hsl(var(--muted-foreground));
+}
+
+/* Ajustar el contenedor del mirror */
+.search-input-mirror {
+  white-space: pre;
+  overflow-x: hidden;
+}
+
+/* Actualizar los estilos del input para controlar la visibilidad del caret */
+.search-input {
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+  caret-color: transparent; /* Ocultar caret por defecto */
+}
+
+.search-input:focus {
+  caret-color: currentColor; /* Mostrar caret solo cuando está enfocado */
+}
 </style>
diff --git a/components/search/composables/useSearchHighlighter.ts b/components/search/composables/useSearchHighlighter.ts
new file mode 100644
index 0000000..8f5e979
--- /dev/null
+++ b/components/search/composables/useSearchHighlighter.ts
@@ -0,0 +1,27 @@
+import { useSearchParser } from './useSearchParser'
+
+export function useSearchHighlighter() {
+  const { parseSearchTokens } = useSearchParser()
+
+  const highlightText = (text: string): string => {
+    if (!text) return ''
+    
+    const tokens = parseSearchTokens(text)
+    return tokens.map(token => {
+      switch (token.type) {
+        case 'qualifier':
+          // Ahora el qualifier se muestra como texto normal
+          return `<span class="search-token-text">${token.qualifier}:</span>` + 
+                 (token.value ? `<span class="search-token-value">${token.value}</span>` : '')
+        case 'text':
+          return `<span class="search-token-text">${token.value}</span>`
+        case 'space':
+          return '<span class="search-token-space"> </span>'
+        default:
+          return token.value
+      }
+    }).join('')
+  }
+
+  return { highlightText }
+}
diff --git a/components/search/composables/useSearchParser.ts b/components/search/composables/useSearchParser.ts
index b37bb5b..ddb58c5 100644
--- a/components/search/composables/useSearchParser.ts
+++ b/components/search/composables/useSearchParser.ts
@@ -5,54 +5,55 @@ export function useSearchParser() {
   const parseSearchTokens = (value: string): SearchToken[] => {
     const tokens: SearchToken[] = []
     let i = 0
-
+    
     while (i < value.length) {
-      let matchedQualifier = false
+      // Check for qualifiers
+      const qualifierMatch = Object.keys(QUALIFIERS).find(q => 
+        value.slice(i).toLowerCase().startsWith(q.toLowerCase())
+      )
       
-      for (const qualifier of Object.keys(QUALIFIERS)) {
-        if (value.slice(i).toLowerCase().startsWith(qualifier.toLowerCase())) {
-          let j = i + qualifier.length
-          let qualifierValue = ''
-          
-          while (j < value.length && value[j] !== ' ') {
-            qualifierValue += value[j]
-            j++
-          }
-
-          if (qualifierValue) {
-            tokens.push({
-              type: 'qualifier',
-              qualifier: qualifier.slice(0, -1),
-              value: qualifierValue
-            })
-          }
-
-          i = j
-          matchedQualifier = true
-          break
+      if (qualifierMatch) {
+        // Move past the qualifier
+        i += qualifierMatch.length
+        
+        // Collect the value after the qualifier
+        let qualifierValue = ''
+        while (i < value.length && value[i] !== ' ') {
+          qualifierValue += value[i]
+          i++
         }
-      }
-
-      if (!matchedQualifier) {
+        
+        tokens.push({
+          type: 'qualifier',
+          qualifier: qualifierMatch.slice(0, -1), // Remove trailing colon
+          value: qualifierValue
+        })
+        
+        // Add space if there is one
+        if (i < value.length && value[i] === ' ') {
+          tokens.push({ type: 'space', value: ' ' })
+          i++
+        }
+      } else {
+        // Handle regular text
         if (value[i] === ' ') {
           tokens.push({ type: 'space', value: ' ' })
+          i++
         } else {
-          let textValue = ''
-          while (i < value.length && !Object.keys(QUALIFIERS).some(q => 
-            value.slice(i).toLowerCase().startsWith(q.toLowerCase())
-          ) && value[i] !== ' ') {
-            textValue += value[i]
+          let text = ''
+          while (i < value.length && 
+                 !Object.keys(QUALIFIERS).some(q => value.slice(i).toLowerCase().startsWith(q.toLowerCase())) && 
+                 value[i] !== ' ') {
+            text += value[i]
             i++
           }
-          if (textValue) {
-            tokens.push({ type: 'text', value: textValue })
+          if (text) {
+            tokens.push({ type: 'text', value: text })
           }
-          continue
         }
       }
-      i++
     }
-
+    
     return tokens
   }
 
diff --git a/pages/index.vue b/pages/index.vue
index 2a9c199..6a7a203 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -171,14 +171,14 @@ const clearFilter = (key: keyof Filters) => {
             <div class="relative flex-1">
               <SearchInput
                 v-model="searchQuery"
-                mode="modal"
+                mode="inline"
                 @search="onSearch"
               />
             </div>
 
             <div class="flex gap-2 shrink-0">
               <Select v-model:model-value="selectedLanguage">
-                <SelectTrigger class="w-[180px]"> <!-- Ancho fijo para el trigger -->
+                <SelectTrigger class="w-[180px]">
                   <SelectValue :placeholder="selectedLanguage || 'Select Language'" />
                 </SelectTrigger>
                 <SelectContent>

From ef30ba3e0b633ef6cde0e0802686241d98e723b3 Mon Sep 17 00:00:00 2001
From: Sean Luis <seanluis47@gmail.com>
Date: Sun, 23 Feb 2025 18:04:07 -0300
Subject: [PATCH 08/11] feat: migrate dialog components to use reka-ui and add
 command components

---
 assets/css/tailwind.css                       |  88 +-
 components.json                               |  12 +-
 components/search/SearchInput.vue             | 888 ++----------------
 components/search/SearchInputField.vue        | 134 +++
 components/search/SearchSuggestions.vue       | 142 +++
 .../search/composables/useSearchInput.ts      |  28 +-
 .../composables/useSearchInteractions.ts      |  56 +-
 components/search/types.ts                    |  17 +
 components/ui/command/Command.vue             |  92 ++
 components/ui/command/CommandDialog.vue       |  21 +
 components/ui/command/CommandEmpty.vue        |  25 +
 components/ui/command/CommandGroup.vue        |  46 +
 components/ui/command/CommandInput.vue        |  37 +
 components/ui/command/CommandItem.vue         |  78 ++
 components/ui/command/CommandList.vue         |  24 +
 components/ui/command/CommandSeparator.vue    |  23 +
 components/ui/command/CommandShortcut.vue     |  14 +
 components/ui/command/index.ts                |  25 +
 components/ui/dialog/Dialog.vue               |   2 +-
 components/ui/dialog/DialogClose.vue          |   2 +-
 components/ui/dialog/DialogContent.vue        |   8 +-
 components/ui/dialog/DialogDescription.vue    |   2 +-
 components/ui/dialog/DialogScrollContent.vue  |   8 +-
 components/ui/dialog/DialogTitle.vue          |   2 +-
 components/ui/dialog/DialogTrigger.vue        |   2 +-
 lib/utils.ts                                  |   9 +
 package.json                                  |   3 +
 pnpm-lock.yaml                                |  57 ++
 tailwind.config.ts                            | 203 ++--
 29 files changed, 1076 insertions(+), 972 deletions(-)
 create mode 100644 components/search/SearchInputField.vue
 create mode 100644 components/search/SearchSuggestions.vue
 create mode 100644 components/search/types.ts
 create mode 100644 components/ui/command/Command.vue
 create mode 100644 components/ui/command/CommandDialog.vue
 create mode 100644 components/ui/command/CommandEmpty.vue
 create mode 100644 components/ui/command/CommandGroup.vue
 create mode 100644 components/ui/command/CommandInput.vue
 create mode 100644 components/ui/command/CommandItem.vue
 create mode 100644 components/ui/command/CommandList.vue
 create mode 100644 components/ui/command/CommandSeparator.vue
 create mode 100644 components/ui/command/CommandShortcut.vue
 create mode 100644 components/ui/command/index.ts

diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index 56a69d9..d306130 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -5,68 +5,88 @@
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
+    --foreground: 0 0% 3.9%;
 
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
 
     --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
+    --popover-foreground: 0 0% 3.9%;
 
     --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
+    --card-foreground: 0 0% 3.9%;
 
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
 
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
 
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
 
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
 
     --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
+    --destructive-foreground: 0 0% 98%;
 
-    --ring: 222.2 84% 4.9%;
+    --ring: 0 0% 3.9%;
 
     --radius: 0.5rem;
+
+    --chart-1: 12 76% 61%;
+
+    --chart-2: 173 58% 39%;
+
+    --chart-3: 197 37% 24%;
+
+    --chart-4: 43 74% 66%;
+
+    --chart-5: 27 87% 67%;
   }
 
   .dark {
-    --background: 224 71% 4%;
-    --foreground: 213 31% 91%;
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
 
-    --muted: 223 47% 11%;
-    --muted-foreground: 215.4 16.3% 70%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
 
-    --popover: 224 71% 4%;
-    --popover-foreground: 215 20.2% 91%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
 
-    --card: 224 71% 4%;
-    --card-foreground: 213 31% 91%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
 
-    --border: 216 34% 17%;
-    --input: 216 34% 17%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
 
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 1.2%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
 
-    --secondary: 222 47% 11%;
-    --secondary-foreground: 210 40% 98%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
 
-    --accent: 216 34% 17%;
-    --accent-foreground: 210 40% 98%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
 
-    --destructive: 0 63% 31%;
-    --destructive-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
 
-    --ring: 216 34% 17%;
+    --ring: 0 0% 83.1%;
 
     --radius: 0.5rem;
+
+    --chart-1: 220 70% 50%;
+
+    --chart-2: 160 60% 45%;
+
+    --chart-3: 30 80% 55%;
+
+    --chart-4: 280 65% 60%;
+
+    --chart-5: 340 75% 55%;
   }
 }
 
diff --git a/components.json b/components.json
index 2ffe2f3..487cb42 100644
--- a/components.json
+++ b/components.json
@@ -2,17 +2,19 @@
   "$schema": "https://shadcn-vue.com/schema.json",
   "style": "new-york",
   "typescript": true,
-  "tsConfigPath": ".nuxt/tsconfig.json",
   "tailwind": {
     "config": "tailwind.config.ts",
     "css": "assets/css/tailwind.css",
-    "baseColor": "slate",
+    "baseColor": "neutral",
     "cssVariables": true,
     "prefix": ""
   },
-  "framework": "nuxt",
   "aliases": {
     "components": "@/components",
-    "utils": "@/lib/utils"
-  }
+    "composables": "@/composables",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib"
+  },
+  "iconLibrary": "lucide"
 }
\ No newline at end of file
diff --git a/components/search/SearchInput.vue b/components/search/SearchInput.vue
index 6920c71..cff4a8d 100644
--- a/components/search/SearchInput.vue
+++ b/components/search/SearchInput.vue
@@ -5,7 +5,10 @@ import { useSearchParser } from './composables/useSearchParser'
 import { useScrollLock } from './composables/useScrollLock'
 import { useSearchInput } from './composables/useSearchInput'
 import { useSearchInteractions } from './composables/useSearchInteractions'
-import { useSearchHighlighter } from './composables/useSearchHighlighter'  // Nuevo: importar highlighter
+import { useSearchHighlighter } from './composables/useSearchHighlighter'
+
+import SearchInputField from './SearchInputField.vue'
+import SearchSuggestions from './SearchSuggestions.vue'
 
 const props = defineProps<{
   modelValue: string
@@ -17,20 +20,14 @@ const emit = defineEmits<{
   (e: 'search'): void
 }>()
 
-// 1. Primero inicializamos los composables base
 const { QUALIFIERS } = useQualifiers()
-const { parseSearchTokens, colorText } = useSearchParser()
+const { parseSearchTokens } = useSearchParser()
 const { lockScroll, unlockScroll } = useScrollLock()
 
-// 1. Crear una función handleFocus que usaremos más tarde
 const handleFocusWrapper = () => {
   searchInteractions.handleFocus()
 }
-
-// 2. Inicializar useSearchInput primero, pasando la función wrapper
 const searchInput = useSearchInput(handleFocusWrapper)
-
-// 3. Inicializar useSearchInteractions después
 const searchInteractions = useSearchInteractions(
   props,
   emit,
@@ -40,7 +37,6 @@ const searchInteractions = useSearchInteractions(
   unlockScroll
 )
 
-// 4. Desestructurar los valores que necesitamos de ambos composables
 const {
   input,
   cursorPosition,
@@ -64,11 +60,9 @@ const {
   removeQualifier
 } = searchInteractions
 
-// Nuevo: usar el highlighter que devuelve un string HTML
 const { highlightText } = useSearchHighlighter()
 const highlightedHTML = computed(() => highlightText(searchValue.value))
 
-// Nuevo: agregar computed property 'suggestions'
 const suggestions = computed(() => {
   const usedQualifiers = searchTokens.value
     .filter(token => token.type === 'qualifier')
@@ -83,209 +77,66 @@ const suggestions = computed(() => {
   }))
 })
 
-// Eliminar o comentar el uso anterior de coloredParts
-// const coloredParts = computed(() => colorText(searchValue.value))
-
-// Watchers
 watch(() => props.modelValue, (newValue) => {
   if (newValue !== searchValue.value) {
     searchValue.value = newValue
   }
 })
+
+const inputProps = computed(() => ({
+  searchValue: searchValue.value || '',
+  highlightedHTML: highlightText(searchValue.value || ''),
+  handleInput,
+  handleFocus,
+  handleBlur,
+  handleKeyDown,
+  handleInputScroll,
+  input
+}))
 </script>
 
 <template>
   <div class="relative w-full">
-    <!-- Normal search input -->
-    <div 
-      ref="searchContainer"
-      class="relative w-full cursor-pointer"
-      :class="{ 'search-active': isExpanded }"
-      @click="handleFocus" 
-    >
-      <div 
-        class="h-9 relative flex items-center w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background transition-all duration-200"
-        :class="{ 
-          'ring-2 ring-ring ring-offset-2': showSuggestions,
-          'search-input-expanded': isExpanded 
-        }"
-      >
-        <Icon 
-          name="octicon:search-16"
-          class="mr-2 h-4 w-4 shrink-0 opacity-50"
-        />
-        
-        <!-- Simplificar el contenedor del input -->
-        <div class="relative flex-1">
-          <!-- Nuevo: colored preview usando v-html -->
-          <div 
-            aria-hidden="true"
-            class="search-input-mirror absolute inset-0 pointer-events-none flex items-center overflow-hidden"
-          >
-            <span v-html="highlightedHTML"></span>
-            <span 
-              v-if="isInputFocused && searchValue" 
-              class="typing-cursor"
-            ></span>
-          </div>
-
-          <input
-            ref="input"
-            :value="searchValue"
-            type="text"
-            class="search-input w-full relative"
-            :class="{ 
-              'has-content': searchValue,
-              'text-transparent': searchValue
-            }"
-            placeholder="Press / to search repositories..."
-            @input="handleInput"
-            @keydown="handleKeyDown"
-            @focus="handleFocus"
-            @blur="handleBlur"
-            @scroll="handleInputScroll"
-          />
-        </div>
-
-        <kbd 
-          v-if="!showSuggestions"
-          class="pointer-events-none hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex"
-        >
-          <span class="text-xs">/</span>
-        </kbd>
-      </div>
-
-      <!-- Inline suggestions dropdown -->
-      <div
-        v-if="isInlineMode && showSuggestions && suggestions?.length > 0"
-        class="suggestions-dropdown-inline"
-      >
-        <div class="px-2 py-1 text-xs text-muted-foreground font-medium">
-          Available filters
-        </div>
-        <div 
-          v-for="suggestion in suggestions"
-          :key="suggestion.qualifier"
-          class="suggestion-item"
-          :class="{ 'is-used': suggestion.isUsed }"
-          @mousedown.prevent="suggestion.isUsed ? 
-            removeQualifier(suggestion.qualifier, suggestion.value!) : 
-            handleSuggestionClick(suggestion.qualifier)"
-        >
-          <Icon 
-            :name="QUALIFIERS[suggestion.qualifier as keyof typeof QUALIFIERS].icon" 
-            class="h-3.5 w-3.5 opacity-50" 
-          />
-          <span class="suggestion-label text-xs">
-            {{ QUALIFIERS[suggestion.qualifier as keyof typeof QUALIFIERS].label }}
-          </span>
-          <div class="ml-auto flex items-center gap-2">
-            <span v-if="suggestion.isUsed" class="text-xs text-muted-foreground">
-              {{ suggestion.value }}
-            </span>
-            <span class="text-xs text-muted-foreground">
-              {{ suggestion.qualifier }}
-            </span>
-            <Icon 
-              v-if="suggestion.isUsed"
-              name="octicon:x-16"
-              class="h-3.5 w-3.5 opacity-50" 
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Modal overlay (solo se muestra en modo modal) -->
+    <SearchInputField v-bind="inputProps" />
+    
+    <!-- Inline suggestions -->
+    <SearchSuggestions
+      v-if="isInlineMode && showSuggestions && suggestions?.length > 0"
+      :suggestions="suggestions"
+      :QUALIFIERS="QUALIFIERS"
+      mode="inline"
+      :handleSuggestionClick="handleSuggestionClick"
+      :removeQualifier="removeQualifier"
+    />
+
+    <!-- Modal overlay -->
     <Transition name="search-overlay">
-      <div 
-        v-if="!isInlineMode && isExpanded" 
-        class="search-overlay"
-        @click.self="handleClose"
-      >
-        <div 
-          class="search-dialog"
-          @click.stop
-        >
+      <div v-if="!isInlineMode && isExpanded" 
+           class="search-overlay"
+           @click.self="handleClose">
+        <div class="search-dialog" @click.stop>
           <div class="search-dialog-content">
+            <!-- Header -->
             <div class="flex items-center justify-between mb-4">
               <h2 class="text-lg font-semibold">Search repositories</h2>
-              <button 
-                class="p-1 rounded-md hover:bg-accent"
-                type="button"
-                @click.stop="handleClose"
-              >
+              <button class="p-1 rounded-md hover:bg-accent" 
+                      type="button" 
+                      @click.stop="handleClose">
                 <Icon name="octicon:x-16" class="h-4 w-4" />
               </button>
             </div>
-            
-            <!-- Search input when expanded -->
-            <div class="relative flex items-center w-full rounded-md border border-input bg-background px-3 py-2 text-sm">
-              <Icon 
-                name="octicon:search-16"
-                class="mr-2 h-4 w-4 shrink-0 opacity-50"
-              />
-              
-              <div class="relative flex-1">
-                <!-- Nuevo: Use v-html for highlighted HTML instead of coloredParts -->
-                <div 
-                  aria-hidden="true"
-                  class="search-input-mirror absolute inset-0 pointer-events-none flex items-center whitespace-pre overflow-x-auto"
-                >
-                  <span v-html="highlightedHTML"></span>
-                  <span v-if="isInputFocused" class="typing-cursor"></span>
-                </div>
 
-                <input
-                  ref="input"
-                  :value="searchValue"
-                  type="text"
-                  class="search-input w-full bg-transparent outline-none relative"
-                  :class="{ 'text-transparent': searchValue }"
-                  placeholder="Press / to search repositories..."
-                  @input="handleInput"
-                  @keydown="handleKeyDown"
-                  @scroll="handleInputScroll"
-                />
-              </div>
-            </div>
+            <SearchInputField v-bind="inputProps" />
 
-            <!-- Suggestions in dialog -->
-            <div v-if="suggestions?.length > 0" class="mt-2">
-              <div class="px-2 mb-2 text-xs text-muted-foreground font-medium">
-                Available filters
-              </div>
-              <div 
-                v-for="suggestion in suggestions"
-                :key="suggestion.qualifier"
-                class="suggestion-item"
-                :class="{ 'is-used': suggestion.isUsed }"
-                @mousedown.prevent="suggestion.isUsed ? 
-                  removeQualifier(suggestion.qualifier, suggestion.value!) : 
-                  handleSuggestionClick(suggestion.qualifier)"
-              >
-                <Icon 
-                  :name="QUALIFIERS[suggestion.qualifier as keyof typeof QUALIFIERS].icon" 
-                  class="h-3.5 w-3.5 opacity-50" 
-                />
-                <span class="suggestion-label text-xs">
-                  {{ QUALIFIERS[suggestion.qualifier as keyof typeof QUALIFIERS].label }}
-                </span>
-                <div class="ml-auto flex items-center gap-2">
-                  <span v-if="suggestion.isUsed" class="text-xs text-muted-foreground">
-                    {{ suggestion.value }}
-                  </span>
-                  <span class="text-xs text-muted-foreground">
-                    {{ suggestion.qualifier }}
-                  </span>
-                  <Icon 
-                    v-if="suggestion.isUsed"
-                    name="octicon:x-16"
-                    class="h-3.5 w-3.5 opacity-50" 
-                  />
-                </div>
-              </div>
-            </div>
+            <!-- Modal suggestions -->
+            <SearchSuggestions
+              v-if="suggestions?.length > 0"
+              :suggestions="suggestions"
+              :QUALIFIERS="QUALIFIERS"
+              mode="modal"
+              :handleSuggestionClick="handleSuggestionClick"
+              :removeQualifier="removeQualifier"
+            />
           </div>
         </div>
       </div>
@@ -294,189 +145,7 @@ watch(() => props.modelValue, (newValue) => {
 </template>
 
 <style scoped>
-.suggestions-dropdown {
-  position: absolute;
-  top: calc(100% + 0.5rem);
-  left: 0;
-  right: 0;
-  background-color: hsl(var(--background));
-  border: 1px solid hsl(var(--border));
-  border-radius: 0.375rem;
-  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  z-index: 50;
-  padding: 0.5rem 0;
-}
-
-.suggestion-item {
-  padding: 0.5rem;
-  display: flex;
-  align-items: center;
-  gap: 0.625rem;
-  cursor: pointer;
-  border-radius: 0.375rem;
-  transition: background-color 0.2s ease;
-  font-size: 0.75rem;
-  line-height: 1rem;
-}
-
-.suggestion-item:hover {
-  background-color: hsl(var(--accent));
-}
-
-.suggestion-item.is-used {
-  background-color: hsl(var(--muted)/0.1);
-}
-
-.suggestion-item.is-used:hover {
-  background-color: hsl(var(--muted)/0.2);
-}
-
-.suggestion-label {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* ...rest of existing styles... */
-.text-transparent {
-  -webkit-text-fill-color: currentColor;
-}
-
-.typing-cursor {
-  display: inline-block;
-  width: 1px; /* Más fino */
-  height: 1.25em;
-  background-color: currentColor;
-  margin-left: 1px;
-  animation: blink 1s step-end infinite;
-  position: relative;
-  opacity: 0.8; /* Más sutil */
-  top: 1px;
-}
-
-/* Ajustar la animación para que sea más suave */
-@keyframes blink {
-  0%, 100% {
-    opacity: 0.8;
-  }
-  50% {
-    opacity: 0;
-  }
-}
-
-/* Asegurar que el caret del input nativo esté oculto */
-.search-input {
-  caret-color: transparent !important;
-}
-
-/* Solo mostrar el caret personalizado cuando el input está enfocado */
-.search-input:focus + .typing-cursor {
-  display: block;
-}
-
-.search-input:not(:focus) + .typing-cursor {
-  display: none;
-}
-
-.typing-cursor {
-  display: inline-block;
-  width: 2px;
-  height: 1.2em;
-  background-color: currentColor;
-  margin-left: 1px;
-  animation: blink 1s step-end infinite;
-  position: relative;
-  top: 1px;
-}
-
-@keyframes blink {
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0;
-  }
-}
-
-.search-badge {
-  display: inline-flex;
-  align-items: center;
-  background-color: #ddf4ff;
-  color: #0969da;
-  border-radius: .2rem;
-  padding: 0 0.5rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: 500;
-  margin: 0 1px;
-}
-
-:root[class~="dark"] .search-badge {
-  background-color: #1a384d;
-  color: #2f81f7;
-}
-
-.search-expanded {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 3.5rem; /* Match header height */
-  z-index: 50;
-  display: flex;
-  align-items: center;
-  background-color: hsl(var(--background));
-  border-bottom: 1px solid hsl(var(--border));
-  backdrop-filter: blur(8px);
-}
-
-.search-input-expanded {
-  max-width: 60rem;
-  margin: 0 auto;
-  width: 100%;
-  position: relative;
-}
-
-.suggestions-dropdown {
-  position: fixed;
-  top: 3.5rem; /* Position right below the header */
-  left: 50%;
-  transform: translateX(-50%);
-  width: 60rem !important;
-  max-width: calc(100vw - 2rem);
-  margin-top: 0;
-  background-color: hsl(var(--background));
-  border: 1px solid hsl(var(--border));
-  border-radius: 0.375rem;
-  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-}
-
-/* Ensure proper stacking */
-:root {
-  --search-z-index: 100; /* Increased to appear above header */
-}
-
-.search-expanded {
-  z-index: var(--search-z-index);
-}
-
-.suggestions-dropdown {
-  z-index: calc(var(--search-z-index) + 1);
-}
-
-/* Add backdrop blur for better visibility */
-.search-expanded {
-  background-color: hsl(var(--background)/95%);
-  backdrop-filter: blur(8px);
-}
-
-/* Add smooth transitions */
-.search-expanded,
-.search-input-expanded,
-.suggestions-dropdown {
-  transition: all 0.2s ease-out;
-}
-
+/* Modal and overlay styles */
 .search-overlay {
   position: fixed;
   inset: 0;
@@ -500,7 +169,8 @@ watch(() => props.modelValue, (newValue) => {
   border: 1px solid hsl(var(--border));
   border-radius: 0.75rem;
   padding: 1.5rem;
-  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 
+              0 8px 10px -6px rgb(0 0 0 / 0.1);
 }
 
 /* Transition animations */
@@ -514,460 +184,26 @@ watch(() => props.modelValue, (newValue) => {
   opacity: 0;
 }
 
-.search-overlay-enter-active .search-dialog,
-.search-overlay-leave-active .search-dialog {
-  transition: transform 0.15s ease-out;
-}
-
-.search-overlay-enter-from .search-dialog,
-.search-overlay-leave-to .search-dialog {
-  transform: translateY(-1rem);
-}
-
-/* Asegurar que el diálogo permanezca visible */
-.search-dialog {
-  transform: translateY(0);
-}
-
-.search-active {
-  @apply invisible;
-}
-
-.suggestions-dropdown-inline {
-  position: absolute;
-  top: calc(100% + 0.25rem);
-  left: 0;
-  right: 0;
-  background-color: hsl(var(--background));
-  border: 1px solid hsl(var(--border));
-  border-radius: 0.375rem;
-  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  z-index: 50;
-  padding: 0.5rem 0;
-  max-height: 16rem;
-  overflow-y: auto;
-}
-
-/* Asegurar que el input mantenga el texto visible */
-.text-transparent {
-  -webkit-text-fill-color: transparent;
-  color: transparent;
-  caret-color: currentColor; /* Mantener el cursor visible */
-}
-
-.search-input-mirror {
-  overflow-x: auto;
-  white-space: pre;
-  scrollbar-width: none; /* Firefox */
-  -ms-overflow-style: none; /* IE and Edge */
-}
-
-.search-input-mirror::-webkit-scrollbar {
-  display: none; /* Chrome, Safari and Opera */
-}
-
-.search-input {
-  white-space: pre;
-  overflow-x: auto;
-}
-
-/* Ajustar el estilo del texto transparente para mejor visibilidad */
-.text-transparent {
-  -webkit-text-fill-color: transparent;
-  color: transparent;
-}
-
-/* Asegurar que los badges mantengan su espacio */
-.search-badge {
-  flex-shrink: 0;
-  display: inline-flex;
-  white-space: pre;
-}
-
-/* Asegurar que el contenedor mantenga el scroll sincronizado */
-.relative.flex-1 {
-  overflow: hidden;
-}
-
-.search-wrapper {
-  position: relative;
-  overflow-x: auto;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-
-.search-wrapper::-webkit-scrollbar {
-  display: none;
-}
-
-.search-mirror {
-  position: absolute;
-  top: 0;
-  left: 0;
-  padding: inherit;
-  pointer-events: none;
-  visibility: visible;
-  white-space: pre;
-  display: flex;
-  align-items: center;
-}
-
-.search-input {
-  width: 100%;
-  background: transparent;
-  outline: none;
-  color: transparent;
-  caret-color: currentColor;
-  position: relative;
-  white-space: pre;
-  padding: inherit;
-}
-
-.search-input.has-content {
-  -webkit-text-fill-color: transparent;
-}
-
-.search-input::placeholder {
-  -webkit-text-fill-color: initial;
-  color: initial;
-}
-
-.search-badge {
-  display: inline-flex;
-  align-items: center;
-  background-color: #ddf4ff;
-  color: #0969da;
-  border-radius: .2rem;
-  padding: 0 0.5rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: 500;
-  margin: 0 1px;
-  white-space: pre;
-}
-
-:root[class~="dark"] .search-badge {
-  background-color: #1a384d;
-  color: #2f81f7;
-}
-
-.search-container {
-  position: relative;
-  min-width: 0;
-  width: 100%;
-}
-
-.search-content-wrapper {
-  position: relative;
-  width: 100%;
-  overflow-x: auto;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
+/* ...other modal transition styles... */
 
-.search-content-wrapper::-webkit-scrollbar {
-  display: none;
-}
-
-.search-mirror {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  pointer-events: none;
-  white-space: pre;
-  padding: 2px 0;
-  min-width: min-content;
-  display: flex;
-  align-items: center;
-}
-
-.search-input {
-  width: 100%;
-  background: transparent;
-  outline: none;
-  position: relative;
-  white-space: pre;
-  padding: 2px 0;
-  min-width: 100%;
-  color: transparent;
-  caret-color: currentColor;
-}
-
-.search-input::placeholder {
-  color: hsl(var(--muted-foreground));
-  -webkit-text-fill-color: initial;
-}
-
-.search-badge {
-  display: inline-flex;
-  align-items: center;
-  background-color: #ddf4ff;
-  color: #0969da;
-  border-radius: .2rem;
-  padding: 0 0.5rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: 500;
-}
-
-.search-input-container {
-  position: relative;
-  width: 100%;
-  overflow: hidden;
-}
-
-.search-input-wrapper {
-  position: relative;
-  width: 100%;
-}
-
-.search-highlight-layer {
-  position: absolute;
+/* Search expanded mode styles */
+.search-expanded {
+  position: fixed;
   top: 0;
   left: 0;
   right: 0;
-  bottom: 0;
-  pointer-events: none;
-  white-space: pre;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  gap: 0.25rem; /* Nuevo: separación consistente entre elementos */
-}
-
-.search-input-field {
-  width: 100%;
-  background: transparent;
-  outline: none;
-  color: transparent;
-  caret-color: currentColor;
-  white-space: pre;
-}
-
-.search-input-field::placeholder {
-  color: hsl(var(--muted-foreground));
-  -webkit-text-fill-color: initial;
-}
-
-.search-badge {
-  display: inline-flex;
-  align-items: center;
-  padding: 0 0.25rem;
-  border-radius: 0.2rem;
-  background: #ddf4ff;
-  color: #0969da;
-  font-size: 0.875rem;
-  font-weight: 500;
-  white-space: pre;
-  /* Se puede eliminar o reducir "margin" ya que el gap se encarga */
-}
-
-:root[class~="dark"] .search-badge {
-  background: #1a384d;
-  color: #2f81f7;
-}
-
-.extra-space {
-  /* Forzar al menos 2 caracteres de espacio extra */
-  min-width: 2ch;
-  flex-shrink: 0;
-}
-
-/* Remove duplicate styles and keep only these essential ones */
-.search-scroll-container {
-  display: flex;
-  align-items: center;
-  overflow-x: auto;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  margin-right: -8px; /* Compensar el padding del contenedor */
-  padding-right: 8px;
-}
-
-.search-scroll-container::-webkit-scrollbar {
-  display: none;
-}
-
-/* Ajustar el input */
-.search-input-field {
-  background: transparent;
-  outline: none;
-  color: transparent;
-  caret-color: currentColor;
-  min-width: 100%;
-  position: relative;
-  white-space: pre;
-  padding: 2px 0;
-}
-
-.search-input-field.has-content {
-  -webkit-text-fill-color: transparent;
-}
-
-.search-input-field::placeholder {
-  -webkit-text-fill-color: initial;
-  color: hsl(var(--muted-foreground));
-}
-
-/* Ajustar la capa de resaltado */
-.search-highlight {
+  height: 3.5rem;
+  z-index: var(--search-z-index);
   display: flex;
   align-items: center;
-  white-space: pre;
-  padding: 2px 0;
-}
-
-/* Asegurar que los badges mantengan su forma */
-.search-badge {
-  display: inline-flex;
-  align-items: center;
-  white-space: pre;
-  flex-shrink: 0;
-}
-
-/* Ajustar el cursor */
-.typing-cursor {
-  width: 2px;
-  height: 1.2em;
-  background-color: currentColor;
-  pointer-events: none;
-}
-
-.suggestions-group + .suggestions-group {
-  margin-top: 0.5rem;
-}
-
-.search-badge-mini {
-  background-color: hsl(var(--accent));
-  color: hsl(var(--accent-foreground));
-  padding: 0 0.375rem;
-  border-radius: 0.25rem;
-  font-size: 0.75rem;
-  line-height: 1.25rem;
-}
-
-.suggestion-item.is-used {
-  background-color: hsl(var(--muted)/0.1);
-}
-
-.suggestion-item.is-used:hover {
-  background-color: hsl(var(--destructive)/0.1);
-}
-
-.suggestions-container {
-  background-color: hsl(var(--background));
-  border: 1px solid hsl(var(--border));
-  border-radius: 0.375rem;
-  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  max-height: 24rem;
-  overflow-y: auto;
-}
-
-.suggestion-item.is-used:hover {
-  background-color: hsl(var(--destructive)/0.1);
-  color: hsl(var(--destructive));
-}
-
-.suggestion-item.is-used:hover .search-badge-mini {
-  background-color: hsl(var(--destructive)/0.2);
-  color: hsl(var(--destructive));
-}
-
-.search-input-field {
-  background: transparent;
-  outline: none;
-  position: relative;
-  white-space: pre;
-  padding: 2px 0;
-  caret-color: currentColor; /* Asegura que el cursor sea visible */
-  color: currentColor; /* Color del texto igual al tema actual */
-}
-
-/* Solo hacer el texto transparente cuando tiene contenido y no está en modo inline */
-.search-input-field.has-content:not(.inline-mode) {
-  color: transparent;
-  -webkit-text-fill-color: transparent;
-}
-
-/* Asegurar que el cursor sea visible en modo inline */
-.search-input-field.inline-mode {
-  color: currentColor;
-  -webkit-text-fill-color: currentColor;
-}
-
-/* Mantener el placeholder visible */
-.search-input-field::placeholder {
-  -webkit-text-fill-color: initial;
-  color: hsl(var(--muted-foreground));
-}
-
-/* Nuevos estilos para el resaltado */
-:deep(.search-token-qualifier) {
-  color: #0969da;
-  font-weight: 500;
-  white-space: pre;
-}
-
-:deep(.search-token-value) {
-  display: inline-flex;
-  align-items: center;
-  background-color: #ddf4ff;
-  color: #0969da;
-  border-radius: 3px;
-  padding: 0 4px;
-  margin: 0 1px;
-  font-weight: 500;
-  white-space: pre;
-}
-
-:deep(.search-token-text) {
-  color: currentColor;
-  white-space: pre;
-}
-
-/* Dark mode */
-:root[class~="dark"] :deep(.search-token-qualifier),
-:root[class~="dark"] :deep(.search-token-value) {
-  color: #2f81f7;
-}
-
-:root[class~="dark"] :deep(.search-token-value) {
-  background-color: #1a384d;
-}
-
-/* Asegurar que el texto del input sea transparente cuando tiene contenido */
-.search-input.has-content {
-  -webkit-text-fill-color: transparent;
-  color: transparent;
-}
-
-/* Asegurar que el input mantenga el texto transparente */
-.search-input {
-  -webkit-text-fill-color: transparent;
-  color: transparent;
-  caret-color: currentColor;
-}
-
-.search-input::placeholder {
-  -webkit-text-fill-color: var(--tw-text-opacity, 1);
-  color: hsl(var(--muted-foreground));
-}
-
-/* Ajustar el contenedor del mirror */
-.search-input-mirror {
-  white-space: pre;
-  overflow-x: hidden;
+  background-color: hsl(var(--background)/95%);
+  border-bottom: 1px solid hsl(var(--border));
+  backdrop-filter: blur(8px);
 }
 
-/* Actualizar los estilos del input para controlar la visibilidad del caret */
-.search-input {
-  -webkit-text-fill-color: transparent;
-  color: transparent;
-  caret-color: transparent; /* Ocultar caret por defecto */
+:root {
+  --search-z-index: 100;
 }
 
-.search-input:focus {
-  caret-color: currentColor; /* Mostrar caret solo cuando está enfocado */
-}
+/* ...other search expanded styles... */
 </style>
diff --git a/components/search/SearchInputField.vue b/components/search/SearchInputField.vue
new file mode 100644
index 0000000..3f85402
--- /dev/null
+++ b/components/search/SearchInputField.vue
@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import { ref, type ComputedRef } from 'vue'
+
+// Actualizar los tipos de props
+defineProps<{
+  searchValue: string,
+  highlightedHTML: ComputedRef<string> | string,
+  handleInput: (e: Event) => void,
+  handleFocus: () => void,
+  handleBlur: (e: FocusEvent) => void,
+  handleKeyDown: (e: KeyboardEvent) => void,
+  handleInputScroll: (e: Event) => void,
+  input: any
+}>()
+</script>
+
+<template>
+  <!-- Contenedor del input, se reutiliza tanto en inline como en modal -->
+  <div class="relative w-full">
+    <div 
+      class="h-9 relative flex items-center w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background transition-all duration-200"
+      @click="handleFocus"
+    >
+      <Icon name="octicon:search-16" class="mr-2 h-4 w-4 shrink-0 opacity-50" />
+      <div class="relative flex-1">
+        <div 
+          aria-hidden="true"
+          class="search-input-mirror absolute inset-0 pointer-events-none flex items-center overflow-hidden"
+        >
+          <span v-html="typeof highlightedHTML === 'string' ? highlightedHTML : highlightedHTML.value"></span>
+          <!-- Cambiar la condición del cursor -->
+          <span v-if="searchValue" class="typing-cursor"></span>
+        </div>
+        <input
+          ref="input"
+          :value="searchValue"
+          type="text"
+          class="search-input w-full relative"
+          :class="{ 'has-content': searchValue, 'text-transparent': searchValue }"
+          placeholder="Press / to search repositories..."
+          @input="handleInput"
+          @keydown="handleKeyDown"
+          @focus="handleFocus"
+          @blur="handleBlur"
+          @scroll="handleInputScroll"
+        />
+      </div>
+      <kbd 
+        class="pointer-events-none hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex"
+      >
+        <span class="text-xs">/</span>
+      </kbd>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* Mantener estilos del input y mirror */
+.search-input-mirror {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  white-space: pre;
+  overflow-x: hidden;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.search-input {
+  caret-color: transparent !important;
+  width: 100%;
+  background: transparent;
+  outline: none;
+  color: transparent;
+  position: relative;
+  white-space: pre;
+  padding: inherit;
+}
+.search-input.has-content {
+  -webkit-text-fill-color: transparent;
+}
+.search-input::placeholder {
+  -webkit-text-fill-color: initial;
+  color: hsl(var(--muted-foreground));
+}
+.search-input:focus {
+  caret-color: currentColor;
+}
+.typing-cursor {
+  display: inline-block;
+  width: 2px;
+  height: 1.2em;
+  background-color: currentColor;
+  margin-left: 1px;
+  animation: blink 1s step-end infinite;
+  position: relative;
+  top: 1px;
+}
+@keyframes blink {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+}
+/* Token highlighting styles */
+:deep(.search-token-qualifier) {
+  color: #0969da;
+  font-weight: 500;
+  white-space: pre;
+}
+:deep(.search-token-value) {
+  display: inline-flex;
+  align-items: center;
+  background-color: #ddf4ff;
+  color: #0969da;
+  border-radius: 3px;
+  padding: 0 4px;
+  margin: 0 1px;
+  font-weight: 500;
+  white-space: pre;
+}
+/* Dark mode styles */
+:root[class~="dark"] :deep(.search-token-qualifier),
+:root[class~="dark"] :deep(.search-token-value) {
+  color: #2f81f7;
+}
+:root[class~="dark"] :deep(.search-token-value) {
+  background-color: #1a384d;
+}
+</style>
diff --git a/components/search/SearchSuggestions.vue b/components/search/SearchSuggestions.vue
new file mode 100644
index 0000000..6add6f9
--- /dev/null
+++ b/components/search/SearchSuggestions.vue
@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import { defineProps } from 'vue'
+defineProps<{
+  suggestions: any,
+  QUALIFIERS: Record<string, { label: string, icon: string }>,
+  mode: 'inline' | 'modal',
+  handleSuggestionClick: (suggestion: string) => void,
+  removeQualifier: (qualifier: string, value: string) => void
+}>()
+</script>
+
+<template>
+  <div v-if="mode==='inline'" class="suggestions-dropdown-inline">
+    <div class="px-2 py-1 text-xs text-muted-foreground font-medium">
+      Available filters
+    </div>
+    <div
+      v-for="suggestion in suggestions"
+      :key="suggestion.qualifier"
+      class="suggestion-item"
+      :class="{ 'is-used': suggestion.isUsed }"
+      @mousedown.prevent="suggestion.isUsed
+        ? removeQualifier(suggestion.qualifier, suggestion.value)
+        : handleSuggestionClick(suggestion.qualifier)"
+    >
+      <Icon
+        :name="QUALIFIERS[suggestion.qualifier as keyof typeof QUALIFIERS].icon"
+        class="h-3.5 w-3.5 opacity-50"
+      />
+      <span class="suggestion-label text-xs">
+        {{ QUALIFIERS[suggestion.qualifier as keyof typeof QUALIFIERS].label }}
+      </span>
+      <div class="ml-auto flex items-center gap-2">
+        <span v-if="suggestion.isUsed" class="text-xs text-muted-foreground">
+          {{ suggestion.value }}
+        </span>
+        <span class="text-xs text-muted-foreground">
+          {{ suggestion.qualifier }}
+        </span>
+        <Icon
+          v-if="suggestion.isUsed"
+          name="octicon:x-16"
+          class="h-3.5 w-3.5 opacity-50"
+        />
+      </div>
+    </div>
+  </div>
+
+  <div v-else class="mt-2">
+    <div class="px-2 mb-2 text-xs text-muted-foreground font-medium">
+      Available filters
+    </div>
+    <div
+      v-for="suggestion in suggestions"
+      :key="suggestion.qualifier"
+      class="suggestion-item"
+      :class="{ 'is-used': suggestion.isUsed }"
+      @mousedown.prevent="suggestion.isUsed
+        ? removeQualifier(suggestion.qualifier, suggestion.value)
+        : handleSuggestionClick(suggestion.qualifier)"
+    >
+      <Icon
+        :name="QUALIFIERS[suggestion.qualifier as keyof typeof QUALIFIERS].icon"
+        class="h-3.5 w-3.5 opacity-50"
+      />
+      <span class="suggestion-label text-xs">
+        {{ QUALIFIERS[suggestion.qualifier as keyof typeof QUALIFIERS].label }}
+      </span>
+      <div class="ml-auto flex items-center gap-2">
+        <span v-if="suggestion.isUsed" class="text-xs text-muted-foreground">
+          {{ suggestion.value }}
+        </span>
+        <span class="text-xs text-muted-foreground">
+          {{ suggestion.qualifier }}
+        </span>
+        <Icon
+          v-if="suggestion.isUsed"
+          name="octicon:x-16"
+          class="h-3.5 w-3.5 opacity-50"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.suggestions-dropdown-inline {
+  position: absolute;
+  top: calc(100% + 0.25rem);
+  left: 0;
+  right: 0;
+  background-color: hsl(var(--background));
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.375rem;
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1),
+              0 2px 4px -2px rgb(0 0 0 / 0.1);
+  z-index: 50;
+  padding: 0.5rem 0;
+  max-height: 16rem;
+  overflow-y: auto;
+}
+
+.suggestion-item {
+  padding: 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  cursor: pointer;
+  border-radius: 0.375rem;
+  transition: background-color 0.2s ease;
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.suggestion-item:hover {
+  background-color: hsl(var(--accent));
+}
+
+.suggestion-item.is-used {
+  background-color: hsl(var(--muted)/0.1);
+}
+
+.suggestion-item.is-used:hover {
+  background-color: hsl(var(--destructive)/0.1);
+  color: hsl(var(--destructive));
+}
+
+.suggestion-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.search-badge-mini {
+  background-color: hsl(var(--accent));
+  color: hsl(var(--accent-foreground));
+  padding: 0 0.375rem;
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+}
+</style>
diff --git a/components/search/composables/useSearchInput.ts b/components/search/composables/useSearchInput.ts
index cf02972..1fc6aa5 100644
--- a/components/search/composables/useSearchInput.ts
+++ b/components/search/composables/useSearchInput.ts
@@ -61,14 +61,33 @@ export function useSearchInput(onHandleFocus?: () => void) {
     }
   }
 
+  const forceFocus = () => {
+    if (input.value) {
+      // Inmediatamente intentar el foco
+      input.value.focus()
+      
+      // Usar múltiples técnicas para asegurar el foco
+      requestAnimationFrame(() => {
+        if (input.value) {
+          input.value.focus()
+          input.value.click() // Simular click para forzar foco
+          
+          // Último intento después de un pequeño delay
+          setTimeout(() => {
+            input.value?.focus()
+          }, 1)
+        }
+      })
+    }
+  }
+
   const handleGlobalShortcut = (event: KeyboardEvent) => {
     if (event.key === '/' && !['INPUT', 'TEXTAREA'].includes((event.target as HTMLElement).tagName)) {
       event.preventDefault()
+      event.stopPropagation()
       isInputFocused.value = true
       onHandleFocus?.()
-      nextTick(() => {
-        input.value?.focus()
-      })
+      forceFocus()
     }
   }
 
@@ -94,6 +113,7 @@ export function useSearchInput(onHandleFocus?: () => void) {
     handleInputScroll,
     updateContainerWidth,
     updateDropdownPosition,
-    handleGlobalShortcut
+    handleGlobalShortcut,
+    forceFocus, // Exportar para uso externo
   }
 }
diff --git a/components/search/composables/useSearchInteractions.ts b/components/search/composables/useSearchInteractions.ts
index 77cab63..a0d5aec 100644
--- a/components/search/composables/useSearchInteractions.ts
+++ b/components/search/composables/useSearchInteractions.ts
@@ -1,4 +1,4 @@
-import { ref, computed, nextTick } from 'vue'
+import { ref, computed, nextTick, onMounted, onUnmounted } from 'vue'
 import type { SearchToken } from '../search'
 import { useSearchParser } from './useSearchParser'
 
@@ -33,13 +33,26 @@ export function useSearchInteractions(
       isInputFocused.value = true
       showSuggestions.value = true
       lockScroll()
-      nextTick(() => {
-        input.value?.focus()
-      })
     } else {
       isInputFocused.value = true
       showSuggestions.value = true
     }
+
+    // Forzar foco inmediatamente
+    if (input.value) {
+      input.value.focus()
+      input.value.click() // Simular click
+      
+      requestAnimationFrame(() => {
+        if (input.value) {
+          input.value.focus()
+          
+          setTimeout(() => {
+            input.value?.focus()
+          }, 1)
+        }
+      })
+    }
   }
 
   const closeSearch = () => {
@@ -144,6 +157,41 @@ export function useSearchInteractions(
     })
   }
 
+  // Escuchar la tecla '/' directamente aquí para abrir/modal y forzar foco
+  const handleGlobalShortcut = (event: KeyboardEvent) => {
+    if (
+      event.key === '/' &&
+      !['INPUT', 'TEXTAREA'].includes((event.target as HTMLElement).tagName)
+    ) {
+      event.preventDefault()
+      isInputFocused.value = true
+
+      // Si está en modo modal y cerrado, abrirlo
+      if (!isInlineMode.value && !isExpanded.value) {
+        isExpanded.value = true
+        lockScroll()
+      }
+      // Forzar foco en el input
+      if (input.value) {
+        input.value.focus()
+        requestAnimationFrame(() => {
+          input.value?.focus()
+          setTimeout(() => {
+            input.value?.focus()
+          }, 1)
+        })
+      }
+    }
+  }
+
+  onMounted(() => {
+    window.addEventListener('keydown', handleGlobalShortcut)
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('keydown', handleGlobalShortcut)
+  })
+
   return {
     searchInput,
     showSuggestions,
diff --git a/components/search/types.ts b/components/search/types.ts
new file mode 100644
index 0000000..7ad42b7
--- /dev/null
+++ b/components/search/types.ts
@@ -0,0 +1,17 @@
+import type { ComputedRef, Ref } from 'vue'
+
+export interface SearchInputFieldProps {
+  searchValue: string
+  highlightedHTML: string | ComputedRef<string>
+  handleInput: (e: Event) => void
+  handleFocus: () => void
+  handleBlur: (e: FocusEvent) => void
+  handleKeyDown: (e: KeyboardEvent) => void
+  handleInputScroll: (e: Event) => void
+  input: any
+}
+
+export interface SearchInputProps {
+  modelValue: string
+  mode?: 'inline' | 'modal'
+}
diff --git a/components/ui/command/Command.vue b/components/ui/command/Command.vue
new file mode 100644
index 0000000..9597010
--- /dev/null
+++ b/components/ui/command/Command.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import type { ListboxRootEmits, ListboxRootProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { ListboxRoot, useFilter, useForwardPropsEmits } from 'reka-ui'
+import { computed, type HTMLAttributes, reactive, ref, watch } from 'vue'
+import { provideCommandContext } from '.'
+
+const props = withDefaults(defineProps<ListboxRootProps & { class?: HTMLAttributes['class'] }>(), {
+  modelValue: '',
+})
+
+const emits = defineEmits<ListboxRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const allItems = ref<Map<string, string>>(new Map())
+const allGroups = ref<Map<string, Set<string>>>(new Map())
+
+const { contains } = useFilter({ sensitivity: 'base' })
+const filterState = reactive({
+  search: '',
+  filtered: {
+    /** The count of all visible items. */
+    count: 0,
+    /** Map from visible item id to its search score. */
+    items: new Map() as Map<string, number>,
+    /** Set of groups with at least one visible item. */
+    groups: new Set() as Set<string>,
+  },
+})
+
+function filterItems() {
+  if (!filterState.search) {
+    filterState.filtered.count = allItems.value.size
+    // Do nothing, each item will know to show itself because search is empty
+    return
+  }
+
+  // Reset the groups
+  filterState.filtered.groups = new Set()
+  let itemCount = 0
+
+  // Check which items should be included
+  for (const [id, value] of allItems.value) {
+    const score = contains(value, filterState.search)
+    filterState.filtered.items.set(id, score ? 1 : 0)
+    if (score)
+      itemCount++
+  }
+
+  // Check which groups have at least 1 item shown
+  for (const [groupId, group] of allGroups.value) {
+    for (const itemId of group) {
+      if (filterState.filtered.items.get(itemId)! > 0) {
+        filterState.filtered.groups.add(groupId)
+        break
+      }
+    }
+  }
+
+  filterState.filtered.count = itemCount
+}
+
+function handleSelect() {
+  filterState.search = ''
+}
+
+watch(() => filterState.search, () => {
+  filterItems()
+})
+
+provideCommandContext({
+  allItems,
+  allGroups,
+  filterState,
+})
+</script>
+
+<template>
+  <ListboxRoot
+    v-bind="forwarded"
+    :class="cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)"
+  >
+    <slot />
+  </ListboxRoot>
+</template>
diff --git a/components/ui/command/CommandDialog.vue b/components/ui/command/CommandDialog.vue
new file mode 100644
index 0000000..b7b0a91
--- /dev/null
+++ b/components/ui/command/CommandDialog.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from 'reka-ui'
+import { Dialog, DialogContent } from '@/components/ui/dialog'
+import { useForwardPropsEmits } from 'reka-ui'
+import Command from './Command.vue'
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <Dialog v-bind="forwarded">
+    <DialogContent class="overflow-hidden p-0 shadow-lg">
+      <Command class="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+        <slot />
+      </Command>
+    </DialogContent>
+  </Dialog>
+</template>
diff --git a/components/ui/command/CommandEmpty.vue b/components/ui/command/CommandEmpty.vue
new file mode 100644
index 0000000..58795f2
--- /dev/null
+++ b/components/ui/command/CommandEmpty.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { Primitive } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+import { useCommand } from '.'
+
+const props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const { filterState } = useCommand()
+const isRender = computed(() => !!filterState.search && filterState.filtered.count === 0,
+)
+</script>
+
+<template>
+  <Primitive v-if="isRender" v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)">
+    <slot />
+  </Primitive>
+</template>
diff --git a/components/ui/command/CommandGroup.vue b/components/ui/command/CommandGroup.vue
new file mode 100644
index 0000000..fd4f5b3
--- /dev/null
+++ b/components/ui/command/CommandGroup.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { ListboxGroupProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { ListboxGroup, ListboxGroupLabel, useId } from 'reka-ui'
+import { computed, type HTMLAttributes, onMounted, onUnmounted } from 'vue'
+import { provideCommandGroupContext, useCommand } from '.'
+
+const props = defineProps<ListboxGroupProps & {
+  class?: HTMLAttributes['class']
+  heading?: string
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const { allGroups, filterState } = useCommand()
+const id = useId()
+
+const isRender = computed(() => !filterState.search ? true : filterState.filtered.groups.has(id))
+
+provideCommandGroupContext({ id })
+onMounted(() => {
+  if (!allGroups.value.has(id))
+    allGroups.value.set(id, new Set())
+})
+onUnmounted(() => {
+  allGroups.value.delete(id)
+})
+</script>
+
+<template>
+  <ListboxGroup
+    v-bind="delegatedProps"
+    :id="id"
+    :class="cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)"
+    :hidden="isRender ? undefined : true"
+  >
+    <ListboxGroupLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+      {{ heading }}
+    </ListboxGroupLabel>
+    <slot />
+  </ListboxGroup>
+</template>
diff --git a/components/ui/command/CommandInput.vue b/components/ui/command/CommandInput.vue
new file mode 100644
index 0000000..4c3b963
--- /dev/null
+++ b/components/ui/command/CommandInput.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { Search } from 'lucide-vue-next'
+import { ListboxFilter, type ListboxFilterProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+import { useCommand } from '.'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<ListboxFilterProps & {
+  class?: HTMLAttributes['class']
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+
+const { filterState } = useCommand()
+</script>
+
+<template>
+  <div class="flex items-center border-b px-3" cmdk-input-wrapper>
+    <Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <ListboxFilter
+      v-bind="{ ...forwardedProps, ...$attrs }"
+      v-model="filterState.search"
+      auto-focus
+      :class="cn('flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)"
+    />
+  </div>
+</template>
diff --git a/components/ui/command/CommandItem.vue b/components/ui/command/CommandItem.vue
new file mode 100644
index 0000000..97365e1
--- /dev/null
+++ b/components/ui/command/CommandItem.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import type { ListboxItemEmits, ListboxItemProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { useCurrentElement } from '@vueuse/core'
+import { ListboxItem, useForwardPropsEmits, useId } from 'reka-ui'
+import { computed, type HTMLAttributes, onMounted, onUnmounted, ref } from 'vue'
+import { useCommand, useCommandGroup } from '.'
+
+const props = defineProps<ListboxItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<ListboxItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const id = useId()
+const { filterState, allItems, allGroups } = useCommand()
+const groupContext = useCommandGroup()
+
+const isRender = computed(() => {
+  if (!filterState.search) {
+    return true;
+  }
+  else {
+    const filteredCurrentItem = filterState.filtered.items.get(id)
+    // If the filtered items is undefined means not in the all times map yet
+    // Do the first render to add into the map
+    if (filteredCurrentItem === undefined) {
+      return true;
+    }
+
+    // Check with filter
+    return filteredCurrentItem > 0;
+  }
+})
+
+const itemRef = ref()
+const currentElement = useCurrentElement(itemRef)
+onMounted(() => {
+  if (!(currentElement.value instanceof HTMLElement))
+    return
+
+  // textValue to perform filter
+  allItems.value.set(id, currentElement.value.textContent ?? props.value.toString())
+
+  const groupId = groupContext?.id
+  if (groupId) {
+    if (!allGroups.value.has(groupId)) {
+      allGroups.value.set(groupId, new Set([id]))
+    }
+    else {
+      allGroups.value.get(groupId)?.add(id)
+    }
+  }
+})
+onUnmounted(() => {
+  allItems.value.delete(id)
+})
+</script>
+
+<template>
+  <ListboxItem
+    v-if="isRender"
+    v-bind="forwarded"
+    :id="id"
+    ref="itemRef"
+    :class="cn('relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0', props.class)"
+    @select="() => {
+      filterState.search = ''
+    }"
+  >
+    <slot />
+  </ListboxItem>
+</template>
diff --git a/components/ui/command/CommandList.vue b/components/ui/command/CommandList.vue
new file mode 100644
index 0000000..83c7d95
--- /dev/null
+++ b/components/ui/command/CommandList.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { ListboxContentProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { ListboxContent, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<ListboxContentProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ListboxContent v-bind="forwarded" :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)">
+    <div role="presentation">
+      <slot />
+    </div>
+  </ListboxContent>
+</template>
diff --git a/components/ui/command/CommandSeparator.vue b/components/ui/command/CommandSeparator.vue
new file mode 100644
index 0000000..4122020
--- /dev/null
+++ b/components/ui/command/CommandSeparator.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { SeparatorProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { Separator } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <Separator
+    v-bind="delegatedProps"
+    :class="cn('-mx-1 h-px bg-border', props.class)"
+  >
+    <slot />
+  </Separator>
+</template>
diff --git a/components/ui/command/CommandShortcut.vue b/components/ui/command/CommandShortcut.vue
new file mode 100644
index 0000000..0d4da92
--- /dev/null
+++ b/components/ui/command/CommandShortcut.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)">
+    <slot />
+  </span>
+</template>
diff --git a/components/ui/command/index.ts b/components/ui/command/index.ts
new file mode 100644
index 0000000..cb48e1e
--- /dev/null
+++ b/components/ui/command/index.ts
@@ -0,0 +1,25 @@
+import type { Ref } from 'vue'
+import { createContext } from 'reka-ui'
+
+export { default as Command } from './Command.vue'
+export { default as CommandDialog } from './CommandDialog.vue'
+export { default as CommandEmpty } from './CommandEmpty.vue'
+export { default as CommandGroup } from './CommandGroup.vue'
+export { default as CommandInput } from './CommandInput.vue'
+export { default as CommandItem } from './CommandItem.vue'
+export { default as CommandList } from './CommandList.vue'
+export { default as CommandSeparator } from './CommandSeparator.vue'
+export { default as CommandShortcut } from './CommandShortcut.vue'
+
+export const [useCommand, provideCommandContext] = createContext<{
+  allItems: Ref<Map<string, string>>
+  allGroups: Ref<Map<string, Set<string>>>
+  filterState: {
+    search: string
+    filtered: { count: number, items: Map<string, number>, groups: Set<string> }
+  }
+}>('Command')
+
+export const [useCommandGroup, provideCommandGroupContext] = createContext<{
+  id?: string
+}>('CommandGroup')
diff --git a/components/ui/dialog/Dialog.vue b/components/ui/dialog/Dialog.vue
index a04c026..9fc9c7d 100644
--- a/components/ui/dialog/Dialog.vue
+++ b/components/ui/dialog/Dialog.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'radix-vue'
+import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<DialogRootProps>()
 const emits = defineEmits<DialogRootEmits>()
diff --git a/components/ui/dialog/DialogClose.vue b/components/ui/dialog/DialogClose.vue
index a64703e..ba036b5 100644
--- a/components/ui/dialog/DialogClose.vue
+++ b/components/ui/dialog/DialogClose.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DialogClose, type DialogCloseProps } from 'radix-vue'
+import { DialogClose, type DialogCloseProps } from 'reka-ui'
 
 const props = defineProps<DialogCloseProps>()
 </script>
diff --git a/components/ui/dialog/DialogContent.vue b/components/ui/dialog/DialogContent.vue
index c9fe803..be00c5e 100644
--- a/components/ui/dialog/DialogContent.vue
+++ b/components/ui/dialog/DialogContent.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { Cross2Icon } from '@radix-icons/vue'
+import { X } from 'lucide-vue-next'
 import {
   DialogClose,
   DialogContent,
@@ -9,7 +9,7 @@ import {
   DialogOverlay,
   DialogPortal,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
@@ -33,7 +33,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       v-bind="forwarded"
       :class="
         cn(
-          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6  duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top sm:rounded-lg',
+          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
           props.class,
         )"
     >
@@ -42,7 +42,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       <DialogClose
         class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
       >
-        <Cross2Icon class="w-4 h-4" />
+        <X class="w-4 h-4" />
         <span class="sr-only">Close</span>
       </DialogClose>
     </DialogContent>
diff --git a/components/ui/dialog/DialogDescription.vue b/components/ui/dialog/DialogDescription.vue
index 878ef2b..5afbab0 100644
--- a/components/ui/dialog/DialogDescription.vue
+++ b/components/ui/dialog/DialogDescription.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'radix-vue'
+import { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
diff --git a/components/ui/dialog/DialogScrollContent.vue b/components/ui/dialog/DialogScrollContent.vue
index e39cb22..017cbd2 100644
--- a/components/ui/dialog/DialogScrollContent.vue
+++ b/components/ui/dialog/DialogScrollContent.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { Cross2Icon } from '@radix-icons/vue'
+import { X } from 'lucide-vue-next'
 import {
   DialogClose,
   DialogContent,
@@ -9,7 +9,7 @@ import {
   DialogOverlay,
   DialogPortal,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
@@ -32,7 +32,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       <DialogContent
         :class="
           cn(
-            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6  duration-200 sm:rounded-lg md:w-full',
+            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
             props.class,
           )
         "
@@ -50,7 +50,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
         <DialogClose
           class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
         >
-          <Cross2Icon class="w-4 h-4" />
+          <X class="w-4 h-4" />
           <span class="sr-only">Close</span>
         </DialogClose>
       </DialogContent>
diff --git a/components/ui/dialog/DialogTitle.vue b/components/ui/dialog/DialogTitle.vue
index 1f049e3..30cbb36 100644
--- a/components/ui/dialog/DialogTitle.vue
+++ b/components/ui/dialog/DialogTitle.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import { DialogTitle, type DialogTitleProps, useForwardProps } from 'radix-vue'
+import { DialogTitle, type DialogTitleProps, useForwardProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
diff --git a/components/ui/dialog/DialogTrigger.vue b/components/ui/dialog/DialogTrigger.vue
index ee0c12f..2984f37 100644
--- a/components/ui/dialog/DialogTrigger.vue
+++ b/components/ui/dialog/DialogTrigger.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DialogTrigger, type DialogTriggerProps } from 'radix-vue'
+import { DialogTrigger, type DialogTriggerProps } from 'reka-ui'
 
 const props = defineProps<DialogTriggerProps>()
 </script>
diff --git a/lib/utils.ts b/lib/utils.ts
index d32b0fe..4c51992 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -1,6 +1,15 @@
+import type { Updater } from '@tanstack/vue-table'
+import type { Ref } from 'vue'
 import { type ClassValue, clsx } from 'clsx'
 import { twMerge } from 'tailwind-merge'
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
+
+export function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) {
+  ref.value
+    = typeof updaterOrValue === 'function'
+      ? updaterOrValue(ref.value)
+      : updaterOrValue
+}
diff --git a/package.json b/package.json
index 1d04aed..343f71e 100644
--- a/package.json
+++ b/package.json
@@ -14,12 +14,15 @@
     "@nuxthub/core": "0.8.17",
     "@octokit/rest": "^21.1.0",
     "@radix-icons/vue": "^1.0.0",
+    "@tanstack/vue-table": "^8.21.2",
     "@vueuse/core": "^12.5.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "lucide-vue-next": "^0.475.0",
     "nuxt": "^3.15.4",
     "pinia": "^3.0.0",
     "radix-vue": "^1.9.13",
+    "reka-ui": "^2.0.0",
     "tailwind-merge": "^3.0.1",
     "tailwindcss-animate": "^1.0.7",
     "vite": ">=6.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c098fd9..b5a740b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,6 +20,9 @@ importers:
       '@radix-icons/vue':
         specifier: ^1.0.0
         version: 1.0.0(vue@3.5.13(typescript@5.7.3))
+      '@tanstack/vue-table':
+        specifier: ^8.21.2
+        version: 8.21.2(vue@3.5.13(typescript@5.7.3))
       '@vueuse/core':
         specifier: ^12.5.0
         version: 12.5.0(typescript@5.7.3)
@@ -29,6 +32,9 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      lucide-vue-next:
+        specifier: ^0.475.0
+        version: 0.475.0(vue@3.5.13(typescript@5.7.3))
       nuxt:
         specifier: ^3.15.4
         version: 3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.1)(db0@0.2.4)(ioredis@5.5.0)(magicast@0.3.5)(rollup@4.34.6)(terser@5.38.2)(typescript@5.7.3)(vite@6.1.0(@types/node@22.13.1)(jiti@2.4.2)(terser@5.38.2)(yaml@2.7.0))(yaml@2.7.0)
@@ -38,6 +44,9 @@ importers:
       radix-vue:
         specifier: ^1.9.13
         version: 1.9.13(vue@3.5.13(typescript@5.7.3))
+      reka-ui:
+        specifier: ^2.0.0
+        version: 2.0.0(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3))
       tailwind-merge:
         specifier: ^3.0.1
         version: 3.0.1
@@ -1370,9 +1379,19 @@ packages:
     peerDependencies:
       tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1'
 
+  '@tanstack/table-core@8.21.2':
+    resolution: {integrity: sha512-uvXk/U4cBiFMxt+p9/G7yUWI/UbHYbyghLCjlpWZ3mLeIZiUBSKcUnw9UnKkdRz7Z/N4UBuFLWQdJCjUe7HjvA==}
+    engines: {node: '>=12'}
+
   '@tanstack/virtual-core@3.13.0':
     resolution: {integrity: sha512-NBKJP3OIdmZY3COJdWkSonr50FMVIi+aj5ZJ7hI/DTpEKg2RMfo/KvP8A3B/zOSpMgIe52B5E2yn7rryULzA6g==}
 
+  '@tanstack/vue-table@8.21.2':
+    resolution: {integrity: sha512-KBgOWxha/x4m1EdhVWxOpqHb661UjqAxzPcmXR3QiA7aShZ547x19Gw0UJX9we+m+tVcPuLRZ61JsYW47QZFfQ==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      vue: '>=3.2'
+
   '@tanstack/vue-virtual@3.13.0':
     resolution: {integrity: sha512-EPgcTc41KGJAK2N2Ux2PeUnG3cPpdkldTib05nwq+0zdS2Ihpbq8BsWXz/eXPyNc5noDBh1GBgAe36yMYiW6WA==}
     peerDependencies:
@@ -2876,6 +2895,11 @@ packages:
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
+  lucide-vue-next@0.475.0:
+    resolution: {integrity: sha512-xzotVZV7en58Gm3b60YHlxX2YGlFWSN4D5VMMhU/rC9D/pkeRqve21TPMJdHQsdqFdoRthnaB2HrzL0PQXdNeA==}
+    peerDependencies:
+      vue: '>=3.0.1'
+
   magic-string-ast@0.7.0:
     resolution: {integrity: sha512-686fgAHaJY7wLTFEq7nnKqeQrhqmXB19d1HnqT35Ci7BN6hbAYLZUezTQ062uUHM7ggZEQlqJ94Ftls+KDXU8Q==}
     engines: {node: '>=16.14.0'}
@@ -3635,6 +3659,11 @@ packages:
     resolution: {integrity: sha512-DJnGAeenTdpMEH6uAJRK/uiyEIH9WVsUmoLwzudwGJUwZPp80PDBWPHXSAGNPwNvIXAbe7MSUB1zQFugFml66A==}
     engines: {node: '>=4'}
 
+  reka-ui@2.0.0:
+    resolution: {integrity: sha512-/1amDDvTnDIkSFbTZnUkiFWkxlc/UEe0pZsgvz3nDI15R9+yspQv/gIbM62Mo9LALK6A76NsgMNlXie04kv7PA==}
+    peerDependencies:
+      vue: '>= 3.2.0'
+
   replace-in-file@6.3.5:
     resolution: {integrity: sha512-arB9d3ENdKva2fxRnSjwBEXfK1npgyci7ZZuwysgAp7ORjHSyxz6oqIjTEv8R0Ydl4Ll7uOAZXL4vbkhGIizCg==}
     engines: {node: '>=10'}
@@ -5955,8 +5984,15 @@ snapshots:
       postcss-selector-parser: 6.0.10
       tailwindcss: 3.4.17
 
+  '@tanstack/table-core@8.21.2': {}
+
   '@tanstack/virtual-core@3.13.0': {}
 
+  '@tanstack/vue-table@8.21.2(vue@3.5.13(typescript@5.7.3))':
+    dependencies:
+      '@tanstack/table-core': 8.21.2
+      vue: 3.5.13(typescript@5.7.3)
+
   '@tanstack/vue-virtual@3.13.0(vue@3.5.13(typescript@5.7.3))':
     dependencies:
       '@tanstack/virtual-core': 3.13.0
@@ -7645,6 +7681,10 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
+  lucide-vue-next@0.475.0(vue@3.5.13(typescript@5.7.3)):
+    dependencies:
+      vue: 3.5.13(typescript@5.7.3)
+
   magic-string-ast@0.7.0:
     dependencies:
       magic-string: 0.30.17
@@ -8673,6 +8713,23 @@ snapshots:
     dependencies:
       redis-errors: 1.2.0
 
+  reka-ui@2.0.0(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3)):
+    dependencies:
+      '@floating-ui/dom': 1.6.13
+      '@floating-ui/vue': 1.1.6(vue@3.5.13(typescript@5.7.3))
+      '@internationalized/date': 3.7.0
+      '@internationalized/number': 3.6.0
+      '@tanstack/vue-virtual': 3.13.0(vue@3.5.13(typescript@5.7.3))
+      '@vueuse/core': 12.5.0(typescript@5.7.3)
+      '@vueuse/shared': 12.5.0(typescript@5.7.3)
+      aria-hidden: 1.2.4
+      defu: 6.1.4
+      ohash: 1.1.4
+      vue: 3.5.13(typescript@5.7.3)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - typescript
+
   replace-in-file@6.3.5:
     dependencies:
       chalk: 4.1.2
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 6fb5006..bf42e7b 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,7 +1,7 @@
 const animate = require("tailwindcss-animate")
 
 export default {
-  darkMode: 'class',
+  darkMode: ['class', 'class'],
   content: [
     './components/**/*.{js,vue,ts}',
     './layouts/**/*.vue',
@@ -18,90 +18,121 @@ export default {
   prefix: "",
   
   theme: {
-    container: {
-      center: true,
-      padding: "2rem",
-      screens: {
-        "2xl": "1400px",
-      },
-    },
-    extend: {
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-      },
-      borderRadius: {
-        xl: "calc(var(--radius) + 4px)",
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
-      keyframes: {
-        "accordion-down": {
-          from: { height: 0 },
-          to: { height: "var(--radix-accordion-content-height)" },
-        },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: 0 },
-        },
-        "collapsible-down": {
-          from: { height: 0 },
-          to: { height: 'var(--radix-collapsible-content-height)' },
-        },
-        "collapsible-up": {
-          from: { height: 'var(--radix-collapsible-content-height)' },
-          to: { height: 0 },
-        },
-        "slide-in-from-top": {
-          "0%": { transform: "translateY(-100%)" },
-          "100%": { transform: "translateY(0)" }
-        },
-        "slide-out-to-top": {
-          "0%": { transform: "translateY(0)" },
-          "100%": { transform: "translateY(-100%)" }
-        }
-      },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-        "collapsible-down": "collapsible-down 0.2s ease-in-out",
-        "collapsible-up": "collapsible-up 0.2s ease-in-out",
-        "slide-in-from-top": "slide-in-from-top 0.2s ease-out",
-        "slide-out-to-top": "slide-out-to-top 0.2s ease-out"
-      },
-    },
+  	container: {
+  		center: true,
+  		padding: '2rem',
+  		screens: {
+  			'2xl': '1400px'
+  		}
+  	},
+  	extend: {
+  		colors: {
+  			border: 'hsl(var(--border))',
+  			input: 'hsl(var(--input))',
+  			ring: 'hsl(var(--ring))',
+  			background: 'hsl(var(--background))',
+  			foreground: 'hsl(var(--foreground))',
+  			primary: {
+  				DEFAULT: 'hsl(var(--primary))',
+  				foreground: 'hsl(var(--primary-foreground))'
+  			},
+  			secondary: {
+  				DEFAULT: 'hsl(var(--secondary))',
+  				foreground: 'hsl(var(--secondary-foreground))'
+  			},
+  			destructive: {
+  				DEFAULT: 'hsl(var(--destructive))',
+  				foreground: 'hsl(var(--destructive-foreground))'
+  			},
+  			muted: {
+  				DEFAULT: 'hsl(var(--muted))',
+  				foreground: 'hsl(var(--muted-foreground))'
+  			},
+  			accent: {
+  				DEFAULT: 'hsl(var(--accent))',
+  				foreground: 'hsl(var(--accent-foreground))'
+  			},
+  			popover: {
+  				DEFAULT: 'hsl(var(--popover))',
+  				foreground: 'hsl(var(--popover-foreground))'
+  			},
+  			card: {
+  				DEFAULT: 'hsl(var(--card))',
+  				foreground: 'hsl(var(--card-foreground))'
+  			},
+  			chart: {
+  				'1': 'hsl(var(--chart-1))',
+  				'2': 'hsl(var(--chart-2))',
+  				'3': 'hsl(var(--chart-3))',
+  				'4': 'hsl(var(--chart-4))',
+  				'5': 'hsl(var(--chart-5))'
+  			}
+  		},
+  		borderRadius: {
+  			xl: 'calc(var(--radius) + 4px)',
+  			lg: 'var(--radius)',
+  			md: 'calc(var(--radius) - 2px)',
+  			sm: 'calc(var(--radius) - 4px)'
+  		},
+  		keyframes: {
+  			'accordion-down': {
+  				from: {
+  					height: 0
+  				},
+  				to: {
+  					height: 'var(--radix-accordion-content-height)'
+  				}
+  			},
+  			'accordion-up': {
+  				from: {
+  					height: 'var(--radix-accordion-content-height)'
+  				},
+  				to: {
+  					height: 0
+  				}
+  			},
+  			'collapsible-down': {
+  				from: {
+  					height: 0
+  				},
+  				to: {
+  					height: 'var(--radix-collapsible-content-height)'
+  				}
+  			},
+  			'collapsible-up': {
+  				from: {
+  					height: 'var(--radix-collapsible-content-height)'
+  				},
+  				to: {
+  					height: 0
+  				}
+  			},
+  			'slide-in-from-top': {
+  				'0%': {
+  					transform: 'translateY(-100%)'
+  				},
+  				'100%': {
+  					transform: 'translateY(0)'
+  				}
+  			},
+  			'slide-out-to-top': {
+  				'0%': {
+  					transform: 'translateY(0)'
+  				},
+  				'100%': {
+  					transform: 'translateY(-100%)'
+  				}
+  			}
+  		},
+  		animation: {
+  			'accordion-down': 'accordion-down 0.2s ease-out',
+  			'accordion-up': 'accordion-up 0.2s ease-out',
+  			'collapsible-down': 'collapsible-down 0.2s ease-in-out',
+  			'collapsible-up': 'collapsible-up 0.2s ease-in-out',
+  			'slide-in-from-top': 'slide-in-from-top 0.2s ease-out',
+  			'slide-out-to-top': 'slide-out-to-top 0.2s ease-out'
+  		}
+  	}
   },
-  plugins: [animate],
+  plugins: [animate, require("tailwindcss-animate")],
 }
\ No newline at end of file

From 6eed3c09527e011a9bacc9d7f8550892d8c4151d Mon Sep 17 00:00:00 2001
From: Sean Luis <seanluis47@gmail.com>
Date: Mon, 24 Feb 2025 10:20:52 -0300
Subject: [PATCH 09/11] feat: add filter input component and enhance search
 functionality with filter suggestions

---
 components/icons/IconSearch.vue               |  14 ++
 components/ui/search/FilterInput.vue          | 159 ++++++++++++++++++
 components/ui/search/FilterSuggestions.vue    | 110 ++++++++++++
 components/ui/search/KeyboardShortcut.vue     |  11 ++
 .../composables/useFilterSuggestions.ts       |  54 ++++++
 nuxt.config.ts                                |   8 +-
 package.json                                  |   1 +
 pages/index.vue                               |  31 ++--
 pnpm-lock.yaml                                |  97 +++++++++--
 public/logo.png                               | Bin 0 -> 16564 bytes
 10 files changed, 452 insertions(+), 33 deletions(-)
 create mode 100644 components/icons/IconSearch.vue
 create mode 100644 components/ui/search/FilterInput.vue
 create mode 100644 components/ui/search/FilterSuggestions.vue
 create mode 100644 components/ui/search/KeyboardShortcut.vue
 create mode 100644 components/ui/search/composables/useFilterSuggestions.ts
 create mode 100644 public/logo.png

diff --git a/components/icons/IconSearch.vue b/components/icons/IconSearch.vue
new file mode 100644
index 0000000..ec68169
--- /dev/null
+++ b/components/icons/IconSearch.vue
@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <circle cx="8.5" cy="8.5" r="5.5" />
+    <path d="M17.5 17.5L12 12" />
+  </svg>
+</template>
diff --git a/components/ui/search/FilterInput.vue b/components/ui/search/FilterInput.vue
new file mode 100644
index 0000000..a95d3c5
--- /dev/null
+++ b/components/ui/search/FilterInput.vue
@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { useFilterSuggestions } from './composables/useFilterSuggestions'
+import IconSearch from '@/components/icons/IconSearch.vue'
+import KeyboardShortcut from './KeyboardShortcut.vue'
+import FilterSuggestions from './FilterSuggestions.vue'
+
+interface Props {
+  modelValue?: string
+  placeholder?: string
+  keywords?: string[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  placeholder: 'Filter...',
+  keywords: () => []
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+  (e: 'search', value: string): void
+}>()
+
+const { suggestions, getMatchingSuggestions, isValidFilter, addUsedFilter } = useFilterSuggestions()
+const showSuggestions = ref(false)
+const inputRef = ref<HTMLInputElement | null>(null)
+const wrapperRef = ref<HTMLDivElement | null>(null)
+
+const handleInput = (e: Event) => {
+  const target = e.target as HTMLInputElement
+  emit('update:modelValue', target.value)
+  if (wrapperRef.value) {
+    wrapperRef.value.scrollLeft = target.scrollLeft
+  }
+}
+
+const handleScroll = (e: Event) => {
+  const target = e.target as HTMLInputElement
+  if (wrapperRef.value) {
+    wrapperRef.value.scrollLeft = target.scrollLeft
+  }
+}
+
+const handleKeyDown = (e: KeyboardEvent) => {
+  if (e.key === 'Enter') {
+    e.preventDefault()
+    emit('search', props.modelValue)
+    showSuggestions.value = false
+  }
+}
+
+const handleRemoveFilter = (filter: string) => {
+  const filters = props.modelValue.split(' ')
+  const newValue = filters.filter(f => f !== filter).join(' ')
+  emit('update:modelValue', newValue)
+}
+
+const closeMenu = () => {
+  showSuggestions.value = false
+}
+
+const keywordSet = computed(() => new Set(props.keywords.map((k: string) => k.toLowerCase())))
+
+const highlightedText = computed(() => {
+  const parts = props.modelValue.split(/(\s+)/)
+  return parts.map(part => {
+    const match = part.match(/^([^:]+):(.+)$/)
+    if (match && isValidFilter(`${match[1]}:`)) {
+      return {
+        prefix: `${match[1]}:`,
+        value: match[2],
+        isFilter: true
+      }
+    }
+    return {
+      text: part,
+      isFilter: false
+    }
+  })
+})
+
+// Add new keyboard shortcut handler
+onMounted(() => {
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === '/' && document.activeElement !== inputRef.value) {
+      e.preventDefault()
+      inputRef.value?.focus()
+    }
+  }
+  document.addEventListener('keydown', handleKeyDown)
+  onUnmounted(() => document.removeEventListener('keydown', handleKeyDown))
+})
+
+const handleSuggestionSelect = (prefix: string) => {
+  const newValue = `${props.modelValue}${prefix}`
+  emit('update:modelValue', newValue)
+  addUsedFilter(prefix)
+  inputRef.value?.focus()
+}
+</script>
+
+<template>
+  <div class="relative">
+    <div class="relative h-8 flex items-center">
+      <div class="absolute left-2 flex items-center pointer-events-none text-muted-foreground">
+        <IconSearch class="h-4 w-4" />
+      </div>
+
+      <div
+        ref="wrapperRef"
+        class="absolute inset-0 flex items-center overflow-x-auto whitespace-pre pl-8 pr-2.5 py-1 text-[13px] pointer-events-none scrollbar-hide"
+      >
+        <template v-for="(part, i) in highlightedText" :key="i">
+          <template v-if="part.isFilter">
+            <span class="text-muted-foreground">{{ part.prefix }}</span>
+            <span class="bg-primary/10 text-primary rounded-sm">{{ part.value }}</span>
+          </template>
+          <span v-else>{{ part.text }}</span>
+        </template>
+      </div>
+
+      <input
+        ref="inputRef"
+        type="text"
+        :value="modelValue"
+        @input="handleInput"
+        @keydown="handleKeyDown"
+        @scroll="handleScroll"
+        @focus="showSuggestions = true"
+        :placeholder="placeholder"
+        class="h-full w-full rounded-md border border-input pl-8 pr-2.5 py-1 text-[13px] bg-transparent ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring text-transparent caret-foreground"
+      />
+
+      <div class="absolute right-2 flex items-center pointer-events-none">
+        <KeyboardShortcut shortcut="/" />
+      </div>
+    </div>
+
+    <FilterSuggestions
+      :show="showSuggestions"
+      :suggestions="suggestions"
+      :model-value="modelValue"
+      @select="handleSuggestionSelect"
+      @remove="handleRemoveFilter"
+      @close="closeMenu"
+    />
+  </div>
+</template>
+
+<style scoped>
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+</style>
diff --git a/components/ui/search/FilterSuggestions.vue b/components/ui/search/FilterSuggestions.vue
new file mode 100644
index 0000000..cdef2aa
--- /dev/null
+++ b/components/ui/search/FilterSuggestions.vue
@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { useFilterSuggestions } from '~/components/ui/search/composables/useFilterSuggestions'
+import type { FilterSuggestion } from '~/components/ui/search/composables/useFilterSuggestions'
+
+interface ActiveFilter extends FilterSuggestion {
+  value: string
+  full: string
+}
+
+interface Props {
+  show: boolean
+  suggestions: FilterSuggestion[]
+  modelValue: string
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  (e: 'select', value: string): void
+  (e: 'remove', filter: string): void
+  (e: 'close'): void
+}>()
+
+const { suggestions: allSuggestions } = useFilterSuggestions()
+
+const activeFilters = computed<ActiveFilter[]>(() => {
+  if (!props.modelValue) return []
+  
+  const parts = props.modelValue.split(' ')
+  return parts
+    .map(part => {
+      const match = part.match(/^([^:]+):(.+)$/)
+      if (match) {
+        const [_, prefix, value] = match
+        const filterPrefix = `${prefix}:`
+        const filter = allSuggestions.value.find(s => s.prefix === filterPrefix)
+        if (filter) {
+          return {
+            ...filter,
+            value,
+            full: part
+          }
+        }
+      }
+      return null
+    })
+    .filter((f): f is ActiveFilter => f !== null)
+})
+
+const availableFilters = computed(() => {
+  const usedPrefixes = new Set(activeFilters.value.map(f => f.prefix))
+  return props.suggestions.filter(s => !usedPrefixes.has(s.prefix))
+})
+
+const menuRef = ref<HTMLDivElement | null>(null)
+
+onClickOutside(menuRef, () => {
+  emit('close')
+})
+</script>
+
+<template>
+  <div
+    v-if="show"
+    ref="menuRef"
+    class="absolute left-0 top-full mt-1 w-full rounded-md border bg-popover shadow-md z-50"
+  >
+    <!-- Filtros activos -->
+    <div v-if="activeFilters.length" class="p-1.5 border-b">
+      <div class="text-[10px] font-medium text-muted-foreground mb-1">Active filters</div>
+      <div class="space-y-0.5">
+        <div
+          v-for="filter in activeFilters"
+          :key="filter.prefix"
+          class="flex items-center gap-2 px-2 py-1.5 text-sm rounded-sm bg-accent/20 group"
+        >
+          <Icon :name="filter.icon" class="h-3 w-3 text-muted-foreground" />
+          <div class="flex items-center gap-1 min-w-0">
+            <span class="font-medium text-xs whitespace-nowrap">{{ filter.prefix }}</span>
+            <span class="text-xs text-accent-foreground truncate">{{ filter.value }}</span>
+          </div>
+          <button 
+            @click="emit('remove', filter.full)"
+            class="ml-auto opacity-0 group-hover:opacity-100 hover:text-destructive transition-opacity shrink-0"
+          >
+            <Icon name="octicon:x-16" class="h-3 w-3" />
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Lista de filtros disponibles -->
+    <div class="p-1.5 space-y-0.5">
+      <div class="text-[10px] font-medium text-muted-foreground mb-1">Available filters</div>
+      <button
+        v-for="item in availableFilters"
+        :key="item.prefix"
+        @click="emit('select', item.prefix)"
+        class="w-full flex items-center gap-2 px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground rounded-sm group"
+      >
+        <Icon :name="item.icon" class="h-4 w-4 text-muted-foreground group-hover:text-accent-foreground/70" />
+        <div class="flex items-baseline justify-between w-full">
+          <span class="font-medium">{{ item.prefix }}</span>
+          <span class="text-xs text-muted-foreground group-hover:text-accent-foreground/70">
+            {{ item.label }}
+          </span>
+        </div>
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/components/ui/search/KeyboardShortcut.vue b/components/ui/search/KeyboardShortcut.vue
new file mode 100644
index 0000000..bb02cb0
--- /dev/null
+++ b/components/ui/search/KeyboardShortcut.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineProps<{
+  shortcut: string
+}>()
+</script>
+
+<template>
+  <kbd class="pointer-events-none h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 inline-flex">
+    {{ shortcut }}
+  </kbd>
+</template>
diff --git a/components/ui/search/composables/useFilterSuggestions.ts b/components/ui/search/composables/useFilterSuggestions.ts
new file mode 100644
index 0000000..c1e9753
--- /dev/null
+++ b/components/ui/search/composables/useFilterSuggestions.ts
@@ -0,0 +1,54 @@
+import { ref } from 'vue'
+
+export interface FilterSuggestion {
+  prefix: string
+  label: string
+  icon: string
+}
+
+export const useFilterSuggestions = () => {
+  const suggestions = ref<FilterSuggestion[]>([
+    { prefix: 'repo:', label: 'Repository (user/repo)', icon: 'octicon:repo-16' },
+    { prefix: 'user:', label: 'User', icon: 'octicon:person-16' },
+    { prefix: 'org:', label: 'Organization', icon: 'octicon:organization-16' },
+    { prefix: 'in:', label: 'Search in', icon: 'octicon:search-16' },
+    { prefix: 'size:', label: 'Size', icon: 'octicon:file-16' },
+    { prefix: 'stars:', label: 'Stars', icon: 'octicon:star-16' },
+    { prefix: 'language:', label: 'Language', icon: 'octicon:code-16' },
+    { prefix: 'created:', label: 'Created date', icon: 'octicon:calendar-16' },
+    { prefix: 'pushed:', label: 'Push date', icon: 'octicon:git-commit-16' },
+    { prefix: 'topic:', label: 'Topic', icon: 'octicon:hash-16' },
+    { prefix: 'is:', label: 'State', icon: 'octicon:circle-16' },
+    { prefix: 'fork:', label: 'Fork', icon: 'octicon:repo-forked-16' }
+  ])
+
+  const usedFilters = ref<string[]>([])
+
+  const addUsedFilter = (filter: string) => {
+    if (!usedFilters.value.includes(filter)) {
+      usedFilters.value.unshift(filter)
+      if (usedFilters.value.length > 5) usedFilters.value.pop()
+    }
+  }
+
+  const getMatchingSuggestions = (query: string): FilterSuggestion[] => {
+    const lastWord = query.split(' ').pop()?.toLowerCase() || ''
+    if (!lastWord) return suggestions.value
+    return suggestions.value.filter(s => 
+      s.prefix.toLowerCase().includes(lastWord) || 
+      s.label.toLowerCase().includes(lastWord)
+    )
+  }
+
+  const isValidFilter = (text: string): boolean => {
+    return suggestions.value.some(s => text.startsWith(s.prefix))
+  }
+
+  return {
+    suggestions,
+    usedFilters,
+    addUsedFilter,
+    getMatchingSuggestions,
+    isValidFilter
+  } as const
+}
diff --git a/nuxt.config.ts b/nuxt.config.ts
index c1af008..db2a048 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -14,7 +14,8 @@ export default defineNuxtConfig({
     '@nuxtjs/robots',
     'shadcn-nuxt',
     '@nuxt/icon',
-    '@nuxtjs/seo'
+    '@nuxtjs/seo',
+    'nuxt-schema-org'
   ],
   tailwindcss: {
     cssPath: '~/assets/css/tailwind.css',
@@ -67,10 +68,11 @@ export default defineNuxtConfig({
     identity: {
       type: 'Organization',
       name: 'GitHub Open Source Explorer',
+      url: 'https://github-explorer.nuxt.dev',
       logo: 'https://github-explorer.nuxt.dev/logo.png'
     },
-    host: process.env.NUXT_PUBLIC_SITE_URL || 'https://github-explorer.nuxt.dev',
-    includeHomeInBreadcrumb: false
+    host: 'https://github-explorer.nuxt.dev',
+    canonicalHost: 'https://github-explorer.nuxt.dev'
   },
   routeRules: {
     // Página principal
diff --git a/package.json b/package.json
index 343f71e..85d4e75 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "clsx": "^2.1.1",
     "lucide-vue-next": "^0.475.0",
     "nuxt": "^3.15.4",
+    "nuxt-schema-org": "4.1.3",
     "pinia": "^3.0.0",
     "radix-vue": "^1.9.13",
     "reka-ui": "^2.0.0",
diff --git a/pages/index.vue b/pages/index.vue
index 6a7a203..d4d5506 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -2,6 +2,7 @@
 import { useGithubStore } from '~/stores/github'
 import { ref, watch, onMounted, computed } from 'vue'
 import { GitHubService } from '~/services/github'
+import { useSchemaOrg, defineWebPage } from '#imports'
 import {
   Select,
   SelectContent,
@@ -10,7 +11,7 @@ import {
   SelectValue,
 } from '#components'
 import { OrderOptions, SortOptions } from '~/types'
-import SearchInput from '~/components/search/SearchInput.vue'
+import FilterInput from '~/components/ui/search/FilterInput.vue'
 
 // Agregar meta tags dinámicos
 useSeoMeta({
@@ -28,16 +29,8 @@ useSchemaOrg([
     description: 'Discover amazing open source projects on GitHub',
     potentialAction: {
       '@type': 'SearchAction',
-      target: {
-        '@type': 'EntryPoint',
-        urlTemplate: `https://github-explorer.nuxt.dev'}/search?q={search_term_string}`,
-        actionPlatform: 'http://schema.org/WebSite'
-      },
-      'query-input': {
-        '@type': 'PropertyValueSpecification',
-        valueRequired: true,
-        valueName: 'search_term_string'
-      }
+      target: 'https://github-explorer.nuxt.dev/search?q={search_term_string}',
+      'query-input': 'required name=search_term_string'
     }
   })
 ])
@@ -64,9 +57,9 @@ const filters = ref<Filters>({
 const selectedLanguage = ref<string>('all')
 const languages = ref(GitHubService.getLanguages())
 
-const onSearch = () => {
+const onSearch = (query: string) => {
   store.searchRepositories({
-    query: searchQuery.value,
+    query: query,
     language: selectedLanguage.value === 'all' ? undefined : selectedLanguage.value,
     minStars: filters.value.minStars
   })
@@ -150,6 +143,10 @@ const clearFilter = (key: keyof Filters) => {
   }
   onFiltersApply()
 }
+
+
+const filter = ref('')
+const keywords = ['is:issue', 'is:open', 'label:bug', 'author:octocat']
 </script>
 
 <template>
@@ -169,9 +166,11 @@ const clearFilter = (key: keyof Filters) => {
         <div class="max-w-4xl mx-auto space-y-4">
           <div class="flex flex-col sm:flex-row gap-4 px-2 sm:px-0">
             <div class="relative flex-1">
-              <SearchInput
-                v-model="searchQuery"
-                mode="inline"
+              <FilterInput
+                v-model="filter"
+                :keywords="keywords"
+                placeholder="Search repositories..."
+                class="max-w-xl"
                 @search="onSearch"
               />
             </div>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b5a740b..d2c4385 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -38,6 +38,9 @@ importers:
       nuxt:
         specifier: ^3.15.4
         version: 3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.1)(db0@0.2.4)(ioredis@5.5.0)(magicast@0.3.5)(rollup@4.34.6)(terser@5.38.2)(typescript@5.7.3)(vite@6.1.0(@types/node@22.13.1)(jiti@2.4.2)(terser@5.38.2)(yaml@2.7.0))(yaml@2.7.0)
+      nuxt-schema-org:
+        specifier: 4.1.3
+        version: 4.1.3(@unhead/vue@1.11.18(vue@3.5.13(typescript@5.7.3)))(magicast@0.3.5)(unhead@1.11.18)(vue@3.5.13(typescript@5.7.3))
       pinia:
         specifier: ^3.0.0
         version: 3.0.1(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3))
@@ -1428,8 +1431,8 @@ packages:
   '@unhead/dom@1.11.18':
     resolution: {integrity: sha512-zQuJUw/et9zYEV0SZWTDX23IgurwMaXycAuxt4L6OgNL0T4TWP3a0J/Vm3Q02hmdNo/cPKeVBrwBdnFUXjGU4w==}
 
-  '@unhead/schema-org@1.11.18':
-    resolution: {integrity: sha512-0gtolLQh9JEyD52+5Rp6zGppf/ejDDCKasFfoVN9huDe2PtZ44A2MtszjhOJWCqMCMpplWdVKuvnxp87n4+Y1g==}
+  '@unhead/schema-org@1.11.19':
+    resolution: {integrity: sha512-1gSEhNGKXLhLbL6Gri3YfWQiEQM+DaGlF4987eIfkTUxlPVwtr5IfDmpbY7TbJaexQlC14p0CfYuPo3RLQlcHQ==}
     peerDependencies:
       '@unhead/vue': ^1.11.14
       unhead: ^1.11.14
@@ -1440,9 +1443,15 @@ packages:
   '@unhead/schema@1.11.18':
     resolution: {integrity: sha512-a3TA/OJCRdfbFhcA3Hq24k1ZU1o9szicESrw8DZcGyQFacHnh84mVgnyqSkMnwgCmfN4kvjSiTBlLEHS6+wATw==}
 
+  '@unhead/schema@1.11.19':
+    resolution: {integrity: sha512-7VhYHWK7xHgljdv+C01MepCSYZO2v6OhgsfKWPxRQBDDGfUKCUaChox0XMq3tFvXP6u4zSp6yzcDw2yxCfVMwg==}
+
   '@unhead/shared@1.11.18':
     resolution: {integrity: sha512-OsupRQRxJqqnuKiL1Guqipjbl7MndD5DofvmGa3PFGu2qNPmOmH2mxGFjRBBgq2XxY1KalIHl/2I9HV6gbK8cw==}
 
+  '@unhead/shared@1.11.19':
+    resolution: {integrity: sha512-UYE9EIeQLJOhx8vC71bWGkAGY4Zzq/H8qYlihowUg4NiFOfL+KKMnj96datb74PRxSDvHac9V3OLktNcsX2NuA==}
+
   '@unhead/ssr@1.11.18':
     resolution: {integrity: sha512-uaHPz0RRAb18yKeCmHyHk5QKWRk/uHpOrqSbhRXTOhbrd3Ur3gGTVaAoyUoRYKGPU5B5/pyHh3TfLw0LkfrH1A==}
 
@@ -3146,8 +3155,8 @@ packages:
     resolution: {integrity: sha512-TeBsI9Ic/ETD4fTpycKW9lYp5Q2hd5ozE5Bt22opTsIuqzSx20ZKzonj0yiHRgShMhGE+YMZhFzk7YvDaNNWGA==}
     engines: {node: '>=18.0.0'}
 
-  nuxt-schema-org@4.1.1:
-    resolution: {integrity: sha512-2/Nhoh07ZfnwiIDUt5qCGUraqnBf0Pa2UhO7Vf/3U48ayNuq+VepTyFar15EBWLp1hysAEiUSkGAJiJAgqwCxw==}
+  nuxt-schema-org@4.1.3:
+    resolution: {integrity: sha512-xUhWCKlWjp6J5ktmmdz4eYPl2fifmqQtVXWharnKXLRATH5z2j4ayA1taZXUuoOZLlKAXIP1HUEm23ZCI+/DhA==}
 
   nuxt-seo-utils@6.0.8:
     resolution: {integrity: sha512-Gx2zqLpHBU5KZM8CZ91V/JxCHXR4sRlRwoPtRfWKqxPH+a35abe2l4YaIBz8YOwL23t9Yo3ww1+zUleLUExYMA==}
@@ -3155,9 +3164,15 @@ packages:
   nuxt-site-config-kit@3.0.6:
     resolution: {integrity: sha512-QBOFzAIo+D02avFQQ7gNlRyA372/PQlgW2IjL2nttvjfHapqYbvP6tIP55soL+1+D8YvF/bGZgS+vJtfQhroUg==}
 
+  nuxt-site-config-kit@3.1.1:
+    resolution: {integrity: sha512-WA29fs1RnN1vXLEIplLndequS4uSX4Bm5WvhjutnZaL92mtWWblwbF3lbbXY9zNsUDzGlmmrltlbV4dJMVkqrQ==}
+
   nuxt-site-config@3.0.6:
     resolution: {integrity: sha512-Mkyen81br21/nA2sxlLCOtJZ2L8sGL+YzxHlsVhLhEnC355CP2SwKVtYqJNJ4aYFbxeusqZXJFiD4KbveHhk0w==}
 
+  nuxt-site-config@3.1.1:
+    resolution: {integrity: sha512-dyR0bceTGJPNTrfWVoEoltiveEU2sKUhQXoawkavtmIgUA0nbMXxuMEAXZaCx8xYvfsmSlStfipGlwelpl9faA==}
+
   nuxt@3.15.4:
     resolution: {integrity: sha512-hSbZO4mR0uAMJtZPNTnCfiAtgleoOu28gvJcBNU7KQHgWnNXPjlWgwMczko2O4Tmnv9zIe/CQged+2HsPwl2ZA==}
     engines: {node: ^18.20.5 || ^20.9.0 || >=22.0.0}
@@ -3824,6 +3839,10 @@ packages:
     resolution: {integrity: sha512-BPwJGUeDaDCHihkORDchNyyTvWFhcusy1XMmhEVTQTwGeybFbp8YEmB+njbPnth1FibULBSBVwCQni25XlCUDg==}
     engines: {node: '>=18'}
 
+  sirv@3.0.1:
+    resolution: {integrity: sha512-FoqMu0NCGBLCcAkS1qA+XJIQTR6/JHfQXl+uGteNCQ76T91DMUjPa9xfmeqMY3z80nLSg9yQmNjK0Px6RWsH/A==}
+    engines: {node: '>=18'}
+
   sisteransi@1.0.5:
     resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
 
@@ -3832,6 +3851,11 @@ packages:
     peerDependencies:
       vue: ^3
 
+  site-config-stack@3.1.1:
+    resolution: {integrity: sha512-hIDGCIsfoOLjni4yy7EC4LpPMF5+Le3PvQ9/YCi/l4F+g7OKNE1ksemnQMsA8gDJ+duFJFWL4k2fO9jSzz3aZw==}
+    peerDependencies:
+      vue: ^3
+
   slash@5.1.0:
     resolution: {integrity: sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==}
     engines: {node: '>=14.16'}
@@ -5557,7 +5581,7 @@ snapshots:
       '@nuxtjs/sitemap': 7.2.4(h3@1.15.0)(magicast@0.3.5)(vite@6.1.0(@types/node@22.13.1)(jiti@2.4.2)(terser@5.38.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
       nuxt-link-checker: 4.1.0(magicast@0.3.5)(typescript@5.7.3)(vite@6.1.0(@types/node@22.13.1)(jiti@2.4.2)(terser@5.38.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
       nuxt-og-image: 4.1.2(magicast@0.3.5)(vite@6.1.0(@types/node@22.13.1)(jiti@2.4.2)(terser@5.38.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
-      nuxt-schema-org: 4.1.1(@unhead/vue@1.11.18(vue@3.5.13(typescript@5.7.3)))(magicast@0.3.5)(unhead@1.11.18)(vite@6.1.0(@types/node@22.13.1)(jiti@2.4.2)(terser@5.38.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+      nuxt-schema-org: 4.1.3(@unhead/vue@1.11.18(vue@3.5.13(typescript@5.7.3)))(magicast@0.3.5)(unhead@1.11.18)(vue@3.5.13(typescript@5.7.3))
       nuxt-seo-utils: 6.0.8(magicast@0.3.5)(rollup@4.34.6)(vite@6.1.0(@types/node@22.13.1)(jiti@2.4.2)(terser@5.38.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
       nuxt-site-config: 3.0.6(magicast@0.3.5)(vite@6.1.0(@types/node@22.13.1)(jiti@2.4.2)(terser@5.38.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
     transitivePeerDependencies:
@@ -6037,10 +6061,10 @@ snapshots:
       '@unhead/schema': 1.11.18
       '@unhead/shared': 1.11.18
 
-  '@unhead/schema-org@1.11.18(@unhead/vue@1.11.18(vue@3.5.13(typescript@5.7.3)))(unhead@1.11.18)':
+  '@unhead/schema-org@1.11.19(@unhead/vue@1.11.18(vue@3.5.13(typescript@5.7.3)))(unhead@1.11.18)':
     dependencies:
-      '@unhead/schema': 1.11.18
-      '@unhead/shared': 1.11.18
+      '@unhead/schema': 1.11.19
+      '@unhead/shared': 1.11.19
       defu: 6.1.4
       ohash: 1.1.4
       ufo: 1.5.4
@@ -6053,11 +6077,21 @@ snapshots:
       hookable: 5.5.3
       zhead: 2.2.4
 
+  '@unhead/schema@1.11.19':
+    dependencies:
+      hookable: 5.5.3
+      zhead: 2.2.4
+
   '@unhead/shared@1.11.18':
     dependencies:
       '@unhead/schema': 1.11.18
       packrup: 0.1.2
 
+  '@unhead/shared@1.11.19':
+    dependencies:
+      '@unhead/schema': 1.11.19
+      packrup: 0.1.2
+
   '@unhead/ssr@1.11.18':
     dependencies:
       '@unhead/schema': 1.11.18
@@ -8033,22 +8067,20 @@ snapshots:
       - vite
       - vue
 
-  nuxt-schema-org@4.1.1(@unhead/vue@1.11.18(vue@3.5.13(typescript@5.7.3)))(magicast@0.3.5)(unhead@1.11.18)(vite@6.1.0(@types/node@22.13.1)(jiti@2.4.2)(terser@5.38.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3)):
+  nuxt-schema-org@4.1.3(@unhead/vue@1.11.18(vue@3.5.13(typescript@5.7.3)))(magicast@0.3.5)(unhead@1.11.18)(vue@3.5.13(typescript@5.7.3)):
     dependencies:
-      '@nuxt/devtools-kit': 2.0.0(magicast@0.3.5)(vite@6.1.0(@types/node@22.13.1)(jiti@2.4.2)(terser@5.38.2)(yaml@2.7.0))
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
-      '@unhead/schema-org': 1.11.18(@unhead/vue@1.11.18(vue@3.5.13(typescript@5.7.3)))(unhead@1.11.18)
+      '@unhead/schema-org': 1.11.19(@unhead/vue@1.11.18(vue@3.5.13(typescript@5.7.3)))(unhead@1.11.18)
       defu: 6.1.4
-      nuxt-site-config: 3.0.6(magicast@0.3.5)(vite@6.1.0(@types/node@22.13.1)(jiti@2.4.2)(terser@5.38.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+      nuxt-site-config: 3.1.1(magicast@0.3.5)(vue@3.5.13(typescript@5.7.3))
       pathe: 2.0.3
       pkg-types: 1.3.1
-      sirv: 3.0.0
+      sirv: 3.0.1
     transitivePeerDependencies:
       - '@unhead/vue'
       - magicast
       - supports-color
       - unhead
-      - vite
       - vue
 
   nuxt-seo-utils@6.0.8(magicast@0.3.5)(rollup@4.34.6)(vite@6.1.0(@types/node@22.13.1)(jiti@2.4.2)(terser@5.38.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3)):
@@ -8085,6 +8117,18 @@ snapshots:
       - supports-color
       - vue
 
+  nuxt-site-config-kit@3.1.1(magicast@0.3.5)(vue@3.5.13(typescript@5.7.3)):
+    dependencies:
+      '@nuxt/kit': 3.15.4(magicast@0.3.5)
+      pkg-types: 1.3.1
+      site-config-stack: 3.1.1(vue@3.5.13(typescript@5.7.3))
+      std-env: 3.8.0
+      ufo: 1.5.4
+    transitivePeerDependencies:
+      - magicast
+      - supports-color
+      - vue
+
   nuxt-site-config@3.0.6(magicast@0.3.5)(vite@6.1.0(@types/node@22.13.1)(jiti@2.4.2)(terser@5.38.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3)):
     dependencies:
       '@nuxt/devtools-kit': 1.7.0(magicast@0.3.5)(vite@6.1.0(@types/node@22.13.1)(jiti@2.4.2)(terser@5.38.2)(yaml@2.7.0))
@@ -8102,6 +8146,20 @@ snapshots:
       - vite
       - vue
 
+  nuxt-site-config@3.1.1(magicast@0.3.5)(vue@3.5.13(typescript@5.7.3)):
+    dependencies:
+      '@nuxt/kit': 3.15.4(magicast@0.3.5)
+      nuxt-site-config-kit: 3.1.1(magicast@0.3.5)(vue@3.5.13(typescript@5.7.3))
+      pathe: 2.0.3
+      pkg-types: 1.3.1
+      sirv: 3.0.1
+      site-config-stack: 3.1.1(vue@3.5.13(typescript@5.7.3))
+      ufo: 1.5.4
+    transitivePeerDependencies:
+      - magicast
+      - supports-color
+      - vue
+
   nuxt@3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.1)(db0@0.2.4)(ioredis@5.5.0)(magicast@0.3.5)(rollup@4.34.6)(terser@5.38.2)(typescript@5.7.3)(vite@6.1.0(@types/node@22.13.1)(jiti@2.4.2)(terser@5.38.2)(yaml@2.7.0))(yaml@2.7.0):
     dependencies:
       '@nuxt/cli': 3.21.1(magicast@0.3.5)
@@ -8957,6 +9015,12 @@ snapshots:
       mrmime: 2.0.0
       totalist: 3.0.1
 
+  sirv@3.0.1:
+    dependencies:
+      '@polka/url': 1.0.0-next.28
+      mrmime: 2.0.0
+      totalist: 3.0.1
+
   sisteransi@1.0.5: {}
 
   site-config-stack@3.0.6(vue@3.5.13(typescript@5.7.3)):
@@ -8964,6 +9028,11 @@ snapshots:
       ufo: 1.5.4
       vue: 3.5.13(typescript@5.7.3)
 
+  site-config-stack@3.1.1(vue@3.5.13(typescript@5.7.3)):
+    dependencies:
+      ufo: 1.5.4
+      vue: 3.5.13(typescript@5.7.3)
+
   slash@5.1.0: {}
 
   smob@1.5.0: {}
diff --git a/public/logo.png b/public/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..a484bd70bed707061f0a16e62691bec4f94e3a55
GIT binary patch
literal 16564
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
bPXA7pQ%Q#i)k_EdcRXYzmB2OPMnV4%uTziE

literal 0
HcmV?d00001


From 3fe2654ec44ade12634170050c63867c2e6ccdb4 Mon Sep 17 00:00:00 2001
From: Sean Luis <seanluis47@gmail.com>
Date: Mon, 24 Feb 2025 11:17:18 -0300
Subject: [PATCH 10/11] feat: enhance FilterInput component with dynamic class
 binding and improve layout responsiveness

---
 components/ui/search/FilterInput.vue | 31 +++++++++++++++++++---------
 pages/index.vue                      |  2 +-
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/components/ui/search/FilterInput.vue b/components/ui/search/FilterInput.vue
index a95d3c5..f715e26 100644
--- a/components/ui/search/FilterInput.vue
+++ b/components/ui/search/FilterInput.vue
@@ -4,6 +4,7 @@ import { useFilterSuggestions } from './composables/useFilterSuggestions'
 import IconSearch from '@/components/icons/IconSearch.vue'
 import KeyboardShortcut from './KeyboardShortcut.vue'
 import FilterSuggestions from './FilterSuggestions.vue'
+import { cn } from '@/lib/utils'
 
 interface Props {
   modelValue?: string
@@ -11,10 +12,13 @@ interface Props {
   keywords?: string[]
 }
 
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props & {
+  class?: string
+}>(), {
   modelValue: '',
   placeholder: 'Filter...',
-  keywords: () => []
+  keywords: () => [],
+  class: ''
 })
 
 const emit = defineEmits<{
@@ -101,20 +105,20 @@ const handleSuggestionSelect = (prefix: string) => {
 </script>
 
 <template>
-  <div class="relative">
-    <div class="relative h-8 flex items-center">
-      <div class="absolute left-2 flex items-center pointer-events-none text-muted-foreground">
+  <div :class="cn('relative', props.class)">
+    <div class="relative flex items-center h-full"> <!-- Cambiado de h-8 a h-full -->
+      <div :class="cn('absolute left-2 flex items-center pointer-events-none text-muted-foreground')">
         <IconSearch class="h-4 w-4" />
       </div>
 
       <div
         ref="wrapperRef"
-        class="absolute inset-0 flex items-center overflow-x-auto whitespace-pre pl-8 pr-2.5 py-1 text-[13px] pointer-events-none scrollbar-hide"
+        :class="cn('absolute inset-0 flex items-center overflow-x-auto whitespace-pre pl-8 pr-2.5 py-1 text-[13px] pointer-events-none scrollbar-hide')"
       >
         <template v-for="(part, i) in highlightedText" :key="i">
           <template v-if="part.isFilter">
-            <span class="text-muted-foreground">{{ part.prefix }}</span>
-            <span class="bg-primary/10 text-primary rounded-sm">{{ part.value }}</span>
+            <span :class="cn('text-muted-foreground')">{{ part.prefix }}</span>
+            <span :class="cn('bg-primary/10 text-primary rounded-sm')">{{ part.value }}</span>
           </template>
           <span v-else>{{ part.text }}</span>
         </template>
@@ -129,10 +133,17 @@ const handleSuggestionSelect = (prefix: string) => {
         @scroll="handleScroll"
         @focus="showSuggestions = true"
         :placeholder="placeholder"
-        class="h-full w-full rounded-md border border-input pl-8 pr-2.5 py-1 text-[13px] bg-transparent ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring text-transparent caret-foreground"
+        :class="cn(
+          'h-full w-full rounded-md border border-input',
+          'pl-8 pr-2.5 py-1 text-[13px]',
+          'bg-transparent ring-offset-background',
+          'placeholder:text-muted-foreground',
+          'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
+          'text-transparent caret-foreground'
+        )"
       />
 
-      <div class="absolute right-2 flex items-center pointer-events-none">
+      <div :class="cn('absolute right-2 flex items-center pointer-events-none')">
         <KeyboardShortcut shortcut="/" />
       </div>
     </div>
diff --git a/pages/index.vue b/pages/index.vue
index d4d5506..7dcc0f6 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -170,7 +170,7 @@ const keywords = ['is:issue', 'is:open', 'label:bug', 'author:octocat']
                 v-model="filter"
                 :keywords="keywords"
                 placeholder="Search repositories..."
-                class="max-w-xl"
+                class="h-9"
                 @search="onSearch"
               />
             </div>

From 4e7e69c3bcaa17ccfa6e799424863edb7cb7dd3d Mon Sep 17 00:00:00 2001
From: Sean Luis <seanluis47@gmail.com>
Date: Mon, 24 Feb 2025 11:25:45 -0300
Subject: [PATCH 11/11] feat: refactor import of FilterInput component for
 improved module structure

---
 components/ui/search/index.ts | 1 +
 pages/index.vue               | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)
 create mode 100644 components/ui/search/index.ts

diff --git a/components/ui/search/index.ts b/components/ui/search/index.ts
new file mode 100644
index 0000000..60f2b14
--- /dev/null
+++ b/components/ui/search/index.ts
@@ -0,0 +1 @@
+export { default as FilterInput } from '~/components/ui/search/FilterInput.vue';
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index 7dcc0f6..aef62fc 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -11,7 +11,7 @@ import {
   SelectValue,
 } from '#components'
 import { OrderOptions, SortOptions } from '~/types'
-import FilterInput from '~/components/ui/search/FilterInput.vue'
+import { FilterInput } from '~/components/ui/search'
 
 // Agregar meta tags dinámicos
 useSeoMeta({