nuevo landing

Rafael Lopez
Commit e6bdfc2d5d0f4a86dd3315d5a54eacfd8dca6ec6 e6bdfc2d 1 parent ebc2cc7c
Showing 2 changed files with 195 additions and 14 deletions
src/routes/+page.svelte
src/routes/test/+page.svelte
--- a/src/routes/+page.svelte
View file @e6bdfc2
+++ b/src/routes/+page.svelte
View file @e6bdfc2
--- a/src/routes/test/+page.svelte
View file @e6bdfc2
+++ b/src/routes/test/+page.svelte
View file @e6bdfc2
 <script>
   import { onMount } from 'svelte';
+  import { goto } from '$app/navigation';
+  import {
+    query,
+    results,
+    isLoading,
+    indexLoaded,
+    error,
+    selectedIndex,
+    showResults,
+    initIndex,
+    performSearch,
+    clearSearch,
+    navigateResults
+  } from '$lib/stores/searchStore';
   let mounted = false;
   let mode = 'archivo';
@@ -12,8 +26,13 @@
   let hWidget = null;
   let hGear = false;
   let mobileSettingsOpen = false;
+  let searchInput;
+  let debounceTimer;
-  onMount(() => { setTimeout(() => { mounted = true; }, 80); });
+  onMount(() => {
+    setTimeout(() => { mounted = true; }, 80);
+    initIndex();
+  });
   function toggleMobileSettings() {
     mobileSettingsOpen = !mobileSettingsOpen;
@@ -38,8 +57,82 @@
         { label: 'Regalías', bg: 'rgba(160,150,170,0.09)', color: '#aaa0b0' },
       ];
-  function switchMode(m) { mode = m; searchVal = ''; }
+  function switchMode(m) {
-  function handleBlur() { setTimeout(() => { searchFocused = false; }, 200); }
+    mode = m;
+    searchVal = '';
+    clearSearch();
+    if (searchInput) searchInput.value = '';
+  }
+
+  function handleBlur() {
+    setTimeout(() => { searchFocused = false; }, 200);
+  }
+
+  function handleInput(e) {
+    const value = e.target.value;
+    searchVal = value;
+    clearTimeout(debounceTimer);
+    debounceTimer = setTimeout(() => {
+      performSearch(value);
+    }, 250);
+  }
+
+  function handleKeydown(e) {
+    if (!$showResults) return;
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        navigateResults('down', $results.length);
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        navigateResults('up', $results.length);
+        break;
+      case 'Enter':
+        e.preventDefault();
+        if ($selectedIndex >= 0 && $results[$selectedIndex]) {
+          handleSelect($results[$selectedIndex]);
+        }
+        break;
+      case 'Escape':
+        clearSearch();
+        searchVal = '';
+        if (searchInput) searchInput.value = '';
+        searchInput?.blur();
+        break;
+    }
+  }
+
+  function handleSelect(item) {
+    if (item.tipo === 'entidad') {
+      goto(`/entidad/${item.codigo}`);
+    } else if (item.tipo === 'objeto_gasto') {
+      goto(`/objeto/${item.codigo}`);
+    } else if (item.tipo === 'rubro') {
+      goto(`/rubro/${item.codigo}`);
+    }
+    clearSearch();
+    searchVal = '';
+    if (searchInput) searchInput.value = '';
+  }
+
+  function getTypeLabel(tipo) {
+    switch (tipo) {
+      case 'entidad': return 'ENTIDAD';
+      case 'objeto_gasto': return 'OBJETO';
+      case 'rubro': return 'RUBRO';
+      default: return tipo?.toUpperCase() || '';
+    }
+  }
+
+  function getTypeColor(tipo) {
+    switch (tipo) {
+      case 'entidad': return '#4A8B6E';
+      case 'objeto_gasto': return '#C9A751';
+      case 'rubro': return '#8B6E9B';
+      default: return '#6B6860';
+    }
+  }
   const WIDGETS_INGRESOS = [
     { id: 'rubros', label: 'tipos de ingreso', d: 'Impuestos, regalías, ventas, créditos', t: 'Recursos por rubros', n: '324', href: '/clasificadores/rubros' },
@@ -155,7 +248,7 @@
       <div class="hero-search anim" style="--d:520ms">
         <div class="search-wrap">
           <!-- Search bar unificado -->
-          <div class="search-bar" class:search-focused={searchFocused} style="--accent:{accent}">
+          <div class="search-bar" class:search-focused={searchFocused} class:search-has-results={searchFocused && ($results.length > 0 || ($query.length >= 2 && $results.length === 0) || $isLoading)} style="--accent:{accent}">
             <!-- Toggle integrado (desktop) -->
             <div class="toggle-bar toggle-desktop">
               <button class="toggle-btn" class:toggle-active={mode === 'archivo'} on:click={() => switchMode('archivo')}>
@@ -186,14 +279,28 @@
               <circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/>
             </svg>
             <div class="search-input-wrap">
-              <input type="text" bind:value={searchVal} on:focus={() => searchFocused = true} on:blur={handleBlur} />
+              <input
+                type="text"
+                bind:this={searchInput}
+                bind:value={searchVal}
+                on:input={handleInput}
+                on:keydown={handleKeydown}
+                on:focus={() => searchFocused = true}
+                on:blur={handleBlur}
+                disabled={!$indexLoaded}
+              />
               {#if !searchVal && !searchFocused}
                 <div class="search-placeholder">
                   <span class="blink-cursor" style="background:{accent}"></span>
-                  <span class="placeholder-text placeholder-desktop">{placeholder}</span>
+                  <span class="placeholder-text placeholder-desktop">{$indexLoaded ? placeholder : 'Cargando...'}</span>
-                  <span class="placeholder-text placeholder-mobile">{isD ? 'MEFP, Min. Salud, GAM...' : 'BOA, Publicidad, IDH...'}</span>
+                  <span class="placeholder-text placeholder-mobile">{$indexLoaded ? (isD ? 'MEFP, Min. Salud, GAM...' : 'BOA, Publicidad, IDH...') : 'Cargando...'}</span>
                 </div>
               {/if}
+              {#if searchVal && !$isLoading}
+                <button class="search-clear" on:click={() => { clearSearch(); searchVal = ''; if (searchInput) searchInput.value = ''; }}>
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+                </button>
+              {/if}
             </div>
             {#if !isD}
               <div class="gear-btn gear-desktop" class:gear-hover={hGear} on:mouseenter={() => hGear = true} on:mouseleave={() => hGear = false} role="button" tabindex="0">
@@ -205,6 +312,45 @@
             {/if}
           </div>
+          <!-- Search Results Dropdown -->
+          {#if $isLoading}
+            <div class="search-results">
+              <div class="search-loading">Buscando...</div>
+            </div>
+          {:else if searchFocused && $results.length > 0}
+            <div class="search-results">
+              {#each $results as item, i}
+                <button
+                  type="button"
+                  class="search-result-item"
+                  class:result-selected={$selectedIndex === i}
+                  on:click={() => handleSelect(item)}
+                >
+                  <div class="result-main">
+                    <span class="result-name">{item.nombre}</span>
+                    {#if item.sigla}
+                      <span class="result-sigla">({item.sigla})</span>
+                    {/if}
+                  </div>
+                  <div class="result-meta">
+                    {#if item.codigo}
+                      <span class="result-code">{item.codigo}</span>
+                    {/if}
+                    <span class="result-type" style="color:{getTypeColor(item.tipo)}">{getTypeLabel(item.tipo)}</span>
+                  </div>
+                </button>
+              {/each}
+            </div>
+          {:else if searchFocused && $query.length >= 2 && $results.length === 0}
+            <div class="search-results">
+              <div class="search-no-results">Sin resultados para "{$query}"</div>
+            </div>
+          {/if}
+
+          {#if $error}
+            <div class="search-error">{$error}</div>
+          {/if}
+
           <!-- Mobile settings panel -->
           <div class="mobile-settings-panel" class:mobile-settings-panel-open={mobileSettingsOpen}>
             <div class="mobile-toggle-bar">
@@ -237,7 +383,7 @@
     </div>
     <!-- Scroll hint -->
-    <div class="scroll-hint anim" style="--d:700ms">
+    <div class="scroll-hint anim" style="--d:700ms" class:scroll-hint-hidden={searchFocused && $results.length > 0}>
       <svg width="18" height="28" viewBox="0 0 18 28" fill="none" stroke="#B8B5AD" stroke-width="1.2" stroke-linecap="round">
         <rect x="1" y="1" width="16" height="26" rx="8"/><line x1="9" y1="7" x2="9" y2="12" opacity="0.7"/>
       </svg>
@@ -659,9 +805,9 @@
   .hero{background:#1C1C1A;color:#F5F0E8;flex:1;display:flex;flex-direction:column;justify-content:center;padding:40px 48px 32px;position:relative;overflow:hidden}
   .dot-pattern{position:absolute;inset:0;opacity:0.02;background-image:radial-gradient(circle at 1px 1px,#B8B5AD 0.5px,transparent 0);background-size:40px 40px}
   .dot-pattern-sm{position:absolute;inset:0;opacity:0.015;background-image:radial-gradient(circle at 1px 1px,#fff 0.5px,transparent 0);background-size:32px 32px}
-  .hero-inner{max-width:1060px;margin:0 auto;width:100%;position:relative;margin-top:-24px;text-align:center}
+  .hero-inner{max-width:1060px;margin:0 auto;width:100%;position:relative;margin-top:-80px;text-align:center}
-  .hero-identity{margin-bottom:28px}
+  .hero-identity{margin-bottom:20px}
-  .hero-search{display:flex;justify-content:center}
+  .hero-search{display:flex;justify-content:center;position:relative;z-index:50}
   .hero-tag{font-family:var(--mono);font-size:12px;letter-spacing:0.25em;color:#B8B5AD}
   .hero-title{font-size:clamp(44px,5.5vw,72px);font-weight:900;line-height:1.02;letter-spacing:-0.035em;max-width:720px;margin:14px auto 0}
   .hero-sub{font-family:var(--sans);font-size:clamp(16px,1.6vw,18px);color:#9B9890;max-width:100%;margin-top:14px;line-height:1.6}
@@ -670,9 +816,10 @@
   .stat-dot{margin:0 10px;opacity:0.3}
   /* Search */
-  .search-wrap{max-width:860px;width:100%;margin:0 auto}
+  .search-wrap{max-width:860px;width:100%;margin:0 auto;position:relative;z-index:9999}
-  .search-bar{display:flex;align-items:center;background:rgba(255,255,255,0.04);border-radius:16px;padding:8px 14px 8px 8px;transition:all 0.4s cubic-bezier(0.16,1,0.3,1);box-shadow:0 0 0 1px rgba(201,167,81,0.12),0 8px 32px rgba(0,0,0,0.25)}
+  .search-bar{display:flex;align-items:center;background:rgba(255,255,255,0.04);border-radius:16px;padding:8px 14px 8px 8px;transition:all 0.4s cubic-bezier(0.16,1,0.3,1);box-shadow:0 0 0 1px rgba(201,167,81,0.12),0 8px 32px rgba(0,0,0,0.25);position:relative}
   .search-focused{background:rgba(255,255,255,0.07);box-shadow:0 0 0 1.5px rgba(201,167,81,0.35),0 8px 40px rgba(0,0,0,0.3)}
+  .search-has-results{border-radius:16px 16px 0 0}
   .toggle-bar{display:flex;border-radius:10px;padding:2px;background:rgba(0,0,0,0.2);flex-shrink:0}
   .toggle-btn{background:transparent;border:none;border-radius:8px;padding:12px 16px;cursor:pointer;display:flex;align-items:center;gap:7px;transition:all 0.3s;font-family:var(--sans);font-size:14px;font-weight:400;color:#9B9890}
   .toggle-btn svg{display:block;flex-shrink:0}
@@ -703,6 +850,27 @@
   .mobile-toggle-btn span{font-family:var(--sans);font-size:14px;font-weight:600;color:#F5F0E8}
   .mobile-toggle-btn svg{margin-bottom:4px}
   .mobile-toggle-sub{font-size:11px!important;font-weight:400!important;color:#9B9890!important;font-family:var(--mono)!important;letter-spacing:0.05em}
+
+  /* Search clear button */
+  .search-clear{background:none;border:none;cursor:pointer;color:#6B6860;padding:4px;display:flex;align-items:center;justify-content:center;transition:color 0.2s;flex-shrink:0}
+  .search-clear:hover{color:#F5F0E8}
+
+  /* Search Results Dropdown */
+  .search-results{position:absolute;top:100%;left:0;right:0;background:rgba(28,28,26,0.98);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.1);border-top:none;border-radius:0 0 16px 16px;max-height:320px;overflow-y:auto;z-index:9999}
+  .search-loading,.search-no-results{padding:16px 20px;font-family:var(--sans);font-size:14px;color:#9B9890;text-align:center}
+  .search-error{margin-top:8px;font-family:var(--sans);font-size:13px;color:#C44B3F;text-align:center}
+
+  .search-result-item{width:100%;text-align:left;background:none;border:none;border-top:1px solid rgba(255,255,255,0.06);padding:14px 20px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:background 0.2s}
+  .search-result-item:first-child{border-top:none}
+  .search-result-item:hover,.result-selected{background:rgba(255,255,255,0.06)}
+
+  .result-main{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
+  .result-name{font-family:var(--sans);font-size:14px;color:#F5F0E8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+  .result-sigla{font-family:var(--sans);font-size:12px;color:#9B9890;flex-shrink:0}
+
+  .result-meta{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:12px}
+  .result-code{font-family:var(--mono);font-size:10px;color:#9B9890;background:rgba(255,255,255,0.06);padding:2px 6px;border-radius:4px}
+  .result-type{font-family:var(--mono);font-size:9px;letter-spacing:0.1em;font-weight:600}
   .pills{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap;align-items:center;justify-content:center}
   .pills-label{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;color:#B8B5AD;margin-right:2px}
   .pill{font-family:var(--mono);font-size:12px;font-weight:300;letter-spacing:0.03em;border:none;border-radius:6px;padding:5px 12px;cursor:pointer;transition:all 0.25s;line-height:1.4;position:relative;overflow:hidden}
@@ -710,7 +878,8 @@
   .pill:hover::before{opacity:1}
   .pill:hover{transform:translateY(-1px)}
-  .scroll-hint{position:absolute;bottom:28px;left:0;right:0;margin:0 auto;width:fit-content;display:flex;flex-direction:column;align-items:center;gap:10px;animation:scrollHint 2.5s ease-in-out infinite}
+  .scroll-hint{position:absolute;bottom:28px;left:0;right:0;margin:0 auto;width:fit-content;display:flex;flex-direction:column;align-items:center;gap:10px;animation:scrollHint 2.5s ease-in-out infinite;z-index:1;transition:opacity 0.3s}
+  .scroll-hint-hidden{opacity:0;pointer-events:none}
   .scroll-hint span{font-family:var(--mono);font-size:10px;letter-spacing:0.2em;color:#B8B5AD;opacity:0.7}
   /* ── DIRECTORY ── */
@@ -917,6 +1086,14 @@
     .search-input-wrap input{font-size:15px;padding:10px 8px}
     .placeholder-desktop{display:none}
     .placeholder-mobile{display:inline;font-size:14px}
+
+    /* Search results mobile */
+    .search-results{max-height:260px;border-radius:0 0 12px 12px}
+    .search-result-item{padding:12px 16px}
+    .result-name{font-size:13px}
+    .result-meta{flex-direction:column;align-items:flex-end;gap:4px}
+    .result-code{font-size:9px}
+    .result-type{font-size:8px}
     .pills{gap:6px}
     .pill{font-size:11px;padding:4px 10px}
     .scroll-hint{bottom:20px}
@@ -1001,6 +1178,10 @@
     .mobile-settings-btn{width:36px;height:36px}
     .mobile-toggle-btn{padding:14px 10px}
     .mobile-toggle-btn span{font-size:13px}
+    .search-results{max-height:220px}
+    .search-result-item{padding:10px 14px}
+    .result-name{font-size:12px}
+    .result-sigla{font-size:10px}
     .pills-label{display:none}
     .pill{font-size:10px;padding:4px 8px}
     .scroll-hint{display:none}