beavergram/frontend/src/lib/components/RightColumn.svelte

<script lang="ts">
  import AlertsPanel from "#lib/components/alerts/AlertsPanel.svelte";
  import AnnotationsPanel from "#lib/components/annotations/AnnotationsPanel.svelte";
  import BotsPanel from "#lib/components/bots/BotsPanel.svelte";
  import StoragePanel from "#lib/components/disk/StoragePanel.svelte";
  import TrashPanel from "#lib/components/disk/TrashPanel.svelte";
  import JobsPanel from "#lib/components/jobs/JobsPanel.svelte";
  import PolicyEditor from "#lib/components/policy/PolicyEditor.svelte";
  import AnalyticsPanel from "#lib/components/presence/AnalyticsPanel.svelte";
  import ProfilePanel from "#lib/components/profile/ProfilePanel.svelte";
  import ReadersPanel from "#lib/components/read/ReadersPanel.svelte";
  import ChatSearchPanel from "#lib/components/search/ChatSearchPanel.svelte";
  import SharesPanel from "#lib/components/shares/SharesPanel.svelte";
  import CallbacksPanel from "#lib/components/social/CallbacksPanel.svelte";
  import LinksPanel from "#lib/components/social/LinksPanel.svelte";
  import ReactionsPanel from "#lib/components/social/ReactionsPanel.svelte";
  import AllStoriesArchive from "#lib/components/stories/AllStoriesArchive.svelte";
  import StoriesArchive from "#lib/components/stories/StoriesArchive.svelte";
  import Button from "#lib/components/ui/Button.svelte";
  import Icon from "#lib/components/ui/Icon.svelte";
  import WatchesPanel from "#lib/components/watches/WatchesPanel.svelte";
  import WebhooksPanel from "#lib/components/watches/WebhooksPanel.svelte";
  import { t } from "#lib/i18n/locale.svelte.js";
  import { accounts } from "#lib/stores/accounts.svelte.js";
  import { chats } from "#lib/stores/chats.svelte.js";
  import { policyUi } from "#lib/stores/policy.svelte.js";
  import { storageUi } from "#lib/stores/storage.svelte.js";
  import { type RightPanel, ui } from "#lib/stores/ui.svelte.js";

  const titles: Record<RightPanel, string> = $derived({
    alerts: t("settings.alerts"),
    annotations: "Заметки",
    bots: "Боты",
    callbacks: "Callback-данные",
    jobs: "Бэкфилл и задачи",
    links: "Ссылки",
    policy: "Политика захвата",
    presence: "Аналитика",
    profile: "Профиль",
    reactions: "Реакции",
    readers: t("read.readers.title"),
    search: "Поиск",
    shares: "Файлы по ссылке",
    storage: "Хранилище",
    "storage-chat": "Файлы чата",
    "storage-trash": "Корзина",
    stories: "Сторис",
    "stories-all": "Все сторис",
    versions: "Версии",
    watches: t("settings.watches"),
    webhooks: t("watches.webhooks"),
  });

  const parents: Partial<Record<RightPanel, RightPanel>> = {
    "storage-chat": "storage",
    "storage-trash": "storage",
    webhooks: "watches",
  };

  const parent = $derived(ui.rightPanel ? parents[ui.rightPanel] : undefined);
  const title = $derived.by(() => {
    if (ui.rightPanel === null) {
      return "";
    }
    const chat =
      ui.rightPanel === "storage-chat" && storageUi.chatId !== null
        ? chats.byId(storageUi.chatId)
        : undefined;
    return chat?.title ?? titles[ui.rightPanel];
  });
</script>

<header class="right-header">
  {#if parent}
    <Button
      aria-label="Назад"
      onclick={() => ui.openPanel(parent)}
      round
      smaller
      variant="translucent"
    >
      <Icon name="arrow-left" />
    </Button>
  {:else}
    <Button
      aria-label="Закрыть"
      onclick={() => ui.closePanel()}
      round
      smaller
      variant="translucent"
    >
      <Icon name="close" />
    </Button>
  {/if}
  <h2>{title}</h2>
</header>

<div class="right-body custom-scroll">
  {#if ui.rightPanel === "profile"}
    <ProfilePanel />
  {:else if ui.rightPanel === "policy"}
    {#key `${accounts.selectedId}:${policyUi.revision}`}
      <PolicyEditor />
    {/key}
  {:else if ui.rightPanel === "jobs"}
    <JobsPanel />
  {:else if ui.rightPanel === "presence"}
    <AnalyticsPanel />
  {:else if ui.rightPanel === "search"}
    <ChatSearchPanel />
  {:else if ui.rightPanel === "reactions"}
    <ReactionsPanel />
  {:else if ui.rightPanel === "readers"}
    <ReadersPanel />
  {:else if ui.rightPanel === "callbacks"}
    <CallbacksPanel />
  {:else if ui.rightPanel === "links"}
    <LinksPanel />
  {:else if ui.rightPanel === "stories"}
    <StoriesArchive />
  {:else if ui.rightPanel === "stories-all"}
    <AllStoriesArchive />
  {:else if ui.rightPanel === "watches"}
    {#key accounts.selectedId}
      <WatchesPanel />
    {/key}
  {:else if ui.rightPanel === "webhooks"}
    {#key accounts.selectedId}
      <WebhooksPanel />
    {/key}
  {:else if ui.rightPanel === "alerts"}
    <AlertsPanel />
  {:else if ui.rightPanel === "annotations"}
    <AnnotationsPanel />
  {:else if ui.rightPanel === "shares"}
    <SharesPanel />
  {:else if ui.rightPanel === "bots"}
    <BotsPanel />
  {:else if ui.rightPanel === "storage"}
    {#key accounts.selectedId}
      <StoragePanel />
    {/key}
  {:else if ui.rightPanel === "storage-chat"}
    {#key `${accounts.selectedId}:${storageUi.chatId}`}
      <StoragePanel chatId={storageUi.chatId} />
    {/key}
  {:else if ui.rightPanel === "storage-trash"}
    {#key accounts.selectedId}
      <TrashPanel />
    {/key}
  {/if}
</div>

<style lang="scss">
  .right-header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.75rem;

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

    h2 {
      overflow: hidden;

      min-width: 0;
      margin: 0;

      font-size: 1.25rem;
      font-weight: var(--font-weight-medium);
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .right-body {
    overflow-y: auto;
    flex: 1;
  }
</style>