@academy-sdk/sdk 0.1.0 → 0.2.0

package/src/components/organisms/LearnerSidebar.tsx

@@ -0,0 +1,148 @@
+'use client';
+
+import { BookOpen, GraduationCap, MessageSquare, ClipboardCheck, UserCircle, Settings, LogOut, ChevronLeft, ChevronRight } from 'lucide-react';
+import { cn } from '../utils';
+import { Button } from '../atoms/Button';
+import { useSDK } from '../../hooks/sdk-context';
+
+export interface SidebarItem {
+  label: string;
+  href: string;
+  icon: React.ElementType;
+}
+
+export interface LearnerSidebarProps {
+  isOpen: boolean;
+  isCollapsed: boolean;
+  onClose: () => void;
+  onToggle: () => void;
+  currentPath: string;
+  onNavigate: (href: string) => void;
+  items?: SidebarItem[];
+}
+
+const defaultItems: SidebarItem[] = [
+  { label: 'My Learning', href: '/my-learning', icon: BookOpen },
+  { label: 'Catalog', href: '/catalog/courses', icon: GraduationCap },
+  { label: 'Messages', href: '/messages', icon: MessageSquare },
+  { label: 'Manual Review', href: '/manual-review', icon: ClipboardCheck },
+  { label: 'Account', href: '/account', icon: UserCircle },
+];
+
+export function LearnerSidebar({
+  isOpen,
+  isCollapsed,
+  onClose,
+  onToggle,
+  currentPath,
+  onNavigate,
+  items = defaultItems,
+}: LearnerSidebarProps) {
+  const sdk = useSDK();
+  const { user } = sdk.useUser();
+  const { logout } = sdk.useLogout();
+
+  const isActive = (href: string, label: string) => {
+    if (label === 'Catalog' && currentPath.startsWith('/catalog')) return true;
+    return currentPath === href || currentPath.startsWith(href + '/');
+  };
+
+  const handleNav = (href: string) => {
+    onNavigate(href);
+    onClose();
+  };
+
+  return (
+    <>
+      <aside
+        style={{ top: 'var(--preview-toolbar-h, 0px)', height: 'calc(100vh - var(--preview-toolbar-h, 0px))' }}
+        className={cn(
+          'fixed left-0 z-40 border-r border-theme-border-primary bg-theme-bg-secondary transition-all duration-300 flex flex-col',
+          isOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0',
+          isCollapsed ? 'w-16' : 'w-64'
+        )}
+      >
+        <div className="flex h-20 items-center justify-between border-b border-theme-border-primary px-4 bg-theme-bg-secondary/50 backdrop-blur-sm">
+          {!isCollapsed && (
+            <button
+              onClick={() => handleNav('/my-learning')}
+              className="flex items-center gap-2 sm:gap-3 hover:opacity-80 transition-opacity cursor-pointer"
+            >
+              <div className="flex h-8 w-8 items-center justify-center rounded bg-theme-accent-primary">
+                <BookOpen className="h-5 w-5 text-white" />
+              </div>
+              <span className="text-xl font-bold text-theme-text-primary leading-none whitespace-nowrap">Academy</span>
+            </button>
+          )}
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={onToggle}
+            className={cn('hover:bg-theme-bg-tertiary rounded-lg transition-colors', isCollapsed && 'mx-auto')}
+          >
+            {isCollapsed ? <ChevronRight className="h-5 w-5" /> : <ChevronLeft className="h-5 w-5" />}
+          </Button>
+        </div>
+
+        <nav className="flex-1 overflow-y-auto p-4 space-y-1">
+          {items.map((item) => {
+            const Icon = item.icon;
+            const active = isActive(item.href, item.label);
+            return (
+              <button
+                key={item.href}
+                onClick={() => handleNav(item.href)}
+                className={cn(
+                  'flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors cursor-pointer',
+                  active
+                    ? 'bg-theme-accent-primary text-white hover:opacity-90'
+                    : 'text-theme-text-secondary hover:bg-theme-bg-tertiary hover:text-theme-text-primary',
+                  isCollapsed && 'justify-center'
+                )}
+                title={isCollapsed ? item.label : undefined}
+              >
+                <Icon className="h-5 w-5 shrink-0" />
+                {!isCollapsed && <span className="whitespace-nowrap">{item.label}</span>}
+              </button>
+            );
+          })}
+        </nav>
+
+        {user && (
+          <div className="border-t border-theme-border-primary p-4">
+            <div className="space-y-1">
+              <button
+                onClick={() => handleNav('/learner-settings')}
+                className={cn(
+                  'flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors cursor-pointer',
+                  currentPath === '/learner-settings'
+                    ? 'bg-theme-accent-primary text-white'
+                    : 'text-theme-text-secondary hover:bg-theme-bg-tertiary hover:text-theme-text-primary',
+                  isCollapsed && 'justify-center'
+                )}
+                title={isCollapsed ? 'Settings' : undefined}
+              >
+                <Settings className="h-5 w-5 shrink-0" />
+                {!isCollapsed && <span className="whitespace-nowrap">Settings</span>}
+              </button>
+              <button
+                onClick={logout}
+                className={cn(
+                  'flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors hover:bg-red-50 hover:text-red-600 text-theme-text-secondary cursor-pointer',
+                  isCollapsed && 'justify-center'
+                )}
+              >
+                <LogOut className="h-5 w-5 shrink-0" />
+                {!isCollapsed && <span className="whitespace-nowrap">Logout</span>}
+              </button>
+            </div>
+          </div>
+        )}
+      </aside>
+
+      {isOpen && (
+        <div className="fixed inset-0 z-30 bg-black/50 lg:hidden" onClick={onClose} />
+      )}
+    </>
+  );
+}

package/src/components/organisms/LessonBookmarks.tsx

@@ -0,0 +1,128 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Pencil, Trash2, Bookmark as BookmarkIcon } from 'lucide-react';
+import { cn } from '../utils';
+import { Button } from '../atoms/Button';
+import { Input } from '../atoms/Input';
+import { useSDK } from '../../hooks/sdk-context';
+
+export interface LessonBookmarksProps {
+  activityId: string;
+  currentVideoTime?: number;
+  getLiveCurrentTime?: () => number;
+  onTimestampClick?: (time: number) => void;
+}
+
+function formatTime(seconds: number): string {
+  const hrs = Math.floor(seconds / 3600);
+  const mins = Math.floor((seconds % 3600) / 60);
+  const secs = Math.floor(seconds % 60);
+  if (hrs > 0) return `${hrs}:${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+  return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+}
+
+export function LessonBookmarks({ activityId, currentVideoTime, getLiveCurrentTime, onTimestampClick }: LessonBookmarksProps) {
+  const sdk = useSDK();
+  const { data: apiBookmarks, isLoading, refetch } = sdk.useLessonBookmarks(activityId);
+  const { createBookmark, isLoading: isCreating } = sdk.useCreateBookmark();
+  const { updateBookmark, isLoading: isUpdating } = sdk.useUpdateBookmark();
+  const { deleteBookmark, isLoading: isDeleting } = sdk.useDeleteBookmark();
+
+  const [label, setLabel] = useState('');
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editingLabel, setEditingLabel] = useState('');
+
+  const bookmarks = Array.isArray(apiBookmarks) ? [...apiBookmarks].sort((a: any, b: any) => a.second - b.second) : [];
+
+  useEffect(() => {
+    setLabel('');
+    setEditingId(null);
+    setEditingLabel('');
+  }, [activityId]);
+
+  const handleAdd = async () => {
+    const effectiveTime = getLiveCurrentTime ? getLiveCurrentTime() : currentVideoTime;
+    if (effectiveTime === undefined) return;
+    const result = await createBookmark({ activityId, second: Math.floor(effectiveTime), label: label.trim() || undefined });
+    if (result) { setLabel(''); await refetch(); }
+  };
+
+  const handleSaveEdit = async (id: string) => {
+    const result = await updateBookmark(id, { label: editingLabel.trim() || undefined });
+    if (result) { setEditingId(null); setEditingLabel(''); refetch(); }
+  };
+
+  const handleDelete = async (id: string) => {
+    const success = await deleteBookmark(id);
+    if (success) refetch();
+  };
+
+  const handleClick = (second: number) => {
+    onTimestampClick?.(second);
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="p-4 border-b border-theme-border-primary bg-theme-bg-secondary sticky top-0 z-10">
+        <h3 className="text-lg font-bold text-theme-text-primary mb-2">Bookmarks for this lesson</h3>
+        <p className="text-base text-theme-text-secondary mb-4">Save key moments in the video for quick access</p>
+        <div className="space-y-2">
+          <Input value={label} onChange={(e) => setLabel(e.target.value)} placeholder="Optional label..." className="w-full" />
+          <div className="flex justify-end">
+            <Button onClick={handleAdd} disabled={isCreating || currentVideoTime === undefined} className="bg-theme-accent-primary hover:bg-theme-accent-primary/90 text-white">
+              <BookmarkIcon className="h-4 w-4 mr-2" />
+              Add Bookmark
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-y-auto p-4">
+        {isLoading ? (
+          <div className="text-theme-text-secondary">Loading bookmarks...</div>
+        ) : bookmarks.length === 0 ? (
+          <div className="text-center py-8">
+            <BookmarkIcon className="h-12 w-12 mx-auto text-theme-text-muted mb-3" />
+            <h3 className="text-xl font-bold text-theme-text-primary">No bookmarks yet</h3>
+            <p className="text-base text-theme-text-secondary mt-2">Click &ldquo;Add Bookmark&rdquo; to save important moments</p>
+          </div>
+        ) : (
+          <div className="space-y-3">
+            {bookmarks.map((bm: any) => (
+              <div key={bm.id} className="rounded-lg border border-theme-border-primary bg-theme-bg-secondary p-3 hover:border-theme-accent-primary transition-colors">
+                {editingId === bm.id ? (
+                  <div className="space-y-2">
+                    <Input value={editingLabel} onChange={(e) => setEditingLabel(e.target.value)} placeholder="Label..." className="w-full" autoFocus />
+                    <div className="flex gap-2 justify-end">
+                      <Button onClick={() => handleSaveEdit(bm.id)} disabled={isUpdating} className="bg-theme-accent-primary hover:bg-theme-accent-primary/90 text-white">Save</Button>
+                      <Button variant="outline" onClick={() => { setEditingId(null); setEditingLabel(''); }} disabled={isUpdating}>Cancel</Button>
+                    </div>
+                  </div>
+                ) : (
+                  <div className="flex items-start justify-between gap-3">
+                    <div className="flex-1 min-w-0">
+                      <button onClick={() => handleClick(bm.second)} className="text-theme-accent-primary font-mono font-semibold hover:underline text-sm">
+                        {formatTime(bm.second)}
+                      </button>
+                      {bm.label && <p className="text-theme-text-secondary text-sm mt-1 break-words">{bm.label}</p>}
+                    </div>
+                    <div className="flex gap-1 flex-shrink-0">
+                      <Button onClick={() => { setEditingId(bm.id); setEditingLabel(bm.label || ''); }} variant="ghost" size="icon" className="text-theme-accent-primary hover:text-theme-accent-primary/80 h-8 w-8" title="Edit">
+                        <Pencil className="h-4 w-4" />
+                      </Button>
+                      <Button onClick={() => handleDelete(bm.id)} disabled={isDeleting} variant="ghost" size="icon" className="text-red-600 hover:text-red-800 h-8 w-8" title="Delete">
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    </div>
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/organisms/LessonNotes.tsx

@@ -0,0 +1,153 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Pencil, Trash2 } from 'lucide-react';
+import { cn } from '../utils';
+import { Button } from '../atoms/Button';
+import { useSDK } from '../../hooks/sdk-context';
+
+export interface LessonNotesProps {
+  activityId: string;
+  currentVideoTime?: number;
+  getLiveCurrentTime?: () => number;
+  onTimestampClick?: (time: number) => void;
+}
+
+function formatTimestamp(seconds?: number): string {
+  if (seconds === undefined || seconds === null) return '';
+  const total = Math.floor(seconds);
+  const hrs = Math.floor(total / 3600);
+  const mins = Math.floor((total % 3600) / 60);
+  const secs = Math.floor(total % 60);
+  if (hrs > 0) return `${String(hrs).padStart(2, '0')}:${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
+  return `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
+}
+
+export function LessonNotes({ activityId, currentVideoTime, getLiveCurrentTime, onTimestampClick }: LessonNotesProps) {
+  const sdk = useSDK();
+  const { data: apiNotes, isLoading, refetch } = sdk.useLessonNotes(activityId);
+  const { createNote, isLoading: isCreating } = sdk.useCreateNote();
+  const { updateNote, isLoading: isUpdating } = sdk.useUpdateNote();
+  const { deleteNote, isLoading: isDeleting } = sdk.useDeleteNote();
+
+  const [noteText, setNoteText] = useState('');
+  const [editingNoteId, setEditingNoteId] = useState<string | null>(null);
+  const [editingText, setEditingText] = useState('');
+
+  const notes = Array.isArray(apiNotes) ? apiNotes : [];
+
+  useEffect(() => {
+    setNoteText('');
+    setEditingNoteId(null);
+    setEditingText('');
+  }, [activityId]);
+
+  const handleSaveNote = async () => {
+    if (!noteText.trim()) return;
+    const effectiveTime = getLiveCurrentTime ? getLiveCurrentTime() : currentVideoTime;
+    const result = await createNote({
+      activityId,
+      text: noteText.trim(),
+      timestamp: effectiveTime !== undefined ? Math.floor(effectiveTime) : undefined,
+    });
+    if (result) {
+      setNoteText('');
+      refetch();
+    }
+  };
+
+  const handleSaveEdit = async (noteId: string) => {
+    if (!editingText.trim()) return;
+    const result = await updateNote(noteId, { text: editingText.trim() });
+    if (result) {
+      setEditingNoteId(null);
+      setEditingText('');
+      refetch();
+    }
+  };
+
+  const handleDeleteNote = async (noteId: string) => {
+    const success = await deleteNote(noteId);
+    if (success) refetch();
+  };
+
+  const handleTimestampClick = (timestamp: number) => {
+    onTimestampClick?.(timestamp);
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  return (
+    <div className="space-y-6">
+      {isLoading ? (
+        <div className="flex items-center justify-center py-8">
+          <div className="text-theme-text-secondary">Loading notes...</div>
+        </div>
+      ) : (
+        <>
+          {/* Note Input */}
+          <div className="space-y-3">
+            <textarea
+              placeholder="Write a note..."
+              value={noteText}
+              onChange={(e) => setNoteText(e.target.value)}
+              rows={notes.length === 0 ? 6 : 4}
+              className="w-full resize-none rounded-md border border-theme-border-primary bg-theme-bg-primary px-3 py-2 text-sm text-theme-text-primary placeholder:text-[rgb(var(--text-muted))] focus-visible:outline-none focus-visible:border-theme-accent-primary transition-colors"
+            />
+            <div className="flex justify-end">
+              <Button
+                onClick={handleSaveNote}
+                disabled={!noteText.trim() || isCreating}
+                className="bg-theme-accent-primary hover:bg-theme-accent-primary/90 text-white"
+              >
+                {isCreating ? 'Saving...' : 'Save note'}
+              </Button>
+            </div>
+          </div>
+
+          {notes.length === 0 ? (
+            <div className="space-y-2">
+              <h3 className="text-xl font-bold text-theme-text-primary">No notes yet</h3>
+              <p className="text-base text-theme-text-secondary">Add notes for this lesson to remember key points.</p>
+            </div>
+          ) : (
+            <div className="space-y-4">
+              <h3 className="text-lg font-bold text-theme-text-primary">Your notes for this lesson</h3>
+              <div className="space-y-3">
+                {notes.map((note: any) => (
+                  <div key={note.id} className="border border-theme-border-primary bg-theme-bg-secondary rounded-lg p-3 md:p-4 space-y-2 relative w-full">
+                    {editingNoteId !== note.id && (
+                      <div className="absolute top-3 right-3 flex gap-2">
+                        <Button variant="ghost" size="sm" onClick={() => { setEditingNoteId(note.id); setEditingText(note.text); }} disabled={isDeleting} className="text-theme-accent-primary hover:text-theme-accent-primary/80 p-1 h-auto">
+                          <Pencil className="w-4 h-4" />
+                        </Button>
+                        <Button variant="ghost" size="sm" onClick={() => handleDeleteNote(note.id)} disabled={isDeleting} className="text-red-600 hover:text-red-800 p-1 h-auto">
+                          <Trash2 className="w-4 h-4" />
+                        </Button>
+                      </div>
+                    )}
+                    {note.timestamp !== undefined && note.timestamp !== null && (
+                      <button onClick={() => handleTimestampClick(note.timestamp)} className="text-theme-accent-primary font-mono font-semibold hover:underline text-sm" disabled={!onTimestampClick}>
+                        {note.formattedTimestamp || formatTimestamp(note.timestamp)}
+                      </button>
+                    )}
+                    {editingNoteId === note.id ? (
+                      <div className="space-y-2">
+                        <textarea value={editingText} onChange={(e) => setEditingText(e.target.value)} rows={3} className="w-full resize-none rounded-md border border-theme-border-primary bg-theme-bg-primary px-3 py-2 text-sm text-theme-text-primary focus-visible:outline-none focus-visible:border-theme-accent-primary transition-colors" />
+                        <div className="flex gap-2 justify-end">
+                          <Button variant="outline" onClick={() => { setEditingNoteId(null); setEditingText(''); }} disabled={isUpdating}>Cancel</Button>
+                          <Button onClick={() => handleSaveEdit(note.id)} disabled={!editingText.trim() || isUpdating} className="bg-theme-accent-primary hover:bg-theme-accent-primary/90 text-white">{isUpdating ? 'Saving...' : 'Save'}</Button>
+                        </div>
+                      </div>
+                    ) : (
+                      <p className="text-theme-text-primary">{note.text}</p>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}

package/src/components/organisms/index.ts

@@ -0,0 +1,10 @@
+export { LearnerNavbar } from './LearnerNavbar';
+export type { LearnerNavbarProps } from './LearnerNavbar';
+export { LearnerSidebar } from './LearnerSidebar';
+export type { LearnerSidebarProps, SidebarItem } from './LearnerSidebar';
+export { CourseSidebar } from './CourseSidebar';
+export type { CourseSidebarProps, CourseSidebarModule, CourseSidebarLesson } from './CourseSidebar';
+export { LessonNotes } from './LessonNotes';
+export type { LessonNotesProps } from './LessonNotes';
+export { LessonBookmarks } from './LessonBookmarks';
+export type { LessonBookmarksProps } from './LessonBookmarks';