@hed-hog/lms 0.0.314 → 0.0.316

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

@@ -1,167 +1,167 @@
-'use client';
-
-import { Input } from '@/components/ui/input';
-import { cn } from '@/lib/utils';
-import { ChevronDown, ChevronRight, Layers } from 'lucide-react';
-import { useEffect, useRef } from 'react';
-import { useUpdateSessionMutation } from '../_data/use-course-structure-mutations';
-import { HighlightedText } from './highlighted-text';
-import { useStructureStore } from './store';
-import type { Session } from './types';
-
-interface TreeRowSessionProps {
-  data: Session;
-  lessonCount: number;
-  isExpanded: boolean;
-  isSelected: boolean;
-  isActive: boolean;
-  query: string;
-  isMatched: boolean;
-  onClick: (e: React.MouseEvent) => void;
-  onToggleExpand: (e: React.MouseEvent) => void;
-}
-
-export function TreeRowSession({
-  data,
-  lessonCount,
-  isExpanded,
-  isSelected,
-  isActive,
-  query,
-  onClick,
-  onToggleExpand,
-}: TreeRowSessionProps) {
-  const inlineRenamingId = useStructureStore((s) => s.inlineRenamingId);
-  const cancelRename = useStructureStore((s) => s.cancelRename);
-  const startRename = useStructureStore((s) => s.startRename);
-  const renameItem = useStructureStore((s) => s.renameItem);
-
-  const updateSession = useUpdateSessionMutation();
-
-  const isRenaming = inlineRenamingId === data.id;
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (isRenaming) {
-      inputRef.current?.focus();
-      inputRef.current?.select();
-    }
-  }, [isRenaming]);
-
-  function commitAndPersist(newTitle: string) {
-    const trimmed = newTitle.trim() || data.title;
-    renameItem(data.id, trimmed);
-    cancelRename();
-    updateSession.mutate({
-      sessionId: data.id,
-      formValues: {
-        title: trimmed,
-        duration: data.duration,
-        code: data.code,
-        description: '',
-        visibility: data.visibility ?? 'publico',
-        published: data.published ?? false,
-      },
-    });
-  }
-
-  function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
-    e.stopPropagation();
-    if (e.key === 'Enter') {
-      commitAndPersist(inputRef.current?.value ?? data.title);
-    } else if (e.key === 'Escape') {
-      cancelRename();
-    }
-  }
-
-  const durationH = Math.floor((data.duration ?? 0) / 60);
-  const durationM = (data.duration ?? 0) % 60;
-  const durationLabel =
-    durationH > 0
-      ? `${durationH}h${durationM > 0 ? ` ${durationM}m` : ''}`
-      : `${durationM}m`;
-
-  return (
-    <div
-      onClick={isRenaming ? undefined : onClick}
-      onDoubleClick={(e) => {
-        e.stopPropagation();
-        startRename(data.id);
-      }}
-      role="treeitem"
-      aria-expanded={isExpanded}
-      aria-selected={isActive}
-      className={cn(
-        'flex items-center gap-1.5 px-2 py-1.5 rounded-md cursor-pointer select-none text-sm group h-full',
-        'transition-colors duration-100',
-        isActive &&
-          'bg-accent text-accent-foreground ring-1 ring-inset ring-primary/20',
-        isSelected && !isActive && 'bg-accent/60',
-        !isActive && !isSelected && 'hover:bg-muted/60'
-      )}
-    >
-      {/* Expand/collapse chevron */}
-      <button
-        className="shrink-0 text-muted-foreground hover:text-foreground transition-colors p-0.5 rounded focus-visible:ring-1 focus-visible:ring-ring"
-        onClick={onToggleExpand}
-        aria-label={isExpanded ? 'Recolher sessão' : 'Expandir sessão'}
-        tabIndex={-1}
-      >
-        {isExpanded ? (
-          <ChevronDown className="size-3.5" />
-        ) : (
-          <ChevronRight className="size-3.5" />
-        )}
-      </button>
-
-      {/* Session icon */}
-      <Layers
-        className="size-3.5 shrink-0 text-blue-500 dark:text-blue-400"
-        aria-hidden
-      />
-
-      {/* Inline rename or title */}
-      {isRenaming ? (
-        <Input
-          ref={inputRef}
-          defaultValue={data.title}
-          className="h-5 text-xs px-1 py-0 flex-1 min-w-0"
-          onClick={(e) => e.stopPropagation()}
-          onBlur={(e) => commitAndPersist(e.target.value)}
-          onKeyDown={handleKeyDown}
-          aria-label="Renomear sessão"
-        />
-      ) : (
-        <span className="truncate flex-1 font-medium leading-tight">
-          <HighlightedText text={data.title} query={query} />
-        </span>
-      )}
-
-      {/* Meta badges (hidden during rename) */}
-      {!isRenaming && (
-        <div className="flex items-center gap-1 shrink-0">
-          {/* Duration - show on hover */}
-          {data.duration > 0 && (
-            <span className="text-[0.6rem] text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity tabular-nums">
-              {durationLabel}
-            </span>
-          )}
-          {/* Lesson count - always visible */}
-          <span className="text-[0.62rem] font-medium tabular-nums text-muted-foreground min-w-[1.5rem] text-right">
-            {lessonCount}
-          </span>
-          {/* 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 ? 'Rascunho' : 'Publicada'}
-          />
-        </div>
-      )}
-    </div>
-  );
-}
+'use client';
+
+import { Input } from '@/components/ui/input';
+import { cn } from '@/lib/utils';
+import { ChevronDown, ChevronRight, Layers } from 'lucide-react';
+import { useEffect, useRef } from 'react';
+import { useUpdateSessionMutation } from '../_data/use-course-structure-mutations';
+import { HighlightedText } from './highlighted-text';
+import { useStructureStore } from './store';
+import type { Session } from './types';
+
+interface TreeRowSessionProps {
+  data: Session;
+  lessonCount: number;
+  isExpanded: boolean;
+  isSelected: boolean;
+  isActive: boolean;
+  query: string;
+  isMatched: boolean;
+  onClick: (e: React.MouseEvent) => void;
+  onToggleExpand: (e: React.MouseEvent) => void;
+}
+
+export function TreeRowSession({
+  data,
+  lessonCount,
+  isExpanded,
+  isSelected,
+  isActive,
+  query,
+  onClick,
+  onToggleExpand,
+}: TreeRowSessionProps) {
+  const inlineRenamingId = useStructureStore((s) => s.inlineRenamingId);
+  const cancelRename = useStructureStore((s) => s.cancelRename);
+  const startRename = useStructureStore((s) => s.startRename);
+  const renameItem = useStructureStore((s) => s.renameItem);
+
+  const updateSession = useUpdateSessionMutation();
+
+  const isRenaming = inlineRenamingId === data.id;
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (isRenaming) {
+      inputRef.current?.focus();
+      inputRef.current?.select();
+    }
+  }, [isRenaming]);
+
+  function commitAndPersist(newTitle: string) {
+    const trimmed = newTitle.trim() || data.title;
+    renameItem(data.id, trimmed);
+    cancelRename();
+    updateSession.mutate({
+      sessionId: data.id,
+      formValues: {
+        title: trimmed,
+        duration: data.duration,
+        code: data.code,
+        description: '',
+        visibility: data.visibility ?? 'publico',
+        published: data.published ?? false,
+      },
+    });
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+    e.stopPropagation();
+    if (e.key === 'Enter') {
+      commitAndPersist(inputRef.current?.value ?? data.title);
+    } else if (e.key === 'Escape') {
+      cancelRename();
+    }
+  }
+
+  const durationH = Math.floor((data.duration ?? 0) / 60);
+  const durationM = (data.duration ?? 0) % 60;
+  const durationLabel =
+    durationH > 0
+      ? `${durationH}h${durationM > 0 ? ` ${durationM}m` : ''}`
+      : `${durationM}m`;
+
+  return (
+    <div
+      onClick={isRenaming ? undefined : onClick}
+      onDoubleClick={(e) => {
+        e.stopPropagation();
+        startRename(data.id);
+      }}
+      role="treeitem"
+      aria-expanded={isExpanded}
+      aria-selected={isActive}
+      className={cn(
+        'flex items-center gap-1.5 px-2 py-1.5 rounded-md cursor-pointer select-none text-sm group h-full',
+        'transition-colors duration-100',
+        isActive &&
+          'bg-accent text-accent-foreground ring-1 ring-inset ring-primary/20',
+        isSelected && !isActive && 'bg-accent/60',
+        !isActive && !isSelected && 'hover:bg-muted/60'
+      )}
+    >
+      {/* Expand/collapse chevron */}
+      <button
+        className="shrink-0 text-muted-foreground hover:text-foreground transition-colors p-0.5 rounded focus-visible:ring-1 focus-visible:ring-ring"
+        onClick={onToggleExpand}
+        aria-label={isExpanded ? 'Recolher sessão' : 'Expandir sessão'}
+        tabIndex={-1}
+      >
+        {isExpanded ? (
+          <ChevronDown className="size-3.5" />
+        ) : (
+          <ChevronRight className="size-3.5" />
+        )}
+      </button>
+
+      {/* Session icon */}
+      <Layers
+        className="size-3.5 shrink-0 text-blue-500 dark:text-blue-400"
+        aria-hidden
+      />
+
+      {/* Inline rename or title */}
+      {isRenaming ? (
+        <Input
+          ref={inputRef}
+          defaultValue={data.title}
+          className="h-5 text-xs px-1 py-0 flex-1 min-w-0"
+          onClick={(e) => e.stopPropagation()}
+          onBlur={(e) => commitAndPersist(e.target.value)}
+          onKeyDown={handleKeyDown}
+          aria-label="Renomear sessão"
+        />
+      ) : (
+        <span className="truncate flex-1 font-medium leading-tight">
+          <HighlightedText text={data.title} query={query} />
+        </span>
+      )}
+
+      {/* Meta badges (hidden during rename) */}
+      {!isRenaming && (
+        <div className="flex items-center gap-1 shrink-0">
+          {/* Duration - show on hover */}
+          {data.duration > 0 && (
+            <span className="text-[0.6rem] text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity tabular-nums">
+              {durationLabel}
+            </span>
+          )}
+          {/* Lesson count - always visible */}
+          <span className="text-[0.62rem] font-medium tabular-nums text-muted-foreground min-w-[1.5rem] text-right">
+            {lessonCount}
+          </span>
+          {/* 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 ? 'Rascunho' : 'Publicada'}
+          />
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -1,108 +1,108 @@
-'use client';
-
-import { useCallback } from 'react';
-
-import { useStructureStore } from './store';
-import { TreeContextMenu } from './tree-context-menu';
-import { TreeRowCourse } from './tree-row-course';
-import { TreeRowLesson } from './tree-row-lesson';
-import { TreeRowSession } from './tree-row-session';
-import type { FlatItem, Lesson, Session } from './types';
-
-interface TreeRowProps {
-  item: FlatItem;
-  isActive: boolean;
-  isSelected: boolean;
-  query: string;
-  isMatched: boolean;
-  isEffectivelyExpanded: boolean;
-  lessonCountMap: Map<string, number>;
-  /** Full ordered visible list — required for SHIFT-range selection. */
-  visibleItems: FlatItem[];
-}
-
-export function TreeRow({
-  item,
-  isActive,
-  isSelected,
-  query,
-  isMatched,
-  isEffectivelyExpanded,
-  lessonCountMap,
-  visibleItems,
-}: TreeRowProps) {
-  const selectItem = useStructureStore((s) => s.selectItem);
-  const toggleExpand = useStructureStore((s) => s.toggleExpand);
-  const setMobileSheetOpen = useStructureStore((s) => s.setMobileSheetOpen);
-
-  const handleClick = useCallback(
-    (e: React.MouseEvent) => {
-      e.stopPropagation();
-      const modifiers = {
-        ctrl: e.ctrlKey || e.metaKey,
-        shift: e.shiftKey,
-      };
-      selectItem(item.id, item.type, modifiers, visibleItems);
-      // Close mobile sheet only on non-session items (sessions expand in-place)
-      if (item.type !== 'session' && !modifiers.ctrl && !modifiers.shift) {
-        setMobileSheetOpen(false);
-      }
-    },
-    [item.id, item.type, selectItem, setMobileSheetOpen, visibleItems]
-  );
-
-  const handleToggleExpand = useCallback(
-    (e: React.MouseEvent) => {
-      e.stopPropagation();
-      toggleExpand(item.id);
-    },
-    [item.id, toggleExpand]
-  );
-
-  if (item.type === 'course') {
-    return (
-      <TreeContextMenu item={item}>
-        <TreeRowCourse
-          data={item.data}
-          isSelected={isSelected}
-          isActive={isActive}
-          query={query}
-          isMatched={isMatched}
-          onClick={handleClick}
-        />
-      </TreeContextMenu>
-    );
-  }
-
-  if (item.type === 'session') {
-    const lessonCount = lessonCountMap.get(item.id) ?? 0;
-    return (
-      <TreeContextMenu item={item}>
-        <TreeRowSession
-          data={item.data as Session}
-          lessonCount={lessonCount}
-          isExpanded={isEffectivelyExpanded}
-          isSelected={isSelected}
-          isActive={isActive}
-          query={query}
-          isMatched={isMatched}
-          onClick={handleClick}
-          onToggleExpand={handleToggleExpand}
-        />
-      </TreeContextMenu>
-    );
-  }
-
-  return (
-    <TreeContextMenu item={item}>
-      <TreeRowLesson
-        data={item.data as Lesson}
-        isSelected={isSelected}
-        isActive={isActive}
-        query={query}
-        isMatched={isMatched}
-        onClick={handleClick}
-      />
-    </TreeContextMenu>
-  );
-}
+'use client';
+
+import { useCallback } from 'react';
+
+import { useStructureStore } from './store';
+import { TreeContextMenu } from './tree-context-menu';
+import { TreeRowCourse } from './tree-row-course';
+import { TreeRowLesson } from './tree-row-lesson';
+import { TreeRowSession } from './tree-row-session';
+import type { FlatItem, Lesson, Session } from './types';
+
+interface TreeRowProps {
+  item: FlatItem;
+  isActive: boolean;
+  isSelected: boolean;
+  query: string;
+  isMatched: boolean;
+  isEffectivelyExpanded: boolean;
+  lessonCountMap: Map<string, number>;
+  /** Full ordered visible list — required for SHIFT-range selection. */
+  visibleItems: FlatItem[];
+}
+
+export function TreeRow({
+  item,
+  isActive,
+  isSelected,
+  query,
+  isMatched,
+  isEffectivelyExpanded,
+  lessonCountMap,
+  visibleItems,
+}: TreeRowProps) {
+  const selectItem = useStructureStore((s) => s.selectItem);
+  const toggleExpand = useStructureStore((s) => s.toggleExpand);
+  const setMobileSheetOpen = useStructureStore((s) => s.setMobileSheetOpen);
+
+  const handleClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      const modifiers = {
+        ctrl: e.ctrlKey || e.metaKey,
+        shift: e.shiftKey,
+      };
+      selectItem(item.id, item.type, modifiers, visibleItems);
+      // Close mobile sheet only on non-session items (sessions expand in-place)
+      if (item.type !== 'session' && !modifiers.ctrl && !modifiers.shift) {
+        setMobileSheetOpen(false);
+      }
+    },
+    [item.id, item.type, selectItem, setMobileSheetOpen, visibleItems]
+  );
+
+  const handleToggleExpand = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      toggleExpand(item.id);
+    },
+    [item.id, toggleExpand]
+  );
+
+  if (item.type === 'course') {
+    return (
+      <TreeContextMenu item={item}>
+        <TreeRowCourse
+          data={item.data}
+          isSelected={isSelected}
+          isActive={isActive}
+          query={query}
+          isMatched={isMatched}
+          onClick={handleClick}
+        />
+      </TreeContextMenu>
+    );
+  }
+
+  if (item.type === 'session') {
+    const lessonCount = lessonCountMap.get(item.id) ?? 0;
+    return (
+      <TreeContextMenu item={item}>
+        <TreeRowSession
+          data={item.data as Session}
+          lessonCount={lessonCount}
+          isExpanded={isEffectivelyExpanded}
+          isSelected={isSelected}
+          isActive={isActive}
+          query={query}
+          isMatched={isMatched}
+          onClick={handleClick}
+          onToggleExpand={handleToggleExpand}
+        />
+      </TreeContextMenu>
+    );
+  }
+
+  return (
+    <TreeContextMenu item={item}>
+      <TreeRowLesson
+        data={item.data as Lesson}
+        isSelected={isSelected}
+        isActive={isActive}
+        query={query}
+        isMatched={isMatched}
+        onClick={handleClick}
+      />
+    </TreeContextMenu>
+  );
+}