Move Mobile Align text out of edit window.

openpilot/starpilot/galaxy/tests/test_onroad_layout.mjs

@@ -156,7 +156,14 @@ assert.equal(snapVm.snapSummary, "At the edge")
 const cachedTargets = snapVm.state.drag.targets
 snapVm.moveDrag(largePoint(35, 430))
 assert.equal(snapVm.state.drag.targets, cachedTargets)
+assert.equal(snapVm.snapInBar, false, "a mouse drag keeps the alignment chip on the preview")
 snapVm.endDrag(largePoint(34, 430))
+snapVm.startDrag("current_speed", largePoint(34, 430, { pointerType: "touch" }))
+snapVm.moveDrag(largePoint(34, 300, { pointerType: "touch" }))  // past the finger slop
+snapVm.moveDrag(largePoint(35, 430, { pointerType: "touch" }))
+assert.equal(snapVm.snapInBar, true, "a finger drag shows the alignment in the save bar instead")
+snapVm.endDrag(largePoint(35, 430, { pointerType: "touch" }))
+assert.equal(snapVm.snapInBar, false)
 assert.deepEqual(snapVm.state.snapGuides, [])
 assert.equal(snapVm.state.history.undo.length, 1)
 snapVm.undo()

openpilot/starpilot/galaxy/web/css/settings.css

@@ -657,6 +657,9 @@ input[type="range"].gx-slider:active::-moz-range-thumb {
 .gx-layout__preview-card > .gx-layout__stage { position: relative; margin-inline: 0; min-width: 0; }
 .gx-layout__stage-chip { position: absolute; top: 6px; right: 6px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid #b799ff88; border-radius: var(--radius-full); background: rgba(22, 18, 31, .82); color: #d8c8ff; font-size: var(--fs-xs); font-weight: var(--fw-bold); white-space: nowrap; pointer-events: none; }
 .gx-layout__stage-chip--start { right: auto; left: 6px; max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis; display: block; }
+/* Covers the whole bar, buttons included, so its size never changes mid-drag. */
+.gx-layout__savebar-snap { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; gap: 6px; padding: 0 14px; border-radius: inherit; background: inherit; color: var(--primary); font-weight: var(--fw-bold); pointer-events: none; }
+.gx-layout__savebar-snap > .bi { flex: none; }
 .gx-layout__stage-chip--with-tap-areas { max-width: calc(100% - 120px); }
 .gx-layout__guide { stroke: #b799ff; stroke-width: 1.5; }
 .gx-layout__guide--center { stroke-dasharray: 6 4; }

openpilot/starpilot/galaxy/web/js/onroad-layout.js

@@ -404,6 +404,8 @@ export const OnroadLayoutPage = {
     selectedWidget() { return this.profile?.widgets[this.state.selected] },
     selectedPosition() { return this.layout?.[this.state.selected] },
     selectedSize() { return this.selectedWidget ? widgetSize(this.selectedWidget, this.selectedPosition) : [0, 0] },
+    // A finger covers the preview chip, so touch drags show the alignment in the sticky save bar.
+    snapInBar() { return !!(this.state.drag?.touch && this.state.snapGuides.length) },
     snapSummary() {
       const guides = this.state.snapGuides, centred = new Set(guides.filter(guide => guide.kind === "center").map(guide => guide.axis))
       if (centred.size === 2) return "Centred on the screen"
@@ -886,7 +888,7 @@ export const OnroadLayoutPage = {
       this.state.selected = id
       this.finishColorEdit()
       this.state.drag = {
-        id, pointerId: event.pointerId, fromTray, before: { ...position }, historyBefore: clone(this.state.draft), inside: !fromTray,
+        id, pointerId: event.pointerId, touch: event.pointerType === "touch", fromTray, before: { ...position }, historyBefore: clone(this.state.draft), inside: !fromTray,
         startX: event.clientX, startY: event.clientY, moved: false,
         offsetX: fromTray ? width / 2 : point.x - position.x,
         offsetY: fromTray ? height / 2 : point.y - position.y
@@ -905,7 +907,7 @@ export const OnroadLayoutPage = {
       this.state.selected = id
       this.finishColorEdit()
       this.state.drag = {
-        id, pointerId: event.pointerId, resize: true, before: { ...position }, historyBefore: clone(this.state.draft),
+        id, pointerId: event.pointerId, touch: event.pointerType === "touch", resize: true, before: { ...position }, historyBefore: clone(this.state.draft),
         inside: true, offsetX: point.x - position.width, offsetY: point.y - position.height
       }
       this._dragTarget = this.$refs.preview
@@ -1187,6 +1189,7 @@ export const OnroadLayoutPage = {
       <GxState v-if="mode !== 'local'">Connect to local Galaxy to edit this device’s colors and layouts.</GxState>
       <template v-else>
         <div ref="leaveBar" class="gx-layout__savebar" :class="{'gx-layout__savebar--leave': inlineLeavePrompt, 'is-stuck': state.stuck.leaveBar}" :inert="busy">
+          <div v-if="snapInBar && !inlineLeavePrompt" class="gx-layout__savebar-snap" aria-hidden="true"><i class="bi bi-magnet" aria-hidden="true"></i>{{ snapSummary }}</div>
           <span role="status" :class="{'is-dirty': dirty && !inlineLeavePrompt && state.status !== 'saving'}">{{ inlineLeavePrompt ? (pendingLeave ? 'Leave without saving your changes?' : 'Discard your edits and reload the saved colors and layouts?') : state.status === 'saving' ? 'Saving…' : state.status === 'loading' ? 'Loading…' : !state.data ? 'No saved layout loaded' : dirty ? 'Unsaved' : state.notice || 'Saved' }}</span>
           <template v-if="inlineLeavePrompt">
             <button class="gx-btn gx-btn--tonal" type="button" aria-label="Keep editing" title="Keep editing" @click="cancelLeave"><svg class="gx-layout__action-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12a8 8 0 1 0 3-6M4 4v6h6"/></svg><span class="gx-layout__action-label">Keep editing</span></button>
@@ -1229,7 +1232,7 @@ export const OnroadLayoutPage = {
               </div>
               <p v-if="state.previewMode === 'layout' && state.art.status === 'unavailable'" class="gx-note" role="status">Widget preview unavailable. Placement controls remain available.</p>
               <div class="gx-layout__stage">
-              <span v-if="state.snapGuides.length" class="gx-layout__stage-chip gx-layout__stage-chip--start" :class="{'gx-layout__stage-chip--with-tap-areas': !projection && state.showFavoriteZones}" aria-hidden="true">{{ snapSummary }}</span>
+              <span v-if="state.snapGuides.length && !snapInBar" class="gx-layout__stage-chip gx-layout__stage-chip--start" :class="{'gx-layout__stage-chip--with-tap-areas': !projection && state.showFavoriteZones}" aria-hidden="true">{{ snapSummary }}</span>
               <span v-if="!projection && state.showFavoriteZones && state.previewMode === 'layout'" class="gx-layout__stage-chip" aria-hidden="true"><i class="bi bi-grid-3x3-gap"></i>Tap areas</span>
               <svg v-show="state.previewMode === 'layout'" ref="preview" class="gx-layout__preview" :viewBox="'0 0 ' + profile.width + ' ' + profile.height" :width="profile.width" :height="profile.height"
                 @pointermove="moveDrag" @pointerup="endDrag" @pointercancel="cancelDrag" @lostpointercapture="cancelDrag"