Show dish codes inline with titles

Author: vekexasia

web/src/components/menu/views/MenuItemListView.test.tsx

@@ -0,0 +1,33 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { MenuItemListView, type MenuItemView } from './MenuItemListView';
+
+vi.mock('next/image', () => ({
+  default: (props: Record<string, unknown>) => {
+    const { src, alt, ...rest } = props;
+    delete rest.fill;
+    delete rest.sizes;
+    delete rest.unoptimized;
+    // eslint-disable-next-line @next/next/no-img-element
+    return <img src={src as string} alt={alt as string} {...rest} />;
+  },
+}));
+
+const item: MenuItemView = {
+  name: 'Bruschetta',
+  internalCode: '042',
+  description: 'Pane tostato',
+  price: 7.5,
+};
+
+describe('MenuItemListView internal code layout', () => {
+  it('shows the internal code inline after the item title', () => {
+    render(<MenuItemListView item={item} />);
+
+    const heading = screen.getByRole('heading', { level: 4 });
+    const code = screen.getByText('042');
+
+    expect(heading).toHaveTextContent('Bruschetta042');
+    expect(code).toHaveClass('ml-2', 'font-mono', 'text-xs');
+  });
+});

web/src/components/menu/views/MenuItemListView.tsx

@@ -60,17 +60,17 @@ export function MenuItemListView({ item, outOfStockLabel, onClick }: MenuItemLis
       } ${interactive ? "cursor-pointer hover:shadow-md transition-all" : ""}`}
     >
       <div className="flex-1 min-w-0">
-        <h4 className="font-semibold text-gray-800 flex items-start justify-between gap-2">
-          <span>
-            <span className="block">{item.name}</span>
-            {item.nameSecondary && (
-              <span className="mt-0.5 block text-xs font-medium text-gray-500">
-                {item.nameSecondary}
-              </span>
-            )}
-          </span>
+        <h4 className="font-semibold text-gray-800">
+          <span>{item.name}</span>
           {item.internalCode && (
-            <span className="font-mono text-xs font-normal text-gray-400 shrink-0 mt-0.5">{item.internalCode}</span>
+            <span className="ml-2 align-baseline font-mono text-xs font-normal text-gray-400">
+              {item.internalCode}
+            </span>
+          )}
+          {item.nameSecondary && (
+            <span className="mt-0.5 block text-xs font-medium text-gray-500">
+              {item.nameSecondary}
+            </span>
           )}
         </h4>
         {item.labels && item.labels.length > 0 && (