upd priority

src/components/IssueDetails.vue

@@ -129,7 +129,7 @@ defineExpose({
           <status-menu :value="issue.status" @changed="onStatusChanged" />
 
           <div class="text-medium-emphasis">Priority:</div>
-          <priority-menu :value="issue.priority" @changed="onPriorityChanged" />
+          <priority-menu :value="issue.priority" :compact="false" @changed="onPriorityChanged" />
 
           <div class="text-medium-emphasis">Reporter:</div>
           <reporter-info :user="issue.reporter" />

src/components/PriorityMenu.vue

@@ -12,31 +12,32 @@ enum Icons {
 
 interface Props {
   value?: number
+  compact?: boolean
 }
 
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), { compact: true })
 const emit = defineEmits<{ changed: [value: Issue['priority']] }>()
 
 const priorityList = ref([
-  { icon: Icons.highest, value: 4 },
+  { icon: Icons.highest, value: 4, label: 'Highest' },
-  { icon: Icons.high, value: 3 },
+  { icon: Icons.high, value: 3, label: 'High' },
-  { icon: Icons.eq, value: 2 },
+  { icon: Icons.eq, value: 2, label: 'Normal' },
-  { icon: Icons.low, value: 1 },
+  { icon: Icons.low, value: 1, label: 'Low' },
-  { icon: Icons.lowest, value: 0 },
+  { icon: Icons.lowest, value: 0, label: 'Lowest' },
 ])
 
-const currentIcon = computed(() => priorityList.value.find((el) => el.value === props.value)?.icon ?? Icons.eq)
-
 const availablePriorities = computed(() => priorityList.value.filter((el) => el.value !== props.value))
 
+const currentColor = computed(() => priorityColor(props.value))
+const currentIcon = computed(() => priorityList.value.find((el) => el.value === props.value)?.icon ?? Icons.eq)
+const currentLabel = computed(() => priorityList.value.find((el) => el.value === props.value)?.label ?? '')
+
 function priorityColor(value?: number) {
   if (value === 3 || value === 4) return 'error'
   if (value === 2) return 'success'
   return 'primary'
 }
 
-const currentColor = computed(() => priorityColor(props.value))
-
 const select = (value: unknown) => {
   if (Array.isArray(value)) {
     emit('changed', value[0])
@@ -48,13 +49,28 @@ const select = (value: unknown) => {
   <div class="">
     <v-menu>
       <template v-slot:activator="{ props: activatorProps }">
-        <v-btn density="compact" :icon="currentIcon" :color="currentColor" variant="text" v-bind="activatorProps" />
+        <v-btn
+          v-if="props.compact"
+          density="compact"
+          :icon="currentIcon"
+          :color="currentColor"
+          variant="text"
+          v-bind="activatorProps"
+        />
+
+        <v-btn v-else density="compact" class="px-1" variant="text" v-bind="activatorProps">
+          <div class="d-flex align-center ga-1">
+            <v-icon :color="currentColor" size="x-large" :icon="currentIcon"></v-icon>
+            <span>{{ currentLabel }}</span>
+          </div>
+        </v-btn>
       </template>
 
       <v-list border class="mt-1" select-strategy="single-leaf" density="compact" @update:selected="select">
-        <v-list-item nav v-for="el in availablePriorities" :key="el.value" :value="el.value">
+        <v-list-item v-for="el in availablePriorities" :key="el.value" :value="el.value">
-          <div class="d-flex justify-center align-center">
+          <div class="d-flex justify-start align-center ga-1">
             <v-icon size="small" :icon="el.icon" :color="priorityColor(el.value)" />
+            <div>{{ el.label }}</div>
           </div>
         </v-list-item>
       </v-list>