@hed-hog/lms 0.0.361 → 0.0.365

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

@@ -9,14 +9,16 @@ import {
   ResizablePanel,
   ResizablePanelGroup,
 } from '@/components/ui/resizable';
-import { Sheet, SheetHeader, SheetTitle } from '@/components/ui/sheet';
 import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
+import { Sheet, SheetHeader, SheetTitle } from '@/components/ui/sheet';
 import { useIsMobile } from '@/hooks/use-mobile';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { useIsMutating, useQueryClient } from '@tanstack/react-query';
 import { AlertCircle, Menu, RefreshCw } from 'lucide-react';
 import { useTranslations } from 'next-intl';
+import { useRouter, useSearchParams } from 'next/navigation';
 
+import { useLmsRealtimeRefresh } from '../../_lib/hooks/use-lms-realtime-refresh';
 import { ConfirmDialog } from './structure/_components/confirm-dialog';
 import { CourseTreePanel } from './structure/_components/course-tree-panel';
 import { CourseTreeSkeleton } from './structure/_components/course-tree-skeleton';
@@ -37,7 +39,6 @@ import {
   usePasteSessionsMutation,
 } from './structure/_data/use-course-structure-mutations';
 import { useCourseStructureQuery } from './structure/_data/use-course-structure-query';
-import { useLmsRealtimeRefresh } from '../../_lib/hooks/use-lms-realtime-refresh';
 
 interface Props {
   params: Promise<{ id: string }>;
@@ -60,6 +61,8 @@ export default function CourseStructurePage({ params }: Props) {
   const isMobile = useIsMobile();
   const { request } = useApp();
   const queryClient = useQueryClient();
+  const router = useRouter();
+  const searchParams = useSearchParams();
 
   const { data: courseSummary } = useQuery<ApiCourseSummary>({
     queryKey: ['lms-course-detail', id],
@@ -85,6 +88,10 @@ export default function CourseStructurePage({ params }: Props) {
 
   const setStructureFromApi = useStructureStore((s) => s.setStructureFromApi);
   const setCourseId = useStructureStore((s) => s.setCourseId);
+  const selectItem = useStructureStore((s) => s.selectItem);
+
+  const restoredFromUrl = useRef(false);
+  const suppressNextSyncRef = useRef(false);
 
   useEffect(() => {
     setCourseId(id);
@@ -126,6 +133,31 @@ export default function CourseStructurePage({ params }: Props) {
         sessions: apiSessions,
         lessons: apiLessons,
       });
+
+      if (!restoredFromUrl.current) {
+        restoredFromUrl.current = true;
+        const sel = searchParams.get('sel');
+        const type = searchParams.get('type') as
+          | 'course'
+          | 'session'
+          | 'lesson'
+          | null;
+        if (
+          sel &&
+          (type === 'course' || type === 'session' || type === 'lesson')
+        ) {
+          const exists =
+            type === 'course'
+              ? mergedCourse?.id === sel
+              : type === 'session'
+                ? apiSessions.some((s) => s.id === sel)
+                : apiLessons.some((l) => l.id === sel);
+          if (exists) {
+            suppressNextSyncRef.current = true;
+            selectItem(sel, type);
+          }
+        }
+      }
     }
   }, [
     apiCourse,
@@ -159,6 +191,33 @@ export default function CourseStructurePage({ params }: Props) {
   const copiedType = useStructureStore((s) => s.copiedType);
   const copiedIds = useStructureStore((s) => s.copiedIds);
 
+  // ── URL sync: selection → URL ──────────────────────────────────────────────
+  useEffect(() => {
+    if (!restoredFromUrl.current) return;
+    if (suppressNextSyncRef.current) {
+      suppressNextSyncRef.current = false;
+      return;
+    }
+    const params = new URLSearchParams(searchParams.toString());
+    if (activeItemId && activeItemType) {
+      params.set('sel', activeItemId);
+      params.set('type', activeItemType);
+    }
+    params.delete('tab');
+    router.replace(`?${params.toString()}`, { scroll: false });
+  }, [activeItemId, activeItemType]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const handleTabChange = useCallback(
+    (tab: string) => {
+      const params = new URLSearchParams(searchParams.toString());
+      params.set('tab', tab);
+      router.replace(`?${params.toString()}`, { scroll: false });
+    },
+    [router, searchParams]
+  );
+
+  const defaultTab = searchParams.get('tab') ?? undefined;
+
   useCourseStructureShortcuts({
     searchRef,
     detailPanelRef,
@@ -249,7 +308,7 @@ export default function CourseStructurePage({ params }: Props) {
                 <div className="flex flex-col items-center justify-center h-full gap-3 p-4 text-center">
                   <AlertCircle className="size-8 text-destructive" />
                   <p className="text-sm text-muted-foreground">
-                    Não foi possível carregar a estrutura do curso.
+                    {t('error.loadFailed')}
                   </p>
                   <Button
                     variant="outline"
@@ -258,7 +317,7 @@ export default function CourseStructurePage({ params }: Props) {
                     className="gap-2"
                   >
                     <RefreshCw className="size-3.5" />
-                    Tentar novamente
+                    {t('error.tryAgain')}
                   </Button>
                 </div>
               ) : (
@@ -277,7 +336,10 @@ export default function CourseStructurePage({ params }: Props) {
                 className="flex flex-col h-full min-h-0"
               >
                 <div className="h-full min-h-0">
-                  <DetailPanel />
+                  <DetailPanel
+                    defaultTab={defaultTab}
+                    onTabChange={handleTabChange}
+                  />
                 </div>
               </div>
             </ResizablePanel>
@@ -305,7 +367,10 @@ export default function CourseStructurePage({ params }: Props) {
             className="flex-1 min-h-0 border rounded-lg overflow-hidden"
           >
             <div className="h-full min-h-0">
-              <DetailPanel />
+              <DetailPanel
+                defaultTab={defaultTab}
+                onTabChange={handleTabChange}
+              />
             </div>
           </div>
 
@@ -327,7 +392,7 @@ export default function CourseStructurePage({ params }: Props) {
                   <div className="flex flex-col items-center justify-center h-full gap-3 p-4 text-center">
                     <AlertCircle className="size-8 text-destructive" />
                     <p className="text-sm text-muted-foreground">
-                      Não foi possível carregar a estrutura do curso.
+                      {t('error.loadFailed')}
                     </p>
                     <Button
                       variant="outline"
@@ -336,7 +401,7 @@ export default function CourseStructurePage({ params }: Props) {
                       className="gap-2"
                     >
                       <RefreshCw className="size-3.5" />
-                      Tentar novamente
+                      {t('error.tryAgain')}
                     </Button>
                   </div>
                 ) : (

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

@@ -0,0 +1,420 @@
+'use client';
+
+import { useState } from 'react';
+import { toast } from 'sonner';
+import {
+  AlignLeft,
+  AlignRight,
+  Download,
+  FileArchive,
+  Info,
+  Loader2,
+  Monitor,
+  Moon,
+  PieChart,
+  Sun,
+  Type,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
+import {
+  Sheet,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import {
+  ScormVisualSettings,
+  useCreateCourseExportMutation,
+} from '../_data/use-course-exports';
+
+// ── Color presets ────────────────────────────────────────────
+const PRESET_COLORS = [
+  '#2563eb',
+  '#4338ca',
+  '#7c3aed',
+  '#e11d48',
+  '#ea580c',
+  '#059669',
+  '#0891b2',
+  '#475569',
+];
+
+const DEFAULT_VISUAL: Required<ScormVisualSettings> = {
+  primaryColor: '#2563eb',
+  fontFamily: 'system',
+  fontSize: 'md',
+  sidebarWidth: 280,
+  sidebarPosition: 'left',
+  progressStyle: 'bar',
+  sidebarTheme: 'light',
+};
+
+// ── Segmented control ────────────────────────────────────────
+type SegOption<T extends string> = {
+  label: string;
+  value: T;
+  icon?: React.ReactNode;
+};
+
+function Seg<T extends string>({
+  value,
+  onChange,
+  options,
+}: {
+  value: T;
+  onChange: (v: T) => void;
+  options: SegOption<T>[];
+}) {
+  return (
+    <div className="flex rounded-md border overflow-hidden bg-background">
+      {options.map((opt, i) => (
+        <button
+          key={opt.value}
+          type="button"
+          onClick={() => onChange(opt.value)}
+          className={cn(
+            'flex items-center gap-1.5 flex-1 justify-center px-2.5 py-1.5 text-xs font-medium transition-colors',
+            i < options.length - 1 && 'border-r',
+            value === opt.value
+              ? 'bg-primary text-primary-foreground'
+              : 'text-muted-foreground hover:bg-muted/60',
+          )}
+        >
+          {opt.icon}
+          {opt.label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+// ── Props ─────────────────────────────────────────────────────
+interface CourseExportSheetProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  courseId: string;
+  sessionCount: number;
+  videoLessonCount: number;
+  estimatedSizeMb?: number | null;
+}
+
+function formatMb(mb: number): string {
+  if (mb >= 1024) return `${(mb / 1024).toFixed(1)} GB`;
+  return `${mb.toFixed(0)} MB`;
+}
+
+// ── Component ─────────────────────────────────────────────────
+export function CourseExportSheet({
+  open,
+  onOpenChange,
+  courseId,
+  sessionCount,
+  videoLessonCount,
+  estimatedSizeMb,
+}: CourseExportSheetProps) {
+  const [visual, setVisual] = useState<Required<ScormVisualSettings>>(DEFAULT_VISUAL);
+  const createExport = useCreateCourseExportMutation(courseId);
+
+  const setV = <K extends keyof ScormVisualSettings>(
+    key: K,
+    value: Required<ScormVisualSettings>[K],
+  ) => setVisual((prev) => ({ ...prev, [key]: value }));
+
+  const handleConfirm = async () => {
+    try {
+      await createExport.mutateAsync({
+        format: 'scorm_1_2',
+        visualSettings: visual,
+      });
+      onOpenChange(false);
+      toast.success(
+        'Exportação SCORM 1.2 iniciada. Acompanhe o progresso nas notificações.',
+      );
+    } catch {
+      toast.error('Erro ao iniciar exportação. Tente novamente.');
+    }
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <ResizableSheetContent
+        sheetId="lms-course-export-scorm12-sheet"
+        defaultWidth={540}
+        minWidth={420}
+        maxWidth={780}
+      >
+        <SheetHeader>
+          <SheetTitle className="flex items-center gap-2">
+            <FileArchive className="size-4" />
+            Exportar para SCORM 1.2
+          </SheetTitle>
+          <SheetDescription>
+            Gera um pacote SCORM 1.2 com as aulas de vídeo do curso. O
+            processamento é feito em background.
+          </SheetDescription>
+        </SheetHeader>
+
+        <div className="flex flex-col gap-4 px-4 py-4">
+
+          {/* ── Stats ── */}
+          <div className="rounded-lg border bg-muted/30 p-3 flex flex-col gap-2">
+            <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+              Conteúdo a exportar
+            </p>
+            <div className="flex flex-wrap gap-2">
+              <Badge variant="secondary">
+                {sessionCount} {sessionCount === 1 ? 'sessão' : 'sessões'}
+              </Badge>
+              <Badge variant="secondary">
+                {videoLessonCount}{' '}
+                {videoLessonCount === 1 ? 'aula de vídeo' : 'aulas de vídeo'}
+              </Badge>
+              {estimatedSizeMb != null && (
+                <Badge variant="outline">~{formatMb(estimatedSizeMb)}</Badge>
+              )}
+            </div>
+            {videoLessonCount === 0 && (
+              <p className="text-xs text-destructive mt-1">
+                Este curso não possui aulas de vídeo. Não é possível gerar o
+                pacote SCORM.
+              </p>
+            )}
+          </div>
+
+          {estimatedSizeMb != null && estimatedSizeMb > 500 && (
+            <Alert>
+              <Info className="size-4" />
+              <AlertDescription className="text-xs">
+                O pacote gerado pode ter aproximadamente{' '}
+                <strong>{formatMb(estimatedSizeMb)}</strong>. Certifique-se que
+                seu LMS suporta pacotes desse tamanho.
+              </AlertDescription>
+            </Alert>
+          )}
+
+          {/* ── Appearance ── */}
+          <div className="rounded-lg border overflow-hidden">
+            <div className="flex items-center gap-2 px-3 py-2.5 border-b bg-muted/20">
+              <Monitor className="size-4 text-muted-foreground" />
+              <span className="text-sm font-medium">Personalizar aparência</span>
+            </div>
+
+            <div className="px-3 pt-3 pb-4 flex flex-col gap-4">
+
+              {/* Primary color */}
+              <div className="flex flex-col gap-2">
+                <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
+                  Cor Principal
+                </Label>
+                <div className="flex flex-wrap items-center gap-2">
+                  {PRESET_COLORS.map((c) => (
+                    <button
+                      key={c}
+                      type="button"
+                      onClick={() => setV('primaryColor', c)}
+                      title={c}
+                      className={cn(
+                        'w-7 h-7 rounded-full border-2 transition-all hover:scale-110 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                        visual.primaryColor === c
+                          ? 'border-foreground ring-2 ring-offset-1 ring-foreground/30 scale-110'
+                          : 'border-transparent',
+                      )}
+                      style={{ background: c }}
+                    />
+                  ))}
+                  {/* Custom color picker */}
+                  <label className="cursor-pointer" title="Cor personalizada">
+                    <input
+                      type="color"
+                      value={visual.primaryColor}
+                      onChange={(e) => setV('primaryColor', e.target.value)}
+                      className="sr-only"
+                    />
+                    <div
+                      className={cn(
+                        'w-7 h-7 rounded-full border-2 border-dashed transition-all hover:scale-110',
+                        !PRESET_COLORS.includes(visual.primaryColor)
+                          ? 'border-foreground ring-2 ring-offset-1 ring-foreground/30 scale-110'
+                          : 'border-muted-foreground/50',
+                      )}
+                      style={{ background: visual.primaryColor }}
+                    />
+                  </label>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <div
+                    className="w-3 h-3 rounded-sm border border-border/60 shrink-0"
+                    style={{ background: visual.primaryColor }}
+                  />
+                  <span className="text-xs font-mono text-muted-foreground">
+                    {visual.primaryColor.toUpperCase()}
+                  </span>
+                </div>
+              </div>
+
+              {/* Font family */}
+              <div className="flex flex-col gap-2">
+                <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wide flex items-center gap-1.5">
+                  <Type className="size-3" />
+                  Fonte
+                </Label>
+                <Seg
+                  value={visual.fontFamily as 'system' | 'humanist' | 'serif' | 'mono'}
+                  onChange={(v) => setV('fontFamily', v)}
+                  options={[
+                    { label: 'Sistema', value: 'system' as const },
+                    { label: 'Humanista', value: 'humanist' as const },
+                    { label: 'Serifada', value: 'serif' as const },
+                    { label: 'Mono', value: 'mono' as const },
+                  ]}
+                />
+              </div>
+
+              {/* Font size + Sidebar width */}
+              <div className="grid grid-cols-2 gap-3">
+                <div className="flex flex-col gap-2">
+                  <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
+                    Tamanho da fonte
+                  </Label>
+                  <Seg
+                    value={visual.fontSize as 'sm' | 'md' | 'lg'}
+                    onChange={(v) => setV('fontSize', v)}
+                    options={[
+                      { label: 'Peq.', value: 'sm' as const },
+                      { label: 'Méd.', value: 'md' as const },
+                      { label: 'Grd.', value: 'lg' as const },
+                    ]}
+                  />
+                </div>
+                <div className="flex flex-col gap-2">
+                  <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
+                    Largura do painel —{' '}
+                    <span className="text-foreground font-normal normal-case">
+                      {visual.sidebarWidth}px
+                    </span>
+                  </Label>
+                  <div className="flex items-center gap-2 pt-1">
+                    <span className="text-xs text-muted-foreground">200</span>
+                    <input
+                      type="range"
+                      min={200}
+                      max={420}
+                      step={10}
+                      value={visual.sidebarWidth}
+                      onChange={(e) => setV('sidebarWidth', Number(e.target.value))}
+                      className="flex-1 h-1.5 rounded-full cursor-pointer accent-primary"
+                    />
+                    <span className="text-xs text-muted-foreground">420</span>
+                  </div>
+                </div>
+              </div>
+
+              {/* Sidebar position + Progress style */}
+              <div className="grid grid-cols-2 gap-3">
+                <div className="flex flex-col gap-2">
+                  <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
+                    Posição do painel
+                  </Label>
+                  <Seg
+                    value={visual.sidebarPosition as 'left' | 'right'}
+                    onChange={(v) => setV('sidebarPosition', v)}
+                    options={[
+                      {
+                        label: 'Esq.',
+                        value: 'left' as const,
+                        icon: <AlignLeft className="size-3" />,
+                      },
+                      {
+                        label: 'Dir.',
+                        value: 'right' as const,
+                        icon: <AlignRight className="size-3" />,
+                      },
+                    ]}
+                  />
+                </div>
+                <div className="flex flex-col gap-2">
+                  <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
+                    Indicador de progresso
+                  </Label>
+                  <Seg
+                    value={visual.progressStyle as 'bar' | 'pie'}
+                    onChange={(v) => setV('progressStyle', v)}
+                    options={[
+                      { label: 'Barra', value: 'bar' as const },
+                      {
+                        label: 'Pizza',
+                        value: 'pie' as const,
+                        icon: <PieChart className="size-3" />,
+                      },
+                    ]}
+                  />
+                </div>
+              </div>
+
+              {/* Sidebar theme */}
+              <div className="flex flex-col gap-2">
+                <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
+                  Tema do painel
+                </Label>
+                <Seg
+                  value={visual.sidebarTheme as 'light' | 'dark'}
+                  onChange={(v) => setV('sidebarTheme', v)}
+                  options={[
+                    {
+                      label: 'Claro',
+                      value: 'light' as const,
+                      icon: <Sun className="size-3" />,
+                    },
+                    {
+                      label: 'Escuro',
+                      value: 'dark' as const,
+                      icon: <Moon className="size-3" />,
+                    },
+                  ]}
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* ── Info ── */}
+          <div className="rounded-lg border bg-muted/20 p-3">
+            <p className="text-xs text-muted-foreground">
+              <strong>Padrão SCORM 1.2</strong> — Compatível com a maioria dos
+              sistemas de gestão de aprendizagem (LMS). Os arquivos de vídeo são
+              incluídos no pacote e o progresso de cada aula é rastreado
+              automaticamente.
+            </p>
+          </div>
+        </div>
+
+        <SheetFooter>
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            disabled={createExport.isPending}
+          >
+            Cancelar
+          </Button>
+          <Button
+            onClick={handleConfirm}
+            disabled={createExport.isPending || videoLessonCount === 0}
+            className="gap-2"
+          >
+            {createExport.isPending ? (
+              <Loader2 className="size-4 animate-spin" />
+            ) : (
+              <Download className="size-4" />
+            )}
+            Exportar SCORM 1.2
+          </Button>
+        </SheetFooter>
+      </ResizableSheetContent>
+    </Sheet>
+  );
+}