@hed-hog/lms 0.0.314 → 0.0.316

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

@@ -1,111 +1,111 @@
-'use client';
-
-import { Button } from '@/components/ui/button';
-import { cn } from '@/lib/utils';
-import { ChevronsDownUp, ChevronsUpDown, Loader2, Plus } from 'lucide-react';
-import { forwardRef, useMemo } from 'react';
-import { useCreateSessionMutation } from '../_data/use-course-structure-mutations';
-import { CourseTreeDnd } from './course-tree-dnd';
-import { MultiSelectBar } from './multi-select-bar';
-import { SearchFilter, type SearchFilterHandle } from './search-filter';
-import { useStructureStore } from './store';
-import { buildVisibleItems } from './tree-helpers';
-
-export const CourseTreePanel = forwardRef<SearchFilterHandle>((_, ref) => {
-  const course = useStructureStore((s) => s.course);
-  const sessions = useStructureStore((s) => s.sessions);
-  const lessons = useStructureStore((s) => s.lessons);
-  const expandedIds = useStructureStore((s) => s.expandedIds);
-  const filterQuery = useStructureStore((s) => s.filterQuery);
-  const expandAll = useStructureStore((s) => s.expandAll);
-  const collapseAll = useStructureStore((s) => s.collapseAll);
-
-  const createSession = useCreateSessionMutation();
-
-  const allExpanded =
-    sessions.length > 0 && sessions.every((s) => expandedIds.has(s.id));
-
-  const isFiltering = filterQuery.trim().length > 0;
-
-  // Compute result count only when filter is active (avoids re-work when idle)
-  const resultCount = useMemo(() => {
-    if (!isFiltering) return undefined;
-    const { resultCount: rc } = buildVisibleItems(
-      course,
-      sessions,
-      lessons,
-      expandedIds,
-      filterQuery
-    );
-    return rc;
-  }, [isFiltering, course, sessions, lessons, expandedIds, filterQuery]);
-
-  return (
-    <div className="flex flex-col h-full min-h-0">
-      {/* Toolbar */}
-      <div className="flex items-center gap-1 px-2 pt-2 pb-1.5 border-b shrink-0">
-        <div className="flex-1 min-w-0">
-          <SearchFilter ref={ref} resultCount={resultCount} />
-        </div>
-
-        <Button
-          variant="ghost"
-          size="icon"
-          className={cn(
-            'size-8 shrink-0 transition-colors',
-            isFiltering && 'opacity-40 cursor-not-allowed pointer-events-none'
-          )}
-          title={
-            allExpanded
-              ? 'Recolher tudo (Ctrl+Shift+E)'
-              : 'Expandir tudo (Ctrl+Shift+E)'
-          }
-          aria-label={allExpanded ? 'Recolher tudo' : 'Expandir tudo'}
-          onClick={allExpanded ? collapseAll : expandAll}
-          disabled={isFiltering}
-        >
-          {allExpanded ? (
-            <ChevronsDownUp className="size-3.5" />
-          ) : (
-            <ChevronsUpDown className="size-3.5" />
-          )}
-        </Button>
-
-        <Button
-          variant="ghost"
-          size="icon"
-          className="size-8 shrink-0"
-          title="Nova sessão"
-          aria-label="Nova sessão"
-          disabled={createSession.isPending}
-          onClick={() => createSession.mutate()}
-        >
-          {createSession.isPending ? (
-            <Loader2 className="size-3.5 animate-spin" />
-          ) : (
-            <Plus className="size-3.5" />
-          )}
-        </Button>
-      </div>
-
-      {/* Search results hint */}
-      {isFiltering && resultCount !== undefined && (
-        <div className="px-3 py-1 text-[0.65rem] text-muted-foreground bg-muted/30 border-b shrink-0">
-          {resultCount === 0
-            ? 'Nenhum resultado encontrado'
-            : `${resultCount} resultado${resultCount === 1 ? '' : 's'} encontrado${resultCount === 1 ? '' : 's'}`}
-        </div>
-      )}
-
-      {/* Multi-select action bar (visible when 2+ items selected) */}
-      <MultiSelectBar />
-
-      {/* Virtualised / DnD tree */}
-      <div className="flex-1 min-h-0 overflow-hidden">
-        <CourseTreeDnd />
-      </div>
-    </div>
-  );
-});
-
-CourseTreePanel.displayName = 'CourseTreePanel';
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import { ChevronsDownUp, ChevronsUpDown, Loader2, Plus } from 'lucide-react';
+import { forwardRef, useMemo } from 'react';
+import { useCreateSessionMutation } from '../_data/use-course-structure-mutations';
+import { CourseTreeDnd } from './course-tree-dnd';
+import { MultiSelectBar } from './multi-select-bar';
+import { SearchFilter, type SearchFilterHandle } from './search-filter';
+import { useStructureStore } from './store';
+import { buildVisibleItems } from './tree-helpers';
+
+export const CourseTreePanel = forwardRef<SearchFilterHandle>((_, ref) => {
+  const course = useStructureStore((s) => s.course);
+  const sessions = useStructureStore((s) => s.sessions);
+  const lessons = useStructureStore((s) => s.lessons);
+  const expandedIds = useStructureStore((s) => s.expandedIds);
+  const filterQuery = useStructureStore((s) => s.filterQuery);
+  const expandAll = useStructureStore((s) => s.expandAll);
+  const collapseAll = useStructureStore((s) => s.collapseAll);
+
+  const createSession = useCreateSessionMutation();
+
+  const allExpanded =
+    sessions.length > 0 && sessions.every((s) => expandedIds.has(s.id));
+
+  const isFiltering = filterQuery.trim().length > 0;
+
+  // Compute result count only when filter is active (avoids re-work when idle)
+  const resultCount = useMemo(() => {
+    if (!isFiltering) return undefined;
+    const { resultCount: rc } = buildVisibleItems(
+      course,
+      sessions,
+      lessons,
+      expandedIds,
+      filterQuery
+    );
+    return rc;
+  }, [isFiltering, course, sessions, lessons, expandedIds, filterQuery]);
+
+  return (
+    <div className="flex flex-col h-full min-h-0">
+      {/* Toolbar */}
+      <div className="flex items-center gap-1 px-2 pt-2 pb-1.5 border-b shrink-0">
+        <div className="flex-1 min-w-0">
+          <SearchFilter ref={ref} resultCount={resultCount} />
+        </div>
+
+        <Button
+          variant="ghost"
+          size="icon"
+          className={cn(
+            'size-8 shrink-0 transition-colors',
+            isFiltering && 'opacity-40 cursor-not-allowed pointer-events-none'
+          )}
+          title={
+            allExpanded
+              ? 'Recolher tudo (Ctrl+Shift+E)'
+              : 'Expandir tudo (Ctrl+Shift+E)'
+          }
+          aria-label={allExpanded ? 'Recolher tudo' : 'Expandir tudo'}
+          onClick={allExpanded ? collapseAll : expandAll}
+          disabled={isFiltering}
+        >
+          {allExpanded ? (
+            <ChevronsDownUp className="size-3.5" />
+          ) : (
+            <ChevronsUpDown className="size-3.5" />
+          )}
+        </Button>
+
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-8 shrink-0"
+          title="Nova sessão"
+          aria-label="Nova sessão"
+          disabled={createSession.isPending}
+          onClick={() => createSession.mutate()}
+        >
+          {createSession.isPending ? (
+            <Loader2 className="size-3.5 animate-spin" />
+          ) : (
+            <Plus className="size-3.5" />
+          )}
+        </Button>
+      </div>
+
+      {/* Search results hint */}
+      {isFiltering && resultCount !== undefined && (
+        <div className="px-3 py-1 text-[0.65rem] text-muted-foreground bg-muted/30 border-b shrink-0">
+          {resultCount === 0
+            ? 'Nenhum resultado encontrado'
+            : `${resultCount} resultado${resultCount === 1 ? '' : 's'} encontrado${resultCount === 1 ? '' : 's'}`}
+        </div>
+      )}
+
+      {/* Multi-select action bar (visible when 2+ items selected) */}
+      <MultiSelectBar />
+
+      {/* Virtualised / DnD tree */}
+      <div className="flex-1 min-h-0 overflow-hidden">
+        <CourseTreeDnd />
+      </div>
+    </div>
+  );
+});
+
+CourseTreePanel.displayName = 'CourseTreePanel';

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

@@ -1,134 +1,134 @@
-'use client';
-
-import { useVirtualizer } from '@tanstack/react-virtual';
-import { SearchX } from 'lucide-react';
-import { useCallback, useMemo, useRef } from 'react';
-
-import { useStructureStore } from './store';
-import { buildLessonCountMap, buildVisibleItems } from './tree-helpers';
-import { TreeRow } from './tree-row';
-import type { FlatItem } from './types';
-
-// Row height estimates per node type (px)
-const ROW_HEIGHT: Record<FlatItem['type'], number> = {
-  course: 34,
-  session: 32,
-  lesson: 28,
-};
-
-export function CourseTree() {
-  const course = useStructureStore((s) => s.course);
-  const sessions = useStructureStore((s) => s.sessions);
-  const lessons = useStructureStore((s) => s.lessons);
-  const expandedIds = useStructureStore((s) => s.expandedIds);
-  const filterQuery = useStructureStore((s) => s.filterQuery);
-  const activeItemId = useStructureStore((s) => s.activeItemId);
-  const activeItemType = useStructureStore((s) => s.activeItemType);
-  const selectedIds = useStructureStore((s) => s.selectedIds);
-
-  const scrollRef = useRef<HTMLDivElement>(null);
-
-  // ── Derived state ───────────────────────────────────────────────────────────
-  const { items, matchedIds, expandedBySearch, resultCount } = useMemo(
-    () =>
-      buildVisibleItems(course, sessions, lessons, expandedIds, filterQuery),
-    [course, sessions, lessons, expandedIds, filterQuery]
-  );
-
-  const lessonCountMap = useMemo(() => buildLessonCountMap(lessons), [lessons]);
-
-  const estimateSize = useCallback(
-    (index: number) => ROW_HEIGHT[items[index]?.type ?? 'lesson'] ?? 32,
-    [items]
-  );
-
-  // ── Virtualizer ─────────────────────────────────────────────────────────────
-  // eslint-disable-next-line react-hooks/incompatible-library -- TanStack Virtual returns non-memoizable functions; this is expected and safe here
-  const virtualizer = useVirtualizer({
-    count: items.length,
-    getScrollElement: () => scrollRef.current,
-    estimateSize,
-    overscan: 8,
-  });
-
-  const isSearchActive = filterQuery.trim().length > 0;
-  const isEmpty = items.length === 0;
-
-  return (
-    <div className="flex flex-col h-full min-h-0">
-      {/* Result count bar */}
-      {isSearchActive && !isEmpty && (
-        <div className="px-3 py-1 shrink-0 border-b">
-          <span className="text-[0.65rem] text-muted-foreground">
-            {resultCount === 1 ? '1 resultado' : `${resultCount} resultados`}
-          </span>
-        </div>
-      )}
-
-      {/* Empty state */}
-      {isEmpty && (
-        <div className="flex flex-col items-center justify-center gap-2 py-12 px-4 text-center">
-          <SearchX className="size-8 text-muted-foreground/40" />
-          <p className="text-sm text-muted-foreground">
-            {isSearchActive
-              ? `Nenhum resultado para "${filterQuery.trim()}"`
-              : 'Nenhum item no curso.'}
-          </p>
-        </div>
-      )}
-
-      {/* Virtualised tree */}
-      {!isEmpty && (
-        <div
-          ref={scrollRef}
-          className="overflow-y-auto flex-1 min-h-0"
-          style={{ contain: 'strict' }}
-        >
-          <div
-            style={{
-              height: virtualizer.getTotalSize(),
-              width: '100%',
-              position: 'relative',
-            }}
-          >
-            {virtualizer.getVirtualItems().map((virtualRow) => {
-              const item = items[virtualRow.index];
-              if (!item) return null;
-
-              return (
-                <div
-                  key={virtualRow.key}
-                  data-index={virtualRow.index}
-                  style={{
-                    position: 'absolute',
-                    top: 0,
-                    left: 0,
-                    width: '100%',
-                    height: `${virtualRow.size}px`,
-                    transform: `translateY(${virtualRow.start}px)`,
-                    padding: '1px 4px',
-                  }}
-                >
-                  <TreeRow
-                    item={item}
-                    isActive={
-                      activeItemId === item.id && activeItemType === item.type
-                    }
-                    isSelected={selectedIds.has(`${item.type}:${item.id}`)}
-                    query={filterQuery}
-                    isMatched={matchedIds.has(item.id)}
-                    isEffectivelyExpanded={
-                      expandedIds.has(item.id) || expandedBySearch.has(item.id)
-                    }
-                    lessonCountMap={lessonCountMap}
-                    visibleItems={items}
-                  />
-                </div>
-              );
-            })}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
+'use client';
+
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { SearchX } from 'lucide-react';
+import { useCallback, useMemo, useRef } from 'react';
+
+import { useStructureStore } from './store';
+import { buildLessonCountMap, buildVisibleItems } from './tree-helpers';
+import { TreeRow } from './tree-row';
+import type { FlatItem } from './types';
+
+// Row height estimates per node type (px)
+const ROW_HEIGHT: Record<FlatItem['type'], number> = {
+  course: 34,
+  session: 32,
+  lesson: 28,
+};
+
+export function CourseTree() {
+  const course = useStructureStore((s) => s.course);
+  const sessions = useStructureStore((s) => s.sessions);
+  const lessons = useStructureStore((s) => s.lessons);
+  const expandedIds = useStructureStore((s) => s.expandedIds);
+  const filterQuery = useStructureStore((s) => s.filterQuery);
+  const activeItemId = useStructureStore((s) => s.activeItemId);
+  const activeItemType = useStructureStore((s) => s.activeItemType);
+  const selectedIds = useStructureStore((s) => s.selectedIds);
+
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  // ── Derived state ───────────────────────────────────────────────────────────
+  const { items, matchedIds, expandedBySearch, resultCount } = useMemo(
+    () =>
+      buildVisibleItems(course, sessions, lessons, expandedIds, filterQuery),
+    [course, sessions, lessons, expandedIds, filterQuery]
+  );
+
+  const lessonCountMap = useMemo(() => buildLessonCountMap(lessons), [lessons]);
+
+  const estimateSize = useCallback(
+    (index: number) => ROW_HEIGHT[items[index]?.type ?? 'lesson'] ?? 32,
+    [items]
+  );
+
+  // ── Virtualizer ─────────────────────────────────────────────────────────────
+  // eslint-disable-next-line react-hooks/incompatible-library -- TanStack Virtual returns non-memoizable functions; this is expected and safe here
+  const virtualizer = useVirtualizer({
+    count: items.length,
+    getScrollElement: () => scrollRef.current,
+    estimateSize,
+    overscan: 8,
+  });
+
+  const isSearchActive = filterQuery.trim().length > 0;
+  const isEmpty = items.length === 0;
+
+  return (
+    <div className="flex flex-col h-full min-h-0">
+      {/* Result count bar */}
+      {isSearchActive && !isEmpty && (
+        <div className="px-3 py-1 shrink-0 border-b">
+          <span className="text-[0.65rem] text-muted-foreground">
+            {resultCount === 1 ? '1 resultado' : `${resultCount} resultados`}
+          </span>
+        </div>
+      )}
+
+      {/* Empty state */}
+      {isEmpty && (
+        <div className="flex flex-col items-center justify-center gap-2 py-12 px-4 text-center">
+          <SearchX className="size-8 text-muted-foreground/40" />
+          <p className="text-sm text-muted-foreground">
+            {isSearchActive
+              ? `Nenhum resultado para "${filterQuery.trim()}"`
+              : 'Nenhum item no curso.'}
+          </p>
+        </div>
+      )}
+
+      {/* Virtualised tree */}
+      {!isEmpty && (
+        <div
+          ref={scrollRef}
+          className="overflow-y-auto flex-1 min-h-0"
+          style={{ contain: 'strict' }}
+        >
+          <div
+            style={{
+              height: virtualizer.getTotalSize(),
+              width: '100%',
+              position: 'relative',
+            }}
+          >
+            {virtualizer.getVirtualItems().map((virtualRow) => {
+              const item = items[virtualRow.index];
+              if (!item) return null;
+
+              return (
+                <div
+                  key={virtualRow.key}
+                  data-index={virtualRow.index}
+                  style={{
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    height: `${virtualRow.size}px`,
+                    transform: `translateY(${virtualRow.start}px)`,
+                    padding: '1px 4px',
+                  }}
+                >
+                  <TreeRow
+                    item={item}
+                    isActive={
+                      activeItemId === item.id && activeItemType === item.type
+                    }
+                    isSelected={selectedIds.has(`${item.type}:${item.id}`)}
+                    query={filterQuery}
+                    isMatched={matchedIds.has(item.id)}
+                    isEffectivelyExpanded={
+                      expandedIds.has(item.id) || expandedBySearch.has(item.id)
+                    }
+                    lessonCountMap={lessonCountMap}
+                    visibleItems={items}
+                  />
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}