add external song indicator for queue

src/shared/components/external-song-indicator/external-song-indicator.module.css

@@ -0,0 +1,9 @@
+.root {
+    display: inline-flex;
+    align-items: center;
+    vertical-align: middle;
+}
+
+.with-space {
+    margin-right: var(--theme-spacing-xs);
+}

src/shared/components/external-song-indicator/external-song-indicator.tsx

@@ -0,0 +1,35 @@
+import clsx from 'clsx';
+import { ComponentPropsWithoutRef } from 'react';
+
+import styles from './external-song-indicator.module.css';
+
+import { Icon } from '/@/shared/components/icon/icon';
+
+export interface ExternalSongIndicatorProps extends ComponentPropsWithoutRef<'span'> {
+    isExternal: boolean | null | undefined;
+    size?: 'lg' | 'md' | 'sm' | 'xl' | 'xs';
+    withSpace?: boolean;
+}
+
+export const ExternalSongIndicator = ({
+    className,
+    isExternal,
+    size = 'lg',
+    withSpace = true,
+    ...rest
+}: ExternalSongIndicatorProps) => {
+    if (!isExternal) {
+        return null;
+    }
+
+    return (
+        <span
+            className={clsx(styles.root, className, {
+                [styles.withSpace]: withSpace,
+            })}
+            {...rest}
+        >
+            <Icon icon="externalSong" size={size} />
+        </span>
+    );
+};

src/shared/components/icon/icon.tsx

@@ -115,6 +115,7 @@ import {
     LuWifi,
     LuWifiOff,
     LuX,
+    LuYoutube,
 } from 'react-icons/lu';
 import { MdOutlineVisibility, MdOutlineVisibilityOff } from 'react-icons/md';
 import { PiMouseLeftClickFill, PiMouseRightClickFill } from 'react-icons/pi';
@@ -173,6 +174,7 @@ export const AppIcon = {
     error: LuShieldAlert,
     expand: LuExpand,
     externalLink: LuExternalLink,
+    externalSong: LuYoutube,
     favorite: LuHeart,
     fileJson: LuFileJson,
     filter: LuListFilter,