From 698a08e1a98f49aab1d5b358ec0781975413cc72 Mon Sep 17 00:00:00 2001
From: Henrique Dias <hacdias@gmail.com>
Date: Fri, 30 Jun 2017 17:49:05 +0100
Subject: [PATCH] Improvements and more reliability :)

---
 _assets/src/components/DeletePrompt.vue     |  16 +-
 _assets/src/components/Help.vue             |  11 +-
 _assets/src/components/InfoButton.vue       |  17 +-
 _assets/src/components/InfoPrompt.vue       |  63 ++++----
 _assets/src/components/Listing.vue          | 164 ++++++++++----------
 _assets/src/components/ListingItem.vue      |  98 ++++++------
 _assets/src/components/MoveButton.vue       |  17 +-
 _assets/src/components/MovePrompt.vue       |  23 ++-
 _assets/src/components/NewDirPrompt.vue     |   5 +-
 _assets/src/components/NewFilePrompt.vue    |   5 +-
 _assets/src/components/Preview.vue          |  57 +++----
 _assets/src/components/RenameButton.vue     |  17 +-
 _assets/src/components/RenamePrompt.vue     |  21 ++-
 _assets/src/components/SwitchViewButton.vue |  11 +-
 _assets/src/components/UploadButton.vue     |   8 +-
 _assets/src/store/mutations.js              |   3 +
 serve.go                                    |   3 +
 17 files changed, 239 insertions(+), 300 deletions(-)

diff --git a/_assets/src/components/DeletePrompt.vue b/_assets/src/components/DeletePrompt.vue
index 86b9b55a..820f3a57 100644
--- a/_assets/src/components/DeletePrompt.vue
+++ b/_assets/src/components/DeletePrompt.vue
@@ -46,21 +46,6 @@ export default {
         return
       }
 
-      if (this.selectedCount === 1) {
-        webdav.trash(this.req.data.items[this.selected[0]].url)
-          .then(() => {
-            // buttons.setDone('delete')
-            page.reload()
-          })
-          .catch(error => {
-            // buttons.setDone('delete', false)
-            console.log(error)
-          })
-
-        return
-      }
-
-      // More than one item!
       let promises = []
 
       for (let index of this.selected) {
@@ -74,6 +59,7 @@ export default {
         })
         .catch(error => {
           console.log(error)
+          page.reload()
           // buttons.setDone('delete', false)
         })
     }
diff --git a/_assets/src/components/Help.vue b/_assets/src/components/Help.vue
index bf05a64e..7e40622d 100644
--- a/_assets/src/components/Help.vue
+++ b/_assets/src/components/Help.vue
@@ -20,19 +20,12 @@
     </ul>
 
     <div>
-      <button type="submit" @click="close" class="ok">OK</button>
+      <button type="submit" @click="$store.commit('showHelp', false)" class="ok">OK</button>
     </div>
   </div>
 </template>
 
 <script>
-export default {
-  name: 'help',
-  methods: {
-    close: function (event) {
-      this.$store.commit('showHelp', false)
-    }
-  }
-}
+export default {name: 'help'}
 </script>
 
diff --git a/_assets/src/components/InfoButton.vue b/_assets/src/components/InfoButton.vue
index 0d821380..2f101e82 100644
--- a/_assets/src/components/InfoButton.vue
+++ b/_assets/src/components/InfoButton.vue
@@ -1,17 +1,10 @@
 <template>
-    <button @click="show" title="Info" aria-label="Info" class="action">
-        <i class="material-icons">info</i>
-        <span>Info</span>
-    </button>
+  <button title="Info" aria-label="Info" class="action" @click="$store.commit('showInfo', true)">
+    <i class="material-icons">info</i>
+    <span>Info</span>
+  </button>
 </template>
 
 <script>
-export default {
-  name: 'info-button',
-  methods: {
-    show: function (event) {
-      this.$store.commit('showInfo', true)
-    }
-  }
-}
+export default {name: 'info-button'}
 </script>
diff --git a/_assets/src/components/InfoPrompt.vue b/_assets/src/components/InfoPrompt.vue
index a9ab71e3..79884301 100644
--- a/_assets/src/components/InfoPrompt.vue
+++ b/_assets/src/components/InfoPrompt.vue
@@ -1,77 +1,77 @@
 <template>
-    <div class="prompt">
-        <h3>File Information</h3>
+  <div class="prompt">
+    <h3>File Information</h3>
 
-        <p v-show="selected.length > 1">{{ selected.length }} files selected.</p>
+    <p v-show="selected.length > 1">{{ selected.length }} files selected.</p>
 
-        <p v-show="selected.length < 2"><strong>Display Name:</strong> {{ name() }}</p>
-        <p><strong>Size:</strong> <span id="content_length"></span>{{ humanSize() }}</p>
-        <p v-show="selected.length < 2"><strong>Last Modified:</strong> {{ humanTime() }}</p>
+    <p v-show="selected.length < 2"><strong>Display Name:</strong> {{ name() }}</p>
+    <p><strong>Size:</strong> <span id="content_length"></span>{{ humanSize() }}</p>
+    <p v-show="selected.length < 2"><strong>Last Modified:</strong> {{ humanTime() }}</p>
 
-        <section v-show="dir() && selected.length === 0">
-          <p><strong>Number of files:</strong> {{ req.data.numFiles }}</p>
-          <p><strong>Number of directories:</strong> {{ req.data.numDirs }}</p>
-        </section>
+    <section v-show="dir() && selected.length === 0">
+      <p><strong>Number of files:</strong> {{ req.data.numFiles }}</p>
+      <p><strong>Number of directories:</strong> {{ req.data.numDirs }}</p>
+    </section>
 
-        <section v-show="!dir()">
-            <p><strong>MD5:</strong> <code><a @click="checksum($event, 'md5')">show</a></code></p>
-            <p><strong>SHA1:</strong> <code><a @click="checksum($event, 'sha1')">show</a></code></p>
-            <p><strong>SHA256:</strong> <code><a @click="checksum($event, 'sha256')">show</a></code></p>
-            <p><strong>SHA512:</strong> <code><a @click="checksum($event, 'sha512')">show</a></code></p>
-        </section>
+    <section v-show="!dir()">
+      <p><strong>MD5:</strong> <code><a @click="checksum($event, 'md5')">show</a></code></p>
+      <p><strong>SHA1:</strong> <code><a @click="checksum($event, 'sha1')">show</a></code></p>
+      <p><strong>SHA256:</strong> <code><a @click="checksum($event, 'sha256')">show</a></code></p>
+      <p><strong>SHA512:</strong> <code><a @click="checksum($event, 'sha512')">show</a></code></p>
+    </section>
 
-        <div>
-            <button type="submit" @click="close" class="ok">OK</button>
-        </div>
+    <div>
+      <button type="submit" @click="$store.commit('showInfo', false)" class="ok">OK</button>
     </div>
+  </div>
 </template>
 
 <script>
-import {mapState} from 'vuex'
+import {mapState, mapGetters} from 'vuex'
 import filesize from 'filesize'
 import moment from 'moment'
 
 export default {
   name: 'info-prompt',
-  data: function () {
-    return window.info
+  computed: {
+    ...mapState(['req', 'selected']),
+    ...mapGetters(['selectedCount'])
   },
-  computed: mapState(['req', 'selected']),
   methods: {
     humanSize: function () {
-      if (this.selected.length === 0 || this.req.kind !== 'listing') {
+      if (this.selectedCount === 0 || this.req.kind !== 'listing') {
         return filesize(this.req.data.size)
       }
 
       var sum = 0
 
-      for (let i = 0; i < this.selected.length; i++) {
+      for (let i = 0; i < this.selectedCount; i++) {
         sum += this.req.data.items[this.selected[i]].size
       }
 
       return filesize(sum)
     },
     humanTime: function () {
-      if (this.selected.length === 0) {
+      if (this.selectedCount === 0) {
         return moment(this.req.data.modified).fromNow()
       }
 
       return moment(this.req.data.items[this.selected[0]]).fromNow()
     },
     name: function () {
-      if (this.selected.length === 0) {
+      if (this.selectedCount === 0) {
         return this.req.data.name
       }
 
       return this.req.data.items[this.selected[0]].name
     },
     dir: function () {
-      if (this.selected.length > 1) {
+      if (this.selectedCount > 1) {
         // Don't show when multiple selected.
         return true
       }
 
-      if (this.selected.length === 0) {
+      if (this.selectedCount === 0) {
         return this.req.data.isDir
       }
 
@@ -83,7 +83,7 @@ export default {
       let request = new window.XMLHttpRequest()
       let link
 
-      if (this.selected.length) {
+      if (this.selectedCount) {
         link = this.req.data.items[this.selected[0]].url
       } else {
         link = window.location.pathname
@@ -102,9 +102,6 @@ export default {
 
       request.onerror = (e) => console.log(e)
       request.send()
-    },
-    close: function () {
-      this.$store.commit('showInfo', false)
     }
   }
 }
diff --git a/_assets/src/components/Listing.vue b/_assets/src/components/Listing.vue
index 2893f344..8b7e3059 100644
--- a/_assets/src/components/Listing.vue
+++ b/_assets/src/components/Listing.vue
@@ -1,84 +1,81 @@
 <template>
-    <div id="listing"
-      :class="req.data.display"
-      @drop="drop"
-      @dragenter="dragEnter"
-      @dragend="dragEnd">
+  <div id="listing"
+    :class="req.data.display"
+    @drop="drop"
+    @dragenter="dragEnter"
+    @dragend="dragEnd">
+    <div>
+      <div class="item header">
+        <div></div>
         <div>
-            <div class="item header">
-                <div></div>
-                <div>
-                    <p v-bind:class="{ active: req.data.sort === 'name' }" class="name"><span>Name</span>
-                        <a v-if="req.data.sort === 'name' && req.data.order != 'asc'" href="?sort=name&order=asc"><i class="material-icons">arrow_upward</i></a>
-                        <a v-else href="?sort=name&order=desc"><i class="material-icons">arrow_downward</i></a>
-                    </p>
+          <p v-bind:class="{ active: req.data.sort === 'name' }" class="name"><span>Name</span>
+            <a v-if="req.data.sort === 'name' && req.data.order != 'asc'" href="?sort=name&order=asc"><i class="material-icons">arrow_upward</i></a>
+            <a v-else href="?sort=name&order=desc"><i class="material-icons">arrow_downward</i></a>
+          </p>
 
-                    <p v-bind:class="{ active: req.data.sort === 'size' }" class="size"><span>Size</span>
-                        <a v-if="req.data.sort === 'size' && req.data.order != 'asc'" href="?sort=size&order=asc"><i class="material-icons">arrow_upward</i></a>
-                        <a v-else href="?sort=size&order=desc"><i class="material-icons">arrow_downward</i></a>
-                    </p>
+          <p v-bind:class="{ active: req.data.sort === 'size' }" class="size"><span>Size</span>
+            <a v-if="req.data.sort === 'size' && req.data.order != 'asc'" href="?sort=size&order=asc"><i class="material-icons">arrow_upward</i></a>
+            <a v-else href="?sort=size&order=desc"><i class="material-icons">arrow_downward</i></a>
+          </p>
 
-                    <p class="modified">Last modified</p>
-                </div>
-            </div>
-        </div>
-
-        <h2 v-if="(req.data.numDirs + req.data.numFiles) == 0" class="message">It feels lonely here :'(</h2>
-
-        <h2 v-if="req.data.numDirs > 0">Folders</h2>
-        <div v-if="req.data.numDirs > 0">
-          <item
-            v-for="(item, index) in req.data.items"
-            v-if="item.isDir"
-            :key="base64(item.name)"
-            v-bind:index="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>
-
-        <h2 v-if="req.data.numFiles > 0">Files</h2>
-        <div v-if="req.data.numFiles > 0">
-          <item
-            v-for="(item, index) in req.data.items"
-            v-if="!item.isDir"
-            :key="base64(item.name)"
-            v-bind:index="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>
-
-        <input style="display:none" type="file" id="upload-input" @change="uploadInput($event)" value="Upload" multiple>
-
-        <div v-show="$store.state.multiple" :class="{ active: $store.state.multiple }" id="multiple-selection">
-          <p>Multiple selection enabled</p>
-          <div @click="$store.commit('multiple', false)" tabindex="0" role="button" title="Clear" aria-label="Clear" class="action">
-            <i class="material-icons" title="Clear">clear</i>
-          </div>
+          <p class="modified">Last modified</p>
         </div>
+      </div>
     </div>
+
+    <h2 v-if="(req.data.numDirs + req.data.numFiles) == 0" class="message">It feels lonely here :'(</h2>
+
+    <h2 v-if="req.data.numDirs > 0">Folders</h2>
+    <div v-if="req.data.numDirs > 0">
+      <item v-for="(item, index) in req.data.items"
+        v-if="item.isDir"
+        :key="base64(item.name)"
+        v-bind:index="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>
+
+    <h2 v-if="req.data.numFiles > 0">Files</h2>
+    <div v-if="req.data.numFiles > 0">
+      <item v-for="(item, index) in req.data.items"
+        v-if="!item.isDir"
+        :key="base64(item.name)"
+        v-bind:index="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>
+
+    <input style="display:none" type="file" id="upload-input" @change="uploadInput($event)" value="Upload" multiple>
+
+    <div v-show="$store.state.multiple" :class="{ active: $store.state.multiple }" id="multiple-selection">
+    <p>Multiple selection enabled</p>
+      <div @click="$store.commit('multiple', false)" tabindex="0" role="button" title="Clear" aria-label="Clear" class="action">
+        <i class="material-icons" title="Clear">clear</i>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+import {mapState} from 'vuex'
 import Item from './ListingItem'
 import webdav from '../utils/webdav'
 import page from '../utils/page'
 
 export default {
   name: 'listing',
-  data: function () {
-    return window.info
-  },
   components: { Item },
+  computed: mapState(['req']),
   mounted: function () {
     document.addEventListener('dragover', function (event) {
       event.preventDefault()
@@ -98,11 +95,7 @@ export default {
       })
     },
     dragEnd: function (event) {
-      let items = document.getElementsByClassName('item')
-
-      Array.from(items).forEach(file => {
-        file.style.opacity = 1
-      })
+      this.resetOpacity()
     },
     drop: function (event) {
       event.preventDefault()
@@ -125,17 +118,22 @@ export default {
 
         this.handleFiles(files, '')
       } else {
-        let items = document.getElementsByClassName('item')
-
-        Array.from(items).forEach(file => {
-          file.style.opacity = 1
-        })
+        this.resetOpacity()
       }
     },
     uploadInput: function (event) {
       this.handleFiles(event.currentTarget.files, '')
     },
+    resetOpacity: function () {
+      let items = document.getElementsByClassName('item')
+
+      Array.from(items).forEach(file => {
+        file.style.opacity = 1
+      })
+    },
     handleFiles: function (files, base) {
+      this.resetOpacity()
+
       // buttons.setLoading('upload')
       let promises = []
 
@@ -144,14 +142,14 @@ export default {
       }
 
       Promise.all(promises)
-      .then(() => {
-        page.reload()
-        // buttons.setDone('upload')
-      })
-      .catch(e => {
-        console.log(e)
-        // buttons.setDone('upload', false)
-      })
+        .then(() => {
+          page.reload()
+          // buttons.setDone('upload')
+        })
+        .catch(e => {
+          console.log(e)
+          // buttons.setDone('upload', false)
+        })
 
       return false
     }
diff --git a/_assets/src/components/ListingItem.vue b/_assets/src/components/ListingItem.vue
index 39be42c9..64ded53d 100644
--- a/_assets/src/components/ListingItem.vue
+++ b/_assets/src/components/ListingItem.vue
@@ -1,31 +1,32 @@
 <template>
-    <div class="item"
-        draggable="true"
-        @dragstart="dragStart"
-        @dragover="dragOver"
-        @drop="drop"
-        @click="click"
-        @dblclick="open"
-        :id="base64()">
-        <div>
-            <i class="material-icons">{{ icon() }}</i>
-        </div>
-
-        <div>
-            <p class="name">{{ name }}</p>
-
-            <p v-if="isDir" class="size" data-order="-1">&mdash;</p>
-            <p v-else class="size" :data-order="humanSize()">{{ humanSize() }}</p>
-
-            <p class="modified">
-                <time :datetime="modified">{{ humanTime() }}</time>
-            </p>
-        </div>
+  <div class="item"
+  draggable="true"
+  @dragstart="dragStart"
+  @dragover="dragOver"
+  @drop="drop"
+  @click="click"
+  @dblclick="open"
+  :aria-selected="isSelected()"
+  :id="base64()">
+    <div>
+      <i class="material-icons">{{ icon() }}</i>
     </div>
+
+    <div>
+      <p class="name">{{ name }}</p>
+
+      <p v-if="isDir" class="size" data-order="-1">&mdash;</p>
+      <p v-else class="size" :data-order="humanSize()">{{ humanSize() }}</p>
+
+      <p class="modified">
+        <time :datetime="modified">{{ humanTime() }}</time>
+      </p>
+    </div>
+  </div>
 </template>
 
 <script>
-import { mapMutations, mapGetters } from 'vuex'
+import { mapMutations, mapGetters, mapState } from 'vuex'
 import filesize from 'filesize'
 import moment from 'moment'
 import webdav from '../utils/webdav.js'
@@ -34,9 +35,15 @@ import page from '../utils/page.js'
 export default {
   name: 'item',
   props: ['name', 'isDir', 'url', 'type', 'size', 'modified', 'index'],
+  computed: {
+    ...mapState(['selected', 'req']),
+    ...mapGetters(['selectedCount'])
+  },
   methods: {
-    ...mapGetters(['selectedCount']),
-    ...mapMutations(['addSelected', 'removeSelected']),
+    ...mapMutations(['addSelected', 'removeSelected', 'resetSelected']),
+    isSelected: function () {
+      return (this.selected.indexOf(this.index) !== -1)
+    },
     icon: function () {
       if (this.isDir) return 'folder'
       if (this.type === 'image') return 'insert_photo'
@@ -54,16 +61,9 @@ export default {
       return window.btoa(this.name)
     },
     dragStart: function (event) {
-      let el = event.target
-
-      for (let i = 0; i < 5; i++) {
-        if (!el.classList.contains('item')) {
-          el = el.parentElement
-        }
+      if (this.selectedCount === 0) {
+        this.addSelected(this.index)
       }
-
-      event.dataTransfer.setData('name', el.querySelector('.name').innerHTML)
-      event.dataTransfer.setData('obj-url', this.url)
     },
     dragOver: function (event) {
       if (!this.isDir) return
@@ -83,39 +83,31 @@ export default {
       if (!this.isDir) return
       event.preventDefault()
 
-      let url = event.dataTransfer.getData('obj-url')
-      let name = event.dataTransfer.getData('name')
+      if (this.selectedCount === 0) return
 
-      if (name === '' || url === '' || url === this.url) return
+      let promises = []
 
-      webdav.move(url, this.url + name)
+      for (let i of this.selected) {
+        let url = this.req.data.items[i].url
+        let name = this.req.data.items[i].name
+
+        promises.push(webdav.move(url, this.url + name))
+      }
+
+      Promise.all(promises)
         .then(() => page.reload())
         .catch(error => console.log(error))
     },
-    unselectAll: function () {
-      let items = document.getElementsByClassName('item')
-      Array.from(items).forEach(link => {
-        link.setAttribute('aria-selected', false)
-      })
-
-      this.$store.commit('resetSelected')
-      return false
-    },
     click: function (event) {
       if (this.selectedCount !== 0) event.preventDefault()
       if (this.$store.state.selected.indexOf(this.index) === -1) {
-        if (!event.ctrlKey && !this.$store.state.multiple) this.unselectAll()
+        if (!event.ctrlKey && !this.$store.state.multiple) this.resetSelected()
 
-        this.$el.setAttribute('aria-selected', true)
-        // WORKS: this.$store.commit('addSelected', this.index)
         this.addSelected(this.index)
       } else {
-        this.$el.setAttribute('aria-selected', false)
         this.removeSelected(this.index)
-        // WORKS: this.$store.commit('removeSelected', this.index)
       }
 
-      // this.handleSelectionChange()
       return false
     },
     open: function (event) {
diff --git a/_assets/src/components/MoveButton.vue b/_assets/src/components/MoveButton.vue
index 3b6c100b..2b626457 100644
--- a/_assets/src/components/MoveButton.vue
+++ b/_assets/src/components/MoveButton.vue
@@ -1,17 +1,10 @@
 <template>
-    <button @click="show" aria-label="Move" title="Move" class="action">
-        <i class="material-icons">forward</i>
-        <span>Move file</span>
-    </button>
+  <button @click="$store.commit('showMove', true)" aria-label="Move" title="Move" class="action">
+    <i class="material-icons">forward</i>
+    <span>Move file</span>
+  </button>
 </template>
 
 <script>
-export default {
-  name: 'move-button',
-  methods: {
-    show: function (event) {
-      this.$store.commit('showMove', true)
-    }
-  }
-}
+export default {name: 'move-button'}
 </script>
diff --git a/_assets/src/components/MovePrompt.vue b/_assets/src/components/MovePrompt.vue
index bfb162bb..957c0271 100644
--- a/_assets/src/components/MovePrompt.vue
+++ b/_assets/src/components/MovePrompt.vue
@@ -11,17 +11,16 @@
 
     <div>
       <button class="ok" @click="move">Move</button>
-      <button class="cancel" @click="cancel">Cancel</button>
+      <button class="cancel" @click="$store.commit('showMove', false)">Cancel</button>
     </div>
   </div>
 </template>
 
 <script>
+import { mapState } from 'vuex'
 import page from '../utils/page'
 import webdav from '../utils/webdav'
 
-var $ = window.info
-
 export default {
   name: 'move-prompt',
   data: function () {
@@ -30,16 +29,17 @@ export default {
       current: window.location.pathname
     }
   },
+  computed: mapState(['req', 'selected', 'baseURL']),
   mounted: function () {
-    if (window.location.pathname !== $.baseURL + '/') {
+    if (window.location.pathname !== this.baseURL + '/') {
       this.items.push({
         name: '..',
         url: page.removeLastDir(window.location.pathname) + '/'
       })
     }
 
-    if ($.req.kind === 'listing') {
-      for (let item of $.req.data.items) {
+    if (this.req.kind === 'listing') {
+      for (let item of this.req.data.items) {
         if (!item.isDir) continue
 
         this.items.push({
@@ -52,9 +52,6 @@ export default {
     }
   },
   methods: {
-    cancel: function (event) {
-      this.$store.commit('showMove', false)
-    },
     move: function (event) {
       event.preventDefault()
 
@@ -68,9 +65,9 @@ export default {
         dest = selected.dataset.url
       }
 
-      for (let item of $.selected) {
-        let from = $.req.data.items[item].url
-        let to = dest + '/' + $.req.data.items[item].name
+      for (let item of this.selected) {
+        let from = this.req.data.items[item].url
+        let to = dest + '/' + this.req.data.items[item].name
         to = to.replace('//', '/')
 
         promises.push(webdav.move(from, to))
@@ -95,7 +92,7 @@ export default {
           this.current = url
           this.items = []
 
-          if (url !== $.baseURL + '/') {
+          if (url !== this.baseURL + '/') {
             this.items.push({
               name: '..',
               url: page.removeLastDir(url) + '/'
diff --git a/_assets/src/components/NewDirPrompt.vue b/_assets/src/components/NewDirPrompt.vue
index 84e51bab..1157b8ee 100644
--- a/_assets/src/components/NewDirPrompt.vue
+++ b/_assets/src/components/NewDirPrompt.vue
@@ -5,7 +5,7 @@
     <input autofocus type="text" @keyup.enter="submit" v-model.trim="name">
     <div>
       <button class="ok" @click="submit">Create</button>
-      <button class="cancel" @click="cancel">Cancel</button>
+      <button class="cancel" @click="$store.commit('showNewDir', false)">Cancel</button>
     </div>
   </div>
 </template>
@@ -22,9 +22,6 @@ export default {
     }
   },
   methods: {
-    cancel: function () {
-      this.$store.commit('showNewDir', false)
-    },
     submit: function (event) {
       event.preventDefault()
       if (this.new === '') return
diff --git a/_assets/src/components/NewFilePrompt.vue b/_assets/src/components/NewFilePrompt.vue
index f42e6a3e..6604339f 100644
--- a/_assets/src/components/NewFilePrompt.vue
+++ b/_assets/src/components/NewFilePrompt.vue
@@ -5,7 +5,7 @@
     <input autofocus type="text" @keyup.enter="submit" v-model.trim="name">
     <div>
       <button class="ok" @click="submit">Create</button>
-      <button class="cancel" @click="cancel">Cancel</button>
+      <button class="cancel" @click="$store.commit('showNewFile', false)">Cancel</button>
     </div>
   </div>
 </template>
@@ -22,9 +22,6 @@ export default {
     }
   },
   methods: {
-    cancel: function () {
-      this.$store.commit('showNewFile', false)
-    },
     submit: function (event) {
       event.preventDefault()
       if (this.new === '') return
diff --git a/_assets/src/components/Preview.vue b/_assets/src/components/Preview.vue
index ed72f6fc..0494fd14 100644
--- a/_assets/src/components/Preview.vue
+++ b/_assets/src/components/Preview.vue
@@ -1,32 +1,35 @@
 <template>
-    <div id="previewer">
-        <div class="bar">
-            <button @click="back" class="action" aria-label="Close Preview" id="close">
-                <i class="material-icons">close</i>
-            </button>
+  <div id="previewer">
+    <div class="bar">
+      <button @click="back" class="action" aria-label="Close Preview" id="close">
+        <i class="material-icons">close</i>
+      </button>
 
-            <rename-button v-if="allowEdit()"></rename-button>
-            <delete-button v-if="allowEdit()"></delete-button>
-            <download-button></download-button>
-            <info-button></info-button>
-        </div>
-
-        <div class="preview">
-            <img v-if="type == 'image'" :src="raw()">
-            <audio v-else-if="type == 'audio'" :src="raw()" controls></audio>
-            <video v-else-if="type == 'video'" :src="raw()" controls>
-                Sorry, your browser doesn't support embedded videos,
-                but don't worry, you can <a href="?download=true">download it</a>
-                and watch it with your favorite video player!
-            </video>
-            <object v-else-if="extension == '.pdf'" class="pdf" :data="raw()"></object>
-            <a v-else-if="type == 'blob'" href="?download=true"><h2 class="message">Download <i class="material-icons">file_download</i></h2></a>
-            <pre v-else >{{ content }}</pre>
-        </div>
+      <rename-button v-if="allowEdit()"></rename-button>
+      <delete-button v-if="allowEdit()"></delete-button>
+      <download-button></download-button>
+      <info-button></info-button>
     </div>
+
+    <div class="preview">
+      <img v-if="req.data.type == 'image'" :src="raw()">
+      <audio v-else-if="req.data.type == 'audio'" :src="raw()" controls></audio>
+      <video v-else-if="req.data.type == 'video'" :src="raw()" controls>
+        Sorry, your browser doesn't support embedded videos,
+        but don't worry, you can <a href="?download=true">download it</a>
+        and watch it with your favorite video player!
+      </video>
+      <object v-else-if="req.data.extension == '.pdf'" class="pdf" :data="raw()"></object>
+      <a v-else-if="req.data.type == 'blob'" href="?download=true">
+        <h2 class="message">Download <i class="material-icons">file_download</i></h2>
+      </a>
+      <pre v-else >{{ req.data.content }}</pre>
+    </div>
+  </div>
 </template>
 
 <script>
+import { mapState } from 'vuex'
 import page from '../utils/page'
 import InfoButton from './InfoButton'
 import DeleteButton from './DeleteButton'
@@ -41,19 +44,17 @@ export default {
     RenameButton,
     DownloadButton
   },
-  data: function () {
-    return window.info.req.data
-  },
+  computed: mapState(['req']),
   methods: {
     raw: function () {
-      return this.url + '?raw=true'
+      return this.req.data.url + '?raw=true'
     },
     back: function (event) {
       let url = page.removeLastDir(window.location.pathname)
       page.open(url)
     },
     allowEdit: function (event) {
-      return window.info.user.allowEdit
+      return this.$store.state.user.allowEdit
     }
   }
 }
diff --git a/_assets/src/components/RenameButton.vue b/_assets/src/components/RenameButton.vue
index db8bb44d..5c753091 100644
--- a/_assets/src/components/RenameButton.vue
+++ b/_assets/src/components/RenameButton.vue
@@ -1,17 +1,10 @@
 <template>
-    <button @click="show" aria-label="Rename" title="Rename" class="action">
-        <i class="material-icons">mode_edit</i>
-        <span>Rename</span>
-    </button>
+  <button @click="$store.commit('showRename', true)" aria-label="Rename" title="Rename" class="action">
+    <i class="material-icons">mode_edit</i>
+    <span>Rename</span>
+  </button>
 </template>
 
 <script>
-export default {
-  name: 'rename-button',
-  methods: {
-    show: function (event) {
-      this.$store.commit('showRename', true)
-    }
-  }
-}
+export default {name: 'rename-button'}
 </script>
diff --git a/_assets/src/components/RenamePrompt.vue b/_assets/src/components/RenamePrompt.vue
index 40752495..b46c1e16 100644
--- a/_assets/src/components/RenamePrompt.vue
+++ b/_assets/src/components/RenamePrompt.vue
@@ -11,11 +11,10 @@
 </template>
 
 <script>
+import { mapState } from 'vuex'
 import page from '../utils/page'
 import webdav from '../utils/webdav'
 
-var $ = window.info
-
 export default {
   name: 'rename-prompt',
   data: function () {
@@ -23,30 +22,31 @@ export default {
       name: ''
     }
   },
+  computed: mapState(['req', 'selected', 'selectedCount']),
   methods: {
     cancel: function (event) {
       this.$store.commit('showRename', false)
     },
     oldName: function () {
-      if ($.req.kind !== 'listing') {
-        return $.req.data.name
+      if (this.req.kind !== 'listing') {
+        return this.req.data.name
       }
 
-      if ($.selected.length === 0 || $.selected.length > 1) {
+      if (this.selectedCount === 0 || this.selectedCount > 1) {
         // This shouldn't happen.
         return
       }
 
-      return $.req.data.items[$.selected[0]].name
+      return this.req.data.items[this.selected[0]].name
     },
     submit: function (event) {
       let oldLink = ''
       let newLink = ''
 
-      if ($.req.kind !== 'listing') {
-        oldLink = $.req.data.url
+      if (this.req.kind !== 'listing') {
+        oldLink = this.req.data.url
       } else {
-        oldLink = $.req.data.items[$.selected[0]].url
+        oldLink = this.req.data.items[this.selected[0]].url
       }
 
       newLink = page.removeLastDir(oldLink) + '/' + this.name
@@ -55,7 +55,7 @@ export default {
 
       webdav.move(oldLink, newLink)
         .then(() => {
-          if ($.req.kind !== 'listing') {
+          if (this.req.kind !== 'listing') {
             page.open(newLink)
             return
           }
@@ -67,7 +67,6 @@ export default {
           console.log(error)
         })
 
-      this.name = ''
       this.$store.commit('showRename', false)
       return
     }
diff --git a/_assets/src/components/SwitchViewButton.vue b/_assets/src/components/SwitchViewButton.vue
index 2a48427f..f9f98aee 100644
--- a/_assets/src/components/SwitchViewButton.vue
+++ b/_assets/src/components/SwitchViewButton.vue
@@ -6,21 +6,18 @@
 </template>
 
 <script>
-import page from '../utils/page'
-
 export default {
   name: 'switch-button',
   methods: {
     change: function (event) {
-      let url = window.location.pathname + '?display='
+      let display = 'mosaic'
 
       if (this.$store.state.req.data.display === 'mosaic') {
-        url += 'list'
-      } else {
-        url += 'mosaic'
+        display = 'list'
       }
 
-      page.open(url)
+      this.$store.commit('listingDisplay', display)
+      document.cookie = `display=${display}; max-age=31536000; path=${this.$store.state.baseURL}`
     },
     icon: function () {
       if (this.$store.state.req.data.display === 'mosaic') return 'view_list'
diff --git a/_assets/src/components/UploadButton.vue b/_assets/src/components/UploadButton.vue
index 551fd072..83d504e2 100644
--- a/_assets/src/components/UploadButton.vue
+++ b/_assets/src/components/UploadButton.vue
@@ -1,8 +1,8 @@
 <template>
-    <button @click="upload" aria-label="Upload" title="Upload" class="action">
-        <i class="material-icons">file_upload</i>
-        <span>Upload</span>
-    </button>
+  <button @click="upload" aria-label="Upload" title="Upload" class="action">
+    <i class="material-icons">file_upload</i>
+    <span>Upload</span>
+  </button>
 </template>
 
 <script>
diff --git a/_assets/src/store/mutations.js b/_assets/src/store/mutations.js
index e1e64db5..e9c0edab 100644
--- a/_assets/src/store/mutations.js
+++ b/_assets/src/store/mutations.js
@@ -27,6 +27,9 @@ const mutations = {
   resetSelected: (state) => {
     state.selected = []
   },
+  listingDisplay: (state, value) => {
+    state.req.data.display = value
+  },
   updateRequest: (state, value) => {
     state.req.kind = value.kind
     state.req.data = value.data
diff --git a/serve.go b/serve.go
index 11e1e0c8..72264c36 100644
--- a/serve.go
+++ b/serve.go
@@ -90,6 +90,7 @@ func displayMode(w http.ResponseWriter, r *http.Request, scope string) string {
 	http.SetCookie(w, &http.Cookie{
 		Name:   "display",
 		Value:  displayMode,
+		MaxAge: 31536000,
 		Path:   scope,
 		Secure: r.TLS != nil,
 	})
@@ -115,6 +116,7 @@ func handleSortOrder(w http.ResponseWriter, r *http.Request, scope string) (sort
 		http.SetCookie(w, &http.Cookie{
 			Name:   "sort",
 			Value:  sort,
+			MaxAge: 31536000,
 			Path:   scope,
 			Secure: r.TLS != nil,
 		})
@@ -130,6 +132,7 @@ func handleSortOrder(w http.ResponseWriter, r *http.Request, scope string) (sort
 		http.SetCookie(w, &http.Cookie{
 			Name:   "order",
 			Value:  order,
+			MaxAge: 31536000,
 			Path:   scope,
 			Secure: r.TLS != nil,
 		})