Pin a section, and pair sections with the loop

app/api/jobs.py

@@ -499,6 +499,12 @@ class SectionItem(BaseModel):
         Literal["intro", "outro", "break", "bridge", "inst", "solo", "verse", "chorus", "part"]
         | None
     ) = None
+    # Pins a section against drag and resize in the timeline editor (#573).
+    # It must be declared here to exist at all: this model takes Pydantic's
+    # default extra="ignore", so an undeclared field sent by the editor is
+    # dropped on save and answered 200, and the flag comes back false on the
+    # next load with nothing anywhere saying why.
+    locked: bool = False
 
     @field_validator("id")
     @classmethod

static/css/daw.css

@@ -1667,6 +1667,36 @@ input, textarea { font-family: inherit; }
 .section-del:hover { opacity: 1; background: rgba(0,0,0,0.3); }
 .section-block:hover .section-del { display: flex; }
 
+.section-lock {
+  display: none;
+  flex-shrink: 0;
+  width: 16px; height: 16px;
+  margin-right: 2px;
+  border: none; background: none;
+  color: var(--sc, #4a7fff);
+  cursor: pointer; border-radius: 3px;
+  align-items: center; justify-content: center;
+  opacity: 0.7;
+  padding: 0;
+}
+.section-lock:hover { opacity: 1; background: rgba(0,0,0,0.3); }
+.section-block:hover .section-lock { display: flex; }
+/* A locked section shows its padlock without being hovered, and in red. Hiding
+   it would make locked and unlocked look identical at rest, and the only way to
+   find a locked one would be to try to drag it. Red because the padlock is the
+   one control that is saying no to the others. */
+.section-block.sec-locked .section-lock {
+  display: flex;
+  opacity: 1;
+  color: var(--danger);
+}
+.section-block.sec-locked .section-lock:hover { opacity: 1; }
+
+/* The grab and col-resize cursors promise a drag that cannot happen. */
+.section-block.sec-locked,
+.section-block.sec-locked .section-handle { cursor: default; }
+.section-block.sec-locked .section-handle:hover { background: none; }
+
 .section-handle {
   position: absolute;
   top: 0; bottom: 0;
@@ -1707,6 +1737,9 @@ input, textarea { font-family: inherit; }
 }
 .sections-save-indicator.hidden { display: none; }
 .sections-save-indicator.saved { color: #4caf7d; }
+/* A refusal, not a failure of something already in flight. It borrows this
+   element because it belongs beside the button that was pressed. */
+.sections-save-indicator.notice { color: var(--warn, #e6a23c); white-space: normal; }
 .sections-save-indicator::before {
   content: "";
   display: block;
@@ -1716,6 +1749,14 @@ input, textarea { font-family: inherit; }
   border-top-color: transparent;
   animation: sections-spin 600ms linear infinite;
 }
+.sections-save-indicator.notice::before {
+  animation: none;
+  border: none;
+  width: auto; height: auto;
+  content: "!";
+  font-weight: 700;
+  font-size: 11px;
+}
 .sections-save-indicator.saved::before {
   animation: none;
   border: none;

static/js/i18n.js

@@ -788,6 +788,9 @@ const en = {
   "sections.saving": "Saving",
   "sections.saved": "Saved",
   "sections.deleteAria": "Delete section",
+  "sections.lockAria": "Lock position",
+  "sections.unlockAria": "Unlock position",
+  "sections.loopOverlaps": "Loop overlaps a section",
   "sections.defaultName": "Section",
 
   // ── Playlist import confirm (static/js/playlist.js) ──
@@ -1394,6 +1397,9 @@ const pl = {
   "sections.saving": "Zapisywanie",
   "sections.saved": "Zapisano",
   "sections.deleteAria": "Usuń sekcję",
+  "sections.lockAria": "Zablokuj pozycję",
+  "sections.unlockAria": "Odblokuj pozycję",
+  "sections.loopOverlaps": "Pętla nachodzi na sekcję",
   "sections.defaultName": "Sekcja",
 
   "playlist.skip.unavailable.one": "{count} niedostępny",
@@ -1983,6 +1989,9 @@ const ja = {
   "sections.saving": "保存中",
   "sections.saved": "保存済み",
   "sections.deleteAria": "セクションを削除",
+  "sections.lockAria": "位置をロック",
+  "sections.unlockAria": "位置のロックを解除",
+  "sections.loopOverlaps": "ループが既存のセクションと重なっています",
   "sections.defaultName": "セクション",
 
   "playlist.skip.unavailable.other": "利用不可 {count}件",
@@ -2562,6 +2571,9 @@ const zhHans = {
   "sections.saving": "正在保存",
   "sections.saved": "已保存",
   "sections.deleteAria": "删除段落",
+  "sections.lockAria": "锁定位置",
+  "sections.unlockAria": "解锁位置",
+  "sections.loopOverlaps": "循环区域与已有段落重叠",
   "sections.defaultName": "段落",
 
   "playlist.skip.unavailable.other": "{count} 首不可用",
@@ -3149,6 +3161,9 @@ const de = {
   "sections.saving": "Wird gespeichert",
   "sections.saved": "Gespeichert",
   "sections.deleteAria": "Abschnitt löschen",
+  "sections.lockAria": "Position sperren",
+  "sections.unlockAria": "Position entsperren",
+  "sections.loopOverlaps": "Loop überschneidet einen Abschnitt",
   "sections.defaultName": "Abschnitt",
 
   "playlist.skip.unavailable.other": "{count} nicht verfügbar",
@@ -3739,6 +3754,9 @@ const pt = {
   "sections.saving": "Salvando",
   "sections.saved": "Salvo",
   "sections.deleteAria": "Excluir seção",
+  "sections.lockAria": "Bloquear posição",
+  "sections.unlockAria": "Desbloquear posição",
+  "sections.loopOverlaps": "O loop sobrepõe uma seção",
   "sections.defaultName": "Seção",
 
   "playlist.skip.unavailable.one": "{count} indisponível",
@@ -4323,6 +4341,9 @@ const id = {
   "sections.saving": "Menyimpan",
   "sections.saved": "Tersimpan",
   "sections.deleteAria": "Hapus bagian",
+  "sections.lockAria": "Kunci posisi",
+  "sections.unlockAria": "Buka kunci posisi",
+  "sections.loopOverlaps": "Loop bertumpang tindih dengan bagian",
   "sections.defaultName": "Bagian",
 
   "playlist.skip.unavailable.other": "{count} tidak tersedia",
@@ -4910,6 +4931,9 @@ const fr = {
   "sections.saving": "Enregistrement",
   "sections.saved": "Enregistré",
   "sections.deleteAria": "Supprimer la section",
+  "sections.lockAria": "Verrouiller la position",
+  "sections.unlockAria": "Déverrouiller la position",
+  "sections.loopOverlaps": "La boucle chevauche une section",
   "sections.defaultName": "Section",
 
   "playlist.skip.unavailable.one": "{count} indisponible",
@@ -5627,6 +5651,9 @@ const es = {
   "sections.saving": "Guardando",
   "sections.saved": "Guardado",
   "sections.deleteAria": "Eliminar sección",
+  "sections.lockAria": "Bloquear posición",
+  "sections.unlockAria": "Desbloquear posición",
+  "sections.loopOverlaps": "El bucle se superpone a una sección",
   "sections.defaultName": "Sección",
 
   // ── Playlist import confirm (static/js/playlist.js) ──
@@ -6223,6 +6250,9 @@ const ko = {
   "sections.saving": "저장 중",
   "sections.saved": "저장됨",
   "sections.deleteAria": "구간 삭제",
+  "sections.lockAria": "위치 잠금",
+  "sections.unlockAria": "위치 잠금 해제",
+  "sections.loopOverlaps": "루프가 기존 구간과 겹칩니다",
   "sections.defaultName": "구간",
 
   "playlist.skip.unavailable.other": "사용할 수 없는 {count}개",

static/js/main.js

@@ -10,7 +10,8 @@ import { wireJobForm, showError } from "./job.js";
 import { initSearch } from "./search.js";
 import { wireTransportButtons } from "./transport.js";
 import { wireBeatGridUi } from "./beatgridUi.js";
-import { togglePlayPause, updateLoopRegionVisual, toggleMetronome, transport, setPlayheadTime } from "./transport.js";
+import { togglePlayPause, updateLoopRegionVisual, toggleMetronome, transport, setPlayheadTime, setLoopRange } from "./transport.js";
+import { setSectionsLoopBridge } from "./sections.js";
 import { wireStemListControls, wireMixerToolbar, laneDragIcon } from "./mixer.js";
 import { initCatalog, collectDiagnostics } from "./catalog.js";
 import { initNotifications, notifyFailure, dismissFailuresByJobId } from "./notifications.js";
@@ -222,6 +223,12 @@ initSearch((item) => {
   urlInput.setSelectionRange(urlInput.value.length, urlInput.value.length);
 });
 wireTransportButtons();
+// Sections deliberately does not import the transport, so that it stays
+// loadable without a DOM. This is the one place that owns both.
+setSectionsLoopBridge({
+  getLoop: () => ({ enabled: loopEnabled, start: loopStart, end: loopEnd }),
+  setLoopRange,
+});
 wireBeatGridUi();
 wireFooterControls();
 requestAnimationFrame(drawFooterPlaceholder);