path: root/src/routes/+layout.svelte

<script lang="ts">
import Spacer from "$lib/Layout/Spacer.svelte";
import type { SubsPleaseEpisode } from "$lib/Media/Anime/Airing/Subtitled/subsPlease";
import { env } from "$env/dynamic/public";
import { userIdentity as getUserIdentity } from "$lib/Data/AniList/identity";
import { onDestroy, onMount } from "svelte";
import userIdentity from "$stores/identity";
import settings from "$stores/settings";
import { browser } from "$app/environment";
import HeadTitle from "$lib/Home/HeadTitle.svelte";
import "../app.css";
import { readable, type Readable } from "svelte/store";
import { navigating } from "$app/stores";
import NotificationsProvider from "$lib/Notification/NotificationsProvider.svelte";
import Root from "$lib/Home/Root.svelte";
import root from "$lib/Utility/root";
import { addMessages, init, locale as i18nLocale, locales } from "svelte-i18n";
import english from "$lib/Locale/english";
import japanese from "$lib/Locale/japanese";
import type { LocaleDictionary } from "$lib/Locale/layout";
import locale from "$stores/locale";
import Skeleton from "$lib/Loading/Skeleton.svelte";
import subsPlease from "$stores/subsPlease";
import Dropdown from "$lib/Layout/Dropdown.svelte";
import { injectSpeedInsights } from "@vercel/speed-insights/sveltekit";
import subtitles from "$lib/Data/Static/subtitles.json";
import settingsSyncPulled from "$stores/settingsSyncPulled";
import settingsSyncTimes from "$stores/settingsSyncTimes";
import Announcement from "$lib/Announcement.svelte";
import Message from "$lib/Loading/Message.svelte";
import { requestNotifications } from "$lib/Utility/notifications";
import { database as userDatabase } from "$lib/Database/IDB/user";
import CommandPalette from "$lib/CommandPalette/CommandPalette.svelte";
import { defaultActions } from "$lib/CommandPalette/actions";
import { authActions } from "$lib/CommandPalette/authActions";
import { syncActions } from "$lib/CommandPalette/syncActions";
import { toggleActions } from "$lib/CommandPalette/toggleActions";
import { toolsAsCommandPaletteActions } from "$lib/Tools/tools";
import localforage from "localforage";
import { dev } from "$app/environment";
import { injectAnalytics } from "@vercel/analytics/sveltekit";
import Lenis from "lenis";
import "lenis/dist/lenis.css";
import lenisStore from "$stores/lenis";
import type { LayoutData } from "./$types";

injectSpeedInsights();
injectAnalytics({ mode: dev ? "development" : "production" });

export let data: LayoutData;

let isHeaderVisible = true;
let previousScrollPosition = 0;
let notificationInterval: ReturnType<typeof setInterval> | undefined =
	undefined;
let lenis: Lenis | undefined = undefined;
let isMenuOpen = false;

addMessages("en", english as unknown as LocaleDictionary);
addMessages("ja", japanese as unknown as LocaleDictionary);
init({ fallbackLocale: "en", initialLocale: $settings.displayLanguage });

$: i18nLocale.set($settings.displayLanguage);

const navigationOrder = [
	"/",
	"/completed",
	"/schedule",
	"/updates",
	"/tools",
	"/settings",
];
const previousPage: Readable<string | null> = readable(null, (set) => {
	const unsubscribe = navigating.subscribe(($navigating) => {
		if ($navigating && $navigating.from)
			set($navigating.from.url.pathname as unknown as null);
	});

	return () => unsubscribe();
});

$: way = data.url.includes("/user")
	? 200
	: $previousPage && $previousPage.includes("/user")
		? -200
		: navigationOrder.indexOf(data.url) >
				navigationOrder.indexOf($previousPage ?? "/")
			? 200
			: -200;

$: if ($navigating) isMenuOpen = false;

const handleScroll = () => {
	const currentScrollPosition = window.scrollY;

	isHeaderVisible =
		currentScrollPosition <= 100 ||
		currentScrollPosition < previousScrollPosition;
	previousScrollPosition = currentScrollPosition;
};

onMount(async () => {
	if (browser) {
		if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
			lenis = new Lenis({ autoRaf: true });

			lenisStore.set(lenis);
		}

		if (await localforage.getItem("redirect")) {
			window.location.href = (await localforage.getItem("redirect")) ?? "/";

			await localforage.removeItem("redirect");
		}

		window.addEventListener("scroll", handleScroll);

		if ((await localforage.getItem("commit")) !== data.commit) {
			await localforage.removeItem("identity");
			await localforage.removeItem("anime");
			await localforage.removeItem("manga");
			await localforage.removeItem("anime");
			await localforage.removeItem("manga");
			await localforage.removeItem("lastPruneTimes");
			await localforage.setItem("commit", data.commit);
		}
	}

	settings.get();

	const currentIdentity = data.user
		? await getUserIdentity(data.user)
		: undefined;

	if (currentIdentity) userIdentity.set(currentIdentity);
	else if ($userIdentity.id !== -2) userIdentity.reset();

	if ($settings.settingsSync && currentIdentity)
		fetch(root(`/api/configuration?id=${currentIdentity.id}`)).then(
			(response) => {
				if (response.ok)
					response.json().then((data) => {
						if (data && data.configuration) {
							console.log("Pulled remote configuration");
							settings.set(data.configuration);
							settingsSyncPulled.set(true);
							settingsSyncTimes.set({
								lastPull: new Date(),
								lastPush: new Date(data.updated_at + "Z"),
							});
						}
					});
			},
		);

	await userDatabase.users.where("id").below(0).delete();

	if (
		currentIdentity &&
		!(await userDatabase.users.get(currentIdentity.id)) &&
		currentIdentity.id > 0
	)
		await userDatabase.users.put({
			id: currentIdentity.id,
			user: data.user,
			lastNotificationID: null,
		});

	if ($settings.displayAniListNotifications && currentIdentity)
		if ("Notification" in window && navigator.serviceWorker)
			requestNotifications();
});

onDestroy(() => {
	if (browser) window.removeEventListener("scroll", handleScroll);

	if (notificationInterval) clearInterval(notificationInterval);

	lenis?.destroy();

	lenisStore.set(undefined);
});

$: {
	if (
		(data.url === "/" ||
			data.url === "/completed" ||
			data.url === "/schedule") &&
		!$subsPlease
	)
		fetch(
			root(
				`/api/subsplease?tz=${Intl.DateTimeFormat().resolvedOptions().timeZone}`,
			),
		)
			.then((r) => r.json())
			.then((r) => {
				for (const day in subtitles) {
					if (!r.schedule[day]) r.schedule[day] = [];

					(
						subtitles[day as keyof typeof subtitles] as SubsPleaseEpisode[]
					).forEach((episode) => {
						r.schedule[day].push({
							title: episode.title,
							page: episode.page || "",
							image_url: episode.image_url || "",
							time: episode.time,
						});
					});
				}

				subsPlease.set(r);
			});
}
</script>

<HeadTitle />

<svelte:window
  on:keydown={(e) => { if (e.key === 'Escape' && isMenuOpen) isMenuOpen = false; }}
  on:click={(e) => {
    if (isMenuOpen && !(e.target as HTMLElement).closest('.header')) isMenuOpen = false;
  }}
/>

<CommandPalette
  items={[
    ...defaultActions,
    ...toolsAsCommandPaletteActions(),
    ...authActions(data.user),
    ...syncActions($userIdentity.id, $settings.settingsSync),
    ...toggleActions($settings)
  ]}
/>

{#if !$locales.includes('en') || !$locale().navigation}
  <Message />

  {#if data.url === '/settings'}
    <Skeleton grid={true} count={1} height="10vh" />
    <Skeleton grid={true} count={1} height="30vh" />
    <Skeleton grid={true} count={1} height="30vh" />
  {:else}
    <Skeleton grid={true} count={1} height="10vh" />
    <Skeleton grid={true} count={1} height="80vh" />
  {/if}
{:else}
  <Announcement />

  <div class="container">
    <div
      class="card card-centered card-glass header"
      class:header-hidden={!isHeaderVisible && !isMenuOpen}
      class:menu-open={isMenuOpen}
    >
      <button
        type="button"
        class="menu-toggle"
        aria-label="Menu"
        aria-expanded={isMenuOpen}
        aria-controls="primary-nav"
        onclick={() => (isMenuOpen = !isMenuOpen)}
      >
        <span class="menu-bar"></span>
        <span class="menu-bar"></span>
        <span class="menu-bar"></span>
      </button>

      <div class="nav-items" id="primary-nav">
        <a href={root('/')} class="header-item">{$locale().navigation.home}</a><a
          href={root('/completed')}
          class="header-item"
        >
          {$locale().navigation.completed}
        </a>
        <Dropdown
          items={[
            { name: $locale().navigation.subtitleSchedule, url: root('/schedule') },
            { name: $locale().navigation.hololive, url: root('/hololive') },
            { name: $locale().tools.tool.characterBirthdays.short, url: root('/birthdays') },
            { name: $locale().navigation.newReleases, url: root('/updates') }
          ]}
          header={false}
        >
          <span slot="title" class="header-item">{$locale().navigation.schedule}</span>
        </Dropdown>
        <a href={root('/tools')} class="header-item">{$locale().navigation.tools}</a>
        <a href={root('/settings')} class="header-item">{$locale().navigation.settings}</a>

        <span class="header-item opaque separator">•</span>

        {#if data.user}
          <Dropdown
            items={[
              { name: $locale().navigation.myProfile, url: root(`/user/${$userIdentity.name}`) },
              {
                name: $locale().navigation.myBadgeWall,
                url: root(`/user/${$userIdentity.name}/badges`)
              },
              {
                name: $locale().navigation.logOut,
                url: '#',
                preventDefault: true,
                onClick: async () => {
                  await localforage.removeItem('identity');
                  await localforage.removeItem('commit');

                  document.cookie = 'user=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';

                  window.location.href = root('/api/authentication/log-out');
                }
              }
            ]}
            header={false}
          >
            <span slot="title" class="header-item">
              {$locale().navigation.profile}
            </span>
          </Dropdown>
        {/if}

        {#if data.user === undefined}
          <a
            class="header-item"
            href={`https://anilist.co/api/v2/oauth/authorize?client_id=${env.PUBLIC_ANILIST_CLIENT_ID}&redirect_uri=${env.PUBLIC_ANILIST_REDIRECT_URI}&response_type=code`}
            onclick={async () => {
              await localforage.setItem(
                'redirect',
                window.location.origin + window.location.pathname + window.location.search
              );
            }}
          >
            {$locale().navigation.logIn}
          </a>
        {:else if data.user}
          <a href={root(`/user/${$userIdentity.name}`)} class="header-item">
            <img class="avatar" src={$userIdentity.avatar} alt="Avatar" />
          </a>
        {/if}
      </div>
    </div>

    <Spacer />

    <NotificationsProvider zIndex={5000}>
      <Root {data} {way}>
        {#if $userIdentity.id !== -1}
          <slot />
        {:else if data.url === '/settings'}
          <Skeleton grid={true} count={1} height="10vh" />
          <Skeleton grid={true} count={1} height="30vh" />
          <Skeleton grid={true} count={1} height="30vh" />
        {:else}
          <Skeleton grid={true} count={1} height="10vh" />
          <Skeleton grid={true} count={1} height="80vh" />
        {/if}
      </Root>
    </NotificationsProvider>
  </div>
{/if}

<style lang="scss">
  @use "breakpoints" as *;

  .header {
    font-family:
      'DM Sans',
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      'Segoe UI',
      Roboto,
      Oxygen,
      Ubuntu,
      Cantarell,
      'Open Sans',
      'Helvetica Neue',
      sans-serif;
    font-size: 1.05em;
    font-weight: 600;
    padding: 0.8rem 0.4rem;
    z-index: 4;
    position: sticky;
    top: 1.25rem;
    background-color: var(--base0011-strong);
    transition: transform var(--duration-slow) var(--ease-out-quart);
  }

  .header-hidden {
    transform: translateY(-150%);
  }

  :global(html.light-theme) {
    filter: invert(0);
  }

  :global(html.light-theme img) {
    filter: invert(0);
  }

  .container {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  :global(a) {
    text-decoration: none;
    transition:
      color var(--duration-fast) var(--ease-in-out-quart),
      background-color var(--duration-fast) var(--ease-in-out-quart),
      opacity var(--duration-fast) var(--ease-in-out-quart),
      text-decoration-color var(--duration-fast) var(--ease-in-out-quart);
  }

  :global(a:hover) {
    text-decoration: underline;
  }

  .header-item {
    margin: 0 0.5rem;
    color: var(--base06);
    white-space: nowrap;
  }

  .header-item:hover {
    text-decoration: none;
  }

  .header-item:focus {
    outline: none;
  }

  .header-item:focus-visible {
    outline: 2px solid var(--base0D);
    outline-offset: 2px;
    border-radius: 4px;
  }

  .header-item:active {
    outline: none;
  }

  .avatar {
    width: 2em;
    display: inline-block;
    vertical-align: middle;
    border-radius: 8px;
    box-shadow:
      0 1.5px 9px var(--base01),
      0 0 0 4px var(--base0E),
      0 4px 30px var(--base01);
  }

  .separator {
    color: var(--base04);
  }

  .menu-toggle {
    display: none;
  }

  @media (max-width: $bp-md) {
    .header {
      position: fixed;
      top: 1.25rem;
      right: 1.25rem;
      left: auto;
      width: auto;
      margin: 0;
      padding: 0;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      z-index: 10;
    }

    .header.header-hidden {
      transform: translateY(calc(-100% - 2rem));
    }

    .menu-toggle {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 5px;
      width: 44px;
      height: 44px;
      padding: 0;
      border: none;
      border-radius: 8px;
      background: var(--base0011-strong);
      box-shadow:
        var(--shadow-card-emphasized),
        0 0 0 5px var(--base02);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      cursor: pointer;
    }

    .menu-toggle:hover {
      background: var(--base0011-strong);
    }

    .menu-bar {
      display: block;
      width: 20px;
      height: 2px;
      background: var(--base06);
      border-radius: 2px;
      transition:
        transform var(--duration-base) var(--ease-in-out-quart),
        opacity var(--duration-base) var(--ease-in-out-quart);
    }

    .menu-toggle[aria-expanded='true'] .menu-bar:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
    }

    .menu-toggle[aria-expanded='true'] .menu-bar:nth-child(2) {
      opacity: 0;
    }

    .menu-toggle[aria-expanded='true'] .menu-bar:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
    }

    .nav-items {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      position: absolute;
      top: calc(100% + 0.75rem);
      right: 0;
      min-width: 200px;
      padding: 0.5rem;
      border-radius: 8px;
      background: var(--base0011-strong);
      box-shadow:
        var(--shadow-card-emphasized),
        0 0 0 5px var(--base02);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      transform-origin: top right;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-8px) scale(0.96);
      pointer-events: none;
      transition:
        opacity var(--duration-base) var(--ease-out-quart),
        transform var(--duration-base) var(--ease-out-quart),
        visibility 0s linear var(--duration-base);
    }

    .header.menu-open .nav-items {
      opacity: 1;
      visibility: visible;
      transform: translateY(0) scale(1);
      pointer-events: auto;
      transition:
        opacity var(--duration-base) var(--ease-out-quart),
        transform var(--duration-base) var(--ease-out-quart),
        visibility 0s linear 0s;
    }

    .nav-items :global(.header-item) {
      display: block;
      margin: 0;
      padding: 0.6rem 0.75rem;
    }

    .nav-items :global(.separator),
    .nav-items :global(.header-item:has(.avatar)) {
      display: none;
    }
  }
</style>