fix(frontend): align item type icons across breadcrumbs

Author: stefan-ernst

frontend/src/lib/features/items/ItemDetailBreadcrumbLevel.svelte

@@ -0,0 +1,57 @@
+<script>
+  import ItemTypeIcon from '../../components/ItemTypeIcon.svelte';
+  import Tooltip from '../../components/Tooltip.svelte';
+
+  let {
+    itemType = null,
+    iconTooltip = itemType?.name,
+    iconTitle = undefined,
+    iconSlotTestId = undefined,
+    iconTriggerTestId = undefined,
+    iconTestId = undefined,
+    oniconclick = null,
+    iconOverlay = null,
+    class: className = '',
+    style: customStyle = '',
+    children: levelContent
+  } = $props();
+</script>
+
+<div class="flex min-w-0 items-center gap-2 {className}" style={customStyle}>
+  {#if itemType}
+    <div
+      data-testid={iconSlotTestId}
+      class="relative inline-flex h-6 w-6 flex-shrink-0 items-center justify-center leading-none"
+    >
+      <Tooltip
+        content={iconTooltip}
+        class="inline-flex h-full w-full items-center justify-center leading-none"
+      >
+        {#snippet children()}
+          {#if oniconclick}
+            <button
+              type="button"
+              data-testid={iconTriggerTestId}
+              data-item-type-id={itemType.id}
+              onclick={oniconclick}
+              class="inline-flex h-full w-full cursor-pointer items-center justify-center rounded leading-none focus:outline-none focus:ring-2 focus:ring-blue-500"
+              title={iconTitle}
+            >
+              <ItemTypeIcon {itemType} testId={iconTestId} />
+            </button>
+          {:else}
+            <span class="inline-flex h-full w-full items-center justify-center leading-none cursor-help">
+              <ItemTypeIcon {itemType} testId={iconTestId} />
+            </span>
+          {/if}
+        {/snippet}
+      </Tooltip>
+
+      {#if iconOverlay}
+        {@render iconOverlay()}
+      {/if}
+    </div>
+  {/if}
+
+  {@render levelContent()}
+</div>

frontend/src/lib/features/items/ItemDetailBreadcrumbs.svelte

@@ -3,6 +3,7 @@
   import Tooltip from '../../components/Tooltip.svelte';
   import Input from '../../components/Input.svelte';
   import ItemTypeIcon from '../../components/ItemTypeIcon.svelte';
+  import ItemDetailBreadcrumbLevel from './ItemDetailBreadcrumbLevel.svelte';
   import ItemKey from '../items/ItemKey.svelte';
   import { api } from '../../api.js';
   import { t } from '../../stores/i18n.svelte.js';
@@ -265,14 +266,11 @@
   <!-- Parent Hierarchy in breadcrumb -->
   {#if parentHierarchy.length > 0}
     {#each parentHierarchy as parent}
-      <div class="flex items-center gap-2 min-w-0">
-        {#if parent.itemType}
-          <Tooltip content={parent.itemType.name}>
-            {#snippet children()}
-              <ItemTypeIcon itemType={parent.itemType} class="cursor-help" />
-            {/snippet}
-          </Tooltip>
-        {/if}
+      <ItemDetailBreadcrumbLevel
+        itemType={parent.itemType}
+        iconSlotTestId={`item-parent-type-icon-slot-${parent.id}`}
+        iconTestId={`item-parent-type-icon-${parent.id}`}
+      >
         <a
           data-testid={`item-parent-breadcrumb-${parent.id}`}
           href={`/workspaces/${parent.workspace_id}/items/${parent.id}`}
@@ -282,7 +280,7 @@
         >
           {parent.title}
         </a>
-      </div>
+      </ItemDetailBreadcrumbLevel>
       <span class="flex-shrink-0">/</span>
     {/each}
   {:else if !item.parent_id && !(workspace?.is_personal && item.related_work_item_id)}
@@ -481,24 +479,19 @@
     {/if}
   </div>
   {/if}
-  <div class="flex items-center gap-2 min-w-0 flex-1" style="color: var(--ds-text);">
-    {#if currentItemType}
-      <div class="relative flex-shrink-0">
-        <Tooltip content="{currentItemType.name} ({currentHierarchyLevel?.name || 'Unknown level'}) — click to change">
-          {#snippet children()}
-            <button
-              type="button"
-              data-testid="item-type-change-trigger"
-              data-item-type-id={currentItemType.id}
-              onclick={openItemTypeSelector}
-              class="inline-flex h-6 w-6 items-center justify-center rounded leading-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500"
-              title="Change item type"
-            >
-              <ItemTypeIcon itemType={currentItemType} testId="item-type-change-icon" />
-            </button>
-          {/snippet}
-        </Tooltip>
-
+  <ItemDetailBreadcrumbLevel
+    itemType={currentItemType}
+    iconTooltip={currentItemType ? `${currentItemType.name} (${currentHierarchyLevel?.name || 'Unknown level'}) — click to change` : undefined}
+    iconTitle="Change item type"
+    iconSlotTestId="item-type-icon-slot"
+    iconTriggerTestId="item-type-change-trigger"
+    iconTestId="item-type-change-icon"
+    oniconclick={openItemTypeSelector}
+    class="flex-1"
+    style="color: var(--ds-text);"
+  >
+    {#snippet iconOverlay()}
+      {#if currentItemType}
         {#if showItemTypeSelector}
           <div
             data-testid="item-type-selector"
@@ -569,8 +562,8 @@
             </div>
           </div>
         {/if}
-      </div>
-    {/if}
+      {/if}
+    {/snippet}
     <Tooltip content={t('items.clickToCopyKey')}>
       {#snippet children()}
         <button
@@ -584,7 +577,7 @@
       {/snippet}
     </Tooltip>
     <span class="truncate">{item.title}</span>
-  </div>
+  </ItemDetailBreadcrumbLevel>
 </div>
 
 {#if hasHierarchyMismatch}