1 files changed, 52 insertions, 15 deletions

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index d08e6828..6ace5dad 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -28,6 +28,7 @@ import settingsSyncPulled from "$stores/settingsSyncPulled";
 import settingsSyncTimes from "$stores/settingsSyncTimes";
 import Announcement from "$lib/Announcement.svelte";
 import Message from "$lib/Loading/Message.svelte";
+import { addNotification } from "$lib/Notification/store";
 import { requestNotifications } from "$lib/Utility/notifications";
 import { executiveCopy } from "$lib/Utility/executiveMode";
 import { database as userDatabase } from "$lib/Database/IDB/user";
@@ -53,6 +54,23 @@ let previousScrollPosition = 0;
 let notificationInterval: ReturnType<typeof setInterval> | undefined =
 	undefined;
 
+const notifyExecutiveMode = (enabled: boolean) => {
+	addNotification({
+		heading: "April Fools",
+		description: enabled
+			? "Executive Mode is live for April Fools. Toggle it from the header if you want the joke off."
+			: "Executive Mode is off. Toggle it from the header if you want the April Fools joke back.",
+		duration: 5000,
+	});
+};
+
+const toggleExecutiveMode = () => {
+	const nextEnabled = !$aprilFools;
+
+	aprilFools.set(nextEnabled);
+	notifyExecutiveMode(nextEnabled);
+};
+
 addMessages("en", english as unknown as LocaleDictionary);
 addMessages("ja", japanese as unknown as LocaleDictionary);
 init({ fallbackLocale: "en", initialLocale: $settings.displayLanguage });
@@ -98,6 +116,14 @@ onMount(async () => {
 	hydrateAprilFools();
 
 	if (browser) {
+		if (
+			aprilFoolsVisible() &&
+			(await localforage.getItem("aprilFoolsNoticeShown")) !== data.commit
+		) {
+			notifyExecutiveMode($aprilFools);
+			await localforage.setItem("aprilFoolsNoticeShown", data.commit);
+		}
+
 		if (await localforage.getItem("redirect")) {
 			window.location.href = (await localforage.getItem("redirect")) ?? "/";
 
@@ -220,17 +246,6 @@ $: {
 {:else}
   <Announcement />
 
-  {#if aprilFoolsVisible()}
-    <div class="card card-centered april-fools-banner">
-      <b>Executive Mode {$aprilFools ? 'enabled' : 'disabled'}.</b>
-      All media are now deliverables.
-      <Spacer />
-      <button class="small-button" onclick={() => aprilFools.toggle()}>
-        {$aprilFools ? 'Disable' : 'Enable'} Executive Mode
-      </button>
-    </div>
-  {/if}
-
   <div class="container">
     <div class="card card-centered header" class:header-hidden={!isHeaderVisible}>
       <div>
@@ -264,6 +279,20 @@ $: {
         <a href={root('/settings')} class="header-item"
           >{executiveCopy($aprilFools, $locale().navigation.settings)}</a
         >
+        {#if aprilFoolsVisible()}
+          <span class="header-item opaque separator">•</span>
+          <a
+            href={root(data.url)}
+            class="header-item executive-mode-toggle"
+            onclick={(event) => {
+              event.preventDefault();
+              toggleExecutiveMode();
+            }}
+            title={$aprilFools ? 'Disable Executive Mode' : 'Enable Executive Mode'}
+          >
+            Executive {$aprilFools ? 'On' : 'Off'}
+          </a>
+        {/if}
 
         <span class="header-item opaque separator">•</span>
 
@@ -364,10 +393,6 @@ $: {
     transition: transform 0.3s ease;
   }
 
-  .april-fools-banner {
-    margin-bottom: 1rem;
-  }
-
   .header-hidden {
     transform: translateY(-150%);
   }
@@ -409,6 +434,18 @@ $: {
     outline: none;
   }
 
+  .executive-mode-toggle {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font: inherit;
+    padding: 0;
+  }
+
+  .executive-mode-toggle:hover {
+    text-decoration: none;
+  }
+
   .avatar {
     width: 2em;
     display: inline-block;