feat: add release notes section to download page

- Fetch releases from GitHub API
- Display last 3 releases with expandable view
- Parse markdown headers and lists

src/pages/Download.jsx

@@ -15,6 +15,8 @@ import DownloadIcon from '@mui/icons-material/Download';
 import AppleIcon from '@mui/icons-material/Apple';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 
 import Layout from '../components/Layout';
 
@@ -56,6 +58,7 @@ const PLATFORMS = {
 
 // URL to fetch latest release info (using GitHub API for CORS support)
 const GITHUB_RELEASES_API = 'https://api.github.com/repos/pollen-robotics/reachy-mini-desktop-app/releases/latest';
+const GITHUB_RELEASES_LIST_API = 'https://api.github.com/repos/pollen-robotics/reachy-mini-desktop-app/releases?per_page=10';
 
 
 // Detect user's platform
@@ -194,8 +197,10 @@ function PlatformCard({ platformKey, url, isActive, onClick }) {
 
 export default function Download() {
   const [releaseData, setReleaseData] = useState(null);
+  const [allReleases, setAllReleases] = useState([]);
   const [detectedPlatform, setDetectedPlatform] = useState(null);
   const [loading, setLoading] = useState(true);
+  const [showAllReleases, setShowAllReleases] = useState(false);
 
   const [error, setError] = useState(null);
 
@@ -203,11 +208,16 @@ export default function Download() {
     setDetectedPlatform(detectPlatform());
     
     // Fetch latest release info from GitHub API
-    async function fetchLatestRelease() {
+    async function fetchReleases() {
       try {
-        const response = await fetch(GITHUB_RELEASES_API);
-        if (response.ok) {
-          const data = await response.json();
+        // Fetch latest release for download buttons
+        const latestResponse = await fetch(GITHUB_RELEASES_API);
+        
+        // Fetch all releases for changelog
+        const allResponse = await fetch(GITHUB_RELEASES_LIST_API);
+        
+        if (latestResponse.ok) {
+          const data = await latestResponse.json();
           
           // Transform GitHub API response to our format
           const version = data.tag_name?.replace('v', '') || '';
@@ -251,6 +261,12 @@ export default function Download() {
         } else {
           setError('Failed to fetch release info');
         }
+        
+        // Set all releases for changelog
+        if (allResponse.ok) {
+          const releases = await allResponse.json();
+          setAllReleases(releases.filter(r => !r.draft));
+        }
       } catch (err) {
         console.error('Error fetching release:', err);
         setError('Failed to fetch release info');
@@ -259,7 +275,7 @@ export default function Download() {
       }
     }
     
-    fetchLatestRelease();
+    fetchReleases();
   }, []);
 
   if (loading) {
@@ -543,7 +559,7 @@ export default function Download() {
           </Box>
 
           {/* Requirements */}
-          <Box sx={{ textAlign: 'center' }}>
+          <Box sx={{ textAlign: 'center', mb: 8 }}>
             <Typography 
               variant="body2" 
               sx={{ color: 'rgba(255,255,255,0.4)', mb: 2 }}
@@ -565,6 +581,133 @@ export default function Download() {
               View all releases on GitHub
             </Button>
           </Box>
+
+          {/* Release Notes */}
+          {allReleases.length > 0 && (
+            <Box
+              sx={{
+                background: 'rgba(255, 255, 255, 0.02)',
+                border: '1px solid rgba(255, 255, 255, 0.06)',
+                borderRadius: 4,
+                p: 4,
+              }}
+            >
+              <Typography 
+                variant="h6" 
+                sx={{ mb: 3, color: 'white', fontWeight: 600 }}
+              >
+                Release Notes
+              </Typography>
+              
+              <Stack spacing={3}>
+                {(showAllReleases ? allReleases : allReleases.slice(0, 3)).map((release) => (
+                  <Box 
+                    key={release.id}
+                    sx={{
+                      borderLeft: '2px solid rgba(255, 149, 0, 0.4)',
+                      pl: 3,
+                      py: 1,
+                    }}
+                  >
+                    <Stack direction="row" spacing={2} alignItems="center" sx={{ mb: 1 }}>
+                      <Typography 
+                        variant="subtitle1" 
+                        sx={{ color: 'white', fontWeight: 600 }}
+                      >
+                        {release.name || release.tag_name}
+                      </Typography>
+                      <Chip
+                        label={formatDate(release.published_at)}
+                        size="small"
+                        sx={{
+                          backgroundColor: 'rgba(255, 255, 255, 0.05)',
+                          color: 'rgba(255,255,255,0.5)',
+                          fontSize: 11,
+                          height: 22,
+                        }}
+                      />
+                      {release.prerelease && (
+                        <Chip
+                          label="Pre-release"
+                          size="small"
+                          sx={{
+                            backgroundColor: 'rgba(255, 149, 0, 0.15)',
+                            color: '#FF9500',
+                            fontSize: 11,
+                            height: 22,
+                          }}
+                        />
+                      )}
+                    </Stack>
+                    
+                    {release.body ? (
+                      <Typography 
+                        variant="body2" 
+                        sx={{ 
+                          color: 'rgba(255,255,255,0.6)',
+                          whiteSpace: 'pre-line',
+                          lineHeight: 1.7,
+                          '& strong, & b': { color: 'rgba(255,255,255,0.8)' },
+                        }}
+                      >
+                        {release.body.split('\n').map((line, i) => {
+                          // Simple markdown parsing for headers and lists
+                          if (line.startsWith('### ')) {
+                            return (
+                              <Box 
+                                key={i} 
+                                component="span" 
+                                sx={{ 
+                                  display: 'block', 
+                                  fontWeight: 600, 
+                                  color: 'rgba(255,255,255,0.8)',
+                                  mt: i > 0 ? 1.5 : 0,
+                                  mb: 0.5,
+                                }}
+                              >
+                                {line.replace('### ', '')}
+                              </Box>
+                            );
+                          }
+                          if (line.startsWith('- ')) {
+                            return (
+                              <Box key={i} component="span" sx={{ display: 'block', pl: 2 }}>
+                                • {line.replace('- ', '')}
+                              </Box>
+                            );
+                          }
+                          if (line.trim() === '') return null;
+                          return <Box key={i} component="span" sx={{ display: 'block' }}>{line}</Box>;
+                        })}
+                      </Typography>
+                    ) : (
+                      <Typography 
+                        variant="body2" 
+                        sx={{ color: 'rgba(255,255,255,0.4)', fontStyle: 'italic' }}
+                      >
+                        No release notes available
+                      </Typography>
+                    )}
+                  </Box>
+                ))}
+              </Stack>
+              
+              {allReleases.length > 3 && (
+                <Button
+                  variant="text"
+                  onClick={() => setShowAllReleases(!showAllReleases)}
+                  endIcon={showAllReleases ? <ExpandLessIcon /> : <ExpandMoreIcon />}
+                  sx={{ 
+                    mt: 3,
+                    color: 'rgba(255,255,255,0.5)',
+                    '&:hover': { color: 'white' },
+                  }}
+                >
+                  {showAllReleases ? 'Show less' : `Show ${allReleases.length - 3} more releases`}
+                </Button>
+              )}
+            </Box>
+          )}
         </Container>
       </Box>
     </Layout>