rl-core-front 0.15.6 → 0.16.1

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-image-upload.ts

@@ -0,0 +1,169 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+
+import {
+  ImageAccepted,
+  ImageJobSummary,
+  ImageProfileInfo,
+  imagesService,
+} from "#core/_services/images";
+import { useI18n } from "#core/contexts/i18n-context";
+import { useJobs } from "#core/contexts/jobs-context";
+
+export interface UseImageUploadResult {
+  /** O formato de saída que o servidor declarou. `null` enquanto carrega. */
+  profile: ImageProfileInfo | null;
+  sending: boolean;
+  error: string | null;
+  /** Envia um arquivo e devolve o caminho quando a conversão termina. */
+  upload: (file: File) => Promise<string | null>;
+  /** Manda o servidor buscar a imagem num endereço. */
+  uploadFromUrl: (url: string) => Promise<string | null>;
+  clearError: () => void;
+}
+
+/**
+ * Orquestra o envio de uma imagem: pergunta o perfil, valida o que dá para
+ * validar antes de gastar rede, envia e espera o desfecho.
+ *
+ * A espera não abre socket nenhum: ela registra uma sessão no `JobsProvider`,
+ * que já escuta a conexão do `AppShell` — e é a mesma sessão que o painel do
+ * rodapé mostra. Quando a resposta já traz o `path` (imagem pequena, ou
+ * ambiente sem fila), o job se encerra na hora, sem esperar evento que não vem.
+ */
+export function useImageUpload(profileName: string): UseImageUploadResult {
+  const { t } = useI18n();
+  const { start } = useJobs();
+  const [profile, setProfile] = useState<ImageProfileInfo | null>(null);
+  const [sending, setSending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let ativo = true;
+
+    void imagesService
+      .profile(profileName)
+      .then((data) => {
+        if (ativo) {
+          setProfile(data);
+        }
+      })
+      .catch(() => {
+        // Perfil que não responde não derruba a tela: o envio segue possível, e
+        // quem recusa de verdade é o servidor.
+      });
+
+    return () => {
+      ativo = false;
+    };
+  }, [profileName]);
+
+  /** O caminho comum aos dois envios: sessão, espera e tradução do erro. */
+  const send = useCallback(
+    async (
+      label: string,
+      request: () => Promise<ImageAccepted>,
+    ): Promise<string | null> => {
+      setSending(true);
+      setError(null);
+
+      const job = start<ImageJobSummary>(label);
+
+      try {
+        const accepted = await request();
+
+        // Já terminou: encerra a sessão com o resultado em vez de esperar um
+        // evento que não vai chegar.
+        if (accepted.path) {
+          job.settle({ path: accepted.path, width: 0, height: 0, bytes: 0 });
+          return accepted.path;
+        }
+
+        if (!accepted.jobId) {
+          throw new Error(t("image.failed"));
+        }
+
+        job.bind(accepted.jobId);
+
+        const summary = await job.done;
+        return summary.path;
+      } catch (err) {
+        const message = messageOf(err, t("image.failed"));
+
+        // `fail` é idempotente do ponto de vista de quem chama: se o job já
+        // terminou em falha (foi o socket que trouxe o erro), isto não duplica
+        // nada — mas se a falha foi no próprio HTTP, é o que tira a sessão do
+        // painel.
+        job.fail(message);
+        setError(message);
+        return null;
+      } finally {
+        setSending(false);
+      }
+    },
+    [start, t],
+  );
+
+  const upload = useCallback(
+    async (file: File): Promise<string | null> => {
+      // As duas validações que dá para fazer aqui, e que evitam subir megabytes
+      // para receber 400: tipo e tamanho, ambos vindos do perfil.
+      if (profile && !profile.accept.includes(file.type)) {
+        setError(t("image.invalidType"));
+        return null;
+      }
+      if (profile && file.size > profile.maxBytes) {
+        setError(
+          t("image.tooLarge", {
+            size: Math.round(profile.maxBytes / (1024 * 1024)),
+          }),
+        );
+        return null;
+      }
+
+      return await send(file.name, () => imagesService.upload(profileName, file));
+    },
+    [profile, profileName, send, t],
+  );
+
+  const uploadFromUrl = useCallback(
+    async (url: string): Promise<string | null> =>
+      await send(labelOf(url), () => imagesService.fromUrl(profileName, url)),
+    [profileName, send],
+  );
+
+  return {
+    profile,
+    sending,
+    error,
+    upload,
+    uploadFromUrl,
+    clearError: () => setError(null),
+  };
+}
+
+/** O nome no fim da URL, para rotular a barra. */
+const labelOf = (url: string): string =>
+  url.split("?")[0].split("/").filter(Boolean).pop()?.slice(0, 60) ?? "imagem";
+
+/**
+ * A mensagem que o backend escreveu, quando existe.
+ *
+ * O core devolve texto pronto para ler em erro de negócio ("A imagem passa do
+ * limite de 8MB"), e trocá-lo por um genérico esconderia justamente o que a
+ * pessoa precisa saber para resolver.
+ */
+const messageOf = (error: unknown, fallback: string): string => {
+  const response = (error as { response?: { data?: { message?: unknown } } })
+    ?.response?.data?.message;
+
+  if (typeof response === "string") {
+    return response;
+  }
+  if (Array.isArray(response) && typeof response[0] === "string") {
+    return response[0];
+  }
+
+  return (error as Error)?.message || fallback;
+};

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

@@ -91,6 +91,21 @@ export const en: Messages = {
     running: "Processing…",
     completed: "Processing finished",
     failed: "The processing could not be completed",
+    dockRunning: "{count} in progress",
+    dockFailed: "Something went wrong",
+  },
+  image: {
+    empty: "Drag an image, paste it, or",
+    choose: "choose a file",
+    urlLabel: "Or paste an image address",
+    urlAction: "Fetch",
+    remove: "Remove image",
+    replace: "Replace image",
+    sending: "Sending…",
+    tooLarge: "The image exceeds the {size}MB limit",
+    invalidType: "Invalid format — use JPEG, PNG or WebP",
+    failed: "The image could not be sent",
+    hint: "The image is converted to {format} at up to {width}px.",
   },
   queues: {
     title: "Queues",
@@ -127,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",
@@ -155,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.",
@@ -178,6 +200,7 @@ export const en: Messages = {
     hint: "Fill in only the fields you want to use. All of them are combined with AND.",
     apply: "Apply",
     clear: "Clear",
+    close: "Close",
     empty: "This listing has no filters yet.",
     noOptions: "No options available",
     all: "All",
@@ -236,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",
   },