From 44ca01761a77ca63e187b3c01fbbf0ff349ec864 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9lix=20Lavi=C3=A9ville?= <lavieville.felix@gmail.com>
Date: Sun, 22 Feb 2026 10:49:33 +0100
Subject: [PATCH 1/3] ffix: using Canvas instead of morbillions of divs

---
 .../app/timeline/PianoRoll/PianoGrid.vue      |   1 +
 .../timeline/PianoRoll/PianoGridCanvas.vue    | 274 +++++++++++++++++
 .../app/timeline/PianoRoll/PianoRoll.vue      |   6 +-
 .../components/app/timeline/TimelineView.vue  |   4 +-
 .../pianoGrid/usePianoGridCanvas.ts           | 241 +++++++++++++++
 .../pianoGrid/usePianoGridSelection.ts        |   5 +-
 webapp/src/lib/canvas/pianoGridRenderer.ts    | 288 ++++++++++++++++++
 7 files changed, 815 insertions(+), 4 deletions(-)
 create mode 100644 webapp/src/components/app/timeline/PianoRoll/PianoGridCanvas.vue
 create mode 100644 webapp/src/composables/pianoGrid/usePianoGridCanvas.ts
 create mode 100644 webapp/src/lib/canvas/pianoGridRenderer.ts

diff --git a/webapp/src/components/app/timeline/PianoRoll/PianoGrid.vue b/webapp/src/components/app/timeline/PianoRoll/PianoGrid.vue
index 2ca7fef..54ee2c2 100644
--- a/webapp/src/components/app/timeline/PianoRoll/PianoGrid.vue
+++ b/webapp/src/components/app/timeline/PianoRoll/PianoGrid.vue
@@ -59,6 +59,7 @@ const {
   removeFromSelection,
   cleanup: cleanupSelection,
 } = usePianoGridSelection(
+  null,
   () => props.notes,
   () => props.colWidth,
   () => gridWidth.value,
diff --git a/webapp/src/components/app/timeline/PianoRoll/PianoGridCanvas.vue b/webapp/src/components/app/timeline/PianoRoll/PianoGridCanvas.vue
new file mode 100644
index 0000000..dac4d7b
--- /dev/null
+++ b/webapp/src/components/app/timeline/PianoRoll/PianoGridCanvas.vue
@@ -0,0 +1,274 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onBeforeUnmount } from "vue";
+import type { MidiNote, NoteName } from "../../../../lib/utils/types";
+import {
+  TOTAL_NOTES,
+  NOTE_ROW_HEIGHT,
+} from "../../../../lib/audio/pianoRollConstants";
+import { usePianoGridCanvas } from "../../../../composables/pianoGrid/usePianoGridCanvas";
+import {
+  usePianoGridSelection,
+  usePianoGridResize,
+  usePianoGridDrag,
+  usePianoGridClipboard,
+  usePianoGridKeyboard,
+} from "../../../../composables/pianoGrid";
+
+const props = defineProps<{
+  notes: MidiNote[];
+  cols: number;
+  colWidth: number;
+  color: string;
+  activeNotes: Set<NoteName>;
+  trackId: string;
+}>();
+
+const emit = defineEmits<{
+  (e: "add-note", x: number, y: number): void;
+  (e: "remove-note", noteId: string): void;
+  (
+    e: "update-notes",
+    updates: Array<{ noteId: string; updates: Partial<MidiNote> }>,
+  ): void;
+  (e: "delete-notes", noteIds: string[]): void;
+  (e: "paste-notes", notes: Array<{ x: number; y: number; w: number }>): void;
+  (e: "undo"): void;
+  (e: "redo"): void;
+}>();
+
+const canvasRef = ref<HTMLCanvasElement | null>(null);
+const containerRef = ref<HTMLDivElement | null>(null);
+const mouseGridPos = ref<{ col: number; row: number }>({ col: 0, row: 0 });
+const justFinishedInteracting = ref(false);
+
+const gridWidth = computed(() => props.cols * props.colWidth);
+const gridHeight = computed(() => TOTAL_NOTES * NOTE_ROW_HEIGHT);
+
+// Selection composable with containerRef
+const {
+  selectedNotes,
+  selectionRect,
+  isSelecting,
+  justFinishedSelecting,
+  handleSelectionStart,
+  toggleNoteSelection,
+  clearSelection,
+  removeFromSelection,
+  cleanup: cleanupSelection,
+} = usePianoGridSelection(
+  containerRef,
+  () => props.notes,
+  () => props.colWidth,
+  () => gridWidth.value,
+  () => gridHeight.value,
+);
+
+// Resize composable
+const {
+  resizingState,
+  resizePreviewDelta,
+  isResizing,
+  handleResizeStart,
+  cleanup: cleanupResize,
+} = usePianoGridResize(
+  () => props.notes,
+  selectedNotes,
+  () => props.colWidth,
+  () => props.cols,
+  (updates) => emit("update-notes", updates),
+  () => {
+    justFinishedInteracting.value = true;
+  },
+);
+
+// Drag composable
+const {
+  dragState,
+  dragPreviewDeltas,
+  isDragging,
+  handleDragStart,
+  cleanup: cleanupDrag,
+} = usePianoGridDrag(
+  () => props.notes,
+  selectedNotes,
+  () => props.colWidth,
+  () => props.cols,
+  (updates) => emit("update-notes", updates),
+  () => {
+    justFinishedInteracting.value = true;
+  },
+);
+
+// Clipboard composable
+const { copySelectedNotes, pasteNotes, duplicateSelectedNotes } =
+  usePianoGridClipboard(
+    () => props.notes,
+    selectedNotes,
+    () => props.cols,
+    mouseGridPos,
+    (notes) => emit("paste-notes", notes),
+  );
+
+// Delete selected notes
+const deleteSelectedNotes = () => {
+  const noteIds = Array.from(selectedNotes.value);
+  emit("delete-notes", noteIds);
+  selectedNotes.value.clear();
+};
+
+// Keyboard composable
+usePianoGridKeyboard(selectedNotes, {
+  onUndo: () => emit("undo"),
+  onRedo: () => emit("redo"),
+  onDelete: deleteSelectedNotes,
+  onEscape: clearSelection,
+  onCopy: copySelectedNotes,
+  onPaste: pasteNotes,
+  onDuplicate: duplicateSelectedNotes,
+});
+
+// Canvas composable
+const { initCanvas, getNoteAtPosition, isOnResizeHandle } = usePianoGridCanvas(
+  canvasRef,
+  {
+    cols: () => props.cols,
+    colWidth: () => props.colWidth,
+    notes: () => props.notes,
+    trackColor: () => props.color,
+    activeNotes: () => props.activeNotes,
+    selectedNotes,
+    dragState,
+    dragPreviewDeltas,
+    resizingState,
+    resizePreviewDelta,
+    selectionRect,
+  },
+);
+
+// Event handlers adapted for Canvas
+const handleMouseMove = (event: MouseEvent) => {
+  const rect = canvasRef.value!.getBoundingClientRect();
+  const x = event.clientX - rect.left;
+  const y = event.clientY - rect.top;
+  mouseGridPos.value = {
+    col: Math.floor(x / props.colWidth),
+    row: Math.floor(y / NOTE_ROW_HEIGHT),
+  };
+};
+
+const handleMouseDown = (event: MouseEvent) => {
+  const rect = canvasRef.value!.getBoundingClientRect();
+  const x = event.clientX - rect.left;
+  const y = event.clientY - rect.top;
+
+  const note = getNoteAtPosition(x, y);
+
+  if (note) {
+    if (isOnResizeHandle(x, note)) {
+      handleResizeStart(event, note);
+    } else if (event.ctrlKey || event.metaKey) {
+      toggleNoteSelection(note.i);
+    } else {
+      handleDragStart(event, note);
+    }
+  } else if (event.ctrlKey || event.metaKey) {
+    event.preventDefault();
+    handleSelectionStart(event);
+  }
+};
+
+const handleClick = (event: MouseEvent) => {
+  if (justFinishedInteracting.value || justFinishedSelecting.value) {
+    justFinishedInteracting.value = false;
+    justFinishedSelecting.value = false;
+    return;
+  }
+
+  const rect = canvasRef.value!.getBoundingClientRect();
+  const x = event.clientX - rect.left;
+  const y = event.clientY - rect.top;
+
+  const note = getNoteAtPosition(x, y);
+
+  if (!note) {
+    const col = Math.floor(x / props.colWidth);
+    const row = Math.floor(y / NOTE_ROW_HEIGHT);
+
+    if (col >= 0 && col < props.cols && row >= 0 && row < TOTAL_NOTES) {
+      clearSelection();
+      emit("add-note", col, row);
+    }
+  }
+};
+
+const handleRightClick = (event: MouseEvent) => {
+  event.preventDefault();
+
+  const rect = canvasRef.value!.getBoundingClientRect();
+  const x = event.clientX - rect.left;
+  const y = event.clientY - rect.top;
+
+  const note = getNoteAtPosition(x, y);
+
+  if (note) {
+    emit("remove-note", note.i);
+    removeFromSelection(note.i);
+  } else {
+    clearSelection();
+  }
+};
+
+onMounted(() => {
+  initCanvas();
+});
+
+onBeforeUnmount(() => {
+  cleanupSelection();
+  cleanupResize();
+  cleanupDrag();
+});
+</script>
+
+<template>
+  <div
+    ref="containerRef"
+    class="piano-grid-canvas"
+    :class="{
+      resizing: isResizing,
+      dragging: isDragging,
+      selecting: isSelecting,
+    }"
+    :style="{ width: `${gridWidth}px`, height: `${gridHeight}px` }"
+  >
+    <canvas
+      ref="canvasRef"
+      @mousemove="handleMouseMove"
+      @mousedown="handleMouseDown"
+      @click="handleClick"
+      @contextmenu="handleRightClick"
+    />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.piano-grid-canvas {
+  position: relative;
+  cursor: crosshair;
+
+  &.resizing {
+    cursor: ew-resize;
+  }
+
+  &.dragging {
+    cursor: grabbing;
+  }
+
+  &.selecting {
+    cursor: crosshair;
+  }
+
+  canvas {
+    display: block;
+  }
+}
+</style>
diff --git a/webapp/src/components/app/timeline/PianoRoll/PianoRoll.vue b/webapp/src/components/app/timeline/PianoRoll/PianoRoll.vue
index 6d915b1..28f83c5 100644
--- a/webapp/src/components/app/timeline/PianoRoll/PianoRoll.vue
+++ b/webapp/src/components/app/timeline/PianoRoll/PianoRoll.vue
@@ -11,6 +11,9 @@ import {
 } from "../../../../lib/audio/pianoRollConstants";
 import PianoKeys from "./PianoKeys.vue";
 import PianoGrid from "./PianoGrid.vue";
+import PianoGridCanvas from "./PianoGridCanvas.vue";
+
+const USE_CANVAS_GRID = true;
 
 const props = defineProps<{
   track: Track;
@@ -150,7 +153,8 @@ onBeforeUnmount(() => {
       @note-stop="handleNoteStop"
       @all-notes-stop="handleAllNotesStop"
     />
-    <PianoGrid
+    <component
+      :is="USE_CANVAS_GRID ? PianoGridCanvas : PianoGrid"
       :notes="track.notes"
       :cols="cols"
       :col-width="colWidth"
diff --git a/webapp/src/components/app/timeline/TimelineView.vue b/webapp/src/components/app/timeline/TimelineView.vue
index 32cb796..d6785eb 100644
--- a/webapp/src/components/app/timeline/TimelineView.vue
+++ b/webapp/src/components/app/timeline/TimelineView.vue
@@ -66,7 +66,7 @@ const sortedTracks = computed(() => timelineStore.sortedTracks);
 const TRACK_HEADER_WIDTH = 180;
 
 const cursorStyle = computed(() => ({
-  left: `${currentPosition.value * COL_WIDTH + TRACK_HEADER_WIDTH}px`,
+  transform: `translateX(${currentPosition.value * COL_WIDTH + TRACK_HEADER_WIDTH}px)`,
 }));
 
 const noteNamesDescending = [
@@ -730,10 +730,12 @@ defineExpose({
   position: absolute;
   top: 0;
   bottom: 0;
+  left: 0;
   width: 2px;
   background: #ef4444;
   pointer-events: none;
   z-index: 50;
+  will-change: transform;
 
   &::before {
     content: "";
diff --git a/webapp/src/composables/pianoGrid/usePianoGridCanvas.ts b/webapp/src/composables/pianoGrid/usePianoGridCanvas.ts
new file mode 100644
index 0000000..f6ba62d
--- /dev/null
+++ b/webapp/src/composables/pianoGrid/usePianoGridCanvas.ts
@@ -0,0 +1,241 @@
+import { ref, watch, type Ref } from "vue";
+import type { MidiNote, NoteName } from "../../lib/utils/types";
+import {
+  TOTAL_NOTES,
+  NOTE_ROW_HEIGHT,
+  noteIndexToName,
+} from "../../lib/audio/pianoRollConstants";
+import {
+  PianoGridRenderer,
+  type NoteRenderData,
+  type SelectionRectData,
+} from "../../lib/canvas/pianoGridRenderer";
+
+interface DragState {
+  notesInitialPos: Map<string, { x: number; y: number }>;
+}
+
+interface ResizingState {
+  notesInitialWidth: Map<string, { width: number }>;
+}
+
+interface SelectionRect {
+  startX: number;
+  startY: number;
+  currentX: number;
+  currentY: number;
+}
+
+interface UsePianoGridCanvasConfig {
+  cols: () => number;
+  colWidth: () => number;
+  notes: () => MidiNote[];
+  trackColor: () => string;
+  activeNotes: () => Set<NoteName>;
+  selectedNotes: Ref<Set<string>>;
+  dragState: Ref<DragState | null>;
+  dragPreviewDeltas: Ref<{ dx: number; dy: number } | null>;
+  resizingState: Ref<ResizingState | null>;
+  resizePreviewDelta: Ref<number | null>;
+  selectionRect: Ref<SelectionRect | null>;
+}
+
+export function usePianoGridCanvas(
+  canvasRef: Ref<HTMLCanvasElement | null>,
+  config: UsePianoGridCanvasConfig,
+) {
+  const renderer = ref<PianoGridRenderer | null>(null);
+  let renderScheduled = false;
+  let dpr = 1;
+
+  const initCanvas = () => {
+    const canvas = canvasRef.value;
+    if (!canvas) return;
+
+    dpr = window.devicePixelRatio || 1;
+
+    const width = config.cols() * config.colWidth();
+    const height = TOTAL_NOTES * NOTE_ROW_HEIGHT;
+
+    canvas.style.width = `${width}px`;
+    canvas.style.height = `${height}px`;
+
+    canvas.width = width * dpr;
+    canvas.height = height * dpr;
+
+    const ctx = canvas.getContext("2d")!;
+    ctx.scale(dpr, dpr);
+
+    renderer.value = new PianoGridRenderer(
+      ctx,
+      {
+        cols: config.cols(),
+        colWidth: config.colWidth(),
+        trackColor: config.trackColor(),
+      },
+      width,
+      height,
+    );
+
+    render();
+  };
+
+  const updateCanvasSize = () => {
+    const canvas = canvasRef.value;
+    if (!canvas || !renderer.value) return;
+
+    const width = config.cols() * config.colWidth();
+    const height = TOTAL_NOTES * NOTE_ROW_HEIGHT;
+
+    canvas.style.width = `${width}px`;
+    canvas.style.height = `${height}px`;
+
+    canvas.width = width * dpr;
+    canvas.height = height * dpr;
+
+    const ctx = canvas.getContext("2d")!;
+    ctx.scale(dpr, dpr);
+
+    renderer.value.updateConfig(
+      {
+        cols: config.cols(),
+        colWidth: config.colWidth(),
+        trackColor: config.trackColor(),
+      },
+      width,
+      height,
+    );
+
+    render();
+  };
+
+  const scheduleRender = () => {
+    if (renderScheduled) return;
+    renderScheduled = true;
+    requestAnimationFrame(() => {
+      render();
+      renderScheduled = false;
+    });
+  };
+
+  const render = () => {
+    if (!renderer.value) return;
+
+    const noteData: NoteRenderData[] = config.notes().map((note) => {
+      const isDragging =
+        config.dragState.value?.notesInitialPos.has(note.i) ?? false;
+      const isResizing =
+        config.resizingState.value?.notesInitialWidth.has(note.i) ?? false;
+
+      let previewX: number | undefined;
+      let previewY: number | undefined;
+      let previewW: number | undefined;
+
+      if (isDragging && config.dragPreviewDeltas.value) {
+        const initial = config.dragState.value!.notesInitialPos.get(note.i)!;
+        previewX = initial.x + config.dragPreviewDeltas.value.dx;
+        previewY = initial.y + config.dragPreviewDeltas.value.dy;
+      }
+
+      if (isResizing && config.resizePreviewDelta.value !== null) {
+        const initial = config.resizingState.value!.notesInitialWidth.get(
+          note.i,
+        )!;
+        previewW = initial.width + config.resizePreviewDelta.value;
+      }
+
+      return {
+        id: note.i,
+        x: note.x,
+        y: note.y,
+        w: note.w,
+        isSelected: config.selectedNotes.value.has(note.i),
+        isDragging,
+        isResizing,
+        previewX,
+        previewY,
+        previewW,
+      };
+    });
+
+    const activeRows = new Set<number>();
+    for (let i = 0; i < TOTAL_NOTES; i++) {
+      if (config.activeNotes().has(noteIndexToName(i))) {
+        activeRows.add(i);
+      }
+    }
+
+    let selRect: SelectionRectData | null = null;
+    if (config.selectionRect.value) {
+      const sr = config.selectionRect.value;
+      selRect = {
+        x: Math.min(sr.startX, sr.currentX),
+        y: Math.min(sr.startY, sr.currentY),
+        w: Math.abs(sr.currentX - sr.startX),
+        h: Math.abs(sr.currentY - sr.startY),
+      };
+    }
+
+    renderer.value.render(noteData, activeRows, selRect);
+  };
+
+  watch(
+    [
+      () => config.notes(),
+      () => config.activeNotes(),
+      config.selectedNotes,
+      config.dragState,
+      config.dragPreviewDeltas,
+      config.resizingState,
+      config.resizePreviewDelta,
+      config.selectionRect,
+    ],
+    scheduleRender,
+    { deep: true },
+  );
+
+  watch([() => config.cols(), () => config.colWidth()], updateCanvasSize);
+
+  const getNoteAtPosition = (x: number, y: number): MidiNote | null => {
+    if (!renderer.value) return null;
+
+    const noteData: NoteRenderData[] = config.notes().map((note) => ({
+      id: note.i,
+      x: note.x,
+      y: note.y,
+      w: note.w,
+      isSelected: false,
+      isDragging: false,
+      isResizing: false,
+    }));
+
+    const found = renderer.value.getNoteAtPosition(x, y, noteData);
+    if (!found) return null;
+
+    return config.notes().find((n) => n.i === found.id) ?? null;
+  };
+
+  const isOnResizeHandle = (x: number, note: MidiNote): boolean => {
+    if (!renderer.value) return false;
+
+    const noteData: NoteRenderData = {
+      id: note.i,
+      x: note.x,
+      y: note.y,
+      w: note.w,
+      isSelected: false,
+      isDragging: false,
+      isResizing: false,
+    };
+
+    return renderer.value.isOnResizeHandle(x, noteData);
+  };
+
+  return {
+    initCanvas,
+    render,
+    scheduleRender,
+    getNoteAtPosition,
+    isOnResizeHandle,
+  };
+}
diff --git a/webapp/src/composables/pianoGrid/usePianoGridSelection.ts b/webapp/src/composables/pianoGrid/usePianoGridSelection.ts
index d8b95df..0a7d760 100644
--- a/webapp/src/composables/pianoGrid/usePianoGridSelection.ts
+++ b/webapp/src/composables/pianoGrid/usePianoGridSelection.ts
@@ -1,4 +1,4 @@
-import { ref, computed } from "vue";
+import { ref, computed, type Ref } from "vue";
 import type { MidiNote } from "../../lib/utils/types";
 import { NOTE_ROW_HEIGHT } from "../../lib/audio/pianoRollConstants";
 
@@ -10,6 +10,7 @@ export interface SelectionRect {
 }
 
 export function usePianoGridSelection(
+  containerRef: Ref<HTMLElement | null> | null,
   notes: () => MidiNote[],
   colWidth: () => number,
   gridWidth: () => number,
@@ -47,7 +48,7 @@ export function usePianoGridSelection(
 
   const handleSelectionMove = (event: MouseEvent) => {
     if (!selectionRect.value) return;
-    const grid = document.querySelector(".piano-grid");
+    const grid = containerRef?.value ?? document.querySelector(".piano-grid");
     if (!grid) return;
     const rect = grid.getBoundingClientRect();
     const x = Math.max(0, Math.min(event.clientX - rect.left, gridWidth()));
diff --git a/webapp/src/lib/canvas/pianoGridRenderer.ts b/webapp/src/lib/canvas/pianoGridRenderer.ts
new file mode 100644
index 0000000..d238330
--- /dev/null
+++ b/webapp/src/lib/canvas/pianoGridRenderer.ts
@@ -0,0 +1,288 @@
+import {
+  TOTAL_NOTES,
+  NOTE_ROW_HEIGHT,
+  isBlackKey,
+  isOctaveStart,
+  noteIndexToName,
+} from "../audio/pianoRollConstants";
+
+export interface GridRenderConfig {
+  cols: number;
+  colWidth: number;
+  trackColor: string;
+}
+
+export interface NoteRenderData {
+  id: string;
+  x: number;
+  y: number;
+  w: number;
+  isSelected: boolean;
+  isDragging: boolean;
+  isResizing: boolean;
+  previewX?: number;
+  previewY?: number;
+  previewW?: number;
+}
+
+export interface SelectionRectData {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+const COLORS = {
+  blackKeyRow: "rgba(0, 0, 0, 0.15)",
+  octaveLine: "rgba(0, 0, 0, 0.3)",
+  activeRowHighlight: "rgba(215, 38, 109, 0.15)",
+  cellBorderVertical: "rgba(122, 15, 62, 0.2)",
+  cellBorderHorizontal: "rgba(122, 15, 62, 0.15)",
+  measureLine: "rgba(122, 15, 62, 0.5)",
+  noteSelectedOutline: "#fff7ab",
+  noteSelectedShadow: "rgba(255, 247, 171, 0.4)",
+  noteDraggingOutline: "#fff7ab",
+  selectionRectBorder: "#fff7ab",
+  selectionRectFill: "rgba(255, 247, 171, 0.1)",
+  noteLabel: "rgba(0, 0, 0, 0.8)",
+};
+
+export class PianoGridRenderer {
+  private ctx: CanvasRenderingContext2D;
+  private config: GridRenderConfig;
+  private width: number;
+  private height: number;
+
+  constructor(
+    ctx: CanvasRenderingContext2D,
+    config: GridRenderConfig,
+    width: number,
+    height: number,
+  ) {
+    this.ctx = ctx;
+    this.config = config;
+    this.width = width;
+    this.height = height;
+  }
+
+  updateConfig(config: GridRenderConfig, width: number, height: number) {
+    this.config = config;
+    this.width = width;
+    this.height = height;
+  }
+
+  render(
+    notes: NoteRenderData[],
+    activeRows: Set<number>,
+    selectionRect: SelectionRectData | null,
+  ) {
+    const { ctx } = this;
+
+    ctx.clearRect(0, 0, this.width, this.height);
+
+    this.drawBlackKeyRows();
+    this.drawActiveRowHighlights(activeRows);
+    this.drawGridLines();
+    this.drawOctaveLines();
+    this.drawMeasureLines();
+    this.drawNotes(notes);
+
+    if (selectionRect) {
+      this.drawSelectionRect(selectionRect);
+    }
+  }
+
+  private drawBlackKeyRows() {
+    const { ctx } = this;
+
+    ctx.fillStyle = COLORS.blackKeyRow;
+
+    for (let row = 0; row < TOTAL_NOTES; row++) {
+      const noteName = noteIndexToName(row);
+      if (isBlackKey(noteName)) {
+        const y = row * NOTE_ROW_HEIGHT;
+        ctx.fillRect(0, y, this.width, NOTE_ROW_HEIGHT);
+      }
+    }
+  }
+
+  private drawActiveRowHighlights(activeRows: Set<number>) {
+    if (activeRows.size === 0) return;
+
+    const { ctx } = this;
+    ctx.fillStyle = COLORS.activeRowHighlight;
+
+    for (const row of activeRows) {
+      const y = row * NOTE_ROW_HEIGHT;
+      ctx.fillRect(0, y, this.width, NOTE_ROW_HEIGHT);
+    }
+  }
+
+  private drawGridLines() {
+    const { ctx, config } = this;
+
+    ctx.strokeStyle = COLORS.cellBorderHorizontal;
+    ctx.lineWidth = 1;
+
+    ctx.beginPath();
+    for (let row = 1; row <= TOTAL_NOTES; row++) {
+      const y = row * NOTE_ROW_HEIGHT - 0.5;
+      ctx.moveTo(0, y);
+      ctx.lineTo(this.width, y);
+    }
+    ctx.stroke();
+
+    ctx.strokeStyle = COLORS.cellBorderVertical;
+    ctx.beginPath();
+    for (let col = 1; col <= config.cols; col++) {
+      const x = col * config.colWidth - 0.5;
+      ctx.moveTo(x, 0);
+      ctx.lineTo(x, this.height);
+    }
+    ctx.stroke();
+  }
+
+  private drawOctaveLines() {
+    const { ctx } = this;
+
+    ctx.strokeStyle = COLORS.octaveLine;
+    ctx.lineWidth = 2;
+
+    ctx.beginPath();
+    for (let row = 0; row < TOTAL_NOTES; row++) {
+      const noteName = noteIndexToName(row);
+      if (isOctaveStart(noteName)) {
+        const y = (row + 1) * NOTE_ROW_HEIGHT - 1;
+        ctx.moveTo(0, y);
+        ctx.lineTo(this.width, y);
+      }
+    }
+    ctx.stroke();
+  }
+
+  private drawMeasureLines() {
+    const { ctx, config } = this;
+
+    ctx.strokeStyle = COLORS.measureLine;
+    ctx.lineWidth = 1;
+
+    ctx.beginPath();
+    for (let measure = 0; measure <= Math.ceil(config.cols / 4); measure++) {
+      const x = measure * 4 * config.colWidth - 0.5;
+      ctx.moveTo(x, 0);
+      ctx.lineTo(x, this.height);
+    }
+    ctx.stroke();
+  }
+
+  private drawNotes(notes: NoteRenderData[]) {
+    for (const note of notes) {
+      this.drawNote(note);
+    }
+  }
+
+  private drawNote(note: NoteRenderData) {
+    const { ctx, config } = this;
+
+    const x =
+      note.previewX !== undefined
+        ? note.previewX * config.colWidth
+        : note.x * config.colWidth;
+    const y =
+      note.previewY !== undefined
+        ? note.previewY * NOTE_ROW_HEIGHT
+        : note.y * NOTE_ROW_HEIGHT;
+    const w =
+      note.previewW !== undefined
+        ? note.previewW * config.colWidth - 2
+        : note.w * config.colWidth - 2;
+    const h = NOTE_ROW_HEIGHT - 2;
+
+    const noteColor = config.trackColor;
+    const noteName = noteIndexToName(note.y);
+    const isBlack = isBlackKey(noteName);
+
+    ctx.globalAlpha = note.isDragging || note.isResizing ? 0.7 : 0.9;
+
+    ctx.fillStyle = noteColor;
+    if (isBlack) {
+      ctx.filter = "brightness(0.85)";
+    }
+
+    ctx.beginPath();
+    ctx.roundRect(x + 1, y + 1, w, h, 2);
+    ctx.fill();
+
+    ctx.filter = "none";
+
+    if (note.isSelected) {
+      ctx.strokeStyle = COLORS.noteSelectedOutline;
+      ctx.lineWidth = 2;
+      ctx.stroke();
+
+      ctx.shadowColor = COLORS.noteSelectedShadow;
+      ctx.shadowBlur = 12;
+      ctx.stroke();
+      ctx.shadowBlur = 0;
+    } else if (note.isDragging || note.isResizing) {
+      ctx.setLineDash([4, 2]);
+      ctx.strokeStyle = COLORS.noteDraggingOutline;
+      ctx.lineWidth = 2;
+      ctx.stroke();
+      ctx.setLineDash([]);
+    }
+
+    ctx.globalAlpha = 1;
+
+    if (w > 12) {
+      ctx.fillStyle = COLORS.noteLabel;
+      const fontSize = w > 20 ? 8 : 6;
+      ctx.font = `500 ${fontSize}px system-ui, sans-serif`;
+      ctx.fillText(noteName, x + 3, y + h / 2 + (fontSize === 6 ? 2 : 3));
+    }
+  }
+
+  private drawSelectionRect(rect: SelectionRectData) {
+    const { ctx } = this;
+
+    ctx.fillStyle = COLORS.selectionRectFill;
+    ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
+
+    ctx.setLineDash([4, 2]);
+    ctx.strokeStyle = COLORS.selectionRectBorder;
+    ctx.lineWidth = 2;
+    ctx.strokeRect(rect.x, rect.y, rect.w, rect.h);
+    ctx.setLineDash([]);
+  }
+
+  getNoteAtPosition(
+    x: number,
+    y: number,
+    notes: NoteRenderData[],
+  ): NoteRenderData | null {
+    const { config } = this;
+    const col = x / config.colWidth;
+    const row = Math.floor(y / NOTE_ROW_HEIGHT);
+
+    for (let i = notes.length - 1; i >= 0; i--) {
+      const note = notes[i];
+      const noteX = note.previewX ?? note.x;
+      const noteY = note.previewY ?? note.y;
+      const noteW = note.previewW ?? note.w;
+
+      if (col >= noteX && col < noteX + noteW && row === noteY) {
+        return note;
+      }
+    }
+    return null;
+  }
+
+  isOnResizeHandle(x: number, note: NoteRenderData): boolean {
+    const { config } = this;
+    const noteW = note.previewW ?? note.w;
+    const noteX = note.previewX ?? note.x;
+    const noteRightEdge = (noteX + noteW) * config.colWidth;
+    const handleWidth = 6;
+    return x >= noteRightEdge - handleWidth && x <= noteRightEdge;
+  }
+}

From fbda4ec2a06e2dbc6dd3019344872ecfb84cb96e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9lix=20Lavi=C3=A9ville?= <lavieville.felix@gmail.com>
Date: Sun, 22 Feb 2026 10:53:32 +0100
Subject: [PATCH 2/3] fix: using canvas as piano roll too

---
 .../timeline/PianoRoll/PianoKeysCanvas.vue    | 169 +++++++++++++
 .../app/timeline/PianoRoll/PianoRoll.vue      |   8 +-
 webapp/src/lib/canvas/pianoKeysRenderer.ts    | 229 ++++++++++++++++++
 3 files changed, 403 insertions(+), 3 deletions(-)
 create mode 100644 webapp/src/components/app/timeline/PianoRoll/PianoKeysCanvas.vue
 create mode 100644 webapp/src/lib/canvas/pianoKeysRenderer.ts

diff --git a/webapp/src/components/app/timeline/PianoRoll/PianoKeysCanvas.vue b/webapp/src/components/app/timeline/PianoRoll/PianoKeysCanvas.vue
new file mode 100644
index 0000000..0542053
--- /dev/null
+++ b/webapp/src/components/app/timeline/PianoRoll/PianoKeysCanvas.vue
@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import { ref, watch, onMounted, onBeforeUnmount } from "vue";
+import type { NoteName } from "../../../../lib/utils/types";
+import { PianoKeysRenderer } from "../../../../lib/canvas/pianoKeysRenderer";
+
+const props = defineProps<{
+  activeNotes: Set<NoteName>;
+  gridHeight: number;
+}>();
+
+const emit = defineEmits<{
+  (e: "note-start", note: NoteName): void;
+  (e: "note-stop", note: NoteName): void;
+  (e: "all-notes-stop"): void;
+}>();
+
+const PIANO_WIDTH = 180;
+
+const canvasRef = ref<HTMLCanvasElement | null>(null);
+const renderer = ref<PianoKeysRenderer | null>(null);
+const isMouseDown = ref(false);
+const currentNote = ref<NoteName | null>(null);
+let dpr = 1;
+
+const initCanvas = () => {
+  const canvas = canvasRef.value;
+  if (!canvas) return;
+
+  dpr = window.devicePixelRatio || 1;
+  const width = PIANO_WIDTH;
+  const height = props.gridHeight;
+
+  canvas.style.width = `${width}px`;
+  canvas.style.height = `${height}px`;
+  canvas.width = width * dpr;
+  canvas.height = height * dpr;
+
+  const ctx = canvas.getContext("2d")!;
+  ctx.scale(dpr, dpr);
+
+  renderer.value = new PianoKeysRenderer(ctx, width, height);
+  render();
+};
+
+const updateCanvasSize = () => {
+  const canvas = canvasRef.value;
+  if (!canvas || !renderer.value) return;
+
+  const width = PIANO_WIDTH;
+  const height = props.gridHeight;
+
+  canvas.style.width = `${width}px`;
+  canvas.style.height = `${height}px`;
+  canvas.width = width * dpr;
+  canvas.height = height * dpr;
+
+  const ctx = canvas.getContext("2d")!;
+  ctx.scale(dpr, dpr);
+
+  renderer.value.updateSize(width, height);
+  render();
+};
+
+const render = () => {
+  if (!renderer.value) return;
+  renderer.value.render(props.activeNotes);
+};
+
+const handleMouseMove = (event: MouseEvent) => {
+  if (!renderer.value) return;
+  const rect = canvasRef.value!.getBoundingClientRect();
+  const x = event.clientX - rect.left;
+  const y = event.clientY - rect.top;
+
+  const note = renderer.value.getKeyAtPosition(x, y);
+  renderer.value.setHoveredKey(note);
+  render();
+
+  if (isMouseDown.value && note && note !== currentNote.value) {
+    if (currentNote.value) {
+      emit("note-stop", currentNote.value);
+    }
+    currentNote.value = note;
+    emit("note-start", note);
+  }
+};
+
+const handleMouseDown = (event: MouseEvent) => {
+  if (!renderer.value) return;
+  event.preventDefault();
+
+  const rect = canvasRef.value!.getBoundingClientRect();
+  const x = event.clientX - rect.left;
+  const y = event.clientY - rect.top;
+
+  const note = renderer.value.getKeyAtPosition(x, y);
+  if (note) {
+    isMouseDown.value = true;
+    currentNote.value = note;
+    emit("note-start", note);
+  }
+};
+
+const handleMouseUp = () => {
+  if (isMouseDown.value) {
+    isMouseDown.value = false;
+    currentNote.value = null;
+    emit("all-notes-stop");
+  }
+};
+
+const handleMouseLeave = () => {
+  if (renderer.value) {
+    renderer.value.setHoveredKey(null);
+    render();
+  }
+};
+
+const handleGlobalMouseUp = () => {
+  if (isMouseDown.value) {
+    isMouseDown.value = false;
+    currentNote.value = null;
+    emit("all-notes-stop");
+  }
+};
+
+watch(() => props.activeNotes, render, { deep: true });
+watch(() => props.gridHeight, updateCanvasSize);
+
+onMounted(() => {
+  initCanvas();
+  document.addEventListener("mouseup", handleGlobalMouseUp);
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener("mouseup", handleGlobalMouseUp);
+});
+</script>
+
+<template>
+  <div class="piano-keys-canvas">
+    <canvas
+      ref="canvasRef"
+      @mousemove="handleMouseMove"
+      @mousedown="handleMouseDown"
+      @mouseup="handleMouseUp"
+      @mouseleave="handleMouseLeave"
+    />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.piano-keys-canvas {
+  width: 180px;
+  min-width: 180px;
+  flex-shrink: 0;
+  background: #2a2a2a;
+  border-right: 2px solid #333;
+  box-sizing: border-box;
+  position: sticky;
+  left: 0;
+  z-index: 5;
+  cursor: pointer;
+
+  canvas {
+    display: block;
+  }
+}
+</style>
diff --git a/webapp/src/components/app/timeline/PianoRoll/PianoRoll.vue b/webapp/src/components/app/timeline/PianoRoll/PianoRoll.vue
index 28f83c5..45590ff 100644
--- a/webapp/src/components/app/timeline/PianoRoll/PianoRoll.vue
+++ b/webapp/src/components/app/timeline/PianoRoll/PianoRoll.vue
@@ -10,10 +10,11 @@ import {
   noteIndexToName,
 } from "../../../../lib/audio/pianoRollConstants";
 import PianoKeys from "./PianoKeys.vue";
+import PianoKeysCanvas from "./PianoKeysCanvas.vue";
 import PianoGrid from "./PianoGrid.vue";
 import PianoGridCanvas from "./PianoGridCanvas.vue";
 
-const USE_CANVAS_GRID = true;
+const USE_CANVAS = true;
 
 const props = defineProps<{
   track: Track;
@@ -146,7 +147,8 @@ onBeforeUnmount(() => {
 
 <template>
   <div class="piano-roll-wrapper">
-    <PianoKeys
+    <component
+      :is="USE_CANVAS ? PianoKeysCanvas : PianoKeys"
       :active-notes="allActiveNotes"
       :grid-height="gridHeight"
       @note-start="handleNoteStart"
@@ -154,7 +156,7 @@ onBeforeUnmount(() => {
       @all-notes-stop="handleAllNotesStop"
     />
     <component
-      :is="USE_CANVAS_GRID ? PianoGridCanvas : PianoGrid"
+      :is="USE_CANVAS ? PianoGridCanvas : PianoGrid"
       :notes="track.notes"
       :cols="cols"
       :col-width="colWidth"
diff --git a/webapp/src/lib/canvas/pianoKeysRenderer.ts b/webapp/src/lib/canvas/pianoKeysRenderer.ts
new file mode 100644
index 0000000..342a510
--- /dev/null
+++ b/webapp/src/lib/canvas/pianoKeysRenderer.ts
@@ -0,0 +1,229 @@
+import type { NoteName } from "../utils/types";
+import {
+  NOTE_ROW_HEIGHT,
+  WHITE_KEY_MULTIPLIERS,
+  isOctaveStart,
+  getOctaveNumber,
+  getWhiteKeys,
+  getBlackKeys,
+  ALL_NOTES,
+} from "../audio/pianoRollConstants";
+
+export interface PianoKeysRenderConfig {
+  width: number;
+  height: number;
+  activeNotes: Set<NoteName>;
+}
+
+interface KeyRect {
+  note: NoteName;
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  isBlack: boolean;
+}
+
+const COLORS = {
+  whiteKey: {
+    fill: "#f0f0f0",
+    fillHover: "#fff",
+    fillActive: "#d7266d",
+    border: "#bbb",
+    octaveBorder: "#222",
+    text: "rgba(0, 0, 0, 0.25)",
+    textActive: "#fff",
+    octaveText: "rgba(0, 0, 0, 0.3)",
+  },
+  blackKey: {
+    fill: "#1a1a1a",
+    fillHover: "#2a2a2a",
+    fillActive: "#9b2458",
+    text: "rgba(255, 255, 255, 0.25)",
+    textActive: "#fff",
+  },
+};
+
+export class PianoKeysRenderer {
+  private ctx: CanvasRenderingContext2D;
+  private width: number;
+  private height: number;
+  private keyRects: KeyRect[] = [];
+  private whiteKeys: NoteName[];
+  private blackKeys: NoteName[];
+  private allNotes: NoteName[];
+  private hoveredKey: NoteName | null = null;
+
+  constructor(
+    ctx: CanvasRenderingContext2D,
+    width: number,
+    height: number,
+  ) {
+    this.ctx = ctx;
+    this.width = width;
+    this.height = height;
+    this.whiteKeys = getWhiteKeys();
+    this.blackKeys = getBlackKeys();
+    this.allNotes = ALL_NOTES;
+    this.buildKeyRects();
+  }
+
+  updateSize(width: number, height: number) {
+    this.width = width;
+    this.height = height;
+    this.buildKeyRects();
+  }
+
+  setHoveredKey(note: NoteName | null) {
+    this.hoveredKey = note;
+  }
+
+  private buildKeyRects() {
+    this.keyRects = [];
+
+    for (let i = 0; i < this.whiteKeys.length; i++) {
+      const note = this.whiteKeys[i];
+      const noteName = note.replace(/\d+$/, "");
+      let top = 0;
+      for (let j = 0; j < i; j++) {
+        const prevNote = this.whiteKeys[j];
+        const prevName = prevNote.replace(/\d+$/, "");
+        top += WHITE_KEY_MULTIPLIERS[prevName] * NOTE_ROW_HEIGHT;
+      }
+      const h = WHITE_KEY_MULTIPLIERS[noteName] * NOTE_ROW_HEIGHT;
+
+      this.keyRects.push({
+        note,
+        x: 0,
+        y: top,
+        w: this.width,
+        h,
+        isBlack: false,
+      });
+    }
+
+    for (const note of this.blackKeys) {
+      const noteIndex = this.allNotes.indexOf(note);
+      this.keyRects.push({
+        note,
+        x: 0,
+        y: noteIndex * NOTE_ROW_HEIGHT,
+        w: this.width * 0.55,
+        h: NOTE_ROW_HEIGHT,
+        isBlack: true,
+      });
+    }
+  }
+
+  render(activeNotes: Set<NoteName>) {
+    const { ctx } = this;
+    ctx.clearRect(0, 0, this.width, this.height);
+
+    const whiteKeyRects = this.keyRects.filter((k) => !k.isBlack);
+    const blackKeyRects = this.keyRects.filter((k) => k.isBlack);
+
+    for (const key of whiteKeyRects) {
+      this.drawWhiteKey(key, activeNotes.has(key.note));
+    }
+
+    for (const key of blackKeyRects) {
+      this.drawBlackKey(key, activeNotes.has(key.note));
+    }
+  }
+
+  private drawWhiteKey(key: KeyRect, isActive: boolean) {
+    const { ctx } = this;
+    const isHovered = this.hoveredKey === key.note;
+    const isOctave = isOctaveStart(key.note);
+
+    const gradient = ctx.createLinearGradient(key.w, key.y, 0, key.y);
+    if (isActive) {
+      gradient.addColorStop(0, COLORS.whiteKey.fillActive);
+      gradient.addColorStop(1, COLORS.whiteKey.fillActive);
+    } else if (isHovered) {
+      gradient.addColorStop(0, "#f0f0f0");
+      gradient.addColorStop(0.5, "#fff");
+      gradient.addColorStop(1, "#e8e8e8");
+    } else {
+      gradient.addColorStop(0, "#e8e8e8");
+      gradient.addColorStop(0.5, "#f5f5f5");
+      gradient.addColorStop(1, "#e0e0e0");
+    }
+
+    ctx.fillStyle = gradient;
+    ctx.beginPath();
+    ctx.roundRect(key.x, key.y, key.w - 1, key.h - 1, [0, 0, 3, 3]);
+    ctx.fill();
+
+    ctx.strokeStyle = isOctave ? COLORS.whiteKey.octaveBorder : COLORS.whiteKey.border;
+    ctx.lineWidth = isOctave ? 2 : 1;
+    ctx.beginPath();
+    ctx.moveTo(key.x, key.y + key.h - 1);
+    ctx.lineTo(key.x + key.w, key.y + key.h - 1);
+    ctx.stroke();
+
+    ctx.font = "bold 10px system-ui, sans-serif";
+    ctx.textAlign = "right";
+    ctx.textBaseline = "middle";
+    ctx.fillStyle = isActive ? COLORS.whiteKey.textActive : COLORS.whiteKey.text;
+    ctx.fillText(key.note, key.w - 6, key.y + key.h / 2);
+  }
+
+  private drawBlackKey(key: KeyRect, isActive: boolean) {
+    const { ctx } = this;
+    const isHovered = this.hoveredKey === key.note;
+
+    const gradient = ctx.createLinearGradient(key.x, key.y, key.x, key.y + key.h);
+    if (isActive) {
+      gradient.addColorStop(0, COLORS.blackKey.fillActive);
+      gradient.addColorStop(1, COLORS.blackKey.fillActive);
+    } else if (isHovered) {
+      gradient.addColorStop(0, "#3a3a3a");
+      gradient.addColorStop(0.6, "#2a2a2a");
+      gradient.addColorStop(1, "#1a1a1a");
+    } else {
+      gradient.addColorStop(0, "#2a2a2a");
+      gradient.addColorStop(0.6, "#1a1a1a");
+      gradient.addColorStop(1, "#0a0a0a");
+    }
+
+    ctx.fillStyle = gradient;
+    ctx.beginPath();
+    ctx.roundRect(key.x, key.y, key.w, key.h - 1, [0, 0, 2, 2]);
+    ctx.fill();
+
+    ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
+    ctx.shadowBlur = 4;
+    ctx.shadowOffsetX = 2;
+    ctx.shadowOffsetY = 2;
+    ctx.fill();
+    ctx.shadowColor = "transparent";
+    ctx.shadowBlur = 0;
+    ctx.shadowOffsetX = 0;
+    ctx.shadowOffsetY = 0;
+
+    ctx.fillStyle = isActive ? COLORS.blackKey.textActive : COLORS.blackKey.text;
+    ctx.font = "bold 8px system-ui, sans-serif";
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    ctx.fillText(key.note, key.w / 2, key.y + key.h / 2);
+  }
+
+  getKeyAtPosition(x: number, y: number): NoteName | null {
+    const blackKeyRects = this.keyRects.filter((k) => k.isBlack);
+    for (const key of blackKeyRects) {
+      if (x >= key.x && x < key.x + key.w && y >= key.y && y < key.y + key.h) {
+        return key.note;
+      }
+    }
+
+    const whiteKeyRects = this.keyRects.filter((k) => !k.isBlack);
+    for (const key of whiteKeyRects) {
+      if (x >= key.x && x < key.x + key.w && y >= key.y && y < key.y + key.h) {
+        return key.note;
+      }
+    }
+
+    return null;
+  }
+}

From a04c1ae382a60ac6422f0643986781de87d7a6db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9lix=20Lavi=C3=A9ville?= <lavieville.felix@gmail.com>
Date: Sun, 22 Feb 2026 10:57:36 +0100
Subject: [PATCH 3/3] fix: using canvas for note previews

---
 .../src/components/app/timeline/TrackRow.vue  |   6 +-
 .../timeline/TrackTimelinePreviewCanvas.vue   | 136 ++++++++++++++++++
 2 files changed, 141 insertions(+), 1 deletion(-)
 create mode 100644 webapp/src/components/app/timeline/TrackTimelinePreviewCanvas.vue

diff --git a/webapp/src/components/app/timeline/TrackRow.vue b/webapp/src/components/app/timeline/TrackRow.vue
index a604731..4362d2a 100644
--- a/webapp/src/components/app/timeline/TrackRow.vue
+++ b/webapp/src/components/app/timeline/TrackRow.vue
@@ -2,8 +2,11 @@
 import type { Track } from "../../../lib/utils/types";
 import TrackHeader from "./TrackHeader.vue";
 import TrackTimelinePreview from "./TrackTimelinePreview.vue";
+import TrackTimelinePreviewCanvas from "./TrackTimelinePreviewCanvas.vue";
 import PianoRoll from "./PianoRoll/PianoRoll.vue";
 
+const USE_CANVAS = true;
+
 defineProps<{
   track: Track;
   cols: number;
@@ -43,7 +46,8 @@ const emit = defineEmits<{
       @toggle-expand="emit('toggle-expand', track)"
     />
 
-    <TrackTimelinePreview
+    <component
+      :is="USE_CANVAS ? TrackTimelinePreviewCanvas : TrackTimelinePreview"
       :notes="track.notes"
       :cols="cols"
       :col-width="colWidth"
diff --git a/webapp/src/components/app/timeline/TrackTimelinePreviewCanvas.vue b/webapp/src/components/app/timeline/TrackTimelinePreviewCanvas.vue
new file mode 100644
index 0000000..bd0eae4
--- /dev/null
+++ b/webapp/src/components/app/timeline/TrackTimelinePreviewCanvas.vue
@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import { ref, watch, onMounted } from "vue";
+import type { MidiNote } from "../../../lib/utils/types";
+import { TOTAL_NOTES } from "../../../lib/audio/pianoRollConstants";
+
+const props = defineProps<{
+  notes: MidiNote[];
+  cols: number;
+  colWidth: number;
+  rowHeight: number;
+  color: string;
+}>();
+
+const emit = defineEmits<{
+  (e: "dblclick"): void;
+}>();
+
+const canvasRef = ref<HTMLCanvasElement | null>(null);
+const isHovered = ref(false);
+let dpr = 1;
+
+const initCanvas = () => {
+  const canvas = canvasRef.value;
+  if (!canvas) return;
+
+  dpr = window.devicePixelRatio || 1;
+  const width = props.cols * props.colWidth;
+  const height = props.rowHeight;
+
+  canvas.style.width = `${width}px`;
+  canvas.style.height = `${height}px`;
+  canvas.width = width * dpr;
+  canvas.height = height * dpr;
+
+  render();
+};
+
+const updateCanvasSize = () => {
+  const canvas = canvasRef.value;
+  if (!canvas) return;
+
+  const width = props.cols * props.colWidth;
+  const height = props.rowHeight;
+
+  canvas.style.width = `${width}px`;
+  canvas.style.height = `${height}px`;
+  canvas.width = width * dpr;
+  canvas.height = height * dpr;
+
+  render();
+};
+
+const render = () => {
+  const canvas = canvasRef.value;
+  if (!canvas) return;
+
+  const ctx = canvas.getContext("2d")!;
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+
+  const width = props.cols * props.colWidth;
+  const height = props.rowHeight;
+
+  ctx.fillStyle = isHovered.value ? "#1f1119" : "#1a0e15";
+  ctx.fillRect(0, 0, width, height);
+
+  ctx.strokeStyle = "rgba(122, 15, 62, 0.5)";
+  ctx.lineWidth = 1;
+  ctx.beginPath();
+  for (let i = 0; i <= Math.ceil(props.cols / 4); i++) {
+    const x = i * 4 * props.colWidth - 0.5;
+    ctx.moveTo(x, 0);
+    ctx.lineTo(x, height);
+  }
+  ctx.stroke();
+
+  if (props.notes.length === 0) return;
+
+  let minY = TOTAL_NOTES;
+  let maxY = 0;
+  for (const note of props.notes) {
+    if (note.y < minY) minY = note.y;
+    if (note.y > maxY) maxY = note.y;
+  }
+
+  const padding = 2;
+  minY = Math.max(0, minY - padding);
+  maxY = Math.min(TOTAL_NOTES - 1, maxY + padding);
+
+  const range = Math.max(maxY - minY + 1, 5);
+  const noteHeight = Math.max(2, Math.min(height / range - 1, 8));
+
+  ctx.globalAlpha = 0.9;
+  ctx.fillStyle = props.color;
+
+  for (const note of props.notes) {
+    const x = note.x * props.colWidth;
+    const y = ((note.y - minY) / range) * (height - noteHeight);
+    const w = Math.max(note.w * props.colWidth - 1, 2);
+
+    ctx.beginPath();
+    ctx.roundRect(x, y, w, noteHeight, 1);
+    ctx.fill();
+  }
+
+  ctx.globalAlpha = 1;
+};
+
+watch([() => props.notes, () => props.color, isHovered], render, { deep: true });
+watch([() => props.cols, () => props.colWidth, () => props.rowHeight], updateCanvasSize);
+
+onMounted(() => {
+  initCanvas();
+});
+</script>
+
+<template>
+  <div
+    class="track-timeline"
+    @dblclick="emit('dblclick')"
+    @mouseenter="isHovered = true"
+    @mouseleave="isHovered = false"
+  >
+    <canvas ref="canvasRef" />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.track-timeline {
+  position: relative;
+  cursor: pointer;
+
+  canvas {
+    display: block;
+  }
+}
+</style>