radicle-desktop/src/components/FileBlock.svelte

<script lang="ts">
  import type { Snippet } from "svelte";

  import { tick } from "svelte";

  import Button from "@app/components/Button.svelte";
  import Icon from "@app/components/Icon.svelte";

  interface Props {
    children: Snippet;
    expandable?: boolean;
    expanded?: boolean;
    leftHeader?: Snippet;
    rightHeader?: Snippet;
    sticky?: boolean;
    border?: boolean;
  }

  /* eslint-disable prefer-const */
  let {
    children,
    expanded = true,
    leftHeader,
    rightHeader,
    sticky = true,
    expandable = true,
    border = true,
  }: Props = $props();
  /* eslint-enable prefer-const */

  let header: HTMLElement | undefined = $state();
</script>

<style>
  .header {
    display: flex;
    align-items: center;
    height: 2.5rem;
    padding-left: 0.25rem;
    z-index: 2;
    font: var(--txt-body-m-regular);
    position: relative;
    background-color: var(--color-surface-canvas);
    border-top-left-radius: var(--border-radius-md);
    border-top-right-radius: var(--border-radius-md);
  }
  .header.collapsed {
    border-bottom-left-radius: var(--border-radius-md);
    border-bottom-right-radius: var(--border-radius-md);
  }

  .sticky {
    position: sticky;
    top: 0;
  }

  .left {
    display: flex;
    gap: 0.5rem;
    margin-right: 1rem;
    align-items: center;
  }

  .container {
    position: relative;
    overflow-x: auto;
    z-index: 1;
    border-top: none;
    border-bottom-left-radius: var(--border-radius-md);
    border-bottom-right-radius: var(--border-radius-md);
  }
</style>

<div
  class="header"
  class:sticky
  class:collapsed={!expanded}
  bind:this={header}
  style:border={border ? "1px solid var(--color-border-subtle)" : undefined}
  style:border-bottom={border
    ? "undefined"
    : "1px solid var(--color-border-subtle)"}>
  <div class="left">
    {#if expandable}
      <Button
        variant="naked"
        onclick={async () => {
          expanded = !expanded;
          if (!expanded && header) {
            await tick();
            header.scrollIntoView({ behavior: "smooth", block: "nearest" });
          }
        }}>
        <Icon name={expanded ? "chevron-down" : "chevron-right"} />
      </Button>
    {/if}
    {@render leftHeader?.()}
  </div>
  {#if rightHeader}
    <div
      class="global-flex"
      style:gap="1rem"
      style:margin-left="auto"
      style:margin-right="1rem">
      {@render rightHeader()}
    </div>
  {/if}
</div>

{#if expanded}
  <div
    class="container"
    style:border={border ? "1px solid var(--color-border-subtle)" : "undefined"}
    style:border-top="none">
    {@render children()}
  </div>
{/if}