Merge pull request #578 from pmslava/list-priority

Conversation list: show a priority marker on each row

frontend/apps/main/src/features/conversation/PriorityMarker.vue

@@ -0,0 +1,44 @@
+<template>
+  <Tooltip v-if="priorityName">
+    <TooltipTrigger asChild>
+      <PriorityIcon
+        :level="marker.level"
+        :size="13"
+        class="flex-shrink-0"
+        :class="marker.class"
+        role="img"
+        :aria-label="priorityLabel"
+      />
+    </TooltipTrigger>
+    <TooltipContent>{{ priorityLabel }}</TooltipContent>
+  </Tooltip>
+</template>
+
+<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'
+
+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: {
+    type: String,
+    default: ''
+  }
+})
+
+const { t } = useI18n()
+
+const priorityName = computed(() => (props.priority || '').trim())
+
+const marker = computed(() => PRIORITY_MARKERS[priorityName.value.toLowerCase()] || UNKNOWN_MARKER)
+
+const priorityLabel = computed(() => `${t('globals.terms.priority', 1)}: ${priorityName.value}`)
+</script>

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">
+                  <PriorityMarker :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 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'

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>