Add configurable confirm dialog logo and update Project Settings

web-app/packages/lib/src/modules/dialog/components/ConfirmDialog.vue

@@ -6,17 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
 <template>
   <div class="flex flex-column align-items-center pb-4 text-center gap-2">
-    <img
-      v-if="severity === 'danger'"
-      src="@/assets/trash.svg"
-      alt="Cover for confirm dialog"
-    />
-    <img
-      v-else-if="severity === 'warning'"
-      src="@/assets/warning-dialog.svg"
-      alt="Cover for confirm dialog"
-    />
-    <img v-else src="@/assets/neutral.svg" alt="Cover for confirm dialog" />
+    <img :src="logoSrc" alt="Cover for confirm dialog" />
     <span class="text-color-forest title-t1">{{ text }}</span>
     <span class="paragraph-p5 opacity-80">{{ description }}</span>
     <span v-if="hint" class="title-t2 my-2">{{ hint }}</span>
@@ -73,13 +63,18 @@ import { ref, computed, defineEmits, withDefaults } from 'vue'
 
 import { ConfirmDialogProps } from '../types'
 
+import negativeIcon from '@/assets/negative.svg'
+import neutralIcon from '@/assets/neutral.svg'
+import trashIcon from '@/assets/trash.svg'
+import warningIcon from '@/assets/warning-dialog.svg'
 import TipMessage from '@/common/components/TipMessage.vue'
 import { useDialogStore } from '@/modules/dialog/store'
 
 const props = withDefaults(defineProps<ConfirmDialogProps>(), {
   confirmText: 'Ok',
   cancelText: 'Cancel',
-  severity: 'primary'
+  severity: 'primary',
+  logoVariant: 'auto'
 })
 
 const confirmValue = ref('')
@@ -91,6 +86,31 @@ const isConfirmed = computed(() => {
     : true
 })
 
+const logoSrc = computed(() => {
+  const variant =
+    props.logoVariant === 'auto'
+      ? props.severity === 'danger'
+        ? 'danger'
+        : props.severity === 'warning'
+        ? 'warning'
+        : 'primary'
+      : props.logoVariant
+
+  if (variant === 'danger') {
+    return trashIcon
+  }
+
+  if (variant === 'warning') {
+    return warningIcon
+  }
+
+  if (variant === 'negative') {
+    return negativeIcon
+  }
+
+  return neutralIcon
+})
+
 const { close } = useDialogStore()
 
 function confirm() {

web-app/packages/lib/src/modules/dialog/types.ts

@@ -9,6 +9,10 @@ import { TipMessageProps } from '@/common'
 export interface ConfirmDialogProps {
   text: string
   severity?: 'primary' | 'danger' | 'warning'
+  /**
+   * Optional logo override. When omitted, logo follows current severity behavior.
+   */
+  logoVariant?: 'auto' | 'primary' | 'danger' | 'warning' | 'negative'
   confirmText?: string
   cancelText?: string
   description?: string

web-app/packages/lib/src/modules/project/routes.ts

@@ -59,7 +59,7 @@ export const getProjectTitle = (
       query.file_path || 'Files',
       route.params.projectName as string
     ],
-    [ProjectRouteName.ProjectSettings]: ['Settings', projectName],
+    [ProjectRouteName.ProjectSettings]: ['Settings & API', projectName],
     [ProjectRouteName.ProjectHistory]: [
       query.version_id || 'History',
       projectName

web-app/packages/lib/src/modules/project/views/ProjectViewTemplate.vue

@@ -164,7 +164,11 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
-    mapRoute: String
+    mapRoute: String,
+    settingsTabHeader: {
+      type: String,
+      default: 'Settings'
+    }
   },
   data() {
     return {
@@ -208,7 +212,7 @@ export default defineComponent({
           })
           tabs.push({
             route: ProjectRouteName.ProjectSettings,
-            header: 'Settings'
+            header: this.settingsTabHeader
           })
         }
       }