feat(admin): open dashboard/shows/calendar to hosts, merge Shows pages

backend/src/handlers/api.rs

@@ -2001,6 +2001,8 @@ pub struct ShowListItem {
     description: Option<String>,
     status: String,
     show_type: String,
+    /// Username of the assigned host (external/brunchtime shows), if any.
+    host_username: Option<String>,
     artists: Vec<ArtistBrief>,
 }
 
@@ -2190,6 +2192,15 @@ pub async fn api_shows_list(
         .fetch_all(&state.db)
         .await?;
 
+        let host_username: Option<String> = if let Some(hid) = show.host_user_id {
+            sqlx::query_scalar("SELECT username FROM users WHERE id = ?")
+                .bind(hid)
+                .fetch_optional(&state.db)
+                .await?
+        } else {
+            None
+        };
+
         show_items.push(ShowListItem {
             id: show.id,
             title: show.title,
@@ -2199,6 +2210,7 @@ pub async fn api_shows_list(
             description: show.description,
             status: show.status,
             show_type: show.show_type,
+            host_username,
             artists,
         });
     }
@@ -4773,6 +4785,15 @@ pub async fn api_my_shows_list(
         .fetch_all(&state.db)
         .await?;
 
+        let host_username: Option<String> = if let Some(hid) = show.host_user_id {
+            sqlx::query_scalar("SELECT username FROM users WHERE id = ?")
+                .bind(hid)
+                .fetch_optional(&state.db)
+                .await?
+        } else {
+            None
+        };
+
         show_items.push(ShowListItem {
             id: show.id,
             title: show.title,
@@ -4782,6 +4803,7 @@ pub async fn api_my_shows_list(
             description: show.description,
             status: show.status,
             show_type: show.show_type,
+            host_username,
             artists,
         });
     }

frontend/src/admin/api/index.ts

@@ -404,9 +404,29 @@ export interface Show {
   show_type: string;
   /** Intended delivery: 'live' or 'prerecorded' (changeable after creation). */
   stream_mode?: 'live' | 'prerecorded';
+  /** Username of the assigned host (external/brunchtime shows), if any. */
+  host_username?: string;
   artists: { id: number; name: string }[];
 }
 
+/**
+ * Common shape shared by `Show` (admin `/api/shows`) and `ShowOverviewItem`
+ * (read-only `/api/shows-overview`). Schedule widgets (ShowList, MonthCalendar)
+ * accept this so they can render data from either source regardless of role.
+ */
+export type ScheduleItem = Pick<
+  Show,
+  | 'id'
+  | 'title'
+  | 'date'
+  | 'start_time'
+  | 'end_time'
+  | 'status'
+  | 'show_type'
+  | 'host_username'
+  | 'artists'
+>;
+
 /** Read-only schedule entry returned by GET /api/shows-overview. */
 export interface ShowOverviewItem {
   id: number;

frontend/src/admin/components/MonthCalendar.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { Calendar } from 'v-calendar';
-import type { Show } from '../api';
+import type { ScheduleItem } from '../api';
 
 const props = defineProps<{
-  shows: Show[];
+  shows: ScheduleItem[];
 }>();
 
 const emit = defineEmits<{
   (e: 'day-click', dateStr: string): void;
-  (e: 'show-click', show: Show): void;
+  (e: 'show-click', show: ScheduleItem): void;
 }>();
 
 function getDaysUntil(dateStr: string): number {
@@ -72,8 +72,13 @@ function onDayClick(day: { id: string; date: Date }) {
 
 <template>
   <div class="month-calendar">
-    <Calendar :attributes="calendarAttributes" :is-dark="true" :first-day-of-week="2" is-expanded
-      @dayclick="onDayClick" />
+    <Calendar
+      :attributes="calendarAttributes"
+      :is-dark="true"
+      :first-day-of-week="2"
+      is-expanded
+      @dayclick="onDayClick"
+    />
     <div class="calendar-legend">
       <span class="legend-item"><span class="legend-dot dot-yellow"></span> UNHEARD</span>
       <span class="legend-item"><span class="legend-dot dot-green"></span> Brunchtime</span>

frontend/src/admin/components/ShowList.vue

@@ -1,18 +1,21 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import type { Show } from '../api';
+import type { ScheduleItem } from '../api';
 import ShowListItem from './ShowListItem.vue';
 
-const props = withDefaults(defineProps<{
-  shows: Show[];
-  limit?: number;
-  filter?: 'upcoming' | 'all' | 'past';
-}>(), {
-  filter: 'upcoming',
-});
+const props = withDefaults(
+  defineProps<{
+    shows: ScheduleItem[];
+    limit?: number;
+    filter?: 'upcoming' | 'all' | 'past';
+  }>(),
+  {
+    filter: 'upcoming',
+  }
+);
 
 const emit = defineEmits<{
-  (e: 'show-click', show: Show): void;
+  (e: 'show-click', show: ScheduleItem): void;
 }>();
 
 function getDaysUntil(dateStr: string): number {
@@ -43,7 +46,7 @@ const filteredShows = computed(() => {
 });
 
 const showsByMonth = computed(() => {
-  const groups: { month: string; shows: Show[] }[] = [];
+  const groups: { month: string; shows: ScheduleItem[] }[] = [];
   let currentMonth = '';
   for (const show of filteredShows.value) {
     const d = new Date(show.date + 'T12:00:00');
@@ -67,8 +70,13 @@ const showsByMonth = computed(() => {
     <div v-for="group in showsByMonth" :key="group.month" class="show-list-month-group">
       <h3 class="show-list-month-header">{{ group.month }}</h3>
       <div class="show-list-items">
-        <ShowListItem v-for="show in group.shows" :key="show.id" :show="show" :is-past="getDaysUntil(show.date) < 0"
-          @click="emit('show-click', show)" />
+        <ShowListItem
+          v-for="show in group.shows"
+          :key="show.id"
+          :show="show"
+          :is-past="getDaysUntil(show.date) < 0"
+          @click="emit('show-click', show)"
+        />
       </div>
     </div>
   </div>

frontend/src/admin/components/ShowListItem.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { Show } from '../api';
+import type { ScheduleItem } from '../api';
 
 const props = defineProps<{
-  show: Show;
+  show: ScheduleItem;
   isPast: boolean;
 }>();
 
@@ -22,7 +22,7 @@ function getDaysClass(days: number): string {
   return 'days-ok';
 }
 
-function getDotColor(show: Show): string {
+function getDotColor(show: ScheduleItem): string {
   const daysUntil = getDaysUntil(show.date);
   if (daysUntil < 0) return 'dot-gray';
   const type = show.show_type || 'unheard';
@@ -48,25 +48,35 @@ const daysUntil = getDaysUntil(props.show.date);
     <div class="list-show-date-col">
       <span class="list-show-date">{{ formatDateShort(show.date) }}</span>
       <span :class="['badge', 'days-badge', getDaysClass(daysUntil)]">
-        {{ daysUntil < 0 ? 'Past' : daysUntil + 'd' }} </span>
+        {{ daysUntil < 0 ? 'Past' : daysUntil + 'd' }}
+      </span>
     </div>
     <div class="list-show-info">
       <span class="list-show-title-row">
         <span class="list-show-title">{{ show.title }}</span>
-        <span v-if="show.show_type === 'unheard' || !show.show_type" :class="[
-          'badge',
-          'artist-badge',
-          {
-            'count-empty': show.artists.length === 0,
-            'count-partial': show.artists.length > 0 && show.artists.length < 4,
-            'count-full': show.artists.length >= 4,
-          },
-        ]">
+        <span
+          v-if="show.show_type === 'unheard' || !show.show_type"
+          :class="[
+            'badge',
+            'artist-badge',
+            {
+              'count-empty': show.artists.length === 0,
+              'count-partial': show.artists.length > 0 && show.artists.length < 4,
+              'count-full': show.artists.length >= 4,
+            },
+          ]"
+        >
           {{ show.artists.length }}/4
         </span>
       </span>
-      <span v-if="show.show_type === 'unheard' || !show.show_type" class="list-show-artists text-muted">
-        {{show.artists.map((a) => a.name).join(', ') || 'No artists assigned'}}
+      <span
+        v-if="show.show_type === 'unheard' || !show.show_type"
+        class="list-show-artists text-muted"
+      >
+        {{ show.artists.map((a) => a.name).join(', ') || 'No artists assigned' }}
+      </span>
+      <span v-if="show.host_username" class="list-show-host text-muted">
+        Host: {{ show.host_username }}
       </span>
     </div>
     <div class="list-show-meta">
@@ -167,6 +177,13 @@ const daysUntil = getDaysUntil(props.show.date);
   text-overflow: ellipsis;
 }
 
+.list-show-host {
+  font-size: var(--font-size-sm);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .list-show-meta {
   display: flex;
   align-items: center;