rl-core-front 0.18.6 → 0.18.8

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
   }, []);
 

package/src/features/queues/hooks/use-queue-jobs.ts

@@ -116,7 +116,9 @@ export function useQueueJobs(): UseQueueJobsResult {
   }, [latest, run, state, queue, page, pageSize, sorting]);
 
   useEffect(() => {
-    void fetch();
+    void (async (): Promise<void> => {
+      await fetch();
+    })();
   }, [fetch]);
 
   const setState = (next: QueueJobState): void => {

package/src/features/rbac/panels/catalog-panel.tsx

@@ -70,7 +70,9 @@ export function CatalogPanel({
     if (r) {setRows(r);}
   };
   useEffect(() => {
-    void load();
+    void (async (): Promise<void> => {
+      await load();
+    })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

package/src/features/rbac/panels/groups-panel.tsx

@@ -76,7 +76,9 @@ export function GroupsPanel(): JSX.Element {
     if (u) {setCandidates(u.items);}
   };
   useEffect(() => {
-    void load();
+    void (async (): Promise<void> => {
+      await load();
+    })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

package/src/features/rbac/panels/permissions-panel.tsx

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

package/src/features/rbac/panels/roles-panel.tsx

@@ -4,7 +4,7 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import { Pencil, Plus, Trash2 } from "lucide-react";
 import type { JSX } from "react";
 import { useEffect, useMemo, useState } from "react";
-import { useForm } from "react-hook-form";
+import { useForm, useWatch } from "react-hook-form";
 import * as yup from "yup";
 
 import {
@@ -62,14 +62,16 @@ export function RolesPanel(): JSX.Element {
     handleSubmit,
     reset,
     setValue,
-    watch,
+    control,
     formState: { errors },
   } = useForm<RoleFormValues>({
     resolver: yupResolver(schema),
     defaultValues: { name: "", description: "", permissionIds: [] },
   });
 
-  const permissionIds = watch("permissionIds");
+  // `useWatch` e não `watch`: o segundo devolve uma função nova a cada render,
+  // e com ela o React Compiler desiste de memoizar o painel inteiro.
+  const permissionIds = useWatch({ control, name: "permissionIds" });
 
   const load = async (): Promise<void> => {
     const [r, p] = await Promise.all([
@@ -80,7 +82,9 @@ export function RolesPanel(): JSX.Element {
     if (p) {setPerms(p);}
   };
   useEffect(() => {
-    void load();
+    void (async (): Promise<void> => {
+      await load();
+    })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

package/src/features/recovery/reset-password-screen.tsx

@@ -24,6 +24,9 @@ import {
 import { useI18n } from "#core/contexts";
 import { useRequest } from "#core/hooks/use-request";
 
+/** O que se mostra quando o link não tem token ou o servidor o recusa. */
+const INVALID_TOKEN: PasswordTokenCheck = { valid: false, status: "invalid" };
+
 const INVALID_MESSAGE_KEY: Record<PasswordTokenStatus, string> = {
   valid: "recovery.linkInvalid",
   invalid: "recovery.linkInvalid",
@@ -38,22 +41,31 @@ export function ResetPasswordScreen(): JSX.Element {
   const { run, loading, error } = useRequest({ silent: true });
   const { t } = useI18n();
   const [done, setDone] = useState(false);
-  const [check, setCheck] = useState<PasswordTokenCheck | null>(null);
-  const [checking, setChecking] = useState(true);
+  // Link sem token nenhum já nasce recusado: não há o que consultar, e passar
+  // por um efeito mostraria o "verificando" de um link que nunca foi válido.
+  const [check, setCheck] = useState<PasswordTokenCheck | null>(
+    token ? null : INVALID_TOKEN,
+  );
+  const [checking, setChecking] = useState(Boolean(token));
+  const [lastToken, setLastToken] = useState(token);
+
+  if (token !== lastToken) {
+    setLastToken(token);
+    setCheck(token ? null : INVALID_TOKEN);
+    setChecking(Boolean(token));
+  }
 
   // Valida o link ANTES de exibir o formulário — token ausente, expirado,
   // já usado ou inexistente nunca chega a renderizar os campos de senha.
   useEffect(() => {
     if (!token) {
-      setCheck({ valid: false, status: "invalid" });
-      setChecking(false);
       return;
     }
     let alive = true;
     authService
       .inspectPasswordToken(token)
       .then((res) => alive && setCheck(res))
-      .catch(() => alive && setCheck({ valid: false, status: "invalid" }))
+      .catch(() => alive && setCheck(INVALID_TOKEN))
       .finally(() => alive && setChecking(false));
     return () => {
       alive = false;

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

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

package/src/hooks/use-column-visibility.ts

@@ -1,11 +1,15 @@
 "use client";
 
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 
 import { safeStorage } from "#core/_utils/storage";
+import { useStoredValue } from "#core/hooks/use-stored-value";
 
 const STORAGE_PREFIX = "cols:";
 
+/** Nada escondido: uma referência só, para não re-renderizar quem observa. */
+const NONE: string[] = [];
+
 export interface UseColumnVisibilityResult {
   hiddenColumns: string[];
   isColumnVisible: (columnId: string) => boolean;
@@ -24,20 +28,29 @@ export function useColumnVisibility(
   storageKey?: string,
   defaultHidden: string[] = [],
 ): UseColumnVisibilityResult {
-  const [hiddenColumns, setHiddenColumns] = useState<string[]>(defaultHidden);
+  const key = storageKey ? `${STORAGE_PREFIX}${storageKey}` : undefined;
+  const stored = useStoredValue(key);
+  const [sessionHidden, setSessionHidden] = useState<string[]>(defaultHidden);
+
+  // A lista do primeiro render: vinda como parâmetro, ela é outro array a cada
+  // render, e devolvê-la direto faria a tabela inteira se achar mudada.
+  const [fallback] = useState(defaultHidden);
 
-  useEffect(() => {
-    if (!storageKey) {return;}
-    const raw = safeStorage.get(`${STORAGE_PREFIX}${storageKey}`);
-    if (!raw) {return;}
+  const hiddenColumns = useMemo<string[]>(() => {
+    if (!key) {
+      return sessionHidden;
+    }
+    if (!stored) {
+      return fallback;
+    }
     try {
-      // O `try` que sobrou é do JSON: o acesso ao armazenamento já é seguro,
-      // mas o conteúdo pode estar corrompido por uma versão anterior da tela.
-      setHiddenColumns(JSON.parse(raw));
+      // O `try` é do JSON: o acesso ao armazenamento já é seguro, mas o
+      // conteúdo pode estar corrompido por uma versão anterior da tela.
+      return JSON.parse(stored) as string[];
     } catch {
-      setHiddenColumns([]);
+      return NONE;
     }
-  }, [storageKey]);
+  }, [key, stored, sessionHidden, fallback]);
 
   const isColumnVisible = useCallback(
     (columnId: string) => !hiddenColumns.includes(columnId),
@@ -46,14 +59,13 @@ export function useColumnVisibility(
 
   const saveHiddenColumns = useCallback(
     (nextHidden: string[]) => {
-      setHiddenColumns(nextHidden);
-      if (!storageKey) {return;}
-      safeStorage.set(
-        `${STORAGE_PREFIX}${storageKey}`,
-        JSON.stringify(nextHidden),
-      );
+      if (!key) {
+        setSessionHidden(nextHidden);
+        return;
+      }
+      safeStorage.set(key, JSON.stringify(nextHidden));
     },
-    [storageKey],
+    [key],
   );
 
   return { hiddenColumns, isColumnVisible, saveHiddenColumns };

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

@@ -2,39 +2,70 @@
 
 import { useEffect } from "react";
 
+/** O que fica entre o nome do sistema e o da tela. */
+const SEPARATOR = " - ";
+
 /**
- * O título com que a página carregou — o que o `metadata` do projeto mandou.
+ * O nome do sistema — 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).
+ * Sai do próprio `document.title`, e por isso 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). É relido sempre que o título muda por fora: quem escreve por fora
+ * é o App Router, e o que ele escreve é justamente o `metadata` da rota.
  */
-let baseTitle: string | null = null;
+let baseTitle = "";
 
-/** O que fica entre o nome da tela e o do sistema. */
-const SEPARATOR = " · ";
+/** O último título que este hook escreveu — é como se reconhece o de fora. */
+let applied = "";
 
 /**
  * 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.
+ * achar a do financeiro era clicar uma a uma. O sistema vem primeiro e a tela
+ * depois: é como se lê um caminho, e a aba do sistema continua reconhecível
+ * pelo começo, que é onde o olho procura.
+ *
+ * Escrever uma vez não basta, e é por isso que há um `MutationObserver`: o
+ * App Router reescreve o `<title>` do `metadata` **depois** do efeito — na
+ * hidratação e a cada navegação —, então o nome da tela aparecia e sumia no
+ * mesmo quadro. Entre uma rota e outra o `<head>` chega a ficar sem `<title>`
+ * nenhum; esse vazio não vira `baseTitle`, senão o nome do sistema se perdia
+ * e a aba passava a mostrar só a tela.
  *
  * `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;
-    }
+    const apply = (): void => {
+      const current = document.title;
+
+      if (current && current !== applied) {
+        baseTitle = current;
+      }
+
+      const next =
+        title && baseTitle ? `${baseTitle}${SEPARATOR}${title}` : title || baseTitle;
+
+      // Sem reescrever o que já está lá: a escrita dispara o observador, e
+      // comparar aqui é o que impede o laço.
+      if (!next || next === current) {
+        return;
+      }
+
+      applied = next;
+      document.title = next;
+    };
+
+    apply();
 
-    if (!title) {
-      document.title = baseTitle;
-      return;
-    }
+    const observer = new MutationObserver(apply);
+    observer.observe(document.head, {
+      childList: true,
+      subtree: true,
+      characterData: true,
+    });
 
-    document.title = baseTitle ? `${title}${SEPARATOR}${baseTitle}` : title;
+    return () => observer.disconnect();
   }, [title]);
 };

package/src/hooks/use-filter-schema.ts

@@ -63,7 +63,9 @@ export function useFilterSchema(url: string): UseFilterSchemaResult {
   }, [url]);
 
   useEffect(() => {
-    void load();
+    void (async (): Promise<void> => {
+      await load();
+    })();
   }, [load]);
 
   return { schema, loading };

package/src/hooks/use-filters.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import type { AdvancedGroup, AdvancedValidation } from "#core/_utils/advanced-filter";
 import {
@@ -13,6 +13,7 @@ import {
 import type { FilterField, FilterValues } from "#core/_utils/filter";
 import { buildFilter, parseFilterValues } from "#core/_utils/filter";
 import { useFilterSchema } from "#core/hooks/use-filter-schema";
+import { useIsHydrated } from "#core/hooks/use-is-hydrated";
 
 export type FilterMode = "simple" | "advanced";
 
@@ -83,13 +84,17 @@ export function useFilters(
   const [tree, setTreeState] = useState<AdvancedGroup | null>(null);
   const [hydrated, setHydrated] = useState(false);
 
+  const isClient = useIsHydrated();
+
   // Hidrata da URL uma vez, quando o catálogo chega: sem ele não dá para saber
   // o tipo de cada campo, e portanto nem como ler o JSON. O combinador no topo
   // do JSON é o que revela que o filtro veio do modo avançado.
-  useEffect(() => {
-    if (hydrated || loading) {
-      return;
-    }
+  //
+  // No render, e não num efeito: a listagem espera o `hydrated` para buscar, e
+  // por um efeito a espera custaria um render a mais em toda tela com filtro.
+  // A querystring só é lida com `isClient` — no servidor não há `window`.
+  if (isClient && !hydrated && !loading) {
+    setHydrated(true);
     const raw = new URLSearchParams(window.location.search).get(QUERY_PARAM);
     if (raw && isAdvancedFilter(raw)) {
       const parsed = parseAdvancedFilter(raw, schema);
@@ -100,13 +105,34 @@ export function useFilters(
     } else if (raw) {
       setValuesState(parseFilterValues(raw, schema));
     } else if (defaultValues) {
-      // Espelha na URL como qualquer outro filtro: sem isso a tela mostraria
-      // um estado que o link não carrega.
       setValuesState(defaultValues);
-      writeToUrl(buildFilter(defaultValues, schema));
     }
-    setHydrated(true);
-  }, [hydrated, loading, schema, defaultValues]);
+  }
+
+  /**
+   * O padrão também vai para a URL: sem isso a tela mostraria um estado que o
+   * link não carrega.
+   *
+   * Escrever é efeito colateral, então mora num efeito — e só na primeira vez,
+   * guardado pelo `ref`: depois de hidratado, limpar os filtros deixa a URL sem
+   * `?filter=`, e repetir a escrita aqui faria o padrão voltar sozinho.
+   */
+  const defaultApplied = useRef(false);
+
+  useEffect(() => {
+    if (!hydrated || defaultApplied.current) {
+      return;
+    }
+    defaultApplied.current = true;
+
+    if (!defaultValues) {
+      return;
+    }
+    if (new URLSearchParams(window.location.search).get(QUERY_PARAM)) {
+      return;
+    }
+    writeToUrl(buildFilter(defaultValues, schema));
+  }, [hydrated, defaultValues, schema]);
 
   const setValues = useCallback(
     (next: FilterValues): void => {

package/src/hooks/use-is-hydrated.ts

@@ -0,0 +1,21 @@
+"use client";
+
+import { useSyncExternalStore } from "react";
+
+/** Nunca muda depois de hidratar, então não há a que se inscrever. */
+const subscribeNever = (): (() => void) => () => {};
+
+/**
+ * Já estamos no navegador, com o que só existe lá?
+ *
+ * Serve a quem precisa esperar a hidratação para agir — escrever na URL,
+ * aplicar classe no `<html>` — sem copiar nada para um estado dentro de um
+ * efeito. No servidor é `false`; no cliente vira `true` junto com o primeiro
+ * render que já enxerga `window`.
+ */
+export const useIsHydrated = (): boolean =>
+  useSyncExternalStore(
+    subscribeNever,
+    () => true,
+    () => false,
+  );

package/src/hooks/use-job-progress.ts

@@ -98,10 +98,15 @@ export function useJobProgress<TSummary = unknown>(
     IDLE as UseJobProgressResult<TSummary>,
   );
 
-  // Job novo começa do zero: sem isto a barra do anterior ficaria em 100%.
-  useEffect(() => {
+  const [lastJobId, setLastJobId] = useState(jobId);
+
+  // Job novo começa do zero: sem isto a barra do anterior ficaria em 100%. O
+  // ajuste é no render, então nem por um quadro a barra do job anterior
+  // aparece sob o novo.
+  if (jobId !== lastJobId) {
+    setLastJobId(jobId);
     setResult(IDLE as UseJobProgressResult<TSummary>);
-  }, [jobId]);
+  }
 
   const sync = useCallback(async (): Promise<void> => {
     if (!jobId) {
@@ -132,7 +137,9 @@ export function useJobProgress<TSummary = unknown>(
   }, [jobId]);
 
   useEffect(() => {
-    void sync();
+    void (async (): Promise<void> => {
+      await sync();
+    })();
   }, [sync, reconnectCount]);
 
   useEffect(() => {

package/src/hooks/use-list-query.ts

@@ -2,7 +2,7 @@
 
 import type { SortingState } from "@tanstack/react-table";
 import type { Dispatch, SetStateAction } from "react";
-import { useEffect, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 
 import type { ListQuery } from "#core/_services/api/list-query";
 import type { FilterValues } from "#core/_utils/filter";
@@ -50,11 +50,16 @@ export function useListQuery(
   const [pageSize, setPageSize] = useState(initialPageSize);
   const [sorting, setSorting] = useState<SortingState>([]);
 
+  const [lastFilter, setLastFilter] = useState(filter);
+
   // Trocar o filtro volta para a primeira página: a página 3 de um resultado
-  // que agora tem uma página só voltaria vazia.
-  useEffect(() => {
+  // que agora tem uma página só voltaria vazia. O ajuste é no render, então a
+  // busca já sai com a página certa — por um efeito, a primeira query iria com
+  // a página antiga e seria descartada.
+  if (filter !== lastFilter) {
+    setLastFilter(filter);
     setPage(0);
-  }, [filter]);
+  }
 
   const sort = sorting[0];
   const query = useMemo<ListQuery>(

package/src/hooks/use-stored-value.ts

@@ -0,0 +1,35 @@
+"use client";
+
+import { useCallback, useSyncExternalStore } from "react";
+
+import { safeStorage } from "#core/_utils/storage";
+
+const noop = (): void => {};
+
+/**
+ * O que está guardado numa chave do armazenamento, lido no próprio render.
+ *
+ * A preferência salva não é estado da tela: é estado de fora dela, e copiá-la
+ * para um `useState` dentro de um efeito custava um render a mais e mostrava o
+ * padrão por um quadro. `useSyncExternalStore` resolve as duas pontas — no
+ * servidor devolve `null`, e no cliente o valor certo já no primeiro render
+ * depois da hidratação.
+ *
+ * Devolve a string crua de propósito: é o que compara por identidade sem
+ * truque. Quem guarda JSON faz o `parse` num `useMemo`, senão cada leitura
+ * seria um objeto novo e o React re-renderizaria para sempre.
+ */
+export const useStoredValue = (key: string | undefined): string | null => {
+  const subscribe = useCallback(
+    (onChange: () => void): (() => void) =>
+      key ? safeStorage.subscribe(key, onChange) : noop,
+    [key],
+  );
+
+  const getSnapshot = useCallback(
+    (): string | null => (key ? safeStorage.get(key) : null),
+    [key],
+  );
+
+  return useSyncExternalStore(subscribe, getSnapshot, () => null);
+};