mpckit/frontend/src/lib/SlotGrid.svelte

<script lang="ts" module>
  export type Cell = {
    slot: number;
    label: string; // "A01"
    name: string; // sample or sequence name; empty for an empty slot
    meta: string; // small line under the name
    aria: string;
  };
</script>

<script lang="ts">
  // A 4x4 grid of pads or sequence slots, used by both tabs.
  let {
    cells,
    selected,
    onpick,
    dropTarget = false,
  }: {
    cells: Cell[]; // 16 cells in grid order, top-left first
    selected: number;
    onpick: (slot: number) => void;
    dropTarget?: boolean; // accept WAV files dropped from the system
  } = $props();
</script>

<div class="grid">
  {#each cells as c (c.slot)}
    <button
      type="button"
      class:filled={c.name !== ""}
      class:on={c.slot === selected}
      aria-pressed={c.slot === selected}
      aria-label={c.aria}
      data-file-drop-target={dropTarget ? "" : undefined}
      data-slot={c.slot}
      onclick={() => onpick(c.slot)}
    >
      <span class="num">{c.label}</span>
      <span class="name">{c.name}</span>
      <span class="meta">{c.meta}</span>
    </button>
  {/each}
</div>

<style>
  /* Fills the height its panel gives it: four equal rows. */
  .grid {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }
  button {
    min-height: 0;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4px;
    text-align: left;
    background: var(--cell-empty);
    color: var(--text);
    border: 2px solid var(--line);
    border-radius: 8px;
    font: inherit;
    cursor: pointer;
    overflow: hidden;
  }
  button.filled {
    background: var(--cell-filled);
    border-color: var(--cell-filled-edge);
  }
  button.on {
    border-color: var(--accent);
  }
  /* Wails adds this class while a file is dragged over a drop target. */
  button:global(.file-drop-target-active) {
    border-color: var(--accent);
    background: rgba(245, 165, 36, 0.12);
  }
  .num {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--muted);
  }
  button.on .num {
    color: var(--accent);
  }
  .name {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .meta {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--soft);
    min-height: 15px;
    white-space: nowrap;
  }
</style>