clean ui

management/src/components/ExamRoomWorkspace.tsx

@@ -12,6 +12,8 @@ import { navigate, pushNav } from '../navigation';
 import { BASE_APP_SUGGESTIONS, DEFAULT_EXAM_ALLOWED_APPS } from '../constants';
 import { openStaffChat } from '../chatEvents';
 import { AppPoolModal } from './AppPoolModal';
+import { AppTemplatePickerModal } from './AppTemplatePickerModal';
+import { mergeKeywordCSV } from '../utils/appKeywords';
 import { ExamPaperPdfModal } from './ExamPaperPdfModal';
 import { NavHistoryBar } from './NavHistoryBar';
 import { StudentAvatar } from './StudentAvatar';
@@ -75,6 +77,7 @@ export const ExamRoomWorkspace: React.FC<Props> = ({ examId, onBack }) => {
   const [msg, setMsg] = useState('');
   const [err, setErr] = useState('');
   const [appPoolOpen, setAppPoolOpen] = useState(false);
+  const [templatePickerOpen, setTemplatePickerOpen] = useState(false);
   const [studentPickerOpen, setStudentPickerOpen] = useState(false);
   const [saving, setSaving] = useState(false);
   const [loading, setLoading] = useState(true);
@@ -177,6 +180,10 @@ export const ExamRoomWorkspace: React.FC<Props> = ({ examId, onBack }) => {
     });
   };
 
+  const applyTemplate = (keywords: string) => {
+    setAllowedApps((prev) => mergeKeywordCSV(prev, keywords));
+  };
+
   const saveRoom = async () => {
     setErr(''); setMsg('');
     setSaving(true);
@@ -623,14 +630,19 @@ export const ExamRoomWorkspace: React.FC<Props> = ({ examId, onBack }) => {
                     </div>
                     <div className="app-pool-open-row">
                       <div>
-                        <span className="config-suggestions-label">Kho ứng dụng (toàn hệ thống)</span>
+                        <span className="config-suggestions-label">Kho & khung ứng dụng</span>
                         <p className="discovered-apps-hint" style={{ margin: '0.25rem 0 0' }}>
-                          App bị chặn từ mọi lớp — mở kho để tìm và thêm nhanh.
+                          Thêm từng app trong kho hoặc áp dụng cả bộ keyword đã lưu.
                         </p>
                       </div>
-                      <button type="button" className="btn btn-secondary app-pool-open-btn" onClick={() => setAppPoolOpen(true)}>
-                        Mở kho & tìm kiếm
-                      </button>
+                      <div className="app-pool-open-actions">
+                        <button type="button" className="btn btn-secondary app-pool-open-btn" onClick={() => setTemplatePickerOpen(true)}>
+                          Chọn khung
+                        </button>
+                        <button type="button" className="btn btn-secondary app-pool-open-btn" onClick={() => setAppPoolOpen(true)}>
+                          Mở kho
+                        </button>
+                      </div>
                     </div>
                     <button type="button" className="btn btn-primary" style={{ width: '100%', justifyContent: 'center' }} disabled={saving} onClick={saveRoom}>
                       {saving ? 'Đang lưu...' : 'Lưu cấu hình apps'}
@@ -1221,6 +1233,12 @@ export const ExamRoomWorkspace: React.FC<Props> = ({ examId, onBack }) => {
         onSelect={addAppKeyword}
         allowedApps={allowedApps}
       />
+      <AppTemplatePickerModal
+        open={templatePickerOpen}
+        onClose={() => setTemplatePickerOpen(false)}
+        onSelect={applyTemplate}
+        allowedApps={allowedApps}
+      />
     </div>
   );
 };