fix: simplify materials library header

pages/MaterialsPage.tsx

@@ -57,7 +57,7 @@ export const MaterialsPage: React.FC<MaterialsPageProps> = ({ onPlayCourse }) =>
   const openMaterial = (material: Material) => material.attachment.type === 'link' ? showToast(`Abrindo “${material.attachment.name}”.`, 'info') : showDownloadToast(material.attachment.name, material.attachment.size);
 
   return <main className="min-h-screen bg-black pb-20 pt-24 text-white"><div className="mx-auto max-w-7xl px-5 sm:px-8">
-    <header className="border-b border-white/10 pb-7"><button onClick={() => navigate('/')} className="mb-5 inline-flex items-center gap-1.5 text-sm text-gray-400 transition hover:text-orange-300"><ArrowLeft className="h-4 w-4" /> Início</button><div className="flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between"><div><p className="text-xs font-bold uppercase tracking-[0.18em] text-orange-400">Central de recursos</p><h1 className="mt-2 text-3xl font-bold tracking-tight sm:text-4xl">Biblioteca de materiais</h1><p className="mt-3 max-w-2xl text-sm leading-6 text-gray-400">Materiais disponibilizados pelos instrutores nos cursos e aulas da plataforma.</p></div><div className="rounded-2xl border border-white/10 bg-zinc-950 px-5 py-4 text-right"><p className="text-2xl font-bold text-white">{materials.length}</p><p className="text-xs text-gray-500">{materials.length === 1 ? 'material disponível' : 'materiais disponíveis'}</p></div></div></header>
+    <header className="border-b border-white/10 pb-7"><button onClick={() => navigate('/')} className="mb-5 inline-flex items-center gap-1.5 text-sm text-gray-400 transition hover:text-orange-300"><ArrowLeft className="h-4 w-4" /> Início</button><div><p className="text-xs font-bold uppercase tracking-[0.18em] text-orange-400">Central de recursos</p><h1 className="mt-2 text-3xl font-bold tracking-tight sm:text-4xl">Biblioteca de materiais</h1><p className="mt-3 max-w-2xl text-sm leading-6 text-gray-400">Materiais disponibilizados pelos instrutores nos cursos e aulas da plataforma.</p></div></header>
 
     <section className="mt-6 rounded-2xl border border-white/10 bg-zinc-950/80 p-4 sm:p-5"><div className="grid gap-3 lg:grid-cols-[minmax(0,1.5fr)_repeat(3,minmax(0,.7fr))]"><label className="relative block"><Search className="pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500" /><input value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Buscar por material, curso ou aula" className="w-full rounded-xl border border-white/10 bg-zinc-900 py-3 pl-10 pr-10 text-sm text-white outline-none transition focus:border-orange-500/70 focus:ring-2 focus:ring-orange-500/15" />{query && <button onClick={() => setQuery('')} className="absolute right-3 top-1/2 -translate-y-1/2 rounded p-1 text-gray-400 hover:text-white" aria-label="Limpar busca"><X className="h-4 w-4" /></button>}</label><FilterSelect value={selectedTrail} onChange={(value) => { setSelectedTrail(value); setSelectedCourse('all'); }} label="Trilha" options={[{ value: 'all', label: 'Todas as trilhas' }, ...trails.map((trail) => ({ value: trail, label: trail }))]} /><FilterSelect value={selectedCourse} onChange={setSelectedCourse} label="Curso" options={[{ value: 'all', label: 'Todos os cursos' }, ...courseOptions.map((course) => ({ value: course.id, label: course.title }))]} /><FilterSelect value={selectedType} onChange={(value) => setSelectedType(value as 'all' | AttachmentType)} label="Formato" options={filterTypes} /></div><div className="mt-4 flex flex-wrap items-center justify-between gap-3 border-t border-white/5 pt-4"><div className="flex items-center gap-2 text-xs text-gray-500"><Filter className="h-3.5 w-3.5 text-orange-400" /> {filteredMaterials.length} {filteredMaterials.length === 1 ? 'resultado' : 'resultados'}</div><div className="flex items-center gap-2">{hasFilters && <button onClick={clearFilters} className="rounded-lg px-3 py-2 text-xs font-semibold text-gray-300 transition hover:bg-white/10 hover:text-white">Limpar filtros</button>}<label className="sr-only" htmlFor="materials-sort">Ordenar por</label><select id="materials-sort" value={sort} onChange={(event) => setSort(event.target.value as SortOption)} className="rounded-lg border border-white/10 bg-zinc-900 px-3 py-2 text-xs font-semibold text-white outline-none"><option value="recent">Mais recentes</option><option value="name">Nome</option><option value="type">Formato</option></select><div className="flex rounded-lg border border-white/10 bg-zinc-900 p-1"><button onClick={() => setView('grid')} aria-label="Visualização em grade" className={`rounded p-1.5 ${view === 'grid' ? 'bg-orange-500 text-white' : 'text-gray-400 hover:text-white'}`}><LayoutGrid className="h-4 w-4" /></button><button onClick={() => setView('list')} aria-label="Visualização em lista" className={`rounded p-1.5 ${view === 'list' ? 'bg-orange-500 text-white' : 'text-gray-400 hover:text-white'}`}><List className="h-4 w-4" /></button></div></div></div></section>