Feat/redesign files bar

public/locales/en/files.json

@@ -120,6 +120,7 @@
   "pins": "Pins",
   "pinned": "Pinned",
   "blocks": "Blocks",
+  "allBlocks": "all blocks",
   "more": "More",
   "files": "Files",
   "cidNotFileNorDir": "The current link isn't a file, nor a directory. Try to <0>inspect</0> it instead."

src/bundles/files/selectors.js

@@ -5,6 +5,8 @@ import { infoFromPath } from './utils'
 export default () => ({
   selectFiles: (state) => state.files.pageContent,
 
+  selectCurrentDirectorySize: (state) => state.files.pageContent?.content?.reduce((prev, curr) => prev + curr.size, 0),
+
   selectPins: (state) => state.files.pins,
 
   selectFilesSize: (state) => state.files.mfsSize,
@@ -26,6 +28,8 @@ export default () => ({
 
   selectFilesErrors: (state) => state.files.failed,
 
+  selectHasUpperDirectory: (state) => !!state.files.pageContent?.upper,
+
   selectFilesPathInfo: createSelector(
     'selectRouteInfo',
     (routeInfo) => {

src/files/header/Header.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import filesize from 'filesize'
-import SimplifyNumber from 'simplify-number'
+import classNames from 'classnames'
 import { connect } from 'redux-bundler-react'
 import { withTranslation } from 'react-i18next'
 // Components
@@ -10,18 +10,12 @@ import Button from '../../components/button/Button'
 // Icons
 import GlyphDots from '../../icons/GlyphDots'
 
-function BarOption ({ children, title, isLink = false, className = '', ...etc }) {
-  className += ' tc pa3'
-
-  if (etc.onClick) className += ' pointer'
-
-  return (
-    <div className={className} {...etc}>
-      <span className='nowrap db f4 navy'>{children}</span>
-      <span className={`db ttl ${isLink ? 'navy underline' : 'gray'}`}>{title}</span>
-    </div>
-  )
-}
+const BarOption = ({ children, title, className = '', ...etc }) => (
+  <div className={classNames(className, 'tc pa3')} {...etc}>
+    <span className='nowrap db f4 navy'>{children}</span>
+    <span className='db ttl gray'>{title}</span>
+  </div>
+)
 
 function humanSize (size) {
   if (!size) return 'N/A'
@@ -42,14 +36,14 @@ class Header extends React.Component {
 
   render () {
     const {
+      currentDirectorySize,
+      hasUpperDirectory,
       files,
-      t,
-      pins,
       filesPathInfo,
       filesSize,
-      repoNumObjects,
+      onNavigate,
       repoSize,
-      onNavigate
+      t
     } = this.props
 
     return (
@@ -59,19 +53,17 @@ class Header extends React.Component {
         </div>
 
         <div className='mb3 flex justify-between items-center bg-snow-muted joyride-files-add'>
-          <BarOption title={t('files')} isLink onClick={() => { onNavigate('/files') }}>
-            { humanSize(filesSize) }
-          </BarOption>
-
-          <BarOption title={t('pins')} isLink onClick={() => { onNavigate('/pins') }}>
-            { pins ? SimplifyNumber(pins.length) : '-' }
-          </BarOption>
-
-          <BarOption title={t('blocks')}>
-            { repoNumObjects ? SimplifyNumber(repoNumObjects, { decimal: 0 }) : 'N/A' }
+          <BarOption title={t('files')}>
+            { hasUpperDirectory
+              ? (
+                <span>
+                  { humanSize(currentDirectorySize) }<span className='f5 gray'>/{ humanSize(filesSize) }</span>
+                </span>
+              )
+              : humanSize(filesSize) }
           </BarOption>
 
-          <BarOption title={t('repo')}>
+          <BarOption title={t('allBlocks')}>
             { humanSize(repoSize) }
           </BarOption>
 
@@ -104,10 +96,11 @@ class Header extends React.Component {
 }
 
 export default connect(
-  'selectPins',
+  'selectHasUpperDirectory',
   'selectFilesSize',
   'selectRepoSize',
   'selectRepoNumObjects',
   'selectFilesPathInfo',
+  'selectCurrentDirectorySize',
   withTranslation('files')(Header)
 )