Port remaining management components to SolidJS

- Created AssignmentManager component
  * CRUD operations for assignments and groups
  * Create assignments (7 types: BlockPy, Reading, Quiz, TypeScript, Textbook, Explain, Maze)
  * Modal dialogs for creation
  * Move assignments between groups
  * Edit/delete functionality
- Created CourseList component
  * Display courses with sortable list (4 sort modes)
  * Pin/unpin courses with backend integration
  * Show user roles
  * LMS integration display
- Created GroupList component
  * Display assignment groups
  * Load from backend API
  * Error and loading states
- Created ModelSelector component
  * Generic selector for Users/Assignments
  * 3 modes: All/Single/Set
  * Custom set creation and management
  * LocalStorage persistence
  * Grouped display support
- Created UserEditor component
  * User settings management
  * Sort order preferences (5 options)
  * Render style preferences
- Updated app.tsx to export all new components
  * Add init functions for all management components
  * Export types and enums
  * Register in global frontendSolid object
- Created comprehensive README for management components
- All components follow SolidJS reactive patterns
- Bootstrap 5 styling integration
- Type-safe with TypeScript strict mode

Co-authored-by: acbart <897227+acbart@users.noreply.github.com>

Author: Copilot

frontend-solid/src/app.tsx

@@ -10,6 +10,11 @@ import { Reader, ReaderProps } from './components/reader/Reader';
 import { Textbook, TextbookProps, TextbookData } from './components/textbook/Textbook';
 import { WatchMode } from './components/watcher/SubmissionState';
 import { QuizData } from './components/quizzes/types';
+import { AssignmentManager } from './components/management/AssignmentManager';
+import { CourseList, type Course } from './components/management/CourseList';
+import { GroupList } from './components/management/GroupList';
+import { ModelSelector, type Model } from './components/management/ModelSelector';
+import { UserEditor } from './components/management/UserEditor';
 
 // Export components for external use
 export { Watcher } from './components/watcher/Watcher';
@@ -32,6 +37,15 @@ export type { ReaderProps } from './components/reader/Reader';
 export { Textbook } from './components/textbook/Textbook';
 export type { TextbookProps, TextbookData } from './components/textbook/Textbook';
 
+// Export management components
+export { AssignmentManager } from './components/management/AssignmentManager';
+export { CourseList } from './components/management/CourseList';
+export type { Course } from './components/management/CourseList';
+export { GroupList } from './components/management/GroupList';
+export { ModelSelector } from './components/management/ModelSelector';
+export type { Model } from './components/management/ModelSelector';
+export { UserEditor, SortOrder, RenderStyle } from './components/management/UserEditor';
+
 // Export models
 export { User } from './models/user';
 export { Assignment } from './models/assignment';
@@ -156,6 +170,112 @@ export function initTextbook(
   render(() => <Textbook {...props} />, element);
 }
 
+/**
+ * Initialize an AssignmentManager component in the given container
+ * @param container - DOM element or selector where the component should be mounted
+ * @param props - Props for the AssignmentManager component
+ */
+export function initAssignmentManager(
+  container: HTMLElement | string,
+  props: { courseId: number; user: any }
+) {
+  const element = typeof container === 'string'
+    ? document.querySelector(container)
+    : container;
+
+  if (!element) {
+    console.error('Container element not found:', container);
+    return;
+  }
+
+  render(() => <AssignmentManager {...props} />, element);
+}
+
+/**
+ * Initialize a CourseList component in the given container
+ * @param container - DOM element or selector where the component should be mounted
+ * @param props - Props for the CourseList component
+ */
+export function initCourseList(
+  container: HTMLElement | string,
+  props: { courses: Course[]; user: any; label: string }
+) {
+  const element = typeof container === 'string'
+    ? document.querySelector(container)
+    : container;
+
+  if (!element) {
+    console.error('Container element not found:', container);
+    return;
+  }
+
+  render(() => <CourseList {...props} />, element);
+}
+
+/**
+ * Initialize a GroupList component in the given container
+ * @param container - DOM element or selector where the component should be mounted
+ * @param props - Props for the GroupList component
+ */
+export function initGroupList(
+  container: HTMLElement | string,
+  props: { courseId: number }
+) {
+  const element = typeof container === 'string'
+    ? document.querySelector(container)
+    : container;
+
+  if (!element) {
+    console.error('Container element not found:', container);
+    return;
+  }
+
+  render(() => <GroupList {...props} />, element);
+}
+
+/**
+ * Initialize a ModelSelector component in the given container
+ * @param container - DOM element or selector where the component should be mounted
+ * @param props - Props for the ModelSelector component
+ */
+export function initModelSelector(
+  container: HTMLElement | string,
+  props: { models: Model[]; label: string; storageKey?: string }
+) {
+  const element = typeof container === 'string'
+    ? document.querySelector(container)
+    : container;
+
+  if (!element) {
+    console.error('Container element not found:', container);
+    return;
+  }
+
+  const SelectorComponent = ModelSelector(props);
+  render(() => <SelectorComponent />, element);
+}
+
+/**
+ * Initialize a UserEditor component in the given container
+ * @param container - DOM element or selector where the component should be mounted
+ * @param props - Props for the UserEditor component
+ */
+export function initUserEditor(
+  container: HTMLElement | string,
+  props?: any
+) {
+  const element = typeof container === 'string'
+    ? document.querySelector(container)
+    : container;
+
+  if (!element) {
+    console.error('Container element not found:', container);
+    return;
+  }
+
+  render(() => <UserEditor {...(props || {})} />, element);
+}
+
 // Make it available globally for template usage
 if (typeof window !== 'undefined') {
   (window as any).frontendSolid = {
@@ -164,11 +284,21 @@ if (typeof window !== 'undefined') {
     initQuizEditor,
     initReader,
     initTextbook,
+    initAssignmentManager,
+    initCourseList,
+    initGroupList,
+    initModelSelector,
+    initUserEditor,
     Watcher,
     Quizzer,
     QuizEditor,
     Reader,
     Textbook,
+    AssignmentManager,
+    CourseList,
+    GroupList,
+    ModelSelector,
+    UserEditor,
     WatchMode,
   };
 }