@hed-hog/lms 0.0.354 → 0.0.357

package/hedhog/frontend/app/courses/[id]/structure/_components/editor-session.tsx.ejs

@@ -8,7 +8,6 @@ import {
   EyeOff,
   Layers,
   Loader2,
-  Lock,
   Plus,
   Save,
   Trash2,
@@ -19,7 +18,6 @@ import { useEffect, useMemo } from 'react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
-import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import {
@@ -32,16 +30,14 @@ import {
 } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
 import { ScrollArea } from '@/components/ui/scroll-area';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
 import { Separator } from '@/components/ui/separator';
 import { Switch } from '@/components/ui/switch';
 import { Textarea } from '@/components/ui/textarea';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 
 import {
   useCreateLessonMutation,
@@ -50,7 +46,6 @@ import {
 } from '../_data/use-course-structure-mutations';
 import { IconActionTooltip } from './icon-action-tooltip';
 import { useStructureStore } from './store';
-import type { Visibility } from './types';
 
 // ── Schema ────────────────────────────────────────────────────────────────────
 
@@ -59,7 +54,6 @@ const schema = z.object({
   title: z.string().min(1, 'Título obrigatório'),
   description: z.string(),
   duration: z.coerce.number().min(0),
-  visibility: z.enum(['publico', 'privado', 'restrito'] as const),
   published: z.boolean(),
 });
 
@@ -95,8 +89,7 @@ export function EditorSession({ sessionId }: EditorSessionProps) {
     title: session?.title ?? '',
     description: session?.description ?? '',
     duration: session?.duration ?? 0,
-    visibility: (session?.visibility ?? 'publico') as Visibility,
-    published: session?.published ?? true,
+    published: session?.published ?? false,
   };
 
   const form = useForm<FormValues>({
@@ -113,8 +106,7 @@ export function EditorSession({ sessionId }: EditorSessionProps) {
       title: session.title,
       description: session.description ?? '',
       duration: session.duration,
-      visibility: session.visibility ?? 'publico',
-      published: session.published ?? true,
+      published: session.published ?? false,
     });
   }, [session?.id]); // eslint-disable-line react-hooks/exhaustive-deps
 
@@ -156,12 +148,23 @@ export function EditorSession({ sessionId }: EditorSessionProps) {
               {session.code}
             </p>
           </div>
-          <Badge
-            variant={session.published ? 'default' : 'secondary'}
-            className="shrink-0 text-xs"
-          >
-            {session.published ? 'Publicada' : 'Oculta'}
-          </Badge>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span
+                className="inline-flex shrink-0 items-center"
+                aria-label={session.published ? 'Publicada' : 'Rascunho'}
+              >
+                {session.published ? (
+                  <Eye className="size-4 text-emerald-600 dark:text-emerald-400" />
+                ) : (
+                  <EyeOff className="size-4 text-muted-foreground" />
+                )}
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>
+              {session.published ? 'Publicada' : 'Rascunho'}
+            </TooltipContent>
+          </Tooltip>
           <IconActionTooltip
             label="Excluir sessão"
             asWrapper={deleteSession.isPending}
@@ -285,45 +288,7 @@ export function EditorSession({ sessionId }: EditorSessionProps) {
                 </CardTitle>
               </CardHeader>
               <CardContent className="px-3 pb-2">
-                <div className="grid grid-cols-1 gap-2 items-end sm:grid-cols-2">
-                  <FormField
-                    control={form.control}
-                    name="visibility"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel className="text-xs">Visibilidade</FormLabel>
-                        <Select
-                          value={field.value}
-                          onValueChange={field.onChange}
-                        >
-                          <FormControl>
-                            <SelectTrigger className="h-8 text-xs w-full">
-                              <SelectValue />
-                            </SelectTrigger>
-                          </FormControl>
-                          <SelectContent>
-                            <SelectItem value="publico">
-                              <span className="flex items-center gap-1.5">
-                                <Eye className="size-3" /> Público
-                              </span>
-                            </SelectItem>
-                            <SelectItem value="privado">
-                              <span className="flex items-center gap-1.5">
-                                <EyeOff className="size-3" /> Privado
-                              </span>
-                            </SelectItem>
-                            <SelectItem value="restrito">
-                              <span className="flex items-center gap-1.5">
-                                <Lock className="size-3" /> Restrito
-                              </span>
-                            </SelectItem>
-                          </SelectContent>
-                        </Select>
-                        <FormMessage className="text-xs" />
-                      </FormItem>
-                    )}
-                  />
-
+                <div className="grid grid-cols-1 gap-2 items-end">
                   <FormField
                     control={form.control}
                     name="published"

package/hedhog/frontend/app/courses/[id]/structure/_components/mock-data.ts.ejs

@@ -63,6 +63,7 @@ export const MOCK_SESSIONS: Session[] = SESSION_CONFIG.map((s, i) => ({
   title: s.title,
   duration: s.lessonCount * 12,
   order: i,
+  published: true,
 }));
 
 // Lesson title patterns

package/hedhog/frontend/app/courses/[id]/structure/_components/store.ts.ejs

@@ -72,6 +72,8 @@ interface StructureState {
     open: boolean;
     title: string;
     description: string;
+    confirmText: string;
+    destructive: boolean;
     onConfirm: (() => void) | null;
   };
 
@@ -122,6 +124,7 @@ interface StructureState {
     data: Partial<
       LessonFormValues & {
         transcription?: string;
+        videoConversionJobId?: number;
         resources?: Lesson['resources'];
       }
     >
@@ -183,6 +186,8 @@ interface StructureState {
   showConfirm: (opts: {
     title: string;
     description: string;
+    confirmText?: string;
+    destructive?: boolean;
     onConfirm: () => void;
   }) => void;
   closeConfirm: () => void;
@@ -282,6 +287,8 @@ export const useStructureStore = create<StructureState>((set, get) => ({
     open: false,
     title: '',
     description: '',
+    confirmText: '',
+    destructive: true,
     onConfirm: null as (() => void) | null,
   },
   sessionPickerDialog: {
@@ -380,6 +387,7 @@ export const useStructureStore = create<StructureState>((set, get) => ({
       title: `Nova Sessão ${code}`,
       duration: 30,
       order: sessions.length,
+      published: false,
     };
     set((s) => {
       const nextExpandedIds = new Set([...s.expandedIds, newSession.id]);
@@ -433,6 +441,7 @@ export const useStructureStore = create<StructureState>((set, get) => ({
       duration: 10,
       sessionId,
       order: sessionLessons.length,
+      published: false,
       resources: [],
     };
     set((s) => {
@@ -919,6 +928,8 @@ export const useStructureStore = create<StructureState>((set, get) => ({
         open: true,
         title: opts.title,
         description: opts.description,
+        confirmText: opts.confirmText ?? '',
+        destructive: opts.destructive ?? true,
         onConfirm: opts.onConfirm,
       },
     }),

package/hedhog/frontend/app/courses/[id]/structure/_components/tree-context-menu.tsx.ejs

@@ -328,6 +328,7 @@ function LessonMenu({ data }: { data: Lesson }) {
 
   const hasLessonClipboard = copiedType === 'lesson' && copiedIds.length > 0;
   const hasOtherSessions = sessions.some((ss) => ss.id !== data.sessionId);
+  const session = sessions.find((ss) => ss.id === data.sessionId);
 
   // Ids to move when "Mover" is triggered
   const idsToMove = multiLessons ? selectedLessonIds : [data.id];
@@ -373,6 +374,27 @@ function LessonMenu({ data }: { data: Lesson }) {
         Copiar aula
       </ContextMenuItem>
 
+      <ContextMenuItem
+        onSelect={async () => {
+          if (!session) {
+            toast.error('Sessão da aula não encontrada');
+            return;
+          }
+
+          const lessonCopyCode = `${session.code}_${data.code}_${data.title}`;
+
+          try {
+            await navigator.clipboard.writeText(lessonCopyCode);
+            toast.success('Código da aula copiado');
+          } catch {
+            toast.error('Não foi possível copiar o código da aula');
+          }
+        }}
+      >
+        <Clipboard className="size-3.5 mr-2 text-muted-foreground" />
+        Copiar código da aula
+      </ContextMenuItem>
+
       {multiLessons && (
         <ContextMenuItem
           onSelect={() => {

package/hedhog/frontend/app/courses/[id]/structure/_components/tree-row-lesson.tsx.ejs

@@ -16,7 +16,6 @@ import {
   Film,
   HelpCircle,
   Loader2,
-  Lock,
   Paperclip,
   ScrollText,
   Video,
@@ -32,7 +31,7 @@ import {
 } from '../_data/services/course-structure.service';
 import { HighlightedText } from './highlighted-text';
 import { useStructureStore } from './store';
-import type { Lesson, LessonStatus, LessonType, Visibility } from './types';
+import type { Lesson, LessonStatus, LessonType } from './types';
 import {
   getLessonAttachedResourceCount,
   getLessonUploadedVideoCount,
@@ -63,15 +62,6 @@ const STATUS_CONFIG: Record<LessonStatus, { label: string; dot: string }> = {
   publicada: { label: 'Publicada', dot: 'bg-emerald-500' },
 };
 
-const VISIBILITY_CONFIG: Record<
-  Visibility,
-  { icon: LucideIcon; color: string; label: string }
-> = {
-  publico: { icon: Eye, color: 'text-emerald-500', label: 'Público' },
-  privado: { icon: EyeOff, color: 'text-muted-foreground', label: 'Privado' },
-  restrito: { icon: Lock, color: 'text-amber-500', label: 'Restrito' },
-};
-
 // ── Props ─────────────────────────────────────────────────────────────────────
 
 interface TreeRowLessonProps {
@@ -98,9 +88,7 @@ export function TreeRowLesson({
   const { request } = useApp();
 
   const statusCfg = data.status ? STATUS_CONFIG[data.status] : null;
-  const visibilityCfg = data.visibility
-    ? VISIBILITY_CONFIG[data.visibility]
-    : null;
+  const isPublished = data.published === true;
 
   const {
     showStatusDot,
@@ -171,7 +159,6 @@ export function TreeRowLesson({
         publicDescription: data.publicDescription,
         privateDescription: data.privateDescription,
         status: data.status,
-        visibility: data.visibility,
         videoProvider: data.videoProvider,
         videoUrl: data.videoUrl,
         autoDuration: data.autoDuration,
@@ -215,24 +202,32 @@ export function TreeRowLesson({
     data.type !== 'video' ? (
       <Icon className={cn('size-3.5 shrink-0', cfg.color)} aria-hidden />
     ) : videoJobVisualState === 'waiting' ? (
-      <span
-        title="Conversão aguardando processamento"
-        aria-label="Conversão aguardando processamento"
-        className="inline-flex items-center"
-      >
-        <Clock3 className="size-3.5 shrink-0 text-amber-500" aria-hidden />
-      </span>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <span
+            aria-label="Conversão aguardando processamento"
+            className="inline-flex items-center"
+          >
+            <Clock3 className="size-3.5 shrink-0 text-amber-500" aria-hidden />
+          </span>
+        </TooltipTrigger>
+        <TooltipContent>Conversão aguardando processamento</TooltipContent>
+      </Tooltip>
     ) : videoJobVisualState === 'processing' ? (
-      <span
-        title="Conversão em processamento"
-        aria-label="Conversão em processamento"
-        className="inline-flex items-center"
-      >
-        <Loader2
-          className="size-3.5 shrink-0 animate-spin text-blue-500"
-          aria-hidden
-        />
-      </span>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <span
+            aria-label="Conversão em processamento"
+            className="inline-flex items-center"
+          >
+            <Loader2
+              className="size-3.5 shrink-0 animate-spin text-blue-500"
+              aria-hidden
+            />
+          </span>
+        </TooltipTrigger>
+        <TooltipContent>Conversão em processamento</TooltipContent>
+      </Tooltip>
     ) : (
       <Video className={cn('size-3.5 shrink-0', cfg.color)} aria-hidden />
     );
@@ -246,7 +241,7 @@ export function TreeRowLesson({
       }}
       role="treeitem"
       aria-selected={isActive}
-      title={`${cfg.label} · ${data.duration}min`}
+      aria-label={`${cfg.label} · ${data.duration}min`}
       className={cn(
         'flex items-center gap-1.5 pl-7 pr-2 rounded-md cursor-pointer select-none text-sm h-full group',
         'transition-colors duration-100',
@@ -290,39 +285,55 @@ export function TreeRowLesson({
             {durationLabel}
           </span>
           {/* Visibility icon */}
-          {showVisibility &&
-            visibilityCfg &&
-            (() => {
-              const VisIcon = visibilityCfg.icon;
-              return (
+          {showVisibility && (
+            <Tooltip>
+              <TooltipTrigger asChild>
                 <span
-                  title={t('visibility', { value: visibilityCfg.label })}
-                  aria-label={t('visibility', { value: visibilityCfg.label })}
+                  aria-label={isPublished ? t('published') : t('draft')}
                   className="inline-flex items-center"
                 >
-                  <VisIcon
-                    className={cn('size-3 shrink-0', visibilityCfg.color)}
-                  />
+                  {isPublished ? (
+                    <Eye className="size-3 shrink-0 text-emerald-600 dark:text-emerald-400" />
+                  ) : (
+                    <EyeOff className="size-3 shrink-0 text-muted-foreground" />
+                  )}
                 </span>
-              );
-            })()}
+              </TooltipTrigger>
+              <TooltipContent>
+                {isPublished ? t('published') : t('draft')}
+              </TooltipContent>
+            </Tooltip>
+          )}
           {/* Status dot */}
           {showStatusDot && statusCfg && (
-            <span
-              className={cn('size-1.5 rounded-full shrink-0', statusCfg.dot)}
-              title={t('status', { value: statusCfg.label })}
-              aria-label={t('status', { value: statusCfg.label })}
-            />
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <span
+                  className={cn(
+                    'size-1.5 rounded-full shrink-0',
+                    statusCfg.dot
+                  )}
+                  aria-label={t('status', { value: statusCfg.label })}
+                />
+              </TooltipTrigger>
+              <TooltipContent>
+                {t('status', { value: statusCfg.label })}
+              </TooltipContent>
+            </Tooltip>
           )}
           {/* Video linked indicator */}
           {showVideoIndicator && data.type === 'video' && data.videoUrl && (
-            <span
-              title={t('videoLinked')}
-              aria-label={t('videoLinked')}
-              className="inline-flex items-center"
-            >
-              <Film className="size-3 shrink-0 text-violet-500" />
-            </span>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <span
+                  aria-label={t('videoLinked')}
+                  className="inline-flex items-center"
+                >
+                  <Film className="size-3 shrink-0 text-violet-500" />
+                </span>
+              </TooltipTrigger>
+              <TooltipContent>{t('videoLinked')}</TooltipContent>
+            </Tooltip>
           )}
           {/* Uploaded videos indicator */}
           {showVideoIndicator && uploadedVideoCount > 0 && (
@@ -364,13 +375,17 @@ export function TreeRowLesson({
           {showTranscriptionIndicator &&
             data.type === 'video' &&
             data.transcription && (
-              <span
-                title={t('hasTranscription')}
-                aria-label={t('hasTranscription')}
-                className="inline-flex items-center"
-              >
-                <ScrollText className="size-3 shrink-0 text-emerald-500" />
-              </span>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span
+                    aria-label={t('hasTranscription')}
+                    className="inline-flex items-center"
+                  >
+                    <ScrollText className="size-3 shrink-0 text-emerald-500" />
+                  </span>
+                </TooltipTrigger>
+                <TooltipContent>{t('hasTranscription')}</TooltipContent>
+              </Tooltip>
             )}
         </div>
       )}

package/hedhog/frontend/app/courses/[id]/structure/_components/tree-row-session.tsx.ejs

@@ -10,6 +10,8 @@ import { cn } from '@/lib/utils';
 import {
   ChevronDown,
   ChevronRight,
+  Eye,
+  EyeOff,
   Layers,
   Paperclip,
   Video,
@@ -54,7 +56,7 @@ export function TreeRowSession({
   const cancelRename = useStructureStore((s) => s.cancelRename);
   const startRename = useStructureStore((s) => s.startRename);
   const renameItem = useStructureStore((s) => s.renameItem);
-  const { showCode } = useTreeDisplaySettings();
+  const { showCode, showVisibility } = useTreeDisplaySettings();
 
   const updateSession = useUpdateSessionMutation();
 
@@ -79,8 +81,7 @@ export function TreeRowSession({
         duration: data.duration,
         code: data.code,
         description: '',
-        visibility: data.visibility ?? 'publico',
-        published: data.published ?? false,
+        published: data.published,
       },
     });
   }
@@ -96,6 +97,7 @@ export function TreeRowSession({
 
   const durationH = Math.floor((data.duration ?? 0) / 60);
   const durationM = (data.duration ?? 0) % 60;
+  const isPublished = data.published === true;
   const durationLabel =
     durationH > 0
       ? `${durationH}h${durationM > 0 ? ` ${durationM}m` : ''}`
@@ -138,7 +140,12 @@ export function TreeRowSession({
 
       {/* Session icon */}
       <Layers
-        className="size-3.5 shrink-0 text-blue-500 dark:text-blue-400"
+        className={cn(
+          'size-3.5 shrink-0 transition-colors',
+          isPublished
+            ? 'text-emerald-600 dark:text-emerald-400'
+            : 'text-muted-foreground/70'
+        )}
         aria-hidden
       />
 
@@ -162,6 +169,26 @@ export function TreeRowSession({
       {/* Meta badges (hidden during rename) */}
       {!isRenaming && (
         <div className="flex items-center gap-1 shrink-0">
+          {showVisibility && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <span
+                  className="inline-flex items-center"
+                  aria-label={isPublished ? t('published') : t('draft')}
+                >
+                  {isPublished ? (
+                    <Eye className="size-3 shrink-0 text-emerald-600 dark:text-emerald-400" />
+                  ) : (
+                    <EyeOff className="size-3 shrink-0 text-muted-foreground" />
+                  )}
+                </span>
+              </TooltipTrigger>
+              <TooltipContent>
+                {isPublished ? t('published') : t('draft')}
+              </TooltipContent>
+            </Tooltip>
+          )}
+
           {showCode && (
             <span className="inline-flex items-center rounded border border-border/60 bg-muted/60 px-1 text-[0.6rem] font-mono text-muted-foreground leading-4">
               {data.code}
@@ -207,16 +234,6 @@ export function TreeRowSession({
               </TooltipContent>
             </Tooltip>
           )}
-          {/* Published status dot */}
-          <span
-            className={cn(
-              'size-1.5 rounded-full shrink-0',
-              data.published === false
-                ? 'bg-muted-foreground/30'
-                : 'bg-emerald-500'
-            )}
-            title={data.published === false ? t('draft') : t('published')}
-          />
         </div>
       )}
     </div>

package/hedhog/frontend/app/courses/[id]/structure/_components/types.ts.ejs

@@ -35,8 +35,7 @@ export interface Session {
   description?: string;
   duration: number;
   order: number;
-  visibility?: Visibility;
-  published?: boolean;
+  published: boolean;
 }
 
 export interface Resource {
@@ -95,6 +94,7 @@ export interface Lesson {
   order: number;
   status?: LessonStatus;
   visibility?: Visibility;
+  published?: boolean;
   // Video
   videoProvider?: VideoProvider;
   videoUrl?: string;
@@ -127,7 +127,6 @@ export type SessionFormValues = {
   title: string;
   description: string;
   duration: number;
-  visibility: Visibility;
   published: boolean;
 };
 
@@ -139,7 +138,7 @@ export type LessonFormValues = {
   type: LessonType;
   duration: number;
   status: LessonStatus;
-  visibility: Visibility;
+  published: boolean;
   videoProvider?: VideoProvider;
   videoUrl?: string;
   autoDuration?: boolean;