feat: Implement Teaching Mode toggle to conditionally show Quiz builder

Author: AmirMohammad Cheraghali

src/ViewerApp.tsx

@@ -1338,6 +1338,7 @@ function App() {
   // handleResetView and handleUpload extracted to hook
 
   const [isPublicationMode, setIsPublicationMode] = useState(false);
+  const [isTeachingMode, setIsTeachingMode] = useState(false);
 
   // Store previous theme to restore after exiting Publication Mode
   const previousThemeRef = useRef(isLightMode);
@@ -2828,6 +2829,7 @@ function App() {
             onToggleNotes={() => setIsNotesOpen(!isNotesOpen)}
             onOpenSettings={() => setIsSettingsOpen(true)}
             onOpenAssignmentBuilder={() => setIsAssignmentBuilderOpen(true)}
+            isTeachingMode={isTeachingMode}
           />
 
           <AIChatSidebar isOpen={isAiChatOpen} onClose={() => setIsAiChatOpen(false)} pdbId={pdbId} pdbMetadata={pdbMetadata} />
@@ -2908,6 +2910,8 @@ function App() {
             setVisualizerEngine={setVisualizerEngine}
             isOpen={isSettingsOpen}
             onClose={() => setIsSettingsOpen(false)}
+            isTeachingMode={isTeachingMode}
+            setIsTeachingMode={setIsTeachingMode}
           />
         </>
       )}

src/components/HUD.tsx

@@ -29,9 +29,10 @@ interface HUDProps {
     onToggleNotes?: () => void;
     onOpenSettings?: () => void;
     onOpenAssignmentBuilder?: () => void;
+    isTeachingMode?: boolean;
 }
 
-export function HUD({ hoveredResidue, pdbMetadata, pdbId, isLightMode, isEmbedMode = false, peerSession, remoteHoveredResidue, isHost, remoteUserName, peerNames = {}, controllerId, isCameraSynced, onToggleCameraSync, userName, unreadCount = 0, isChatOpen = false, onToggleChat, isAiChatOpen = false, onToggleAiChat, isNotesOpen = false, onToggleNotes, onOpenSettings, onOpenAssignmentBuilder }: HUDProps) {
+export function HUD({ hoveredResidue, pdbMetadata, pdbId, isLightMode, isEmbedMode = false, peerSession, remoteHoveredResidue, isHost, remoteUserName, peerNames = {}, controllerId, isCameraSynced, onToggleCameraSync, userName, unreadCount = 0, isChatOpen = false, onToggleChat, isAiChatOpen = false, onToggleAiChat, isNotesOpen = false, onToggleNotes, onOpenSettings, onOpenAssignmentBuilder, isTeachingMode = false }: HUDProps) {
     const { t } = useTranslation();
     const textColor = isLightMode ? 'text-gray-800' : 'text-gray-200';
     const bgColor = isLightMode ? 'bg-white/80' : 'bg-black/80';
@@ -176,7 +177,7 @@ export function HUD({ hoveredResidue, pdbMetadata, pdbId, isLightMode, isEmbedMo
                 )}
 
                 {/* Main Control Pill — hidden in embed mode */}
-                {!isEmbedMode && (peerSession?.isConnected || onToggleAiChat || onToggleNotes || onOpenAssignmentBuilder) && (
+                {!isEmbedMode && (peerSession?.isConnected || onToggleAiChat || onToggleNotes || (isTeachingMode && onOpenAssignmentBuilder)) && (
                     <div className={`pointer-events-auto backdrop-blur-md rounded-full border ${borderColor} ${bgColor} shadow-lg px-4 py-2 flex items-center justify-center gap-2 animate-in slide-in-from-bottom-2 mx-auto`}>
 
                         {/* Desktop: Reactions Inline */}
@@ -240,7 +241,7 @@ export function HUD({ hoveredResidue, pdbMetadata, pdbId, isLightMode, isEmbedMo
                                         {t.aiBtn as string}
                                     </button>
                                 )}
-                                {onOpenAssignmentBuilder && (
+                                {isTeachingMode && onOpenAssignmentBuilder && (
                                     <button
                                         onClick={onOpenAssignmentBuilder}
                                         className={`relative text-[10px] font-bold px-4 py-1.5 md:px-2 md:py-1 rounded-full flex items-center gap-2 transition-colors shadow-sm ${isLightMode ? 'bg-green-100 text-green-700 hover:bg-green-200' : 'bg-green-500/20 text-green-300 hover:bg-green-500/30'}`}

src/components/Settings.tsx

@@ -11,6 +11,8 @@ interface SettingsProps {
     setSsao: (v: boolean) => void;
     visualizerEngine: 'ngl' | 'molstar';
     setVisualizerEngine: (v: 'ngl' | 'molstar') => void;
+    isTeachingMode: boolean;
+    setIsTeachingMode: (v: boolean) => void;
     isOpen: boolean;
     onClose: () => void;
 }
@@ -20,6 +22,7 @@ export function Settings({
     quality, setQuality,
     ssao, setSsao,
     visualizerEngine, setVisualizerEngine,
+    isTeachingMode, setIsTeachingMode,
     isOpen, onClose
 }: SettingsProps) {
     const { t } = useTranslation();
@@ -86,6 +89,15 @@ export function Settings({
                                 <div className={`absolute top-1 w-5 h-5 rounded-full bg-white shadow-md transition-transform duration-300 ${!isLightMode ? 'translate-x-8' : 'translate-x-1'}`} />
                             </button>
                         </div>
+                        <div className="flex items-center justify-between p-1">
+                            <span className="text-sm font-medium">Teaching Mode</span>
+                            <button
+                                onClick={() => setIsTeachingMode(!isTeachingMode)}
+                                className={`w-14 h-7 rounded-full transition-all duration-300 relative shadow-inner ${isTeachingMode ? 'bg-indigo-600' : 'bg-neutral-200'}`}
+                            >
+                                <div className={`absolute top-1 w-5 h-5 rounded-full bg-white shadow-md transition-transform duration-300 ${isTeachingMode ? 'translate-x-8' : 'translate-x-1'}`} />
+                            </button>
+                        </div>
                     </div>
 
                     <hr className={`border-t ${borderColor}`} />