rl-core-front 0.16.0 → 0.16.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rl-core-front",
-  "version": "0.16.0",
+  "version": "0.16.1",
   "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/ui/data-table.tsx

@@ -11,6 +11,8 @@ import {
   PaginationState,
   RowData,
   rowPaginationFeature,
+  rowSelectionFeature,
+  RowSelectionState,
   rowSortingFeature,
   sortFn_alphanumeric,
   sortFn_basic,
@@ -30,13 +32,14 @@ import {
   SlidersHorizontal,
 } from "lucide-react";
 import type { JSX, PointerEvent as ReactPointerEvent } from "react";
-import { Fragment, useMemo, useRef, useState } from "react";
+import { Fragment, useEffect, useMemo, useRef, useState } from "react";
 
 import { countConditions } from "#core/_utils/advanced-filter";
 import { activeFilterCount } from "#core/_utils/filter";
 import { pageRange } from "#core/_utils/page-range";
 import { Button } from "#core/components/ui/button";
 import { Card } from "#core/components/ui/card";
+import { Checkbox } from "#core/components/ui/checkbox";
 import {
   ColumnVisibilityModal,
   ColumnVisibilityOption,
@@ -62,6 +65,7 @@ import { cn } from "#core/lib/utils";
 
 export const dataTableFeatures = tableFeatures({
   columnVisibilityFeature,
+  rowSelectionFeature,
   rowSortingFeature,
   rowPaginationFeature,
   sortedRowModel: createSortedRowModel(),
@@ -75,6 +79,48 @@ export const dataTableFeatures = tableFeatures({
 
 export type DataTableFeatures = typeof dataTableFeatures;
 
+/**
+ * A coluna das caixas de seleção.
+ *
+ * Fora do componente porque ela não depende de nada dele além dos dois rótulos
+ * — e defini-la dentro faria uma coluna nova a cada render, que é o suficiente
+ * para o TanStack remontar a tabela e perder a seleção no meio do clique.
+ *
+ * A caixa do cabeçalho marca **a página**, e não a base: com paginação no
+ * servidor, "todas" seria uma promessa que a tabela não tem como cumprir — ela
+ * só tem em mãos a página atual.
+ */
+const selectionColumn = <T extends RowData>(
+  selectAllLabel: string,
+  selectRowLabel: string,
+): ColumnDef<DataTableFeatures, T, unknown> => ({
+  id: "select",
+  meta: { shrink: true },
+  enableHiding: false,
+  enableSorting: false,
+  header: ({ table }) => (
+    <Checkbox
+      aria-label={selectAllLabel}
+      checked={
+        table.getIsAllPageRowsSelected()
+          ? true
+          : table.getIsSomePageRowsSelected()
+            ? "indeterminate"
+            : false
+      }
+      onCheckedChange={(marcado) => table.toggleAllPageRowsSelected(marcado === true)}
+    />
+  ),
+  cell: ({ row }) => (
+    <Checkbox
+      aria-label={selectRowLabel}
+      checked={row.getIsSelected()}
+      disabled={!row.getCanSelect()}
+      onCheckedChange={(marcado) => row.toggleSelected(marcado === true)}
+    />
+  ),
+});
+
 interface DataTableProps<T extends RowData> {
   columns: ColumnDef<DataTableFeatures, T, unknown>[];
   data: T[];
@@ -103,6 +149,23 @@ interface DataTableProps<T extends RowData> {
   onSortingChange?: OnChangeFn<SortingState>;
   /** Habilita ordenação (padrão true). Desligue quando o backend ainda não ordena. */
   enableSorting?: boolean;
+  /**
+   * Liga a seleção de linhas — uma coluna de caixas antes das outras.
+   *
+   * A função existe para a linha que **não** pode entrar: numa fatura, a
+   * parcela já paga não se paga de novo. Desabilitar a caixa é melhor que
+   * escondê-la, porque a coluna continua alinhada e a linha continua contando
+   * como linha.
+   */
+  enableRowSelection?: boolean | ((row: T) => boolean);
+  /**
+   * O que está selecionado, a cada mudança.
+   *
+   * O `clear` vem junto de propósito: quem age sobre a seleção precisa desfazê-la
+   * depois — pagou as seis parcelas, as caixas têm de esvaziar. Guardar a função
+   * é mais simples que a tabela adivinhar quando a ação terminou.
+   */
+  onSelectionChange?: (rows: T[], clear: () => void) => void;
   /**
    * Filtros dinâmicos, como o `useListQuery` os devolve. Sem esta prop o botão
    * não aparece — listagem sem catálogo continua funcionando igual.
@@ -372,6 +435,8 @@ export function DataTable<T extends RowData>({
   sorting,
   onSortingChange,
   enableSorting = true,
+  enableRowSelection,
+  onSelectionChange,
   filters,
   hiddenFilterFields,
   emptyMessage,
@@ -453,15 +518,34 @@ export function DataTable<T extends RowData>({
     ? { pageIndex: 0, pageSize: Math.max(data.length, 1) }
     : internalPagination;
 
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+
+  /*
+    A coluna das caixas entra na frente das outras, e só existe com a seleção
+    ligada: uma coluna a mais em toda tabela do sistema custaria 40px de largura
+    a telas que nunca vão selecionar nada.
+
+    `enableHiding: false` porque ela não é dado — esconder a caixa deixaria a
+    seleção ativa e invisível, que é o pior estado possível.
+  */
+  const colunas = useMemo(
+    () =>
+      enableRowSelection
+        ? [selectionColumn<T>(t("table.selectAll"), t("table.selectRow")), ...columns]
+        : columns,
+    [columns, enableRowSelection, t],
+  );
+
   const table = useTable({
     features: dataTableFeatures,
     data,
-    columns,
+    columns: colunas,
     getRowId: getRowId ? (row) => getRowId(row) : undefined,
     state: {
       columnVisibility,
       sorting: manualSorting ? sorting : internalSorting,
       pagination: manualPagination ? pagination : paginacaoLocal,
+      rowSelection,
     },
     onColumnVisibilityChange: (updater) => {
       const next =
@@ -472,6 +556,11 @@ export function DataTable<T extends RowData>({
           .map(([k]) => k),
       );
     },
+    onRowSelectionChange: setRowSelection,
+    enableRowSelection:
+      typeof enableRowSelection === "function"
+        ? (row: { original: T }) => enableRowSelection(row.original)
+        : enableRowSelection,
     onSortingChange: manualSorting ? onSortingChange : setInternalSorting,
     onPaginationChange: manualPagination
       ? onPaginationChange
@@ -482,6 +571,28 @@ export function DataTable<T extends RowData>({
     ...(manualPagination ? { rowCount: rowCount ?? 0 } : {}),
   });
 
+  /*
+    A tela é avisada num efeito, e não dentro do `onRowSelectionChange`.
+
+    O handler roda **antes** de o estado entrar, então ali a tabela ainda
+    responde a seleção antiga — e a tela receberia sempre uma seleção atrasada
+    em um clique, que é o tipo de erro que só aparece quando alguém confere o
+    total do que selecionou.
+  */
+  const selecionadas = table.getSelectedRowModel().rows.map((row) => row.original);
+  const avisar = useRef(onSelectionChange);
+
+  useEffect(() => {
+    avisar.current = onSelectionChange;
+  }, [onSelectionChange]);
+
+  useEffect(() => {
+    avisar.current?.(selecionadas as T[], () => setRowSelection({}));
+    // A dependência é o **estado** da seleção, e não a lista derivada: esta é
+    // um array novo a cada render, e o efeito rodaria sempre.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [rowSelection]);
+
   /*
     Linha de fechamento: existe só se alguma coluna visível declarar `footer`.
 

package/src/components/ui/index.ts

@@ -35,5 +35,6 @@ export * from "./simple-select";
 export * from "./sonner";
 export * from "./spinner";
 export * from "./switch";
+export * from "./tab-shortcuts";
 export * from "./table";
 export * from "./tabs";

package/src/components/ui/tab-shortcuts.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import type { JSX } from "react";
+
+import { MAX_TAB_SHORTCUTS, useShortcut } from "#core/hooks/use-shortcut";
+
+export interface TabShortcutsProps {
+  /** Os valores das abas, na ordem em que aparecem. */
+  values: readonly string[];
+  onSelect: (value: string) => void;
+}
+
+/**
+ * O rótulo do atalho de uma aba, para a dica que a própria aba mostra.
+ *
+ * `⌥` no Mac e `Alt` no resto: é a mesma tecla física, mas ninguém procura
+ * "Alt" num teclado da Apple. Fora do navegador (SSR) responde `Alt`, que é o
+ * que o primeiro render precisa escrever — a correção vem no cliente.
+ */
+export const tabShortcutLabel = (index: number): string => {
+  const mac =
+    typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform);
+
+  return `${mac ? "⌥" : "Alt"} ${index + 1}`;
+};
+
+/**
+ * Um atalho, uma instância.
+ *
+ * O `useShortcut` aceita uma lista de teclas mas chama o handler sem dizer
+ * **qual** disparou. Com um componente por aba, cada instância fica com a sua
+ * tecla e a sua ação, e nenhum hook roda dentro de laço — que é o que a regra
+ * dos hooks proíbe.
+ */
+const TabShortcut = ({
+  digit,
+  value,
+  onSelect,
+}: {
+  digit: number;
+  value: string;
+  onSelect: (value: string) => void;
+}): null => {
+  /*
+    Por `code`, e não por `key`: no macOS o `Option` + número não produz o
+    número — `⌥1` chega como `¡` e `⌥2` como `™`. Declarado como "1", o atalho
+    funcionava no Windows e falhava no Mac, que é o pior desfecho possível.
+  */
+  useShortcut(`Digit${digit}`, () => onSelect(value), { alt: true, byCode: true });
+
+  return null;
+};
+
+/**
+ * `Alt` + `1..9` troca de aba. Não desenha nada.
+ *
+ * Com `Alt`, e não a tecla sozinha: os números precisam continuar sendo
+ * digitáveis, e o `1` sem modificador já é o atalho de abrir cadastro — dois
+ * donos para a mesma tecla é o conflito que só aparece na tela onde os dois
+ * existem.
+ *
+ * A ordem das abas é a fonte da numeração: passe a mesma lista que desenha os
+ * gatilhos, e não uma cópia. Duas fontes para a mesma ordem é o jeito garantido
+ * de `Alt + 3` abrir a aba errada no dia em que alguém reordenar a barra.
+ */
+export const TabShortcuts = ({ values, onSelect }: TabShortcutsProps): JSX.Element => (
+  <>
+    {values.slice(0, MAX_TAB_SHORTCUTS).map((value, index) => (
+      <TabShortcut
+        key={value}
+        digit={index + 1}
+        value={value}
+        onSelect={onSelect}
+      />
+    ))}
+  </>
+);

package/src/features/login/hooks/use-login-flow.ts

@@ -49,7 +49,7 @@ export function useLoginFlow(): UseLoginFlowResult {
   const router = useRouter();
   const { notify } = useToast();
   const { t } = useI18n();
-  const { run, loading, error, setError } = useRequest();
+  const { run, loading, error, setError } = useRequest({ silent: true });
   const { refreshProfile } = useAuth();
 
   const [step, setStep] = useState<LoginStep>("credentials");

package/src/features/notifications/components/notification-item.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { AlertTriangle, CheckCircle2, Info, XCircle } from "lucide-react";
+import { AlertTriangle, CheckCircle2, Info, X, XCircle } from "lucide-react";
 import type { JSX } from "react";
 
 import { formatDateTime } from "#core/_utils/format";
@@ -23,26 +23,37 @@ const ICONS: Record<NotificationType, JSX.Element> = {
 export interface NotificationItemProps {
   notification: UserNotification;
   onSelect: (notification: UserNotification) => void;
+  /** Tira esta notificação da caixa. */
+  onDismiss: (id: string) => void;
 }
 
 export function NotificationItem({
   notification,
   onSelect,
+  onDismiss,
 }: NotificationItemProps): JSX.Element {
-  const { locale } = useI18n();
+  const { locale, t } = useI18n();
 
   return (
-    <button
-      type="button"
-      onClick={() => onSelect(notification)}
+    /*
+      O `×` é irmão do botão, e não filho: botão dentro de botão é HTML
+      inválido, e o clique de um dispararia o outro — descartar abriria a rota
+      da notificação no caminho.
+    */
+    <div
       className={cn(
-        "flex w-full gap-3 border-b border-border px-4 py-3 text-left transition-colors hover:bg-accent",
+        "group/notice relative border-b border-border transition-colors hover:bg-accent",
         !notification.read && "bg-accent/40",
       )}
     >
-      <span className="mt-0.5 shrink-0">{ICONS[notification.type]}</span>
+      <button
+        type="button"
+        onClick={() => onSelect(notification)}
+        className="flex w-full gap-3 px-4 py-3 pr-10 text-left"
+      >
+        <span className="mt-0.5 shrink-0">{ICONS[notification.type]}</span>
 
-      <span className="min-w-0 flex-1">
+        <span className="min-w-0 flex-1">
         <span className="flex items-center gap-2">
           <span
             className={cn(
@@ -63,7 +74,20 @@ export function NotificationItem({
         <span className="mt-1 block text-[11px] text-muted-foreground">
           {formatDateTime(notification.createdAt, locale)}
         </span>
-      </span>
-    </button>
+        </span>
+      </button>
+
+      {/* Só no hover: um `×` fixo em cada linha vira ruído numa lista de vinte,
+          e o gesto de descartar não é o que se procura ao abrir o sino. */}
+      <button
+        type="button"
+        onClick={() => onDismiss(notification.id)}
+        aria-label={t("notifications.dismiss")}
+        title={t("notifications.dismiss")}
+        className="absolute right-2 top-3 hidden rounded p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground group-hover/notice:block"
+      >
+        <X className="h-3.5 w-3.5" />
+      </button>
+    </div>
   );
 }

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

@@ -20,6 +20,10 @@ export interface UseNotificationsResult {
   fetch: () => Promise<void>;
   markAsRead: (id: string) => Promise<void>;
   markAllAsRead: () => Promise<void>;
+  /** Tira uma da caixa deste usuário. */
+  dismiss: (id: string) => Promise<void>;
+  /** Limpa as já lidas — o "não deixa acumular". */
+  dismissRead: () => Promise<void>;
 }
 
 export function useNotifications(): UseNotificationsResult {
@@ -74,5 +78,32 @@ export function useNotifications(): UseNotificationsResult {
     await run(() => notificationsService.markAllAsRead());
   }, [run]);
 
-  return { items, unread, loading, fetch, markAsRead, markAllAsRead };
+  /*
+    A lista recarrega em vez de tirar o item na mão: a paginação é do servidor,
+    e remover local deixaria a página com um registro a menos até o próximo
+    fetch — some uma notificação da contagem sem que ela tenha sido descartada.
+  */
+  const dismiss = useCallback(
+    async (id: string): Promise<void> => {
+      await notificationsService.dismiss(id);
+      await fetch();
+    },
+    [fetch],
+  );
+
+  const dismissRead = useCallback(async (): Promise<void> => {
+    await notificationsService.dismissRead();
+    await fetch();
+  }, [fetch]);
+
+  return {
+    items,
+    unread,
+    loading,
+    fetch,
+    markAsRead,
+    markAllAsRead,
+    dismiss,
+    dismissRead,
+  };
 }

package/src/features/notifications/notifications-center.tsx

@@ -18,7 +18,7 @@ import { useNotifications } from "#core/features/notifications/hooks/use-notific
 import type { UserNotification } from "#core/features/notifications/services/notifications.service";
 import { cn } from "#core/lib/utils";
 
-type Tab = "all" | "unread";
+type Tab = "all" | "unread" | "read";
 
 /** Acima disso o número não cabe no badge sem empurrar o layout. */
 const BADGE_LIMIT = 99;
@@ -26,11 +26,18 @@ const BADGE_LIMIT = 99;
 export function NotificationsCenter(): JSX.Element {
   const { t } = useI18n();
   const router = useRouter();
-  const { items, unread, loading, markAsRead, markAllAsRead } =
+  const { items, unread, loading, markAsRead, markAllAsRead, dismiss, dismissRead } =
     useNotifications();
   const [tab, setTab] = useState<Tab>("all");
 
-  const visible = tab === "unread" ? items.filter((i) => !i.read) : items;
+  const visible =
+    tab === "unread"
+      ? items.filter((i) => !i.read)
+      : tab === "read"
+        ? items.filter((i) => i.read)
+        : items;
+
+  const lidas = items.filter((i) => i.read).length;
 
   const onSelect = (notification: UserNotification): void => {
     if (!notification.read) {
@@ -63,7 +70,7 @@ export function NotificationsCenter(): JSX.Element {
       <DropdownMenuContent align="end" className="w-96 p-0">
         <div className="flex items-center justify-between border-b border-border px-4 py-2">
           <div className="flex gap-3">
-            {(["all", "unread"] as const).map((value) => (
+            {(["all", "unread", "read"] as const).map((value) => (
               <button
                 key={value}
                 type="button"
@@ -75,21 +82,35 @@ export function NotificationsCenter(): JSX.Element {
                     : "border-transparent text-muted-foreground hover:text-foreground",
                 )}
               >
-                {value === "all"
-                  ? t("notifications.all")
-                  : t("notifications.unread")}
+                {t(`notifications.${value}`)}
               </button>
             ))}
           </div>
 
-          <button
-            type="button"
-            onClick={() => void markAllAsRead()}
-            disabled={unread === 0}
-            className="text-xs font-medium text-primary hover:underline disabled:cursor-not-allowed disabled:text-muted-foreground disabled:no-underline"
-          >
-            {t("notifications.markAllRead")}
-          </button>
+          {/*
+            A ação do cabeçalho segue a aba. Em "Lidas" o que se quer é
+            esvaziar, e "marcar todas como lidas" ali não faria nada — botão que
+            não pode fazer efeito é botão que ensina a pessoa a desconfiar.
+          */}
+          {tab === "read" ? (
+            <button
+              type="button"
+              onClick={() => void dismissRead()}
+              disabled={lidas === 0}
+              className="text-xs font-medium text-primary hover:underline disabled:cursor-not-allowed disabled:text-muted-foreground disabled:no-underline"
+            >
+              {t("notifications.clearRead")}
+            </button>
+          ) : (
+            <button
+              type="button"
+              onClick={() => void markAllAsRead()}
+              disabled={unread === 0}
+              className="text-xs font-medium text-primary hover:underline disabled:cursor-not-allowed disabled:text-muted-foreground disabled:no-underline"
+            >
+              {t("notifications.markAllRead")}
+            </button>
+          )}
         </div>
 
         <div className="max-h-96 overflow-y-auto">
@@ -110,6 +131,7 @@ export function NotificationsCenter(): JSX.Element {
               key={notification.id}
               notification={notification}
               onSelect={onSelect}
+              onDismiss={(id) => void dismiss(id)}
             />
           ))}
         </div>

package/src/features/notifications/services/notifications.service.ts

@@ -35,4 +35,14 @@ export const notificationsService = {
   markAllAsRead() {
     return api.patch("/notifications/read-all", {}).then((r) => r.data);
   },
+
+  /** Tira uma da caixa de quem chamou — não apaga para os outros. */
+  dismiss(id: string) {
+    return api.delete(`/notifications/${id}`).then(() => undefined);
+  },
+
+  /** Limpa as já lidas. Só elas: o não lido é o que não pode se perder. */
+  dismissRead() {
+    return api.delete("/notifications/read").then(() => undefined);
+  },
 };

package/src/features/profile/force-password-change.tsx

@@ -22,7 +22,7 @@ export function ForcePasswordChange({
 }: {
   reason?: "expired" | "provisional";
 }): JSX.Element {
-  const { run, loading, error } = useRequest();
+  const { run, loading, error } = useRequest({ silent: true });
   const { logout } = useAuth();
   const { t } = useI18n();
 

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

@@ -53,10 +53,12 @@ export function ProfileScreen(): JSX.Element {
   // `error` vinha sendo ignorado: o `useRequest` guarda a mensagem do servidor
   // mas não notifica, então um 400 de validação ficava invisível — a tela não
   // salvava e nada dizia por quê.
-  const { run, loading, error, setError } = useRequest();
+  // Os dois calam o toast: esta tela desenha `error` acima do formulário, e
+  // a troca de senha desenha o dela dentro do bloco de senha.
+  const { run, loading, error, setError } = useRequest({ silent: true });
   // useRequest próprio da troca de senha: o `run` compartilhado da tela zeraria
   // esse erro a cada outra ação (salvar perfil, trocar avatar).
-  const password = useRequest();
+  const password = useRequest({ silent: true });
   const { t } = useI18n();
 
   const [avatar, setAvatar] = useState<string | null>(null);

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

@@ -35,7 +35,7 @@ export function ResetPasswordScreen(): JSX.Element {
   const router = useRouter();
   const params = useSearchParams();
   const token = params.get("token") ?? "";
-  const { run, loading, error } = useRequest();
+  const { run, loading, error } = useRequest({ silent: true });
   const { t } = useI18n();
   const [done, setDone] = useState(false);
   const [check, setCheck] = useState<PasswordTokenCheck | null>(null);

package/src/features/shortcuts/components/shortcut-card.tsx

@@ -21,8 +21,6 @@ export interface Shortcut {
   where: string;
   /** Quando ele **não** dispara — a metade que evita surpresa. */
   caveat: string;
-  /** Observação de teclado, quando a tecla tem outro nome em algum sistema. */
-  note?: string;
   icon: React.ComponentType<{ className?: string }>;
 }
 
@@ -88,9 +86,6 @@ export function ShortcutCard({ shortcut }: ShortcutCardProps): JSX.Element {
         <Badge variant="secondary" className="w-fit font-normal">
           {t(shortcut.caveat)}
         </Badge>
-        {shortcut.note && (
-          <p className="text-xs text-muted-foreground">{t(shortcut.note)}</p>
-        )}
       </div>
     </Card>
   );

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

@@ -5,6 +5,7 @@ import {
   Keyboard,
   Maximize2,
   PlusSquare,
+  Rows3,
   XSquare,
 } from "lucide-react";
 import type { JSX } from "react";
@@ -15,8 +16,10 @@ import {
   ShortcutCard,
 } from "#core/features/shortcuts/components/shortcut-card";
 import {
+  ALT_KEY_LABELS,
   CREATE_SHORTCUT_KEYS,
-  EXPAND_SHORTCUT_LABEL,
+  EXPAND_SHORTCUT_KEY,
+  TAB_SHORTCUT_DIGITS,
 } from "#core/hooks/use-shortcut";
 
 /**
@@ -38,12 +41,20 @@ const SHORTCUTS: Shortcut[] = [
     caveat: "shortcuts.create.caveat",
     icon: PlusSquare,
   },
+  {
+    name: "shortcuts.tabs.name",
+    // `Alt` e `⌥` são a mesma tecla: viram duas combinações e o card escreve
+    // "ou" entre elas, em vez de a diferença virar nota de rodapé.
+    combos: ALT_KEY_LABELS.map((alt) => [alt, TAB_SHORTCUT_DIGITS]),
+    where: "shortcuts.tabs.where",
+    caveat: "shortcuts.tabs.caveat",
+    icon: Rows3,
+  },
   {
     name: "shortcuts.expand.name",
-    combos: [EXPAND_SHORTCUT_LABEL.split(" + ")],
+    combos: ALT_KEY_LABELS.map((alt) => [alt, EXPAND_SHORTCUT_KEY]),
     where: "shortcuts.expand.where",
     caveat: "shortcuts.expand.caveat",
-    note: "shortcuts.expand.note",
     icon: Maximize2,
   },
   {

package/src/hooks/use-request.ts

@@ -1,7 +1,7 @@
 "use client";
 
 import { AxiosError } from "axios";
-import { Dispatch, SetStateAction, useCallback, useState } from "react";
+import { Dispatch, SetStateAction, useCallback, useEffect, useRef, useState } from "react";
 
 import { useI18n, useToast } from "#core/contexts";
 
@@ -34,6 +34,18 @@ export interface RunOptions {
    * "Registro criado" (ex.: "Link de primeiro acesso enviado").
    */
   success?: RequestOperation | string;
+  /**
+   * Cala o toast de erro — para a tela que **já desenha** o `error` na página.
+   *
+   * O padrão é avisar, e é o certo: falha silenciosa é o pior desfecho
+   * possível de uma escrita. A pessoa clica em "Pagar", nada acontece, e não há
+   * como distinguir "o servidor recusou" de "o botão está quebrado" — as duas
+   * hipóteses levam a caminhos diferentes e nenhuma delas é investigar o log.
+   *
+   * O login é o caso legítimo do contrário: ele mostra "Credenciais inválidas"
+   * dentro do formulário, e o toast por cima diria a mesma coisa duas vezes.
+   */
+  silent?: boolean;
   /**
    * Reage ao erro com o `errorCode` em mãos — para quando a tela precisa fazer
    * algo além de mostrar a mensagem (ex.: voltar ao passo de credenciais
@@ -59,14 +71,33 @@ export interface UseRequestResult {
  * Hook genérico para chamadas assíncronas com estados de loading/erro.
  * Ex.: const { run, loading, error } = useRequest();
  *      await run(() => authService.login(email, senha));
+ *
+ * Os `defaults` valem para todas as chamadas daquele hook, e cada `run` os
+ * sobrescreve. É o que evita repetir `silent: true` em dez chamadas de uma tela
+ * que desenha o erro na própria página — e repetir dez vezes é como uma delas
+ * fica para trás.
  */
-export function useRequest(): UseRequestResult {
+export function useRequest(defaults: RunOptions = {}): UseRequestResult {
   const { t } = useI18n();
   const { notify } = useToast();
   const [loading, setLoading] = useState(false);
+  /*
+    Os padrões entram por ref, e não pela lista de dependências do `run`.
+
+    A tela escreve `useRequest({ silent: true })`, e um literal é objeto novo a
+    cada render: pela dependência, o `run` mudaria de identidade sempre, e todo
+    `useCallback`/`useEffect` que depende dele — a carga de uma listagem, por
+    exemplo — recarregaria em laço. O sintoma seria a tela piscando sozinha, a
+    quilômetros da causa.
+  */
+  const defaultsRef = useRef(defaults);
   const [error, setError] = useState<string | null>(null);
   const [errorCode, setErrorCode] = useState<string | null>(null);
 
+  useEffect(() => {
+    defaultsRef.current = defaults;
+  }, [defaults]);
+
   /**
    * Ordem de preferência da mensagem:
    * 1. tradução do `errorCode` — texto do produto, no idioma do usuário;
@@ -103,13 +134,14 @@ export function useRequest(): UseRequestResult {
   );
 
   const run = useCallback(
-    async <T>(fn: () => Promise<T>, options?: RunOptions): Promise<T | null> => {
+    async <T>(fn: () => Promise<T>, call?: RunOptions): Promise<T | null> => {
+      const options = { ...defaultsRef.current, ...call };
       setLoading(true);
       setError(null);
       setErrorCode(null);
       try {
         const result = await fn();
-        if (options?.success) {
+        if (options.success) {
           notify(successMessage(options.success), "success");
         }
         return result;
@@ -120,7 +152,17 @@ export function useRequest(): UseRequestResult {
         const code = body?.errorCode ?? null;
         setError(message);
         setErrorCode(code);
-        options?.onError?.({ code, message });
+
+        /*
+          O aviso vem antes do `onError` de propósito: quem passa o callback
+          costuma navegar ou fechar um modal ali dentro, e o toast disparado
+          depois disso apareceria sobre uma tela que já mudou.
+        */
+        if (!options.silent) {
+          notify(message, "error");
+        }
+        options.onError?.({ code, message });
+
         return null;
       } finally {
         setLoading(false);

package/src/hooks/use-shortcut.ts

@@ -47,6 +47,26 @@ export const EXPAND_SHORTCUT_KEY = "Enter";
 /** Como ele se apresenta ao usuário. */
 export const EXPAND_SHORTCUT_LABEL = "Alt + Enter";
 
+/**
+ * O modificador do `Alt`, escrito das duas formas que os teclados usam.
+ *
+ * `Alt` e `⌥` são a **mesma tecla física**, e é por isso que aparecem como
+ * combinações alternativas na tela de atalhos em vez de virarem uma nota de
+ * rodapé: quem tem um teclado da Apple procura o símbolo, não a palavra.
+ */
+export const ALT_KEY_LABELS = ["Alt", "⌥"] as const;
+
+/**
+ * Quantas abas o atalho numera.
+ *
+ * Nove porque `Alt + 0` não segue a sequência, e porque ninguém conta abas além
+ * disso sem olhar.
+ */
+export const MAX_TAB_SHORTCUTS = 9;
+
+/** Como o atalho de abas se apresenta: `Alt` + `1…9`. */
+export const TAB_SHORTCUT_DIGITS = `1…${MAX_TAB_SHORTCUTS}`;
+
 export interface ShortcutOptions {
   /**
    * Exige duas batidas seguidas dentro de meio segundo.
@@ -85,6 +105,28 @@ export interface ShortcutOptions {
    * `false` quando a tecla sem ele significar outra coisa.
    */
   shift?: boolean;
+  /**
+   * Compara a **posição física** da tecla (`event.code`), e não o caractere.
+   *
+   * Existe por causa do `Alt`: no macOS, `Option` + número **não** produz o
+   * número — produz um símbolo. `⌥1` chega como `¡`, `⌥2` como `™`, `⌥3` como
+   * `£`, e o atalho declarado como `"1"` nunca dispara. No Windows e no Linux
+   * ele dispararia, o que é pior que não funcionar em lugar nenhum: quebra só
+   * na máquina de quem usa Mac.
+   *
+   * `event.code` é imune a isso e a layout: a tecla ao lado do `Q` é `KeyW` no
+   * QWERTY e no AZERTY, e o `1` é `Digit1` com ou sem modificador.
+   *
+   * Em troca, ele **ignora o layout de propósito** — e é justamente por isso
+   * que não é o padrão. Um atalho de letra declarado por `code` cai na tecla
+   * errada de quem usa Dvorak, enquanto por `key` ele segue a letra que a
+   * pessoa vê impressa. Use `byCode` para dígito com modificador; para letra,
+   * continue em `key`.
+   *
+   * Os valores são os do padrão: `Digit1`..`Digit9`, `KeyA`..`KeyZ`,
+   * `Numpad1`, `Enter`, `Space`.
+   */
+  byCode?: boolean;
   /**
    * Deixa o atalho valer também com o cursor dentro de um campo.
    *
@@ -146,6 +188,7 @@ export function useShortcut(
     shift,
     allowInDialog = false,
     allowWhileTyping = false,
+    byCode = false,
   } = options;
 
   // Serializado para o efeito não se reinscrever a cada render quando a tela
@@ -179,7 +222,12 @@ export function useShortcut(
     const accepted = keySignature.split("\u0000");
 
     const onKeyDown = (event: KeyboardEvent): void => {
-      if (!accepted.includes(event.key)) {
+      // A mesma leitura serve para a comparação e para a janela do duplo: são
+      // "a mesma tecla", e ler uma por `code` e outra por `key` faria a segunda
+      // batida de um atalho por posição nunca casar com a primeira.
+      const pressed = byCode ? event.code : event.key;
+
+      if (!accepted.includes(pressed)) {
         return;
       }
       if (event.altKey !== alt) {
@@ -203,10 +251,10 @@ export function useShortcut(
       if (double) {
         const now = Date.now();
         const previous = lastPressRef.current;
-        lastPressRef.current = { key: event.key, at: now };
+        lastPressRef.current = { key: pressed, at: now };
 
         if (
-          previous.key !== event.key ||
+          previous.key !== pressed ||
           now - previous.at > DOUBLE_PRESS_WINDOW_MS
         ) {
           return;
@@ -244,6 +292,7 @@ export function useShortcut(
     shift,
     allowInDialog,
     allowWhileTyping,
+    byCode,
   ]);
 }
 

package/src/i18n/messages/en.ts

@@ -142,12 +142,17 @@ export const en: Messages = {
       where: "On any listing with a create button.",
       caveat: "Does not fire inside a text field or while a dialog is open",
     },
+    tabs: {
+      name: "Switch tab",
+      where:
+        "On any screen with tabs, the number opens the tab in that position — 1 is the first.",
+      caveat: "Does not fire inside a text field or with a modal open",
+    },
     expand: {
       name: "Expand the dialog",
       where:
         "With a dialog open, toggles between normal and expanded size. Works anywhere in the dialog, like Esc.",
       caveat: "Works in any field, and does not submit the form",
-      note: "On a Mac, Alt is the Option key (⌥) — most keyboards print both labels on it.",
     },
     submit: {
       name: "Submit the form",
@@ -170,6 +175,8 @@ export const en: Messages = {
   },
   table: {
     columns: "Columns",
+    selectAll: "Select all rows on this page",
+    selectRow: "Select this row",
     columnsButton: "Columns",
     columnsTitle: "Configure column visibility",
     columnsHint: "Select the columns you want to see in the table.",
@@ -252,6 +259,9 @@ export const en: Messages = {
     title: "Notifications",
     all: "All",
     unread: "Unread",
+    read: "Read",
+    clearRead: "Clear read",
+    dismiss: "Remove from list",
     markAllRead: "Mark all as read",
     empty: "No notifications",
   },

package/src/i18n/messages/pt.ts

@@ -144,12 +144,17 @@ export const pt = {
       where: "Em qualquer listagem que tenha o botão de cadastrar.",
       caveat: "Não dispara dentro de um campo de texto nem com um modal aberto",
     },
+    tabs: {
+      name: "Trocar de aba",
+      where:
+        "Em qualquer tela com abas, o número abre a aba naquela posição — 1 é a primeira.",
+      caveat: "Não dispara dentro de um campo de texto nem com um modal aberto",
+    },
     expand: {
       name: "Ampliar o modal",
       where:
         "Com um modal aberto, alterna entre o tamanho normal e o ampliado. Vale em qualquer lugar do modal, como o Esc.",
       caveat: "Funciona em qualquer campo, e não envia o formulário junto",
-      note: "No Mac, o Alt é a tecla Option (⌥) — em boa parte dos teclados ela vem escrita das duas formas.",
     },
     submit: {
       name: "Enviar o formulário",
@@ -172,6 +177,8 @@ export const pt = {
   },
   table: {
     columns: "Colunas",
+    selectAll: "Selecionar todas as linhas da página",
+    selectRow: "Selecionar esta linha",
     columnsButton: "Colunas",
     columnsTitle: "Configurar visualização de colunas",
     columnsHint: "Selecione as colunas que deseja visualizar na tabela.",
@@ -255,6 +262,9 @@ export const pt = {
     title: "Notificações",
     all: "Todas",
     unread: "Não lidas",
+    read: "Lidas",
+    clearRead: "Limpar lidas",
+    dismiss: "Tirar da lista",
     markAllRead: "Marcar todas como lidas",
     empty: "Nenhuma notificação",
   },

package/src/index.ts

@@ -106,10 +106,13 @@ export { useListQuery } from "#core/hooks/use-list-query";
 export type { RunOptions, UseRequestResult } from "#core/hooks/use-request";
 export type { ShortcutOptions } from "#core/hooks/use-shortcut";
 export {
+  ALT_KEY_LABELS,
   CREATE_SHORTCUT_KEYS,
   CREATE_SHORTCUT_LABEL,
   EXPAND_SHORTCUT_KEY,
   EXPAND_SHORTCUT_LABEL,
+  MAX_TAB_SHORTCUTS,
+  TAB_SHORTCUT_DIGITS,
   useShortcut,
 } from "#core/hooks/use-shortcut";
 export type { TableView, UseTableViewResult } from "#core/hooks/use-table-view";