implement memorial photo viewer (#119)

* commit current progress\

will prob work on my mac ltr

* more transferring to different device

* grammar

* [F] Fix warning inconsistency

* [O] Split status overlays

* [S] Better styling

* [+] i18n

* [+] Display photos tab conditionally

---------

Co-authored-by: Azalea <22280294+hykilpikonna@users.noreply.github.com>

AquaNet/src/components/ui/Error.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { fade } from "svelte/transition";
+  import { t } from "../../libs/i18n";
+  import { DISCORD_INVITE } from "../../libs/config";
+
+  export let error: string;
+</script>
+
+<div class="overlay" transition:fade>
+  <div>
+    <h2 class="error">{t('status.error')}</h2>
+    <span>{t('status.error.hint')}<a href={DISCORD_INVITE}>{t('status.error.hint.link')}</a></span>
+    <span>{t('status.detail', { detail: error })}</span>
+
+    <div class="actions">
+      <button on:click={() => location.reload()} class="error">
+        {t('action.refresh')}
+      </button>
+    </div>
+  </div>
+</div>
+
+<style lang="sass">
+  .actions
+    display: flex
+    gap: 16px
+
+    button
+      width: 100%
+</style>

AquaNet/src/components/ui/Loading.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import Icon from '@iconify/svelte';
+  import { fade } from 'svelte/transition'
+</script>
+
+<div class="overlay loading" transition:fade>
+  <Icon class="icon" icon="svg-spinners:pulse-2"/>
+  <span><span>LOADING</span></span>
+</div>
+
+<style lang="sass">
+.loading.overlay
+  font-size: 28rem
+
+  :global(.icon)
+    opacity: 0.5
+
+  > span
+    position: absolute
+    inset: 0
+    display: flex
+    justify-content: center
+    align-items: center
+    background: transparent
+
+    letter-spacing: 20px
+    margin-left: 20px
+
+    font-size: 1.5rem
+</style>