migu/common/App.svelte

<script context='module'>
  import { setContext } from 'svelte'
  import { writable } from 'simple-store-svelte'
  import { anilistClient } from '@/modules/anilist.js'

  export const page = writable('home')
  export const view = writable(null)
  export async function handleAnime (anime) {
    view.set(null)
    view.set((await anilistClient.searchIDSingle({ id: anime })).data.Media)
  }
  IPC.on('open-anime', handleAnime)
  IPC.on('schedule', () => {
    page.set('schedule')
  })


</script>

<script>
  import Sidebar from './components/Sidebar.svelte'
  import Router from './Router.svelte'
  import ViewAnime from './views/ViewAnime/ViewAnime.svelte'
  import TorrentModal from './views/TorrentSearch/TorrentModal.svelte'
  import Menubar from './components/Menubar.svelte'
  import { toast, Toaster } from 'svelte-sonner'
  import Logout from './components/Logout.svelte'
  import Navbar from './components/Navbar.svelte'
  import { SUPPORTS } from '@/modules/support.js';
  import IPC from '@/modules/ipc.js'
  import UpdateModal, { changeLog, updateModal } from './components/UpdateModal.svelte';

  setContext('view', view)

  // Cleaning up your messy IPC UPDATER listeners, 
  // and unify them for android. smh.
  // Client IPC listener: update-available, update-downloading, update-downloaded
  // Server IPC listener: update, update-download, quit-and-install

  IPC.on('update-available', () => {
    changeLog.then((cl)=>{
      if (cl[0].version !== localStorage.getItem('ignoredVersion')) {
        $updateModal = true
      }
    })
  })

  IPC.on('update-downloading', () => {
    toast.loading('Downloading Update...', {
      duration: Number.POSITIVE_INFINITY, 
      dismissable: false,
      cancel:{
        label: 'Hide',
        onClick: () => {
          toast.dismiss()
        }
      }
    })
  })

  IPC.on('update-downloaded', () => {
    toast.dismiss()
    toast.success('Update Downloaded.', {
      duration: Number.POSITIVE_INFINITY, 
      action: {
        label: 'Install',
        onClick: () => IPC.emit('quit-and-install')
      }
    })

    $updateModal = false
  })

</script>

<div class='page-wrapper with-transitions bg-dark position-relative' data-sidebar-type='overlayed-all'>
  <Menubar bind:page={$page} />
  <ViewAnime />
  <UpdateModal />
  <Logout />
  <Sidebar bind:page={$page} />
  <div class='overflow-hidden content-wrapper h-full z-10'>
    <Toaster visibleToasts={6} position='top-right' theme='dark' richColors duration={10000} closeButton toastOptions={{
      classes: {
        closeButton: SUPPORTS.isAndroid ? "toast-close-button" : ""
      }

    }} style="margin-top: var(--safe-area-top)"/>
    <TorrentModal />
    <Router bind:page={$page} />
  </div>
  <Navbar bind:page={$page} />
</div>

<style>

  :global(.toast-close-button){
    bottom: -10px !important;
    right: -10px !important;
    left: unset !important;
    top: unset !important;
  }

  :global(:where([data-sonner-toast]) :where([data-disabled='true']) ){
    opacity: 0 !important;
  }

  :global(:root){
    --normal-bg: var(--dark-color-light) !important;
  }

  .content-wrapper {
    will-change: width;
    top: 0 !important;
  }

  .page-wrapper > .content-wrapper {
    margin-left: var(--sidebar-minimised) !important;
    width: calc(100% - var(--sidebar-minimised)) !important;
    transition: none !important;
  }
  .page-wrapper {
    height: calc(100% - var(--navbar-height)) !important;
  }
  @media (min-width: 769px) {
    .page-wrapper  {
      padding-left: max(var(--safe-area-left), env(safe-area-inset-left, 0)) !important;
    }
  }
</style>