correcoes observacao

frontend/src/components/AvaliacaoTab.jsx

@@ -4,6 +4,7 @@ import { buildCsvBlob } from '../csv'
 import { buildAvaliacaoModeloLink } from '../deepLinks'
 import LoadingOverlay from './LoadingOverlay'
 import MapFrame from './MapFrame'
+import ModeloObservacaoCard from './ModeloObservacaoCard'
 import ShareLinkButton from './ShareLinkButton'
 import SinglePillAutocomplete from './SinglePillAutocomplete'
 import TruncatedCellContent from './TruncatedCellContent'
@@ -526,6 +527,7 @@ export default function AvaliacaoTab({ sessionId, quickLoadRequest = null, onRou
   const [avaliandoLocalizacaoStatus, setAvaliandoLocalizacaoStatus] = useState('')
   const [avaliandoLogradouroOptions, setAvaliandoLogradouroOptions] = useState([])
   const [avaliandoLogradouroLoading, setAvaliandoLogradouroLoading] = useState(false)
+  const [avaliandoLogradouroLoaded, setAvaliandoLogradouroLoaded] = useState(false)
 
   const [avaliacoesCards, setAvaliacoesCards] = useState([])
   const [baseCardId, setBaseCardId] = useState(BASE_COMPARACAO_SEM_BASE)
@@ -728,32 +730,9 @@ export default function AvaliacaoTab({ sessionId, quickLoadRequest = null, onRou
   }, [sessionId])
 
   useEffect(() => {
-    let ativo = true
-    if (!sessionId) return () => {
-      ativo = false
-    }
-
-    setAvaliandoLogradouroLoading(true)
-    api.pesquisarModelos({ somente_contexto: true })
-      .then((resp) => {
-        if (!ativo) return
-        const logradouros = Array.isArray(resp?.sugestoes?.logradouros_eixos)
-          ? resp.sugestoes.logradouros_eixos
-          : []
-        setAvaliandoLogradouroOptions(logradouros)
-      })
-      .catch(() => {
-        if (!ativo) return
-        setAvaliandoLogradouroOptions([])
-      })
-      .finally(() => {
-        if (!ativo) return
-        setAvaliandoLogradouroLoading(false)
-      })
-
-    return () => {
-      ativo = false
-    }
+    setAvaliandoLogradouroOptions([])
+    setAvaliandoLogradouroLoading(false)
+    setAvaliandoLogradouroLoaded(false)
   }, [sessionId])
 
   useEffect(() => {
@@ -823,6 +802,23 @@ export default function AvaliacaoTab({ sessionId, quickLoadRequest = null, onRou
     }
   }
 
+  async function carregarSugestoesLogradouroAvaliando() {
+    if (!sessionId || avaliandoLogradouroLoading || avaliandoLogradouroLoaded) return
+    setAvaliandoLogradouroLoading(true)
+    try {
+      const response = await api.pesquisarLogradourosEixos()
+      const opcoes = Array.isArray(response?.logradouros_eixos)
+        ? response.logradouros_eixos.map((item) => String(item || '').trim()).filter(Boolean)
+        : []
+      setAvaliandoLogradouroOptions(opcoes)
+      setAvaliandoLogradouroLoaded(true)
+    } catch {
+      setAvaliandoLogradouroOptions([])
+    } finally {
+      setAvaliandoLogradouroLoading(false)
+    }
+  }
+
   async function onUploadModel(arquivo = null) {
     const arquivoUpload = arquivo || uploadedFile
     if (!sessionId || !arquivoUpload) return
@@ -1305,12 +1301,7 @@ export default function AvaliacaoTab({ sessionId, quickLoadRequest = null, onRou
         )}
         {status ? <div className="status-line">{status}</div> : null}
         {badgeHtml ? <div className="upload-badge-block" dangerouslySetInnerHTML={{ __html: badgeHtml }} /> : null}
-        {modeloObservacao ? (
-          <div className="elaborador-badge modelo-observacao-badge">
-            <div className="elaborador-badge-title">OBSERVAÇÃO</div>
-            <div className="modelo-observacao-text">{modeloObservacao}</div>
-          </div>
-        ) : null}
+        <ModeloObservacaoCard text={modeloObservacao} className="modelo-observacao-badge" />
         </div>
 
         {!modeloPronto ? (
@@ -1417,6 +1408,9 @@ export default function AvaliacaoTab({ sessionId, quickLoadRequest = null, onRou
                           panelTitle="Logradouros dos eixos"
                           emptyMessage="Nenhum logradouro encontrado nos eixos."
                           loading={avaliandoLogradouroLoading}
+                          onOpenChange={(open) => {
+                            if (open) void carregarSugestoesLogradouroAvaliando()
+                          }}
                           inputName="logradouroEixosAvaliacao"
                           inputAutoComplete="new-password"
                         />

frontend/src/components/ModeloObservacaoCard.jsx

@@ -0,0 +1,40 @@
+import React, { useEffect, useState } from 'react'
+
+export default function ModeloObservacaoCard({
+  text,
+  title = 'OBSERVAÇÃO',
+  defaultOpen = true,
+  className = '',
+}) {
+  const content = String(text || '').trim()
+  const [open, setOpen] = useState(defaultOpen)
+
+  useEffect(() => {
+    setOpen(defaultOpen)
+  }, [content, defaultOpen])
+
+  if (!content) return null
+
+  const classes = [
+    'elaborador-badge',
+    'modelo-observacao-card',
+    open ? 'is-open' : '',
+    className,
+  ].filter(Boolean).join(' ')
+
+  return (
+    <div className={classes}>
+      <button
+        type="button"
+        className="modelo-observacao-toggle"
+        onClick={() => setOpen((prev) => !prev)}
+        aria-expanded={open}
+        title={open ? 'Recolher observação' : 'Expandir observação'}
+      >
+        <span className="elaborador-badge-title">{title}</span>
+        <span className="modelo-observacao-toggle-icon" aria-hidden="true">▾</span>
+      </button>
+      {open ? <div className="modelo-observacao-text">{content}</div> : null}
+    </div>
+  )
+}

frontend/src/components/PesquisaTab.jsx

@@ -6,6 +6,7 @@ import DataTable from './DataTable'
 import EquationFormatsPanel from './EquationFormatsPanel'
 import LoadingOverlay from './LoadingOverlay'
 import MapFrame from './MapFrame'
+import ModeloObservacaoCard from './ModeloObservacaoCard'
 import ModeloTrabalhosTecnicosPanel from './ModeloTrabalhosTecnicosPanel'
 import PlotFigure from './PlotFigure'
 import PesquisaAdminConfigPanel from './PesquisaAdminConfigPanel'
@@ -1638,7 +1639,6 @@ export default function PesquisaTab({
           <div className="pesquisa-opened-model-head">
             <div className="pesquisa-opened-model-title-wrap">
               <h3>{modeloAbertoMeta?.nome || 'Modelo'}</h3>
-              {modeloAbertoMeta?.observacao ? <p>{modeloAbertoMeta.observacao}</p> : null}
             </div>
             <button
               type="button"
@@ -1649,6 +1649,7 @@ export default function PesquisaTab({
               Voltar para pesquisa
             </button>
           </div>
+          <ModeloObservacaoCard text={modeloAbertoMeta?.observacao} className="pesquisa-opened-model-observacao" />
 
           <div className="inner-tabs" role="tablist" aria-label="Abas internas do modelo aberto na pesquisa">
             {PESQUISA_INNER_TABS.map((tab) => (

frontend/src/components/RepositorioTab.jsx

@@ -6,6 +6,7 @@ import EquationFormatsPanel from './EquationFormatsPanel'
 import ListPagination from './ListPagination'
 import LoadingOverlay from './LoadingOverlay'
 import MapFrame from './MapFrame'
+import ModeloObservacaoCard from './ModeloObservacaoCard'
 import ModeloTrabalhosTecnicosPanel from './ModeloTrabalhosTecnicosPanel'
 import PlotFigure from './PlotFigure'
 import ShareLinkButton from './ShareLinkButton'
@@ -618,7 +619,6 @@ export default function RepositorioTab({
           <div className="pesquisa-opened-model-head">
             <div className="pesquisa-opened-model-title-wrap">
               <h3>{modeloAbertoMeta?.nome || 'Modelo'}</h3>
-              {modeloAbertoMeta?.observacao ? <p>{modeloAbertoMeta.observacao}</p> : null}
             </div>
             <div className="pesquisa-opened-model-actions">
               <ShareLinkButton href={shareHref} />
@@ -647,6 +647,7 @@ export default function RepositorioTab({
               </button>
             </div>
           </div>
+          <ModeloObservacaoCard text={modeloAbertoMeta?.observacao} className="pesquisa-opened-model-observacao" />
 
           <div className="inner-tabs" role="tablist" aria-label="Abas internas do modelo aberto no repositório">
             {REPO_INNER_TABS.map((tab) => (

frontend/src/styles.css

@@ -4767,6 +4767,35 @@ button.btn-upload-select {
   margin-top: 10px;
 }
 
+.modelo-observacao-card {
+  padding-top: 9px;
+}
+
+.modelo-observacao-toggle {
+  width: 100%;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  cursor: pointer;
+  text-align: left;
+}
+
+.modelo-observacao-toggle-icon {
+  flex: 0 0 auto;
+  color: #68829c;
+  font-size: 0.8rem;
+  line-height: 1;
+  transition: transform 0.15s ease;
+}
+
+.modelo-observacao-card:not(.is-open) .modelo-observacao-toggle-icon {
+  transform: rotate(-90deg);
+}
+
 .modelo-observacao-text {
   margin-top: 6px;
   color: #40586f;
@@ -4775,6 +4804,10 @@ button.btn-upload-select {
   white-space: pre-line;
 }
 
+.pesquisa-opened-model-observacao {
+  margin: -2px 0 14px;
+}
+
 .modelo-variaveis-box {
   padding: 9px 11px;
   border-radius: 11px;