WIP: AI Podcast Maker and YouTube Creator Studio integration

frontend/src/components/PodcastMaker/RecentEpisodesPreview.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import { Stack, Box, Typography, Paper, Chip, alpha } from "@mui/material";
+import { LibraryMusic as LibraryMusicIcon, OpenInNew as OpenInNewIcon, VolumeUp as VolumeUpIcon } from "@mui/icons-material";
+import { useNavigate } from "react-router-dom";
+import { useContentAssets } from "../../hooks/useContentAssets";
+import { GlassyCard, glassyCardSx, SecondaryButton } from "./ui";
+
+interface RecentEpisodesPreviewProps {
+  onSelectEpisode: (assetId: number) => void;
+}
+
+export const RecentEpisodesPreview: React.FC<RecentEpisodesPreviewProps> = ({ onSelectEpisode }) => {
+  const navigate = useNavigate();
+  const { assets, loading } = useContentAssets({
+    asset_type: "audio",
+    source_module: "podcast_maker",
+    limit: 6,
+  });
+
+  if (loading || assets.length === 0) {
+    return null;
+  }
+
+  return (
+    <GlassyCard sx={glassyCardSx}>
+      <Stack spacing={2}>
+        <Stack direction="row" justifyContent="space-between" alignItems="center">
+          <Typography variant="h6" sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+            <LibraryMusicIcon />
+            Recent Episodes
+          </Typography>
+          <SecondaryButton
+            onClick={() => navigate("/asset-library?source_module=podcast_maker&asset_type=audio")}
+            startIcon={<OpenInNewIcon />}
+          >
+            View All
+          </SecondaryButton>
+        </Stack>
+        <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr", md: "1fr 1fr 1fr" }, gap: 2 }}>
+          {assets.slice(0, 6).map((asset) => (
+            <Paper
+              key={asset.id}
+              sx={{
+                p: 2,
+                background: alpha("#1e293b", 0.5),
+                border: "1px solid rgba(255,255,255,0.1)",
+                borderRadius: 2,
+                cursor: "pointer",
+                "&:hover": {
+                  borderColor: "rgba(102,126,234,0.4)",
+                  background: alpha("#1e293b", 0.7),
+                },
+              }}
+              onClick={() => onSelectEpisode(asset.id)}
+            >
+              <Stack spacing={1}>
+                <Typography variant="subtitle2" sx={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+                  {asset.title || "Untitled Episode"}
+                </Typography>
+                <Stack direction="row" spacing={1} alignItems="center">
+                  <VolumeUpIcon fontSize="small" sx={{ color: "rgba(255,255,255,0.5)" }} />
+                  <Typography variant="caption" color="text.secondary">
+                    {new Date(asset.created_at).toLocaleDateString()}
+                  </Typography>
+                </Stack>
+                {asset.cost > 0 && (
+                  <Chip label={`$${asset.cost.toFixed(2)}`} size="small" sx={{ width: "fit-content", fontSize: "0.65rem", height: 20 }} />
+                )}
+              </Stack>
+            </Paper>
+          ))}
+        </Box>
+      </Stack>
+    </GlassyCard>
+  );
+};
+