Refactor calendar and event section layout, update deps

Improves layout and accessibility for calendar and student council event sections by changing roles to 'region', updating grid/card styles, and removing redundant messages in calendar. Updates dependencies in package.json and bun.lock, and adjusts tsconfig for module resolution. Minor style tweaks in main.css for card and calendar components.

Author: PatrickMatthiesen

bun.lock

@@ -1,7 +1,7 @@
 {
   "name": "learnit-plus-plus",
   "displayName": "LearnIT++",
-  "version": "1.6.5",
+  "version": "1.6.6",
   "description": "Improved design and functionality of the LearnIT page for IT-University of Copenhagen",
   "author": "https://github.com/localhost-itu/learnit-plus-plus/graphs/contributors",
   "repository": {
@@ -31,7 +31,7 @@
     "@fullcalendar/timegrid": "^6.1.19",
     "@plasmohq/messaging": "^0.7.2",
     "@plasmohq/storage": "^1.15.0",
-    "caniuse-lite": "^1.0.30001752",
+    "caniuse-lite": "^1.0.30001753",
     "firebase": "^12.5.0",
     "ical.js": "1.5.0",
     "plasmo": "0.90.5",
@@ -43,7 +43,7 @@
     "@ianvs/prettier-plugin-sort-imports": "4.7.0",
     "@tailwindcss/postcss": "^4.1.16",
     "@types/chrome": "0.1.27",
-    "@types/node": "24.9.2",
+    "@types/node": "24.10.0",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.2",
     "autoprefixer": "^10.4.21",

package.json

@@ -19,9 +19,6 @@ const CalendarHeader = ({ toggleView }: { toggleView: () => void }) => {
           alignItems: "center",
           gap: ".5rem"
         }}>
-        {settings.icalSources.length == 0 && (
-          <p className="bold">No custom calendars setup yet!</p>
-        )}
 
         <button className="btn btn-outline-secondary" onClick={toggleView}>
           Settings

src/components/calendar/calendarHeader.tsx

@@ -93,29 +93,7 @@ const CalendarView = ({ toggleView }: { toggleView: () => void }) => {
   return (
     <>
       {settingsLoaded &&
-        (settings.icalSources.length == 0 &&
-        !settings.showScrollbar &&
-        !settings.showStudentCouncil ? (
-          <div className="calendar-missing-setup text-center">
-            <h3>No calendars enabled</h3>
-            <p>
-              Go the settings view to add calendar subscriptions to your
-              calendar
-            </p>
-            <p>
-              <a
-                href="https://github.com/PhilipFlyvholm/learnit-plus-plus/wiki/The-Calendar-Component"
-                target="_blank">
-                Guide for setup
-              </a>
-            </p>
-            <button
-              className="btn btn-outline-secondary my-2"
-              onClick={toggleView}>
-              Open settings
-            </button>
-          </div>
-        ) : (
+        ((
           <FullCalendar
             slotDuration={settings.slotduration}
             slotMinTime={settings.slotMinTime}
@@ -215,16 +193,19 @@ const CalendarView = ({ toggleView }: { toggleView: () => void }) => {
             firstDay={1} // Monday
             weekNumbers={true}
             weekends={settings.showWeekends}
+            allDayText=""
             allDaySlot={
               settings.slotMinTime === "00:00:00" &&
               settings.slotMaxTime === "23:59:59"
                 ? false
                 : undefined
             }
             height={"auto"}
-            allDayText=""
             scrollTime={"08:00:00"}
             eventClick={(info) => {
+              if (info.event.url.startsWith("https://learnit.itu.dk")) {
+                return
+              }
               info.jsEvent.preventDefault() // don't let the browser navigate
               if (info.event.url) {
                 const url = info.event.url.startsWith("http")

src/components/calendar/calendarView.tsx

@@ -27,8 +27,8 @@ export const getRootContainer = () =>
       let section = region.querySelector<HTMLElement>("section.block_timeedit")
       if (!section) {
         section = document.createElement("section")
-        section.className = "block_timeedit block card mb-3"
-        section.setAttribute("role", "complementary")
+        section.className = "block_timeedit block card"
+        section.setAttribute("role", "region")
         section.setAttribute("data-block", "cohortspecifichtml")
         region.appendChild(section)
       }
@@ -55,6 +55,7 @@ const CalendarRoot = () => {
   const toggleView = () => {
     setCurrentView(currentView === "calendar" ? "settings" : "calendar")
   }
+  console.log('CalendarRoot ext chrome', !!(window.chrome && (window as any).chrome.storage), 'runtime id', (window as any).chrome?.runtime?.id)
   return (
     <>
       {/* React root is on the draggable item, no extra wrapper needed */}

src/contents/calendarRoot.tsx

@@ -2,8 +2,8 @@ import { getEvents, type EventData } from "./eventLoader"
 
 export async function addStudentConcileEvents() {
   const section = document.createElement("section")
-  section.className = "block_sc block card mb-3"
-  section.setAttribute("role", "complementary")
+  section.className = "block_sc block card"
+  section.setAttribute("role", "region")
   section.setAttribute("data-block", "cohortspecifichtml")
 
   const div = document.createElement("div")
@@ -18,8 +18,10 @@ export async function addStudentConcileEvents() {
 
   const cardTextDiv = document.createElement("div")
   cardTextDiv.className = "card-text content"
-  cardTextDiv.style.display = "flex"
-  cardTextDiv.style.flexWrap = "wrap"
+  cardTextDiv.style.display = "grid"
+  cardTextDiv.style.gridTemplateColumns = "repeat(2, 1fr)"
+  cardTextDiv.style.gap = "10px"
+  cardTextDiv.style.paddingTop = "1rem"
 
   const events = await getEvents()
   if (events.length === 0) {
@@ -60,8 +62,6 @@ function getEventDom(event: EventData) {
   divCard.className = "card dashboard-card"
   divCard.setAttribute("role", "listitem")
   divCard.setAttribute("data-region", "course-content")
-  divCard.style.width = "48%"
-  divCard.style.margin = "1%"
 
   const divCardBody = document.createElement("div")
   divCardBody.className = "card-body pr-1 course-info-container"
@@ -72,12 +72,14 @@ function getEventDom(event: EventData) {
   const header = document.createElement("h5")
   header.className = "coursename mr-2"
   header.textContent = event.summary
+  header.style.margin = "0"
 
   const divMuted = document.createElement("div")
   divMuted.className = "text-muted muted d-flex mb-1 justify-content-between"
 
-  const p = document.createElement("p")
-  p.className = "text-truncate"
+  const eventDate = document.createElement("span")
+  eventDate.className = "text-truncate"
+  eventDate.style.marginBottom = "0.5rem"
 
   const date = new Date(event.dtstart)
   const weekDay = date.toLocaleDateString("en-GB", { weekday: "short" })
@@ -88,7 +90,7 @@ function getEventDom(event: EventData) {
   })
   const dateString = `${weekDay}, ${date.getDate()}. ${month}. ${time}`
 
-  p.textContent = `${dateString} | ${daysLeftString(date)}`
+  eventDate.textContent = `${dateString} | ${daysLeftString(date)}`
   const expandedText = document.createElement("div")
   expandedText.className = "expandedText hide-content"
   const description = document.createElement("p")
@@ -122,7 +124,7 @@ function getEventDom(event: EventData) {
     expandedText.appendChild(readMoreButton)
   }
   divMuted.appendChild(expandedText)
-  divMuted.appendChild(p)
+  divMuted.appendChild(eventDate)
   divTextTruncate.appendChild(header)
   divTextTruncate.appendChild(divMuted)
   divCardBody.appendChild(divTextTruncate)

src/studentcouncil/eventSection.ts

@@ -7,6 +7,18 @@ body.limitedwidth #page.drawers .main-inner {
   padding: 0.5rem 0.5rem !important;
 }
 
+/* margin on card titles */
+html .block h3.card-title.d-inline {
+  display: inline-block !important;
+  margin-left: 0;
+  margin-bottom: 0;
+}
+
+html div.card-text.content:not:has(.calendarwrapper) {
+  margin-top: 0 !important;
+  padding-top: 1rem;
+}
+
 /* Flex of starred courses */
 html div[data-region="card-deck"] {
   display: flex;
@@ -16,16 +28,13 @@ html div[data-region="card-deck"] {
   gap: 0.5rem;
 }
 
-/* html div[data-region="card-deck"] > div {
-  min-width: 150px;
-} */
-
 /* enable four items to be in the starred card */
 /* .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card { */
 html div[data-region="card-deck"] > div {
   width: unset !important;
   min-width: 200px;
   flex: 1;
+  margin-bottom: 0 !important;
 }
 
 /* remove stared courses padding */
@@ -169,6 +178,10 @@ section#block-region-content section.block_cohortspecifichtml {
   grid-area: tools;
 }
 
+section[role="region"] {
+    margin-bottom: 0 !important;
+}
+
 /* Timeline sidebar fixes */
 html .block_timeline .timeline-action-button {
   margin-left: unset;
@@ -297,7 +310,7 @@ html .lightModeOnly {
   border: none;
   border-radius: 0.2rem;
   padding: 0.2rem 0.5rem;
-  margin: 0.2rem 0.2rem;
+  /* margin: 0.2rem 0.2rem; */
   cursor: pointer;
 }
 
@@ -395,6 +408,10 @@ html .secondary-navigation {
   --fc-now-indicator-color: red;
 }
 
+:root .fc .fc-toolbar.fc-header-toolbar {
+  margin-bottom: 1rem;
+}
+
 /* Questionnaire */
 html .qn-answer input[type="radio"] {
   margin: unset;

src/styles/main.css

@@ -10,12 +10,16 @@
   ],
   "compilerOptions": {
     "paths": {
+      "assets/*": [
+        "./assets/*"
+      ],
       "~*": [
         "./src/*"
       ],
       "@Components/*": ["./src/components/*"]
     },
-    "baseUrl": ".",
+    // "module": "esnext",
+    "moduleResolution": "bundler", // overwrite plasmo default as it is deprecated
     "jsx": "react-jsx",
   }
 }