Fix Trip Editor mobile bottom drawer

ClientApps/trip-editor/src/App.vue

@@ -26,6 +26,7 @@ const isLoading = ref(true);
 const hasRegionDraftChanges = ref(false);
 const workspaceElement = ref<HTMLElement | null>(null);
 const mapElement = ref<HTMLElement | null>(null);
+const mobileDrawerActive = ref(false);
 const navigationStatus = ref<string | null>(null);
 const hiddenSegmentIds = ref<Set<string>>(new Set());
 const selectedPlaceId = ref<Guid | null>(null);
@@ -34,6 +35,7 @@ const pendingSearchAdd = ref<{ result: EditorGeocodeSearchResult; regionId: Guid
 const completedSearchAddRequestId = ref<number | null>(null);
 const editorSurface = useEditorSurface();
 let mapAdapter: ReturnType<typeof createTripEditorMap> | null = null;
+let mobileDrawerQuery: MediaQueryList | null = null;
 const coordinatePicker = {
   applyPlaceDraftCoordinate: (placeId: Guid, coordinate: EditorCoordinate): void => mapAdapter?.applyPlaceDraftCoordinate(placeId, coordinate),
   startCoordinatePick: (options: CoordinatePickOptions): (() => void) => mapAdapter?.startCoordinatePick(options) ?? (() => undefined)
@@ -112,6 +114,9 @@ watch(
 
 onMounted(async () => {
   setConfirmDialogFocusFallback(workspaceElement.value);
+  mobileDrawerQuery = window.matchMedia('(max-width: 640px)');
+  mobileDrawerActive.value = mobileDrawerQuery.matches;
+  mobileDrawerQuery.addEventListener('change', updateMobileDrawerState);
 
   try {
     const loadedState = await loadEditorState(props.config.editorEndpoint);
@@ -135,9 +140,15 @@ onMounted(async () => {
 onUnmounted(() => {
   disposeConfirmDialogHost();
   setConfirmDialogFocusFallback(null);
+  mobileDrawerQuery?.removeEventListener('change', updateMobileDrawerState);
   mapAdapter?.dispose();
 });
 
+/// Keeps the release-scoped phone drawer below tablet/intermediate widths.
+function updateMobileDrawerState(event: MediaQueryListEvent): void {
+  mobileDrawerActive.value = event.matches;
+}
+
 const applyMetadata = (metadata: EditorTripMetadata): void => {
   if (!state.value) {
     return;
@@ -190,6 +201,10 @@ async function closeActiveEditorBeforeSelection(placeId: Guid): Promise<boolean>
     return true;
   }
 
+  if (mobileDrawerActive.value && tabForTargetKind(target.kind) !== 'regions') {
+    return await editorSurface.closeActiveTarget(`Discard unsaved ${targetKindLabel(target.kind)} changes before switching tabs?`);
+  }
+
   if (target.kind !== 'place') {
     return true;
   }
@@ -201,6 +216,28 @@ async function closeActiveEditorBeforeSelection(placeId: Guid): Promise<boolean>
   return await editorSurface.closeActiveTarget('Discard unsaved place changes before selecting another place?');
 }
 
+/// Maps active editor ownership to the phone drawer tab that can keep it visible.
+function tabForTargetKind(kind: string): 'trip' | 'regions' | 'segments' {
+  if (kind === 'segment') {
+    return 'segments';
+  }
+
+  if (kind === 'region' || kind === 'place' || kind === 'area') {
+    return 'regions';
+  }
+
+  return 'trip';
+}
+
+/// Keeps dirty-discard copy aligned with the manual phone tab switch guard.
+function targetKindLabel(kind: string): string {
+  if (kind === 'metadata') {
+    return 'trip';
+  }
+
+  return kind;
+}
+
 /// Clears selected-place context, closing the selected place editor first when that editor owns the selection.
 const clearSelectedPlace = async (): Promise<boolean> => {
   if (!state.value || !selectedPlaceId.value) {
@@ -477,6 +514,9 @@ function focusStatusText(result: FocusActiveEntityResult, target: { kind: string
         :hidden-segment-ids="hiddenSegmentIds"
         :selected-place-id="selectedPlaceId"
         :pending-search-add="pendingSearchAdd"
+        :mobile-drawer-active="mobileDrawerActive"
+        :is-map-work-active="isMapWorkActive"
+        :completed-search-add-request-id="completedSearchAddRequestId"
         :coordinate-picker="coordinatePicker"
         :polygon-editor="polygonEditor"
         :route-editor="routeEditor"
@@ -488,6 +528,9 @@ function focusStatusText(result: FocusActiveEntityResult, target: { kind: string
         :select-place="placeId => selectPlace(placeId, { focusMap: true })"
         :clear-selected-place="clearSelectedPlace"
         @search-add-opened="handleSearchAddOpened"
+        @search-add-place="requestSearchAddPlace"
+        @search-clear-preview="clearSearchPreview"
+        @search-preview="previewSearchResult"
       />
       <main class="trip-editor-map-shell">
         <header class="trip-editor-toolbar">
@@ -509,7 +552,7 @@ function focusStatusText(result: FocusActiveEntityResult, target: { kind: string
         </header>
         <MapWorkToolbar :controller="editorSurface" />
         <MapSearchControl
-          v-if="!isMapWorkActive"
+          v-if="!isMapWorkActive && !mobileDrawerActive"
           :active-target="activeEditorTarget"
           :completed-add-request-id="completedSearchAddRequestId"
           :editor-endpoint="props.config.editorEndpoint"

ClientApps/trip-editor/src/components/MetadataEditor.vue

@@ -26,6 +26,7 @@ const props = defineProps<{
   antiforgeryToken: string;
   tripIndexUrl: string;
   hasRegionDraftChanges: boolean;
+  autoOpen?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -71,6 +72,15 @@ const visibleShareProgressEnabled = computed({
   }
 });
 const progressUrl = computed(() => (!shareProgressUnavailable.value && draft.shareProgressEnabled ? props.metadata.progressPublicUrl : null));
+/// Reports persisted share-progress state for read-only Trip summaries.
+const shareProgressSummary = computed(() => {
+  if (!props.metadata.isPublic) {
+    return 'Unavailable until trip is public';
+  }
+
+  return props.metadata.shareProgressEnabled ? 'Enabled' : 'Disabled';
+});
+const summaryProgressUrl = computed(() => (props.metadata.isPublic && props.metadata.shareProgressEnabled ? props.metadata.progressPublicUrl : null));
 const target = computed<EditorTarget>(() => ({
   key: 'metadata',
   identity: 'metadata',
@@ -123,13 +133,24 @@ watch(
   }
 );
 
+watch(
+  () => props.autoOpen,
+  autoOpen => {
+    if (autoOpen !== false && !isActive.value) {
+      void openMetadata();
+    }
+  }
+);
+
 onMounted(() => {
   window.addEventListener('beforeunload', confirmUnload);
   unregisterSurfaceHandler = props.editorSurface.registerTargetHandler(target.value.key, {
     isDirty: () => isDirty.value,
     discard: resetDraft
   });
-  void openMetadata();
+  if (props.autoOpen !== false) {
+    void openMetadata();
+  }
 });
 
 onUnmounted(() => {
@@ -369,6 +390,11 @@ const fieldErrors = (key: string): string[] => validationErrors.value[key] ?? []
     <div>
       <h2>Trip Settings</h2>
       <p>{{ metadata.isPublic ? 'Public trip' : 'Private trip' }}</p>
+      <p>Share progress: {{ shareProgressSummary }}</p>
+      <div v-if="metadata.publicUrl || summaryProgressUrl" class="trip-editor-editor-summary__links">
+        <a v-if="metadata.publicUrl" :href="metadata.publicUrl" target="_blank" rel="noopener">Open public trip</a>
+        <a v-if="summaryProgressUrl" :href="summaryProgressUrl" target="_blank" rel="noopener">Open progress URL</a>
+      </div>
     </div>
     <button type="button" class="btn btn-outline-light btn-sm" @click="openMetadata">Edit Trip</button>
   </section>

ClientApps/trip-editor/src/components/RegionPlaceList.vue

@@ -237,6 +237,24 @@ function toggleRegion(regionId: Guid): void {
 
   collapsedRegionIds.value = next;
 }
+
+function moveAreaByKeyboard(regionId: Guid, areaId: Guid, offset: number): void {
+  if (props.searchActive || props.isOrdering) {
+    return;
+  }
+
+  const ids = [...(props.areaIdsByRegionId[regionId] ?? [])];
+  const index = ids.indexOf(areaId);
+  const nextIndex = index + offset;
+  if (index < 0 || nextIndex < 0 || nextIndex >= ids.length) {
+    return;
+  }
+
+  const previousIds = [...(props.state.areaOrderByRegionId[regionId] ?? [])];
+  const [id] = ids.splice(index, 1);
+  ids.splice(nextIndex, 0, id);
+  emit('areaReorder', regionId, ids, previousIds);
+}
 </script>
 
 <template>
@@ -335,6 +353,8 @@ function toggleRegion(regionId: Guid): void {
                 title="Drag to reorder area"
                 aria-label="Drag to reorder area"
                 :disabled="props.searchActive || props.isOrdering"
+                @keydown.arrow-up.prevent="moveAreaByKeyboard(region.id, area.id, -1)"
+                @keydown.arrow-down.prevent="moveAreaByKeyboard(region.id, area.id, 1)"
               >
                 <span aria-hidden="true">::</span>
               </button>

ClientApps/trip-editor/src/components/SegmentManager.vue

@@ -49,6 +49,7 @@ const lastSavedAt = ref<string | null>(null);
 const routeMapWork = reactive<SegmentRouteMapWorkState>({ route: null, stopEdit: null });
 let unregisterHandler: (() => void) | null = null;
 let sortable: { destroy: () => void } | null = null;
+let sortableRetry: number | null = null;
 let reorderSnapshotIds: Guid[] | null = null;
 
 const activeSegment = computed(() => (draft.id ? props.state.segmentsById[draft.id] ?? null : null));
@@ -251,9 +252,35 @@ async function reorder(ids: Guid[], previousIds: Guid[]): Promise<void> {
   }
 }
 
+async function moveSegmentByKeyboard(segmentId: Guid, offset: number): Promise<void> {
+  if (props.searchActive || isOrdering.value) {
+    return;
+  }
+
+  const ids = props.segments.map(segment => segment.id);
+  const index = ids.indexOf(segmentId);
+  const nextIndex = index + offset;
+  if (index < 0 || nextIndex < 0 || nextIndex >= ids.length) {
+    return;
+  }
+
+  const previousIds = props.state.segmentOrder.filter(id => props.state.segmentsById[id]);
+  const [id] = ids.splice(index, 1);
+  ids.splice(nextIndex, 0, id);
+  await reorder(ids, previousIds);
+}
+
 function attachSortable(): void {
   destroySortable();
-  if (props.searchActive || !segmentList.value || !window.Sortable) {
+  if (props.searchActive || !segmentList.value) {
+    return;
+  }
+
+  if (!window.Sortable) {
+    sortableRetry = window.setTimeout(() => {
+      sortableRetry = null;
+      attachSortable();
+    }, 50);
     return;
   }
 
@@ -278,6 +305,10 @@ function attachSortable(): void {
 }
 
 function destroySortable(): void {
+  if (sortableRetry !== null) {
+    window.clearTimeout(sortableRetry);
+    sortableRetry = null;
+  }
   sortable?.destroy();
   sortable = null;
 }
@@ -352,7 +383,7 @@ function modeText(segment: EditorSegment): string {
 
     <ul v-if="segments.length > 0" :key="segmentListKey" ref="segmentList" class="trip-editor-segments">
       <li v-for="segment in segments" :key="segment.id" class="trip-editor-segment-row" :data-segment-id="segment.id">
-        <button type="button" class="trip-editor-icon-button trip-editor-segment-drag-handle" title="Drag to reorder segment" aria-label="Drag to reorder segment">↕</button>
+        <button type="button" class="trip-editor-icon-button trip-editor-segment-drag-handle" title="Drag to reorder segment" aria-label="Drag to reorder segment" @keydown.arrow-up.prevent="moveSegmentByKeyboard(segment.id, -1)" @keydown.arrow-down.prevent="moveSegmentByKeyboard(segment.id, 1)">↕</button>
         <button type="button" class="trip-editor-icon-button" :title="hiddenSegmentIds.has(segment.id) ? 'Show segment' : 'Hide segment'" :aria-label="hiddenSegmentIds.has(segment.id) ? 'Show segment' : 'Hide segment'" @click="toggleVisibility(segment)">{{ hiddenSegmentIds.has(segment.id) ? '○' : '●' }}</button>
         <button type="button" class="trip-editor-list-button" @click="openEdit(segment)">
           <span>{{ segmentLabel(segment) }}</span>