From 7cb7dfb62bd0ff364ac32f0d8bf9586a611054d9 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sat, 7 Feb 2026 02:14:24 -0800
Subject: [PATCH] add external song indicator for queue

---
 .../columns/title-artist-column.module.css    |  4 +--
 .../columns/title-artist-column.tsx           | 11 +++++-
 .../columns/title-column.module.css           |  1 +
 .../item-table-list/columns/title-column.tsx  |  8 ++++-
 .../columns/title-combined-column.module.css  |  2 +-
 .../columns/title-combined-column.tsx         | 11 +++++-
 .../external-song-indicator.module.css        |  9 +++++
 .../external-song-indicator.tsx               | 35 +++++++++++++++++++
 src/shared/components/icon/icon.tsx           |  2 ++
 9 files changed, 76 insertions(+), 7 deletions(-)
 create mode 100644 src/shared/components/external-song-indicator/external-song-indicator.module.css
 create mode 100644 src/shared/components/external-song-indicator/external-song-indicator.tsx

diff --git a/src/renderer/components/item-list/item-table-list/columns/title-artist-column.module.css b/src/renderer/components/item-list/item-table-list/columns/title-artist-column.module.css
index a6704d713..ab5232303 100644
--- a/src/renderer/components/item-list/item-table-list/columns/title-artist-column.module.css
+++ b/src/renderer/components/item-list/item-table-list/columns/title-artist-column.module.css
@@ -5,8 +5,6 @@
     height: 100%;
 }
 
-
-
 .text-container {
     display: grid;
     grid-template-rows: 1fr 1fr;
@@ -43,7 +41,6 @@ a.title {
     width: auto;
 }
 
-
 .artists {
     display: block;
     width: 100%;
@@ -65,3 +62,4 @@ a.title {
 .active {
     color: var(--theme-colors-primary);
 }
+
diff --git a/src/renderer/components/item-list/item-table-list/columns/title-artist-column.tsx b/src/renderer/components/item-list/item-table-list/columns/title-artist-column.tsx
index c2a4d61f1..aa752bbd5 100644
--- a/src/renderer/components/item-list/item-table-list/columns/title-artist-column.tsx
+++ b/src/renderer/components/item-list/item-table-list/columns/title-artist-column.tsx
@@ -14,9 +14,10 @@ import {
 import { useIsActiveRow } from '/@/renderer/components/item-list/item-table-list/item-table-list-context';
 import { JoinedArtists } from '/@/renderer/features/albums/components/joined-artists';
 import { ExplicitIndicator } from '/@/shared/components/explicit-indicator/explicit-indicator';
+import { ExternalSongIndicator } from '/@/shared/components/external-song-indicator/external-song-indicator';
 import { Icon } from '/@/shared/components/icon/icon';
 import { Text } from '/@/shared/components/text/text';
-import { Folder, LibraryItem, QueueSong } from '/@/shared/types/domain-types';
+import { Folder, LibraryItem, QueueSong, ServerType } from '/@/shared/types/domain-types';
 
 export const DefaultTitleArtistColumn = (props: ItemTableListInnerColumn) => {
     const rowItem = props.getRowItem?.(props.rowIndex) ?? (props.data as any[])[props.rowIndex];
@@ -54,6 +55,10 @@ export const DefaultTitleArtistColumn = (props: ItemTableListInnerColumn) => {
                 >
                     <Text className={styles.title} isNoSelect size="md" {...titleLinkProps}>
                         <ExplicitIndicator explicitStatus={item?.explicitStatus} />
+                        <ExternalSongIndicator
+                            isExternal={item?._serverType === ServerType.EXTERNAL}
+                            size="sm"
+                        />
                         {item.name as string}
                     </Text>
                     <div className={styles.artists}>
@@ -123,6 +128,10 @@ export const QueueSongTitleArtistColumn = (props: ItemTableListInnerColumn) => {
                         {...titleLinkProps}
                     >
                         <ExplicitIndicator explicitStatus={song?.explicitStatus} />
+                        <ExternalSongIndicator
+                            isExternal={song?._serverType === ServerType.EXTERNAL}
+                            size="sm"
+                        />
                         {row.name as string}
                         {song?.trackSubtitle && props.itemType !== LibraryItem.QUEUE_SONG && (
                             <Text
diff --git a/src/renderer/components/item-list/item-table-list/columns/title-column.module.css b/src/renderer/components/item-list/item-table-list/columns/title-column.module.css
index ae12b81e4..481341ec7 100644
--- a/src/renderer/components/item-list/item-table-list/columns/title-column.module.css
+++ b/src/renderer/components/item-list/item-table-list/columns/title-column.module.css
@@ -23,3 +23,4 @@ a.name-container {
 .active {
     color: var(--theme-colors-primary);
 }
+
diff --git a/src/renderer/components/item-list/item-table-list/columns/title-column.tsx b/src/renderer/components/item-list/item-table-list/columns/title-column.tsx
index 9af74f149..766a30492 100644
--- a/src/renderer/components/item-list/item-table-list/columns/title-column.tsx
+++ b/src/renderer/components/item-list/item-table-list/columns/title-column.tsx
@@ -12,8 +12,9 @@ import {
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
 import { useIsActiveRow } from '/@/renderer/components/item-list/item-table-list/item-table-list-context';
 import { ExplicitIndicator } from '/@/shared/components/explicit-indicator/explicit-indicator';
+import { ExternalSongIndicator } from '/@/shared/components/external-song-indicator/external-song-indicator';
 import { Text } from '/@/shared/components/text/text';
-import { LibraryItem, QueueSong } from '/@/shared/types/domain-types';
+import { LibraryItem, QueueSong, ServerType } from '/@/shared/types/domain-types';
 
 const TitleColumnBase = (props: ItemTableListInnerColumn) => {
     const { itemType } = props;
@@ -60,6 +61,10 @@ function DefaultTitleColumn(props: ItemTableListInnerColumn) {
                     {...titleLinkProps}
                 >
                     <ExplicitIndicator explicitStatus={item?.explicitStatus} />
+                    <ExternalSongIndicator
+                        isExternal={item?._serverType === ServerType.EXTERNAL}
+                        size="sm"
+                    />
                     {row}
                 </Text>
             </TableColumnContainer>
@@ -106,6 +111,7 @@ function QueueSongTitleColumn(props: ItemTableListInnerColumn) {
                     {...titleLinkProps}
                 >
                     <ExplicitIndicator explicitStatus={song?.explicitStatus} />
+                    <ExternalSongIndicator isExternal={song?._serverType === ServerType.EXTERNAL} />
                     {row}
                     {song?.trackSubtitle && props.itemType !== LibraryItem.QUEUE_SONG && (
                         <Text
diff --git a/src/renderer/components/item-list/item-table-list/columns/title-combined-column.module.css b/src/renderer/components/item-list/item-table-list/columns/title-combined-column.module.css
index bc0c246e9..5c556d8be 100644
--- a/src/renderer/components/item-list/item-table-list/columns/title-combined-column.module.css
+++ b/src/renderer/components/item-list/item-table-list/columns/title-combined-column.module.css
@@ -42,7 +42,6 @@ a.title {
     width: auto;
 }
 
-
 .artists {
     display: block;
     width: 100%;
@@ -94,3 +93,4 @@ a.title {
 .active {
     color: var(--theme-colors-primary);
 }
+
diff --git a/src/renderer/components/item-list/item-table-list/columns/title-combined-column.tsx b/src/renderer/components/item-list/item-table-list/columns/title-combined-column.tsx
index 2acb9e032..d23d60419 100644
--- a/src/renderer/components/item-list/item-table-list/columns/title-combined-column.tsx
+++ b/src/renderer/components/item-list/item-table-list/columns/title-combined-column.tsx
@@ -21,9 +21,10 @@ import {
 } from '/@/renderer/features/shared/components/play-button-group';
 import { usePlayButtonBehavior } from '/@/renderer/store';
 import { ExplicitIndicator } from '/@/shared/components/explicit-indicator/explicit-indicator';
+import { ExternalSongIndicator } from '/@/shared/components/external-song-indicator/external-song-indicator';
 import { Icon } from '/@/shared/components/icon/icon';
 import { Text } from '/@/shared/components/text/text';
-import { Folder, LibraryItem, QueueSong } from '/@/shared/types/domain-types';
+import { Folder, LibraryItem, QueueSong, ServerType } from '/@/shared/types/domain-types';
 import { Play } from '/@/shared/types/types';
 
 export const DefaultTitleCombinedColumn = (props: ItemTableListInnerColumn) => {
@@ -143,6 +144,10 @@ export const DefaultTitleCombinedColumn = (props: ItemTableListInnerColumn) => {
                 >
                     <Text className={styles.title} isNoSelect size="md" {...titleLinkProps}>
                         <ExplicitIndicator explicitStatus={item?.explicitStatus} />
+                        <ExternalSongIndicator
+                            isExternal={item?._serverType === ServerType.EXTERNAL}
+                            size="sm"
+                        />
                         {item.name as string}
                     </Text>
                     <div className={styles.artists}>
@@ -294,6 +299,10 @@ export const QueueSongTitleCombinedColumn = (props: ItemTableListInnerColumn) =>
                         {...titleLinkProps}
                     >
                         <ExplicitIndicator explicitStatus={song?.explicitStatus} />
+                        <ExternalSongIndicator
+                            isExternal={song?._serverType === ServerType.EXTERNAL}
+                            size="sm"
+                        />
                         {row.name as string}
                         {song?.trackSubtitle && props.itemType !== LibraryItem.QUEUE_SONG && (
                             <Text
diff --git a/src/shared/components/external-song-indicator/external-song-indicator.module.css b/src/shared/components/external-song-indicator/external-song-indicator.module.css
new file mode 100644
index 000000000..ea9835ed4
--- /dev/null
+++ b/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);
+}
diff --git a/src/shared/components/external-song-indicator/external-song-indicator.tsx b/src/shared/components/external-song-indicator/external-song-indicator.tsx
new file mode 100644
index 000000000..f4e6cdca2
--- /dev/null
+++ b/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>
+    );
+};
diff --git a/src/shared/components/icon/icon.tsx b/src/shared/components/icon/icon.tsx
index 4097ea999..735c9ab8d 100644
--- a/src/shared/components/icon/icon.tsx
+++ b/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,