@hed-hog/lms 0.0.306 → 0.0.309

package/hedhog/frontend/app/courses/[id]/_components/CourseMediaCard.tsx.ejs

@@ -1,11 +1,16 @@
 import { Button } from '@/components/ui/button';
-import { Progress } from '@/components/ui/progress';
-import { cn } from '@/lib/utils';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 import {
   Eye,
   FileImage,
   ImagePlus,
   Loader2,
+  Trash2,
   UploadCloud,
 } from 'lucide-react';
 import { type ChangeEvent, useRef } from 'react';
@@ -18,35 +23,58 @@ type MediaFile = {
   name: string;
 };
 
-type MediaPaneProps = {
+type ImageTypeSpec = {
+  suggestedWidth: number | null;
+  suggestedHeight: number | null;
+  allowedExtensions: string | null;
+  aspectRatio: string | null;
+};
+
+type MediaRowProps = {
   label: string;
-  description: string;
-  ratioClassName: string;
   preview: string | null;
   file?: MediaFile;
   loading: boolean;
+  imageType?: ImageTypeSpec | null;
   onSelect: (event: ChangeEvent<HTMLInputElement>) => void;
   onOpenFile?: () => void;
+  onRemoveFile?: () => void;
 };
 
-function MediaPane({
+function MediaRow({
   label,
-  description,
-  ratioClassName,
   preview,
   file,
   loading,
+  imageType,
   onSelect,
   onOpenFile,
-}: MediaPaneProps) {
+  onRemoveFile,
+}: MediaRowProps) {
   const inputRef = useRef<HTMLInputElement>(null);
 
+  const specParts: string[] = [];
+  if (imageType?.suggestedWidth && imageType?.suggestedHeight) {
+    specParts.push(
+      `${imageType.suggestedWidth}×${imageType.suggestedHeight}px`
+    );
+  }
+  if (imageType?.aspectRatio) {
+    specParts.push(imageType.aspectRatio);
+  }
+  if (imageType?.allowedExtensions) {
+    specParts.push(
+      imageType.allowedExtensions
+        .split(',')
+        .map((ext) => ext.trim().toUpperCase())
+        .join(' / ')
+    );
+  }
+  const specText = specParts.join(' · ');
+
   return (
-    <div className="space-y-3">
-      <div className="space-y-1">
-        <p className="text-sm font-medium text-foreground">{label}</p>
-        <p className="text-xs leading-5 text-muted-foreground">{description}</p>
-      </div>
+    <div className="space-y-1.5">
+      <p className="text-xs font-medium text-muted-foreground">{label}</p>
 
       <input
         ref={inputRef}
@@ -56,99 +84,87 @@ function MediaPane({
         onChange={onSelect}
       />
 
-      <button
-        type="button"
-        className={cn(
-          'group relative block w-full overflow-hidden rounded-2xl border border-border/70 bg-gradient-to-br from-muted/40 to-background text-left transition-all hover:border-border hover:shadow-sm',
-          ratioClassName
-        )}
-        onClick={() => inputRef.current?.click()}
-      >
+      <div className="relative h-40 w-full overflow-hidden rounded-xl border border-border/70 bg-muted/30">
         {preview ? (
-          <>
-            <img
-              src={preview}
-              alt={label}
-              className="h-full w-full object-cover transition-transform duration-200 group-hover:scale-[1.02]"
-            />
-            <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 via-black/10 to-transparent p-4">
-              <div className="flex flex-wrap gap-2">
-                <span className="rounded-full bg-white/15 px-2.5 py-1 text-xs font-medium text-white backdrop-blur">
-                  Preview pronta
-                </span>
-                <span className="rounded-full bg-white/15 px-2.5 py-1 text-xs font-medium text-white backdrop-blur">
-                  Clique para substituir
-                </span>
-              </div>
-            </div>
-          </>
+          <img
+            src={preview}
+            alt={label}
+            className="h-full w-full object-contain"
+          />
         ) : (
-          <div className="flex h-full flex-col items-center justify-center gap-3 px-6 text-center">
-            <div className="flex h-12 w-12 items-center justify-center rounded-2xl border border-border/70 bg-background/80 text-muted-foreground">
-              <ImagePlus className="h-5 w-5" />
-            </div>
-            <div className="space-y-1">
-              <p className="text-sm font-medium text-foreground">
-                Enviar {label.toLowerCase()}
-              </p>
-              <p className="text-xs leading-5 text-muted-foreground">
-                Clique para selecionar uma imagem.
-              </p>
-            </div>
+          <div className="flex h-full flex-col items-center justify-center gap-2 text-center">
+            <ImagePlus className="h-5 w-5 text-muted-foreground" />
+            <p className="text-xs text-muted-foreground">Sem imagem</p>
           </div>
         )}
-
-        {loading ? (
-          <div className="absolute inset-0 flex flex-col items-center justify-center gap-3 bg-background/85">
-            <Loader2 className="h-5 w-5 animate-spin text-foreground" />
-            <div className="w-full max-w-[180px] space-y-2">
-              <Progress value={72} className="h-2" />
-              <p className="text-xs text-muted-foreground">Enviando arquivo...</p>
-            </div>
+        {loading && (
+          <div className="absolute inset-0 flex items-center justify-center bg-background/70">
+            <Loader2 className="h-5 w-5 animate-spin" />
           </div>
+        )}
+      </div>
+
+      {specText ? (
+        <p className="text-[11px] text-muted-foreground/70">{specText}</p>
+      ) : null}
+
+      <div className="flex items-center justify-end gap-1">
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                type="button"
+                variant="outline"
+                size="icon"
+                className="h-7 w-7"
+                onClick={() => inputRef.current?.click()}
+              >
+                <UploadCloud className="h-3.5 w-3.5" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              {preview ? 'Substituir imagem' : 'Enviar imagem'}
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+
+        {file && onOpenFile ? (
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="icon"
+                  className="h-7 w-7"
+                  onClick={onOpenFile}
+                >
+                  <Eye className="h-3.5 w-3.5" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>Visualizar imagem original</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
         ) : null}
-      </button>
 
-      <div className="rounded-2xl border border-border/60 bg-muted/20 p-3">
-        <div className="flex items-start gap-3">
-          <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border border-border/60 bg-background text-muted-foreground">
-            <FileImage className="h-4 w-4" />
-          </div>
-          <div className="min-w-0 flex-1">
-            <p className="truncate text-sm font-medium text-foreground">
-              {file?.name || 'Nenhum arquivo vinculado'}
-            </p>
-            <p className="text-xs text-muted-foreground">
-              {file ? 'Arquivo pronto para uso.' : 'Ainda sem mídia vinculada.'}
-            </p>
-          </div>
-        </div>
-
-        <div className="mt-3 flex flex-wrap gap-2">
-          <Button
-            type="button"
-            variant="outline"
-            size="sm"
-            className="gap-2"
-            onClick={() => inputRef.current?.click()}
-          >
-            <UploadCloud className="h-4 w-4" />
-            {preview ? 'Substituir' : 'Enviar'}
-          </Button>
-
-          {file && onOpenFile ? (
-            <Button
-              type="button"
-              variant="ghost"
-              size="sm"
-              className="gap-2"
-              onClick={onOpenFile}
-            >
-              <Eye className="h-4 w-4" />
-              Visualizar
-            </Button>
-          ) : null}
-        </div>
+        {file && onRemoveFile ? (
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="icon"
+                  className="h-7 w-7 text-destructive hover:text-destructive"
+                  onClick={onRemoveFile}
+                >
+                  <Trash2 className="h-3.5 w-3.5" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>Remover imagem</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        ) : null}
       </div>
     </div>
   );
@@ -165,6 +181,10 @@ type CourseMediaCardProps = {
   bannerFile?: MediaFile;
   onOpenLogoFile?: () => void;
   onOpenBannerFile?: () => void;
+  onRemoveLogoFile?: () => void;
+  onRemoveBannerFile?: () => void;
+  logoImageType?: ImageTypeSpec | null;
+  bannerImageType?: ImageTypeSpec | null;
   t: TranslationFn;
 };
 
@@ -179,6 +199,10 @@ export function CourseMediaCard({
   bannerFile,
   onOpenLogoFile,
   onOpenBannerFile,
+  onRemoveLogoFile,
+  onRemoveBannerFile,
+  logoImageType,
+  bannerImageType,
   t,
 }: CourseMediaCardProps) {
   return (
@@ -187,27 +211,27 @@ export function CourseMediaCard({
       description="Gerencie os ativos visuais do curso com preview e ações rápidas."
       icon={FileImage}
     >
-      <div className="space-y-5">
-        <MediaPane
+      <div className="space-y-4">
+        <MediaRow
           label={t('form.fields.banner.label')}
-          description={t('form.fields.banner.description')}
-          ratioClassName="aspect-[16/9]"
           preview={bannerPreview}
           file={bannerFile}
           loading={uploadingBanner}
+          imageType={bannerImageType}
           onSelect={onBannerSelect}
           onOpenFile={onOpenBannerFile}
+          onRemoveFile={onRemoveBannerFile}
         />
 
-        <MediaPane
+        <MediaRow
           label={t('form.fields.logo.label')}
-          description={t('form.fields.logo.description')}
-          ratioClassName="aspect-square max-w-[220px]"
           preview={logoPreview}
           file={logoFile}
           loading={uploadingLogo}
+          imageType={logoImageType}
           onSelect={onLogoSelect}
           onOpenFile={onOpenLogoFile}
+          onRemoveFile={onRemoveLogoFile}
         />
       </div>
     </CourseSectionCard>

package/hedhog/frontend/app/courses/[id]/_components/CourseRelationsCard.tsx.ejs

@@ -22,7 +22,9 @@ type CourseRelationsCardProps = {
   t: TranslationFn;
   categoryOptions: PickerOption[];
   instructorOptions: PickerOption[];
-  onCreateCategory: (values: Record<string, string>) => Promise<PickerOption | null>;
+  onCreateCategory: (
+    values: Record<string, string>
+  ) => Promise<PickerOption | null>;
   onCreateInstructor: () => void;
 };
 
@@ -40,7 +42,7 @@ export function CourseRelationsCard({
       description="Agrupe os vínculos que ajudam a encontrar, operar e ensinar este curso."
       icon={Network}
     >
-      <div className="space-y-5">
+      <div className="space-y-3">
         <FormField
           control={form.control}
           name="categorias"
@@ -52,7 +54,9 @@ export function CourseRelationsCard({
                 onChange={field.onChange}
                 options={categoryOptions}
                 placeholder={t('form.fields.categories.selectPlaceholder')}
-                searchPlaceholder={t('form.fields.categories.searchPlaceholder')}
+                searchPlaceholder={t(
+                  'form.fields.categories.searchPlaceholder'
+                )}
                 entityLabel="categoria"
                 emptyStateDescription={t('form.fields.categories.noResults')}
                 emptyHint="Nenhuma categoria vinculada ainda."
@@ -101,7 +105,9 @@ export function CourseRelationsCard({
                 onChange={field.onChange}
                 options={instructorOptions}
                 placeholder={t('form.fields.instructors.selectPlaceholder')}
-                searchPlaceholder={t('form.fields.instructors.searchPlaceholder')}
+                searchPlaceholder={t(
+                  'form.fields.instructors.searchPlaceholder'
+                )}
                 entityLabel="instrutor"
                 emptyStateDescription={t('form.fields.instructors.noResults')}
                 emptyHint="Nenhum instrutor vinculado ainda."
@@ -128,9 +134,6 @@ export function CourseRelationsCard({
                   placeholder={t('form.fields.prerequisites.placeholder')}
                 />
               </FormControl>
-              <p className="text-sm text-muted-foreground">
-                {t('form.fields.prerequisites.description')}
-              </p>
               <FormMessage />
             </FormItem>
           )}

package/hedhog/frontend/app/courses/[id]/_components/CourseSectionCard.tsx.ejs

@@ -1,4 +1,10 @@
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 import { cn } from '@/lib/utils';
 import type { LucideIcon } from 'lucide-react';
 import type { ReactNode } from 'react';
@@ -22,27 +28,40 @@ export function CourseSectionCard({
   contentClassName,
   action,
 }: CourseSectionCardProps) {
+  const iconEl = Icon ? (
+    <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg border border-border/60 bg-muted/30 text-foreground">
+      <Icon className="h-3.5 w-3.5" />
+    </div>
+  ) : null;
+
   return (
     <Card className={cn('border-border/70 shadow-sm', className)}>
-      <CardHeader className="space-y-3 pb-4">
-        <div className="flex items-start justify-between gap-3">
-          <div className="flex min-w-0 items-start gap-3">
-            {Icon ? (
-              <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-border/60 bg-muted/30 text-foreground">
-                <Icon className="h-4 w-4" />
-              </div>
-            ) : null}
-
-            <div className="min-w-0 space-y-1">
-              <CardTitle className="text-base font-semibold tracking-tight">
-                {title}
-              </CardTitle>
-              {description ? (
-                <p className="text-sm leading-5 text-muted-foreground">
-                  {description}
-                </p>
-              ) : null}
-            </div>
+      <CardHeader className="space-y-1.5 pb-3">
+        <div className="flex items-center justify-between gap-3">
+          <div className="flex min-w-0 items-center gap-2">
+            {Icon && description ? (
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <button
+                      type="button"
+                      tabIndex={-1}
+                      className="cursor-default focus:outline-none"
+                    >
+                      {iconEl}
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent side="right" className="max-w-65 text-xs">
+                    {description}
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            ) : (
+              iconEl
+            )}
+            <CardTitle className="text-sm font-semibold tracking-tight">
+              {title}
+            </CardTitle>
           </div>
 
           {action ? <div className="shrink-0">{action}</div> : null}

package/hedhog/frontend/app/courses/[id]/_components/CourseSummaryCard.tsx.ejs

@@ -54,7 +54,7 @@ export function CourseSummaryCard({ course }: CourseSummaryCardProps) {
         },
       ]}
       columns={4}
-      className="mb-8"
+      className="mb-3"
     />
   );
 }

package/hedhog/frontend/app/courses/[id]/_components/course-edit-types.ts.ejs

@@ -1,5 +1,5 @@
 export type CourseEditFormValues = {
-  codigo: string;
+  slug: string;
   nomeInterno: string;
   tituloComercial: string;
   descricaoPublica: string;