wip

src/components/IssueDetails.vue

@@ -16,6 +16,7 @@ import { useSplitPane } from '@/composables/useSplitPane.ts'
 import FileUpload from '@/components/FileUpload.vue'
 import PriorityMenu from '@/components/PriorityMenu.vue'
 import IssueType from '@/components/IssueType.vue'
+import ObserversList from '@/components/ObserversList.vue'
 
 interface Props {
   ckey: string
@@ -133,6 +134,11 @@ defineExpose({
     <div class="d-flex flex-column ga-4 details__main">
       <div>{{ ckey }}</div>
 
+      <div class="d-flex ga-2">
+        <div class="text-medium-emphasis">Status:</div>
+        <status-menu :value="issue.status" @changed="onStatusChanged" />
+      </div>
+
       <editable-text :text="issue.title" @changed="onTitleChanged" />
 
       <expansion-panel title="Info">
@@ -144,15 +150,22 @@ defineExpose({
             <div class="text-medium-emphasis">Assignee:</div>
             <assignee-menu :value="issue.assignee" :compact="false" @changed="onAssigneeChanged" />
 
-            <div class="text-medium-emphasis">Status:</div>
-            <status-menu :value="issue.status" @changed="onStatusChanged" />
-
             <div class="text-medium-emphasis">Type:</div>
             <issue-type :value="issue.type" :compact="false" @changed="onTypeChanged" />
 
             <div class="text-medium-emphasis">Priority:</div>
             <priority-menu :value="issue.priority" :compact="false" @changed="onPriorityChanged" />
+          </v-card-text>
 
+          <v-divider />
+
+          <v-card-text class="u-grid">
+            <div class="text-medium-emphasis">Observers:</div>
+            <observers-list />
+          </v-card-text>
+          <v-divider />
+
+          <v-card-text class="u-grid">
             <div class="text-medium-emphasis">Created At:</div>
             <div>{{ createdAtFormatted }}</div>
 

src/components/IssueType.vue

@@ -50,8 +50,8 @@ const select = (value: unknown) => {
           v-bind="activatorProps"
         />
 
-        <v-btn v-else density="compact" class="px-1" variant="text" v-bind="activatorProps">
+        <v-btn v-else density="comfortable" slim v-bind="activatorProps">
-          <div class="d-flex align-center ga-1">
+          <div class="d-flex align-center ga-2">
             <v-icon :color="currentColor" :icon="currentIcon" />
             <span>{{ currentName }}</span>
           </div>

src/components/ObserversList.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+const observers = [{ name: 'A' }, { name: 'B' }]
+
+const remove = () => {
+  console.log('remove')
+}
+</script>
+
+<template>
+  <div class="d-flex ga-1">
+    <template v-for="(o, id) in observers" :key="id">
+      <v-avatar :text="o.name" size="28" color="primary" rounded="circle" density="compact" border />
+    </template>
+    <v-menu>
+      <template v-slot:activator="{ props: activatorProps }">
+        <v-btn rounded="circle" density="compact" icon="mdi-plus" variant="tonal" v-bind="activatorProps" />
+      </template>
+
+      <v-list>
+        <v-list-item>a</v-list-item>
+        <v-list-item>b</v-list-item>
+      </v-list>
+    </v-menu>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>

src/components/PriorityMenu.vue

@@ -46,7 +46,7 @@ const select = (value: unknown) => {
 </script>
 
 <template>
-  <div class="">
+  <div>
     <v-menu>
       <template v-slot:activator="{ props: activatorProps }">
         <v-btn
@@ -54,14 +54,15 @@ const select = (value: unknown) => {
           density="compact"
           :icon="currentIcon"
           :color="currentColor"
+          :title="currentLabel"
           variant="text"
           v-bind="activatorProps"
         />
 
-        <v-btn v-else density="compact" class="px-1" variant="text" v-bind="activatorProps">
+        <v-btn v-else density="comfortable" slim v-bind="activatorProps">
-          <div class="d-flex align-center ga-1">
+          <div class="d-flex align-center ga-2">
-            <v-icon :color="currentColor" size="x-large" :icon="currentIcon"></v-icon>
+            <v-icon :color="currentColor" :icon="currentIcon" />
-            <span>{{ currentLabel }}</span>
+            {{ currentLabel }}
           </div>
         </v-btn>
       </template>

src/components/ReporterInfo.vue

@@ -16,7 +16,7 @@ const currentInitials = computed(() => (user ? initials(user) : '?'))
 </script>
 
 <template>
-  <div class="">
+  <div>
     <div class="d-flex align-center ga-2">
       <v-btn rounded="circle" density="compact" icon variant="text">
         <v-avatar