Add a "see more" button on news dates list

com/static/bundled/com/components/upcoming-news-loader-index.ts

@@ -0,0 +1,67 @@
+import { type NewsDateSchema, newsFetchNewsDates } from "#openapi";
+
+interface ParsedNewsDateSchema extends Omit<NewsDateSchema, "start_date" | "end_date"> {
+  // biome-ignore lint/style/useNamingConvention: api is snake_case
+  start_date: Date;
+  // biome-ignore lint/style/useNamingConvention: api is snake_case
+  end_date: Date;
+}
+
+document.addEventListener("alpine:init", () => {
+  Alpine.data("upcomingNewsLoader", (startDate: Date) => ({
+    startDate: startDate,
+    currentPage: 1,
+    pageSize: 6,
+    hasNext: true,
+    loading: false,
+    newsDates: [] as NewsDateSchema[],
+
+    async loadMore() {
+      this.loading = true;
+      const response = await newsFetchNewsDates({
+        query: {
+          after: this.startDate.toISOString(),
+          // biome-ignore lint/style/useNamingConvention: api is snake_case
+          text_format: "html",
+          page: this.currentPage,
+          // biome-ignore lint/style/useNamingConvention: api is snake_case
+          page_size: this.pageSize,
+        },
+      });
+      if (response.response.status === 404) {
+        this.hasNext = false;
+      } else if (response.data.next === null) {
+        this.newsDates.push(...response.data.results);
+        this.hasNext = false;
+      } else {
+        this.newsDates.push(...response.data.results);
+        this.currentPage += 1;
+      }
+      this.loading = false;
+    },
+
+    groupedDates(): Record<string, NewsDateSchema[]> {
+      return this.newsDates
+        .map(
+          (date: NewsDateSchema): ParsedNewsDateSchema => ({
+            ...date,
+            // biome-ignore lint/style/useNamingConvention: api is snake_case
+            start_date: new Date(date.start_date),
+            // biome-ignore lint/style/useNamingConvention: api is snake_case
+            end_date: new Date(date.end_date),
+          }),
+        )
+        .reduce(
+          (acc: Record<string, ParsedNewsDateSchema[]>, date: ParsedNewsDateSchema) => {
+            const key = date.start_date.toDateString();
+            if (!acc[key]) {
+              acc[key] = [];
+            }
+            acc[key].push(date);
+            return acc;
+          },
+          {},
+        );
+    },
+  }));
+});

com/static/com/css/news-list.scss

@@ -56,6 +56,13 @@
   #upcoming-events {
     max-height: 600px;
     overflow-y: scroll;
+
+    #load-more-news-button {
+      text-align: center;
+      button {
+        width: 150px;
+      }
+    }
   }
 
   /* LINKS/BIRTHDAYS */