feat: Implement course team management with dedicated UI and API, add course preview token generation, and refactor course settings UI.

web/experience/src/app/courses/[id]/page.tsx

@@ -32,7 +32,15 @@ export default function CourseOutlinePage({ params }: { params: { id: string } }
                     setUserGrades(grades);
 
                     const enrollmentData = await lmsApi.getEnrollments(user.id);
-                    setIsEnrolled(enrollmentData.some(e => e.course_id === params.id));
+                    const enrolled = enrollmentData.some(e => e.course_id === params.id);
+
+                    // Allow preview token to override enrollment status
+                    const isPreview = typeof window !== 'undefined' && !!sessionStorage.getItem('preview_token');
+                    setIsEnrolled(enrolled || isPreview);
+                } else {
+                    // Even if not logged in, if there's a preview token, consider "enrolled" for UI
+                    const isPreview = typeof window !== 'undefined' && !!sessionStorage.getItem('preview_token');
+                    if (isPreview) setIsEnrolled(true);
                 }
             } catch (err) {
                 console.error(err);

web/experience/src/lib/api.ts

@@ -346,7 +346,20 @@ export interface UpdateAnnouncementPayload {
 
 
 
-const getToken = () => typeof window !== 'undefined' ? localStorage.getItem('experience_token') : null;
+const getToken = () => {
+    if (typeof window === 'undefined') return null;
+
+    // Check for preview token in URL
+    const urlParams = new URLSearchParams(window.location.search);
+    const previewToken = urlParams.get('preview_token');
+
+    if (previewToken) {
+        sessionStorage.setItem('preview_token', previewToken);
+        return previewToken;
+    }
+
+    return sessionStorage.getItem('preview_token') || localStorage.getItem('experience_token');
+};
 
 const apiFetch = async (url: string, options: RequestInit = {}, isCMS: boolean = false) => {
     const token = getToken();