feat(chat): integrate podcast support into chat components

- Updated ChatMessage and ChatWindow components to handle podcast content alongside films and songs.
- Enhanced useContentPanel to extract and manage podcasts, allowing for richer media interactions.
- Added PodcastCard and PodcastGrid components for displaying podcast information.
- Improved UI elements to accommodate podcast selection and detail viewing.
- Updated styles for empty state icons and added new CSS for podcast-related elements.

Made-with: Cursor

packages/app/src/components/content/ContextLoader.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="relative flex-1 flex flex-col min-h-0 overflow-hidden">
     <div
-      v-if="contextType === 'film' || contextType === 'song'"
+      v-if="contextType === 'film' || contextType === 'song' || contextType === 'podcast'"
       class="flex-1 flex flex-col min-h-0"
     >
       <div
-        class="p-4 shrink-0 flex items-center justify-between"
+        class="p-4 shrink-0 flex items-center justify-between gap-2"
         :style="isDark
           ? 'border-bottom: 1px solid rgba(255, 255, 255, 0.08)'
           : 'border-bottom: 1px solid rgba(0, 0, 0, 0.06)'"
@@ -14,10 +14,13 @@
            :class="isDark ? 'text-white/70' : 'text-gray-600'">
           {{ contextLabel }}
         </p>
-        <p class="text-[10px] font-mono uppercase tracking-[0.2em]"
-           :class="isDark ? 'text-white/25' : 'text-gray-400'">
-          Surfacing…
-        </p>
+        <div class="flex items-center gap-2 shrink-0">
+          <p class="text-[10px] font-mono uppercase tracking-[0.2em]"
+             :class="isDark ? 'text-white/25' : 'text-gray-400'">
+            Surfacing…
+          </p>
+          <slot name="header-actions" />
+        </div>
       </div>
       <LoadingFilmGrid :count="12" />
     </div>
@@ -72,7 +75,7 @@ import LoadingFilmGrid from './LoadingFilmGrid.vue'
 
 const props = withDefaults(
   defineProps<{
-    contextType?: 'film' | 'song' | 'generic'
+    contextType?: 'film' | 'song' | 'podcast' | 'generic'
   }>(),
   { contextType: 'film' }
 )
@@ -82,6 +85,7 @@ const { isDark } = useTheme()
 const contextLabel = computed(() => {
   if (props.contextType === 'film') return 'Film recommendations'
   if (props.contextType === 'song') return 'Song recommendations'
+  if (props.contextType === 'podcast') return 'Podcast recommendations'
   return 'Content'
 })
 </script>