rearranged contents

static/teacher.js

@@ -1,5 +1,6 @@
 const state = { classes: [], snapshot: null, activeClass: '', username: '' };
 const el = id => document.getElementById(id);
+const adminTabs = ['groups', 'ungrouped', 'settings'];
 
 function renderUnauthenticated() {
   el('loginArea').classList.remove('hidden');
@@ -7,6 +8,16 @@ function renderUnauthenticated() {
   el('teacherToolbar').classList.add('hidden');
 }
 
+function switchAdminTab(tabName) {
+  if (!adminTabs.includes(tabName)) tabName = 'groups';
+  document.querySelectorAll('.admin-tab').forEach(button => {
+    const active = button.dataset.tab === tabName;
+    button.classList.toggle('active', active);
+    button.setAttribute('aria-selected', String(active));
+    el(`${button.dataset.tab}Panel`).classList.toggle('hidden', !active);
+  });
+}
+
 function renderState() {
   el('loginArea').classList.add('hidden');
   el('mainArea').classList.remove('hidden');
@@ -19,6 +30,10 @@ function renderState() {
   renderUngrouped();
 }
 
+document.querySelectorAll('.admin-tab').forEach(button => {
+  button.addEventListener('click', () => switchAdminTab(button.dataset.tab));
+});
+
 function renderClassTabs() {
   el('classTabs').innerHTML = state.classes.map(item => `
     <button class="class-tab ${item.class_name === state.activeClass ? 'active' : ''}"