beavergram/frontend/src/routes/app/+layout.svelte

<script lang="ts">
  import { cubicOut } from "svelte/easing";
  import { fly } from "svelte/transition";
  import { page } from "$app/state";
  import ChatList from "$lib/components/ChatList.svelte";
  import FolderTabs from "$lib/components/FolderTabs.svelte";
  import RightColumn from "$lib/components/RightColumn.svelte";
  import SearchInput from "$lib/components/search/SearchInput.svelte";
  import SearchResults from "$lib/components/search/SearchResults.svelte";
  import Settings from "$lib/components/settings/Settings.svelte";
  import ShareDialog from "$lib/components/shares/ShareDialog.svelte";
  import Button from "$lib/components/ui/Button.svelte";
  import Icon from "$lib/components/ui/Icon.svelte";
  import { accounts } from "$lib/stores/accounts.svelte";
  import { auth } from "$lib/stores/auth.svelte";
  import { events } from "$lib/stores/events.svelte";
  import { search } from "$lib/stores/search.svelte";
  import { shareUi } from "$lib/stores/shares.svelte";
  import { toasts } from "$lib/stores/toasts.svelte";
  import { ui } from "$lib/stores/ui.svelte";

  let { children } = $props();

  const chatOpen = $derived(page.params.chatId != null);

  $effect(() => {
    if (!accounts.loaded) {
      accounts.load().catch(() => toasts.error("Failed to load accounts"));
    }
  });

  $effect(() => {
    events.open(auth.token === null ? null : accounts.selectedId);
  });
</script>

<div
  id="Main"
  class:with-right={ui.rightPanel !== null}
  class:chat-open={chatOpen}
>
  <div id="LeftColumn">
    {#if ui.leftView === "settings"}
      <div
        class="left-view"
        in:fly={{ x: 64, duration: 200, easing: cubicOut }}
      >
        <Settings />
      </div>
    {:else}
      <div
        class="left-view"
        in:fly={{ x: -64, duration: 200, easing: cubicOut }}
      >
        <header class="left-header">
          {#if search.active}
            <Button
              variant="translucent"
              round
              smaller
              onclick={() => search.close()}
              aria-label="Назад"
            >
              <Icon name="arrow-left" />
            </Button>
          {:else}
            <Button
              variant="translucent"
              round
              smaller
              onclick={() => ui.openSettings()}
              aria-label="Меню"
            >
              <Icon name="menu" />
            </Button>
          {/if}
          <SearchInput />
        </header>
        {#if search.active && search.trimmed}
          <SearchResults />
        {:else}
          <div class="folder-tabs">
            <FolderTabs />
          </div>
          <ChatList />
        {/if}
      </div>
    {/if}
  </div>
  <div id="MiddleColumn">
    {@render children()}
  </div>
  {#if ui.rightPanel !== null}
    <div
      id="RightColumn"
      transition:fly={{ x: 320, duration: 200, easing: cubicOut }}
    >
      <RightColumn />
    </div>
  {/if}
</div>

<ShareDialog
  bind:open={shareUi.open}
  subject={shareUi.subject}
  label={shareUi.label}
  onchange={() => shareUi.touch()}
/>

<style lang="scss">
  #Main {
    display: grid;
    grid-template-columns: minmax(16rem, 26.5rem) 1fr;
    grid-template-rows: 100%;

    overflow: hidden;
    height: 100%;

    &.with-right {
      grid-template-columns: minmax(16rem, 26.5rem) 1fr minmax(20rem, 25rem);
    }

    @media (max-width: 600px) {
      grid-template-columns: 100%;

      &.with-right {
        grid-template-columns: 100%;
      }

      #LeftColumn,
      #MiddleColumn,
      #RightColumn {
        grid-row: 1;
        grid-column: 1;
      }

      #RightColumn {
        position: relative;
        z-index: 1;
      }

      #MiddleColumn {
        display: none;
      }

      &.chat-open {
        #LeftColumn {
          display: none;
        }

        #MiddleColumn {
          display: block;
        }
      }
    }
  }

  #LeftColumn {
    display: flex;
    flex-direction: column;

    overflow: hidden;
    height: 100%;
    border-right: 1px solid var(--color-borders);

    background-color: var(--color-background);
  }

  .left-view {
    display: flex;
    flex: 1;
    flex-direction: column;

    overflow: hidden;
    min-height: 0;
  }

  .left-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    height: var(--header-height);
    padding: 0 0.625rem;
    border-bottom: 1px solid var(--color-borders);
  }

  .folder-tabs {
    flex-shrink: 0;
    padding: 0.25rem 0.5rem 0;
  }

  #MiddleColumn {
    position: relative;
    overflow: hidden;
    height: 100%;
    background-color: var(--color-background-secondary);
  }

  #RightColumn {
    display: flex;
    flex-direction: column;

    overflow: hidden;
    height: 100%;
    border-left: 1px solid var(--color-borders);

    background-color: var(--color-background);
  }
</style>