From 85d6ab736d82586122a34829b6a07f8dc96e8cf9 Mon Sep 17 00:00:00 2001
From: Lucas Rayan <lucas.guerra@pop-pe.rnp.br>
Date: Fri, 6 Nov 2026 11:43:22 -0300
Subject: [PATCH] =?UTF-8?q?feat(busca):=20barra=20de=20busca=20em=20destaq?=
 =?UTF-8?q?ue=20na=20home=20e=20campo=20largo=20no=20cabe=C3=A7alho;=20rel?=
 =?UTF-8?q?ease=201.10.0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 CHANGELOG.md                 | 14 +++++++++++-
 app/[locale]/page.jsx        |  3 +++
 components/BuscaDestaque.jsx | 43 ++++++++++++++++++++++++++++++++++++
 components/SearchDialog.jsx  | 15 +++++++++++--
 4 files changed, 72 insertions(+), 3 deletions(-)
 create mode 100644 components/BuscaDestaque.jsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 08decdb..1aac83a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,17 @@ Tudo o que muda de relevante no ESPDocs está aqui. O formato segue o
 
 ## [Não lançado]
 
+## [1.10.0] - 2026-11-06
+
+### Alterado
+
+- A busca ganhou papel central. Na home, uma barra grande logo abaixo do título abre a busca, e
+  exemplos clicáveis (pino 32 esp32-s3, usb c6, brownout, deep sleep) já chegam preenchidos.
+  No cabeçalho, a partir de 1280 px o botão vira um campo largo com a dica "Buscar chips,
+  pinos…" e o atalho Ctrl K. Em telas menores continua sendo o ícone.
+- Qualquer componente pode abrir a busca com o evento `espdocs:abrir-busca`, passando uma
+  consulta inicial opcional.
+
 ## [1.9.0] - 2026-11-06
 
 ### Adicionado
@@ -345,7 +356,8 @@ entrada resume tudo desde o primeiro commit, em 2025-10-21, até a imagem Docker
   otimização de imagens (GHSA-2464-fhr4-w9xw), e `postcss` fixado acima da cópia
   embutida no `next`.
 
-[Não lançado]: https://git.lucasrguerra.dev.br/lucasrguerra/ESPDocs/compare/v1.9.0...HEAD
+[Não lançado]: https://git.lucasrguerra.dev.br/lucasrguerra/ESPDocs/compare/v1.10.0...HEAD
+[1.10.0]: https://git.lucasrguerra.dev.br/lucasrguerra/ESPDocs/compare/v1.9.0...v1.10.0
 [1.9.0]: https://git.lucasrguerra.dev.br/lucasrguerra/ESPDocs/compare/v1.8.0...v1.9.0
 [1.8.0]: https://git.lucasrguerra.dev.br/lucasrguerra/ESPDocs/compare/v1.7.0...v1.8.0
 [1.7.0]: https://git.lucasrguerra.dev.br/lucasrguerra/ESPDocs/compare/v1.6.1...v1.7.0
diff --git a/app/[locale]/page.jsx b/app/[locale]/page.jsx
index 647fbcf..5a584cd 100644
--- a/app/[locale]/page.jsx
+++ b/app/[locale]/page.jsx
@@ -1,6 +1,7 @@
 import Header from "@/components/Header";
 import Footer from "@/components/Footer";
 import BookCover from "@/components/BookCover";
+import BuscaDestaque from "@/components/BuscaDestaque";
 import Link from "next/link";
 import seriesDataPt from "@/public/series.json";
 import frameworksDataPt from "@/public/frameworks.json";
@@ -508,6 +509,8 @@ ESP32，<br className="sm:hidden" />去繁就简。
 								: "Specifications, pinouts, comparisons and diagnostics in a single read. Less datasheet translation, more workbench time."}
 						</p>
 
+						<BuscaDestaque locale={locale} />
+
 						<div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
 							<Link href={getLinkHref("/seletor")} className="btn btn-primary w-full sm:w-auto">
 								<SlidersHorizontal className="h-4 w-4" aria-hidden="true" />
diff --git a/components/BuscaDestaque.jsx b/components/BuscaDestaque.jsx
new file mode 100644
index 0000000..9e05810
--- /dev/null
+++ b/components/BuscaDestaque.jsx
@@ -0,0 +1,43 @@
+"use client";
+
+import { Search } from "lucide-react";
+
+const T = {
+	pt: { rotulo: "Buscar no ESPDocs", dica: "Pergunte do seu jeito: chip, pino, periférico ou erro", exemplos: "Experimente:", lista: ["pino 32 esp32-s3", "usb c6", "brownout", "deep sleep"] },
+	en: { rotulo: "Search ESPDocs", dica: "Ask your way: chip, pin, peripheral or error", exemplos: "Try:", lista: ["pin 32 esp32-s3", "usb pins c6", "brownout", "deep sleep"] },
+	es: { rotulo: "Buscar en ESPDocs", dica: "Pregunte a su manera: chip, pin, periférico o error", exemplos: "Pruebe:", lista: ["pin 32 esp32-s3", "pines usb c6", "brownout", "deep sleep"] },
+	fr: { rotulo: "Rechercher sur ESPDocs", dica: "Demandez à votre façon : puce, broche, périphérique ou erreur", exemplos: "Essayez :", lista: ["broche 32 esp32-s3", "broches usb c6", "brownout", "deep sleep"] },
+	de: { rotulo: "ESPDocs durchsuchen", dica: "Fragen Sie frei: Chip, Pin, Peripherie oder Fehler", exemplos: "Probieren Sie:", lista: ["pin 32 esp32-s3", "usb pins c6", "brownout", "deep sleep"] },
+	"zh-CN": { rotulo: "在 ESPDocs 中搜索", dica: "随意提问：芯片、引脚、外设或错误", exemplos: "试试：", lista: ["pin 32 esp32-s3", "usb c6", "brownout", "deep sleep"] },
+};
+
+function abrirBusca(consulta) {
+	window.dispatchEvent(new CustomEvent("espdocs:abrir-busca", { detail: { consulta } }));
+}
+
+/* Barra de busca em destaque no hero da home. Abre o mesmo diálogo do cabeçalho. */
+export default function BuscaDestaque({ locale = "pt" }) {
+	const t = T[locale] ?? T.pt;
+	return (
+		<div className="mx-auto mt-9 w-full max-w-2xl">
+			<button
+				type="button"
+				onClick={() => abrirBusca()}
+				aria-label={`${t.rotulo} (Ctrl+K)`}
+				className="group flex min-h-16 w-full cursor-text items-center gap-4 rounded-full border-2 border-line-strong bg-surface px-6 text-left shadow-[0_18px_40px_-20px_var(--shadow-ink)] transition-colors hover:border-accent focus-visible:border-accent"
+			>
+				<Search className="h-6 w-6 shrink-0 text-accent" aria-hidden="true" />
+				<span className="flex-1 truncate text-base text-muted sm:text-lg">{t.dica}</span>
+				<kbd className="hidden rounded-md border border-line bg-surface-2 px-2 py-1 font-mono text-xs font-semibold text-muted sm:inline">Ctrl K</kbd>
+			</button>
+			<p className="mt-4 flex flex-wrap items-center justify-center gap-2 text-sm text-muted">
+				<span>{t.exemplos}</span>
+				{t.lista.map((ex) => (
+					<button key={ex} type="button" onClick={() => abrirBusca(ex)} className="chip-btn">
+						{ex}
+					</button>
+				))}
+			</p>
+		</div>
+	);
+}
diff --git a/components/SearchDialog.jsx b/components/SearchDialog.jsx
index d99ea88..5f829b5 100644
--- a/components/SearchDialog.jsx
+++ b/components/SearchDialog.jsx
@@ -183,6 +183,17 @@ export default function SearchDialog() {
 		setAtivo(0);
 	}, []);
 
+	// Outros componentes (a barra da home) abrem a busca com window.dispatchEvent(
+	// new CustomEvent("espdocs:abrir-busca", { detail: { consulta } })).
+	useEffect(() => {
+		function onAbrir(e) {
+			if (e.detail?.consulta) setConsulta(e.detail.consulta);
+			setAberto(true);
+		}
+		window.addEventListener("espdocs:abrir-busca", onAbrir);
+		return () => window.removeEventListener("espdocs:abrir-busca", onAbrir);
+	}, []);
+
 	// Atalhos globais: Ctrl/⌘+K abre; "/" abre fora de campos de texto.
 	useEffect(() => {
 		function onKey(e) {
@@ -306,11 +317,11 @@ export default function SearchDialog() {
 				type="button"
 				id="botao-busca"
 				onClick={() => setAberto(true)}
-				className="flex h-11 min-w-11 shrink-0 cursor-pointer items-center justify-center gap-2 rounded-full border border-line px-3 text-ink transition-colors hover:bg-surface-2 xl:px-4"
+				className="flex h-11 min-w-11 shrink-0 cursor-pointer items-center justify-center gap-2.5 rounded-full border border-line-strong bg-surface px-3 text-ink shadow-sm transition-colors hover:border-accent hover:bg-surface-2 xl:w-72 xl:justify-start xl:px-4"
 				aria-label={isEn ? "Search ESPDocs (Ctrl+K)" : isEs ? "Buscar en ESPDocs (Ctrl+K)" : isFr ? "Rechercher sur ESPDocs (Ctrl+K)" : isZh ? "在 ESPDocs 中搜索（Ctrl+K）" : isDe ? "ESPDocs durchsuchen (Strg+K)" : "Buscar no ESPDocs (Ctrl+K)"}
 			>
 				<Search className="h-4 w-4" aria-hidden="true" />
-				<span className="hidden text-sm font-medium xl:inline">{isEn ? "Search" : isEs ? "Buscar" : isFr ? "Rechercher" : isZh ? "搜索" : isDe ? "Suchen" : "Buscar"}</span>
+				<span className="hidden flex-1 truncate text-left text-sm text-muted xl:inline">{isEn ? "Search chips, pins…" : isEs ? "Buscar chips, pines…" : isFr ? "Chercher puces, broches…" : isZh ? "搜索芯片、引脚…" : isDe ? "Chips, Pins suchen…" : "Buscar chips, pinos…"}</span>
 				<kbd className="hidden rounded-md border border-line bg-surface-2 px-1.5 py-0.5 font-mono text-xs font-semibold text-muted xl:inline">{isZh ? "Ctrl K" : isDe ? "Strg K" : "Ctrl K"}</kbd>
 			</button>