More dialog, I can't stand suid/mui :( !

src/components/infos/Infos.module.css

@@ -6,18 +6,20 @@
   z-index: 1;
 }
 
+.dialog {
+  min-width: 500px;
+}
+
 .title {
   background-color: rgba(14, 116, 144, 0.7);
   color: white;
   clear: both;
 }
 
-.title-text {
-  float: left;
-}
-
 .close {
-  float: right;
+  align-self: right;
+  margin-right: 2px;
+  padding-top: 16px;
 }
 
 .body {

src/components/infos/Infos.tsx

@@ -1,4 +1,12 @@
-import { Dialog, DialogTitle, IconButton } from '@suid/material';
+import {
+  Box,
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  Grid,
+  IconButton,
+  Typography,
+} from '@suid/material';
 import { Feature } from 'ol';
 import { Geometry } from 'ol/geom';
 import { Component, createSignal, For } from 'solid-js';
@@ -63,18 +71,46 @@ const Infos: Component<{}> = (props) => {
   };
 
   return (
-    <Dialog onClose={handleClose} open={open()} class={style.dialog}>
+    <Dialog
+      onClose={handleClose}
+      open={open()}
+      class={style.dialog}
+      PaperProps={{ sx: { minWidth: '300px' } }}
+    >
       <DialogTitle class={style.title}>
-        <div class={style['title-text']}>{t('nearby')}</div>
-        <IconButton onClick={handleClose} class={style.close}>
-          <CloseIcon />
-        </IconButton>
+        <Grid container spacing={2} alignItems='center'>
+          <Grid item xs={11}>
+            <div>{t('nearby')}</div>
+          </Grid>
+          <Grid item xs={1} class={style.close}>
+            <IconButton onClick={handleClose}>
+              <CloseIcon />
+            </IconButton>
+          </Grid>
+        </Grid>
       </DialogTitle>
-      <Stack spacing={1}>
-        <For each={selectedFeatures}>
-          {(feature) => <Item>{t(feature.get('type'))}</Item>}
-        </For>
-      </Stack>
+      <DialogContent>
+        <Stack spacing={1} direction='column' alignItems='left'>
+          <For each={selectedFeatures}>
+            {(feature) => (
+              <Item sx={{ width: '95%' }}>
+                <Grid container spacing={2}  alignItems='left'>
+                  <Grid item xs={11}>
+                    {feature.get('name')
+                      ? `${feature.get('name')} (${t(feature.get('type'))})`
+                      : t(feature.get('type'))}
+                  </Grid>
+                  <Grid item xs={1}>
+                    <IconButton onClick={handleClose}>
+                      <CloseIcon />
+                    </IconButton>
+                  </Grid>
+                </Grid>
+              </Item>
+            )}
+          </For>
+        </Stack>
+      </DialogContent>
     </Dialog>
   );
 };

src/i18n/en.ts

@@ -8,8 +8,8 @@ const dict = {
   wpt: 'place',
   trk: 'track',
   trkseg: 'track segment',
-  'trkseg-start': 'start',
-  'trkseg-finish': 'end',
+  'trkseg-start': 'start of track segment',
+  'trkseg-finish': 'end of track segment',
 };
 
 export default dict;

src/i18n/fr.ts

@@ -11,8 +11,8 @@ const dict = {
   wpt: 'lieu',
   trk: 'trace',
   trkseg: 'segment de trace',
-  'trkseg-start': 'début',
-  'trkseg-finish': 'fin',
+  'trkseg-start': 'début de segment de trace',
+  'trkseg-finish': 'fin de segment de trace',
 };
 
 export default dict;