rl-core-front 0.19.9 → 0.19.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rl-core-front",
-  "version": "0.19.9",
+  "version": "0.19.10",
   "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/app-shell.tsx

@@ -549,12 +549,19 @@ export function AppShell({
           <Menu className="h-5 w-5" />
         </Button>
 
-        <div className="flex items-center gap-2">
+        {/* A marca leva para a raiz do projeto: é o gesto que todo site tem,
+            e sem ele o caminho de volta ao início é achar "Painel" no menu. */}
+        <button
+          type="button"
+          onClick={() => go("/")}
+          aria-label={brand.name || t("app.name")}
+          className="flex cursor-pointer items-center gap-2 rounded-lg px-1.5 py-1 transition-colors hover:bg-accent"
+        >
           {brand.mark}
           <span className="hidden text-lg font-extrabold sm:block">
             {brand.name}
           </span>
-        </div>
+        </button>
 
         <div className="flex-1" />
 
@@ -623,10 +630,15 @@ export function AppShell({
             onClick={() => setMobileOpen(false)}
           />
           <aside className="absolute left-0 top-0 flex h-full w-64 flex-col border-r border-border bg-card">
-            <div className="flex h-16 items-center gap-2 border-b border-border px-4">
+            <button
+              type="button"
+              onClick={() => go("/")}
+              aria-label={brand.name || t("app.name")}
+              className="flex h-16 w-full cursor-pointer items-center gap-2 border-b border-border px-4 text-left transition-colors hover:bg-accent"
+            >
               {brand.mark}
               <span className="text-lg font-extrabold">{brand.name}</span>
-            </div>
+            </button>
             <NavContent
               mini={false}
               nav={nav}

package/src/hooks/use-tab-state.ts

@@ -89,7 +89,23 @@ export function useTabState<T extends string>(
     if (!hydrated) {
       return;
     }
-    if (tab !== undefined && readUrlParam(param) !== tab) {
+
+    /*
+      A URL de **agora**, e não a do render que criou este efeito: chegando por
+      um link, o Next troca a querystring no commit, depois que esta tela já
+      renderizou lendo a URL anterior. Aí `tab` ainda é o do armazenamento, e
+      escrevê-lo apagaria justamente a aba que o link pediu — a tela abria na
+      aba de ontem com a URL reescrita para ela, e só um F5 acertava.
+
+      Aba válida na URL manda, sempre: não há o que espelhar.
+    */
+    const atual = readUrlParam(param);
+
+    if (atual !== null && (known.current as readonly string[]).includes(atual)) {
+      return;
+    }
+
+    if (tab !== undefined) {
       writeUrlTab(tab);
     }
   }, [hydrated, tab, param, writeUrlTab]);

package/src/hooks/use-url-param.ts

@@ -5,7 +5,51 @@ import { useCallback, useSyncExternalStore } from "react";
 /** Quem lê a querystring, para saber que ela mudou por aqui. */
 const listeners = new Set<() => void>();
 
+const notify = (): void => {
+  for (const listener of listeners) {
+    listener();
+  }
+};
+
+/** A instrumentação do histórico é instalada uma vez só, no primeiro leitor. */
+let watchingHistory = false;
+
+/**
+ * Faz `pushState` e `replaceState` avisarem quem lê a querystring.
+ *
+ * Nenhum dos dois dispara evento — `popstate` é só do "voltar" do navegador —,
+ * e **a navegação do Next é `pushState`**: o App Router troca a URL num efeito
+ * (`HistoryUpdater`) depois que a tela nova já renderizou. Sem este aviso,
+ * quem abriu a tela por um link com `?tab=` lia a URL *anterior*, caía no
+ * valor guardado e ficava nele — a URL dizia uma aba e a tela mostrava outra,
+ * e só um F5 acertava.
+ *
+ * Instrumentar o histórico, e não `useSearchParams` do Next: aquele não
+ * enxerga o `replaceState` que este arquivo faz (o `?filter=`, o `?month=`),
+ * e obrigaria todo consumidor a nascer dentro de um `<Suspense>`.
+ */
+const watchHistory = (): void => {
+  if (watchingHistory || typeof window === "undefined") {
+    return;
+  }
+
+  watchingHistory = true;
+
+  for (const method of ["pushState", "replaceState"] as const) {
+    const original = window.history[method];
+
+    window.history[method] = function patched(
+      this: History,
+      ...args: Parameters<History["pushState"]>
+    ): void {
+      original.apply(this, args);
+      notify();
+    };
+  }
+};
+
 const subscribe = (onChange: () => void): (() => void) => {
+  watchHistory();
   listeners.add(onChange);
   // O "voltar" do navegador também troca o valor, e esse não passa por aqui.
   window.addEventListener("popstate", onChange);
@@ -28,6 +72,12 @@ export const readUrlParam = (name: string): string | null =>
  * da tela.
  */
 export const writeUrlParam = (name: string, value: string | null): void => {
+  // Escrever pode acontecer antes de qualquer leitor montar — e é o
+  // `replaceState` instrumentado que avisa. Sem esta linha, o aviso dependeria
+  // da ordem em que as coisas montaram, que é o tipo de laço que funciona até
+  // o dia em que alguém escreve primeiro.
+  watchHistory();
+
   const params = new URLSearchParams(window.location.search);
 
   if (value === null) {
@@ -43,11 +93,8 @@ export const writeUrlParam = (name: string, value: string | null): void => {
     query ? `${window.location.pathname}?${query}` : window.location.pathname,
   );
 
-  // `replaceState` não dispara evento nenhum: sem este aviso, quem lê o
-  // parâmetro ficaria com o valor antigo até o próximo render por outro motivo.
-  for (const listener of listeners) {
-    listener();
-  }
+  // O aviso vem do `replaceState` instrumentado (`watchHistory`), que avisa
+  // por qualquer caminho — inclusive pelas trocas de URL do próprio Next.
 };
 
 /**