New: Show artist names after task name when applicable

(cherry picked from commit 6d552f2a60f44052079b5e8944f5e1bbabac56e0)

Closes #4678

frontend/src/App/State/AppState.ts

@@ -1,6 +1,7 @@
 import AlbumAppState from './AlbumAppState';
 import ArtistAppState, { ArtistIndexAppState } from './ArtistAppState';
 import CalendarAppState from './CalendarAppState';
+import CommandAppState from './CommandAppState';
 import HistoryAppState from './HistoryAppState';
 import QueueAppState from './QueueAppState';
 import SettingsAppState from './SettingsAppState';
@@ -54,6 +55,7 @@ interface AppState {
   artist: ArtistAppState;
   artistIndex: ArtistIndexAppState;
   calendar: CalendarAppState;
+  commands: CommandAppState;
   history: HistoryAppState;
   queue: QueueAppState;
   settings: SettingsAppState;

frontend/src/App/State/CommandAppState.ts

@@ -0,0 +1,6 @@
+import AppSectionState from 'App/State/AppSectionState';
+import Command from 'Commands/Command';
+
+export type CommandAppState = AppSectionState<Command>;
+
+export default CommandAppState;

frontend/src/Commands/Command.ts

@@ -13,6 +13,7 @@ export interface CommandBody {
   trigger: string;
   suppressMessages: boolean;
   artistId?: number;
+  artistIds?: number[];
 }
 
 interface Command extends ModelBase {

frontend/src/Helpers/Hooks/useModalOpenState.ts

@@ -0,0 +1,17 @@
+import { useCallback, useState } from 'react';
+
+export default function useModalOpenState(
+  initialState: boolean
+): [boolean, () => void, () => void] {
+  const [isOpen, setOpen] = useState(initialState);
+
+  const setModalOpen = useCallback(() => {
+    setOpen(true);
+  }, [setOpen]);
+
+  const setModalClosed = useCallback(() => {
+    setOpen(false);
+  }, [setOpen]);
+
+  return [isOpen, setModalOpen, setModalClosed];
+}

frontend/src/Store/Selectors/createMultiArtistsSelector.ts

@@ -0,0 +1,14 @@
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
+
+function createMultiArtistsSelector(artistIds: number[]) {
+  return createSelector(
+    (state: AppState) => state.artist.itemMap,
+    (state: AppState) => state.artist.items,
+    (itemMap, allArtists) => {
+      return artistIds.map((artistId) => allArtists[itemMap[artistId]]);
+    }
+  );
+}
+
+export default createMultiArtistsSelector;

frontend/src/System/Tasks/Queued/QueuedTaskRow.css

@@ -10,15 +10,6 @@
   width: 100%;
 }
 
-.commandName {
-  display: inline-block;
-  min-width: 220px;
-}
-
-.userAgent {
-  color: #b0b0b0;
-}
-
 .queued,
 .started,
 .ended {

frontend/src/System/Tasks/Queued/QueuedTaskRow.css.d.ts

@@ -2,14 +2,12 @@
 // Please do not change this file!
 interface CssExports {
   'actions': string;
-  'commandName': string;
   'duration': string;
   'ended': string;
   'queued': string;
   'started': string;
   'trigger': string;
   'triggerContent': string;
-  'userAgent': string;
 }
 export const cssExports: CssExports;
 export default cssExports;