From 302bbd21f5573f6541fa87b4637b6ebd0cce41b9 Mon Sep 17 00:00:00 2001
From: pmslava <pmslava@tutanota.com>
Date: Wed, 9 Sep 2026 00:16:22 +0200
Subject: [PATCH 1/2] conversation: show a priority marker on conversation list
 rows

The list showed no priority at all, so an agent scanning the inbox could not tell a
High-priority conversation from the rest without opening it - which matters when an
automation rule raises priority for paying customers. Each row now carries a small
coloured dot in the metadata cluster next to the channel icon and the relative time,
using the semantic tokens the rest of the desk uses for urgency: destructive for High,
warning-600 for Medium, muted-foreground for Low, and muted-foreground for any priority
an install has renamed. The dot is a tooltip trigger and carries an aria-label, both
reading "Priority: <name>", and rows whose priority is unset render nothing. The
mapping lives in one small PriorityDot component so any future priority display stays
consistent with it. No backend change was needed: the get-conversations query already
selects conversation_priorities.name as priority, ConversationListItem already carries
it, and a priority change is broadcast over the websocket and merged into the list row.
---
 .../src/features/conversation/PriorityDot.vue | 44 +++++++++++++++++++
 .../list/ConversationListItem.vue             |  2 +
 2 files changed, 46 insertions(+)
 create mode 100644 frontend/apps/main/src/features/conversation/PriorityDot.vue

diff --git a/frontend/apps/main/src/features/conversation/PriorityDot.vue b/frontend/apps/main/src/features/conversation/PriorityDot.vue
new file mode 100644
index 00000000..1bc0dfd2
--- /dev/null
+++ b/frontend/apps/main/src/features/conversation/PriorityDot.vue
@@ -0,0 +1,44 @@
+<template>
+  <Tooltip v-if="priorityName">
+    <TooltipTrigger asChild>
+      <span
+        class="h-2 w-2 rounded-full flex-shrink-0"
+        :class="dotClass"
+        role="img"
+        :aria-label="priorityLabel"
+      />
+    </TooltipTrigger>
+    <TooltipContent>{{ priorityLabel }}</TooltipContent>
+  </Tooltip>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@shared-ui/components/ui/tooltip'
+import { useI18n } from 'vue-i18n'
+
+// Priorities are seeded rows (Low, Medium, High) and are not translated, so match on the
+// name and keep anything unrecognised neutral rather than inventing a colour for it.
+const PRIORITY_DOT_CLASSES = {
+  low: 'bg-muted-foreground',
+  medium: 'bg-warning-600',
+  high: 'bg-destructive'
+}
+
+const props = defineProps({
+  priority: {
+    type: String,
+    default: ''
+  }
+})
+
+const { t } = useI18n()
+
+const priorityName = computed(() => (props.priority || '').trim())
+
+const dotClass = computed(
+  () => PRIORITY_DOT_CLASSES[priorityName.value.toLowerCase()] || 'bg-muted-foreground'
+)
+
+const priorityLabel = computed(() => `${t('globals.terms.priority', 1)}: ${priorityName.value}`)
+</script>
diff --git a/frontend/apps/main/src/features/conversation/list/ConversationListItem.vue b/frontend/apps/main/src/features/conversation/list/ConversationListItem.vue
index 3c03e086..8cc11add 100644
--- a/frontend/apps/main/src/features/conversation/list/ConversationListItem.vue
+++ b/frontend/apps/main/src/features/conversation/list/ConversationListItem.vue
@@ -60,6 +60,7 @@
                   <TooltipContent>{{ contactFullName }}</TooltipContent>
                 </Tooltip>
                 <div class="flex items-center gap-1 flex-shrink-0">
+                  <PriorityDot :priority="conversation.priority" />
                   <Tooltip>
                     <TooltipTrigger asChild>
                       <component
@@ -176,6 +177,7 @@ import {
   ContextMenuTrigger
 } from '@shared-ui/components/ui/context-menu'
 import SlaBadge from '@main/features/sla/SlaBadge.vue'
+import PriorityDot from '@main/features/conversation/PriorityDot.vue'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@shared-ui/components/ui/tooltip'
 import { Checkbox } from '@shared-ui/components/ui/checkbox'
 import { useConversationStore } from '@main/stores/conversation'

From a870722c539cafbd17f9a1e13b5486e4596e0835 Mon Sep 17 00:00:00 2001
From: Abhinav Raut <abhinavrautcs@gmail.com>
Date: Mon, 14 Sep 2026 18:35:55 +0530
Subject: [PATCH 2/2] use ladders for priority market

---
 .../{PriorityDot.vue => PriorityMarker.vue}   | 24 +++++++--------
 .../list/ConversationListItem.vue             |  4 +--
 .../components/icons/PriorityIcon.vue         | 30 +++++++++++++++++++
 3 files changed, 44 insertions(+), 14 deletions(-)
 rename frontend/apps/main/src/features/conversation/{PriorityDot.vue => PriorityMarker.vue} (56%)
 create mode 100644 frontend/shared-ui/components/icons/PriorityIcon.vue

diff --git a/frontend/apps/main/src/features/conversation/PriorityDot.vue b/frontend/apps/main/src/features/conversation/PriorityMarker.vue
similarity index 56%
rename from frontend/apps/main/src/features/conversation/PriorityDot.vue
rename to frontend/apps/main/src/features/conversation/PriorityMarker.vue
index 1bc0dfd2..e24ec6be 100644
--- a/frontend/apps/main/src/features/conversation/PriorityDot.vue
+++ b/frontend/apps/main/src/features/conversation/PriorityMarker.vue
@@ -1,9 +1,11 @@
 <template>
   <Tooltip v-if="priorityName">
     <TooltipTrigger asChild>
-      <span
-        class="h-2 w-2 rounded-full flex-shrink-0"
-        :class="dotClass"
+      <PriorityIcon
+        :level="marker.level"
+        :size="13"
+        class="flex-shrink-0"
+        :class="marker.class"
         role="img"
         :aria-label="priorityLabel"
       />
@@ -14,16 +16,16 @@
 
 <script setup>
 import { computed } from 'vue'
+import PriorityIcon from '@shared-ui/components/icons/PriorityIcon.vue'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@shared-ui/components/ui/tooltip'
 import { useI18n } from 'vue-i18n'
 
-// Priorities are seeded rows (Low, Medium, High) and are not translated, so match on the
-// name and keep anything unrecognised neutral rather than inventing a colour for it.
-const PRIORITY_DOT_CLASSES = {
-  low: 'bg-muted-foreground',
-  medium: 'bg-warning-600',
-  high: 'bg-destructive'
+const PRIORITY_MARKERS = {
+  low: { level: 1, class: 'text-muted-foreground' },
+  medium: { level: 2, class: 'text-warning-600' },
+  high: { level: 3, class: 'text-destructive' }
 }
+const UNKNOWN_MARKER = { level: 0, class: 'text-muted-foreground' }
 
 const props = defineProps({
   priority: {
@@ -36,9 +38,7 @@ const { t } = useI18n()
 
 const priorityName = computed(() => (props.priority || '').trim())
 
-const dotClass = computed(
-  () => PRIORITY_DOT_CLASSES[priorityName.value.toLowerCase()] || 'bg-muted-foreground'
-)
+const marker = computed(() => PRIORITY_MARKERS[priorityName.value.toLowerCase()] || UNKNOWN_MARKER)
 
 const priorityLabel = computed(() => `${t('globals.terms.priority', 1)}: ${priorityName.value}`)
 </script>
diff --git a/frontend/apps/main/src/features/conversation/list/ConversationListItem.vue b/frontend/apps/main/src/features/conversation/list/ConversationListItem.vue
index 8cc11add..f1c9e50a 100644
--- a/frontend/apps/main/src/features/conversation/list/ConversationListItem.vue
+++ b/frontend/apps/main/src/features/conversation/list/ConversationListItem.vue
@@ -60,7 +60,7 @@
                   <TooltipContent>{{ contactFullName }}</TooltipContent>
                 </Tooltip>
                 <div class="flex items-center gap-1 flex-shrink-0">
-                  <PriorityDot :priority="conversation.priority" />
+                  <PriorityMarker :priority="conversation.priority" />
                   <Tooltip>
                     <TooltipTrigger asChild>
                       <component
@@ -177,7 +177,7 @@ import {
   ContextMenuTrigger
 } from '@shared-ui/components/ui/context-menu'
 import SlaBadge from '@main/features/sla/SlaBadge.vue'
-import PriorityDot from '@main/features/conversation/PriorityDot.vue'
+import PriorityMarker from '@main/features/conversation/PriorityMarker.vue'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@shared-ui/components/ui/tooltip'
 import { Checkbox } from '@shared-ui/components/ui/checkbox'
 import { useConversationStore } from '@main/stores/conversation'
diff --git a/frontend/shared-ui/components/icons/PriorityIcon.vue b/frontend/shared-ui/components/icons/PriorityIcon.vue
new file mode 100644
index 00000000..b73a6efa
--- /dev/null
+++ b/frontend/shared-ui/components/icons/PriorityIcon.vue
@@ -0,0 +1,30 @@
+<template>
+  <svg :width="size" :height="size" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <template v-if="level">
+      <rect
+        v-for="bar in 3"
+        :key="bar"
+        :x="1 + (bar - 1) * 5"
+        :y="14 - bar * 4"
+        width="3"
+        :height="bar * 4"
+        rx="0.8"
+        :class="bar <= level ? 'fill-current' : 'fill-border'"
+      />
+    </template>
+    <circle v-else cx="8" cy="8" r="6.5" fill="none" stroke="currentColor" stroke-width="1.5" />
+  </svg>
+</template>
+
+<script setup>
+defineProps({
+  level: {
+    type: Number,
+    default: 0
+  },
+  size: {
+    type: [Number, String],
+    default: 16
+  }
+})
+</script>