fix: show permission component only in server mode

web/src/containers/Settings/index.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React, { useState, useContext } from 'react'
 
 import { Box, Paper, Tab, styled } from '@mui/material'
 import TabContext from '@mui/lab/TabContext'
@@ -8,6 +8,8 @@ import TabPanel from '@mui/lab/TabPanel'
 import Permission from './permission'
 import Profile from './profile'
 
+import { AppContext, ModeType } from '../../context/appContext'
+
 const StyledTab = styled(Tab)({
   background: 'black',
   margin: '0 5px 5px 0'
@@ -18,7 +20,8 @@ const StyledTabpanel = styled(TabPanel)({
 })
 
 const Settings = () => {
-  const [value, setValue] = React.useState('profile')
+  const appContext = useContext(AppContext)
+  const [value, setValue] = useState('profile')
 
   const handleChange = (event: React.SyntheticEvent, newValue: string) => {
     setValue(newValue)
@@ -43,7 +46,9 @@ const Settings = () => {
             onChange={handleChange}
           >
             <StyledTab label="Profile" value="profile" />
-            <StyledTab label="Permission" value="permission" />
+            {appContext.mode === ModeType.Server && (
+              <StyledTab label="Permission" value="permission" />
+            )}
           </TabList>
         </Box>
         <StyledTabpanel value="profile">