@hed-hog/lms 0.0.312 → 0.0.315

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

@@ -1,96 +1,96 @@
-'use client';
-
-import { Search, X } from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import {
-  forwardRef,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from 'react';
-
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { cn } from '@/lib/utils';
-import { useDebounce } from '@/hooks/use-debounce';
-import { useStructureStore } from './store';
-
-export interface SearchFilterHandle {
-  focus(): void;
-  clear(): void;
-}
-
-interface SearchFilterProps {
-  /** Number of matching items to show alongside the input. */
-  resultCount?: number;
-}
-
-export const SearchFilter = forwardRef<SearchFilterHandle, SearchFilterProps>(
-  ({ resultCount }, ref) => {
-    const t = useTranslations('lms.CoursesPage.StructurePage');
-    const setFilter = useStructureStore((s) => s.setFilter);
-    const [value, setValue] = useState('');
-    const debounced = useDebounce(value, 250);
-    const inputRef = useRef<HTMLInputElement>(null);
-
-    useEffect(() => {
-      setFilter(debounced);
-    }, [debounced, setFilter]);
-
-    useImperativeHandle(ref, () => ({
-      focus() {
-        inputRef.current?.focus();
-        inputRef.current?.select();
-      },
-      clear() {
-        setValue('');
-      },
-    }));
-
-    const isActive = value.trim().length > 0;
-
-    return (
-      <div className="relative">
-        <Search
-          className={cn(
-            'absolute left-2.5 top-1/2 -translate-y-1/2 size-3.5 pointer-events-none transition-colors',
-            isActive ? 'text-primary' : 'text-muted-foreground'
-          )}
-          aria-hidden
-        />
-        <Input
-          ref={inputRef}
-          value={value}
-          onChange={(e) => setValue(e.target.value)}
-          placeholder={t('search.placeholder')}
-          className={cn(
-            'pl-8 h-8 text-sm transition-colors',
-            isActive ? 'pr-16 ring-1 ring-primary/30' : 'pr-2'
-          )}
-          aria-label="Buscar sessões e aulas"
-        />
-        {isActive && (
-          <div className="absolute right-1 top-1/2 -translate-y-1/2 flex items-center gap-1">
-            {resultCount !== undefined && (
-              <span className="text-[0.6rem] text-muted-foreground tabular-nums leading-none">
-                {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>
-          </div>
-        )}
-      </div>
-    );
-  }
-);
-
+'use client';
+
+import { Search, X } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { cn } from '@/lib/utils';
+import { useDebounce } from '@/hooks/use-debounce';
+import { useStructureStore } from './store';
+
+export interface SearchFilterHandle {
+  focus(): void;
+  clear(): void;
+}
+
+interface SearchFilterProps {
+  /** Number of matching items to show alongside the input. */
+  resultCount?: number;
+}
+
+export const SearchFilter = forwardRef<SearchFilterHandle, SearchFilterProps>(
+  ({ resultCount }, ref) => {
+    const t = useTranslations('lms.CoursesPage.StructurePage');
+    const setFilter = useStructureStore((s) => s.setFilter);
+    const [value, setValue] = useState('');
+    const debounced = useDebounce(value, 250);
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    useEffect(() => {
+      setFilter(debounced);
+    }, [debounced, setFilter]);
+
+    useImperativeHandle(ref, () => ({
+      focus() {
+        inputRef.current?.focus();
+        inputRef.current?.select();
+      },
+      clear() {
+        setValue('');
+      },
+    }));
+
+    const isActive = value.trim().length > 0;
+
+    return (
+      <div className="relative">
+        <Search
+          className={cn(
+            'absolute left-2.5 top-1/2 -translate-y-1/2 size-3.5 pointer-events-none transition-colors',
+            isActive ? 'text-primary' : 'text-muted-foreground'
+          )}
+          aria-hidden
+        />
+        <Input
+          ref={inputRef}
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          placeholder={t('search.placeholder')}
+          className={cn(
+            'pl-8 h-8 text-sm transition-colors',
+            isActive ? 'pr-16 ring-1 ring-primary/30' : 'pr-2'
+          )}
+          aria-label="Buscar sessões e aulas"
+        />
+        {isActive && (
+          <div className="absolute right-1 top-1/2 -translate-y-1/2 flex items-center gap-1">
+            {resultCount !== undefined && (
+              <span className="text-[0.6rem] text-muted-foreground tabular-nums leading-none">
+                {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>
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
 SearchFilter.displayName = 'SearchFilter';

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

@@ -1,74 +1,74 @@
-'use client';
-
-import { FolderOpen } from 'lucide-react';
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import { cn } from '@/lib/utils';
-import { useStructureStore } from './store';
-
-export function SessionPickerDialog() {
-  const sessions           = useStructureStore((s) => s.sessions);
-  const lessons            = useStructureStore((s) => s.lessons);
-  const sessionPickerDialog = useStructureStore((s) => s.sessionPickerDialog);
-  const closeSessionPicker = useStructureStore((s) => s.closeSessionPicker);
-
-  const sorted = [...sessions].sort((a, b) => a.order - b.order);
-  const visibleSessions = sorted.filter(
-    (ss) => ss.id !== sessionPickerDialog.excludeSessionId
-  );
-
-  function handlePick(sessionId: string) {
-    sessionPickerDialog.onPick?.(sessionId);
-    closeSessionPicker();
-  }
-
-  return (
-    <Dialog
-      open={sessionPickerDialog.open}
-      onOpenChange={(open) => !open && closeSessionPicker()}
-    >
-      <DialogContent className="max-w-xs p-0 gap-0">
-        <DialogHeader className="px-4 py-3 border-b">
-          <DialogTitle className="text-sm flex items-center gap-2">
-            <FolderOpen className="size-4 text-muted-foreground" />
-            {sessionPickerDialog.title}
-          </DialogTitle>
-        </DialogHeader>
-
-        <ScrollArea className="max-h-72">
-          <div className="flex flex-col p-2 gap-0.5">
-            {visibleSessions.length === 0 && (
-              <p className="text-xs text-muted-foreground text-center py-4">
-                Nenhuma sessão disponível.
-              </p>
-            )}
-            {visibleSessions.map((ss) => {
-              const count = lessons.filter((l) => l.sessionId === ss.id).length;
-              return (
-                <button
-                  key={ss.id}
-                  onClick={() => handlePick(ss.id)}
-                  className={cn(
-                    'flex items-center gap-2 px-2.5 py-2 rounded-md text-left text-sm',
-                    'hover:bg-accent transition-colors cursor-pointer'
-                  )}
-                >
-                  <FolderOpen className="size-3.5 shrink-0 text-muted-foreground" />
-                  <span className="flex-1 truncate font-medium">{ss.title}</span>
-                  <span className="text-[0.65rem] text-muted-foreground shrink-0">
-                    {count} aulas
-                  </span>
-                </button>
-              );
-            })}
-          </div>
-        </ScrollArea>
-      </DialogContent>
-    </Dialog>
-  );
+'use client';
+
+import { FolderOpen } from 'lucide-react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { cn } from '@/lib/utils';
+import { useStructureStore } from './store';
+
+export function SessionPickerDialog() {
+  const sessions           = useStructureStore((s) => s.sessions);
+  const lessons            = useStructureStore((s) => s.lessons);
+  const sessionPickerDialog = useStructureStore((s) => s.sessionPickerDialog);
+  const closeSessionPicker = useStructureStore((s) => s.closeSessionPicker);
+
+  const sorted = [...sessions].sort((a, b) => a.order - b.order);
+  const visibleSessions = sorted.filter(
+    (ss) => ss.id !== sessionPickerDialog.excludeSessionId
+  );
+
+  function handlePick(sessionId: string) {
+    sessionPickerDialog.onPick?.(sessionId);
+    closeSessionPicker();
+  }
+
+  return (
+    <Dialog
+      open={sessionPickerDialog.open}
+      onOpenChange={(open) => !open && closeSessionPicker()}
+    >
+      <DialogContent className="max-w-xs p-0 gap-0">
+        <DialogHeader className="px-4 py-3 border-b">
+          <DialogTitle className="text-sm flex items-center gap-2">
+            <FolderOpen className="size-4 text-muted-foreground" />
+            {sessionPickerDialog.title}
+          </DialogTitle>
+        </DialogHeader>
+
+        <ScrollArea className="max-h-72">
+          <div className="flex flex-col p-2 gap-0.5">
+            {visibleSessions.length === 0 && (
+              <p className="text-xs text-muted-foreground text-center py-4">
+                Nenhuma sessão disponível.
+              </p>
+            )}
+            {visibleSessions.map((ss) => {
+              const count = lessons.filter((l) => l.sessionId === ss.id).length;
+              return (
+                <button
+                  key={ss.id}
+                  onClick={() => handlePick(ss.id)}
+                  className={cn(
+                    'flex items-center gap-2 px-2.5 py-2 rounded-md text-left text-sm',
+                    'hover:bg-accent transition-colors cursor-pointer'
+                  )}
+                >
+                  <FolderOpen className="size-3.5 shrink-0 text-muted-foreground" />
+                  <span className="flex-1 truncate font-medium">{ss.title}</span>
+                  <span className="text-[0.65rem] text-muted-foreground shrink-0">
+                    {count} aulas
+                  </span>
+                </button>
+              );
+            })}
+          </div>
+        </ScrollArea>
+      </DialogContent>
+    </Dialog>
+  );
 }

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

@@ -1,136 +1,136 @@
-'use client';
-
-import { Keyboard } from 'lucide-react';
-
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import { Separator } from '@/components/ui/separator';
-
-// ── Data ──────────────────────────────────────────────────────────────────────
-
-const SHORTCUT_GROUPS: {
-  heading: string;
-  items: { keys: string[]; description: string }[];
-}[] = [
-  {
-    heading: 'Navegação',
-    items: [
-      { keys: ['↑', '↓'], description: 'Navegar entre itens' },
-      { keys: ['→'], description: 'Expandir sessão selecionada' },
-      { keys: ['←'], description: 'Recolher sessão / ir para pai' },
-      { keys: ['Enter'], description: 'Focar primeiro campo do editor' },
-    ],
-  },
-  {
-    heading: 'Ações',
-    items: [
-      { keys: ['Ctrl', 'S'], description: 'Salvar formulário do painel' },
-      { keys: ['Ctrl', 'N'], description: 'Criar nova sessão ou aula' },
-      { keys: ['Ctrl', 'C'], description: 'Copiar item selecionado' },
-      { keys: ['Ctrl', 'V'], description: 'Colar no contexto atual' },
-      { keys: ['Ctrl', 'D'], description: 'Duplicar item' },
-      { keys: ['Delete'], description: 'Excluir item(ns) selecionado(s)' },
-    ],
-  },
-  {
-    heading: 'Busca & Interface',
-    items: [
-      { keys: ['Ctrl', 'F'], description: 'Focar campo de busca' },
-      { keys: ['Ctrl', '/'], description: 'Abrir ajuda de atalhos' },
-      { keys: ['Esc'], description: 'Limpar busca / seleção / foco' },
-    ],
-  },
-];
-
-// ── Component ─────────────────────────────────────────────────────────────────
-
-interface ShortcutsHelpProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-}
-
-export function ShortcutsHelp({ open, onOpenChange }: ShortcutsHelpProps) {
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-sm">
-        <DialogHeader>
-          <DialogTitle className="flex items-center gap-2">
-            <Keyboard className="size-4" />
-            Atalhos de teclado
-          </DialogTitle>
-        </DialogHeader>
-
-        <div className="flex flex-col gap-4 mt-1">
-          {SHORTCUT_GROUPS.map((group, gi) => (
-            <div key={gi}>
-              <p className="text-[0.65rem] font-semibold uppercase tracking-wider text-muted-foreground mb-2">
-                {group.heading}
-              </p>
-              <div className="flex flex-col gap-1.5">
-                {group.items.map(({ keys, description }, ki) => (
-                  <div
-                    key={ki}
-                    className="flex items-center justify-between gap-3"
-                  >
-                    <span className="text-sm text-muted-foreground">
-                      {description}
-                    </span>
-                    <div className="flex items-center gap-1 shrink-0">
-                      {keys.map((k, i) => (
-                        <Badge
-                          key={i}
-                          variant="outline"
-                          className="h-5 px-1.5 text-[0.65rem] font-mono font-medium"
-                        >
-                          {k}
-                        </Badge>
-                      ))}
-                    </div>
-                  </div>
-                ))}
-              </div>
-              {gi < SHORTCUT_GROUPS.length - 1 && (
-                <Separator className="mt-3" />
-              )}
-            </div>
-          ))}
-        </div>
-
-        <p className="text-[0.65rem] text-muted-foreground mt-1">
-          Atalhos são desativados quando o foco está em inputs, exceto Ctrl+S,
-          Ctrl+F e Ctrl+/ que funcionam em qualquer contexto.
-        </p>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-/**
- * Convenience trigger button — renders standalone when no external state is needed.
- */
-export function ShortcutsHelpTrigger({ onOpen }: { onOpen: () => void }) {
-  return (
-    <Button
-      variant="ghost"
-      size="sm"
-      className="h-8 gap-1.5 text-xs text-muted-foreground hover:text-foreground"
-      onClick={onOpen}
-      title="Atalhos de teclado (Ctrl+/)"
-    >
-      <Keyboard className="size-3.5" />
-      Atalhos
-      <Badge
-        variant="outline"
-        className="h-4 px-1 text-[0.6rem] font-mono ml-0.5"
-      >
-        Ctrl+/
-      </Badge>
-    </Button>
-  );
-}
+'use client';
+
+import { Keyboard } from 'lucide-react';
+
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Separator } from '@/components/ui/separator';
+
+// ── Data ──────────────────────────────────────────────────────────────────────
+
+const SHORTCUT_GROUPS: {
+  heading: string;
+  items: { keys: string[]; description: string }[];
+}[] = [
+  {
+    heading: 'Navegação',
+    items: [
+      { keys: ['↑', '↓'], description: 'Navegar entre itens' },
+      { keys: ['→'], description: 'Expandir sessão selecionada' },
+      { keys: ['←'], description: 'Recolher sessão / ir para pai' },
+      { keys: ['Enter'], description: 'Focar primeiro campo do editor' },
+    ],
+  },
+  {
+    heading: 'Ações',
+    items: [
+      { keys: ['Ctrl', 'S'], description: 'Salvar formulário do painel' },
+      { keys: ['Ctrl', 'N'], description: 'Criar nova sessão ou aula' },
+      { keys: ['Ctrl', 'C'], description: 'Copiar item selecionado' },
+      { keys: ['Ctrl', 'V'], description: 'Colar no contexto atual' },
+      { keys: ['Ctrl', 'D'], description: 'Duplicar item' },
+      { keys: ['Delete'], description: 'Excluir item(ns) selecionado(s)' },
+    ],
+  },
+  {
+    heading: 'Busca & Interface',
+    items: [
+      { keys: ['Ctrl', 'F'], description: 'Focar campo de busca' },
+      { keys: ['Ctrl', '/'], description: 'Abrir ajuda de atalhos' },
+      { keys: ['Esc'], description: 'Limpar busca / seleção / foco' },
+    ],
+  },
+];
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+interface ShortcutsHelpProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function ShortcutsHelp({ open, onOpenChange }: ShortcutsHelpProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-sm">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Keyboard className="size-4" />
+            Atalhos de teclado
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-4 mt-1">
+          {SHORTCUT_GROUPS.map((group, gi) => (
+            <div key={gi}>
+              <p className="text-[0.65rem] font-semibold uppercase tracking-wider text-muted-foreground mb-2">
+                {group.heading}
+              </p>
+              <div className="flex flex-col gap-1.5">
+                {group.items.map(({ keys, description }, ki) => (
+                  <div
+                    key={ki}
+                    className="flex items-center justify-between gap-3"
+                  >
+                    <span className="text-sm text-muted-foreground">
+                      {description}
+                    </span>
+                    <div className="flex items-center gap-1 shrink-0">
+                      {keys.map((k, i) => (
+                        <Badge
+                          key={i}
+                          variant="outline"
+                          className="h-5 px-1.5 text-[0.65rem] font-mono font-medium"
+                        >
+                          {k}
+                        </Badge>
+                      ))}
+                    </div>
+                  </div>
+                ))}
+              </div>
+              {gi < SHORTCUT_GROUPS.length - 1 && (
+                <Separator className="mt-3" />
+              )}
+            </div>
+          ))}
+        </div>
+
+        <p className="text-[0.65rem] text-muted-foreground mt-1">
+          Atalhos são desativados quando o foco está em inputs, exceto Ctrl+S,
+          Ctrl+F e Ctrl+/ que funcionam em qualquer contexto.
+        </p>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+/**
+ * Convenience trigger button — renders standalone when no external state is needed.
+ */
+export function ShortcutsHelpTrigger({ onOpen }: { onOpen: () => void }) {
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      className="h-8 gap-1.5 text-xs text-muted-foreground hover:text-foreground"
+      onClick={onOpen}
+      title="Atalhos de teclado (Ctrl+/)"
+    >
+      <Keyboard className="size-3.5" />
+      Atalhos
+      <Badge
+        variant="outline"
+        className="h-4 px-1 text-[0.6rem] font-mono ml-0.5"
+      >
+        Ctrl+/
+      </Badge>
+    </Button>
+  );
+}