feat: improve nav bar

src/bundles/files/actions.js

@@ -271,5 +271,10 @@ export default () => ({
 
   doFilesUpdateSorting: (by, asc) => async ({ dispatch }) => {
     dispatch({ type: 'FILES_UPDATE_SORT', payload: { by, asc } })
-  }
+  },
+
+  doFilesSizeGet: make(ACTIONS.FILES_SIZE_GET, async (ipfs) => {
+    const stat = await ipfs.files.stat('/')
+    return { size: stat.cumulativeSize }
+  })
 })

src/bundles/files/consts.js

@@ -11,7 +11,8 @@ export const ACTIONS = {
   ADD_BY_PATH: 'ADDBYPATH',
   PIN_ADD: 'PIN_ADD',
   PIN_REMOVE: 'PIN_REMOVE',
-  PIN_LIST: 'PIN_LIST'
+  PIN_LIST: 'PIN_LIST',
+  FILES_SIZE_GET: 'FILES_SIZE_GET'
 }
 
 export const SORTING = {

src/bundles/files/index.js

@@ -96,6 +96,12 @@ export default () => {
         const action = state.pending.find(a => a.id === id)
         let additional
 
+        if (type === ACTIONS.FILES_SIZE_GET) {
+          additional = {
+            mfsSize: data.size
+          }
+        }
+
         if (type === ACTIONS.FETCH) {
           additional = {
             pageContent: data

src/bundles/files/selectors.js

@@ -7,6 +7,8 @@ export default () => ({
 
   selectPins: (state) => state.files.pins,
 
+  selectFilesSize: (state) => state.files.mfsSize,
+
   selectFilesIsFetching: (state) => state.files.pending.some(a => a.type === ACTIONS.FETCH),
 
   selectShowLoadingAnimation: (state) => {

src/files/FilesPage.js

@@ -44,6 +44,7 @@ class FilesPage extends React.Component {
   componentDidMount () {
     this.props.doFilesFetch()
     this.props.doPinsFetch()
+    this.props.doFilesSizeGet()
   }
 
   componentDidUpdate (prev) {
@@ -314,5 +315,6 @@ export default connect(
   'doFilesWrite',
   'doFilesDownloadLink',
   'doExploreUserProvidedPath',
+  'doFilesSizeGet',
   withTour(withTranslation('files')(FilesPage))
 )

src/files/header/Header.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import filesize from 'filesize'
 import SimplifyNumber from 'simplify-number'
 import { connect } from 'redux-bundler-react'
 import { withTranslation } from 'react-i18next'
@@ -8,21 +9,28 @@ import FileInput from '../file-input/FileInput'
 import Button from '../../components/button/Button'
 // Icons
 import GlyphDots from '../../icons/GlyphDots'
-import GlyphHome from '../../icons/GlyphHome'
 
-function BarOption ({ children, title, className = '', ...etc }) {
+function BarOption ({ children, title, isLink = false, className = '', ...etc }) {
   className += ' tc pa3'
 
   if (etc.onClick) className += ' pointer'
 
   return (
     <div className={className} {...etc}>
-      <span className='db f4 navy'>{children}</span>
-      <span className='db ttl gray'>{title}</span>
+      <span className='nowrap db f4 navy'>{children}</span>
+      <span className={`db ttl ${isLink ? 'navy underline' : 'gray'}`}>{title}</span>
     </div>
   )
 }
 
+function humanSize (size) {
+  if (!size) return 'N/A'
+
+  return filesize(size || 0, {
+    round: size >= 1000000000 ? 1 : 0, spacer: ''
+  })
+}
+
 class Header extends React.Component {
   handleContextMenu = (ev) => {
     const pos = this.dotsWrapper.getBoundingClientRect()
@@ -37,7 +45,9 @@ class Header extends React.Component {
       files, writeFilesProgress, t,
       pins,
       filesPathInfo,
+      filesSize,
       repoNumObjects,
+      repoSize,
       onNavigate
     } = this.props
 
@@ -48,16 +58,20 @@ class Header extends React.Component {
         </div>
 
         <div className='mb3 flex justify-between items-center bg-snow-muted joyride-files-add'>
-          <BarOption title={t('blocks')}>
-            { repoNumObjects ? SimplifyNumber(repoNumObjects, { decimal: 0 }) : 'N/A' }
+          <BarOption title={t('files')} isLink onClick={() => { onNavigate('/files') }}>
+            { humanSize(filesSize) }
           </BarOption>
 
-          <BarOption title={t('pins')} onClick={() => { onNavigate('/pins') }}>
+          <BarOption title={t('pins')} isLink onClick={() => { onNavigate('/pins') }}>
             { pins ? SimplifyNumber(pins.length) : '-' }
           </BarOption>
 
-          <BarOption title={t('files')} onClick={() => { onNavigate('/files') }}>
-            <GlyphHome viewBox='20 20 60 60' className='w1 h1 fill-navy' />
+          <BarOption title={t('blocks')}>
+            { repoNumObjects ? SimplifyNumber(repoNumObjects, { decimal: 0 }) : 'N/A' }
+          </BarOption>
+
+          <BarOption title={t('repo')}>
+            { humanSize(repoSize) }
           </BarOption>
 
           <div className='pa3'>
@@ -91,6 +105,7 @@ class Header extends React.Component {
 
 export default connect(
   'selectPins',
+  'selectFilesSize',
   'selectRepoSize',
   'selectRepoNumObjects',
   'selectFilesPathInfo',