@hed-hog/lms 0.0.351 → 0.0.354

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

@@ -48,6 +48,7 @@ import {
   useDeleteSessionMutation,
   useUpdateSessionMutation,
 } from '../_data/use-course-structure-mutations';
+import { IconActionTooltip } from './icon-action-tooltip';
 import { useStructureStore } from './store';
 import type { Visibility } from './types';
 
@@ -161,22 +162,26 @@ export function EditorSession({ sessionId }: EditorSessionProps) {
           >
             {session.published ? 'Publicada' : 'Oculta'}
           </Badge>
-          <Button
-            type="button"
-            variant="ghost"
-            size="icon"
-            className="size-7 text-destructive/60 hover:text-destructive shrink-0"
-            title="Excluir sessão"
-            aria-label="Excluir sessão"
-            disabled={deleteSession.isPending}
-            onClick={handleDelete}
+          <IconActionTooltip
+            label="Excluir sessão"
+            asWrapper={deleteSession.isPending}
           >
-            {deleteSession.isPending ? (
-              <Loader2 className="size-3.5 animate-spin" />
-            ) : (
-              <Trash2 className="size-3.5" />
-            )}
-          </Button>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              className="size-7 text-destructive/60 hover:text-destructive shrink-0"
+              aria-label="Excluir sessão"
+              disabled={deleteSession.isPending}
+              onClick={handleDelete}
+            >
+              {deleteSession.isPending ? (
+                <Loader2 className="size-3.5 animate-spin" />
+              ) : (
+                <Trash2 className="size-3.5" />
+              )}
+            </Button>
+          </IconActionTooltip>
         </div>
 
         {/* ── Scrollable body ───────────────────────────────────────────────── */}

package/hedhog/frontend/app/courses/[id]/structure/_components/icon-action-tooltip.tsx.ejs

@@ -0,0 +1,35 @@
+'use client';
+
+import type { ReactNode } from 'react';
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+
+type IconActionTooltipProps = {
+  label: ReactNode;
+  children: ReactNode;
+  side?: 'top' | 'right' | 'bottom' | 'left';
+  asWrapper?: boolean;
+};
+
+export function IconActionTooltip({
+  label,
+  children,
+  side = 'top',
+  asWrapper = false,
+}: IconActionTooltipProps) {
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          {asWrapper ? <span className="inline-flex">{children}</span> : children}
+        </TooltipTrigger>
+        <TooltipContent side={side}>{label}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}

package/hedhog/frontend/app/courses/[id]/structure/_components/multi-select-bar.tsx.ejs

@@ -12,6 +12,7 @@ import {
   useDuplicateSessionMutation,
   useMoveLessonsMutation,
 } from '../_data/use-course-structure-mutations';
+import { IconActionTooltip } from './icon-action-tooltip';
 import { useStructureStore } from './store';
 
 /**
@@ -175,92 +176,100 @@ export function MultiSelectBar() {
       <div className="flex-1" />
 
       {/* Copy */}
-      <Button
-        variant="ghost"
-        size="icon"
-        className="size-6 text-muted-foreground hover:text-foreground"
-        title={t('copyTitle')}
-        aria-label={t('copyAria')}
-        onClick={handleCopy}
-      >
-        <Copy className="size-3" />
-      </Button>
+      <IconActionTooltip label={t('copyTitle')}>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-6 text-muted-foreground hover:text-foreground"
+          aria-label={t('copyAria')}
+          onClick={handleCopy}
+        >
+          <Copy className="size-3" />
+        </Button>
+      </IconActionTooltip>
 
       {/* Duplicate */}
-      <Button
-        variant="ghost"
-        size="icon"
-        className="size-6 text-muted-foreground hover:text-foreground"
-        title={t('duplicateTitle')}
-        aria-label={t('duplicateAria')}
-        disabled={isDuplicating}
-        onClick={handleDuplicate}
-      >
-        {isDuplicating ? (
-          <Loader2 className="size-3 animate-spin" />
-        ) : (
-          <svg
-            viewBox="0 0 24 24"
-            className="size-3 fill-none stroke-current stroke-2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            aria-hidden
-          >
-            <rect x="9" y="9" width="13" height="13" rx="2" />
-            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
-          </svg>
-        )}
-      </Button>
-
-      {/* Move (lessons only) */}
-      {canMove && (
+      <IconActionTooltip label={t('duplicateTitle')} asWrapper={isDuplicating}>
         <Button
           variant="ghost"
           size="icon"
           className="size-6 text-muted-foreground hover:text-foreground"
-          title={t('moveTitle')}
-          aria-label={t('moveAria')}
-          disabled={isMoving}
-          onClick={handleMove}
+          aria-label={t('duplicateAria')}
+          disabled={isDuplicating}
+          onClick={handleDuplicate}
         >
-          {isMoving ? (
+          {isDuplicating ? (
             <Loader2 className="size-3 animate-spin" />
           ) : (
-            <FolderOpen className="size-3" />
+            <svg
+              viewBox="0 0 24 24"
+              className="size-3 fill-none stroke-current stroke-2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              aria-hidden
+            >
+              <rect x="9" y="9" width="13" height="13" rx="2" />
+              <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+            </svg>
           )}
         </Button>
+      </IconActionTooltip>
+
+      {/* Move (lessons only) */}
+      {canMove && (
+        <IconActionTooltip label={t('moveTitle')} asWrapper={isMoving}>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="size-6 text-muted-foreground hover:text-foreground"
+            aria-label={t('moveAria')}
+            disabled={isMoving}
+            onClick={handleMove}
+          >
+            {isMoving ? (
+              <Loader2 className="size-3 animate-spin" />
+            ) : (
+              <FolderOpen className="size-3" />
+            )}
+          </Button>
+        </IconActionTooltip>
       )}
 
       {/* Delete */}
-      <Button
-        variant="ghost"
-        size="icon"
-        className="size-6 text-destructive/60 hover:text-destructive"
-        title={t('deleteActionTitle')}
-        aria-label={t('deleteActionAria')}
-        disabled={bulkDelete.isPending}
-        onClick={handleDelete}
+      <IconActionTooltip
+        label={t('deleteActionTitle')}
+        asWrapper={bulkDelete.isPending}
       >
-        {bulkDelete.isPending ? (
-          <Loader2 className="size-3 animate-spin" />
-        ) : (
-          <Trash2 className="size-3" />
-        )}
-      </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-6 text-destructive/60 hover:text-destructive"
+          aria-label={t('deleteActionAria')}
+          disabled={bulkDelete.isPending}
+          onClick={handleDelete}
+        >
+          {bulkDelete.isPending ? (
+            <Loader2 className="size-3 animate-spin" />
+          ) : (
+            <Trash2 className="size-3" />
+          )}
+        </Button>
+      </IconActionTooltip>
 
       <Separator orientation="vertical" className="mx-0.5 h-3.5" />
 
       {/* Deselect */}
-      <Button
-        variant="ghost"
-        size="icon"
-        className="size-6 text-muted-foreground hover:text-foreground"
-        title={t('clearTitle')}
-        aria-label={t('clearAria')}
-        onClick={clearSelection}
-      >
-        <X className="size-3" />
-      </Button>
+      <IconActionTooltip label={t('clearTitle')}>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-6 text-muted-foreground hover:text-foreground"
+          aria-label={t('clearAria')}
+          onClick={clearSelection}
+        >
+          <X className="size-3" />
+        </Button>
+      </IconActionTooltip>
     </div>
   );
 }

package/hedhog/frontend/app/courses/[id]/structure/_components/search-filter.tsx.ejs

@@ -14,6 +14,7 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { cn } from '@/lib/utils';
 import { useDebounce } from '@/hooks/use-debounce';
+import { IconActionTooltip } from './icon-action-tooltip';
 import { useStructureStore } from './store';
 
 export interface SearchFilterHandle {
@@ -77,15 +78,17 @@ export const SearchFilter = forwardRef<SearchFilterHandle, SearchFilterProps>(
                 {resultCount}
               </span>
             )}
-            <Button
-              variant="ghost"
-              size="icon"
-              className="size-5 rounded-sm shrink-0"
-              onClick={() => setValue('')}
-              aria-label="Limpar busca"
-            >
-              <X className="size-3" />
-            </Button>
+            <IconActionTooltip label="Limpar busca">
+              <Button
+                variant="ghost"
+                size="icon"
+                className="size-5 rounded-sm shrink-0"
+                onClick={() => setValue('')}
+                aria-label="Limpar busca"
+              >
+                <X className="size-3" />
+              </Button>
+            </IconActionTooltip>
           </div>
         )}
       </div>
@@ -93,4 +96,4 @@ export const SearchFilter = forwardRef<SearchFilterHandle, SearchFilterProps>(
   }
 );
 
-SearchFilter.displayName = 'SearchFilter';
+SearchFilter.displayName = 'SearchFilter';

package/hedhog/frontend/app/courses/[id]/structure/_components/shortcuts-help.tsx.ejs

@@ -12,6 +12,7 @@ import {
 } from '@/components/ui/sheet';
 import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import { Separator } from '@/components/ui/separator';
+import { IconActionTooltip } from './icon-action-tooltip';
 
 // ── Data ──────────────────────────────────────────────────────────────────────
 
@@ -167,22 +168,23 @@ export function ShortcutsHelp({ open, onOpenChange }: ShortcutsHelpProps) {
 export function ShortcutsHelpTrigger({ onOpen }: { onOpen: () => void }) {
   const t = useTranslations('lms.CoursesPage.StructurePage.shortcuts');
   return (
-    <Button
-      variant="ghost"
-      size="sm"
-      className="h-8 gap-1.5 px-2 text-xs text-muted-foreground hover:text-foreground sm:px-3"
-      onClick={onOpen}
-      title={t('triggerTitle')}
-      aria-label={t('triggerTitle')}
-    >
-      <Keyboard className="size-3.5" />
-      <span className="sr-only sm:not-sr-only">{t('triggerLabel')}</span>
-      <Badge
-        variant="outline"
-        className="ml-0.5 hidden h-4 px-1 text-[0.6rem] font-mono sm:inline-flex"
+    <IconActionTooltip label={t('triggerTitle')} side="bottom">
+      <Button
+        variant="ghost"
+        size="sm"
+        className="h-8 gap-1.5 px-2 text-xs text-muted-foreground hover:text-foreground sm:px-3"
+        onClick={onOpen}
+        aria-label={t('triggerTitle')}
       >
-        Ctrl+/
-      </Badge>
-    </Button>
+        <Keyboard className="size-3.5" />
+        <span className="sr-only sm:not-sr-only">{t('triggerLabel')}</span>
+        <Badge
+          variant="outline"
+          className="ml-0.5 hidden h-4 px-1 text-[0.6rem] font-mono sm:inline-flex"
+        >
+          Ctrl+/
+        </Badge>
+      </Button>
+    </IconActionTooltip>
   );
 }

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

@@ -15,6 +15,10 @@ interface SortableTreeRowProps {
   isMatched: boolean;
   isEffectivelyExpanded: boolean;
   lessonCountMap: Map<string, number>;
+  sessionIndicatorMap: Map<
+    string,
+    { resourceCount: number; videoCount: number }
+  >;
   visibleItems: FlatItem[];
   /** When true (filter active) drag is disabled. */
   dragDisabled: boolean;
@@ -28,6 +32,7 @@ export function SortableTreeRow({
   isMatched,
   isEffectivelyExpanded,
   lessonCountMap,
+  sessionIndicatorMap,
   visibleItems,
   dragDisabled,
 }: SortableTreeRowProps) {
@@ -72,6 +77,7 @@ export function SortableTreeRow({
           isMatched={isMatched}
           isEffectivelyExpanded={isEffectivelyExpanded}
           lessonCountMap={lessonCountMap}
+          sessionIndicatorMap={sessionIndicatorMap}
           visibleItems={visibleItems}
         />
       </div>

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

@@ -558,7 +558,7 @@ export function TreeRootContextMenu({
 
   return (
     <ContextMenu>
-      <ContextMenuTrigger className="block h-full w-full">
+      <ContextMenuTrigger className="flex flex-col flex-1 min-h-0 w-full">
         {children}
       </ContextMenuTrigger>
       <ContextMenuContent className="w-56">

package/hedhog/frontend/app/courses/[id]/structure/_components/tree-display-settings-popover.tsx.ejs

@@ -9,6 +9,12 @@ import {
 } from '@/components/ui/popover';
 import { Separator } from '@/components/ui/separator';
 import { Switch } from '@/components/ui/switch';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 import { SlidersHorizontal } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 
@@ -32,17 +38,23 @@ export function TreeDisplaySettingsPopover() {
 
   return (
     <Popover>
-      <PopoverTrigger asChild>
-        <Button
-          variant="ghost"
-          size="sm"
-          className="h-8 gap-1.5 text-xs text-muted-foreground hover:text-foreground"
-          title={t('title')}
-        >
-          <SlidersHorizontal className="size-3.5" />
-          <span className="sr-only sm:not-sr-only">{t('label')}</span>
-        </Button>
-      </PopoverTrigger>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <PopoverTrigger asChild>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-8 gap-1.5 text-xs text-muted-foreground hover:text-foreground"
+              >
+                <SlidersHorizontal className="size-3.5" />
+                <span className="sr-only sm:not-sr-only">{t('label')}</span>
+              </Button>
+            </PopoverTrigger>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">{t('title')}</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
 
       <PopoverContent align="end" className="w-56 p-0">
         <div className="px-3 py-2.5 border-b">

package/hedhog/frontend/app/courses/[id]/structure/_components/tree-helpers.ts.ejs

@@ -1,5 +1,30 @@
 import type { Course, FlatItem, Lesson, Session } from './types';
 
+export interface SessionIndicatorCounts {
+  resourceCount: number;
+  videoCount: number;
+}
+
+export function isUploadedVideoResourceType(type: string): boolean {
+  return (
+    type === 'video_original' ||
+    type.startsWith('video_profile:') ||
+    type.startsWith('video/')
+  );
+}
+
+export function getLessonUploadedVideoCount(lesson: Lesson): number {
+  return lesson.resources.filter((resource) =>
+    isUploadedVideoResourceType(resource.type)
+  ).length;
+}
+
+export function getLessonAttachedResourceCount(lesson: Lesson): number {
+  return lesson.resources.filter(
+    (resource) => !isUploadedVideoResourceType(resource.type)
+  ).length;
+}
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Text Highlight Helpers
 // ─────────────────────────────────────────────────────────────────────────────
@@ -52,17 +77,11 @@ function lessonMatchesQuery(l: Lesson, q: string): boolean {
 }
 
 function sessionMatchesQuery(s: Session, q: string): boolean {
-  return (
-    s.title.toLowerCase().includes(q) ||
-    s.code.toLowerCase().includes(q)
-  );
+  return s.title.toLowerCase().includes(q) || s.code.toLowerCase().includes(q);
 }
 
 function courseMatchesQuery(c: Course, q: string): boolean {
-  return (
-    c.title.toLowerCase().includes(q) ||
-    c.code.toLowerCase().includes(q)
-  );
+  return c.title.toLowerCase().includes(q) || c.code.toLowerCase().includes(q);
 }
 
 /**
@@ -179,4 +198,24 @@ export function buildLessonCountMap(lessons: Lesson[]): Map<string, number> {
     map.set(lesson.sessionId, (map.get(lesson.sessionId) ?? 0) + 1);
   }
   return map;
-}
+}
+
+export function buildSessionIndicatorMap(
+  lessons: Lesson[]
+): Map<string, SessionIndicatorCounts> {
+  const map = new Map<string, SessionIndicatorCounts>();
+
+  for (const lesson of lessons) {
+    const current = map.get(lesson.sessionId) ?? {
+      resourceCount: 0,
+      videoCount: 0,
+    };
+
+    current.resourceCount += getLessonAttachedResourceCount(lesson);
+    current.videoCount += getLessonUploadedVideoCount(lesson);
+
+    map.set(lesson.sessionId, current);
+  }
+
+  return map;
+}

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

@@ -3,6 +3,7 @@
 import { cn } from '@/lib/utils';
 import { BookOpen } from 'lucide-react';
 import { HighlightedText } from './highlighted-text';
+import { useTreeDisplaySettings } from './use-tree-display-settings';
 import type { Course } from './types';
 
 interface TreeRowCourseProps {
@@ -21,6 +22,8 @@ export function TreeRowCourse({
   query,
   onClick,
 }: TreeRowCourseProps) {
+  const { showCode } = useTreeDisplaySettings();
+
   return (
     <div
       onClick={onClick}
@@ -28,7 +31,8 @@ export function TreeRowCourse({
       aria-selected={isActive}
       className={cn(
         'flex items-center gap-2 px-3 py-1.5 rounded-md cursor-pointer select-none transition-colors text-sm font-semibold h-full',
-        isActive && 'bg-accent text-accent-foreground ring-1 ring-inset ring-primary/20',
+        isActive &&
+          'bg-accent text-accent-foreground ring-1 ring-inset ring-primary/20',
         isSelected && !isActive && 'bg-accent/60',
         !isActive && !isSelected && 'hover:bg-muted/60'
       )}
@@ -37,6 +41,11 @@ export function TreeRowCourse({
       <span className="truncate flex-1">
         <HighlightedText text={data.title} query={query} />
       </span>
+      {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 shrink-0">
+          {data.code}
+        </span>
+      )}
       <span
         className={cn(
           'text-[0.6rem] px-1.5 py-0.5 rounded-full shrink-0 font-medium leading-none',
@@ -49,4 +58,4 @@ export function TreeRowCourse({
       </span>
     </div>
   );
-}
+}