fix(studio): scope lane ids per timeline and stop inventing a track row

Two latent defects in the announcement path this branch adds.

- lanesId was keyed by render row alone, so a second TimelineLanes on the
  page (a mini-timeline beside the main one) would mint the same
  timeline-lanes-track-0 and every caret's aria-controls would resolve to
  whichever instance mounted first. The prefix now comes from useId, with the
  colons stripped so the id stays a legal CSS selector.
- trackDisplayNumber returned trackOrder.length + 1 for a key it could not
  find, which is indistinguishable from a real row: the label announced a row
  the user can see is wrong and nothing upstream could tell it had guessed. It
  returns null now, and trackDisplaySuffix drops the number from the label
  rather than inventing one.
This commit is contained in:
Miguel Angel Simon Sierra
2026-07-28 21:21:27 +02:00
parent 477916cbe2
commit ba0d6406d2
6 changed files with 106 additions and 14 deletions
@@ -1,7 +1,11 @@
import { useCallback } from "react";
import { usePlayerStore, type TimelineElement } from "../player";
import { useExpandedTimelineElements } from "../player/hooks/useExpandedTimelineElements";
import { timelineTrackOrder, trackDisplayNumber } from "../player/components/timelineTrackDisplay";
import {
timelineTrackOrder,
trackDisplayNumber,
trackDisplaySuffix,
} from "../player/components/timelineTrackDisplay";
import { saveProjectFilesWithHistory } from "../utils/studioFileHistory";
import { readTagSnippetByTarget, type PatchOperation } from "../utils/sourcePatcher";
import {
@@ -211,13 +215,15 @@ export async function toggleTimelineTrackHidden({
}: ToggleTimelineTrackHiddenInput): Promise<string[]> {
// `track` is the fractional sort key the callback needs; the history entry is
// read by a human, so it gets the display row instead.
const displayNumber = trackDisplayNumber(timelineTrackOrder(timelineElements), track);
const suffix = trackDisplaySuffix(
trackDisplayNumber(timelineTrackOrder(timelineElements), track),
);
return setElementsHidden({
projectId,
activeCompPath,
elements: timelineElements.filter((element) => element.track === track),
hidden,
label: hidden ? `Hide track ${displayNumber}` : `Show track ${displayNumber}`,
label: hidden ? `Hide track${suffix}` : `Show track${suffix}`,
previewIframe,
writeProjectFile,
recordEdit,