refactor(sidebar): analytics start below courses

src/seqta/utils/Openers/OpenMenuOptions.ts

@@ -1,6 +1,7 @@
 import type { SettingsState } from "@/types/storage";
 import { settingsState } from "../listeners/SettingsState";
 import { applyMenuItemVisibility } from "../menuItemVisibility";
+import { insertKeyAfterInOrder } from "@/seqta/utils/sidebarMenuIcons";
 import stringToHTML from "../stringToHTML";
 import Sortable from "sortablejs";
 
@@ -57,9 +58,18 @@ export function OpenMenuOptions() {
         key &&
         settingsState.defaultmenuorder.indexOf(key) === -1
       ) {
-        let newdefaultmenuorder = settingsState.defaultmenuorder;
-        newdefaultmenuorder.push(key);
-        settingsState.defaultmenuorder = newdefaultmenuorder;
+        if (key === "analytics") {
+          settingsState.defaultmenuorder = insertKeyAfterInOrder(
+            settingsState.defaultmenuorder,
+            key,
+            "courses",
+          );
+        } else {
+          settingsState.defaultmenuorder = [
+            ...settingsState.defaultmenuorder,
+            key,
+          ];
+        }
       }
     }
   }

src/seqta/utils/sidebarMenuIcons.ts

@@ -12,6 +12,58 @@ import { isSeqtaEngageExperience } from "@/seqta/utils/isSeqtaEngage";
 
 const BETTERSEQTA_ICON_ATTR = "data-betterseqta-icon";
 
+export function insertMenuItemAfterKey(
+  menuList: HTMLElement,
+  item: HTMLElement,
+  afterKey: string,
+): void {
+  const after = menuList.querySelector(
+    `:scope > li[data-key="${afterKey}"], :scope > section[data-key="${afterKey}"]`,
+  );
+  if (after instanceof HTMLElement) {
+    after.insertAdjacentElement("afterend", item);
+  } else {
+    menuList.appendChild(item);
+  }
+}
+
+export function insertKeyAfterInOrder(
+  order: string[],
+  key: string,
+  afterKey: string,
+): string[] {
+  if (order.includes(key)) return order;
+  const copy = [...order];
+  const afterIdx = copy.indexOf(afterKey);
+  if (afterIdx >= 0) {
+    copy.splice(afterIdx + 1, 0, key);
+  } else {
+    copy.push(key);
+  }
+  return copy;
+}
+
+/** Default Analytics immediately below Courses in saved menu order. */
+export function ensureAnalyticsMenuOrder(): void {
+  if (!settingsState.defaultmenuorder.includes("analytics")) {
+    settingsState.defaultmenuorder = insertKeyAfterInOrder(
+      settingsState.defaultmenuorder,
+      "analytics",
+      "courses",
+    );
+  }
+  if (
+    settingsState.menuorder.length > 0 &&
+    !settingsState.menuorder.includes("analytics")
+  ) {
+    settingsState.menuorder = insertKeyAfterInOrder(
+      settingsState.menuorder,
+      "analytics",
+      "courses",
+    );
+  }
+}
+
 function getMenuLabel(element: HTMLElement): HTMLElement | null {
   const label = element.querySelector(":scope > label");
   return label instanceof HTMLElement ? label : null;

src/seqta/utils/timetableColoris.ts

@@ -0,0 +1,47 @@
+/**
+ * SEQTA timetable uses Coloris for subject colours. Extension CSS previously
+ * unset Coloris ::after animations, which left the picker unable to reopen.
+ * This module clears stuck `clr-open` / hidden picker state after each use.
+ */
+
+let attached = false;
+
+export function resetStuckColorisPicker(): void {
+  document.body.classList.remove("clr-open");
+  document.documentElement.classList.remove("clr-open");
+
+  for (const picker of document.querySelectorAll(".clr-picker")) {
+    picker.classList.remove("clr-open");
+    if (picker instanceof HTMLElement) {
+      picker.style.removeProperty("display");
+      picker.style.removeProperty("pointer-events");
+      picker.style.removeProperty("visibility");
+    }
+  }
+
+  for (const field of document.querySelectorAll(".clr-field")) {
+    field.classList.remove("clr-open");
+  }
+}
+
+export function attachTimetableColorisRecovery(): void {
+  if (attached) return;
+  attached = true;
+
+  const afterColorisEvent = () => {
+    requestAnimationFrame(() => resetStuckColorisPicker());
+  };
+
+  document.addEventListener("coloris:pick", afterColorisEvent);
+  document.addEventListener("coloris:close", afterColorisEvent);
+
+  document.addEventListener(
+    "click",
+    (event) => {
+      const target = event.target as HTMLElement;
+      if (!target.closest(".timetablepage [title='Choose a colour']")) return;
+      resetStuckColorisPicker();
+    },
+    true,
+  );
+}