@hed-hog/lms 0.0.358 → 0.0.364

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

@@ -19,13 +19,6 @@ import {
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
 import {
   Form,
   FormControl,
@@ -34,7 +27,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,
@@ -42,12 +37,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,
@@ -65,11 +55,10 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import {
   ImageIcon,
   Loader2,
-  MoreHorizontal,
   Pencil,
   Plus,
-  Trophy,
   Trash2,
+  Trophy,
   Upload,
   X,
 } from 'lucide-react';
@@ -271,7 +260,9 @@ function AchievementFormSheet({
     });
 
     setIconPreviewUrl(getFileUrl(achievementToEdit?.iconFileId) ?? null);
-    setMainImagePreviewUrl(getFileUrl(achievementToEdit?.mainImageFileId) ?? null);
+    setMainImagePreviewUrl(
+      getFileUrl(achievementToEdit?.mainImageFileId) ?? null
+    );
   }, [achievementToEdit, form, open]);
 
   async function uploadImage(file: File) {
@@ -508,7 +499,9 @@ function AchievementFormSheet({
                   <FormControl>
                     <Checkbox
                       checked={field.value}
-                      onCheckedChange={(checked) => field.onChange(Boolean(checked))}
+                      onCheckedChange={(checked) =>
+                        field.onChange(Boolean(checked))
+                      }
                     />
                   </FormControl>
                   <div className="space-y-1">
@@ -694,108 +687,105 @@ export default function AchievementsPage() {
                 const mainImageUrl = getFileUrl(achievement.mainImageFileId);
 
                 return (
-                <TableRow
-                  key={achievement.id}
-                  className="cursor-pointer"
-                  onDoubleClick={() => {
-                    setAchievementToEdit(achievement);
-                    setSheetOpen(true);
-                  }}
-                >
-                  <TableCell>
-                    <div className="min-w-0">
-                      <div className="truncate font-medium">
-                        {achievement.name}
-                      </div>
-                      {achievement.description ? (
-                        <div className="truncate text-xs text-muted-foreground">
-                          {achievement.description}
+                  <TableRow
+                    key={achievement.id}
+                    className="cursor-pointer"
+                    onDoubleClick={() => {
+                      setAchievementToEdit(achievement);
+                      setSheetOpen(true);
+                    }}
+                  >
+                    <TableCell>
+                      <div className="min-w-0">
+                        <div className="truncate font-medium">
+                          {achievement.name}
                         </div>
-                      ) : null}
-                    </div>
-                  </TableCell>
-                  <TableCell>
-                    <Badge variant="outline">{t(`types.${achievement.type}`)}</Badge>
-                  </TableCell>
-                  <TableCell>{achievement.bitCodesValue}</TableCell>
-                  <TableCell>
-                    <span
-                      className={cn(
-                        'text-sm font-medium',
-                        achievement.canReceiveMultipleTimes
-                          ? 'text-emerald-600'
-                          : 'text-muted-foreground'
-                      )}
-                    >
-                      {achievement.canReceiveMultipleTimes
-                        ? t('repeatable.yes')
-                        : t('repeatable.no')}
-                    </span>
-                  </TableCell>
-                  <TableCell>
-                    <div className="flex items-center gap-2">
-                      {iconUrl ? (
-                        <Image
-                          src={iconUrl}
-                          alt={achievement.name}
-                          width={32}
-                          height={32}
-                          unoptimized
-                          className="size-8 rounded-md border object-cover"
-                        />
-                      ) : (
-                        <div className="flex size-8 items-center justify-center rounded-md border border-dashed bg-muted/40">
-                          <ImageIcon className="size-4 text-muted-foreground/50" />
-                        </div>
-                      )}
-                      {mainImageUrl ? (
-                        <Image
-                          src={mainImageUrl}
-                          alt={achievement.name}
-                          width={48}
-                          height={32}
-                          unoptimized
-                          className="h-8 w-12 rounded-md border object-cover"
-                        />
-                      ) : (
-                        <div className="flex h-8 w-12 items-center justify-center rounded-md border border-dashed bg-muted/40">
-                          <ImageIcon className="size-4 text-muted-foreground/50" />
-                        </div>
-                      )}
-                    </div>
-                  </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={() => {
-                            setAchievementToEdit(achievement);
-                            setSheetOpen(true);
-                          }}
-                        >
-                          <Pencil className="mr-2 h-4 w-4" />
-                          {t('actions.edit')}
-                        </DropdownMenuItem>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem
-                          className="text-red-600"
-                          onClick={() => {
-                            setAchievementToDelete(achievement);
-                            setDeleteDialogOpen(true);
-                          }}
-                        >
-                          <Trash2 className="mr-2 h-4 w-4" />
-                          {t('actions.delete')}
-                        </DropdownMenuItem>
-                      </DropdownMenuContent>
-                    </DropdownMenu>
-                  </TableCell>
-                </TableRow>
+                        {achievement.description ? (
+                          <div className="truncate text-xs text-muted-foreground">
+                            {achievement.description}
+                          </div>
+                        ) : null}
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <Badge variant="outline">
+                        {t(`types.${achievement.type}`)}
+                      </Badge>
+                    </TableCell>
+                    <TableCell>{achievement.bitCodesValue}</TableCell>
+                    <TableCell>
+                      <span
+                        className={cn(
+                          'text-sm font-medium',
+                          achievement.canReceiveMultipleTimes
+                            ? 'text-emerald-600'
+                            : 'text-muted-foreground'
+                        )}
+                      >
+                        {achievement.canReceiveMultipleTimes
+                          ? t('repeatable.yes')
+                          : t('repeatable.no')}
+                      </span>
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex items-center gap-2">
+                        {iconUrl ? (
+                          <Image
+                            src={iconUrl}
+                            alt={achievement.name}
+                            width={32}
+                            height={32}
+                            unoptimized
+                            className="size-8 rounded-md border object-cover"
+                          />
+                        ) : (
+                          <div className="flex size-8 items-center justify-center rounded-md border border-dashed bg-muted/40">
+                            <ImageIcon className="size-4 text-muted-foreground/50" />
+                          </div>
+                        )}
+                        {mainImageUrl ? (
+                          <Image
+                            src={mainImageUrl}
+                            alt={achievement.name}
+                            width={48}
+                            height={32}
+                            unoptimized
+                            className="h-8 w-12 rounded-md border object-cover"
+                          />
+                        ) : (
+                          <div className="flex h-8 w-12 items-center justify-center rounded-md border border-dashed bg-muted/40">
+                            <ImageIcon className="size-4 text-muted-foreground/50" />
+                          </div>
+                        )}
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <IconActionGroup
+                        className="ml-auto"
+                        actions={[
+                          {
+                            key: 'edit',
+                            label: t('actions.edit'),
+                            icon: <Pencil className="size-4" />,
+                            onClick: () => {
+                              setAchievementToEdit(achievement);
+                              setSheetOpen(true);
+                            },
+                          },
+                          {
+                            key: 'delete',
+                            label: t('actions.delete'),
+                            icon: <Trash2 className="size-4" />,
+                            onClick: () => {
+                              setAchievementToDelete(achievement);
+                              setDeleteDialogOpen(true);
+                            },
+                            destructive: true,
+                          },
+                        ]}
+                      />
+                    </TableCell>
+                  </TableRow>
                 );
               })}
             </TableBody>

package/hedhog/frontend/app/bitcodes/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 { EntityPicker } from '@/components/ui/entity-picker';
 import {
   Form,
@@ -34,8 +27,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,
@@ -49,7 +44,6 @@ import {
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
-import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import { Skeleton } from '@/components/ui/skeleton';
 import {
   Table,
@@ -69,7 +63,6 @@ import {
   ArrowUpRight,
   Coins,
   Loader2,
-  MoreHorizontal,
   Pencil,
   Plus,
   Trash2,
@@ -931,35 +924,30 @@ export default function BitcodesPage() {
                   </TableCell>
                   <TableCell>{formatDateTime(wallet.updatedAt)}</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={() => {
+                    <IconActionGroup
+                      className="ml-auto"
+                      actions={[
+                        {
+                          key: 'edit',
+                          label: t('actions.edit'),
+                          icon: <Pencil className="size-4" />,
+                          onClick: () => {
                             setWalletToEdit(wallet);
                             setSheetOpen(true);
-                          }}
-                        >
-                          <Pencil className="mr-2 h-4 w-4" />
-                          {t('actions.edit')}
-                        </DropdownMenuItem>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem
-                          className="text-red-600"
-                          onClick={() => {
+                          },
+                        },
+                        {
+                          key: 'delete',
+                          label: t('actions.delete'),
+                          icon: <Trash2 className="size-4" />,
+                          onClick: () => {
                             setWalletToDelete(wallet);
                             setDeleteDialogOpen(true);
-                          }}
-                        >
-                          <Trash2 className="mr-2 h-4 w-4" />
-                          {t('actions.delete')}
-                        </DropdownMenuItem>
-                      </DropdownMenuContent>
-                    </DropdownMenu>
+                          },
+                          destructive: true,
+                        },
+                      ]}
+                    />
                   </TableCell>
                 </TableRow>
               ))}