Merge branch 'dev' into dev

interface/src/app/main/Customizations.tsx

@@ -512,22 +512,24 @@ const Customizations = () => {
               </Button>
             </>
           ) : (
-            <Button
-              startIcon={<EditIcon />}
-              variant="outlined"
-              onClick={() => setRename(true)}
-            >
-              {LL.RENAME()}
-            </Button>
+            <>
+              <Button
+                startIcon={<EditIcon />}
+                variant="outlined"
+                onClick={() => setRename(true)}
+              >
+                {LL.RENAME()}
+              </Button>
+              <Button
+                startIcon={<SettingsBackupRestoreIcon />}
+                variant="outlined"
+                color="error"
+                onClick={() => setConfirmReset(true)}
+              >
+                {LL.REMOVE_ALL()}
+              </Button>
+            </>
           ))}
-        <Button
-          startIcon={<SettingsBackupRestoreIcon />}
-          variant="outlined"
-          color="error"
-          onClick={() => setConfirmReset(true)}
-        >
-          {LL.REMOVE_ALL()}
-        </Button>
       </Box>
     </>
   );

interface/src/app/main/UserProfile.tsx

@@ -1,7 +1,16 @@
 import { memo, useCallback, useContext } from 'react';
 
 import PersonIcon from '@mui/icons-material/Person';
-import { Avatar, Box, Button, List, ListItem, ListItemText } from '@mui/material';
+import {
+  Avatar,
+  Box,
+  Button,
+  Divider,
+  List,
+  ListItem,
+  ListItemText,
+  Typography
+} from '@mui/material';
 
 import { AuthenticatedContext } from '@/contexts/authentication';
 import { SectionContent, useLayoutTitle } from 'components';
@@ -12,7 +21,7 @@ const UserProfileComponent = () => {
   const { LL } = useI18nContext();
   const { me, signOut } = useContext(AuthenticatedContext);
 
-  useLayoutTitle(LL.USER(1));
+  useLayoutTitle(LL.USER_PROFILE());
 
   const handleSignOut = useCallback(() => {
     signOut(true);
@@ -20,32 +29,33 @@ const UserProfileComponent = () => {
 
   return (
     <SectionContent>
-      <Box padding={2} justifyContent="center" flexDirection="column">
-        <Box display="flex" alignItems="center" justifyContent="space-between">
-          <List sx={{ flexGrow: 1 }}>
-            <ListItem disablePadding>
-              <Avatar sx={{ bgcolor: '#9e9e9e', color: 'white' }}>
-                <PersonIcon />
-              </Avatar>
-              <ListItemText
-                sx={{ pl: 2, color: '#2196f3' }}
-                primary={me.username}
-                secondary={'(' + (me.admin ? LL.ADMINISTRATOR() : LL.GUEST()) + ')'}
-              />
-            </ListItem>
-          </List>
-          <LanguageSelector />
-        </Box>
-        <Button
-          sx={{ mt: 2 }}
-          variant="outlined"
-          fullWidth
-          color="primary"
-          onClick={handleSignOut}
-        >
-          {LL.SIGN_OUT()}
-        </Button>
+      <List sx={{ flexGrow: 1 }}>
+        <ListItem disablePadding>
+          <Avatar sx={{ bgcolor: '#9e9e9e', color: 'white' }}>
+            <PersonIcon />
+          </Avatar>
+          <ListItemText
+            sx={{ pl: 2, color: '#2196f3' }}
+            primary={me.username}
+            secondary={'(' + (me.admin ? LL.ADMINISTRATOR() : LL.GUEST()) + ')'}
+          />
+        </ListItem>
+      </List>
+      <Box mt={2} mb={2} display="flex" alignItems="center">
+        <Typography mr={2} variant="body1" align="center">
+          {LL.LANGUAGE()}:
+        </Typography>
+        <LanguageSelector />
       </Box>
+      <Divider />
+      <Button
+        sx={{ mt: 2 }}
+        variant="outlined"
+        color="primary"
+        onClick={handleSignOut}
+      >
+        {LL.SIGN_OUT()}
+      </Button>
     </SectionContent>
   );
 };

interface/src/app/status/Version.tsx

@@ -284,7 +284,6 @@ const Version = () => {
   const [downloadOnly, setDownloadOnly] = useState<boolean>(false);
   const [showVersionInfo, setShowVersionInfo] = useState<number>(0);
 
-  // API calls with optimized error handling
   const { send: sendCheckUpgrade } = useRequest(
     (versions: string) => callAction({ action: 'checkUpgrade', param: versions }),
     { immediate: false }