chore: more cleanups

app/javascript/dashboard/components/widgets/conversation/linear/Issue.vue

@@ -2,12 +2,14 @@
 import { format } from 'date-fns';
 import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName.vue';
 import { computed } from 'vue';
+
 const priorityMap = {
-  0: 'Urgent',
-  1: 'High',
-  2: 'Medium',
-  3: 'Low',
+  1: 'Urgent',
+  2: 'High',
+  3: 'Medium',
+  4: 'Low',
 };
+
 const props = defineProps({
   issue: {
     type: Object,
@@ -18,30 +20,30 @@ const props = defineProps({
     required: true,
   },
 });
+
 const emit = defineEmits(['unlink-issue']);
+
 const formattedDate = computed(() => {
   return format(new Date(props.issue.createdAt), 'hh:mm a, MMM dd');
 });
 
 const assignee = computed(() => {
-  if (!props.issue.assignee) {
-    return null;
-  }
-  return {
-    name: props.issue.assignee.name,
-    thumbnail: props.issue.assignee?.avatarUrl || '',
-  };
+  return props.issue.assignee
+    ? {
+        name: props.issue.assignee?.name || '',
+        thumbnail: props.issue.assignee?.avatarUrl || '',
+      }
+    : null;
 });
 
 const labels = computed(() => {
-  if (props.issue.labels.nodes.length) {
-    return props.issue.labels.nodes;
-  }
-  return [];
+  return props.issue.labels?.nodes || [];
 });
+
 const priorityLabel = computed(() => {
   return priorityMap[props.issue.priority];
 });
+
 const unlinkIssue = () => {
   emit('unlink-issue', props.linkId);
 };
@@ -50,6 +52,7 @@ const openIssue = () => {
   window.open(props.issue.url, '_blank');
 };
 </script>
+
 <template>
   <div
     class="absolute flex flex-col items-start bg-[#fdfdfd] dark:bg-slate-800 z-50 px-4 py-3 border border-solid border-slate-75 dark:border-slate-700 w-[384px] rounded-xl gap-4 max-h-96 overflow-auto"
@@ -111,16 +114,14 @@ const openIssue = () => {
         <fluent-icon
           icon="status"
           size="14"
-          :style="{
-            color: issue.state.color,
-          }"
+          :style="{ color: issue.state.color }"
         />
         <h6 class="text-xs text-slate-600">
           {{ issue.state.name }}
         </h6>
       </div>
-      <div class="w-px h-3 bg-ash-200" />
-      <div class="flex items-center gap-1 py-1">
+      <div v-if="priorityLabel" class="w-px h-3 bg-ash-200" />
+      <div v-if="priorityLabel" class="flex items-center gap-1 py-1">
         <fluent-icon
           :icon="`priority-${priorityLabel.toLowerCase()}`"
           size="14"

app/javascript/dashboard/components/widgets/conversation/linear/index.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="relative" :class="linkedIssue ? 'group' : ''">
+  <div class="relative" :class="{ group: linkedIssue }">
     <woot-button
       v-on-clickaway="closeIssue"
       v-tooltip="tooltipText"
       variant="clear"
       color-scheme="secondary"
-      @click="openIssue()"
+      @click="openIssue"
     >
       <fluent-icon
         icon="linear"
@@ -17,7 +17,7 @@
         {{ linkedIssue.issue.identifier }}
       </span>
     </woot-button>
-    <issue-item
+    <issue
       v-if="linkedIssue"
       :issue="linkedIssue.issue"
       :link-id="linkedIssue.id"
@@ -25,7 +25,7 @@
       @unlink-issue="unlinkIssue"
     />
     <woot-modal
-      :show.sync="showPopup"
+      :show.sync="shouldShowPopup"
       :on-close="closePopup"
       class="!items-start [&>div]:!top-12"
     >
@@ -37,14 +37,15 @@
     </woot-modal>
   </div>
 </template>
+
 <script setup>
-import LinearAPI from 'dashboard/api/integrations/linear';
-import CreateOrLinkIssue from './CreateOrLinkIssue.vue';
+import { computed, ref, onMounted, watch } from 'vue';
 import { useAlert } from 'dashboard/composables';
 import { useStoreGetters } from 'dashboard/composables/store';
 import { useI18n } from 'dashboard/composables/useI18n';
-import { computed, ref, onMounted, watch } from 'vue';
-import IssueItem from './IssueItem.vue';
+import LinearAPI from 'dashboard/api/integrations/linear';
+import CreateOrLinkIssue from './CreateOrLinkIssue.vue';
+import Issue from './Issue.vue';
 
 const props = defineProps({
   conversationId: {
@@ -57,8 +58,8 @@ const getters = useStoreGetters();
 const { t } = useI18n();
 
 const linkedIssue = ref(null);
-const showIssue = ref(false);
-const showPopup = ref(false);
+const shouldShow = ref(false);
+const shouldShowPopup = ref(false);
 
 const currentAccountId = getters.getCurrentAccountId;
 
@@ -90,17 +91,17 @@ const unlinkIssue = async linkId => {
 };
 
 const openIssue = () => {
-  if (!linkedIssue.value) showPopup.value = true;
-  showIssue.value = true;
+  if (!linkedIssue.value) shouldShowPopup.value = true;
+  shouldShow.value = true;
 };
 
 const closePopup = () => {
-  showPopup.value = false;
+  shouldShowPopup.value = false;
   loadLinkedIssue();
 };
 
 const closeIssue = () => {
-  showIssue.value = false;
+  shouldShow.value = false;
 };
 
 watch(