Deploy->master

components/AppImageViewer.vue

@@ -0,0 +1,38 @@
+<!--
+Wrapper around v-viewer.
+-->
+<script setup lang="ts">
+import { api as viewerApi } from 'v-viewer';
+
+interface Props {
+  // Label shown below the image. Omit to hide the title bar entirely.
+  title?: string;
+}
+
+const props = defineProps<Props>();
+
+const viewerOptions = computed(() => ({
+  navbar: false,
+  zoomRatio: 0.3,
+  title: props.title ? () => props.title : false,
+  toolbar: {
+    zoomIn: true,
+    zoomOut: true,
+    oneToOne: false,
+    reset: false,
+    prev: false,
+    play: false,
+    next: false,
+    rotateLeft: true,
+    rotateRight: true,
+    flipHorizontal: false,
+    flipVertical: false,
+  },
+}));
+
+function show(imageUrl: string) {
+  viewerApi({ images: [imageUrl], options: viewerOptions.value });
+}
+
+defineExpose({ show });
+</script>

components/review/AttributeDiff.vue

@@ -1,7 +1,26 @@
 <template>
   <section class="diff-attributes">
+    <!--
+    For small screens, display a button to view the photo submission. Otherwise
+    we'll display a thumbnail as a separate component (FeatureImage.vue).
+    -->
+    <div
+      v-if="props.imageUrl"
+      class="d-lg-none"
+    >
+      <button
+        class="diff-attributes__photo-btn"
+        type="button"
+        @click="emit('open-photo')"
+      >
+        <app-icon variant="photo_camera" />
+        <span class="diff-attributes__photo-label">View photo submission</span>
+      </button>
+    </div>
+
     <header>
-      <app-icon :variant="elementIcon" />{{ elementType }}
+      <app-icon :variant="elementIcon" />
+      {{ elementType }}
       <strong>#{{ elementId }}</strong>
       {{ elementAction }} by
       <strong>{{ props.diff.new.user }}</strong>
@@ -144,9 +163,11 @@ class TagMap {
 interface Props {
   datasetType: WorkspaceType;
   diff: AdiffAction;
+  imageUrl?: string;
 }
 
 const props = defineProps<Props>();
+const emit = defineEmits(['open-photo']);
 
 const elementId = computed(() => props.diff.new?.id ?? props.diff.old?.id);
 const elementType = computed(() => {
@@ -218,13 +239,46 @@ function tagClass(vals: TagMapItem) {
   overflow: hidden;
   font-size: 0.875em;
 
+  @include media-breakpoint-down(md) {
+    & {
+      min-width: 0;
+      max-width: calc(100vw - 1.2rem);
+    }
+  }
+
   > * {
     background: var(--bs-body-bg);
     box-shadow: var(--bs-box-shadow);
     border-radius: var(--bs-border-radius);
     margin-bottom: 0.5rem;
   }
 
+  &__photo-btn {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    background: none;
+    border: none;
+    padding: 0.5em;
+    gap: 0.25em;
+    cursor: pointer;
+    text-align: left;
+
+    &:hover .diff-attributes__photo-label {
+      color: var(--bs-link-hover-color);
+    }
+
+    i {
+      margin-top: 0;
+    }
+  }
+
+  &__photo-label {
+    color: var(--bs-link-color);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+
   header {
     padding: 0.25em 0.5em;
   }

components/review/Details.vue

@@ -38,6 +38,11 @@ const getChangesetMetadata = (changeset: OsmChangeset) => ({
   'Editor': changeset.tags?.created_by,
   'Source': changeset.tags?.source,
   'Imagery': changeset.tags?.imagery_used,
+  'Review Status': changeset.tags?.reviewed_by
+    ? `Reviewed by ${changeset.tags.reviewed_by}`
+    : changeset.tags?.review_requested === 'yes'
+      ? 'Needs Review'
+      : undefined,
   'Created By': changeset.user,
   'User ID': changeset.uid,
   'Created At': formatShort(changeset.created_at),

components/review/FeatureImage.vue

@@ -0,0 +1,165 @@
+<template>
+  <div class="feature-image">
+    <div class="feature-image__panel">
+      <button
+        v-show="!minimized"
+        class="feature-image__thumb-btn"
+        :disabled="error || !loaded"
+        :title="error ? undefined : 'Click to enlarge'"
+        @click="emit('open')"
+      >
+        <app-spinner v-if="!loaded && !error" />
+        <img
+          v-show="loaded && !error"
+          :src="props.imageUrl"
+          class="feature-image__thumb"
+          alt="Photo submitted with the quest"
+          @load="onLoad"
+          @error="onError"
+        >
+        <span
+          v-if="error"
+          class="feature-image__error"
+        >
+          <app-icon variant="broken_image" />
+          Image unavailable
+        </span>
+      </button>
+
+      <div class="feature-image__caption">
+        <button
+          class="feature-image__toggle"
+          :title="minimized ? 'Expand' : 'Minimize'"
+          @click="minimized = !minimized"
+        >
+          <app-icon :variant="minimized ? 'add' : 'remove'" />
+        </button>
+        <a
+          :href="props.imageUrl"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="feature-image__link"
+        >
+          KartaView
+          <app-icon variant="open_in_new" />
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  imageUrl: string;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits(['open']);
+
+const loaded = ref(false);
+const error = ref(false);
+const minimized = ref(false);
+
+watch(() => props.imageUrl, () => {
+  loaded.value = false;
+  error.value = false;
+  minimized.value = false;
+});
+
+function onLoad() {
+  loaded.value = true;
+}
+
+function onError() {
+  error.value = true;
+}
+</script>
+
+<style scoped lang="scss">
+@import "assets/scss/theme.scss";
+
+.feature-image {
+  position: absolute;
+  bottom: 2rem;
+  left: 0.6rem;
+
+  @include media-breakpoint-down(lg) {
+    & { display: none; }
+  }
+
+  &__panel {
+    background: $body-bg;
+    box-shadow: $box-shadow;
+    border-radius: $border-radius;
+    overflow: hidden;
+  }
+
+  &__thumb-btn {
+    display: block;
+    width: 10rem;
+    min-height: 4rem;
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    line-height: 0;
+
+    &:disabled {
+      cursor: default;
+    }
+  }
+
+  &__thumb {
+    width: 100%;
+    height: auto;
+    display: block;
+  }
+
+  &__error {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    min-height: 4rem;
+    padding: 0.5rem;
+    gap: 0.25rem;
+    font-size: 0.8em;
+    color: $secondary;
+    line-height: 1.2;
+  }
+
+  &__caption {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.2rem 0.5rem;
+    font-size: 0.75em;
+  }
+
+  &__toggle {
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    color: $secondary;
+    line-height: 1;
+
+    &:hover {
+      color: $body-color;
+    }
+
+    i {
+      margin-top: 0;
+    }
+  }
+
+  &__link {
+    color: $secondary;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+</style>

components/review/FilterDropdown.vue

@@ -62,6 +62,16 @@
           Show Resolved
         </label>
       </div>
+      <div class="form-check form-switch">
+        <label class="form-check-label">
+          <input
+            v-model="filter.includeNeedsReview"
+            type="checkbox"
+            class="form-check-input"
+          >
+          Needs Review Only
+        </label>
+      </div>
     </div>
 
     <div class="dropdown-divider" />

components/review/Item.vue

@@ -19,6 +19,12 @@
         >
           Resolved
         </span>
+        <span
+          v-if="props.item.needsReview"
+          class="badge bg-warning text-dark mx-1"
+        >
+          Needs Review
+        </span>
       </span>
       <span :class="elapsedClasses">
         <app-icon

components/review/Map.vue

@@ -81,10 +81,17 @@ const mapRef = useTemplateRef<HTMLDivElement>('map');
 let reviewMap: maplibregl.Map;
 let adiffViewer: typeof MapLibreAugmentedDiffViewer;
 let popup: maplibregl.Popup;
+let resizeObserver: ResizeObserver | undefined;
 
 onMounted(() => {
   initMap();
 });
+
+onUnmounted(() => {
+  resizeObserver?.disconnect();
+  reviewMap?.remove();
+});
+
 watch(() => props.item, drawItem);
 
 function initMap() {
@@ -97,6 +104,9 @@ function initMap() {
       container: mapRef.value,
       style: reviewMapStyle,
     });
+
+    resizeObserver = new ResizeObserver(() => reviewMap?.resize());
+    resizeObserver.observe(mapRef.value);
   }
 }
 

components/review/Overlay.vue

@@ -5,6 +5,8 @@
       v-model:show-discussion="showDiscussion"
       :item="item"
       @edit="props.onEdit"
+      @resolve="$emit('resolve')"
+      @back="emit('back')"
     />
 
     <div class="review-overlay-panels">
@@ -29,6 +31,7 @@ interface Props {
 }
 
 const props = defineProps<Props>();
+const emit = defineEmits(['back', 'resolve']);
 
 const showDetails = ref(false);
 const showDiscussion = ref(false);
@@ -46,7 +49,7 @@ watch(() => props.item, () => {
   position: absolute;
   top: 1rem;
   left: 1rem;
-  margin-right: 1rem;
+  max-width: calc(100vw - 2rem);
 
   .review-overlay-panels {
     max-height: calc(100vh - $navbar-height - 6rem);