@hed-hog/core 0.0.398 → 0.0.400

package/hedhog/frontend/app/mail/log/page.tsx.ejs

@@ -6,11 +6,13 @@ import {
   PageHeader,
   PaginationFooter,
   SearchBar,
+  SortableTableHead,
   type SearchBarControl,
 } from '@/components/entity-list';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
+import { DateRangePicker } from '@/components/ui/date-range-picker';
 import { Input } from '@/components/ui/input';
 import { KpiCardsGrid, type KpiCardItem } from '@/components/ui/kpi-cards-grid';
 import { ScrollArea } from '@/components/ui/scroll-area';
@@ -31,7 +33,9 @@ import {
 } from '@/components/ui/table';
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 import { useDebounce } from '@/hooks/use-debounce';
+import { useListUrlState } from '@/hooks/use-list-url-state';
 import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
+import { useTableSort, type SortableColumn } from '@/hooks/use-table-sort';
 import { formatDate } from '@/lib/format-date';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import {
@@ -48,7 +52,7 @@ import {
   User,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 type PaginationResult<T> = {
   data: T[];
@@ -129,20 +133,57 @@ type ViewMode = 'cards' | 'table';
 
 const DEFAULT_PAGE_SIZES = [6, 12, 24, 48, 96] as const;
 
+/**
+ * "Delivery" fica de fora: é um badge composto, agregado a partir da relação
+ * `mail_sent_user` no service — não é coluna que o backend saiba ordenar. Ver
+ * `MAIL_SENT_SORT` em `libraries/core/src/mail-sent/mail-sent.sort.ts`.
+ */
+type MailSentSortField = 'id' | 'subject' | 'from' | 'to' | 'created_at';
+
+const SORT_COLUMNS = [
+  'id',
+  'subject',
+  'from',
+  'to',
+  { field: 'created_at', initialOrder: 'desc' },
+] as const satisfies readonly SortableColumn<MailSentSortField>[];
+
 export default function MailLogPage() {
   const t = useTranslations('core.MailLog');
   const [selectedLog, setSelectedLog] = useState<MailSent | null>(null);
   const [isDetailSheetOpen, setIsDetailSheetOpen] = useState(false);
-  const [searchTerm, setSearchTerm] = useState('');
-  const [recipientEmail, setRecipientEmail] = useState('');
-  const [statusFilter, setStatusFilter] = useState<DeliveryStatusFilter>('all');
-  const [hasErrorFilter, setHasErrorFilter] = useState<HasErrorFilter>('all');
-  const [deliveryFilter, setDeliveryFilter] =
-    useState<DeliveryOutcomeFilter>('all');
-  const [createdAtFrom, setCreatedAtFrom] = useState('');
-  const [createdAtTo, setCreatedAtTo] = useState('');
+  // Busca, filtros e página vivem na URL: voltar do detalhe de um envio
+  // recupera a mesma consulta, e o link pode ser passado adiante.
+  const urlState = useListUrlState({
+    filters: {
+      recipient: { param: 'recipient', defaultValue: '' },
+      status: { param: 'status', defaultValue: 'all' },
+      hasError: { param: 'hasError', defaultValue: 'all' },
+      delivery: { param: 'delivery', defaultValue: 'all' },
+      createdAtFrom: { param: 'createdAtFrom', defaultValue: '' },
+      createdAtTo: { param: 'createdAtTo', defaultValue: '' },
+    },
+  });
+  const {
+    search: searchTerm,
+    setSearch: setSearchTerm,
+    debouncedSearch,
+    page,
+    setPage,
+  } = urlState;
+  const statusFilter = urlState.filters.status as DeliveryStatusFilter;
+  const hasErrorFilter = urlState.filters.hasError as HasErrorFilter;
+  const deliveryFilter = urlState.filters.delivery as DeliveryOutcomeFilter;
+  const createdAtFrom = urlState.filters.createdAtFrom;
+  const createdAtTo = urlState.filters.createdAtTo;
   const [viewMode, setViewMode] = useState<ViewMode>('cards');
-  const debouncedSearch = useDebounce(searchTerm);
+
+  // O e-mail do destinatário é campo de texto: o input responde na hora e só
+  // o valor estabilizado vai para a URL, pra não gravar uma entrada de
+  // histórico por tecla digitada.
+  const [recipientEmail, setRecipientEmail] = useState(
+    () => urlState.filters.recipient
+  );
   const debouncedRecipientEmail = useDebounce(recipientEmail);
   const { request, getSettingValue } = useApp();
 
@@ -176,13 +217,25 @@ export default function MailLogPage() {
     }
   }, [generalSettings]);
 
-  const [page, setPage] = useState(1);
   const [pageSize, setPageSize] = usePersistedPageSize({
     storageKey: 'pagination:global:pageSize',
     defaultValue: 12,
     allowedValues: pageSizeOptions,
   });
 
+  useEffect(() => {
+    if (debouncedRecipientEmail !== urlState.filters.recipient) {
+      urlState.setFilter('recipient', debouncedRecipientEmail);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [debouncedRecipientEmail]);
+
+  const sort = useTableSort<MailSentSortField>({
+    columns: SORT_COLUMNS,
+    defaultSort: { field: 'created_at', order: 'desc' },
+    onSortChange: () => setPage(1),
+  });
+
   const {
     data: logsResult,
     refetch: refetchLogs,
@@ -199,6 +252,8 @@ export default function MailLogPage() {
       createdAtTo,
       page,
       pageSize,
+      sort.sortField,
+      sort.sortOrder,
     ],
     queryFn: async () => {
       const response = await request({
@@ -213,6 +268,8 @@ export default function MailLogPage() {
           createdAtTo: createdAtTo || undefined,
           page,
           pageSize,
+          sortField: sort.sortField,
+          sortOrder: sort.sortOrder,
         },
       });
       return response.data as PaginationResult<MailSent>;
@@ -225,14 +282,8 @@ export default function MailLogPage() {
     setIsDetailSheetOpen(true);
   };
 
-  const handleSearchChange = (value: string): void => {
-    setSearchTerm(value);
-    setPage(1);
-  };
-
   const handleRecipientEmailChange = (value: string): void => {
     setRecipientEmail(value);
-    setPage(1);
   };
 
   const hasActiveFilters =
@@ -246,11 +297,12 @@ export default function MailLogPage() {
   const clearFilters = (): void => {
     setSearchTerm('');
     setRecipientEmail('');
-    setStatusFilter('all');
-    setHasErrorFilter('all');
-    setCreatedAtFrom('');
-    setCreatedAtTo('');
-    setPage(1);
+    urlState.setFilter('recipient', '');
+    urlState.setFilter('status', 'all');
+    urlState.setFilter('hasError', 'all');
+    urlState.setFilter('delivery', 'all');
+    urlState.setFilter('createdAtFrom', '');
+    urlState.setFilter('createdAtTo', '');
   };
 
   const searchControls = useMemo<SearchBarControl[]>(
@@ -259,10 +311,7 @@ export default function MailLogPage() {
         id: 'status',
         type: 'select',
         value: statusFilter,
-        onChange: (value) => {
-          setStatusFilter(value as DeliveryStatusFilter);
-          setPage(1);
-        },
+        onChange: (value) => urlState.setFilter('status', value),
         placeholder: t('filterByStatus'),
         options: [
           { value: 'all', label: t('statusAll') },
@@ -275,10 +324,7 @@ export default function MailLogPage() {
         id: 'has-error',
         type: 'select',
         value: hasErrorFilter,
-        onChange: (value) => {
-          setHasErrorFilter(value as HasErrorFilter);
-          setPage(1);
-        },
+        onChange: (value) => urlState.setFilter('hasError', value),
         placeholder: t('filterByError'),
         options: [
           { value: 'all', label: t('errorAll') },
@@ -290,10 +336,7 @@ export default function MailLogPage() {
         id: 'delivery-status',
         type: 'select',
         value: deliveryFilter,
-        onChange: (value) => {
-          setDeliveryFilter(value as DeliveryOutcomeFilter);
-          setPage(1);
-        },
+        onChange: (value) => urlState.setFilter('delivery', value),
         placeholder: t('filterByDelivery'),
         options: [
           { value: 'all', label: t('deliveryAll') },
@@ -304,28 +347,9 @@ export default function MailLogPage() {
           { value: 'rejected', label: t('deliveryRejected') },
         ],
       },
-      {
-        id: 'created-at-from',
-        type: 'date',
-        value: createdAtFrom,
-        onChange: (value) => {
-          setCreatedAtFrom(value);
-          setPage(1);
-        },
-        max: createdAtTo || undefined,
-      },
-      {
-        id: 'created-at-to',
-        type: 'date',
-        value: createdAtTo,
-        onChange: (value) => {
-          setCreatedAtTo(value);
-          setPage(1);
-        },
-        min: createdAtFrom || undefined,
-      },
     ],
-    [createdAtFrom, createdAtTo, deliveryFilter, hasErrorFilter, statusFilter, t]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [deliveryFilter, hasErrorFilter, statusFilter, t]
   );
 
   const summary = useMemo(() => {
@@ -506,7 +530,7 @@ export default function MailLogPage() {
         <div className="flex-1">
           <SearchBar
             searchQuery={searchTerm}
-            onSearchChange={handleSearchChange}
+            onSearchChange={setSearchTerm}
             onSearch={() => setPage(1)}
             placeholder={t('searchPlaceholder')}
             controls={searchControls}
@@ -514,6 +538,15 @@ export default function MailLogPage() {
         </div>
 
         <div className="flex flex-col gap-2 sm:flex-row sm:flex-wrap xl:justify-end">
+          <DateRangePicker
+            fromDate={createdAtFrom}
+            toDate={createdAtTo}
+            onFromDateChange={(value) =>
+              urlState.setFilter('createdAtFrom', value)
+            }
+            onToDateChange={(value) => urlState.setFilter('createdAtTo', value)}
+          />
+
           <Input
             value={recipientEmail}
             onChange={(event) => handleRecipientEmailChange(event.target.value)}
@@ -597,12 +630,27 @@ export default function MailLogPage() {
             <Table>
               <TableHeader>
                 <TableRow>
-                  <TableHead>#{t('id')}</TableHead>
-                  <TableHead>{t('subject')}</TableHead>
-                  <TableHead>{t('from')}</TableHead>
-                  <TableHead>{t('to')}</TableHead>
+                  <SortableTableHead
+                    label={`#${t('id')}`}
+                    {...sort.getSortProps('id')}
+                  />
+                  <SortableTableHead
+                    label={t('subject')}
+                    {...sort.getSortProps('subject')}
+                  />
+                  <SortableTableHead
+                    label={t('from')}
+                    {...sort.getSortProps('from')}
+                  />
+                  <SortableTableHead
+                    label={t('to')}
+                    {...sort.getSortProps('to')}
+                  />
                   <TableHead>{t('delivery')}</TableHead>
-                  <TableHead>{t('createdAt')}</TableHead>
+                  <SortableTableHead
+                    label={t('createdAt')}
+                    {...sort.getSortProps('created_at')}
+                  />
                   <TableHead className="w-24 text-right">
                     {t('actions')}
                   </TableHead>

package/hedhog/frontend/app/mail/template/page.tsx.ejs

@@ -8,7 +8,9 @@ import {
   PageHeader,
   PaginationFooter,
   SearchBar,
+  SortableTableHead,
 } from '@/components/entity-list';
+import type { SortableColumn } from '@/hooks/use-table-sort';
 import {
   HtmlContentEditor,
   isFullHtmlDocument,
@@ -23,7 +25,7 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
-import { Badge } from '@/components/ui/badge';
+import { Badge, badgeVariants } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
 import {
@@ -41,6 +43,11 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
 import {
   Select,
   SelectContent,
@@ -67,6 +74,7 @@ import {
 import { TagsInput } from '@/components/ui/tags-input';
 import { usePagination } from '@/hooks/use-pagination';
 import { formatDate } from '@/lib/format-date';
+import { cn } from '@/lib/utils';
 import { useApp } from '@hed-hog/next-app-provider';
 import {
   AlertCircle,
@@ -104,6 +112,91 @@ interface ImportResponse {
   templates?: number[];
 }
 
+/**
+ * Coluna Variáveis da listagem: no máximo 3 badges, sempre numa linha só (sem
+ * `flex-wrap`), para a altura da linha da tabela não variar de template para
+ * template. O restante fica atrás de um indicador "+X" que abre um popover
+ * com a lista completa — `PopoverTrigger` num `<button>` real dá foco e
+ * ativação por teclado (Enter/Espaço) de graça, e o `Popover` do Radix já
+ * fecha sozinho no Esc e no clique fora.
+ */
+
+/**
+ * A allowlist de `mail` no backend tem so `id`, `slug`, `created_at` e
+ * `updated_at`. "Variaveis" e derivado do corpo do template — nao e coluna
+ * que o backend saiba ordenar, entao segue como cabecalho comum.
+ *
+ * "Assunto" mora em `mail_locale.subject` (traduzido). `mail.service.ts` chama
+ * `LocaleService.listModelWithLocale`, que nao passa `options.sort` ao
+ * `paginate()` — isso mantem ativo o fallback automatico de raw query por
+ * campo de locale (`paginateWithLocaleOrdering`), que cobre `subject`.
+ */
+type MailSortField = 'slug' | 'subject' | 'updated_at';
+
+const SORT_COLUMNS = [
+  'slug',
+  'subject',
+  { field: 'updated_at', initialOrder: 'desc' },
+] as const satisfies readonly SortableColumn<MailSortField>[];
+
+function MailVariablesCell({
+  variables,
+}: {
+  variables: { id?: number | string; name: string }[];
+}) {
+  const t = useTranslations('core.MailPage');
+  const visible = variables.slice(0, 3);
+  const remaining = variables.length - visible.length;
+
+  return (
+    <div
+      className="flex flex-nowrap items-center gap-1"
+      onClick={(e) => e.stopPropagation()}
+    >
+      {visible.map((v, index) => (
+        <Badge
+          key={v.id ?? index}
+          variant="secondary"
+          className="shrink-0 text-xs"
+        >
+          {v.name}
+        </Badge>
+      ))}
+      {remaining > 0 && (
+        <Popover>
+          <PopoverTrigger asChild>
+            <button
+              type="button"
+              className={cn(
+                badgeVariants({ variant: 'outline' }),
+                'shrink-0 cursor-pointer'
+              )}
+            >
+              {t('moreVariables', { count: remaining })}
+            </button>
+          </PopoverTrigger>
+          <PopoverContent align="start" className="w-64 p-3">
+            <p className="mb-2 text-xs font-medium text-muted-foreground">
+              {t('allVariablesTitle')}
+            </p>
+            <div className="flex flex-wrap gap-1.5">
+              {variables.map((v, index) => (
+                <Badge
+                  key={v.id ?? index}
+                  variant="secondary"
+                  className="text-xs"
+                >
+                  {v.name}
+                </Badge>
+              ))}
+            </div>
+          </PopoverContent>
+        </Popover>
+      )}
+    </div>
+  );
+}
+
 /**
  * Renderiza o preview no servidor, pelo mesmo caminho do envio real
  * (interpolação Handlebars + layout base), com debounce para não disparar uma
@@ -181,7 +274,13 @@ export default function EmailTemplatesPage() {
     totalItems,
     search,
     setSearch,
-  } = usePagination({ url: '/mail' });
+    sort,
+  } = usePagination<MailSortField>({
+    url: '/mail',
+    orderField: 'slug',
+    orderDirection: 'asc',
+    sortColumns: SORT_COLUMNS,
+  });
   const [templates, setTemplates] = useState<Mail[]>([]);
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
@@ -836,10 +935,19 @@ export default function EmailTemplatesPage() {
                     onCheckedChange={handleToggleAll}
                   />
                 </TableHead>
-                <TableHead>{t('tableSlug')}</TableHead>
-                <TableHead>{t('tableSubject')}</TableHead>
+                <SortableTableHead
+                  label={t('tableSlug')}
+                  {...sort.getSortProps('slug')}
+                />
+                <SortableTableHead
+                  label={t('tableSubject')}
+                  {...sort.getSortProps('subject')}
+                />
                 <TableHead>{t('tableVariables')}</TableHead>
-                <TableHead>{t('tableUpdated')}</TableHead>
+                <SortableTableHead
+                  label={t('tableUpdated')}
+                  {...sort.getSortProps('updated_at')}
+                />
                 <TableHead className="text-right">
                   {t('tableActions')}
                 </TableHead>
@@ -867,17 +975,7 @@ export default function EmailTemplatesPage() {
                   </TableCell>
                   <TableCell>{template.subject}</TableCell>
                   <TableCell>
-                    <div className="flex flex-wrap gap-1">
-                      {template.mail_var.map((v, index) => (
-                        <Badge
-                          key={`${template.id}-${v.id}-${index}`}
-                          variant="secondary"
-                          className="text-xs"
-                        >
-                          {v.name}
-                        </Badge>
-                      ))}
-                    </div>
+                    <MailVariablesCell variables={template.mail_var} />
                   </TableCell>
                   <TableCell className="text-muted-foreground">
                     {formatDate(
@@ -895,7 +993,7 @@ export default function EmailTemplatesPage() {
                           e.stopPropagation();
                           handleDownloadHTML(template);
                         }}
-                        title={t('downloadHTML')}
+                        tooltip={t('downloadHTML')}
                       >
                         <FileDown className="h-4 w-4" />
                       </Button>
@@ -906,6 +1004,7 @@ export default function EmailTemplatesPage() {
                           e.stopPropagation();
                           handleEdit(template);
                         }}
+                        tooltip={t('editTemplate')}
                       >
                         <Pencil className="h-4 w-4" />
                       </Button>
@@ -916,6 +1015,7 @@ export default function EmailTemplatesPage() {
                           e.stopPropagation();
                           handleDelete(Number(template.mail_id || template.id));
                         }}
+                        tooltip={t('delete')}
                       >
                         <Trash2 className="h-4 w-4 text-destructive" />
                       </Button>
@@ -966,7 +1066,10 @@ export default function EmailTemplatesPage() {
             </div>
           </SheetHeader>
 
-          <form onSubmit={handleSubmit} className="flex min-h-0 flex-1 flex-col">
+          <form
+            onSubmit={handleSubmit}
+            className="flex min-h-0 flex-1 flex-col"
+          >
             <div className="grid min-h-0 flex-1 grid-cols-1 overflow-y-auto lg:grid-cols-[minmax(260px,320px)_1fr] lg:overflow-hidden">
               <div className="space-y-5 border-b px-4 py-4 sm:px-6 lg:min-h-0 lg:overflow-y-auto lg:border-b-0 lg:border-r">
                 <section className="space-y-3">
@@ -1086,7 +1189,9 @@ export default function EmailTemplatesPage() {
                 <HtmlContentEditor
                   key={selectedLocaleCode}
                   value={formData.body}
-                  onChange={(value) => setFormData({ ...formData, body: value })}
+                  onChange={(value) =>
+                    setFormData({ ...formData, body: value })
+                  }
                   variables={editorVariables}
                   previewHtml={previewHtml}
                   previewLoading={previewLoading}
@@ -1205,10 +1310,7 @@ export default function EmailTemplatesPage() {
                 <div className="space-y-2">
                   {formData.variables.map((v, idx) => (
                     <div key={idx} className="flex items-center gap-2">
-                      <Badge
-                        variant="outline"
-                        className="font-mono min-w-30"
-                      >
+                      <Badge variant="outline" className="font-mono min-w-30">
                         {'{{' + v + '}}'}
                       </Badge>
                       <Input

package/hedhog/frontend/app/mcp_chat/chat-components.tsx.ejs

@@ -2,7 +2,6 @@
 
 import { Button } from '@/components/ui/button';
 import { ScrollArea } from '@/components/ui/scroll-area';
-import { Spinner } from '@/components/ui/spinner';
 import { Textarea } from '@/components/ui/textarea';
 import { AnimatePresence, motion } from 'framer-motion';
 import {
@@ -10,7 +9,6 @@ import {
   Bot,
   ChevronDown,
   ChevronRight,
-  Loader2,
   MessageSquare,
   Paperclip,
   Plus,
@@ -18,6 +16,7 @@ import {
   Wrench,
   X,
 } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 import { RefObject, useEffect, useRef, useState } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
@@ -252,6 +251,8 @@ export function ConversationList({
   onSelect,
   onDelete,
 }: ConversationListProps) {
+  const t = useTranslations('core.McpChatPage');
+
   if (isLoading) {
     return (
       <div className="space-y-2 pt-2 px-2">
@@ -306,6 +307,7 @@ export function ConversationList({
               e.stopPropagation();
               onDelete(conv);
             }}
+            tooltip={t('deleteConversation')}
           >
             <Trash2 className="h-3 w-3" />
           </Button>
@@ -456,15 +458,12 @@ export function ChatInput({
           size="icon"
           variant="ghost"
           className="shrink-0 h-10 w-10 rounded-full cursor-pointer border border-border/60 bg-background/85 hover:bg-background"
-          aria-label={attachLabel}
+          tooltip={attachLabel}
           onClick={handleOpenFilePicker}
           disabled={disabled || isSending || isUploadingFile}
+          loading={isUploadingFile}
         >
-          {isUploadingFile ? (
-            <Loader2 className="h-4 w-4 animate-spin" />
-          ) : (
-            <Plus className="h-4 w-4" />
-          )}
+          <Plus className="h-4 w-4" />
         </Button>
 
         <Textarea
@@ -486,15 +485,14 @@ export function ChatInput({
         <Button
           size="icon"
           className="shrink-0 h-10 w-10 rounded-full cursor-pointer"
-          aria-label={isSending ? sendingLabel : sendLabel}
-          disabled={disabled || isSending || (!input.trim() && attachments.length === 0)}
+          tooltip={isSending ? sendingLabel : sendLabel}
+          disabled={
+            disabled || isSending || (!input.trim() && attachments.length === 0)
+          }
           onClick={onSend}
+          loading={isSending}
         >
-          {isSending ? (
-            <Spinner className="h-4 w-4" aria-label={sendingLabel} />
-          ) : (
-            <ArrowUp className="h-4 w-4" />
-          )}
+          <ArrowUp className="h-4 w-4" />
         </Button>
       </div>