upend/webui/src/components/SelectedColumn.svelte

<script lang="ts">
  import { i18n } from "../i18n";
  import { selected } from "./EntitySelect.svelte";
  import EntryView from "./EntryView.svelte";
  import EntityList from "./widgets/EntityList.svelte";

  const selectedWidgets = [
    {
      name: "List",
      icon: "list-check",
      components: ({ entities }) => [
        {
          component: EntityList,
          props: {
            entities,
            thumbnails: false,
            selectable: false,
          },
        },
      ],
    },
    {
      name: "EntityList",
      icon: "image",
      components: ({ entities }) => [
        {
          component: EntityList,
          props: {
            entities,
            thumbnails: true,
            selectable: false,
          },
        },
      ],
    },
  ];
</script>

<div class="view">
  <h2>{$i18n.t("Selected")}</h2>
  <div class="entities">
    <EntryView entities={$selected} widgets={selectedWidgets} />
  </div>
</div>

<style lang="scss">
  .view {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  h2 {
    text-align: center;
    margin: 0;
  }

  .entities {
    flex-grow: 1;
    overflow-y: auto;
  }
</style>