From 95811e99bca573a556430cc9c15e609a4193017b Mon Sep 17 00:00:00 2001
From: Ramires Viana <59319979+ramiresviana@users.noreply.github.com>
Date: Thu, 25 Feb 2021 18:37:07 +0000
Subject: [PATCH] chore: header bar component

---
 frontend/src/components/Header.vue           | 185 ------------------
 frontend/src/components/files/Editor.vue     |  34 ++--
 frontend/src/components/files/Preview.vue    |  46 ++---
 frontend/src/components/header/Action.vue    |  17 ++
 frontend/src/components/header/HeaderBar.vue |  47 +++++
 frontend/src/css/header.css                  |  42 ++--
 frontend/src/css/mobile.css                  |   6 +-
 frontend/src/css/styles.css                  |  46 +----
 frontend/src/router/index.js                 |  22 ++-
 frontend/src/views/Errors.vue                |  46 +++++
 frontend/src/views/Files.vue                 | 128 ++++++++++---
 frontend/src/views/Layout.vue                |   3 -
 frontend/src/views/Settings.vue              |  11 +-
 frontend/src/views/Share.vue                 | 191 ++++++++++---------
 frontend/src/views/errors/403.vue            |  13 --
 frontend/src/views/errors/404.vue            |  13 --
 frontend/src/views/errors/500.vue            |  13 --
 17 files changed, 415 insertions(+), 448 deletions(-)
 delete mode 100644 frontend/src/components/Header.vue
 create mode 100644 frontend/src/components/header/Action.vue
 create mode 100644 frontend/src/components/header/HeaderBar.vue
 create mode 100644 frontend/src/views/Errors.vue
 delete mode 100644 frontend/src/views/errors/403.vue
 delete mode 100644 frontend/src/views/errors/404.vue
 delete mode 100644 frontend/src/views/errors/500.vue

diff --git a/frontend/src/components/Header.vue b/frontend/src/components/Header.vue
deleted file mode 100644
index 6d9a1270..00000000
--- a/frontend/src/components/Header.vue
+++ /dev/null
@@ -1,185 +0,0 @@
-<template>
-  <header v-if="!isEditor && !isPreview">
-    <div>
-      <button @click="openSidebar" :aria-label="$t('buttons.toggleSidebar')" :title="$t('buttons.toggleSidebar')" class="action">
-        <i class="material-icons">menu</i>
-      </button>
-      <img :src="logoURL" alt="File Browser">
-      <search v-if="isLogged"></search>
-    </div>
-    <div>
-      <template v-if="isLogged || isSharing">
-        <button v-show="!isSharing" @click="openSearch" :aria-label="$t('buttons.search')" :title="$t('buttons.search')" class="search-button action">
-          <i class="material-icons">search</i>
-        </button>
-
-        <button @click="openMore" id="more" :aria-label="$t('buttons.more')" :title="$t('buttons.more')" class="action">
-          <i class="material-icons">more_vert</i>
-        </button>
-
-        <!-- Menu that shows on listing AND mobile when there are files selected -->
-        <div id="file-selection" v-if="isMobile && isListing && !isSharing">
-          <span v-if="selectedCount > 0">{{ selectedCount }} selected</span>
-          <share-button v-show="showShareButton"></share-button>
-          <rename-button v-show="showRenameButton"></rename-button>
-          <copy-button v-show="showCopyButton"></copy-button>
-          <move-button v-show="showMoveButton"></move-button>
-          <delete-button v-show="showDeleteButton"></delete-button>
-        </div>
-
-        <!-- This buttons are shown on a dropdown on mobile phones -->
-        <div id="dropdown" :class="{ active: showMore }">
-          <div v-if="!isListing || !isMobile">
-            <share-button v-show="showShareButton"></share-button>
-            <rename-button v-show="showRenameButton"></rename-button>
-            <copy-button v-show="showCopyButton"></copy-button>
-            <move-button v-show="showMoveButton"></move-button>
-            <delete-button v-show="showDeleteButton"></delete-button>
-          </div>
-
-          <shell-button v-if="isExecEnabled && !isSharing && user.perm.execute" />
-          <switch-button v-show="isListing"></switch-button>
-          <download-button v-show="showDownloadButton"></download-button>
-          <upload-button v-show="showUpload"></upload-button>
-          <info-button v-show="isFiles"></info-button>
-
-          <button v-show="isListing || (isSharing && req.isDir)" @click="toggleMultipleSelection" :aria-label="$t('buttons.selectMultiple')" :title="$t('buttons.selectMultiple')" class="action" >
-            <i class="material-icons">check_circle</i>
-            <span>{{ $t('buttons.select') }}</span>
-          </button>
-        </div>
-      </template>
-
-      <div v-show="showOverlay" @click="resetPrompts" class="overlay"></div>
-    </div>
-  </header>
-</template>
-
-<script>
-import Search from './Search'
-import InfoButton from './buttons/Info'
-import DeleteButton from './buttons/Delete'
-import RenameButton from './buttons/Rename'
-import UploadButton from './buttons/Upload'
-import DownloadButton from './buttons/Download'
-import SwitchButton from './buttons/SwitchView'
-import MoveButton from './buttons/Move'
-import CopyButton from './buttons/Copy'
-import ShareButton from './buttons/Share'
-import ShellButton from './buttons/Shell'
-import {mapGetters, mapState} from 'vuex'
-import { logoURL, enableExec } from '@/utils/constants'
-import * as api from '@/api'
-import buttons from '@/utils/buttons'
-
-export default {
-  name: 'header-layout',
-  components: {
-    Search,
-    InfoButton,
-    DeleteButton,
-    ShareButton,
-    RenameButton,
-    DownloadButton,
-    CopyButton,
-    UploadButton,
-    SwitchButton,
-    MoveButton,
-    ShellButton
-  },
-  data: function () {
-    return {
-      width: window.innerWidth,
-      pluginData: {
-        api,
-        buttons,
-        'store': this.$store,
-        'router': this.$router
-      }
-    }
-  },
-  created () {
-    window.addEventListener('resize', () => {
-      this.width = window.innerWidth
-    })
-  },
-  computed: {
-    ...mapGetters([
-      'selectedCount',
-      'isFiles',
-      'isEditor',
-      'isPreview',
-      'isListing',
-      'isLogged',
-      'isSharing'
-    ]),
-    ...mapState([
-      'req',
-      'user',
-      'loading',
-      'reload',
-      'multiple'
-    ]),
-    logoURL: () => logoURL,
-    isExecEnabled: () => enableExec,
-    isMobile () {
-      return this.width <= 736
-    },
-    showUpload () {
-      return this.isListing && this.user.perm.create
-    },
-    showDownloadButton () {
-      return (this.isFiles && this.user.perm.download) || (this.isSharing && this.selectedCount > 0)
-    },
-    showDeleteButton () {
-      return this.isFiles && (this.isListing
-        ? (this.selectedCount !== 0 && this.user.perm.delete)
-        : this.user.perm.delete)
-    },
-    showRenameButton () {
-      return this.isFiles && (this.isListing
-        ? (this.selectedCount === 1 && this.user.perm.rename)
-        : this.user.perm.rename)
-    },
-    showShareButton () {
-      return this.isFiles && (this.isListing
-        ? (this.selectedCount === 1 && this.user.perm.share)
-        : this.user.perm.share)
-    },
-    showMoveButton () {
-      return this.isFiles && (this.isListing
-        ? (this.selectedCount > 0 && this.user.perm.rename)
-        : this.user.perm.rename)
-    },
-    showCopyButton () {
-      return this.isFiles && (this.isListing
-        ? (this.selectedCount > 0 && this.user.perm.create)
-        : this.user.perm.create)
-    },
-    showMore () {
-      return (this.isFiles || this.isSharing) && this.$store.state.show === 'more'
-    },
-    showOverlay () {
-      return this.showMore
-    }
-  },
-  methods: {
-    openSidebar () {
-      this.$store.commit('showHover', 'sidebar')
-    },
-    openMore () {
-      this.$store.commit('showHover', 'more')
-    },
-    openSearch () {
-      this.$store.commit('showHover', 'search')
-    },
-    toggleMultipleSelection () {
-      this.$store.commit('multiple', !this.multiple)
-      this.resetPrompts()
-    },
-    resetPrompts () {
-      this.$store.commit('closeHovers')
-    }
-  }
-}
-</script>
diff --git a/frontend/src/components/files/Editor.vue b/frontend/src/components/files/Editor.vue
index 76ca8bd2..fa22ede3 100644
--- a/frontend/src/components/files/Editor.vue
+++ b/frontend/src/components/files/Editor.vue
@@ -1,18 +1,13 @@
 <template>
   <div id="editor-container">
-    <div class="bar">
-      <button @click="back" :title="$t('files.closePreview')" :aria-label="$t('files.closePreview')" id="close" class="action">
-        <i class="material-icons">close</i>
-      </button>
+    <header-bar>
+      <action icon="close" :label="$t('buttons.close')" @action="close()" />
+      <title>{{ req.name }}</title>
 
-      <div class="title">
-        <span>{{ req.name }}</span>
-      </div>
-
-      <button @click="save" v-show="user.perm.modify" :aria-label="$t('buttons.save')" :title="$t('buttons.save')" id="save-button" class="action">
-        <i class="material-icons">save</i>
-      </button>
-    </div>
+      <template #actions>
+        <action id="save-button" icon="save" :label="$t('buttons.save')" @action="save()" />
+      </template>
+    </header-bar>
 
     <div id="breadcrumbs">
       <span><i class="material-icons">home</i></span>
@@ -30,16 +25,23 @@
 <script>
 import { mapState } from 'vuex'
 import { files as api } from '@/api'
+import { theme } from '@/utils/constants'
 import buttons from '@/utils/buttons'
 import url from '@/utils/url'
 
 import ace from 'ace-builds/src-min-noconflict/ace.js'
 import modelist from 'ace-builds/src-min-noconflict/ext-modelist.js'
 import 'ace-builds/webpack-resolver'
-import { theme } from '@/utils/constants'
+
+import HeaderBar from '@/components/header/HeaderBar'
+import Action from '@/components/header/Action'
 
 export default {
   name: 'editor',
+  components: {
+    HeaderBar,
+    Action
+  },
   data: function () {
     return {}
   },
@@ -82,7 +84,7 @@ export default {
     window.removeEventListener('keydown', this.keyEvent)
     this.editor.destroy();
   },
-  mounted: function () {    
+  mounted: function () {
     const fileContent = this.req.content || '';
 
     this.editor = ace.edit('editor', {
@@ -126,6 +128,10 @@ export default {
         buttons.done(button)
         this.$showError(e)
       }
+    },
+    close () {
+      let uri = url.removeLastDir(this.$route.path) + '/'
+      this.$router.push({ path: uri })
     }
   }
 }
diff --git a/frontend/src/components/files/Preview.vue b/frontend/src/components/files/Preview.vue
index 523efd72..d2ade463 100644
--- a/frontend/src/components/files/Preview.vue
+++ b/frontend/src/components/files/Preview.vue
@@ -1,24 +1,17 @@
 <template>
   <div id="previewer" @mousemove="toggleNavigation" @touchstart="toggleNavigation">
-    <div class="bar">
-      <button @click="back" class="action" :title="$t('files.closePreview')" :aria-label="$t('files.closePreview')" id="close">
-        <i class="material-icons">close</i>
-      </button>
+    <header-bar>
+      <action icon="close" :label="$t('buttons.close')" @action="close()" />
+      <title>{{ name }}</title>
+      <preview-size-button v-if="isResizeEnabled && req.type === 'image'" @change-size="toggleSize" v-bind:size="fullSize" :disabled="loading" />
 
-      <div class="title">{{ this.name }}</div>
-
-      <preview-size-button v-if="isResizeEnabled && this.req.type === 'image'" @change-size="toggleSize" v-bind:size="fullSize" :disabled="loading"></preview-size-button>
-      <button @click="openMore" id="more" :aria-label="$t('buttons.more')" :title="$t('buttons.more')" class="action">
-        <i class="material-icons">more_vert</i>
-      </button>
-
-      <div id="dropdown" :class="{ active : showMore }">
-        <rename-button :disabled="loading" v-if="user.perm.rename"></rename-button>
-        <delete-button :disabled="loading" v-if="user.perm.delete"></delete-button>
-        <download-button :disabled="loading" v-if="user.perm.download"></download-button>
-        <info-button :disabled="loading"></info-button>
-      </div>
-    </div>
+      <template #actions>
+        <rename-button :disabled="loading" v-if="user.perm.rename" />
+        <delete-button :disabled="loading" v-if="user.perm.delete" />
+        <download-button :disabled="loading" v-if="user.perm.download" />
+        <info-button :disabled="loading" />
+      </template>
+    </header-bar>
 
     <div class="loading" v-if="loading">
       <div class="spinner">
@@ -56,17 +49,18 @@
     <button @click="next" @mouseover="hoverNav = true" @mouseleave="hoverNav = false" :class="{ hidden: !hasNext || !showNav }" :aria-label="$t('buttons.next')" :title="$t('buttons.next')">
       <i class="material-icons">chevron_right</i>
     </button>
-
-    <div v-show="showMore" @click="resetPrompts" class="overlay"></div>
   </div>
 </template>
 
 <script>
 import { mapState } from 'vuex'
-import url from '@/utils/url'
-import { baseURL, resizePreview } from '@/utils/constants'
 import { files as api } from '@/api'
+import { baseURL, resizePreview } from '@/utils/constants'
+import url from '@/utils/url'
 import throttle from 'lodash.throttle'
+
+import HeaderBar from '@/components/header/HeaderBar'
+import Action from '@/components/header/Action'
 import PreviewSizeButton from '@/components/buttons/PreviewSize'
 import InfoButton from '@/components/buttons/Info'
 import DeleteButton from '@/components/buttons/Delete'
@@ -84,6 +78,8 @@ const mediaTypes = [
 export default {
   name: 'preview',
   components: {
+    HeaderBar,
+    Action,
     PreviewSizeButton,
     InfoButton,
     DeleteButton,
@@ -251,7 +247,11 @@ export default {
         this.showNav = false || this.hoverNav
         this.navTimeout = null
       }, 1500);
-    }, 500)
+    }, 500),
+    close () {
+      let uri = url.removeLastDir(this.$route.path) + '/'
+      this.$router.push({ path: uri })
+    }
   }
 }
 </script>
diff --git a/frontend/src/components/header/Action.vue b/frontend/src/components/header/Action.vue
new file mode 100644
index 00000000..5c4bc8fe
--- /dev/null
+++ b/frontend/src/components/header/Action.vue
@@ -0,0 +1,17 @@
+<template>
+    <button @click="$emit('action')" :aria-label="label" :title="label" class="action">
+    <i class="material-icons">{{ icon }}</i>
+    <span>{{ label }}</span>
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'action',
+  props: [ 'icon', 'label' ]
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/header/HeaderBar.vue b/frontend/src/components/header/HeaderBar.vue
new file mode 100644
index 00000000..ef4edc4c
--- /dev/null
+++ b/frontend/src/components/header/HeaderBar.vue
@@ -0,0 +1,47 @@
+<template>
+  <header>
+    <img v-if="showLogo !== undefined" :src="logoURL" />
+    <action v-if="showMenu !== undefined" class="menu-button" icon="menu" :label="$t('buttons.toggleSidebar')" @action="openSidebar()" />
+
+    <slot />
+
+    <div id="dropdown" :class="{ active: this.$store.state.show === 'more' }">
+      <slot name="actions" />
+    </div>
+
+    <action v-if="this.$slots.actions" id="more" icon="more_vert" :label="$t('buttons.more')" @action="$store.commit('showHover', 'more')" />
+
+    <div class="overlay" v-show="this.$store.state.show == 'more'" @click="$store.commit('closeHovers')" />
+  </header>
+</template>
+
+<script>
+import { logoURL } from '@/utils/constants'
+
+import Action from '@/components/header/Action'
+
+export default {
+  name: 'header-bar',
+  props: [
+    'showLogo',
+    'showMenu',
+  ],
+  components: {
+    Action
+  },
+  data: function () {
+    return {
+      logoURL
+    }
+  },
+  methods: {
+    openSidebar () {
+      this.$store.commit('showHover', 'sidebar')
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/css/header.css b/frontend/src/css/header.css
index fcebc9fb..3a623424 100644
--- a/frontend/src/css/header.css
+++ b/frontend/src/css/header.css
@@ -6,9 +6,25 @@ header {
   position: fixed;
   top: 0;
   left: 0;
+  height: 4em;
   width: 100%;
   padding: 0;
   display: flex;
+  padding: 0.5em 0.5em 0.5em 1em;
+  align-items: center;
+}
+
+header > * {
+  flex: 0 0 auto;
+}
+
+header title {
+  display: block;
+  flex: 1 1 auto;
+  padding: 0 1em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 1.2em;
 }
 
 header .overlay {
@@ -30,17 +46,6 @@ header img {
   height: 2.5em;
 }
 
-header>div:first-child>.action {
-  display: none;
-}
-
-header>div {
-  display: flex;
-  width: 100%;
-  padding: 0.5em 0.5em 0.5em 1em;
-  align-items: center;
-}
-
 header .action span {
   display: none;
 }
@@ -50,19 +55,8 @@ header>div div {
   position: relative;
 }
 
-header>div:last-child div {
-  display: flex;
-}
-
-header>div:first-child {
-  height: 4em;
-}
-
-header>div:last-child {
-  justify-content: flex-end;
-}
-
-header .search-button {
+header .search-button,
+header .menu-button {
   display: none;
 }
 
diff --git a/frontend/src/css/mobile.css b/frontend/src/css/mobile.css
index 556ca033..6417080f 100644
--- a/frontend/src/css/mobile.css
+++ b/frontend/src/css/mobile.css
@@ -70,6 +70,7 @@
     box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 3px, rgba(0, 0, 0, 0.12) 0px 1px 2px;
     width: 95%;
     max-width: 20em;
+    z-index: 1;
   }
   #file-selection .action {
     border-radius: 50%;
@@ -81,6 +82,9 @@
     color: #6f6f6f;
     margin-right: auto;
   }
+  #file-selection .action span {
+    display: none;
+  }
   nav {
     top: 0;
     z-index: 99999;
@@ -95,7 +99,7 @@
     left: 0;
   }
   header .search-button,
-  header>div:first-child>.action {
+  header .menu-button {
     display: inherit;
   }
   header img {
diff --git a/frontend/src/css/styles.css b/frontend/src/css/styles.css
index b8afd786..21fc27f9 100644
--- a/frontend/src/css/styles.css
+++ b/frontend/src/css/styles.css
@@ -117,25 +117,8 @@
   overflow: hidden;
 }
 
-#previewer .bar {
-  width: 100%;
-  display: flex;
-  padding: 0.5em;
-  height: 3.7em;
-}
-
-#previewer .bar > * {
-  flex: 0 0 auto;
-}
-
-#previewer .bar .title {
-  display: block;
-  flex: 1 1 auto;
-  padding: 0 1em;
-  line-height: 2.3em;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: 1.2em;
+#previewer header {
+  background: none;
   color: #fff;
 }
 
@@ -152,8 +135,9 @@
 }
 
 #previewer .preview {
+  margin-top: 4em;
   text-align: center;
-  height: calc(100vh - 3.7em);
+  height: calc(100vh - 4em);
 }
 
 #previewer .preview pre {
@@ -218,6 +202,7 @@
 #editor-container {
   background-color: #fafafa;
   position: fixed;
+  margin-top: 4em;
   top: 0;
   left: 0;
   width: 100%;
@@ -225,32 +210,13 @@
   overflow: hidden;
 }
 
-#editor-container .bar {
-  width: 100%;
-  text-align: right;
-  display: flex;
-  padding: 0.5em;
-  height: 3.7em;
-  background-color: #fff;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.075);
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-}
-
-#editor-container .title {
-  margin-right: auto;
-  padding: 0 1em;
-  line-height: 2.7em;
-  overflow: hidden;
-  word-break: break-word;
-}
-
 #previewer .loading {
   height: 100%;
   width: 100%;
 }
 
 #editor-container #editor {
-  height: calc(100vh - 8.2em);
+  height: calc(100vh - 8.4em);
 }
 
 #editor-container #breadcrumbs {
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 07b9b124..367a73e1 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -10,9 +10,7 @@ import Settings from '@/views/Settings'
 import GlobalSettings from '@/views/settings/Global'
 import ProfileSettings from '@/views/settings/Profile'
 import Shares from '@/views/settings/Shares'
-import Error403 from '@/views/errors/403'
-import Error404 from '@/views/errors/404'
-import Error500 from '@/views/errors/500'
+import Errors from '@/views/Errors'
 import store from '@/store'
 import { baseURL } from '@/utils/constants'
 
@@ -102,17 +100,29 @@ const router = new Router({
         {
           path: '/403',
           name: 'Forbidden',
-          component: Error403
+          component: Errors,
+          props: {
+            errorCode: 403,
+            showHeader: true
+          }
         },
         {
           path: '/404',
           name: 'Not Found',
-          component: Error404
+          component: Errors,
+          props: {
+            errorCode: 404,
+            showHeader: true
+          }
         },
         {
           path: '/500',
           name: 'Internal Server Error',
-          component: Error500
+          component: Errors,
+          props: {
+            errorCode: 500,
+            showHeader: true
+          }
         },
         {
           path: '/files',
diff --git a/frontend/src/views/Errors.vue b/frontend/src/views/Errors.vue
new file mode 100644
index 00000000..8926f9e5
--- /dev/null
+++ b/frontend/src/views/Errors.vue
@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <header-bar v-if="showHeader" showMenu showLogo />
+
+    <h2 class="message">
+      <i class="material-icons">{{ icon }}</i>
+      <span>{{ message }}</span>
+    </h2>
+  </div>
+</template>
+
+<script>
+
+import HeaderBar from '@/components/header/HeaderBar'
+
+const errors = {
+  403: {
+    icon: 'error',
+    message: 'errors.forbidden'
+  },
+  404: {
+    icon: 'gps_off',
+    message: 'errors.notFound'
+  },
+  500: {
+    icon: 'error_outline',
+    message: 'errors.internal'
+  }
+}
+
+export default {
+  name: 'errors',
+  components: {
+    HeaderBar
+  },
+  props: [
+    'errorCode', 'showHeader'
+  ],
+  data: function () {
+    return {
+      icon: errors[this.errorCode].icon,
+      message: this.$t(errors[this.errorCode].message)
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/frontend/src/views/Files.vue b/frontend/src/views/Files.vue
index ee2e8d8f..ca16bff0 100644
--- a/frontend/src/views/Files.vue
+++ b/frontend/src/views/Files.vue
@@ -1,5 +1,36 @@
 <template>
   <div>
+    <header-bar showMenu showLogo>
+      <search /> <title />
+      <action class="search-button" icon="search" :label="$t('buttons.search')" @action="openSearch()" />
+
+      <template #actions v-if="!error">
+        <template v-if="!isMobile">
+          <share-button v-if="headerButtons.share" />
+          <rename-button v-if="headerButtons.rename" />
+          <copy-button v-if="headerButtons.copy" />
+          <move-button v-if="headerButtons.move" />
+          <delete-button v-if="headerButtons.delete" />
+        </template>
+
+        <shell-button v-if="headerButtons.shell" />
+        <switch-button />
+        <download-button v-if="headerButtons.download" />
+        <upload-button v-if="headerButtons.upload" />
+        <info-button />
+        <action icon="check_circle" :label="$t('buttons.selectMultiple')" @action="toggleMultipleSelection" />
+      </template>
+    </header-bar>
+
+    <div id="file-selection" v-if="isMobile">
+      <span v-if="selectedCount > 0">{{ selectedCount }} selected</span>
+      <share-button v-if="headerButtons.share" />
+      <rename-button v-if="headerButtons.rename" />
+      <copy-button v-if="headerButtons.copy" />
+      <move-button v-if="headerButtons.move" />
+      <delete-button v-if="headerButtons.delete" />
+    </div>
+
     <div id="breadcrumbs" v-if="isListing || error">
       <router-link to="/files/" :aria-label="$t('files.home')" :title="$t('files.home')">
         <i class="material-icons">home</i>
@@ -11,11 +42,7 @@
       </span>
     </div>
 
-    <div v-if="error">
-      <not-found v-if="error.message === '404'"></not-found>
-      <forbidden v-else-if="error.message === '403'"></forbidden>
-      <internal-error v-else></internal-error>
-    </div>
+    <errors v-if="error" :errorCode="errorCode" />
     <preview v-else-if="isPreview"></preview>
     <editor v-else-if="isEditor"></editor>
     <listing :class="{ multiple }" v-else-if="isListing"></listing>
@@ -28,13 +55,27 @@
 </template>
 
 <script>
-import Forbidden from './errors/403'
-import NotFound from './errors/404'
-import InternalError from './errors/500'
-import Preview from '@/components/files/Preview'
-import Listing from '@/components/files/Listing'
 import { files as api } from '@/api'
 import { mapGetters, mapState, mapMutations } from 'vuex'
+import { enableExec } from '@/utils/constants'
+
+import HeaderBar from '@/components/header/HeaderBar'
+import Action from '@/components/header/Action'
+import Search from '@/components/Search'
+import InfoButton from '@/components/buttons/Info'
+import DeleteButton from '@/components/buttons/Delete'
+import RenameButton from '@/components/buttons/Rename'
+import UploadButton from '@/components/buttons/Upload'
+import DownloadButton from '@/components/buttons/Download'
+import SwitchButton from '@/components/buttons/SwitchView'
+import MoveButton from '@/components/buttons/Move'
+import CopyButton from '@/components/buttons/Copy'
+import ShareButton from '@/components/buttons/Share'
+import ShellButton from '@/components/buttons/Shell'
+
+import Errors from '@/views/Errors'
+import Preview from '@/components/files/Preview'
+import Listing from '@/components/files/Listing'
 
 function clean (path) {
   return path.endsWith('/') ? path.slice(0, -1) : path
@@ -43,12 +84,29 @@ function clean (path) {
 export default {
   name: 'files',
   components: {
-    Forbidden,
-    NotFound,
-    InternalError,
+    HeaderBar,
+    Action,
+    Search,
+    InfoButton,
+    DeleteButton,
+    ShareButton,
+    RenameButton,
+    DownloadButton,
+    CopyButton,
+    UploadButton,
+    SwitchButton,
+    MoveButton,
+    ShellButton,
+    Errors,
     Preview,
     Listing,
-    Editor: () => import('@/components/files/Editor')
+    Editor: () => import('@/components/files/Editor'),
+  },
+  data: function () {
+    return {
+      error: null,
+      width: window.innerWidth
+    }
   },
   computed: {
     ...mapGetters([
@@ -100,12 +158,25 @@ export default {
       }
 
       return breadcrumbs
-    }
-  },
-  data: function () {
-    return {
-      error: null
-    }
+    },
+    headerButtons() {
+      return {
+        upload: this.user.perm.create,
+        download: this.user.perm.download,
+        shell: this.user.perm.execute && enableExec,
+        delete: this.selectedCount > 0 && this.user.perm.delete,
+        rename: this.selectedCount === 1 && this.user.perm.rename,
+        share: this.selectedCount === 1 && this.user.perm.share,
+        move: this.selectedCount === 1 && this.user.perm.rename,
+        copy: this.selectedCount === 1 && this.user.perm.create,
+      }
+    },
+    errorCode() {
+      return (this.error.message === '404' || this.error.message === '403') ? parseInt(this.error.message) : 500
+    },
+    isMobile () {
+      return this.width <= 736
+    },
   },
   created () {
     this.fetchData()
@@ -121,12 +192,17 @@ export default {
   mounted () {
     window.addEventListener('keydown', this.keyEvent)
     window.addEventListener('scroll', this.scroll)
+    window.addEventListener('resize', this.windowsResize)
   },
   beforeDestroy () {
     window.removeEventListener('keydown', this.keyEvent)
     window.removeEventListener('scroll', this.scroll)
+    window.removeEventListener('resize', this.windowsResize)
   },
   destroyed () {
+    if (this.$store.state.showShell) {
+      this.$store.commit('toggleShell')
+    }
     this.$store.commit('updateRequest', {})
   },
   methods: {
@@ -172,7 +248,7 @@ export default {
       }
 
       // Esc!
-      if (event.keyCode === 27) {        
+      if (event.keyCode === 27) {
         // If we're on a listing, unselect all
         // files and folders.
         if (this.isListing) {
@@ -234,11 +310,15 @@ export default {
 
       document.querySelector('#listing.list .item.header').style.top = top + 'px'
     },
-    openSidebar () {
-      this.$store.commit('showHover', 'sidebar')
-    },
     openSearch () {
       this.$store.commit('showHover', 'search')
+    },
+    toggleMultipleSelection () {
+      this.$store.commit('multiple', !this.multiple)
+      this.$store.commit('closeHovers')
+    },
+    windowsResize () {
+      this.width = window.innerWidth
     }
   }
 }
diff --git a/frontend/src/views/Layout.vue b/frontend/src/views/Layout.vue
index 85991d48..6dc935f7 100644
--- a/frontend/src/views/Layout.vue
+++ b/frontend/src/views/Layout.vue
@@ -3,7 +3,6 @@
     <div id="progress">
       <div v-bind:style="{ width: this.progress + '%' }"></div>
     </div>
-    <site-header></site-header>
     <sidebar></sidebar>
     <main>
       <router-view></router-view>
@@ -17,7 +16,6 @@
 import { mapState, mapGetters } from 'vuex'
 import Sidebar from '@/components/Sidebar'
 import Prompts from '@/components/prompts/Prompts'
-import SiteHeader from '@/components/Header'
 import Shell from '@/components/Shell'
 import { enableExec } from '@/utils/constants'
 
@@ -25,7 +23,6 @@ export default {
   name: 'layout',
   components: {
     Sidebar,
-    SiteHeader,
     Prompts,
     Shell
   },
diff --git a/frontend/src/views/Settings.vue b/frontend/src/views/Settings.vue
index 17119397..50c58165 100644
--- a/frontend/src/views/Settings.vue
+++ b/frontend/src/views/Settings.vue
@@ -1,5 +1,7 @@
 <template>
   <div class="dashboard">
+    <header-bar showMenu showLogo />
+
     <div id="nav">
       <div class="wrapper">
         <ul>
@@ -18,8 +20,15 @@
 <script>
 import { mapState } from 'vuex'
 
+import HeaderBar from '@/components/header/HeaderBar'
+
 export default {
   name: 'settings',
-  computed: mapState([ 'user' ])
+  components: {
+    HeaderBar
+  },
+  computed: {
+    ...mapState([ 'user' ])
+  }
 }
 </script>
diff --git a/frontend/src/views/Share.vue b/frontend/src/views/Share.vue
index 329c51ec..fdb9d7f7 100644
--- a/frontend/src/views/Share.vue
+++ b/frontend/src/views/Share.vue
@@ -1,98 +1,107 @@
 <template>
-  <div v-if="!loading">
-    <div id="breadcrumbs">
-      <router-link :to="'/share/' + hash" :aria-label="$t('files.home')" :title="$t('files.home')">
-        <i class="material-icons">home</i>
-      </router-link>
+  <div>
+    <header-bar showMenu showLogo>
+      <title />
 
-      <span v-for="(link, index) in breadcrumbs" :key="index">
-          <span class="chevron"><i class="material-icons">keyboard_arrow_right</i></span>
-          <router-link :to="link.url">{{ link.name }}</router-link>
-        </span>
-    </div>
-    <div class="share">
-      <div class="share__box share__box__info">
-          <div class="share__box__header">
-            {{ req.isDir ? $t('download.downloadFolder') : $t('download.downloadFile') }}
-          </div>
-          <div class="share__box__element share__box__center share__box__icon">
-            <i class="material-icons">{{ icon }}</i>
-          </div>
-          <div class="share__box__element">
-            <strong>{{ $t('prompts.displayName') }}</strong> {{ req.name }}
-          </div>
-          <div class="share__box__element">
-            <strong>{{ $t('prompts.lastModified') }}:</strong> {{ humanTime }}
-          </div>
-          <div class="share__box__element">
-            <strong>{{ $t('prompts.size') }}:</strong> {{ humanSize }}
-          </div>
-          <div class="share__box__element share__box__center">
-            <a target="_blank" :href="link" class="button button--flat">{{ $t('buttons.download') }}</a>
-          </div>
-          <div class="share__box__element share__box__center">
-            <qrcode-vue :value="fullLink" size="200" level="M"></qrcode-vue>
-          </div>
+      <template #actions v-if="!error">
+        <download-button v-if="selectedCount" />
+        <action icon="check_circle" :label="$t('buttons.selectMultiple')" @action="toggleMultipleSelection" />
+      </template>
+    </header-bar>
+
+    <div v-if="!loading">
+      <div id="breadcrumbs">
+        <router-link :to="'/share/' + hash" :aria-label="$t('files.home')" :title="$t('files.home')">
+          <i class="material-icons">home</i>
+        </router-link>
+
+        <span v-for="(link, index) in breadcrumbs" :key="index">
+            <span class="chevron"><i class="material-icons">keyboard_arrow_right</i></span>
+            <router-link :to="link.url">{{ link.name }}</router-link>
+          </span>
       </div>
-      <div v-if="req.isDir && req.items.length > 0" class="share__box share__box__items">
-        <div class="share__box__header" v-if="req.isDir">
-          {{ $t('files.files') }}
-        </div>
-        <div id="listing" class="list">
-          <item v-for="(item) in req.items.slice(0, this.showLimit)"
-            :key="base64(item.name)"
-            v-bind:index="item.index"
-            v-bind:name="item.name"
-            v-bind:isDir="item.isDir"
-            v-bind:url="item.url"
-            v-bind:modified="item.modified"
-            v-bind:type="item.type"
-            v-bind:size="item.size">
-          </item>
-          <div v-if="req.items.length > showLimit" class="item">
-            <div>
-              <p class="name"> + {{ req.items.length - showLimit }} </p>
+      <div class="share">
+        <div class="share__box share__box__info">
+            <div class="share__box__header">
+              {{ req.isDir ? $t('download.downloadFolder') : $t('download.downloadFile') }}
             </div>
+            <div class="share__box__element share__box__center share__box__icon">
+              <i class="material-icons">{{ icon }}</i>
+            </div>
+            <div class="share__box__element">
+              <strong>{{ $t('prompts.displayName') }}</strong> {{ req.name }}
+            </div>
+            <div class="share__box__element">
+              <strong>{{ $t('prompts.lastModified') }}:</strong> {{ humanTime }}
+            </div>
+            <div class="share__box__element">
+              <strong>{{ $t('prompts.size') }}:</strong> {{ humanSize }}
+            </div>
+            <div class="share__box__element share__box__center">
+              <a target="_blank" :href="link" class="button button--flat">{{ $t('buttons.download') }}</a>
+            </div>
+            <div class="share__box__element share__box__center">
+              <qrcode-vue :value="fullLink" size="200" level="M"></qrcode-vue>
+            </div>
+        </div>
+        <div v-if="req.isDir && req.items.length > 0" class="share__box share__box__items">
+          <div class="share__box__header" v-if="req.isDir">
+            {{ $t('files.files') }}
           </div>
+          <div id="listing" class="list">
+            <item v-for="(item) in req.items.slice(0, this.showLimit)"
+              :key="base64(item.name)"
+              v-bind:index="item.index"
+              v-bind:name="item.name"
+              v-bind:isDir="item.isDir"
+              v-bind:url="item.url"
+              v-bind:modified="item.modified"
+              v-bind:type="item.type"
+              v-bind:size="item.size">
+            </item>
+            <div v-if="req.items.length > showLimit" class="item">
+              <div>
+                <p class="name"> + {{ req.items.length - showLimit }} </p>
+              </div>
+            </div>
 
-          <div :class="{ active: $store.state.multiple }" id="multiple-selection">
-            <p>{{ $t('files.multipleSelectionEnabled') }}</p>
-            <div @click="$store.commit('multiple', false)" tabindex="0" role="button" :title="$t('files.clear')" :aria-label="$t('files.clear')" class="action">
-              <i class="material-icons">clear</i>
+            <div :class="{ active: $store.state.multiple }" id="multiple-selection">
+              <p>{{ $t('files.multipleSelectionEnabled') }}</p>
+              <div @click="$store.commit('multiple', false)" tabindex="0" role="button" :title="$t('files.clear')" :aria-label="$t('files.clear')" class="action">
+                <i class="material-icons">clear</i>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-      <div v-else-if="req.isDir && req.items.length === 0" class="share__box share__box__items">
-        <h2 class="message">
-          <i class="material-icons">sentiment_dissatisfied</i>
-          <span>{{ $t('files.lonely') }}</span>
-        </h2>
+        <div v-else-if="req.isDir && req.items.length === 0" class="share__box share__box__items">
+          <h2 class="message">
+            <i class="material-icons">sentiment_dissatisfied</i>
+            <span>{{ $t('files.lonely') }}</span>
+          </h2>
+        </div>
       </div>
     </div>
-  </div>
-  <div v-else-if="error">
-    <not-found v-if="error.message === '404'"></not-found>
-    <forbidden v-else-if="error.message === '403'"></forbidden>
-    <div v-else-if="error.message === '401'">
-      <div class="card floating" id="password">
-        <div v-if="attemptedPasswordLogin" class="share__wrong__password">{{ $t('login.wrongCredentials') }}</div>
-        <div class="card-title">
-          <h2>{{ $t('login.password') }}</h2>
-        </div>
+    <div v-if="error">
+      <div v-if="error.message === '401'">
+        <div class="card floating" id="password">
+          <div v-if="attemptedPasswordLogin" class="share__wrong__password">{{ $t('login.wrongCredentials') }}</div>
+          <div class="card-title">
+            <h2>{{ $t('login.password') }}</h2>
+          </div>
 
-        <div class="card-content">
-          <input v-focus type="password" :placeholder="$t('login.password')" v-model="password" @keyup.enter="fetchData">
-        </div>
-        <div class="card-action">
-          <button class="button button--flat"
-            @click="fetchData"
-            :aria-label="$t('buttons.submit')"
-            :title="$t('buttons.submit')">{{ $t('buttons.submit') }}</button>
+          <div class="card-content">
+            <input v-focus type="password" :placeholder="$t('login.password')" v-model="password" @keyup.enter="fetchData">
+          </div>
+          <div class="card-action">
+            <button class="button button--flat"
+              @click="fetchData"
+              :aria-label="$t('buttons.submit')"
+              :title="$t('buttons.submit')">{{ $t('buttons.submit') }}</button>
+          </div>
         </div>
       </div>
+      <errors v-else :errorCode="errorCode" />
     </div>
-    <internal-error v-else></internal-error>
   </div>
 </template>
 
@@ -102,20 +111,23 @@ import { share as api } from '@/api'
 import { baseURL } from '@/utils/constants'
 import filesize from 'filesize'
 import moment from 'moment'
+
+import HeaderBar from '@/components/header/HeaderBar'
+import Action from '@/components/header/Action'
+import DownloadButton from '@/components/buttons/Download'
+import Errors from '@/views/Errors'
 import QrcodeVue from 'qrcode.vue'
 import Item from "@/components/files/ListingItem"
-import Forbidden from './errors/403'
-import NotFound from './errors/404'
-import InternalError from './errors/500'
 
 export default {
   name: 'share',
   components: {
+    HeaderBar,
+    Action,
+    DownloadButton,
     Item,
-    Forbidden,
-    NotFound,
-    InternalError,
-    QrcodeVue
+    QrcodeVue,
+    Errors
   },
   data: () => ({
     error: null,
@@ -140,7 +152,7 @@ export default {
   },
   computed: {
     ...mapState(['hash', 'req', 'loading', 'multiple']),
-    ...mapGetters(['selectedCount']),
+    ...mapGetters(['selectedCount', 'selectedCount']),
     icon: function () {
       if (this.req.isDir) return 'folder'
       if (this.req.type === 'image') return 'insert_photo'
@@ -198,6 +210,9 @@ export default {
       }
 
       return breadcrumbs
+    },
+    errorCode() {
+      return (this.error.message === '404' || this.error.message === '403') ? parseInt(this.error.message) : 500
     }
   },
   methods: {
diff --git a/frontend/src/views/errors/403.vue b/frontend/src/views/errors/403.vue
deleted file mode 100644
index 47c6c897..00000000
--- a/frontend/src/views/errors/403.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <div>
-    <h2 class="message">
-      <i class="material-icons">error</i>
-      <span>{{ $t('errors.forbidden') }}</span>
-    </h2>
-  </div>
-</template>
-
-<script>
-export default {name: 'forbidden'}
-</script>
-
diff --git a/frontend/src/views/errors/404.vue b/frontend/src/views/errors/404.vue
deleted file mode 100644
index 61dbe144..00000000
--- a/frontend/src/views/errors/404.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <div>
-    <h2 class="message">
-      <i class="material-icons">gps_off</i>
-      <span>{{ $t('errors.notFound') }}</span>
-    </h2>
-  </div>
-</template>
-
-<script>
-export default {name: 'not-found'}
-</script>
-
diff --git a/frontend/src/views/errors/500.vue b/frontend/src/views/errors/500.vue
deleted file mode 100644
index 0bd86786..00000000
--- a/frontend/src/views/errors/500.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <div>
-    <h2 class="message">
-      <i class="material-icons">error_outline</i>
-      <span>{{ $t('errors.internal') }}</span>
-    </h2>
-  </div>
-</template>
-
-<script>
-export default {name: 'internal-error'}
-</script>
-