rquest/src/lib/components/SidebarActionButton.svelte

<script lang="ts">
  import { createCollection, createRequest } from "$lib/state.svelte";
  import { Button } from "./ui/button";
  import * as DropdownMenu from "./ui/dropdown-menu";
  import DropdownMenuItem from "./ui/dropdown-menu/dropdown-menu-item.svelte";
  import { state as _state } from "$lib/state.svelte";

  const { id = null } = $props();
  const canAdd = $derived(
    id === null || _state.indexes[id].type === "Collection",
  );
</script>

{#if canAdd}
  <DropdownMenu.Root>
    <DropdownMenu.Trigger>
      {#snippet child({ props })}
        <Button {...props} variant="outline">...</Button>
      {/snippet}
    </DropdownMenu.Trigger>

    <DropdownMenu.Content align="start">
      <DropdownMenuItem onclick={() => createCollection(id)}
        >New collection</DropdownMenuItem
      >

      <DropdownMenuItem onclick={() => createRequest(id)}
        >New request</DropdownMenuItem
      >
    </DropdownMenu.Content>
  </DropdownMenu.Root>
{/if}