rl-core-front 0.18.0 → 0.18.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rl-core-front",
-  "version": "0.18.0",
+  "version": "0.18.2",
   "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/features/rbac/rbac-screen.tsx

@@ -9,6 +9,7 @@ import {
   GroupsPanel,
   RolesPanel,
 } from "#core/features/rbac/panels";
+import { useTabState } from "#core/hooks/use-tab-state";
 
 /**
  * Controle de acesso, organizado pelo que se vem fazer aqui.
@@ -54,11 +55,16 @@ export function RbacScreen(): JSX.Element {
     },
   ].filter((tab) => tab.perm.some((code) => hasPermission(code)));
 
+  const { tab, setTab } = useTabState(
+    "rbac",
+    tabs.map((item) => item.value),
+  );
+
   return (
     <div>
       <h1 className="mb-4 text-3xl font-bold">{t("rbac.title")}</h1>
       {tabs.length > 0 && (
-        <Tabs defaultValue={tabs[0].value}>
+        <Tabs value={tab} onValueChange={setTab}>
           <TabsList>
             {tabs.map((tab) => (
               <TabsTrigger key={tab.value} value={tab.value}>

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

@@ -0,0 +1,105 @@
+"use client";
+
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+
+import { safeStorage } from "#core/_utils/storage";
+
+const STORAGE_PREFIX = "tab:";
+const QUERY_PARAM = "tab";
+
+export interface UseTabStateResult<T extends string> {
+  tab: T;
+  /**
+   * Recebe `string` porque é o que o `Tabs` e o `TabShortcuts` entregam; valor
+   * fora da lista é ignorado, para um link editado à mão não abrir aba nenhuma.
+   */
+  setTab: (next: string) => void;
+}
+
+const readFromUrl = (): string | null =>
+  new URLSearchParams(window.location.search).get(QUERY_PARAM);
+
+/** Troca só o `?tab=`, preservando o resto — o `?filter=` da listagem mora ao lado. */
+const writeToUrl = (value: string): void => {
+  const params = new URLSearchParams(window.location.search);
+  params.set(QUERY_PARAM, value);
+  window.history.replaceState(null, "", `${window.location.pathname}?${params.toString()}`);
+};
+
+/**
+ * Em qual aba a pessoa deixou a tela, por `storageKey`.
+ *
+ * Duas memórias, porque cada uma responde a uma pergunta diferente. A
+ * querystring (`?tab=`) faz o F5 voltar onde estava e transforma a aba em
+ * link compartilhável — o mesmo motivo do `?filter=` do `useFilters`. O
+ * `localStorage` cobre o que a URL não alcança: abrir a tela pelo menu amanhã
+ * e cair na última aba usada, e não na primeira.
+ *
+ * A URL manda quando as duas discordam: quem recebeu um link quer ver o que o
+ * link aponta, não a última aba de quem abriu.
+ *
+ * O espelho é `replaceState`, como no filtro: trocar de aba não é navegação, e
+ * empilhar histórico faria o "voltar" percorrer aba por aba antes de sair da
+ * tela.
+ *
+ * `tabs` é a lista do que existe: o que se lê da URL ou do storage e não está
+ * nela cai no padrão — uma aba que foi removida numa versão nova, ou um link
+ * digitado errado, abre a tela em vez de deixá-la vazia.
+ */
+export function useTabState<T extends string>(
+  storageKey: string,
+  tabs: readonly T[],
+  defaultTab: T = tabs[0],
+): UseTabStateResult<T> {
+  const [tab, setStoredTab] = useState<T>(defaultTab);
+
+  // Por `ref` porque a lista costuma nascer dentro do render (filtrada por
+  // permissão, por exemplo): como dependência, ela refaria a hidratação a cada
+  // render.
+  const known = useRef(tabs);
+
+  useLayoutEffect(() => {
+    known.current = tabs;
+  });
+
+  const isTab = useCallback((value: string | null): value is T => {
+    return value !== null && (known.current as readonly string[]).includes(value);
+  }, []);
+
+  // Hidrata uma vez, no cliente: no primeiro render do Next não há `window`,
+  // e ler ali faria o servidor e o navegador desenharem abas diferentes.
+  //
+  // `useLayoutEffect`, e não `useEffect`: o passivo roda depois da pintura, e
+  // o F5 mostrava a aba padrão por um quadro antes de pular para a certa.
+  // O de layout corre antes de o navegador desenhar — a primeira imagem já é
+  // a aba salva. No servidor o React o ignora, que é o que se quer.
+  useLayoutEffect(() => {
+    const fromUrl = readFromUrl();
+    const fromStorage = safeStorage.get(`${STORAGE_PREFIX}${storageKey}`);
+    const resolved = isTab(fromUrl) ? fromUrl : isTab(fromStorage) ? fromStorage : defaultTab;
+
+    setStoredTab(resolved);
+
+    // A URL passa a dizer onde a tela está, venha a aba de onde vier — sem
+    // isso, copiar o link depois de cair na aba do storage levaria à padrão.
+    // Lista vazia (nenhuma aba permitida) não tem o que dizer.
+    if (resolved !== undefined && fromUrl !== resolved) {
+      writeToUrl(resolved);
+    }
+  }, [storageKey, defaultTab, isTab]);
+
+  const setTab = useCallback(
+    (next: string): void => {
+      if (!isTab(next)) {
+        return;
+      }
+
+      setStoredTab(next);
+      writeToUrl(next);
+      safeStorage.set(`${STORAGE_PREFIX}${storageKey}`, next);
+    },
+    [storageKey, isTab],
+  );
+
+  return { tab, setTab };
+}

package/src/index.ts

@@ -121,6 +121,8 @@ export {
   TAB_SHORTCUT_DIGITS,
   useShortcut,
 } from "#core/hooks/use-shortcut";
+export type { UseTabStateResult } from "#core/hooks/use-tab-state";
+export { useTabState } from "#core/hooks/use-tab-state";
 export type { TableView, UseTableViewResult } from "#core/hooks/use-table-view";
 export { useTableView } from "#core/hooks/use-table-view";
 // RequestOperation é enum (valor, não só tipo): sem ele o projeto não consegue