web: add notch easter egg & optimize for landscape

it took way too much time to optimize the damn logo sticker under notch for all devices & zoom states

also improved device lib api

web/src/components/misc/NotchSticker.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+
+    import CobaltSticker from "$lib/icons/CobaltSticker.svelte";
+
+    // please add a source link (https://github.com/imputnet/cobalt) if you use this implementation
+    // i spent 4 hours switching between simulators and devices to get the best way to do this
+
+    $: safeAreaTop = 0;
+    $: state = "hidden"; // "notch", "island", "notch x"
+
+    const islandValues = [
+        59, // regular & plus: default
+        48, // regular: larger text
+        51, // plus only: larger text
+    ];
+
+    const xNotch = [44];
+
+    const getSafeAreaTop = () => {
+        const root = document.documentElement;
+        return getComputedStyle(root)
+            .getPropertyValue("--safe-area-inset-top")
+            .trim();
+    };
+
+    onMount(() => {
+        safeAreaTop = Number(getSafeAreaTop().replace("px", ""));
+    });
+
+    $: if (safeAreaTop > 20) {
+        state = "notch";
+        if (islandValues.includes(safeAreaTop)) {
+            state = "island";
+        }
+        if (xNotch.includes(safeAreaTop)) {
+            state = "notch x";
+        }
+    }
+</script>
+
+<div id="cobalt-notch-sticker" aria-hidden="true" class={state}>
+    <CobaltSticker />
+</div>
+
+<style>
+    #cobalt-notch-sticker {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: absolute;
+        top: 0;
+        width: 100%;
+        z-index: 999;
+    }
+
+    #cobalt-notch-sticker.hidden {
+        display: none;
+    }
+
+    #cobalt-notch-sticker.island {
+        padding-top: 15px;
+    }
+
+    #cobalt-notch-sticker.notch {
+        padding-top: 2px;
+    }
+
+    #cobalt-notch-sticker.notch.x :global(svg) {
+        height: 28px;
+    }
+
+    #cobalt-notch-sticker :global(svg) {
+        width: 100px;
+        height: 30px;
+    }
+
+    /* regular iphone size, larger text display mode */
+    @media screen and (max-width: 350px) {
+        #cobalt-notch-sticker.notch :global(svg) {
+            height: 24px;
+        }
+
+        #cobalt-notch-sticker.island {
+            padding-top: 9px;
+        }
+    }
+
+    /* plus iphone size, dynamic island, larger text display mode */
+    @media screen and (max-width: 375px) {
+        #cobalt-notch-sticker.island {
+            padding-top: 11px;
+        }
+    }
+
+    @media screen and (orientation: landscape) {
+        #cobalt-notch-sticker {
+            display: none;
+        }
+    }
+</style>

web/src/components/save/buttons/DownloadButton.svelte

@@ -2,7 +2,7 @@
     import '@fontsource-variable/noto-sans-mono';
 
     import API from "$lib/api";
-    import device from '$lib/device';
+    import { device } from '$lib/device';
 
     export let url: string;
 
@@ -35,7 +35,7 @@
     }
 
     const downloadFile = (url: string) => {
-        if (device.isIOS) {
+        if (device.is.iOS) {
             return navigator?.share({ url }).catch(() => {});
         } else {
             return window.open(url, '_blank');

web/src/components/sidebar/Sidebar.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
     import { t } from "$lib/i18n/translations";
 
+    import { device } from "$lib/device";
+
     import CobaltLogo from "$components/sidebar/CobaltLogo.svelte";
     import SidebarTab from "$components/sidebar/SidebarTab.svelte";
 
@@ -25,7 +27,7 @@
 
 <svelte:window bind:innerWidth={screenWidth} />
 
-<nav id="sidebar" aria-label={$t("a11y.tabs.tabPanel")}>
+<nav id="sidebar" aria-label={$t("a11y.tabs.tabPanel")} class:on-iPhone={device.is.iPhone}>
     <CobaltLogo />
     <div id="sidebar-tabs">
         <div id="sidebar-actions" class="sidebar-inner-container">
@@ -114,4 +116,11 @@
             padding-right: calc(var(--border-radius) * 2);
         }
     }
+
+    /* add padding for notch / dynamic island in landscape */
+    @media screen and (orientation: landscape) {
+        #sidebar.on-iPhone {
+            padding-left: env(safe-area-inset-left);
+        }
+    }
 </style>