@hed-hog/lms 0.0.358 → 0.0.364

package/hedhog/frontend/app/enterprise/page.tsx.ejs

@@ -10,15 +10,8 @@ import {
 } from '@/components/entity-list';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
+import { IconActionGroup } from '@/components/ui/icon-action-group';
 import { KpiCardsGrid, type KpiCardItem } from '@/components/ui/kpi-cards-grid';
 import {
   Table,
@@ -39,7 +32,6 @@ import {
   Globe,
   LayoutGrid,
   List,
-  MoreHorizontal,
   Pencil,
   Plus,
   SquareArrowOutUpRight,
@@ -488,28 +480,23 @@ export default function EnterprisePage() {
                     )}
                   </TableCell>
                   <TableCell onClick={(e) => e.stopPropagation()}>
-                    <DropdownMenu>
-                      <DropdownMenuTrigger asChild>
-                        <Button variant="ghost" size="icon" className="h-8 w-8">
-                          <MoreHorizontal className="h-4 w-4" />
-                        </Button>
-                      </DropdownMenuTrigger>
-                      <DropdownMenuContent align="end">
-                        <DropdownMenuItem
-                          onClick={() => handleViewDetails(account)}
-                        >
-                          <SquareArrowOutUpRight className="mr-2 h-4 w-4" />
-                          {t('actions.view')}
-                        </DropdownMenuItem>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem
-                          onClick={() => handleOpenEdit(account)}
-                        >
-                          <Pencil className="mr-2 h-4 w-4" />
-                          {t('actions.edit')}
-                        </DropdownMenuItem>
-                      </DropdownMenuContent>
-                    </DropdownMenu>
+                    <IconActionGroup
+                      className="ml-auto"
+                      actions={[
+                        {
+                          key: 'view',
+                          label: t('actions.view'),
+                          icon: <SquareArrowOutUpRight className="size-4" />,
+                          onClick: () => handleViewDetails(account),
+                        },
+                        {
+                          key: 'edit',
+                          label: t('actions.edit'),
+                          icon: <Pencil className="size-4" />,
+                          onClick: () => handleOpenEdit(account),
+                        },
+                      ]}
+                    />
                   </TableCell>
                 </TableRow>
               ))}
@@ -553,37 +540,24 @@ export default function EnterprisePage() {
                       {account.slug}
                     </p>
                   </div>
-                  <div
-                    className="shrink-0"
-                    onClick={(e) => e.stopPropagation()}
-                  >
-                    <DropdownMenu>
-                      <DropdownMenuTrigger asChild>
-                        <Button
-                          variant="ghost"
-                          size="icon"
-                          className="h-7 w-7 opacity-0 transition-opacity group-hover:opacity-100"
-                        >
-                          <MoreHorizontal className="h-4 w-4" />
-                        </Button>
-                      </DropdownMenuTrigger>
-                      <DropdownMenuContent align="end">
-                        <DropdownMenuItem
-                          onClick={() => handleViewDetails(account)}
-                        >
-                          <SquareArrowOutUpRight className="mr-2 h-4 w-4" />
-                          {t('actions.view')}
-                        </DropdownMenuItem>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem
-                          onClick={() => handleOpenEdit(account)}
-                        >
-                          <Pencil className="mr-2 h-4 w-4" />
-                          {t('actions.edit')}
-                        </DropdownMenuItem>
-                      </DropdownMenuContent>
-                    </DropdownMenu>
-                  </div>
+                  <IconActionGroup
+                    className="shrink-0 opacity-0 transition-opacity group-hover:opacity-100"
+                    buttonClassName="h-7 w-7"
+                    actions={[
+                      {
+                        key: 'view',
+                        label: t('actions.view'),
+                        icon: <SquareArrowOutUpRight className="size-4" />,
+                        onClick: () => handleViewDetails(account),
+                      },
+                      {
+                        key: 'edit',
+                        label: t('actions.edit'),
+                        icon: <Pencil className="size-4" />,
+                        onClick: () => handleOpenEdit(account),
+                      },
+                    ]}
+                  />
                 </div>
 
                 {/* CRM */}
@@ -591,7 +565,9 @@ export default function EnterprisePage() {
                   <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
                     <Avatar className="h-4 w-4 shrink-0 rounded-full">
                       <AvatarImage
-                        src={getPersonAvatarUrl(account.crmAccount?.avatarId ?? null)}
+                        src={getPersonAvatarUrl(
+                          account.crmAccount?.avatarId ?? null
+                        )}
                         alt={account.crmAccountName}
                         className="object-cover"
                       />

package/hedhog/frontend/app/exams/[id]/questions/page.tsx.ejs

@@ -8,7 +8,6 @@ import {
   SearchBar,
   ViewModeToggle,
 } from '@/components/entity-list';
-import { EntityPicker } from '@/components/ui/entity-picker';
 import { RichTextEditor } from '@/components/rich-text-editor';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -21,13 +20,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
+import { EntityPicker } from '@/components/ui/entity-picker';
 import {
   Form,
   FormControl,
@@ -36,8 +29,10 @@ import {
   FormLabel,
   FormMessage,
 } from '@/components/ui/form';
+import { IconActionGroup } from '@/components/ui/icon-action-group';
 import { Input } from '@/components/ui/input';
 import { KpiCardsGrid, type KpiCardItem } from '@/components/ui/kpi-cards-grid';
+import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import {
   Select,
   SelectContent,
@@ -53,7 +48,6 @@ import {
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
-import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import { Skeleton } from '@/components/ui/skeleton';
 import {
   Table,
@@ -63,6 +57,7 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
+import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
 import { usePersistedViewMode } from '@/hooks/use-persisted-view-mode';
 import {
   closestCenter,
@@ -95,7 +90,6 @@ import {
   FileCheck,
   GripVertical,
   Loader2,
-  MoreHorizontal,
   Pencil,
   Plus,
   Save,
@@ -105,7 +99,6 @@ import {
 import { useTranslations } from 'next-intl';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useMemo, useState } from 'react';
-import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
 import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
 import { z } from 'zod';
@@ -431,37 +424,30 @@ function SortableQuestao({
                     #{qIndex + 1}
                   </p>
                 </div>
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      className="size-8 shrink-0 -mr-2 -mt-1"
-                      onClick={(e) => e.stopPropagation()}
-                      aria-label={t('table.actions.label')}
-                    >
-                      <MoreHorizontal className="size-4" />
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end" className="w-48">
-                    <DropdownMenuItem onClick={onEdit}>
-                      <Pencil className="size-3.5" />{' '}
-                      {t('question.actions.edit')}
-                    </DropdownMenuItem>
-                    <DropdownMenuItem onClick={onDuplicate}>
-                      <Copy className="mr-2 size-4" />{' '}
-                      {t('question.actions.duplicate')}
-                    </DropdownMenuItem>
-                    <DropdownMenuSeparator />
-                    <DropdownMenuItem
-                      className="text-destructive focus:text-destructive"
-                      onClick={onDelete}
-                    >
-                      <Trash2 className="size-3.5" />{' '}
-                      {t('question.actions.delete')}
-                    </DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
+                <IconActionGroup
+                  className="-mr-2 -mt-1"
+                  actions={[
+                    {
+                      key: 'edit-question',
+                      label: t('question.actions.edit'),
+                      icon: <Pencil className="size-4" />,
+                      onClick: onEdit,
+                    },
+                    {
+                      key: 'duplicate-question',
+                      label: t('question.actions.duplicate'),
+                      icon: <Copy className="size-4" />,
+                      onClick: onDuplicate,
+                    },
+                    {
+                      key: 'delete-question',
+                      label: t('question.actions.delete'),
+                      icon: <Trash2 className="size-4" />,
+                      onClick: onDelete,
+                      destructive: true,
+                    },
+                  ]}
+                />
               </div>
 
               <div className="flex items-start justify-between gap-3">
@@ -1489,43 +1475,33 @@ export default function QuestoesPage() {
                         {questao.pontuacao}
                       </TableCell>
                       <TableCell>
-                        <DropdownMenu>
-                          <DropdownMenuTrigger asChild>
-                            <Button
-                              variant="ghost"
-                              size="icon"
-                              className="ml-auto size-8"
-                              aria-label={t('table.actions.label')}
-                            >
-                              <MoreHorizontal className="size-4" />
-                            </Button>
-                          </DropdownMenuTrigger>
-                          <DropdownMenuContent align="end" className="w-48">
-                            <DropdownMenuItem
-                              onClick={() => openEditSheet(questao)}
-                            >
-                              <Pencil className="size-3.5" />{' '}
-                              {t('question.actions.edit')}
-                            </DropdownMenuItem>
-                            <DropdownMenuItem
-                              onClick={() => duplicateQuestao(questao)}
-                            >
-                              <Copy className="mr-2 size-4" />{' '}
-                              {t('question.actions.duplicate')}
-                            </DropdownMenuItem>
-                            <DropdownMenuSeparator />
-                            <DropdownMenuItem
-                              className="text-destructive focus:text-destructive"
-                              onClick={() => {
+                        <IconActionGroup
+                          className="ml-auto"
+                          actions={[
+                            {
+                              key: 'edit-question',
+                              label: t('question.actions.edit'),
+                              icon: <Pencil className="size-4" />,
+                              onClick: () => openEditSheet(questao),
+                            },
+                            {
+                              key: 'duplicate-question',
+                              label: t('question.actions.duplicate'),
+                              icon: <Copy className="size-4" />,
+                              onClick: () => duplicateQuestao(questao),
+                            },
+                            {
+                              key: 'delete-question',
+                              label: t('question.actions.delete'),
+                              icon: <Trash2 className="size-4" />,
+                              onClick: () => {
                                 setQuestaoToDelete(questao);
                                 setDeleteDialogOpen(true);
-                              }}
-                            >
-                              <Trash2 className="size-3.5" />{' '}
-                              {t('question.actions.delete')}
-                            </DropdownMenuItem>
-                          </DropdownMenuContent>
-                        </DropdownMenu>
+                              },
+                              destructive: true,
+                            },
+                          ]}
+                        />
                       </TableCell>
                     </TableRow>
                   ))}

package/hedhog/frontend/app/exams/page.tsx.ejs

@@ -19,21 +19,16 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
 import {
   Field,
   FieldDescription,
   FieldError,
   FieldLabel,
 } from '@/components/ui/field';
+import { IconActionGroup } from '@/components/ui/icon-action-group';
 import { Input } from '@/components/ui/input';
 import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
+import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import {
   Select,
   SelectContent,
@@ -48,7 +43,6 @@ import {
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
-import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Switch } from '@/components/ui/switch';
 import {
@@ -71,7 +65,6 @@ import {
   FileQuestion,
   ListChecks,
   Loader2,
-  MoreHorizontal,
   Pencil,
   Plus,
   Shuffle,
@@ -427,8 +420,8 @@ export default function ExamesPage() {
 
   const hasActiveFilters = buscaInput || filtroStatusInput !== 'todos';
 
-  function openDeleteDialog(exame: Exame, e: React.MouseEvent) {
-    e.stopPropagation();
+  function openDeleteDialog(exame: Exame, e?: React.MouseEvent) {
+    e?.stopPropagation();
     setExameToDelete(exame);
     setDeleteDialogOpen(true);
   }
@@ -808,50 +801,33 @@ export default function ExamesPage() {
                               <h3 className="line-clamp-2 font-semibold leading-snug text-foreground">
                                 {exame.titulo}
                               </h3>
-                              <DropdownMenu>
-                                <DropdownMenuTrigger asChild>
-                                  <Button
-                                    variant="ghost"
-                                    size="icon"
-                                    className="size-8 shrink-0 -mr-2 -mt-1"
-                                    onClick={(e) => e.stopPropagation()}
-                                    aria-label={t('cards.actions.label')}
-                                  >
-                                    <MoreHorizontal className="size-4" />
-                                  </Button>
-                                </DropdownMenuTrigger>
-                                <DropdownMenuContent
-                                  align="end"
-                                  className="w-52"
-                                >
-                                  <DropdownMenuItem
-                                    onClick={(e) => {
-                                      e.stopPropagation();
+                              <IconActionGroup
+                                className="-mr-2 -mt-1 ml-auto"
+                                actions={[
+                                  {
+                                    key: 'manage-questions',
+                                    label: t('cards.actions.manageQuestions'),
+                                    icon: <ListChecks className="size-4" />,
+                                    onClick: () =>
                                       router.push(
                                         `/lms/exams/${exame.id}/questions`
-                                      );
-                                    }}
-                                  >
-                                    <ListChecks className="mr-2 size-4" />{' '}
-                                    {t('cards.actions.manageQuestions')}
-                                  </DropdownMenuItem>
-                                  <DropdownMenuSeparator />
-                                  <DropdownMenuItem
-                                    onClick={(e) => openEditSheet(exame, e)}
-                                  >
-                                    <Pencil className="mr-2 size-4" />{' '}
-                                    {t('cards.actions.edit')}
-                                  </DropdownMenuItem>
-                                  <DropdownMenuSeparator />
-                                  <DropdownMenuItem
-                                    className="text-destructive focus:text-destructive"
-                                    onClick={(e) => openDeleteDialog(exame, e)}
-                                  >
-                                    <Trash2 className="mr-2 size-4" />{' '}
-                                    {t('cards.actions.delete')}
-                                  </DropdownMenuItem>
-                                </DropdownMenuContent>
-                              </DropdownMenu>
+                                      ),
+                                  },
+                                  {
+                                    key: 'edit',
+                                    label: t('cards.actions.edit'),
+                                    icon: <Pencil className="size-4" />,
+                                    onClick: () => openEditSheet(exame),
+                                  },
+                                  {
+                                    key: 'delete',
+                                    label: t('cards.actions.delete'),
+                                    icon: <Trash2 className="size-4" />,
+                                    onClick: () => openDeleteDialog(exame),
+                                    destructive: true,
+                                  },
+                                ]}
+                              />
                             </div>
                             <p className="text-xs text-muted-foreground">
                               <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-[10px]">
@@ -1014,43 +990,31 @@ export default function ExamesPage() {
                           : '-'}
                       </TableCell>
                       <TableCell onClick={(e) => e.stopPropagation()}>
-                        <DropdownMenu>
-                          <DropdownMenuTrigger asChild>
-                            <Button
-                              variant="ghost"
-                              size="icon"
-                              className="ml-auto size-8"
-                              aria-label={t('cards.actions.label')}
-                            >
-                              <MoreHorizontal className="size-4" />
-                            </Button>
-                          </DropdownMenuTrigger>
-                          <DropdownMenuContent align="end" className="w-52">
-                            <DropdownMenuItem
-                              onClick={() =>
-                                router.push(`/lms/exams/${exame.id}/questions`)
-                              }
-                            >
-                              <ListChecks className="mr-2 size-4" />{' '}
-                              {t('cards.actions.manageQuestions')}
-                            </DropdownMenuItem>
-                            <DropdownMenuSeparator />
-                            <DropdownMenuItem
-                              onClick={() => openEditSheet(exame)}
-                            >
-                              <Pencil className="mr-2 size-4" />{' '}
-                              {t('cards.actions.edit')}
-                            </DropdownMenuItem>
-                            <DropdownMenuSeparator />
-                            <DropdownMenuItem
-                              className="text-destructive focus:text-destructive"
-                              onClick={(e) => openDeleteDialog(exame, e)}
-                            >
-                              <Trash2 className="mr-2 size-4" />{' '}
-                              {t('cards.actions.delete')}
-                            </DropdownMenuItem>
-                          </DropdownMenuContent>
-                        </DropdownMenu>
+                        <IconActionGroup
+                          className="ml-auto"
+                          actions={[
+                            {
+                              key: 'manage-questions',
+                              label: t('cards.actions.manageQuestions'),
+                              icon: <ListChecks className="size-4" />,
+                              onClick: () =>
+                                router.push(`/lms/exams/${exame.id}/questions`),
+                            },
+                            {
+                              key: 'edit',
+                              label: t('cards.actions.edit'),
+                              icon: <Pencil className="size-4" />,
+                              onClick: () => openEditSheet(exame),
+                            },
+                            {
+                              key: 'delete',
+                              label: t('cards.actions.delete'),
+                              icon: <Trash2 className="size-4" />,
+                              onClick: () => openDeleteDialog(exame),
+                              destructive: true,
+                            },
+                          ]}
+                        />
                       </TableCell>
                     </TableRow>
                   ))}

package/hedhog/frontend/app/instructor-skills/page.tsx.ejs

@@ -18,13 +18,6 @@ import {
 } from '@/components/ui/alert-dialog';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
 import {
   Form,
   FormControl,
@@ -33,7 +26,9 @@ import {
   FormLabel,
   FormMessage,
 } from '@/components/ui/form';
+import { IconActionGroup } from '@/components/ui/icon-action-group';
 import { Input } from '@/components/ui/input';
+import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import {
   Select,
   SelectContent,
@@ -41,12 +36,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import {
-  Sheet,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
-import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
+import { Sheet, SheetHeader, SheetTitle } from '@/components/ui/sheet';
 import { Skeleton } from '@/components/ui/skeleton';
 import {
   Table,
@@ -60,7 +50,7 @@ import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
 import { cn } from '@/lib/utils';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { MoreHorizontal, Pencil, Plus, Sparkles, Trash2 } from 'lucide-react';
+import { Pencil, Plus, Sparkles, Trash2 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
@@ -441,30 +431,27 @@ export default function InstructorSkillsPage() {
                     </Badge>
                   </TableCell>
                   <TableCell>
-                    <DropdownMenu>
-                      <DropdownMenuTrigger asChild>
-                        <Button variant="ghost" size="icon" className="h-8 w-8">
-                          <MoreHorizontal className="h-4 w-4" />
-                        </Button>
-                      </DropdownMenuTrigger>
-                      <DropdownMenuContent align="end">
-                        <DropdownMenuItem onClick={() => openEditSheet(skill)}>
-                          <Pencil className="mr-2 h-4 w-4" />
-                          {t('actions.edit')}
-                        </DropdownMenuItem>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem
-                          className="text-red-600"
-                          onClick={() => {
+                    <IconActionGroup
+                      className="ml-auto"
+                      actions={[
+                        {
+                          key: 'edit',
+                          label: t('actions.edit'),
+                          icon: <Pencil className="size-4" />,
+                          onClick: () => openEditSheet(skill),
+                        },
+                        {
+                          key: 'delete',
+                          label: t('actions.delete'),
+                          icon: <Trash2 className="size-4" />,
+                          onClick: () => {
                             setSkillToDelete(skill);
                             setDeleteDialogOpen(true);
-                          }}
-                        >
-                          <Trash2 className="mr-2 h-4 w-4" />
-                          {t('actions.delete')}
-                        </DropdownMenuItem>
-                      </DropdownMenuContent>
-                    </DropdownMenu>
+                          },
+                          destructive: true,
+                        },
+                      ]}
+                    />
                   </TableCell>
                 </TableRow>
               ))}