display bytes in the status bar.

src/renderer/components/Editor/HostsEditor.tsx

@@ -154,6 +154,7 @@ const HostsEditor = (props: Props) => {
 
       <StatusBar
         line_count={content.split('\n').length}
+        bytes={content.length}
         read_only={is_read_only}
       />
     </div>

src/renderer/components/HostsViewer.tsx

@@ -29,7 +29,7 @@ const HostsViewer = (props: Props) => {
           <Line line={line} key={idx}/>
         ))}
       </div>
-      <StatusBar line_count={lines.length} read_only={true}/>
+      <StatusBar line_count={lines.length} bytes={content.length} read_only={true}/>
     </div>
   )
 }

src/renderer/components/StatusBar.tsx

@@ -7,14 +7,17 @@
 import { useModel } from '@@/plugin-model/useModel'
 import { Box, Flex, HStack, Spacer } from '@chakra-ui/react'
 import React from 'react'
+import prettyBytes from 'pretty-bytes'
 import styles from './StatusBar.less'
 
 interface Props {
   line_count: number;
+  bytes: number;
   read_only?: boolean;
 }
 
 const StatusBar = (props: Props) => {
+  const {line_count, bytes, read_only} = props
   const { i18n } = useModel('useI18n')
 
   return (
@@ -23,11 +26,12 @@ const StatusBar = (props: Props) => {
       px="10px"
       userSelect="none"
     >
-      <HStack>
-        <Box mr={1}>
-          {props.line_count} {props.line_count > 1 ? i18n.lang.lines : i18n.lang.line}
+      <HStack spacing={4}>
+        <Box>
+          {line_count} {line_count > 1 ? i18n.lang.lines : i18n.lang.line}
         </Box>
-        <Box>{props.read_only ? i18n.lang.read_only : ''}</Box>
+        <Box>{prettyBytes(bytes)}</Box>
+        <Box>{read_only ? i18n.lang.read_only : ''}</Box>
       </HStack>
       <Spacer/>
       <Box>