@hed-hog/lms 0.0.330 → 0.0.338

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

@@ -2452,13 +2452,13 @@ export default function TurmaDetalhePage() {
     },
     {
       key: 'next-session',
-      title: 'Proxima aula',
+      title: t('kpis.nextClass'),
       value: nextSession
         ? format(nextSessionStartsAt!, 'dd/MM', { locale: dateLocale })
-        : 'Sem aula',
+        : t('kpis.noClass'),
       description: nextSession
         ? `${nextSession.horaInicio} - ${nextSession.horaFim}`
-        : 'Crie a proxima sessao',
+        : t('kpis.createNext'),
       icon: Clock,
       iconContainerClassName: 'bg-emerald-500/10 text-emerald-700',
       accentClassName: 'from-emerald-500/25 via-green-500/10 to-transparent',
@@ -2466,9 +2466,9 @@ export default function TurmaDetalhePage() {
     },
     {
       key: 'calendar',
-      title: 'Calendario',
+      title: t('kpis.calendar'),
       value: totalSessionsCount,
-      description: `${completedSessionsCount} concluidas`,
+      description: t('kpis.completed', { count: completedSessionsCount }),
       icon: CalendarIcon,
       iconContainerClassName: 'bg-violet-500/10 text-violet-700',
       accentClassName: 'from-violet-500/25 via-violet-500/10 to-transparent',
@@ -2582,7 +2582,7 @@ export default function TurmaDetalhePage() {
             variant: 'outline',
           },
           {
-            label: 'Editar turma',
+            label: t('actions.editClass'),
             onClick: () => setEditSheetOpen(true),
             variant: 'default',
           },
@@ -2660,7 +2660,7 @@ export default function TurmaDetalhePage() {
                     key={i}
                     className="overflow-hidden border-border/70 py-0"
                   >
-                    <div className="h-1 w-full bg-gradient-to-r from-slate-300/70 via-slate-200 to-transparent" />
+                    <div className="h-1 w-full bg-linear-to-r from-slate-300/70 via-slate-200 to-transparent" />
                     <CardContent className="p-4">
                       <Skeleton className="mb-2 h-8 w-16" />
                       <Skeleton className="h-4 w-28" />
@@ -2803,7 +2803,7 @@ export default function TurmaDetalhePage() {
                               #
                             </TableHead>
                             <TableHead>Sessão</TableHead>
-                            <TableHead className="w-[120px]">Data</TableHead>
+                            <TableHead className="w-30">Data</TableHead>
                             <TableHead className="w-[105px]">Horário</TableHead>
                             <TableHead className="w-[90px]">Tipo</TableHead>
                             <TableHead>Instrutor</TableHead>
@@ -2814,7 +2814,7 @@ export default function TurmaDetalhePage() {
                               Materiais
                             </TableHead>
                             <TableHead className="w-[90px]">Link</TableHead>
-                            <TableHead className="w-[44px]" />
+                            <TableHead className="w-11" />
                           </TableRow>
                         </TableHeader>
                         <TableBody>
@@ -3359,7 +3359,7 @@ export default function TurmaDetalhePage() {
                                 src={getPersonAvatarUrl(aluno.avatarId)}
                                 alt={aluno.nome}
                               />
-                              <AvatarFallback className="bg-gradient-to-br from-blue-100 to-blue-200 text-[11px] font-medium text-blue-700">
+                              <AvatarFallback className="bg-linear-to-br from-blue-100 to-blue-200 text-[11px] font-medium text-blue-700">
                                 {getPersonInitials(aluno.nome)}
                               </AvatarFallback>
                             </Avatar>
@@ -3616,7 +3616,7 @@ export default function TurmaDetalhePage() {
                                       {tClasses(`type.${aula.tipo}`)}
                                     </Badge>
                                   </TableCell>
-                                  <TableCell className="max-w-[180px] truncate text-sm text-muted-foreground">
+                                  <TableCell className="max-w-45 truncate text-sm text-muted-foreground">
                                     {aula.meetingUrl || aula.local || '—'}
                                   </TableCell>
                                   <TableCell className="text-sm text-muted-foreground">
@@ -3857,7 +3857,7 @@ export default function TurmaDetalhePage() {
                       <Table>
                         <TableHeader>
                           <TableRow className="bg-muted/40 hover:bg-muted/40">
-                            <TableHead className="sticky left-0 z-10 min-w-[260px] bg-muted/40 font-semibold">
+                            <TableHead className="sticky left-0 z-10 min-w-65 bg-muted/40 font-semibold">
                               {t('tabs.students')}
                             </TableHead>
                             {aulasState.map((aula) => {
@@ -3886,14 +3886,14 @@ export default function TurmaDetalhePage() {
                               key={aluno.id}
                               className="hover:bg-muted/30"
                             >
-                              <TableCell className="sticky left-0 z-10 min-w-[260px] border-r border-border/40 bg-background">
+                              <TableCell className="sticky left-0 z-10 min-w-65 border-r border-border/40 bg-background">
                                 <div className="flex min-w-0 items-center gap-3">
                                   <Avatar className="size-8 shrink-0">
                                     <AvatarImage
                                       src={getPersonAvatarUrl(aluno.avatarId)}
                                       alt={aluno.nome}
                                     />
-                                    <AvatarFallback className="bg-gradient-to-br from-blue-100 to-blue-200 text-[11px] font-medium text-blue-700">
+                                    <AvatarFallback className="bg-linear-to-br from-blue-100 to-blue-200 text-[11px] font-medium text-blue-700">
                                       {getPersonInitials(aluno.nome)}
                                     </AvatarFallback>
                                   </Avatar>
@@ -4195,7 +4195,7 @@ export default function TurmaDetalhePage() {
                                 globalLinkTitleEditedRef.current =
                                   e.target.value.length > 0;
                               }}
-                              placeholder="Ex: Referência de estudo"
+                              placeholder={t('links.studyRefPlaceholder')}
                             />
                           </Field>
                           <div className="flex gap-2">
@@ -4615,7 +4615,7 @@ export default function TurmaDetalhePage() {
                     src={getPersonAvatarUrl(selectedStudentProfile.avatarId)}
                     alt={selectedStudentProfile.nome}
                   />
-                  <AvatarFallback className="bg-gradient-to-br from-blue-100 to-blue-200 text-xs font-medium text-blue-700">
+                  <AvatarFallback className="bg-linear-to-br from-blue-100 to-blue-200 text-xs font-medium text-blue-700">
                     {getPersonInitials(selectedStudentProfile.nome)}
                   </AvatarFallback>
                 </Avatar>
@@ -5655,7 +5655,7 @@ export default function TurmaDetalhePage() {
                             linkTitleEditedRef.current =
                               e.target.value.length > 0;
                           }}
-                          placeholder="Ex: Slides da aula"
+                          placeholder={t('links.lessonSlidesPlaceholder')}
                         />
                       </Field>
                       <div className="flex gap-2">

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

@@ -95,6 +95,7 @@ import {
 import { useTranslations } from 'next-intl';
 import { useRouter } from 'next/navigation';
 import { useEffect, useMemo, useRef, useState } from 'react';
+import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
 import type { DateRange } from 'react-day-picker';
 import { Controller, useForm, useWatch } from 'react-hook-form';
 import { toast } from 'sonner';
@@ -700,7 +701,11 @@ export default function TurmasPage() {
 
   // Pagination
   const [currentPage, setCurrentPage] = useState(1);
-  const [pageSize, setPageSize] = useState(12);
+  const [pageSize, setPageSize] = usePersistedPageSize({
+    storageKey: 'pagination:global:pageSize',
+    defaultValue: 12,
+    allowedValues: PAGE_SIZES,
+  });
 
   // Double-click tracking
   const clickTimers = useRef<Map<number, ReturnType<typeof setTimeout>>>(

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

@@ -13,7 +13,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import { Palette, Settings2 } from 'lucide-react';
+import { Settings2 } from 'lucide-react';
 import type { UseFormReturn } from 'react-hook-form';
 
 import { CourseSectionCard } from './CourseSectionCard';
@@ -33,23 +33,6 @@ type CourseClassificationCardProps = {
   offeringTypes: readonly SelectOption[];
 };
 
-function ColorPreview({ color, label }: { color: string; label: string }) {
-  return (
-    <div className="flex items-center gap-2 rounded-lg border border-border/60 bg-muted/20 px-2.5 py-1.5">
-      <span
-        className="h-4 w-4 shrink-0 rounded-full border border-black/10"
-        style={{ backgroundColor: color }}
-      />
-      <div className="min-w-0">
-        <p className="text-[10px] font-medium uppercase tracking-[0.14em] text-muted-foreground">
-          {label}
-        </p>
-        <p className="truncate text-xs font-medium text-foreground">{color}</p>
-      </div>
-    </div>
-  );
-}
-
 export function CourseClassificationCard({
   form,
   t,
@@ -57,10 +40,6 @@ export function CourseClassificationCard({
   statuses,
   offeringTypes,
 }: CourseClassificationCardProps) {
-  const watchedPrimary = form.watch('primaryColor');
-  const watchedSecondary = form.watch('secondaryColor');
-  const watchedOfferingType = form.watch('tipoOferta');
-
   return (
     <CourseSectionCard
       title="Classificação e configuração"
@@ -156,7 +135,7 @@ export function CourseClassificationCard({
             <FormItem>
               <FormLabel>{t('form.fields.primaryColor.label')}</FormLabel>
               <FormControl>
-                <div className="flex items-center gap-2 rounded-lg border border-border/60 bg-muted/20 px-2 py-1.5">
+                <div className="flex items-center gap-2">
                   <Input
                     type="color"
                     value={field.value}
@@ -183,7 +162,7 @@ export function CourseClassificationCard({
             <FormItem>
               <FormLabel>{t('form.fields.secondaryColor.label')}</FormLabel>
               <FormControl>
-                <div className="flex items-center gap-2 rounded-lg border border-border/60 bg-muted/20 px-2 py-1.5">
+                <div className="flex items-center gap-2">
                   <Input
                     type="color"
                     value={field.value}
@@ -202,15 +181,6 @@ export function CourseClassificationCard({
             </FormItem>
           )}
         />
-
-        <div className="space-y-2 rounded-lg border border-border/60 bg-linear-to-br from-muted/30 to-background p-3">
-          <div className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
-            <Palette className="h-3.5 w-3.5" />
-            Preview
-          </div>
-          <ColorPreview color={watchedPrimary} label="Primária" />
-          <ColorPreview color={watchedSecondary} label="Secundária" />
-        </div>
       </div>
     </CourseSectionCard>
   );

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

@@ -1,3 +1,4 @@
+import { RichTextEditor } from '@/components/rich-text-editor';
 import {
   FormControl,
   FormField,
@@ -5,7 +6,6 @@ import {
   FormLabel,
   FormMessage,
 } from '@/components/ui/form';
-import { Textarea } from '@/components/ui/textarea';
 import { FileText } from 'lucide-react';
 import type { UseFormReturn } from 'react-hook-form';
 
@@ -31,10 +31,10 @@ export function CourseContentCard({ form }: CourseContentCardProps) {
             <FormItem>
               <FormLabel>Objetivos do curso</FormLabel>
               <FormControl>
-                <Textarea
-                  {...field}
-                  rows={3}
-                  placeholder="Explique o que o aluno será capaz de fazer ao concluir o curso."
+                <RichTextEditor
+                  value={field.value || ''}
+                  onChange={field.onChange}
+                  className="w-full max-w-full"
                 />
               </FormControl>
               <FormMessage />
@@ -49,10 +49,10 @@ export function CourseContentCard({ form }: CourseContentCardProps) {
             <FormItem>
               <FormLabel>Público-alvo</FormLabel>
               <FormControl>
-                <Textarea
-                  {...field}
-                  rows={3}
-                  placeholder="Descreva para quem este curso foi pensado."
+                <RichTextEditor
+                  value={field.value || ''}
+                  onChange={field.onChange}
+                  className="w-full max-w-full"
                 />
               </FormControl>
               <FormMessage />

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

@@ -0,0 +1,109 @@
+import { RichTextEditor } from '@/components/rich-text-editor';
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Hash, NotebookPen } from 'lucide-react';
+import type { UseFormReturn } from 'react-hook-form';
+
+import { CourseSectionCard } from './CourseSectionCard';
+import type { CourseEditFormValues, TranslationFn } from './course-edit-types';
+
+type CourseMainInfoCardProps = {
+  form: UseFormReturn<CourseEditFormValues>;
+  t: TranslationFn;
+};
+
+export function CourseMainInfoCard({ form, t }: CourseMainInfoCardProps) {
+  return (
+    <CourseSectionCard
+      title={t('form.sections.basicInfo')}
+      description="Os identificadores e a comunicação principal do curso ficam aqui."
+      icon={NotebookPen}
+    >
+      <div className="grid gap-3 md:grid-cols-2">
+        <FormField
+          control={form.control}
+          name="slug"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t('form.fields.slug.label')}</FormLabel>
+              <FormControl>
+                <div className="relative">
+                  <Hash className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                  <Input
+                    {...field}
+                    className="pl-9 font-mono"
+                    placeholder={t('form.fields.slug.placeholder')}
+                    onChange={(event) =>
+                      field.onChange(
+                        String(event.target.value || '').toLowerCase()
+                      )
+                    }
+                  />
+                </div>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="nomeInterno"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t('form.fields.internalName.label')}</FormLabel>
+              <FormControl>
+                <Input
+                  {...field}
+                  placeholder={t('form.fields.internalName.placeholder')}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="tituloComercial"
+          render={({ field }) => (
+            <FormItem className="md:col-span-2">
+              <FormLabel>{t('form.fields.title.label')}</FormLabel>
+              <FormControl>
+                <Input
+                  {...field}
+                  placeholder={t('form.fields.title.placeholder')}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="descricaoPublica"
+          render={({ field }) => (
+            <FormItem className="md:col-span-2">
+              <FormLabel>{t('form.fields.description.label')}</FormLabel>
+              <FormControl>
+                <RichTextEditor
+                  value={field.value}
+                  onChange={field.onChange}
+                  className="w-full max-w-full"
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      </div>
+    </CourseSectionCard>
+  );
+}

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

@@ -1,9 +1,9 @@
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { EntityPicker } from '@/components/ui/entity-picker';
-import { Badge } from '@/components/ui/badge';
 import { cn } from '@/lib/utils';
-import { Grip, Plus, X } from 'lucide-react';
+import { Grip, Pencil, Plus, X } from 'lucide-react';
 import { useMemo, useState } from 'react';
 
 import type { PickerOption } from './course-edit-types';
@@ -28,6 +28,7 @@ type CourseMultiEntityPickerProps = {
   }>;
   mapSearchToCreateValues?: (search: string) => Record<string, string>;
   onChange: (nextValue: string[]) => void;
+  onEditSelected?: (option: PickerOption) => void;
   emptyHint?: string;
   renderOptionMeta?: boolean;
   variant?: 'default' | 'instructor';
@@ -57,6 +58,7 @@ export function CourseMultiEntityPicker({
   createFields,
   mapSearchToCreateValues,
   onChange,
+  onEditSelected,
   emptyHint,
   renderOptionMeta = false,
   variant = 'default',
@@ -192,18 +194,33 @@ export function CourseMultiEntityPicker({
                   </div>
                 </div>
 
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="icon"
-                  className="h-8 w-8 rounded-lg text-muted-foreground hover:text-foreground"
-                  onClick={() =>
-                    onChange(value.filter((item) => item !== option.value))
-                  }
-                  aria-label={`Remover ${option.label}`}
-                >
-                  <X className="h-4 w-4" />
-                </Button>
+                <div className="flex items-center gap-1">
+                  {onEditSelected ? (
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="icon"
+                      className="h-8 w-8 rounded-lg text-muted-foreground hover:text-foreground"
+                      onClick={() => onEditSelected(option)}
+                      aria-label={`Editar ${option.label}`}
+                    >
+                      <Pencil className="h-4 w-4" />
+                    </Button>
+                  ) : null}
+
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    className="h-8 w-8 rounded-lg text-muted-foreground hover:text-foreground"
+                    onClick={() =>
+                      onChange(value.filter((item) => item !== option.value))
+                    }
+                    aria-label={`Remover ${option.label}`}
+                  >
+                    <X className="h-4 w-4" />
+                  </Button>
+                </div>
               </div>
             ) : (
               <Badge
@@ -211,7 +228,17 @@ export function CourseMultiEntityPicker({
                 variant="secondary"
                 className="flex items-center gap-1.5 rounded-full border border-border/60 bg-background px-3 py-1.5 text-xs font-medium text-foreground"
               >
-                <span className="max-w-[180px] truncate">{option.label}</span>
+                <span className="max-w-45 truncate">{option.label}</span>
+                {onEditSelected ? (
+                  <button
+                    type="button"
+                    className="cursor-pointer text-muted-foreground transition-colors hover:text-foreground"
+                    onClick={() => onEditSelected(option)}
+                    aria-label={`Editar ${option.label}`}
+                  >
+                    <Pencil className="h-3.5 w-3.5" />
+                  </button>
+                ) : null}
                 <button
                   type="button"
                   className="cursor-pointer text-muted-foreground transition-colors hover:text-foreground"