dbgate/packages/web/src/buttons/ToolStripContainer.svelte

<script lang="ts">
  import { get_current_component } from 'svelte/internal';
  import createActivator, { isComponentActiveStore } from '../utility/createActivator';

  const thisInstance = get_current_component();

  export let showAlways = false;
  export const activator = showAlways ? null : createActivator('ToolStripContainer', true);

  export function activate() {
    activator?.activate();
  }

  export let scrollContent = false;
  export let hideToolStrip = false;

  $: isComponentActive = showAlways || ($isComponentActiveStore('ToolStripContainer', thisInstance) && !hideToolStrip);
</script>

<div class="wrapper">
  <div class="content" class:scrollContent class:isComponentActive>
    <slot />
  </div>

  {#if isComponentActive}
    <div class="toolstrip">
      <slot name="toolstrip" />
    </div>
  {/if}
</div>

<style>
  .wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .content {
    border-bottom: 1px solid var(--theme-border);
    display: flex;
    flex: 1;
    position: relative;
    max-height: 100%;
  }

  .content.isComponentActive {
    max-height: calc(100% - 30px);
  }

  .toolstrip {
    display: flex;
    flex-wrap: wrap;
    background: var(--theme-bg-1);
  }

  .scrollContent {
    overflow-y: auto;
  }
</style>