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 NotesPanel from "#lib/components/annotations/NotesPanel.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 ChatChanges from "#lib/components/feed/ChatChanges.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 type { MessageKey } from "#lib/i18n/messages.js";
  import { accounts } from "#lib/stores/accounts.svelte.js";
  import { chats } from "#lib/stores/chats.svelte.js";
  import { notes } from "#lib/stores/notes.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, MessageKey> = {
    alerts: "settings.alerts",
    annotations: "panel.annotations",
    bots: "settings.bots",
    callbacks: "panel.callbacks",
    changes: "feed.changes",
    jobs: "settings.jobs",
    links: "panel.links",
    notes: "notes.title",
    policy: "settings.policy",
    presence: "chat.analytics",
    profile: "chat.profile",
    reactions: "panel.reactions",
    readers: "read.readers.title",
    search: "panel.search",
    shares: "settings.shares",
    storage: "settings.storage",
    "storage-chat": "panel.chatFiles",
    "storage-trash": "panel.trash",
    stories: "settings.stories",
    "stories-all": "panel.allStories",
    watches: "settings.watches",
    webhooks: "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 "";
    }
    if (ui.rightPanel === "notes" && notes.tag !== null) {
      return t("notes.tag", { tag: notes.tag });
    }
    const chat =
      ui.rightPanel === "storage-chat" && storageUi.chatId !== null
        ? chats.byId(storageUi.chatId)
        : undefined;
    return chat?.title ?? t(titles[ui.rightPanel]);
  });
</script>

<header class="right-header">
  {#if parent}
    <Button
      aria-label={t("common.back")}
      onclick={() => ui.openPanel(parent)}
      round
      smaller
      variant="translucent"
    >
      <Icon name="arrow-left" />
    </Button>
  {:else}
    <Button
      aria-label={t("common.close")}
      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 === "changes"}
    {#key accounts.selectedId}
      <ChatChanges />
    {/key}
  {: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 === "notes"}
    {#key accounts.selectedId}
      <NotesPanel />
    {/key}
  {: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>