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/shared/composables/specs/useExpandableContent.spec.js

@@ -0,0 +1,130 @@
+import { nextTick } from 'vue';
+import { useExpandableContent } from '../useExpandableContent';
+
+// Mock VueUse composables
+vi.mock('@vueuse/core', () => ({
+  useToggle: vi.fn(initialValue => {
+    let value = initialValue;
+    const toggle = newValue => {
+      value = newValue !== undefined ? newValue : !value;
+    };
+    return [{ value }, toggle];
+  }),
+  useResizeObserver: vi.fn((element, callback) => {
+    // Store callback for manual triggering in tests
+    if (element.value) {
+      callback();
+    }
+  }),
+}));
+
+describe('useExpandableContent', () => {
+  let originalGetComputedStyle;
+
+  beforeEach(() => {
+    // Mock window.getComputedStyle
+    originalGetComputedStyle = window.getComputedStyle;
+    window.getComputedStyle = vi.fn(() => ({
+      lineHeight: '20px',
+    }));
+  });
+
+  afterEach(() => {
+    window.getComputedStyle = originalGetComputedStyle;
+    vi.clearAllMocks();
+  });
+
+  it('returns expected properties', () => {
+    const result = useExpandableContent();
+
+    expect(result).toHaveProperty('contentElement');
+    expect(result).toHaveProperty('isExpanded');
+    expect(result).toHaveProperty('needsToggle');
+    expect(result).toHaveProperty('toggleExpanded');
+    expect(result).toHaveProperty('checkOverflow');
+  });
+
+  it('initializes with default values', () => {
+    const { isExpanded, needsToggle } = useExpandableContent();
+
+    expect(isExpanded.value).toBe(false);
+    expect(needsToggle.value).toBe(false);
+  });
+
+  it('checkOverflow sets needsToggle to true when content overflows', async () => {
+    const { contentElement, needsToggle, checkOverflow } =
+      useExpandableContent();
+
+    // Mock element with overflow
+    contentElement.value = {
+      scrollHeight: 100, // Much larger than 2 lines (40px)
+    };
+
+    checkOverflow();
+    await nextTick();
+
+    expect(needsToggle.value).toBe(true);
+  });
+
+  it('checkOverflow sets needsToggle to false when content fits', async () => {
+    const { contentElement, needsToggle, checkOverflow } =
+      useExpandableContent();
+
+    // Mock element without overflow
+    contentElement.value = {
+      scrollHeight: 30, // Less than 2 lines (40px)
+    };
+
+    checkOverflow();
+    await nextTick();
+
+    expect(needsToggle.value).toBe(false);
+  });
+
+  it('respects custom maxLines option', async () => {
+    const { contentElement, needsToggle, checkOverflow } = useExpandableContent(
+      {
+        maxLines: 3,
+      }
+    );
+
+    // Mock element that fits in 3 lines but not 2
+    contentElement.value = {
+      scrollHeight: 50, // Fits in 3 lines (60px) but not 2 lines (40px)
+    };
+
+    checkOverflow();
+    await nextTick();
+
+    expect(needsToggle.value).toBe(false);
+  });
+
+  it('uses defaultLineHeight when computed style is unavailable', async () => {
+    window.getComputedStyle = vi.fn(() => ({
+      lineHeight: 'normal', // Not a valid number
+    }));
+
+    const { contentElement, needsToggle, checkOverflow } = useExpandableContent(
+      {
+        defaultLineHeight: 16,
+      }
+    );
+
+    // Mock element that overflows with 16px line height (32px max)
+    contentElement.value = {
+      scrollHeight: 40,
+    };
+
+    checkOverflow();
+    await nextTick();
+
+    expect(needsToggle.value).toBe(true);
+  });
+
+  it('handles null contentElement gracefully', () => {
+    const { checkOverflow } = useExpandableContent();
+
+    // Should not throw when contentElement is null
+    expect(() => checkOverflow()).not.toThrow();
+  });
+});