Refine task setup and task list UX for large task sets

add tasking API env flags and real-data config defaults
update AOI upload warning threshold to 5000 square kilometers
tighten project/task typings for API responses
switch save-tasks CTA to a clearer non-download icon
show 6 tasks per page and fix lock menu clipping in tasks list
collapse long pagination ranges with ellipses for large task counts

Author: shweta2101

components/workspace-project-details/TaskSetupPanel.vue

@@ -105,7 +105,7 @@
       >
         <app-spinner v-if="saving" size="sm" />
         <template v-else>
-          <app-icon variant="save_alt" size="18" no-margin />
+          <app-icon variant="task_alt" size="18" no-margin />
           Save Tasks
         </template>
       </button>

components/workspace-project-details/TasksTab.vue

@@ -110,16 +110,25 @@
           <app-icon variant="chevron_left" size="22" no-margin />
         </button>
 
-        <button
-          v-for="page in totalPages"
-          :key="page"
-          type="button"
-          :class="{ 'project-detail-task-pagination-active': page === currentPage }"
-          :aria-current="page === currentPage ? 'page' : undefined"
-          @click="currentPage = page"
-        >
-          {{ page }}
-        </button>
+        <template v-for="item in visiblePaginationItems" :key="item.key">
+          <span
+            v-if="item.type === 'ellipsis'"
+            class="project-detail-task-pagination-ellipsis"
+            aria-hidden="true"
+          >
+            ...
+          </span>
+
+          <button
+            v-else
+            type="button"
+            :class="{ 'project-detail-task-pagination-active': item.page === currentPage }"
+            :aria-current="item.page === currentPage ? 'page' : undefined"
+            @click="currentPage = item.page"
+          >
+            {{ item.page }}
+          </button>
+        </template>
 
         <button
           type="button"
@@ -151,6 +160,9 @@ import type { WorkspaceProjectTaskListItem, WorkspaceProjectTaskStatus } from '~
 
 type TaskSortOption = 'latest' | 'oldest' | 'task_asc' | 'task_desc';
 type TaskStatusFilter = WorkspaceProjectTaskStatus | 'all';
+type PaginationItem =
+  | { type: 'page'; key: string; page: number }
+  | { type: 'ellipsis'; key: string };
 
 interface SelectOption {
   label: string;
@@ -174,8 +186,10 @@ const emit = defineEmits<{
   'unlock-task': [taskNumber: number];
 }>();
 
-/** Number of tasks shown per page. Change this if you want larger or smaller pages. */
-const pageSize = 5;
+/** Keep the page short enough to fit the panel while matching the requested 6-row layout. */
+const pageSize = 6;
+/** Limit how many numbered pagination buttons we render before collapsing with ellipses. */
+const maxVisiblePaginationButtons = 7;
 const searchQuery = ref('');
 const selectedStatus = ref<TaskStatusFilter>('all');
 const sortBy = ref<TaskSortOption>('latest');
@@ -259,6 +273,55 @@ const paginationSummary = computed(() => {
   return `Showing ${start} to ${end} of ${sortedTasks.value.length} entries`;
 });
 
+/**
+ * Compress long pagination runs so the footer stays readable:
+ *   1 ... 7 8 9 ... 17
+ * instead of rendering every page button in a single line.
+ */
+const visiblePaginationItems = computed<PaginationItem[]>(() => {
+  const pages = totalPages.value;
+
+  if (pages <= maxVisiblePaginationButtons) {
+    return Array.from({ length: pages }, (_, index) => ({
+      type: 'page' as const,
+      key: `page-${index + 1}`,
+      page: index + 1,
+    }));
+  }
+
+  const firstPage = 1;
+  const lastPage = pages;
+  const current = currentPage.value;
+  const interiorSlots = maxVisiblePaginationButtons - 2;
+  let windowStart = Math.max(firstPage + 1, current - Math.floor(interiorSlots / 2));
+  let windowEnd = windowStart + interiorSlots - 1;
+
+  if (windowEnd >= lastPage) {
+    windowEnd = lastPage - 1;
+    windowStart = windowEnd - interiorSlots + 1;
+  }
+
+  const items: PaginationItem[] = [
+    { type: 'page', key: `page-${firstPage}`, page: firstPage },
+  ];
+
+  if (windowStart > firstPage + 1) {
+    items.push({ type: 'ellipsis', key: 'ellipsis-start' });
+  }
+
+  for (let page = windowStart; page <= windowEnd; page += 1) {
+    items.push({ type: 'page', key: `page-${page}`, page });
+  }
+
+  if (windowEnd < lastPage - 1) {
+    items.push({ type: 'ellipsis', key: 'ellipsis-end' });
+  }
+
+  items.push({ type: 'page', key: `page-${lastPage}`, page: lastPage });
+
+  return items;
+});
+
 /**
  * Reset to page 1 whenever the user changes the search, status filter, or sort.
  * Without this, the user could be on page 3 and change the filter to show only 2 tasks,
@@ -354,11 +417,12 @@ function formatTaskStatus(status: WorkspaceProjectTaskStatus) {
 }
 
 .project-detail-task-list-wrap {
+  position: relative;
   display: grid;
   gap: 0;
   border: 1px solid rgba($text-navy, 0.08);
   border-radius: 0.85rem;
-  overflow: hidden;
+  overflow: visible;
 }
 
 .project-detail-task-list-header,
@@ -380,6 +444,7 @@ function formatTaskStatus(status: WorkspaceProjectTaskStatus) {
   margin: 0;
   padding: 0;
   list-style: none;
+  overflow: visible;
 }
 
 .project-detail-task-item {
@@ -485,22 +550,28 @@ function formatTaskStatus(status: WorkspaceProjectTaskStatus) {
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
+  flex-wrap: wrap;
   padding-top: 1rem;
 }
 
 .project-detail-task-footer p {
   margin: 0;
   color: #5a607b;
   font-size: 0.95rem;
+  flex: 0 1 auto;
 }
 
 .project-detail-task-pagination {
   display: flex;
   align-items: center;
   gap: 0.25rem;
+  flex: 1 1 auto;
+  flex-wrap: wrap;
+  justify-content: flex-end;
 }
 
 .project-detail-task-pagination button {
+  min-width: 2.15rem;
   width: 2.15rem;
   height: 2.15rem;
   display: inline-flex;
@@ -517,6 +588,15 @@ function formatTaskStatus(status: WorkspaceProjectTaskStatus) {
   background: $primary !important;
 }
 
+.project-detail-task-pagination-ellipsis {
+  min-width: 1.5rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #7b819c;
+  font-size: 1rem;
+}
+
 .project-detail-task-pagination button:disabled {
   opacity: 0.45;
 }
@@ -563,6 +643,10 @@ function formatTaskStatus(status: WorkspaceProjectTaskStatus) {
     flex-direction: column;
     align-items: flex-start;
   }
+
+  .project-detail-task-pagination {
+    justify-content: flex-start;
+  }
 }
 
 @container (max-width: 420px) {
@@ -580,5 +664,9 @@ function formatTaskStatus(status: WorkspaceProjectTaskStatus) {
     flex-direction: column;
     align-items: flex-start;
   }
+
+  .project-detail-task-pagination {
+    justify-content: flex-start;
+  }
 }
 </style>

data/project-wizard-step-config.json

@@ -51,8 +51,8 @@
         "dropzoneActionLabel": "Drop files here or click to upload.",
         "dropzoneDescription": "Upload an AOI GeoJSON file.",
         "resetLabel": "Reset",
-        "uploadWarningThresholdSquareKilometers": 1,
-        "uploadWarningText": "Project area is higher than 1 square kilometer."
+        "uploadWarningThresholdSquareKilometers": 5000,
+        "uploadWarningText": "Project area is higher than 5000 squared kilometers."
       },
       "map": {
         "center": [-122.3321, 47.6062],

types/projects.ts

@@ -20,7 +20,7 @@ export type WorkspaceProjectTaskStatus =
   | 'needs_more_mapping'
   | 'completed';
 export type WorkspaceProjectContributorRole = 'validator' | 'mapper' | 'lead';
-export type WorkspaceProjectTaskApiStatus = 'to_map' | 'to_validate' | 'more_mapping_needed' | 'done' | string;
+export type WorkspaceProjectTaskApiStatus = 'to_map' | 'to_validate' | 'more_mapping_needed' | 'done';
 export type WorkspaceProjectAoiFeature = Feature<Polygon | MultiPolygon>;
 
 export interface WorkspaceProjectApiItem {
@@ -99,7 +99,7 @@ export interface WorkspaceProject {
   createdBy: string;
   createdAt: Date;
   updatedAt: Date;
-  createdByName: string;
+  createdByName: string | null;
 }
 
 export interface WorkspaceProjectDetail extends WorkspaceProject {