feat(ui): add environment media playlists

apps/control-station/src/styles/environment-settings.css

@@ -54,6 +54,72 @@
   width: 100%;
 }
 
+.environment-media-playlist {
+  display: grid;
+  min-width: 0;
+  gap: 0.85rem;
+}
+
+.environment-media-playlist__head {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.environment-media-playlist__head > div {
+  display: grid;
+  min-width: 0;
+  gap: 0.22rem;
+}
+
+.environment-media-playlist__head span {
+  color: var(--nodedc-text-secondary);
+  font-size: var(--nodedc-font-size-sm);
+  font-weight: var(--nodedc-font-weight-medium);
+}
+
+.environment-media-playlist__head p,
+.environment-media-playlist__empty,
+.environment-media-playlist__timing > span,
+.environment-media-playlist__error {
+  margin: 0;
+  color: var(--nodedc-text-muted);
+  font-size: var(--nodedc-font-size-xs);
+  line-height: 1.4;
+}
+
+.environment-media-playlist__error {
+  color: rgb(var(--nodedc-danger-rgb));
+}
+
+.environment-media-playlist__items {
+  display: grid;
+  min-width: 0;
+  gap: 0.7rem;
+}
+
+.environment-media-playlist__item {
+  display: grid;
+  min-width: 0;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: start;
+  gap: 0.4rem;
+}
+
+.environment-media-playlist__item-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.1rem;
+  padding-top: 1.65rem;
+}
+
+.environment-media-playlist__timing {
+  display: grid;
+  gap: 0.42rem;
+}
+
 @media (max-width: 760px) {
   .environment-settings__copy,
   .environment-settings__quick-actions {
@@ -63,4 +129,13 @@
   .environment-settings__surface {
     grid-template-columns: 1fr;
   }
+
+  .environment-media-playlist__item {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .environment-media-playlist__item-actions {
+    justify-self: end;
+    padding-top: 0;
+  }
 }