rl-core-front 0.18.6 → 0.18.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rl-core-front",
-  "version": "0.18.6",
+  "version": "0.18.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/_services/api/axios.factory.ts

@@ -57,6 +57,9 @@ export class AxiosFactory {
             // middleware ainda vê os cookies (inválidos, mas presentes) e manda de volta
             // pro dashboard, gerando loop entre /dashboard e /login?reason=expired.
             await api.post("/auth/logout").catch(() => {});
+            // Fora de componente não há `router`, e a recarga é o que se quer:
+            // a sessão venceu e o que está em memória não vale mais.
+            // eslint-disable-next-line @next/next/no-location-assign-relative-destination
             window.location.href = "/login?reason=expired";
           }
         }

package/src/_utils/storage.ts

@@ -18,6 +18,15 @@
  */
 const memory = new Map<string, string>();
 
+/** Quem quer saber que uma chave mudou. */
+const listeners = new Map<string, Set<() => void>>();
+
+const notify = (key: string): void => {
+  for (const listener of listeners.get(key) ?? []) {
+    listener();
+  }
+};
+
 /**
  * Espelho em memória para quando o navegador recusa o armazenamento.
  *
@@ -48,6 +57,7 @@ export const safeStorage = {
       // Cota estourada ou armazenamento negado: guarda na sessão e segue.
       memory.set(key, value);
     }
+    notify(key);
   },
 
   remove(key: string): void {
@@ -60,5 +70,26 @@ export const safeStorage = {
     } catch {
       // Já saiu do espelho em memória; não há mais nada a fazer.
     }
+    notify(key);
+  },
+
+  /**
+   * Avisa quando uma chave muda, para quem lê por `useSyncExternalStore`.
+   *
+   * É o que permite a preferência salva ser lida direto no render, em vez de
+   * copiada para um `useState` dentro de um efeito: quem escreve é este mesmo
+   * módulo, então a notificação sai daqui.
+   */
+  subscribe(key: string, listener: () => void): () => void {
+    const current = listeners.get(key) ?? new Set<() => void>();
+    current.add(listener);
+    listeners.set(key, current);
+
+    return () => {
+      current.delete(listener);
+      if (current.size === 0) {
+        listeners.delete(key);
+      }
+    };
   },
 };

package/src/components/app-shell.tsx

@@ -212,6 +212,164 @@ export interface AppShellProps {
   forbidden?: React.ReactNode;
 }
 
+/**
+ * O que os blocos do menu precisam do shell para se desenhar.
+ *
+ * Eles moram aqui fora, e não dentro do `AppShell`, porque componente criado
+ * no render é um tipo novo a cada render: o React desmontava e remontava o
+ * menu inteiro a cada clique, perdendo foco e a rolagem da lista.
+ */
+interface NavRender {
+  pathname: string;
+  t: (key: string) => string;
+  go: (href: string) => void;
+  isGroupOpen: (group: NavGroup) => boolean;
+  toggleGroup: (group: NavGroup) => void;
+}
+
+const NavLink = ({
+  item,
+  mini,
+  nested,
+  parentKey,
+  nav,
+}: {
+  item: NavItem;
+  mini: boolean;
+  nested?: boolean;
+  /**
+   * Grupo a que o item pertence, só para o tooltip do modo recolhido.
+   *
+   * Ali os filhos aparecem soltos, sem o pai: "Catálogos" sozinho, ao lado de
+   * "Tarefas", não diria de quê. O caminho no tooltip resolve isso sem
+   * obrigar o rótulo a repetir o nome da feature no menu aberto.
+   */
+  parentKey?: string;
+  nav: NavRender;
+}): JSX.Element => {
+  const { pathname, t, go } = nav;
+  const active = pathname === item.href;
+  const Icon = item.icon;
+  const tooltip = parentKey
+    ? `${t(parentKey)} › ${t(item.key)}`
+    : t(item.key);
+  return (
+    <button
+      onClick={() => go(item.href)}
+      title={mini ? tooltip : undefined}
+      className={cn(
+        "flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
+        mini && "justify-center px-2",
+        nested && !mini && "pl-10",
+        active
+          ? "bg-primary/10 text-primary"
+          : "text-muted-foreground hover:bg-accent hover:text-foreground",
+      )}
+    >
+      <Icon className="h-5 w-5 shrink-0" />
+      {!mini && <span className="truncate">{t(item.key)}</span>}
+    </button>
+  );
+};
+
+/**
+ * Um grupo do menu — o pai que abre e fecha, e os filhos indentados.
+ *
+ * Com a barra recolhida não há onde desenhar seta nem rótulo, então os
+ * filhos aparecem soltos, separados do resto; é o que o "Administração" já
+ * fazia, e agora vale para qualquer grupo.
+ */
+const NavGroupBlock = ({
+  group,
+  mini,
+  nav,
+}: {
+  group: NavGroup;
+  mini: boolean;
+  nav: NavRender;
+}): JSX.Element => {
+  const { t, isGroupOpen, toggleGroup } = nav;
+  const Icon = group.icon;
+  const open = isGroupOpen(group);
+  if (mini) {
+    return (
+      <>
+        <Separator className="my-2" />
+        {group.children.map((child) => (
+          <NavLink
+            key={child.href}
+            item={child}
+            mini
+            parentKey={group.key}
+            nav={nav}
+          />
+        ))}
+      </>
+    );
+  }
+  return (
+    <div className="mt-2">
+      <button
+        onClick={() => toggleGroup(group)}
+        className="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+      >
+        <Icon className="h-5 w-5 shrink-0" />
+        <span className="flex-1 text-left">{t(group.key)}</span>
+        <ChevronRight
+          className={cn("h-4 w-4 transition-transform", open && "rotate-90")}
+        />
+      </button>
+      {open && (
+        <div className="mt-1 flex flex-col gap-1">
+          {group.children.map((child) => (
+            <NavLink
+              key={child.href}
+              item={child}
+              mini={false}
+              nested
+              nav={nav}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const NavContent = ({
+  mini,
+  nav,
+  projectEntries,
+  adminChildren,
+  adminGroup,
+}: {
+  mini: boolean;
+  nav: NavRender;
+  projectEntries: NavEntry[];
+  adminChildren: NavItem[];
+  adminGroup: NavGroup;
+}): JSX.Element => (
+  <div className="flex flex-1 flex-col gap-1 overflow-y-auto overflow-x-hidden p-3">
+    <NavLink item={DASHBOARD} mini={mini} nav={nav} />
+
+    {projectEntries.map((entry) =>
+      isGroup(entry) ? (
+        <NavGroupBlock key={entry.key} group={entry} mini={mini} nav={nav} />
+      ) : (
+        <NavLink key={entry.href} item={entry} mini={mini} nav={nav} />
+      ),
+    )}
+
+    {adminChildren.length > 0 && (
+      <NavGroupBlock group={adminGroup} mini={mini} nav={nav} />
+    )}
+
+    <div className="mt-1">
+      <NavGroupBlock group={SETTINGS_GROUP} mini={mini} nav={nav} />
+    </div>
+  </div>
+);
+
 export function AppShell({
   children,
   navItems,
@@ -364,118 +522,7 @@ export function AppShell({
     setMobileOpen(false);
   };
 
-  const NavLink = ({
-    item,
-    mini,
-    nested,
-    parentKey,
-  }: {
-    item: NavItem;
-    mini: boolean;
-    nested?: boolean;
-    /**
-     * Grupo a que o item pertence, só para o tooltip do modo recolhido.
-     *
-     * Ali os filhos aparecem soltos, sem o pai: "Catálogos" sozinho, ao lado de
-     * "Tarefas", não diria de quê. O caminho no tooltip resolve isso sem
-     * obrigar o rótulo a repetir o nome da feature no menu aberto.
-     */
-    parentKey?: string;
-  }): JSX.Element => {
-    const active = pathname === item.href;
-    const Icon = item.icon;
-    const tooltip = parentKey
-      ? `${t(parentKey)} › ${t(item.key)}`
-      : t(item.key);
-    return (
-      <button
-        onClick={() => go(item.href)}
-        title={mini ? tooltip : undefined}
-        className={cn(
-          "flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
-          mini && "justify-center px-2",
-          nested && !mini && "pl-10",
-          active
-            ? "bg-primary/10 text-primary"
-            : "text-muted-foreground hover:bg-accent hover:text-foreground",
-        )}
-      >
-        <Icon className="h-5 w-5 shrink-0" />
-        {!mini && <span className="truncate">{t(item.key)}</span>}
-      </button>
-    );
-  };
-
-  /**
-   * Um grupo do menu — o pai que abre e fecha, e os filhos indentados.
-   *
-   * Com a barra recolhida não há onde desenhar seta nem rótulo, então os
-   * filhos aparecem soltos, separados do resto; é o que o "Administração" já
-   * fazia, e agora vale para qualquer grupo.
-   */
-  const NavGroupBlock = ({
-    group,
-    mini,
-  }: {
-    group: NavGroup;
-    mini: boolean;
-  }): JSX.Element => {
-    const Icon = group.icon;
-    const open = isGroupOpen(group);
-    if (mini) {
-      return (
-        <>
-          <Separator className="my-2" />
-          {group.children.map((child) => (
-            <NavLink key={child.href} item={child} mini parentKey={group.key} />
-          ))}
-        </>
-      );
-    }
-    return (
-      <div className="mt-2">
-        <button
-          onClick={() => toggleGroup(group)}
-          className="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
-        >
-          <Icon className="h-5 w-5 shrink-0" />
-          <span className="flex-1 text-left">{t(group.key)}</span>
-          <ChevronRight
-            className={cn("h-4 w-4 transition-transform", open && "rotate-90")}
-          />
-        </button>
-        {open && (
-          <div className="mt-1 flex flex-col gap-1">
-            {group.children.map((child) => (
-              <NavLink key={child.href} item={child} mini={false} nested />
-            ))}
-          </div>
-        )}
-      </div>
-    );
-  };
-
-  const NavContent = ({ mini }: { mini: boolean }): JSX.Element => (
-    <div className="flex flex-1 flex-col gap-1 overflow-y-auto overflow-x-hidden p-3">
-      <NavLink item={DASHBOARD} mini={mini} />
-
-      {projectEntries.map((entry) =>
-        isGroup(entry) ? (
-          <NavGroupBlock key={entry.key} group={entry} mini={mini} />
-        ) : (
-          <NavLink key={entry.href} item={entry} mini={mini} />
-        ),
-      )}
-
-      {adminChildren.length > 0 && (
-        <NavGroupBlock group={adminGroup} mini={mini} />
-      )}
-
-      <div className="mt-1">
-        <NavGroupBlock group={SETTINGS_GROUP} mini={mini} />
-      </div>
-    </div>
-  );
+  const nav: NavRender = { pathname, t, go, isGroupOpen, toggleGroup };
 
   return (
     <div className="min-h-screen bg-background">
@@ -557,7 +604,13 @@ export function AppShell({
           collapsed ? "w-[76px]" : "w-64",
         )}
       >
-        <NavContent mini={collapsed} />
+        <NavContent
+          mini={collapsed}
+          nav={nav}
+          projectEntries={projectEntries}
+          adminChildren={adminChildren}
+          adminGroup={adminGroup}
+        />
       </aside>
 
       {/* Mobile sidebar */}
@@ -572,7 +625,13 @@ export function AppShell({
               {brand.mark}
               <span className="text-lg font-extrabold">{brand.name}</span>
             </div>
-            <NavContent mini={false} />
+            <NavContent
+              mini={false}
+              nav={nav}
+              projectEntries={projectEntries}
+              adminChildren={adminChildren}
+              adminGroup={adminGroup}
+            />
           </aside>
         </div>
       )}

package/src/components/ui/column-visibility-modal.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import type { JSX } from "react";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 
 import { Button } from "#core/components/ui/button";
 import {
@@ -37,10 +37,17 @@ export function ColumnVisibilityModal({
 }: Props): JSX.Element {
   const { t } = useI18n();
   const [draftHidden, setDraftHidden] = useState<string[]>(hiddenColumns);
+  const [wasOpen, setWasOpen] = useState(open);
 
-  useEffect(() => {
-    if (open) {setDraftHidden(hiddenColumns);}
-  }, [open, hiddenColumns]);
+  // Abrir recomeça o rascunho do que a tabela mostra hoje. O ajuste é no
+  // render, e não num efeito: assim o modal já nasce com as colunas certas,
+  // sem o quadro intermediário com a escolha da vez anterior.
+  if (open !== wasOpen) {
+    setWasOpen(open);
+    if (open) {
+      setDraftHidden(hiddenColumns);
+    }
+  }
 
   const isVisible = (id: string): boolean => !draftHidden.includes(id);
   const visibleCount = columns.length - draftHidden.length;

package/src/components/ui/data-table.tsx

@@ -34,6 +34,7 @@ import {
 import type {
   CSSProperties,
   JSX,
+  MouseEvent as ReactMouseEvent,
   PointerEvent as ReactPointerEvent,
 } from "react";
 import { Fragment, useEffect, useMemo, useRef, useState } from "react";
@@ -468,9 +469,40 @@ const CELL_MAX_WIDTH = "24rem";
  * cortaria botão de ação. A que declara `wrap` também: nela a quebra é o
  * desenho.
  */
-function cellStyle(columnDef: {
-  meta?: unknown;
-}): { className?: string; style?: CSSProperties } {
+/** A célula (ou o que ela tem dentro) não coube e está cortada. */
+function isClipped(cell: HTMLElement): boolean {
+  if (cell.scrollWidth > cell.clientWidth) {
+    return true;
+  }
+
+  return Array.from(cell.children).some(
+    (child) => child.scrollWidth > child.clientWidth,
+  );
+}
+
+/**
+ * Abre a célula sob o cursor — se houver o que abrir.
+ *
+ * A medição acontece aqui, e não em cada render: enquanto ninguém passa o
+ * mouse, isto não custa nada. E mexer na `dataset` em vez de subir estado
+ * evita re-renderizar a tabela inteira a cada célula que o ponteiro cruza.
+ */
+function expandIfClipped(event: ReactMouseEvent<HTMLTableCellElement>): void {
+  if (isClipped(event.currentTarget)) {
+    event.currentTarget.dataset.expand = "true";
+  }
+}
+
+function collapse(event: ReactMouseEvent<HTMLTableCellElement>): void {
+  delete event.currentTarget.dataset.expand;
+}
+
+function cellStyle(columnDef: { meta?: unknown }): {
+  className?: string;
+  style?: CSSProperties;
+  onMouseEnter?: (event: ReactMouseEvent<HTMLTableCellElement>) => void;
+  onMouseLeave?: (event: ReactMouseEvent<HTMLTableCellElement>) => void;
+} {
   const meta = columnDef.meta as DataTableColumnMeta | undefined;
 
   if (meta?.shrink || meta?.wrap) {
@@ -487,16 +519,24 @@ function cellStyle(columnDef: {
     aparecem nos dois casos.
   */
   /*
-    E o mouse em cima devolve o texto inteiro: no hover só o `white-space`
-    muda, a frase volta a quebrar e a célula cresce em altura. É o mesmo gesto
-    das descrições do Financeiro — sem `title`, que só aparece depois de um
-    segundo parado, e sem tooltip flutuante, que sairia da tabela e taparia a
-    linha de baixo.
+    E o mouse em cima devolve o texto inteiro — mas **só na célula que está de
+    fato cortada**.
+
+    Com `hover:` puro, passar o mouse por uma célula que já cabia inteira a
+    fazia quebrar em duas linhas do mesmo jeito, e a linha inteira pulava sob o
+    cursor. CSS não sabe se houve corte; quem sabe é o layout já calculado, daí
+    a medição no `mouseenter` — que não custa render nenhum enquanto ninguém
+    passa o mouse. O `data-expand` liga as duas regras abaixo.
+
+    Sem `title`, que só aparece depois de um segundo parado, e sem tooltip
+    flutuante, que sairia da tabela e taparia a linha de baixo.
   */
   return {
     className:
-      "truncate hover:whitespace-normal [&>*]:truncate hover:[&>*]:whitespace-normal",
+      "truncate [&>*]:truncate data-[expand=true]:whitespace-normal data-[expand=true]:[&>*]:whitespace-normal",
     style: { maxWidth: meta?.maxWidth ?? CELL_MAX_WIDTH },
+    onMouseEnter: expandIfClipped,
+    onMouseLeave: collapse,
   };
 }
 

package/src/components/ui/filter-sheet.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import type { JSX } from "react";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 
 import type { AdvancedGroup } from "#core/_utils/advanced-filter";
 import { countConditions, initialTree } from "#core/_utils/advanced-filter";
@@ -77,13 +77,19 @@ export function FilterSheet({
   const [draftTree, setDraftTree] = useState<AdvancedGroup | null>(tree);
   const [draftMode, setDraftMode] = useState<FilterMode>(mode);
 
-  useEffect(() => {
+  const [wasOpen, setWasOpen] = useState(open);
+
+  // Abrir recomeça os rascunhos do filtro que está valendo. O ajuste é no
+  // render, e não num efeito: o painel já nasce com o filtro atual, sem o
+  // quadro intermediário com o que foi digitado da última vez.
+  if (open !== wasOpen) {
+    setWasOpen(open);
     if (open) {
       setDraft(values);
       setDraftTree(tree);
       setDraftMode(mode);
     }
-  }, [open, values, tree, mode]);
+  }
 
   const setField = (field: string, value: FilterDraftValue): void => {
     setDraft((current) => ({ ...current, [field]: value }));

package/src/contexts/auth-context.tsx

@@ -43,6 +43,9 @@ export function AuthProvider({ children }: { children: React.ReactNode }): JSX.E
       await authService.logout();
     } finally {
       setUser(null);
+      // Recarga de verdade, e não `router.push`: sair tem que descartar o que
+      // ficou em memória — perfil, permissões e o socket da sessão anterior.
+      // eslint-disable-next-line @next/next/no-location-assign-relative-destination
       if (typeof window !== "undefined") {window.location.href = "/login";}
     }
   }, []);
@@ -63,7 +66,9 @@ export function AuthProvider({ children }: { children: React.ReactNode }): JSX.E
   );
 
   useEffect(() => {
-    void refreshProfile();
+    void (async (): Promise<void> => {
+      await refreshProfile();
+    })();
   }, [refreshProfile]);
 
   return (

package/src/contexts/color-mode-context.tsx

@@ -7,10 +7,12 @@ import {
   useContext,
   useEffect,
   useMemo,
-  useState,
+  useSyncExternalStore,
 } from "react";
 
 import { safeStorage } from "#core/_utils/storage";
+import { useIsHydrated } from "#core/hooks/use-is-hydrated";
+import { useStoredValue } from "#core/hooks/use-stored-value";
 
 export const STORAGE_KEY = "color-mode";
 
@@ -35,6 +37,17 @@ function applyClass(mode: Mode): void {
   document.documentElement.classList.toggle("dark", mode === "dark");
 }
 
+/** O tema do sistema é de fora do React: avisa quando o usuário o troca. */
+function subscribeSystemMode(onChange: () => void): () => void {
+  if (typeof window === "undefined" || !window.matchMedia) {
+    return () => {};
+  }
+  const mq = window.matchMedia("(prefers-color-scheme: dark)");
+  mq.addEventListener("change", onChange);
+  return () => mq.removeEventListener("change", onChange);
+}
+
+
 export interface ColorModeContextType {
   mode: Mode;
   preference: ColorPreference;
@@ -47,27 +60,21 @@ const ColorModeContext = createContext<ColorModeContextType | undefined>(
 );
 
 export function ColorModeProvider({ children }: { children: React.ReactNode }): JSX.Element {
-  const [preference, setPreferenceState] =
-    useState<ColorPreference>(DEFAULT_PREFERENCE);
-  const [sysMode, setSysMode] = useState<Mode>("light");
-  // Antes de ler o localStorage não se sabe o tema real. O script anti-flash do
-  // layout já pôs a classe certa no <html>; aplicar classe antes disso só
-  // desfaria o trabalho dele e causava piscada de claro→escuro.
-  const [resolved, setResolved] = useState(false);
-
-  useEffect(() => {
-    const saved = safeStorage.get(STORAGE_KEY);
-    if (isPreference(saved)) {
-      setPreferenceState(saved);
-    }
-    setSysMode(systemMode());
-    setResolved(true);
+  const saved = useStoredValue(STORAGE_KEY);
+  const preference: ColorPreference = isPreference(saved)
+    ? saved
+    : DEFAULT_PREFERENCE;
+
+  const sysMode = useSyncExternalStore<Mode>(
+    subscribeSystemMode,
+    systemMode,
+    () => "light",
+  );
 
-    const mq = window.matchMedia("(prefers-color-scheme: dark)");
-    const onChange = (): void => setSysMode(systemMode());
-    mq.addEventListener("change", onChange);
-    return () => mq.removeEventListener("change", onChange);
-  }, []);
+  // Antes de hidratar não se sabe o tema real. O script anti-flash do layout já
+  // pôs a classe certa no <html>; aplicar classe antes disso só desfaria o
+  // trabalho dele e causava piscada de claro→escuro.
+  const resolved = useIsHydrated();
 
   const mode: Mode = preference === "system" ? sysMode : preference;
 
@@ -78,7 +85,7 @@ export function ColorModeProvider({ children }: { children: React.ReactNode }):
   }, [mode, resolved]);
 
   const setPreference = useCallback((p: ColorPreference) => {
-    setPreferenceState(p);
+    // Escrever avisa quem lê a chave — inclusive este provider.
     safeStorage.set(STORAGE_KEY, p);
   }, []);
 

package/src/contexts/i18n-context.tsx

@@ -1,16 +1,10 @@
 "use client";
 
 import type { JSX } from "react";
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
+import { createContext, useCallback, useContext, useMemo } from "react";
 
 import { safeStorage } from "#core/_utils/storage";
+import { useStoredValue } from "#core/hooks/use-stored-value";
 import { en } from "#core/i18n/messages/en";
 import { pt } from "#core/i18n/messages/pt";
 
@@ -88,7 +82,8 @@ export function I18nProvider({
   children,
   messages,
 }: I18nProviderProps): JSX.Element {
-  const [locale, setLocaleState] = useState<Locale>("pt");
+  const saved = useStoredValue(STORAGE_KEY);
+  const locale: Locale = saved === "pt" || saved === "en" ? saved : "pt";
 
   // Mescla uma vez por dicionário, não a cada tradução: `t` roda em todo render
   // de toda tela que usa texto.
@@ -100,13 +95,8 @@ export function I18nProvider({
     [messages],
   );
 
-  useEffect(() => {
-    const saved = (safeStorage.get(STORAGE_KEY) as Locale) || null;
-    if (saved === "pt" || saved === "en") {setLocaleState(saved);}
-  }, []);
-
   const setLocale = useCallback((l: Locale) => {
-    setLocaleState(l);
+    // Escrever avisa quem lê a chave — inclusive este provider.
     safeStorage.set(STORAGE_KEY, l);
     document.cookie = `${STORAGE_KEY}=${l}; path=/; max-age=31536000`;
   }, []);