fix: remove arrangement delete button

Author: britle20

docs/features/16-arrangement-clip-placement-and-playback.md

@@ -100,7 +100,7 @@ Use the existing `SONG` arrangement layout:
 - Placed clips render as timeline blocks.
 - Dragging a placed clip moves it to another snapped start time or track.
 - Selecting a placed clip shows a clear selected state.
-- Deleting a placed clip instance removes only that arrangement placement, not the source clip from the sidebar.
+- Right-clicking a placed clip instance deletes only that arrangement placement, not the source clip from the sidebar.
 
 Snap should start simple. Prefer beat-level snapping, using 480 ticks, unless the existing arrangement snap control already supports a narrower value. Later features may add user-selectable snap resolution.
 

docs/ui-design.md

@@ -124,7 +124,7 @@ The next arrangement step should make the `SONG` view editable and playable.
 - Dropping a clip creates a visible clip block backed by a serializable `ClipInstance`.
 - Moving a clip block updates `startTick` and `trackId`, not stored pixel positions.
 - Selecting a clip block should show a clear selected state.
-- Deleting a selected clip block removes only the arrangement instance, not the source clip in the sidebar.
+- Right-clicking a clip block deletes only that arrangement instance, not the source clip in the sidebar.
 - Static demo clip blocks should be removed or replaced with seeded serializable state.
 - The arrangement ruler may expose draggable loop start and loop end handles snapped to bar boundaries.
 - The timeline should show loop start/end boundary lines. Avoid filling the full loop range across tracks; a small ruler connector between the loop handles is enough.

src/features/arrangement-view/ArrangementView.module.css

@@ -51,32 +51,6 @@
   white-space: nowrap;
 }
 
-.deleteButton {
-  align-items: center;
-  background: var(--color-surface-container-lowest);
-  border: 1px solid var(--color-outline-variant);
-  border-radius: var(--radius-sm);
-  color: var(--color-text-muted);
-  cursor: pointer;
-  display: flex;
-  font-size: var(--font-size-label);
-  font-weight: var(--font-weight-label);
-  gap: var(--space-unit);
-  min-height: 28px;
-  padding: 0 var(--space-gutter);
-  text-transform: uppercase;
-}
-
-.deleteButton:hover:not(:disabled) {
-  background: var(--color-surface-container-high);
-  color: var(--color-error);
-}
-
-.deleteButton:disabled {
-  cursor: not-allowed;
-  opacity: 0.45;
-}
-
 .snapControl {
   align-items: center;
   background: var(--color-surface-container-lowest);

src/features/arrangement-view/ArrangementView.tsx

@@ -86,9 +86,6 @@ export function ArrangementView({
   const activeTrackIds = new Set(
     clipInstances.map((instance) => instance.trackId),
   );
-  const selectedClipInstance =
-    clipInstances.find((instance) => instance.id === selectedClipInstanceId) ??
-    null;
   const loopStartBoundaryIndex = getArrangementLoopBoundaryIndex(
     loopRange.startTick,
   );
@@ -216,19 +213,6 @@ export function ArrangementView({
           {errorMessage ? (
             <p className={styles.errorBadge}>{errorMessage}</p>
           ) : null}
-          <button
-            className={styles.deleteButton}
-            disabled={!selectedClipInstance}
-            onClick={() => {
-              if (selectedClipInstance) {
-                onClipInstanceDelete(selectedClipInstance.id);
-              }
-            }}
-            type="button"
-          >
-            <Icon name="delete" />
-            <span>Delete selected</span>
-          </button>
           <div className={styles.snapControl} aria-label="Arrangement snap setting">
             <span className={styles.controlLabel}>Snap</span>
             <span className={styles.controlValue}>Beat</span>
@@ -361,6 +345,11 @@ export function ArrangementView({
                           onClipInstanceDelete,
                         })
                       }
+                      onContextMenu={(event) => {
+                        event.preventDefault();
+                        onClipInstanceSelect(instance.id);
+                        onClipInstanceDelete(instance.id);
+                      }}
                       style={getClipStyle({
                         instance,
                         trackIndex: trackIndexById.get(instance.trackId) ?? 0,