Add banner for ask-astro down time

ui/src/routes/+page.server.ts

@@ -23,17 +23,28 @@ const limiter = new RateLimiter({
 
 export const load: PageServerLoad = async (event) => {
   await limiter.cookieLimiter?.preflight(event);
+  // Define the PSA message
+  const publicServiceAnnouncement = "Public Service Announcement: Ask Astro is currently experiencing " +
+      "downtime. Our team is actively investigating the issue and will provide updates as soon as it is resolved.";
+
   try {
     const requests = await fetch(`${ASK_ASTRO_API_URL}/requests`);
-
-    return requests.json();
+    // Return the requests along with the PSA message
+    return {
+      requests: await requests.json(),
+      publicServiceAnnouncement // Add this line
+    };
   } catch (err) {
     console.error(err);
-
-    return { requests: [] };
+    // Return an empty array for requests and include the PSA message even in case of an error
+    return {
+      requests: [],
+      publicServiceAnnouncement // Add this line
+    };
   }
 };
 
+
 export const actions = {
   submitPrompt: async (event: RequestEvent) => {
 

ui/src/routes/+page.svelte

@@ -9,6 +9,13 @@
   <title>Ask Astro</title>
 </svelte:head>
 
+<!-- Display the PSA banner if the message exists -->
+{#if data.publicServiceAnnouncement}
+  <div class="psa-banner">
+    {data.publicServiceAnnouncement}
+  </div>
+{/if}
+
 <p class="previously-asked pt-4">Previously asked questions</p>
 
 <div class="grid gap-2 pt-2 pb-12 home-grid-cols">
@@ -35,4 +42,13 @@
     grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
     width: 100%;
   }
+
+  .psa-banner {
+    background-color: #ffcc00;
+    padding: 15px;
+    margin-bottom: 20px;
+    text-align: center;
+    color: black; /* Text color */
+    font-weight: bold;
+  }
 </style>