Fixed task selection highlighting issue & other minor fixes

Author: shweta2101

components/project-wizard/steps/ReviewStep.vue

@@ -137,10 +137,10 @@ function formatRole(role: WorkspaceRole) {
   margin: 0;
   text-align: left;
   font-family: Lato, var(--primary-font-family), sans-serif;
-  font-size: 18px;
+  font-size: 1.125rem;
   font-style: normal;
   font-weight: 600;
-  line-height: 22px;
+  line-height: 1.375rem;
   letter-spacing: 0;
   color: #1a1e3d;
   opacity: 1;
@@ -150,10 +150,10 @@ function formatRole(role: WorkspaceRole) {
   margin: 0;
   text-align: left;
   font-family: Lato, var(--primary-font-family), sans-serif;
-  font-size: 18px;
+  font-size: 1.125rem;
   font-style: normal;
   font-weight: 400;
-  line-height: 26px;
+  line-height: 1.625rem;
   letter-spacing: 0;
   color: #5a607b;
   opacity: 1;
@@ -165,10 +165,10 @@ function formatRole(role: WorkspaceRole) {
   gap: 0.35rem;
   text-align: left;
   font-family: Lato, var(--primary-font-family), sans-serif;
-  font-size: 18px;
+  font-size: 1.125rem;
   font-style: normal;
   font-weight: 400;
-  line-height: 26px;
+  line-height: 1.625rem;
   letter-spacing: 0;
   color: #5a607b;
   opacity: 1;
@@ -186,10 +186,10 @@ function formatRole(role: WorkspaceRole) {
   gap: 0.55rem;
   color: #5a607b;
   font-family: Lato, var(--primary-font-family), sans-serif;
-  font-size: 18px;
+  font-size: 1.125rem;
   font-style: normal;
   font-weight: 400;
-  line-height: 26px;
+  line-height: 1.625rem;
 }
 
 .project-wizard-review-validator-avatar {
@@ -217,9 +217,9 @@ function formatRole(role: WorkspaceRole) {
 .project-wizard-review-instructions {
   color: #5a607b;
   font-family: Lato, var(--primary-font-family), sans-serif;
-  font-size: 18px;
+  font-size: 1.125rem;
   font-style: normal;
   font-weight: 400;
-  line-height: 26px;
+  line-height: 1.625rem;
 }
 </style>

components/workspace-project-details/ProjectMap.vue

@@ -151,22 +151,30 @@ const showLegend = computed(() =>
   || Boolean(props.taskGrid?.features.length),
 );
 
-const taskFeatureCollection = computed<FeatureCollection<Polygon>>(() => ({
-  type: 'FeatureCollection',
-  features: props.tasks
-    .filter(task => task.geometry)
-    .map(task => ({
-      type: 'Feature',
-      geometry: task.geometry as Polygon,
-      properties: {
-        id: task.id,
-        selected: task.id === props.selectedTaskId,
-        status: task.status,
-        taskNumber: task.taskNumber,
-        locked: task.locked,
-      },
-    })),
-}));
+const taskFeatureCollection = computed<FeatureCollection<Polygon>>(() => {
+  const sortedTasks = [...props.tasks].sort((a, b) => {
+    const aSelected = a.id === props.selectedTaskId ? 1 : 0;
+    const bSelected = b.id === props.selectedTaskId ? 1 : 0;
+    return aSelected - bSelected;
+  });
+
+  return {
+    type: 'FeatureCollection',
+    features: sortedTasks
+      .filter(task => task.geometry)
+      .map(task => ({
+        type: 'Feature',
+        geometry: task.geometry as Polygon,
+        properties: {
+          id: task.id,
+          selected: task.id === props.selectedTaskId,
+          status: task.status,
+          taskNumber: task.taskNumber,
+          locked: task.locked,
+        },
+      })),
+  };
+});
 
 const aoiOutlineFeatureCollection = computed<FeatureCollection<LineString | MultiLineString>>(() => ({
   type: 'FeatureCollection',
@@ -350,8 +358,8 @@ function ensureLayers() {
       'fill-opacity': [
         'case',
         ['==', ['get', 'selected'], true],
-        0.94,
-        0.82,
+        0.9,
+        0.45,
       ],
     },
   };
@@ -364,7 +372,7 @@ function ensureLayers() {
       'line-color': [
         'case',
         ['==', ['get', 'selected'], true],
-        '#2f3858',
+        '#2f3661',
         [
           'match',
           ['coalesce', ['get', 'status'], 'ready_for_mapping'],
@@ -377,8 +385,8 @@ function ensureLayers() {
       'line-width': [
         'case',
         ['==', ['get', 'selected'], true],
-        2.6,
-        2.4,
+        4.5,
+        1.5,
       ],
       'line-opacity': 1,
     },

composables/useProjectRole.ts

@@ -11,7 +11,7 @@ import type { WorkspaceRole } from '~/types/workspaces';
  *
  * Returns reactive computed flags for all permission checks needed across the project UI.
  */
-export async function useProjectRole(
+export function useProjectRole(
   workspaceId: number,
   projectId: string,
   currentUserId: string | null,
@@ -20,19 +20,6 @@ export async function useProjectRole(
   // Fetch the user's explicit project-level role. Returns null if none is assigned (404).
   const projectRole = ref<WorkspaceProjectContributorRole | null>(null);
 
-  if (currentUserId) {
-    try {
-      projectRole.value = await workspaceProjectsClient.getWorkspaceProjectUserRole(
-        workspaceId,
-        projectId,
-        currentUserId,
-      );
-    }
-    catch {
-      projectRole.value = null;
-    }
-  }
-
   /**
    * The effective role is the highest-privilege role the user holds.
    * Workspace lead always takes precedence over any project-level role.
@@ -73,6 +60,21 @@ export async function useProjectRole(
 
   const isExplicitProjectLead = computed(() => projectRole.value === 'lead');
 
+  const promise = (async () => {
+    if (currentUserId) {
+      try {
+        projectRole.value = await workspaceProjectsClient.getWorkspaceProjectUserRole(
+          workspaceId,
+          projectId,
+          currentUserId,
+        );
+      }
+      catch {
+        projectRole.value = null;
+      }
+    }
+  })();
+
   return {
     effectiveRole,
     isProjectLead,
@@ -81,5 +83,6 @@ export async function useProjectRole(
     canValidate,
     canMap,
     canManageContributors,
+    promise,
   };
 }

pages/workspace/[id]/projects/[projectId]/index.vue

@@ -259,12 +259,14 @@ const {
   canValidate,
   canMap,
   canManageContributors,
-} = await useProjectRole(
+  promise: rolePromise,
+} = useProjectRole(
   workspaceId,
   projectId,
   currentUserIdForRole,
   workspace.role,
 );
+await rolePromise;
 
 /**
  * The Contributors tab is only visible to project leads.

services/project-wizard-review.ts

@@ -1,3 +1,5 @@
+import DOMPurify from 'dompurify';
+
 import { calculateProjectWizardAoiAreaSquareKilometers } from '~/services/project-wizard-aoi';
 
 import type {
@@ -48,13 +50,9 @@ export function sanitizeReviewHtml(html: string): string {
     return '';
   }
 
-  return html
-    .replace(/<script[\s\S]*?>[\s\S]*?<\/script>/gi, '')
-    .replace(/<style[\s\S]*?>[\s\S]*?<\/style>/gi, '')
-    .replace(/\son[a-z]+="[^"]*"/gi, '')
-    .replace(/\son[a-z]+='[^']*'/gi, '')
-    .replace(/\s(href|src)\s*=\s*(['"])javascript:[\s\S]*?\2/gi, '')
-    .trim();
+  return typeof window !== 'undefined'
+    ? DOMPurify.sanitize(html, { USE_PROFILES: { html: true } })
+    : html;
 }
 
 function formatSquareKilometers(value: number): string {