rl-core-front 0.18.7 → 0.18.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rl-core-front",
-  "version": "0.18.7",
+  "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/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`;
   }, []);

package/src/contexts/socket-context.tsx

@@ -68,6 +68,7 @@ export function SocketProvider({
 }): JSX.Element {
   const { user, refreshProfile } = useAuth();
   const [status, setStatus] = useState<SocketStatus>("disconnected");
+  const [lastUserId, setLastUserId] = useState<string | undefined>(undefined);
   const [reconnectCount, setReconnectCount] = useState(0);
   const socketRef = useRef<Socket | null>(null);
 
@@ -85,12 +86,20 @@ export function SocketProvider({
   // socket.io entraria em ciclo de retentativa.
   const userId = user?.id;
 
+  // Quem manda no estado é a sessão: com um usuário novo há uma conexão nova a
+  // abrir, e o "conectando" é consequência disso — não do efeito, que só vai
+  // rodar depois da pintura e deixaria a barra dizendo "desconectado" por um
+  // quadro.
+  if (userId !== lastUserId) {
+    setLastUserId(userId);
+    setStatus(userId ? "connecting" : "disconnected");
+  }
+
   useEffect(() => {
     if (!userId) {
       return;
     }
 
-    setStatus("connecting");
     const socket = io(`${SOCKET_URL}${NAMESPACE}`, {
       withCredentials: true,
       transports: ["websocket"],

package/src/features/audit/components/record-audit-button.tsx

@@ -89,7 +89,9 @@ export function RecordAuditButton({
   // clica no histórico.
   useEffect(() => {
     if (open) {
-      void fetch();
+      void (async (): Promise<void> => {
+        await fetch();
+      })();
     }
   }, [open, fetch]);
 

package/src/features/audit/hooks/use-audit-trail.ts

@@ -57,7 +57,9 @@ export function useAuditTrail(): UseAuditTrailResult {
     if (!list.ready) {
       return;
     }
-    void fetch();
+    void (async (): Promise<void> => {
+      await fetch();
+    })();
   }, [fetch, list.ready]);
 
   return {

package/src/features/logs/hooks/use-request-logs.ts

@@ -75,7 +75,9 @@ export function useRequestLogs(): UseRequestLogsResult {
     if (!list.ready) {
       return;
     }
-    void fetch();
+    void (async (): Promise<void> => {
+      await fetch();
+    })();
   }, [fetch, list.ready]);
 
   return {

package/src/features/notifications/hooks/use-notifications.ts

@@ -44,7 +44,9 @@ export function useNotifications(): UseNotificationsResult {
   // Carga inicial e, de novo, a cada reconexão: enquanto o socket esteve fora
   // chegaram notificações que ninguém empurrou para esta aba.
   useEffect(() => {
-    void fetch();
+    void (async (): Promise<void> => {
+      await fetch();
+    })();
   }, [fetch, reconnectCount]);
 
   // Sem toast aqui: o badge do sino já é o aviso, e disparar os dois pelo mesmo

package/src/features/profile/profile-screen.tsx

@@ -83,7 +83,9 @@ export function ProfileScreen(): JSX.Element {
     }
   };
   useEffect(() => {
-    void loadMe();
+    void (async (): Promise<void> => {
+      await loadMe();
+    })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);