feat: add AliasedImageDoubleTags (#2796)

**Changes:**
Created a new reusable component `AliasedImageDoubleTags` to display image tags with aliased names and highlighting capabilities. The component supports customized tag styling and search term highlighting.

**Rationale:**
Extracts duplicated tag rendering logic from ImageList into a dedicated component for better maintainability and reusability. The component handles tag aliasing and visual highlighting of search terms consistently.

**Minimum required manager version:** 24.09.1

**How to test:**
> endpoint: 10.100.64.15
1. Checkout core branch to `topic/10-22-feature_add_info_field_to_gql_image_schema`
2. Visit Environments - Images pages.
3. Check Tags column. (The Environments page uses same code with `AliasedImageDoubleTags` and it will be replaced after the image list query using `ImageNode` is implemented).
4. Check it can be highlighted by searching.

**Review Requirements:**
- Verify tag aliasing works correctly
- Confirm search highlighting functions properly
- Check customized tags are displayed with cyan color
- Ensure regular tags maintain blue color scheme
- Use labels if it is customized tag.

**Note:**
The implementation in ImageList currently has the new component commented out, keeping the original inline rendering. This should be reviewed to determine if the transition to the new component should be completed.

**Screenshots:**

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/2HueYSdFvL8pOB5mgrUQ/afa3a760-7b8f-494d-a68c-b0ef82d96f6e.png)

react/src/components/AliasedImageDoubleTags.tsx

@@ -0,0 +1,77 @@
+import { useBackendAIImageMetaData } from '../hooks';
+import DoubleTag, { DoubleTagObjectValue } from './DoubleTag';
+import Flex from './Flex';
+import TextHighlighter from './TextHighlighter';
+import { AliasedImageDoubleTagsFragment$key } from './__generated__/AliasedImageDoubleTagsFragment.graphql';
+import graphql from 'babel-plugin-relay/macro';
+import _ from 'lodash';
+import React from 'react';
+import { useFragment } from 'react-relay';
+
+interface AliasedImageDoubleTagsProps extends DoubleTagObjectValue {
+  imageFrgmt?: AliasedImageDoubleTagsFragment$key | null;
+  highlightKeyword?: string;
+}
+
+const AliasedImageDoubleTags: React.FC<AliasedImageDoubleTagsProps> = ({
+  imageFrgmt,
+  highlightKeyword,
+  ...doubleTagProps
+}) => {
+  const images = useFragment(
+    graphql`
+      fragment AliasedImageDoubleTagsFragment on ImageNode {
+        labels {
+          key
+          value
+        }
+        tags @since(version: "24.09.1") {
+          key
+          value
+        }
+      }
+    `,
+    imageFrgmt,
+  );
+  const [, { tagAlias }] = useBackendAIImageMetaData();
+
+  return (
+    <Flex direction="row" align="start" gap={'xxs'}>
+      {_.map(images?.tags, (tag: { key: string; value: string }) => {
+        const isCustomized = _.includes(tag.key, 'customized_');
+        // If the tag is customized, we need to find the corresponding label instead of using the tag value (hash).
+        const tagValue = isCustomized
+          ? _.find(images?.labels, {
+              key: 'ai.backend.customized-image.name',
+            })?.value
+          : tag.value;
+        return (
+          <DoubleTag
+            key={tag.key}
+            values={[
+              {
+                label: (
+                  <TextHighlighter keyword={highlightKeyword} key={tag.key}>
+                    {tagAlias(tag.key)}
+                  </TextHighlighter>
+                ),
+                color: isCustomized ? 'cyan' : doubleTagProps.color,
+              },
+              {
+                label: (
+                  <TextHighlighter keyword={highlightKeyword} key={tagValue}>
+                    {tagValue}
+                  </TextHighlighter>
+                ),
+                color: isCustomized ? 'cyan' : doubleTagProps.color,
+              },
+            ]}
+            {...doubleTagProps}
+          />
+        );
+      })}
+    </Flex>
+  );
+};
+
+export default AliasedImageDoubleTags;