colour circles like baps

src/App.css

@@ -95,6 +95,18 @@
   background-color: #78acf1;
 }
 
+.sp-track .central {
+  color: green;
+}
+
+.sp-track .aux {
+  color: #07F;
+}
+
+.sp-track .ghost {
+  color: gray;
+}
+
 .sp-track-active {
   background-color: #10c998 !important;
 }

src/api.ts

@@ -134,6 +134,7 @@ function wrapPromise<T, TArgs>(factory: (...args: TArgs[]) => Promise<T>) {
 }
 
 export interface Track {
+  type: "central";
   title: string;
   artist: string;
   album: Album;

src/showplanner/index.tsx

@@ -85,6 +85,7 @@ const Item = memo(function Item({
             id={isReal ? TS_ITEM_MENU_ID : ""}
             collect={() => ({ id })}
           >
+            <i className={"fa fa-circle " + (x.type)}></i>&nbsp;
             {x.title}
             {"artist" in x && " - " + x.artist}
             <code>

src/showplanner/state.ts

@@ -5,6 +5,7 @@ import { AppThunk } from "../store";
 import { cloneDeep } from "lodash";
 
 export interface ItemGhost {
+  type: "ghost";
   title: string;
   artist: string;
   length: string;