From 2cf7273f293edf057a9902e4662525859d701e8b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= <c.pronzola@tuta.io>
Date: Wed, 23 Jul 2025 17:41:15 +0400
Subject: [PATCH] =?UTF-8?q?feat:=20am=C3=A9liore=20interface=20VersionDial?=
 =?UTF-8?q?og?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/versions/version-dialog.js | 47 ++++++++++++++++++++++++---
 1 file changed, 42 insertions(+), 5 deletions(-)

diff --git a/components/versions/version-dialog.js b/components/versions/version-dialog.js
index 66ca437..ff8f208 100644
--- a/components/versions/version-dialog.js
+++ b/components/versions/version-dialog.js
@@ -5,6 +5,12 @@ import DialogActions from '@mui/material/DialogActions'
 import DialogContent from '@mui/material/DialogContent'
 import DialogTitle from '@mui/material/DialogTitle'
 import useMediaQuery from '@mui/material/useMediaQuery'
+import IconButton from '@mui/material/IconButton'
+import Typography from '@mui/material/Typography'
+import Box from '@mui/material/Box'
+import Chip from '@mui/material/Chip'
+import CloseIcon from '@mui/icons-material/Close'
+import CompareArrowsIcon from '@mui/icons-material/CompareArrows'
 import {useTheme} from '@mui/material/styles'
 import VersionComparison from './version-comparison.js'
 
@@ -16,21 +22,52 @@ export default function VersionDialog({versionData, versionCompare, isOpen, setI
     setIsOpen(false)
   }
 
+  const outdated = versionCompare?.outdated || false
+  const versionName = versionData?.name || 'Version inconnue'
+
   return (
     <Dialog
       fullScreen={fullScreen}
+      maxWidth='lg'
       open={isOpen}
       aria-labelledby='comparaison-des-versions'
       onClose={handleClose}
     >
-      <DialogTitle textAlign='center' id='comparaison-des-versions'>
-        {'Comparaison des versions'}
+      <DialogTitle id='comparaison-des-versions'>
+        <Box sx={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
+          <Box sx={{display: 'flex', alignItems: 'center', gap: 2}}>
+            <CompareArrowsIcon color='primary' />
+            <Typography variant='h6' component='span'>
+              Comparaison: {versionName}
+            </Typography>
+            <Chip
+              label={outdated ? 'Obsolète' : 'Active'}
+              color={outdated ? 'error' : 'success'}
+              size='small'
+              variant='outlined'
+            />
+          </Box>
+          <IconButton
+            edge='end'
+            color='inherit'
+            aria-label='fermer'
+            onClick={handleClose}
+          >
+            <CloseIcon />
+          </IconButton>
+        </Box>
       </DialogTitle>
-      <DialogContent>
+
+      <DialogContent sx={{minHeight: '60vh'}}>
         <VersionComparison versionData={versionData} versionCompare={versionCompare} />
       </DialogContent>
-      <DialogActions>
-        <Button autoFocus color='success' onClick={handleClose}>
+
+      <DialogActions sx={{px: 3, py: 2}}>
+        <Button
+          variant='contained'
+          color='error'
+          onClick={handleClose}
+        >
           Fermer
         </Button>
       </DialogActions>