refactor: utilise VoteButtons dans VersionTimeline

components/versions/version-timeline.js

@@ -20,8 +20,11 @@ import AccessTimeIcon from '@mui/icons-material/AccessTime'
 import CheckCircleIcon from '@mui/icons-material/CheckCircle'
 import ErrorIcon from '@mui/icons-material/Error'
 import EditIcon from '@mui/icons-material/Edit'
+import Snackbar from '@mui/material/Snackbar'
+import Alert from '@mui/material/Alert'
 import SessionExpired from '../session/session-expired.js'
 import VersionDialog from './version-dialog.js'
+import VoteButtons from './vote-buttons.js'
 import {formatDate} from '@/lib/format.js'
 import {compareVersion} from '@/lib/directus.js'
 
@@ -102,9 +105,11 @@ function VersionCard({
   setError,
   setIsErrorAlertOpen,
   setIsOpenComparison,
-  setVersionCompare
+  setVersionCompare,
+  onVoteResult
 }) {
   const status = getVersionStatus(version, index, totalVersions)
+
   const statusConfig = getStatusConfig(status)
   const userDisplayName = version.user_created?.split('-')[0] || 'Système'
 
@@ -180,21 +185,7 @@ function VersionCard({
             {formatDate(version.date_created, 'PPpp')}
           </Typography>
 
-          {/* Placeholder for vote count - would need API enhancement */}
+          <VoteButtons hasCountsVisible versionId={version.id} onVoteResult={onVoteResult} />
-          <Box sx={{display: 'flex', gap: 1}}>
-            <Chip
-              label='👍 0'
-              size='small'
-              variant='outlined'
-              sx={{fontSize: '0.7rem'}}
-            />
-            <Chip
-              label='👎 0'
-              size='small'
-              variant='outlined'
-              sx={{fontSize: '0.7rem'}}
-            />
-          </Box>
         </Box>
       </CardContent>
 
@@ -224,9 +215,22 @@ export default function VersionTimeline({
   const countdownRef = useRef()
   const [isOpenComparison, setIsOpenComparison] = useState(false)
   const [versionCompare, setVersionCompare] = useState(null)
+  const [snackbar, setSnackbar] = useState({open: false, message: '', severity: 'success'})
 
   const versionData = data.find(({id}) => id === versionCompare?.versionId)
 
+  const handleVoteResult = result => {
+    setSnackbar({
+      open: true,
+      message: result.message,
+      severity: result.success ? 'success' : 'error'
+    })
+  }
+
+  const handleCloseSnackbar = () => {
+    setSnackbar(prev => ({...prev, open: false}))
+  }
+
   return (
     <>
       <Box>
@@ -269,6 +273,7 @@ export default function VersionTimeline({
                   setIsErrorAlertOpen={setIsErrorAlertOpen}
                   setIsOpenComparison={setIsOpenComparison}
                   setVersionCompare={setVersionCompare}
+                  onVoteResult={handleVoteResult}
                 />
               </TimelineContent>
             </TimelineItem>
@@ -290,6 +295,17 @@ export default function VersionTimeline({
         setError={setError}
         setIsErrorAlertOpen={setIsErrorAlertOpen}
       />
+
+      <Snackbar
+        open={snackbar.open}
+        autoHideDuration={6000}
+        anchorOrigin={{vertical: 'bottom', horizontal: 'center'}}
+        onClose={handleCloseSnackbar}
+      >
+        <Alert variant='filled' severity={snackbar.severity} sx={{width: '100%'}} onClose={handleCloseSnackbar}>
+          {snackbar.message}
+        </Alert>
+      </Snackbar>
     </>
   )
 }
@@ -313,5 +329,6 @@ VersionCard.propTypes = {
   setError: PropTypes.func.isRequired,
   setIsErrorAlertOpen: PropTypes.func.isRequired,
   setIsOpenComparison: PropTypes.func.isRequired,
-  setVersionCompare: PropTypes.func.isRequired
+  setVersionCompare: PropTypes.func.isRequired,
+  onVoteResult: PropTypes.func.isRequired
 }