rl-core-front 0.16.7 → 0.16.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rl-core-front",
-  "version": "0.16.7",
+  "version": "0.16.8",
   "description": "Telas e componentes Next.js do core: login com 2FA, usuários, RBAC, auditoria, logs e listagens com filtro dinâmico",
   "author": "Rodrigo Liberti",
   "license": "MIT",

package/src/components/breadcrumbs.tsx

@@ -9,6 +9,7 @@ import {
   breadcrumbTrail,
 } from "#core/_utils/breadcrumb-trail";
 import { useI18n } from "#core/contexts";
+import { useDocumentTitle } from "#core/hooks/use-document-title";
 
 /**
  * Rótulo das telas do próprio core — o projeto não precisa cadastrá-las.
@@ -36,6 +37,11 @@ export function Breadcrumbs({ navItems }: BreadcrumbsProps): JSX.Element {
 
   const trail = breadcrumbTrail(pathname, navItems, SEGMENT_LABELS);
 
+  // A aba do navegador acompanha a migalha: o último degrau é a tela, e é o
+  // mesmo nome nos dois lugares — inclusive nas telas do próprio core.
+  const ultimo = trail[trail.length - 1];
+  useDocumentTitle(ultimo ? t(ultimo.label) : null);
+
   return (
     <nav className="mb-4 flex items-center gap-1.5 text-sm text-muted-foreground">
       <button

package/src/hooks/use-document-title.ts

@@ -0,0 +1,40 @@
+"use client";
+
+import { useEffect } from "react";
+
+/**
+ * O título com que a página carregou — o que o `metadata` do projeto mandou.
+ *
+ * Lido uma vez por carregamento e nunca reescrito: é o sufixo de todos os
+ * títulos daqui em diante, e o projeto não precisa dizer duas vezes como se
+ * chama (o prefixo "Dev - " que ele põe no `metadata` vem junto de graça).
+ */
+let baseTitle: string | null = null;
+
+/** O que fica entre o nome da tela e o do sistema. */
+const SEPARATOR = " · ";
+
+/**
+ * A aba do navegador diz em que tela se está.
+ *
+ * Com cinco abas do sistema abertas, todas se chamavam só pelo nome dele — e
+ * achar a do financeiro era clicar uma a uma. A tela vem **antes** do nome do
+ * sistema, e não depois: a aba trunca pelo fim, e "ControlX - Controle
+ * fina…" vira "ControlX" em todas.
+ *
+ * `null` devolve o título de origem — é o que a tela sem migalha faz.
+ */
+export const useDocumentTitle = (title: string | null): void => {
+  useEffect(() => {
+    if (baseTitle === null) {
+      baseTitle = document.title;
+    }
+
+    if (!title) {
+      document.title = baseTitle;
+      return;
+    }
+
+    document.title = baseTitle ? `${title}${SEPARATOR}${baseTitle}` : title;
+  }, [title]);
+};

package/src/index.ts

@@ -82,6 +82,7 @@ export type {
   UseConfirmResult,
 } from "#core/hooks/use-confirm";
 export { useConfirm } from "#core/hooks/use-confirm";
+export { useDocumentTitle } from "#core/hooks/use-document-title";
 export type { ExportQuery, UseExportResult } from "#core/hooks/use-export";
 export { useExport } from "#core/hooks/use-export";
 export type { UseFilterSchemaResult } from "#core/hooks/use-filter-schema";