Initial commit: Add logistics and order_detail message types

- Add Logistics component with progress tracking
- Add OrderDetail component for order information
- Support data-driven steps and actions
- Add blue color scale to widget SCSS
- Fix node overflow and progress bar rendering issues
- Add English translations for dashboard components

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

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

@@ -0,0 +1,113 @@
+<script setup>
+import { computed } from 'vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import CardPriorityIcon from 'dashboard/components-next/Conversation/ConversationCard/CardPriorityIcon.vue';
+import IssueHeader from './IssueHeader.vue';
+
+const props = defineProps({
+  linkedIssue: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['unlinkIssue']);
+
+const { linkedIssue } = props;
+
+const priorityMap = {
+  1: 'Urgent',
+  2: 'High',
+  3: 'Medium',
+  4: 'Low',
+};
+
+const issue = computed(() => linkedIssue.issue);
+
+const assignee = computed(() => {
+  const assigneeDetails = issue.value.assignee;
+  if (!assigneeDetails) return null;
+  return {
+    name: assigneeDetails.name,
+    thumbnail: assigneeDetails.avatarUrl,
+  };
+});
+
+const labels = computed(() => issue.value.labels?.nodes || []);
+
+const priorityLabel = computed(() => priorityMap[issue.value.priority]);
+
+const unlinkIssue = () => {
+  emit('unlinkIssue', linkedIssue.id, linkedIssue.issue.identifier);
+};
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <div class="flex flex-col w-full">
+      <IssueHeader
+        :identifier="issue.identifier"
+        :link-id="linkedIssue.id"
+        :issue-url="issue.url"
+        @unlink-issue="unlinkIssue"
+      />
+
+      <h3 class="mt-2 text-sm font-medium text-n-slate-12">
+        {{ issue.title }}
+      </h3>
+
+      <p
+        v-if="issue.description"
+        class="mt-1 text-sm text-n-slate-11 line-clamp-3"
+      >
+        {{ issue.description }}
+      </p>
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <div class="flex items-center gap-2">
+        <div v-if="assignee" class="flex items-center gap-1.5">
+          <Avatar :src="assignee.thumbnail" :name="assignee.name" :size="16" />
+          <span class="text-xs capitalize truncate text-n-slate-12">
+            {{ assignee.name }}
+          </span>
+        </div>
+
+        <div v-if="assignee" class="w-px h-3 bg-n-slate-4" />
+
+        <div class="flex items-center gap-1">
+          <Icon
+            icon="i-lucide-activity"
+            class="size-4"
+            :style="{ color: issue.state?.color }"
+          />
+          <span class="text-xs text-n-slate-12">
+            {{ issue.state?.name }}
+          </span>
+        </div>
+
+        <div v-if="priorityLabel" class="w-px h-3 bg-n-slate-4" />
+
+        <div v-if="priorityLabel" class="flex items-center gap-1.5">
+          <CardPriorityIcon :priority="priorityLabel.toLowerCase()" />
+          <span class="text-xs text-n-slate-12">
+            {{ priorityLabel }}
+          </span>
+        </div>
+      </div>
+
+      <div v-if="labels.length" class="flex flex-wrap">
+        <woot-label
+          v-for="label in labels"
+          :key="label.id"
+          :title="label.name"
+          :description="label.description"
+          :color="label.color"
+          variant="smooth"
+          small
+        />
+      </div>
+    </div>
+  </div>
+</template>