feat: modern and animated notices on homepage

src/css/injected.scss

@@ -1175,11 +1175,6 @@ div > ol:has(.uiFileHandlerWrapper) {
   font-size: 20px;
   font-weight: 400;
 }
-.notices-container h2 {
-  margin: 20px;
-  font-size: 20px;
-  font-weight: 400;
-}
 .notice {
   position: relative;
   padding: 20px;
@@ -3543,3 +3538,400 @@ body {
   -ms-overflow-style: none;
   scrollbar-width: none !important;
 }
+
+.notice-modal-content {
+  border: none !important;
+}
+
+.notice-unified-content.notice-modal-state {
+  border: none !important;
+}
+
+// Notice card hover effects for main page cards
+.notice-unified-content.notice-card-state:not([data-transitioning]) {
+  cursor: pointer;
+
+  &:hover {
+    background: var(--background-secondary) !important;
+    border-color: rgba(255, 255, 255, 0.2) !important;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.notice-badge {
+  padding: 4px 10px;
+  border-radius: 16px;
+  font-size: 12px;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.notice-staff {
+  font-size: 12px;
+  color: var(--text-secondary);
+  opacity: 0.7;
+}
+
+.notice-preview {
+  font-size: 14px;
+  color: var(--text-secondary);
+  line-height: 1.4;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+// Modal styles
+.notice-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.notice-modal-transition {
+  position: fixed;
+  z-index: 10001;
+  transition: none; // Controlled by motion animations
+}
+
+.notice-modal-content {
+  background: var(--background-primary);
+  border-radius: 16px;
+  max-width: 600px;
+  max-height: 80vh;
+  width: 100%;
+  overflow: hidden;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+
+  &.notice-transitioning {
+    max-width: none;
+    max-height: none;
+    width: 100%;
+    height: 100%;
+    position: relative;
+  }
+}
+
+.notice-unified-content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--background-primary);
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.notice-unified-content {
+  // Override any conflicting .notice styles - unified for both states
+  h1, h2, h3, h4, h5, h6 {
+    margin: 0 !important;
+    padding: 0 !important;
+    font-weight: inherit !important;
+    color: inherit !important;
+    text-shadow: none !important;
+  }
+  
+  .notice-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    flex-shrink: 0;
+    margin-bottom: 12px;
+    gap: 16px;
+  }
+  
+  .notice-content-title {
+    font-size: 20px !important; // Nice middle ground - not too big, not too small
+    font-weight: 600 !important;
+    color: var(--text-primary) !important;
+    margin: 0 0 12px 0 !important;
+    line-height: 1.3 !important;
+    flex-shrink: 0;
+  }
+  
+  .notice-content-body {
+    font-size: 14px !important;
+    color: var(--text-secondary) !important;
+    line-height: 1.5 !important;
+    margin: 0 !important;
+    flex: 1;
+    display: block;
+    // Force stable layout dimensions - content renders at full size always
+    min-width: 600px; // Ensure tables have consistent width for layout
+    width: 100%;
+  }
+  
+  // The ONLY difference between states is clipping!
+  &.notice-card-state {    
+    .notice-content-body {
+      // Clip to show only 2 lines but keep full layout
+      overflow: hidden;
+      max-height: 3em; // ~2 lines worth of height
+    }
+  }
+  
+  &.notice-modal-state {
+    .notice-close-btn {
+      opacity: 1;
+    }
+    
+    .notice-content-body {
+      // Show full content with scrolling
+      overflow-y: auto;
+      
+      // Custom scrollbar for long content
+      &::-webkit-scrollbar {
+        width: 6px;
+      }
+      
+      &::-webkit-scrollbar-track {
+        background: transparent;
+      }
+      
+      &::-webkit-scrollbar-thumb {
+        background: rgba(255, 255, 255, 0.2);
+        border-radius: 3px;
+      }
+      
+             &::-webkit-scrollbar-thumb:hover {
+         background: rgba(255, 255, 255, 0.3);
+       }
+
+       // Style content elements nicely
+       p {
+         margin-bottom: 12px;
+         
+         &:last-child {
+           margin-bottom: 0;
+         }
+       }
+
+       a {
+         color: var(--theme-primary);
+         text-decoration: none;
+
+         &:hover {
+           text-decoration: underline;
+         }
+       }
+
+       ul, ol {
+         margin: 12px 0;
+         padding-left: 20px;
+       }
+
+       li {
+         margin-bottom: 4px;
+       }
+     }
+   }
+ }
+
+.notice-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 16px;
+}
+
+.notice-badge-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+}
+
+.notice-close-btn {
+  position: absolute !important;
+  top: 12px;
+  right: 12px;
+  background: var(--background-secondary);
+  border: none;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: 18px;
+  color: var(--text-primary);
+  transition: all 0.2s ease !important;
+  flex-shrink: 0;
+  opacity: 0;
+
+  &:hover {
+    background: var(--background-tertiary);
+    transform: scale(1.1);
+  }
+}
+
+.notice-modal-badge-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+}
+
+.notice-modal-badge {
+  padding: 6px 12px;
+  border-radius: 20px;
+  font-size: 13px;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.notice-modal-staff {
+  font-size: 14px;
+  color: var(--text-secondary);
+  opacity: 0.8;
+}
+
+.notice-modal-close {
+  background: var(--background-secondary);
+  border: none;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: 18px;
+  color: var(--text-primary);
+  transition: all 0.2s ease;
+  flex-shrink: 0;
+
+  &:hover {
+    background: var(--background-tertiary);
+    transform: scale(1.1);
+  }
+}
+
+.notice-modal-title {
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 16px 20px 20px 20px;
+  line-height: 1.3;
+  flex-shrink: 0;
+}
+
+.notice-modal-body {
+  padding: 0 20px 20px 20px;
+  font-size: 15px;
+  line-height: 1.6;
+  color: var(--text-secondary);
+  flex: 1;
+  overflow-y: auto;
+  
+  // Custom scrollbar
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 3px;
+  }
+  
+  &::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.3);
+  }
+
+  // Style content elements
+  p {
+    margin-bottom: 12px;
+    
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  a {
+    color: var(--theme-primary);
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  ul, ol {
+    margin: 12px 0;
+    padding-left: 20px;
+  }
+
+  li {
+    margin-bottom: 4px;
+  }
+}
+
+// Dark mode adjustments
+.dark {
+  .notice-card {
+    border-color: rgba(255, 255, 255, 0.05);
+    
+    &:hover {
+      border-color: rgba(255, 255, 255, 0.1);
+    }
+  }
+
+  .notice-modal-content {
+    border-color: rgba(255, 255, 255, 0.05);
+  }
+}
+
+// Mobile responsiveness
+@media (max-width: 768px) {
+  .notice-modal-overlay {
+    padding: 10px;
+  }
+
+  .notice-modal-content {
+    max-height: 90vh;
+  }
+
+  .notice-modal-title {
+    font-size: 20px;
+    margin: 12px 16px 16px 16px;
+  }
+
+  .notice-modal-body {
+    padding: 0 16px 16px 16px;
+  }
+
+  .notice-card {
+    padding: 12px;
+  }
+  
+  .notice-preview {
+    font-size: 13px;
+  }
+}

src/interface/pages/settings/general.svelte

@@ -328,6 +328,18 @@
           />
         </div>
       </div>
+      <div class="flex justify-between items-center px-4 py-3">
+        <div class="pr-4">
+          <h2 class="text-sm font-bold">Mock Notices</h2>
+          <p class="text-xs">Use fake notice data on homepage instead of real data</p>
+        </div>
+        <div>
+          <Switch 
+            state={$settingsState.mockNotices ?? false} 
+            onChange={(isOn: boolean) => settingsState.mockNotices = isOn} 
+          />
+        </div>
+      </div>
     </div>
   {/if}
 </div>

src/seqta/ui/dev/hideSensitiveContent.ts

@@ -370,8 +370,177 @@ const mockData = {
       "Mrs. Martinez",
     ],
   },
+  noticesData: [
+    {
+      id: 1,
+      title: "Academic Lunch Support", 
+      contents: `The following table shows the names of the students who are required to attend at the beginning of lunchtime on the respective days.<br>
+&nbsp;
+<table>
+  <thead>
+    <tr>
+      <th>
+        <p style="padding-left: 0px; padding-right: 0px;">Monday 16/06<br>
+          Room S201<br>
+          Week A Mrs Thompson<br>
+          Week B Mrs Smith</p></th>
+      <th>
+        <p style="padding-left: 0px; padding-right: 0px;">Wednesday 18/06<br>
+          Room S201<br>
+          Week A Mrs Smith<br>
+          Week B Mrs Smith</p></th>
+      <th>
+        <p style="padding-left: 0px; padding-right: 0px;">Friday 20/06<br>
+          Room M201&nbsp;<br>
+          Week A Ms Anderson<br>
+          Week B Ms Anderson&nbsp; &nbsp;&nbsp;</p></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>No Academic Support for year 9 and 10&nbsp;<br>
+        due to exam in P5/6</td>
+      <td>
+        <div>
+        </div>John Smith (Mrs Jones)<br>
+        Wednesday&nbsp;<br>
+        Michael Brown<br>
+        James Wilson (Miss Davis)<br>
+        <br>
+        &nbsp;</td>
+      <td>Friday 20/6<br>
+        Michael Brown<br>
+        &nbsp;</td>
+    </tr>
+  </tbody>
+</table>
+<div>
+</div>`,
+      staff: "Mrs Jones",
+      colour: "#9c27b0",
+      label: 1,
+      label_title: "Middle & Senior School (5-12)"
+    },
+    {
+      id: 2,
+      title: "Year 12 Study Period Changes",
+      contents: `Please note the following changes to Year 12 study periods for this week:<br><br>
+<ul>
+  <li><strong>Tuesday:</strong> Study hall relocated to Library - periods 3 & 4</li>
+  <li><strong>Wednesday:</strong> No supervised study - students may use common areas</li>
+  <li><strong>Friday:</strong> Extended study session until 4:30 PM in Room A205</li>
+</ul>
+<br>
+Students are expected to bring all necessary materials and maintain academic focus during these sessions.`,
+      staff: "Mr. David Chen",
+      colour: "#2196f3",
+      label: 2,
+      label_title: "Year 12 Students"
+    },
+    {
+      id: 3,
+      title: "Upcoming Science Fair Preparations",
+      contents: `The Annual Science Fair is scheduled for <strong>Friday, June 28th</strong>. All participating students should note:<br><br>
+<table border="1" style="border-collapse: collapse; width: 100%;">
+  <thead>
+    <tr style="background-color: #f0f0f0;">
+      <th style="padding: 8px;">Activity</th>
+      <th style="padding: 8px;">Date</th>
+      <th style="padding: 8px;">Location</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td style="padding: 8px;">Project Setup</td>
+      <td style="padding: 8px;">Thursday 27/06 - Period 5</td>
+      <td style="padding: 8px;">Main Hall</td>
+    </tr>
+    <tr>
+      <td style="padding: 8px;">Practice Presentations</td>
+      <td style="padding: 8px;">Thursday 27/06 - Period 6</td>
+      <td style="padding: 8px;">Science Labs 1-3</td>
+    </tr>
+    <tr>
+      <td style="padding: 8px;">Final Event</td>
+      <td style="padding: 8px;">Friday 28/06 - All Day</td>
+      <td style="padding: 8px;">Main Hall & Courtyard</td>
+    </tr>
+  </tbody>
+</table>
+<br>Please ensure all safety protocols are followed and display materials are ready by Thursday afternoon.`,
+      staff: "Dr. Sarah Mitchell",
+      colour: "#4caf50",
+      label: 3,
+      label_title: "Science Students"
+    },
+    {
+      id: 4,
+      title: "Library Resource Updates",
+      contents: `Our library has received several important updates this week:<br><br>
+<strong>New Digital Resources:</strong>
+<ul>
+  <li>Access to Research Database Plus - now available through student portal</li>
+  <li>Updated online textbook collection for all core subjects</li>
+  <li>New citation management tools for senior students</li>
+</ul>
+<br>
+<strong>Facility Changes:</strong><br>
+The quiet study area has been expanded and now includes 8 additional desks with power outlets. Bookings can be made through the student portal under "Library Services".
+<br><br>
+For assistance with any digital resources, please contact the library staff during operating hours: 7:30 AM - 4:00 PM.`,
+      staff: "Ms. Rebecca Torres",
+      colour: "#ff9800",
+      label: 4,
+      label_title: "All Students"
+    },
+    {
+      id: 5,
+      title: "Sports Carnival Team Registrations",
+      contents: `House Sports Carnival is approaching on <strong>August 15th</strong>! Team registrations are now open for all year levels.<br><br>
+Available Events:
+<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0;">
+  <div>
+    <strong>Track Events:</strong>
+    <ul>
+      <li>100m Sprint</li>
+      <li>200m Sprint</li>
+      <li>400m Race</li>
+      <li>800m Distance</li>
+      <li>1500m Distance</li>
+      <li>Relay Races</li>
+    </ul>
+  </div>
+  <div>
+    <strong>Field Events:</strong>
+    <ul>
+      <li>Long Jump</li>
+      <li>High Jump</li>
+      <li>Shot Put</li>
+      <li>Discus</li>
+      <li>Javelin</li>
+      <li>Triple Jump</li>
+    </ul>
+  </div>
+</div>
+<br>
+<strong>Registration Deadline:</strong> July 25th<br>
+<strong>Training Sessions:</strong> Tuesdays & Thursdays, 3:30-4:30 PM<br>
+<br>
+Register through the PE department or see your house captains for more information.`,
+      staff: "Coach Michael Park",
+      colour: "#e91e63",
+      label: 5,
+      label_title: "All Houses"
+    }
+  ]
 };
 
+export function getMockNotices() {
+  return {
+    payload: mockData.noticesData
+  };
+}
+
 export default function hideSensitiveContent() {
   Object.entries(contentConfig).forEach(([_, { selector, action }]) => {
     const elements = document.querySelectorAll(selector);

src/seqta/utils/Loaders/LoadHomePage.ts

@@ -12,6 +12,7 @@ import stringToHTML from "../stringToHTML";
 import { CreateCustomShortcutDiv } from "@/seqta/utils/CreateEnable/CreateCustomShortcutDiv";
 import { CreateElement } from "@/seqta/utils/CreateEnable/CreateElement";
 import { FilterUpcomingAssessments } from "@/seqta/utils/FilterUpcomingAssessments";
+import { getMockNotices } from "@/seqta/ui/dev/hideSensitiveContent";
 
 let LessonInterval: any;
 let currentSelectedDate = new Date();
@@ -20,37 +21,29 @@ let loadingTimeout: any;
 export async function loadHomePage() {
   console.info("[BetterSEQTA+] Started Loading Home Page");
 
-  // Reset currentSelectedDate to today when remounting the home page
   currentSelectedDate = new Date();
 
-  // Wait for the DOM to finish clearing
   await delay(10);
 
   document.title = "Home ― SEQTA Learn";
   const element = document.querySelector("[data-key=home]");
   element?.classList.add("active");
 
-  // Cache DOM queries
   const main = document.getElementById("main");
   if (!main) {
     console.error("[BetterSEQTA+] Main element not found.");
     return;
   }
 
-  // Create root container first
+  const homeRoot = stringToHTML(`<div id="home-root" class="home-root"></div>`);
-  const homeRoot = stringToHTML(
-    /* html */ `<div id="home-root" class="home-root"></div>`,
-  );
 
-  // Clear main and add home root
   main.innerHTML = "";
   main.appendChild(homeRoot?.firstChild!);
 
-  // Get reference to home container for all subsequent additions
   const homeContainer = document.getElementById("home-root");
   if (!homeContainer) return;
 
-  const skeletonStructure = stringToHTML(/* html */ `
+  const skeletonStructure = stringToHTML(`
       <div class="home-container" id="home-container">
         <div class="border shortcut-container">
           <div class="border shortcuts" id="shortcuts"></div>
@@ -88,10 +81,8 @@ export async function loadHomePage() {
         </div>
       </div>`);
 
-  // Add skeleton structure
   homeContainer.appendChild(skeletonStructure.firstChild!);
 
-  // Run animations if enabled
   if (settingsState.animations) {
     animate(
       ".home-container > div",
@@ -106,10 +97,8 @@ export async function loadHomePage() {
     );
   }
 
-  // Setup event listeners with cleanup
   const cleanup = setupTimetableListeners();
 
-  // Initialize shortcuts immediately
   try {
     addShortcuts(settingsState.shortcuts);
   } catch (err: any) {
@@ -117,13 +106,10 @@ export async function loadHomePage() {
   }
   AddCustomShortcutsToPage();
 
-  // Get current date
   const date = new Date();
   const TodayFormatted = formatDate(date);
 
-  // Start all data fetching in parallel
   const [timetablePromise, assessmentsPromise, classesPromise, prefsPromise] = [
-    // Timetable data
     fetch(`${location.origin}/seqta/student/load/timetable?`, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
@@ -134,13 +120,10 @@ export async function loadHomePage() {
       }),
     }).then((res) => res.json()),
 
-    // Assessments data
     GetUpcomingAssessments(),
 
-    // Classes data
     GetActiveClasses(),
 
-    // Preferences data
     fetch(`${location.origin}/seqta/student/load/prefs?`, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
@@ -148,7 +131,6 @@ export async function loadHomePage() {
     }).then((res) => res.json()),
   ];
 
-  // Process all data in parallel
   const [timetableData, assessments, classes, prefs] = await Promise.all([
     timetablePromise,
     assessmentsPromise,
@@ -156,7 +138,6 @@ export async function loadHomePage() {
     prefsPromise,
   ]);
 
-  // Process timetable data
   const dayContainer = document.getElementById("day-container");
   if (dayContainer && timetableData.payload.items.length > 0) {
     const lessonArray = timetableData.payload.items.sort((a: any, b: any) =>
@@ -164,7 +145,6 @@ export async function loadHomePage() {
     );
     const colours = await GetLessonColours();
 
-    // Process and display lessons
     dayContainer.innerHTML = "";
     for (let i = 0; i < lessonArray.length; i++) {
       const lesson = lessonArray[i];
@@ -196,7 +176,6 @@ export async function loadHomePage() {
       dayContainer.appendChild(div.firstChild!);
     }
 
-    // Check current lessons
     if (currentSelectedDate.getDate() === date.getDate()) {
       for (let i = 0; i < lessonArray.length; i++) {
         CheckCurrentLesson(lessonArray[i], i + 1);
@@ -204,7 +183,7 @@ export async function loadHomePage() {
       CheckCurrentLessonAll(lessonArray);
     }
   } else if (dayContainer) {
-    dayContainer.innerHTML = /* html */ `
+    dayContainer.innerHTML = `
         <div class="day-empty">
           <img src="${browser.runtime.getURL(LogoLight)}" />
           <p>No lessons available.</p>
@@ -212,7 +191,6 @@ export async function loadHomePage() {
   }
   dayContainer?.classList.remove("loading");
 
-  // Process assessments data
   const activeClass = classes.find((c: any) => c.hasOwnProperty("active"));
   const activeSubjects = activeClass?.subjects || [];
   const activeSubjectCodes = activeSubjects.map((s: any) => s.code);
@@ -226,7 +204,6 @@ export async function loadHomePage() {
     upcomingItems.classList.remove("loading");
   }
 
-  // Process notices data
   const labelArray = prefs.payload
     .filter((item: any) => item.name === "notices.filters")
     .map((item: any) => item.value);
@@ -271,12 +248,10 @@ function setupTimetableListeners() {
   const timetableForward = document.getElementById("home-timetable-forward");
 
   function changeTimetable(value: number) {
-    // Clear any existing loading timeout
     if (loadingTimeout) {
       clearTimeout(loadingTimeout);
     }
 
-    // Only show loading state after 200ms to avoid flicker on fast connections
     loadingTimeout = setTimeout(() => {
       const dayContainer = document.getElementById("day-container");
       if (dayContainer) {
@@ -340,19 +315,25 @@ function setupNotices(labelArray: string[], date: string) {
   ) as HTMLInputElement;
 
   const fetchNotices = async (date: string) => {
-    const response = await fetch(
+    let data;
-      `${location.origin}/seqta/student/load/notices?`,
+
-      {
+    if (settingsState.mockNotices) {
-        method: "POST",
+      data = getMockNotices();
-        headers: { "Content-Type": "application/json; charset=utf-8" },
+    } else {
-        body: JSON.stringify({ date }),
+      const response = await fetch(
-      },
+        `${location.origin}/seqta/student/load/notices?`,
-    );
+        {
-    const data = await response.json();
+          method: "POST",
+          headers: { "Content-Type": "application/json; charset=utf-8" },
+          body: JSON.stringify({ date }),
+        },
+      );
+      data = await response.json();
+    }
+
     processNotices(data, labelArray);
   };
 
-  // Debounce the input handler
   const debouncedInputChange = debounce((e: Event) => {
     const target = e.target as HTMLInputElement;
     fetchNotices(target.value);
@@ -399,7 +380,6 @@ function processNotices(response: any, labelArray: string[]) {
   const NoticeContainer = document.getElementById("notice-container");
   if (!NoticeContainer) return;
 
-  // Clear existing notices
   NoticeContainer.innerHTML = "";
 
   const notices = response.payload;
@@ -411,19 +391,20 @@ function processNotices(response: any, labelArray: string[]) {
     return;
   }
 
-  // Create document fragment for batch DOM updates
   const fragment = document.createDocumentFragment();
 
-  // Process notices in batch
   notices.forEach((notice: any) => {
-    if (labelArray.includes(JSON.stringify(notice.label))) {
+    const shouldInclude =
+      settingsState.mockNotices ||
+      labelArray.includes(JSON.stringify(notice.label));
+
+    if (shouldInclude) {
       const colour = processNoticeColor(notice.colour);
       const noticeElement = createNoticeElement(notice, colour);
       fragment.appendChild(noticeElement);
     }
   });
 
-  // Single DOM update
   NoticeContainer.appendChild(fragment);
 }
 
@@ -438,33 +419,314 @@ function processNoticeColor(colour: string): string | undefined {
 }
 
 function createNoticeElement(notice: any, colour: string | undefined): Node {
-  const htmlContent = `
+  const cleanContent = notice.contents
-      <div class="notice" style="--colour: ${colour}">
+    .replace(/\[\[[\w]+[:][\w]+[\]\]]+/g, "")
-        <h3 style="color:var(--colour)">${notice.title}</h3>
+    .replace(/ +/, " ");
-        ${notice.label_title !== undefined ? `<h5 style="color:var(--colour)">${notice.label_title}</h5>` : ""}
+  const noticeId = `notice-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-        <h6 style="color:var(--colour)">${notice.staff}</h6>
-        ${notice.contents.replace(/\[\[[\w]+[:][\w]+[\]\]]+/g, "").replace(/ +/, " ")}
-        <div class="colourbar" style="background: var(--colour)"></div>
-      </div>`;
 
-  const element = stringToHTML(htmlContent).firstChild;
+  const htmlContent = `
-  if (element instanceof HTMLElement) {
+    <div class="notice-unified-content notice-card-state" data-notice-id="${noticeId}" style="--colour: ${colour || "#8e8e8e"}; position: relative; background: var(--background-primary); cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); border: 1px solid rgba(255, 255, 255, 0.1);">
-    element.style.setProperty("--colour", colour ?? "");
+      <div class="notice-header">
+        <div class="notice-badge-row">
+          <span class="notice-badge" style="background: linear-gradient(135deg, ${colour || "#8e8e8e"}, ${colour || "#8e8e8e"}dd); color: white;">
+            ${notice.label_title || "General"}
+          </span>
+          <span class="notice-staff">${notice.staff}</span>
+        </div>
+        <button class="notice-close-btn" style="opacity: 0; pointer-events: none;">&times;</button>
+      </div>
+      <h2 class="notice-content-title">${notice.title}</h2>
+      <div class="notice-content-body">${cleanContent}</div>
+    </div>`;
+
+  const element = stringToHTML(htmlContent).firstChild as HTMLElement;
+  if (element) {
+    element.addEventListener("click", () =>
+      openNoticeModal(notice, colour, element),
+    );
   }
   return element!;
 }
 
+function openNoticeModal(
+  notice: any,
+  colour: string | undefined,
+  sourceElement: HTMLElement,
+) {
+  const cleanContent = notice.contents
+    .replace(/\[\[[\w]+[:][\w]+[\]\]]+/g, "")
+    .replace(/ +/, " ");
+
+  const existingModal = document.getElementById("notice-modal");
+  if (existingModal) {
+    existingModal.remove();
+  }
+
+  const sourceRect = sourceElement.getBoundingClientRect();
+  let scrollY = Math.round(window.scrollY);
+  let scrollX = Math.round(window.scrollX);
+
+  let sourceLeft = sourceRect.left;
+  let sourceTop = sourceRect.top;
+  let sourceWidth = sourceRect.width;
+  let sourceHeight = sourceRect.height;
+
+  const modalHtml = `
+    <div id="notice-modal" class="notice-modal-overlay" style="opacity: 0;">
+      <div class="notice-modal-transition" style="
+        position: fixed;
+        left: ${sourceLeft + scrollX}px;
+        top: ${sourceTop + scrollY}px;
+        width: ${sourceWidth}px;
+        height: ${sourceHeight}px;
+        transform-origin: center;
+        z-index: 10001;
+      ">
+        <div class="notice-modal-content notice-transitioning">
+          <div class="notice-unified-content notice-card-state">
+            <div class="notice-header">
+              <div class="notice-badge-row">
+                <span class="notice-badge" style="background: linear-gradient(135deg, ${colour || "#8e8e8e"}, ${colour || "#8e8e8e"}dd); color: white;">
+                  ${notice.label_title || "General"}
+                </span>
+                <span class="notice-staff">${notice.staff}</span>
+              </div>
+              <button class="notice-close-btn">&times;</button>
+            </div>
+            <h2 class="notice-content-title">${notice.title}</h2>
+            <div class="notice-content-body">${cleanContent}</div>
+          </div>
+        </div>
+      </div>
+    </div>`;
+
+  const modal = stringToHTML(modalHtml).firstChild as HTMLElement;
+  const transitionContainer = modal.querySelector(
+    ".notice-modal-transition",
+  ) as HTMLElement;
+  const unifiedContent = modal.querySelector(
+    ".notice-unified-content",
+  ) as HTMLElement;
+  const closeBtn = modal.querySelector(".notice-close-btn") as HTMLElement;
+
+  document.body.appendChild(modal);
+
+  sourceElement.setAttribute("data-transitioning", "true");
+  sourceElement.style.opacity = "0";
+  sourceElement.style.transform = "scale(0.95)";
+
+  const viewportWidth = window.innerWidth;
+  const viewportHeight = window.innerHeight;
+  let targetWidth = Math.round(
+    Math.min(Math.max(sourceWidth, 800), viewportWidth - 40),
+  );
+
+  const tempMeasureDiv = document.createElement("div");
+  tempMeasureDiv.style.position = "absolute";
+  tempMeasureDiv.style.left = "-9999px";
+  tempMeasureDiv.style.width = targetWidth + "px";
+  tempMeasureDiv.style.visibility = "hidden";
+  tempMeasureDiv.innerHTML = `
+    <div class="notice-unified-content notice-modal-state" style="position: relative; width: 100%; padding: 16px; border: 1px solid rgba(255, 255, 255, 0.1);">
+      <div class="notice-header">
+        <div class="notice-badge-row">
+          <span class="notice-badge">${notice.label_title || "General"}</span>
+          <span class="notice-staff">${notice.staff}</span>
+        </div>
+        <button class="notice-close-btn">&times;</button>
+      </div>
+      <h2 class="notice-content-title">${notice.title}</h2>
+      <div class="notice-content-body">${cleanContent}</div>
+    </div>
+  `;
+  document.body.appendChild(tempMeasureDiv);
+  const measuredHeight =
+    tempMeasureDiv.firstElementChild!.getBoundingClientRect().height;
+  document.body.removeChild(tempMeasureDiv);
+
+  let targetHeight = Math.round(
+    Math.min(Math.max(measuredHeight, 200), viewportHeight * 0.85),
+  );
+
+  let targetLeft = Math.round((viewportWidth - targetWidth) / 2);
+  let targetTop = Math.round((viewportHeight - targetHeight) / 2) + scrollY;
+
+  const closeModal = () => {
+    window.removeEventListener("resize", handleResize);
+    document.removeEventListener("keydown", handleEscape);
+
+    if (!settingsState.animations) {
+      modal.remove();
+      sourceElement.style.opacity = "1";
+      sourceElement.style.transform = "";
+      sourceElement.removeAttribute("data-transitioning");
+      return;
+    }
+
+    animate(
+      modal,
+      {
+        backgroundColor: ["rgba(0, 0, 0, 0.5)", "rgba(0, 0, 0, 0)"],
+        backdropFilter: ["blur(4px)", "blur(0px)"],
+      },
+      { duration: 0.2 },
+    );
+
+    animate(
+      transitionContainer,
+      { opacity: [1, 0] },
+      { duration: 0.2, delay: 0.3 },
+    );
+
+    sourceElement.style.opacity = "1";
+    sourceElement.style.transform = "";
+
+    modal.style.pointerEvents = "none";
+
+    animate(
+      transitionContainer,
+      {
+        left: [targetLeft + scrollX, sourceLeft + scrollX],
+        top: [targetTop, sourceTop + scrollY],
+        width: [targetWidth, sourceWidth],
+        height: [targetHeight, sourceHeight],
+        scale: [1, 1],
+      },
+      {
+        duration: 0.35,
+        type: "spring",
+        stiffness: 400,
+        damping: 35,
+      },
+    ).finished.then(async () => {
+      modal.remove();
+      sourceElement.removeAttribute("data-transitioning");
+    });
+  };
+
+  closeBtn?.addEventListener("click", closeModal);
+  modal?.addEventListener("click", (e) => {
+    if (e.target === modal) {
+      closeModal();
+    }
+  });
+
+  const handleEscape = (e: KeyboardEvent) => {
+    if (e.key === "Escape") {
+      closeModal();
+      document.removeEventListener("keydown", handleEscape);
+      window.removeEventListener("resize", handleResize);
+    }
+  };
+  document.addEventListener("keydown", handleEscape);
+
+  const handleResize = () => {
+    const newSourceRect = sourceElement.getBoundingClientRect();
+    const newScrollY = Math.round(window.scrollY);
+    const newScrollX = Math.round(window.scrollX);
+
+    // Get the current scale applied to the source element and compensate for it
+    const computedStyle = getComputedStyle(sourceElement);
+    const transform = computedStyle.transform;
+    let scaleX = 1, scaleY = 1;
+    
+    if (transform && transform !== 'none') {
+      const matrix = transform.match(/matrix.*\((.+)\)/);
+      if (matrix) {
+        const values = matrix[1].split(', ');
+        scaleX = parseFloat(values[0]);
+        scaleY = parseFloat(values[3]);
+      }
+    }
+
+    // Apply inverse scale to get true original dimensions and positions
+    const newSourceWidth = newSourceRect.width / scaleX;
+    const newSourceHeight = newSourceRect.height / scaleY;
+    
+    // Calculate position shift due to center-based scaling
+    const deltaX = (newSourceWidth - newSourceRect.width) / 2;
+    const deltaY = (newSourceHeight - newSourceRect.height) / 2;
+    
+    const newSourceLeft = newSourceRect.left - deltaX;
+    const newSourceTop = newSourceRect.top - deltaY;
+
+    const newViewportWidth = window.innerWidth;
+    const newViewportHeight = window.innerHeight;
+    const newTargetWidth = Math.round(
+      Math.min(Math.max(newSourceWidth, 800), newViewportWidth - 40),
+    );
+
+    // Just measure the existing modal content
+    const currentHeight = unifiedContent.getBoundingClientRect().height;
+    const newTargetHeight = Math.round(
+      Math.min(Math.max(currentHeight, 200), newViewportHeight * 0.85),
+    );
+
+    const newTargetLeft = Math.round((newViewportWidth - newTargetWidth) / 2);
+    const newTargetTop =
+      Math.round((newViewportHeight - newTargetHeight) / 2) + newScrollY;
+
+    transitionContainer.style.left =
+      Math.round(newTargetLeft + newScrollX) + "px";
+    transitionContainer.style.top = Math.round(newTargetTop) + "px";
+    transitionContainer.style.width = Math.round(newTargetWidth) + "px";
+    transitionContainer.style.height = Math.round(newTargetHeight) + "px";
+
+    sourceLeft = newSourceLeft;
+    sourceTop = newSourceTop;
+    sourceWidth = newSourceWidth;
+    sourceHeight = newSourceHeight;
+    targetLeft = newTargetLeft;
+    targetTop = newTargetTop;
+    targetWidth = newTargetWidth;
+    targetHeight = newTargetHeight;
+    scrollY = newScrollY;
+    scrollX = newScrollX;
+  };
+
+  window.addEventListener("resize", handleResize);
+
+  if (settingsState.animations) {
+    animate(modal, { opacity: [0, 1] }, { duration: 0.2 });
+
+    animate(
+      transitionContainer,
+      {
+        left: [sourceLeft + scrollX, targetLeft + scrollX],
+        top: [sourceTop + scrollY, targetTop],
+        width: [sourceWidth, targetWidth],
+        height: [sourceHeight, targetHeight],
+        scale: [1, 1],
+      },
+      {
+        duration: 0.5,
+        type: "spring",
+        stiffness: 280,
+        damping: 24,
+      },
+    );
+
+    unifiedContent.classList.remove("notice-card-state");
+    unifiedContent.classList.add("notice-modal-state");
+  } else {
+    modal.style.opacity = "1";
+    transitionContainer.style.left = Math.round(targetLeft + scrollX) + "px";
+    transitionContainer.style.top = Math.round(targetTop) + "px";
+    transitionContainer.style.width = Math.round(targetWidth) + "px";
+    transitionContainer.style.height = Math.round(targetHeight) + "px";
+    unifiedContent.classList.remove("notice-card-state");
+    unifiedContent.classList.add("notice-modal-state");
+  }
+}
+
 function callHomeTimetable(date: string, change?: any) {
-  // Creates a HTTP Post Request to the SEQTA page for the students timetable
   var xhr = new XMLHttpRequest();
   xhr.open("POST", `${location.origin}/seqta/student/load/timetable?`, true);
-  // Sets the response type to json
+
   xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8");
 
   xhr.onreadystatechange = function () {
-    // Once the response is ready
     if (xhr.readyState === 4) {
-      // Clear the loading timeout since we got a response
       if (loadingTimeout) {
         clearTimeout(loadingTimeout);
         loadingTimeout = null;
@@ -475,100 +737,95 @@ function callHomeTimetable(date: string, change?: any) {
       try {
         var serverResponse = JSON.parse(xhr.response);
         let lessonArray: Array<any> = [];
-      // If items in response:
-      if (serverResponse.payload.items.length > 0) {
-        if (DayContainer.innerText || change) {
-          for (let i = 0; i < serverResponse.payload.items.length; i++) {
-            lessonArray.push(serverResponse.payload.items[i]);
-          }
-          lessonArray.sort(function (a, b) {
-            return a.from.localeCompare(b.from);
-          });
-          // If items in the response, set each corresponding value into divs
-          // lessonArray = lessonArray.splice(1)
-          GetLessonColours().then((colours) => {
-            let subjects = colours;
-            for (let i = 0; i < lessonArray.length; i++) {
-              let subjectname = `timetable.subject.colour.${lessonArray[i].code}`;
 
-              let subject = subjects.find(
+        if (serverResponse.payload.items.length > 0) {
-                (element: any) => element.name === subjectname,
+          if (DayContainer.innerText || change) {
-              );
+            for (let i = 0; i < serverResponse.payload.items.length; i++) {
-              if (!subject) {
+              lessonArray.push(serverResponse.payload.items[i]);
-                lessonArray[i].colour = "--item-colour: #8e8e8e;";
-              } else {
-                lessonArray[i].colour = `--item-colour: ${subject.value};`;
-                let result = GetThresholdOfColor(subject.value);
-
-                if (result > 300) {
-                  lessonArray[i].invert = true;
-                }
-              }
-              // Removes seconds from the start and end times
-              lessonArray[i].from = lessonArray[i].from.substring(0, 5);
-              lessonArray[i].until = lessonArray[i].until.substring(0, 5);
-
-              if (settingsState.timeFormat === "12") {
-                lessonArray[i].from = convertTo12HourFormat(
-                  lessonArray[i].from,
-                );
-                lessonArray[i].until = convertTo12HourFormat(
-                  lessonArray[i].until,
-                );
-              }
-
-              // Checks if attendance is unmarked, and sets the string to " ".
-              lessonArray[i].attendanceTitle = CheckUnmarkedAttendance(
-                lessonArray[i].attendance,
-              );
             }
-            // If on home page, apply each lesson to HTML with information in each div
+            lessonArray.sort(function (a, b) {
-            DayContainer.innerText = "";
+              return a.from.localeCompare(b.from);
-            for (let i = 0; i < lessonArray.length; i++) {
+            });
-              var div = makeLessonDiv(lessonArray[i], i + 1);
-              // Append each of the lessons into the day-container
-              if (lessonArray[i].invert) {
-                const div1 = div.firstChild! as HTMLElement;
-                div1.classList.add("day-inverted");
-              }
 
-              DayContainer.append(div.firstChild as HTMLElement);
+            GetLessonColours().then((colours) => {
-            }
+              let subjects = colours;
-
-            // Remove loading state after lessons are loaded
-            DayContainer.classList.remove("loading");
-
-            const today = new Date();
-            if (currentSelectedDate.getDate() == today.getDate()) {
               for (let i = 0; i < lessonArray.length; i++) {
-                CheckCurrentLesson(lessonArray[i], i + 1);
+                let subjectname = `timetable.subject.colour.${lessonArray[i].code}`;
-              }
-              // For each lesson, check the start and end times
-              CheckCurrentLessonAll(lessonArray);
-            }
-          });
-        }
-      } else {
-        DayContainer.innerHTML = "";
-        var dummyDay = document.createElement("div");
-        dummyDay.classList.add("day-empty");
-        let img = document.createElement("img");
-        img.src = browser.runtime.getURL(LogoLight);
-        let text = document.createElement("p");
-        text.innerText = "No lessons available.";
-        dummyDay.append(img);
-        dummyDay.append(text);
-        DayContainer.append(dummyDay);
 
-        // Remove loading state when no lessons available
+                let subject = subjects.find(
-        DayContainer.classList.remove("loading");
+                  (element: any) => element.name === subjectname,
-      }
+                );
+                if (!subject) {
+                  lessonArray[i].colour = "--item-colour: #8e8e8e;";
+                } else {
+                  lessonArray[i].colour = `--item-colour: ${subject.value};`;
+                  let result = GetThresholdOfColor(subject.value);
+
+                  if (result > 300) {
+                    lessonArray[i].invert = true;
+                  }
+                }
+
+                lessonArray[i].from = lessonArray[i].from.substring(0, 5);
+                lessonArray[i].until = lessonArray[i].until.substring(0, 5);
+
+                if (settingsState.timeFormat === "12") {
+                  lessonArray[i].from = convertTo12HourFormat(
+                    lessonArray[i].from,
+                  );
+                  lessonArray[i].until = convertTo12HourFormat(
+                    lessonArray[i].until,
+                  );
+                }
+
+                lessonArray[i].attendanceTitle = CheckUnmarkedAttendance(
+                  lessonArray[i].attendance,
+                );
+              }
+
+              DayContainer.innerText = "";
+              for (let i = 0; i < lessonArray.length; i++) {
+                var div = makeLessonDiv(lessonArray[i], i + 1);
+
+                if (lessonArray[i].invert) {
+                  const div1 = div.firstChild! as HTMLElement;
+                  div1.classList.add("day-inverted");
+                }
+
+                DayContainer.append(div.firstChild as HTMLElement);
+              }
+
+              DayContainer.classList.remove("loading");
+
+              const today = new Date();
+              if (currentSelectedDate.getDate() == today.getDate()) {
+                for (let i = 0; i < lessonArray.length; i++) {
+                  CheckCurrentLesson(lessonArray[i], i + 1);
+                }
+
+                CheckCurrentLessonAll(lessonArray);
+              }
+            });
+          }
+        } else {
+          DayContainer.innerHTML = "";
+          var dummyDay = document.createElement("div");
+          dummyDay.classList.add("day-empty");
+          let img = document.createElement("img");
+          img.src = browser.runtime.getURL(LogoLight);
+          let text = document.createElement("p");
+          text.innerText = "No lessons available.";
+          dummyDay.append(img);
+          dummyDay.append(text);
+          DayContainer.append(dummyDay);
+
+          DayContainer.classList.remove("loading");
+        }
       } catch (error) {
         console.error("Error loading timetable data:", error);
-        // Remove loading state even if there's an error
+
         DayContainer.classList.remove("loading");
 
-        // Show error message
         DayContainer.innerHTML = "";
         const errorDiv = document.createElement("div");
         errorDiv.classList.add("day-empty");
@@ -582,17 +839,15 @@ function callHomeTimetable(date: string, change?: any) {
   };
   xhr.send(
     JSON.stringify({
-      // Information sent to SEQTA page as a request with the dates and student number
       from: date,
       until: date,
-      // Funny number
+
       student: 69,
     }),
   );
 }
 
 function CheckCurrentLessonAll(lessons: any) {
-  // Checks each lesson and sets an interval to run every 60 seconds to continue updating
   LessonInterval = setInterval(
     function () {
       for (let i = 0; i < lessons.length; i++) {
@@ -614,7 +869,6 @@ async function CheckCurrentLesson(lesson: any, num: number) {
   } = lesson;
   const currentDate = new Date();
 
-  // Create Date objects for start and end times
   const [startHour, startMinute] = startTime.split(":").map(Number);
   const [endHour, endMinute] = endTime.split(":").map(Number);
 
@@ -624,7 +878,6 @@ async function CheckCurrentLesson(lesson: any, num: number) {
   const endDate = new Date(currentDate);
   endDate.setHours(endHour, endMinute, 0);
 
-  // Check if the current time is within the lesson time range
   const isValidTime = startDate < currentDate && endDate > currentDate;
 
   const elementId = `${code}${num}`;
@@ -687,8 +940,7 @@ function makeLessonDiv(lesson: any, num: number) {
     assessments,
   } = lesson;
 
-  // Construct the base lesson string with default values using ternary operators
+  let lessonString = `
-  let lessonString = /* html */ `
       <div class="day" id="${code + num}" style="${colour}">
         <h2>${description || "Unknown"}</h2>
         <h3>${staff || "Unknown"}</h3>
@@ -697,15 +949,13 @@ function makeLessonDiv(lesson: any, num: number) {
         <h5>${attendanceTitle || "Unknown"}</h5>
     `;
 
-  // Add buttons for assessments and courses if applicable
   if (programmeID !== 0) {
-    lessonString += /* html */ `
+    lessonString += `
         <div class="day-button clickable" style="right: 5px;" onclick="location.href='${buildAssessmentURL(programmeID, metaID)}'">${assessmentsicon}</div>
         <div class="day-button clickable" style="right: 35px;" onclick="location.href='../#?page=/courses/${programmeID}:${metaID}'">${coursesicon}</div>
       `;
   }
 
-  // Add assessments if they exist
   if (assessments && assessments.length > 0) {
     const assessmentString = assessments
       .map(
@@ -714,7 +964,7 @@ function makeLessonDiv(lesson: any, num: number) {
       )
       .join("");
 
-    lessonString += /* html */ `
+    lessonString += `
         <div class="tooltip assessmenttooltip">
           <svg style="width:28px;height:28px;border-radius:0;" viewBox="0 0 24 24">
             <path fill="#ed3939" d="M16 2H4C2.9 2 2 2.9 2 4V20C2 21.11 2.9 22 4 22H16C17.11 22 18 21.11 18 20V4C18 2.9 17.11 2 16 2M16 20H4V4H6V12L8.5 9.75L11 12V4H16V20M20 15H22V17H20V15M22 7V13H20V7H22Z" />
@@ -752,7 +1002,6 @@ async function CreateUpcomingSection(assessments: any, activeSubjects: any) {
 
   var Today = new Date();
 
-  // Removes overdue assessments from the upcoming assessments array and pushes to overdue array
   for (let i = 0; i < assessments.length; i++) {
     const assessment = assessments[i];
     let assessmentdue = new Date(assessment.due);
@@ -782,7 +1031,7 @@ async function CreateUpcomingSection(assessments: any, activeSubjects: any) {
       assessments[i].colour = "--item-colour: #8e8e8e;";
     } else {
       assessments[i].colour = `--item-colour: ${subject.value};`;
-      GetThresholdOfColor(subject.value); // result (originally) result = GetThresholdOfColor
+      GetThresholdOfColor(subject.value);
     }
   }
 
@@ -803,9 +1052,7 @@ async function CreateUpcomingSection(assessments: any, activeSubjects: any) {
 
   CreateFilters(activeSubjects);
 
-  // @ts-ignore
   let type;
-  // @ts-ignore
   let class_;
 
   for (let i = 0; i < assessments.length; i++) {
@@ -813,10 +1060,7 @@ async function CreateUpcomingSection(assessments: any, activeSubjects: any) {
     if (!upcomingDates[element.due as keyof typeof upcomingDates]) {
       let dateObj: any = new Object();
       dateObj.div = CreateElement(
-        // TODO: not sure whats going on here?
-        // eslint-disable-next-line
         (type = "div"),
-        // eslint-disable-next-line
         (class_ = "upcoming-date-container"),
       );
       dateObj.assessments = [];
@@ -845,7 +1089,7 @@ async function CreateUpcomingSection(assessments: any, activeSubjects: any) {
       assessmentDate = createAssessmentDateDiv(
         date,
         upcomingDates[date as keyof typeof upcomingDates],
-        // eslint-disable-next-line
+
         datecase,
       );
     } else {
@@ -950,9 +1194,6 @@ function createAssessmentDateDiv(date: string, value: any, datecase?: any) {
         if (response.payload.length > 0) {
           const assessment = document.querySelector(`#assessment${element.id}`);
 
-          // ticksvg = stringToHTML(`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="var(--item-colour)" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/></svg>`).firstChild
-          // ticksvg.classList.add('upcoming-tick')
-          // assessment.append(ticksvg)
           let submittedtext = document.createElement("div");
           submittedtext.classList.add("upcoming-submittedtext");
           submittedtext.innerText = "Submitted";
@@ -1009,7 +1250,7 @@ function CreateFilters(subjects: any) {
   let filterdiv = document.querySelector("#upcoming-filters");
   for (let i = 0; i < subjects.length; i++) {
     const element = subjects[i];
-    // eslint-disable-next-line
+
     if (!Object.prototype.hasOwnProperty.call(filteroptions, element.code)) {
       filteroptions[element.code] = true;
       settingsState.subjectfilters = filteroptions;

src/types/storage.ts

@@ -36,6 +36,7 @@ export interface SettingsState {
   devMode?: boolean;
   originalDarkMode?: boolean;
   newsSource?: string;
+  mockNotices?: boolean;
 
   // depreciated keys
   animatedbk: boolean;