From 97d500028ace1af5eb38d9df91a0553a02366719 Mon Sep 17 00:00:00 2001
From: Milos Holba <milosholba78@gmail.com>
Date: Mon, 7 Dec 2020 14:23:29 +0100
Subject: [PATCH] grid and list view working

---
 public/mix-manifest.json                      | 130 ++++++++++++++-
 .../FilesView/SortingAndPreview.vue           | 151 +++++++++++-------
 resources/js/helpers.js                       |   7 +
 resources/js/i18n/lang/en.json                |   6 +
 resources/js/store/modules/app.js             |   5 +-
 5 files changed, 234 insertions(+), 65 deletions(-)

diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index f50a6f6a..80d06cf5 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -29,7 +29,7 @@
     "/chunks/environment-setup.js": "/chunks/environment-setup.js?id=826fbaa6cc4acab69f5d",
     "/chunks/files.js": "/chunks/files.js?id=35936c1c34e3290a6072",
     "/chunks/files~chunks/settings-subscription~chunks/shared-files~chunks/shared-page~chunks/user-subscription.js": "/chunks/files~chunks/settings-subscription~chunks/shared-files~chunks/shared-page~chunks/user-subscription.js?id=8ccd35de575e8a91d02f",
-    "/chunks/files~chunks/shared-files.js": "/chunks/files~chunks/shared-files.js?id=e3f94330e7fa1ea4d2cd",
+    "/chunks/files~chunks/shared-files.js": "/chunks/files~chunks/shared-files.js?id=205b1471a2b6c64bb62e",
     "/chunks/files~chunks/shared-files~chunks/shared-page.js": "/chunks/files~chunks/shared-files~chunks/shared-page.js?id=3da426c9859661354250",
     "/chunks/files~chunks/shared-page.js": "/chunks/files~chunks/shared-page.js?id=ed167949ea9398f0fbeb",
     "/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=aba8c662fbc234892216",
@@ -75,5 +75,131 @@
     "/chunks/user-password.js": "/chunks/user-password.js?id=b036eeaa5ef8e798f6dd",
     "/chunks/user-storage.js": "/chunks/user-storage.js?id=a99910f95c3e39caa78b",
     "/chunks/user-subscription.js": "/chunks/user-subscription.js?id=e8ea1e67f9ac0a835ed0",
-    "/chunks/users.js": "/chunks/users.js?id=aba8837f40fbb79f99b4"
+    "/chunks/users.js": "/chunks/users.js?id=aba8837f40fbb79f99b4",
+    "/chunks/files~chunks/shared-files.8522e638351d8516da0e.hot-update.js": "/chunks/files~chunks/shared-files.8522e638351d8516da0e.hot-update.js",
+    "/chunks/files~chunks/shared-files.3e1a478ca980359abb11.hot-update.js": "/chunks/files~chunks/shared-files.3e1a478ca980359abb11.hot-update.js",
+    "/chunks/files~chunks/shared-files.c12f2dbb3cdcad08a627.hot-update.js": "/chunks/files~chunks/shared-files.c12f2dbb3cdcad08a627.hot-update.js",
+    "/chunks/files~chunks/shared-files.de786bd8a7bd8227ac60.hot-update.js": "/chunks/files~chunks/shared-files.de786bd8a7bd8227ac60.hot-update.js",
+    "/chunks/files~chunks/shared-files.9f5179c68ce5591cb93c.hot-update.js": "/chunks/files~chunks/shared-files.9f5179c68ce5591cb93c.hot-update.js",
+    "/chunks/files~chunks/shared-files.9e75cd2c0acd42845421.hot-update.js": "/chunks/files~chunks/shared-files.9e75cd2c0acd42845421.hot-update.js",
+    "/chunks/files~chunks/shared-files.ab75338c30faf2aeed23.hot-update.js": "/chunks/files~chunks/shared-files.ab75338c30faf2aeed23.hot-update.js",
+    "/chunks/files~chunks/shared-files.a83787966e51b679ba38.hot-update.js": "/chunks/files~chunks/shared-files.a83787966e51b679ba38.hot-update.js",
+    "/chunks/files~chunks/shared-files.0052820d4166b7886b19.hot-update.js": "/chunks/files~chunks/shared-files.0052820d4166b7886b19.hot-update.js",
+    "/chunks/files~chunks/shared-files.71b8f12ab70455cd696e.hot-update.js": "/chunks/files~chunks/shared-files.71b8f12ab70455cd696e.hot-update.js",
+    "/chunks/files~chunks/shared-files.8f19bed54b9916ce3a13.hot-update.js": "/chunks/files~chunks/shared-files.8f19bed54b9916ce3a13.hot-update.js",
+    "/chunks/files~chunks/shared-files.c2d8d55e51d64c7272d7.hot-update.js": "/chunks/files~chunks/shared-files.c2d8d55e51d64c7272d7.hot-update.js",
+    "/chunks/files~chunks/shared-files.88a58daa2f3907bdb968.hot-update.js": "/chunks/files~chunks/shared-files.88a58daa2f3907bdb968.hot-update.js",
+    "/chunks/files~chunks/shared-files.370d4f321ee654f8e5eb.hot-update.js": "/chunks/files~chunks/shared-files.370d4f321ee654f8e5eb.hot-update.js",
+    "/chunks/files~chunks/shared-files.4d78e5e880e038086246.hot-update.js": "/chunks/files~chunks/shared-files.4d78e5e880e038086246.hot-update.js",
+    "/chunks/files~chunks/shared-files.efbfbe9909ea9f5d139e.hot-update.js": "/chunks/files~chunks/shared-files.efbfbe9909ea9f5d139e.hot-update.js",
+    "/chunks/files~chunks/shared-files.ebc66e6561813973324a.hot-update.js": "/chunks/files~chunks/shared-files.ebc66e6561813973324a.hot-update.js",
+    "/chunks/files~chunks/shared-files.a1d7d0ff1ee18461acdb.hot-update.js": "/chunks/files~chunks/shared-files.a1d7d0ff1ee18461acdb.hot-update.js",
+    "/chunks/files~chunks/shared-files.b9493f037e98129bbce0.hot-update.js": "/chunks/files~chunks/shared-files.b9493f037e98129bbce0.hot-update.js",
+    "/chunks/files~chunks/shared-files.88dcde97110fa78b5391.hot-update.js": "/chunks/files~chunks/shared-files.88dcde97110fa78b5391.hot-update.js",
+    "/chunks/files~chunks/shared-files.a04c329d7842768f1e9d.hot-update.js": "/chunks/files~chunks/shared-files.a04c329d7842768f1e9d.hot-update.js",
+    "/chunks/files~chunks/shared-files.55ec9d3b0c3e6071a81f.hot-update.js": "/chunks/files~chunks/shared-files.55ec9d3b0c3e6071a81f.hot-update.js",
+    "/chunks/files~chunks/shared-files.271772878b08e97b70c2.hot-update.js": "/chunks/files~chunks/shared-files.271772878b08e97b70c2.hot-update.js",
+    "/chunks/files~chunks/shared-files.6f30cd09c165c869034a.hot-update.js": "/chunks/files~chunks/shared-files.6f30cd09c165c869034a.hot-update.js",
+    "/chunks/files~chunks/shared-files.2f0bfac65bc8c72b42f9.hot-update.js": "/chunks/files~chunks/shared-files.2f0bfac65bc8c72b42f9.hot-update.js",
+    "/chunks/files~chunks/shared-files.6ff2bea63861f01e871d.hot-update.js": "/chunks/files~chunks/shared-files.6ff2bea63861f01e871d.hot-update.js",
+    "/chunks/files~chunks/shared-files.53f6819cf826df4bb549.hot-update.js": "/chunks/files~chunks/shared-files.53f6819cf826df4bb549.hot-update.js",
+    "/chunks/files~chunks/shared-files.988458f1c4151990901d.hot-update.js": "/chunks/files~chunks/shared-files.988458f1c4151990901d.hot-update.js",
+    "/chunks/files~chunks/shared-files.83a60d7be932741d7f6f.hot-update.js": "/chunks/files~chunks/shared-files.83a60d7be932741d7f6f.hot-update.js",
+    "/chunks/files~chunks/shared-files.bebe6f6806b3fc554027.hot-update.js": "/chunks/files~chunks/shared-files.bebe6f6806b3fc554027.hot-update.js",
+    "/chunks/files~chunks/shared-files.f00c2677574e41148437.hot-update.js": "/chunks/files~chunks/shared-files.f00c2677574e41148437.hot-update.js",
+    "/chunks/files~chunks/shared-files.b525ba1fe386797ddec7.hot-update.js": "/chunks/files~chunks/shared-files.b525ba1fe386797ddec7.hot-update.js",
+    "/chunks/files~chunks/shared-files.6cd28ab66dcbca220eda.hot-update.js": "/chunks/files~chunks/shared-files.6cd28ab66dcbca220eda.hot-update.js",
+    "/chunks/files~chunks/shared-files.a4eddcc30d4f92c10fa9.hot-update.js": "/chunks/files~chunks/shared-files.a4eddcc30d4f92c10fa9.hot-update.js",
+    "/chunks/files~chunks/shared-files.0f62d7d233619ba17a89.hot-update.js": "/chunks/files~chunks/shared-files.0f62d7d233619ba17a89.hot-update.js",
+    "/chunks/files~chunks/shared-files.7130e2247baf513988aa.hot-update.js": "/chunks/files~chunks/shared-files.7130e2247baf513988aa.hot-update.js",
+    "/chunks/files~chunks/shared-files.900a4cceb16a46e55446.hot-update.js": "/chunks/files~chunks/shared-files.900a4cceb16a46e55446.hot-update.js",
+    "/chunks/files~chunks/shared-files.c454bd334d68a7b3a8d3.hot-update.js": "/chunks/files~chunks/shared-files.c454bd334d68a7b3a8d3.hot-update.js",
+    "/js/main.7ded2055a6c9f4f8d5ed.hot-update.js": "/js/main.7ded2055a6c9f4f8d5ed.hot-update.js",
+    "/chunks/files.7ded2055a6c9f4f8d5ed.hot-update.js": "/chunks/files.7ded2055a6c9f4f8d5ed.hot-update.js",
+    "/chunks/shared-files.7ded2055a6c9f4f8d5ed.hot-update.js": "/chunks/shared-files.7ded2055a6c9f4f8d5ed.hot-update.js",
+    "/chunks/files.95f0a9865b411fc47d14.hot-update.js": "/chunks/files.95f0a9865b411fc47d14.hot-update.js",
+    "/chunks/shared-files.95f0a9865b411fc47d14.hot-update.js": "/chunks/shared-files.95f0a9865b411fc47d14.hot-update.js",
+    "/chunks/files.62f9af6950b3b49def84.hot-update.js": "/chunks/files.62f9af6950b3b49def84.hot-update.js",
+    "/chunks/shared-files.62f9af6950b3b49def84.hot-update.js": "/chunks/shared-files.62f9af6950b3b49def84.hot-update.js",
+    "/chunks/files.b76c4c0a685d17399158.hot-update.js": "/chunks/files.b76c4c0a685d17399158.hot-update.js",
+    "/chunks/shared-files.b76c4c0a685d17399158.hot-update.js": "/chunks/shared-files.b76c4c0a685d17399158.hot-update.js",
+    "/chunks/files.c1572cf3b8b9fb55f344.hot-update.js": "/chunks/files.c1572cf3b8b9fb55f344.hot-update.js",
+    "/chunks/shared-files.c1572cf3b8b9fb55f344.hot-update.js": "/chunks/shared-files.c1572cf3b8b9fb55f344.hot-update.js",
+    "/chunks/files.6c8a9eb18de10dd5c77e.hot-update.js": "/chunks/files.6c8a9eb18de10dd5c77e.hot-update.js",
+    "/chunks/shared-files.6c8a9eb18de10dd5c77e.hot-update.js": "/chunks/shared-files.6c8a9eb18de10dd5c77e.hot-update.js",
+    "/js/main.165e788b01a3d3c2ba1e.hot-update.js": "/js/main.165e788b01a3d3c2ba1e.hot-update.js",
+    "/chunks/files.165e788b01a3d3c2ba1e.hot-update.js": "/chunks/files.165e788b01a3d3c2ba1e.hot-update.js",
+    "/chunks/shared-files.165e788b01a3d3c2ba1e.hot-update.js": "/chunks/shared-files.165e788b01a3d3c2ba1e.hot-update.js",
+    "/chunks/files~chunks/shared-files.001d2bc420261e7876c1.hot-update.js": "/chunks/files~chunks/shared-files.001d2bc420261e7876c1.hot-update.js",
+    "/chunks/files~chunks/shared-files.a531a9b296ccbf99e61d.hot-update.js": "/chunks/files~chunks/shared-files.a531a9b296ccbf99e61d.hot-update.js",
+    "/chunks/files~chunks/shared-files.508a592642995c11d91e.hot-update.js": "/chunks/files~chunks/shared-files.508a592642995c11d91e.hot-update.js",
+    "/chunks/files~chunks/shared-files.ad37ecb9adf47521dc5d.hot-update.js": "/chunks/files~chunks/shared-files.ad37ecb9adf47521dc5d.hot-update.js",
+    "/chunks/files~chunks/shared-files.fded1e5ae8653fb88727.hot-update.js": "/chunks/files~chunks/shared-files.fded1e5ae8653fb88727.hot-update.js",
+    "/chunks/files~chunks/shared-files.c570444dd7b2be4f651e.hot-update.js": "/chunks/files~chunks/shared-files.c570444dd7b2be4f651e.hot-update.js",
+    "/chunks/files~chunks/shared-files.044fd2a8f287d36c0719.hot-update.js": "/chunks/files~chunks/shared-files.044fd2a8f287d36c0719.hot-update.js",
+    "/chunks/files~chunks/shared-files.8d3d07be74dae5782de8.hot-update.js": "/chunks/files~chunks/shared-files.8d3d07be74dae5782de8.hot-update.js",
+    "/chunks/files~chunks/shared-files.49ab2030f523c7d72bd6.hot-update.js": "/chunks/files~chunks/shared-files.49ab2030f523c7d72bd6.hot-update.js",
+    "/chunks/files~chunks/shared-files.182e79b167a8ef805cdb.hot-update.js": "/chunks/files~chunks/shared-files.182e79b167a8ef805cdb.hot-update.js",
+    "/chunks/files~chunks/shared-files.3c4ebe5046bf01192c32.hot-update.js": "/chunks/files~chunks/shared-files.3c4ebe5046bf01192c32.hot-update.js",
+    "/chunks/files~chunks/shared-files.389350473d38df4884cd.hot-update.js": "/chunks/files~chunks/shared-files.389350473d38df4884cd.hot-update.js",
+    "/chunks/files~chunks/shared-files.271846e2f7aad9a300f7.hot-update.js": "/chunks/files~chunks/shared-files.271846e2f7aad9a300f7.hot-update.js",
+    "/chunks/files~chunks/shared-files.3c253f2a693ec43da96d.hot-update.js": "/chunks/files~chunks/shared-files.3c253f2a693ec43da96d.hot-update.js",
+    "/chunks/files~chunks/shared-files.f30dc43ba42ad96d889e.hot-update.js": "/chunks/files~chunks/shared-files.f30dc43ba42ad96d889e.hot-update.js",
+    "/chunks/files~chunks/shared-files.febae7c6814043cb6077.hot-update.js": "/chunks/files~chunks/shared-files.febae7c6814043cb6077.hot-update.js",
+    "/chunks/files~chunks/shared-files.e003f5c9d32df97ff7fb.hot-update.js": "/chunks/files~chunks/shared-files.e003f5c9d32df97ff7fb.hot-update.js",
+    "/chunks/files~chunks/shared-files.dcc7f38c63466192ae94.hot-update.js": "/chunks/files~chunks/shared-files.dcc7f38c63466192ae94.hot-update.js",
+    "/chunks/files~chunks/shared-files.18881674ffc749173b46.hot-update.js": "/chunks/files~chunks/shared-files.18881674ffc749173b46.hot-update.js",
+    "/chunks/files~chunks/shared-files.6db50a59e1a296a848fc.hot-update.js": "/chunks/files~chunks/shared-files.6db50a59e1a296a848fc.hot-update.js",
+    "/chunks/files~chunks/shared-files.9885b90b462d35072d34.hot-update.js": "/chunks/files~chunks/shared-files.9885b90b462d35072d34.hot-update.js",
+    "/chunks/files~chunks/shared-files.ec1953679afafc291d64.hot-update.js": "/chunks/files~chunks/shared-files.ec1953679afafc291d64.hot-update.js",
+    "/chunks/files~chunks/shared-files.5708428d591752ea4510.hot-update.js": "/chunks/files~chunks/shared-files.5708428d591752ea4510.hot-update.js",
+    "/chunks/files~chunks/shared-files.c9eeadf5f56753c9a9fc.hot-update.js": "/chunks/files~chunks/shared-files.c9eeadf5f56753c9a9fc.hot-update.js",
+    "/chunks/files~chunks/shared-files.a93b4d66f898dbeb898f.hot-update.js": "/chunks/files~chunks/shared-files.a93b4d66f898dbeb898f.hot-update.js",
+    "/chunks/files~chunks/shared-files.aaf0fcfd87b3d53637a4.hot-update.js": "/chunks/files~chunks/shared-files.aaf0fcfd87b3d53637a4.hot-update.js",
+    "/chunks/files~chunks/shared-files.159d4f5524775999662b.hot-update.js": "/chunks/files~chunks/shared-files.159d4f5524775999662b.hot-update.js",
+    "/chunks/files~chunks/shared-files.76ec63ec9f2565343a2b.hot-update.js": "/chunks/files~chunks/shared-files.76ec63ec9f2565343a2b.hot-update.js",
+    "/chunks/files~chunks/shared-files.b4ebafc1f624b16478ec.hot-update.js": "/chunks/files~chunks/shared-files.b4ebafc1f624b16478ec.hot-update.js",
+    "/chunks/files~chunks/shared-files.c42c54f8214226252605.hot-update.js": "/chunks/files~chunks/shared-files.c42c54f8214226252605.hot-update.js",
+    "/chunks/files~chunks/shared-files.f763ed8a4a5c4b795799.hot-update.js": "/chunks/files~chunks/shared-files.f763ed8a4a5c4b795799.hot-update.js",
+    "/js/main.be2cd305db8cec557b38.hot-update.js": "/js/main.be2cd305db8cec557b38.hot-update.js",
+    "/js/main.97e6b9e99aa7080af5bd.hot-update.js": "/js/main.97e6b9e99aa7080af5bd.hot-update.js",
+    "/js/main.db222f7fae154e4440a6.hot-update.js": "/js/main.db222f7fae154e4440a6.hot-update.js",
+    "/js/main.373e8adb3f00aa70a589.hot-update.js": "/js/main.373e8adb3f00aa70a589.hot-update.js",
+    "/js/main.23f8ff170bb775101cf2.hot-update.js": "/js/main.23f8ff170bb775101cf2.hot-update.js",
+    "/js/main.e351a4adcd06a837391b.hot-update.js": "/js/main.e351a4adcd06a837391b.hot-update.js",
+    "/chunks/files~chunks/shared-files.a146da081ab879ea4ad2.hot-update.js": "/chunks/files~chunks/shared-files.a146da081ab879ea4ad2.hot-update.js",
+    "/chunks/files~chunks/shared-files.9468455998c02fdb08f4.hot-update.js": "/chunks/files~chunks/shared-files.9468455998c02fdb08f4.hot-update.js",
+    "/chunks/files~chunks/shared-files.d41114f3dcd458090b0b.hot-update.js": "/chunks/files~chunks/shared-files.d41114f3dcd458090b0b.hot-update.js",
+    "/chunks/files~chunks/shared-files.01e349c8b35898cdf3de.hot-update.js": "/chunks/files~chunks/shared-files.01e349c8b35898cdf3de.hot-update.js",
+    "/js/main.2c678b7027140baeb756.hot-update.js": "/js/main.2c678b7027140baeb756.hot-update.js",
+    "/chunks/files~chunks/shared-files.1a440a62bca64101e8de.hot-update.js": "/chunks/files~chunks/shared-files.1a440a62bca64101e8de.hot-update.js",
+    "/chunks/files~chunks/shared-files.8014858fc1307bdef880.hot-update.js": "/chunks/files~chunks/shared-files.8014858fc1307bdef880.hot-update.js",
+    "/chunks/files~chunks/shared-files.a09dd0aebbf5407ad898.hot-update.js": "/chunks/files~chunks/shared-files.a09dd0aebbf5407ad898.hot-update.js",
+    "/chunks/files~chunks/shared-files.5c9d0442863ffe808c3b.hot-update.js": "/chunks/files~chunks/shared-files.5c9d0442863ffe808c3b.hot-update.js",
+    "/chunks/files~chunks/shared-files.db83f0baf27970b4bddc.hot-update.js": "/chunks/files~chunks/shared-files.db83f0baf27970b4bddc.hot-update.js",
+    "/chunks/files~chunks/shared-files.698479cecf46d62fc9d5.hot-update.js": "/chunks/files~chunks/shared-files.698479cecf46d62fc9d5.hot-update.js",
+    "/chunks/files~chunks/shared-files.38c6278a75dbfd6e275d.hot-update.js": "/chunks/files~chunks/shared-files.38c6278a75dbfd6e275d.hot-update.js",
+    "/chunks/files~chunks/shared-files.a9f83ec856565f6d4a39.hot-update.js": "/chunks/files~chunks/shared-files.a9f83ec856565f6d4a39.hot-update.js",
+    "/chunks/files~chunks/shared-files.3c7f0044097dc2b58f68.hot-update.js": "/chunks/files~chunks/shared-files.3c7f0044097dc2b58f68.hot-update.js",
+    "/chunks/files~chunks/shared-files.7dd0f1f3ed1c41a8adb6.hot-update.js": "/chunks/files~chunks/shared-files.7dd0f1f3ed1c41a8adb6.hot-update.js",
+    "/chunks/files~chunks/shared-files.f59d1cef6f15e3fcfa18.hot-update.js": "/chunks/files~chunks/shared-files.f59d1cef6f15e3fcfa18.hot-update.js",
+    "/chunks/files~chunks/shared-files.a950c56c933891f733c3.hot-update.js": "/chunks/files~chunks/shared-files.a950c56c933891f733c3.hot-update.js",
+    "/chunks/files~chunks/shared-files.9376dbb4387e943662d5.hot-update.js": "/chunks/files~chunks/shared-files.9376dbb4387e943662d5.hot-update.js",
+    "/chunks/files~chunks/shared-files.a51f5af10cd4e7d7d9e2.hot-update.js": "/chunks/files~chunks/shared-files.a51f5af10cd4e7d7d9e2.hot-update.js",
+    "/chunks/files~chunks/shared-files.d129158b6022f79765f3.hot-update.js": "/chunks/files~chunks/shared-files.d129158b6022f79765f3.hot-update.js",
+    "/js/main.8f030ce3ca95b1603be5.hot-update.js": "/js/main.8f030ce3ca95b1603be5.hot-update.js",
+    "/chunks/files~chunks/shared-files.ecf4ab3e6158691dafa9.hot-update.js": "/chunks/files~chunks/shared-files.ecf4ab3e6158691dafa9.hot-update.js",
+    "/js/main.2f51c89a078b8f0b32f1.hot-update.js": "/js/main.2f51c89a078b8f0b32f1.hot-update.js",
+    "/js/main.033e136218c2c6192c53.hot-update.js": "/js/main.033e136218c2c6192c53.hot-update.js",
+    "/js/main.c29d9c361fa178de55d1.hot-update.js": "/js/main.c29d9c361fa178de55d1.hot-update.js",
+    "/js/main.4c763269df531d44e37a.hot-update.js": "/js/main.4c763269df531d44e37a.hot-update.js",
+    "/js/main.437f891722b0f78398d0.hot-update.js": "/js/main.437f891722b0f78398d0.hot-update.js",
+    "/js/main.6fa035fe2746ab43d984.hot-update.js": "/js/main.6fa035fe2746ab43d984.hot-update.js",
+    "/js/main.ae956c70780e038451f2.hot-update.js": "/js/main.ae956c70780e038451f2.hot-update.js",
+    "/js/main.f5a0eaacfe1d78a952f2.hot-update.js": "/js/main.f5a0eaacfe1d78a952f2.hot-update.js",
+    "/js/main.a23073ed24e6e5de1f9c.hot-update.js": "/js/main.a23073ed24e6e5de1f9c.hot-update.js",
+    "/js/main.de19644d95cc9caee43e.hot-update.js": "/js/main.de19644d95cc9caee43e.hot-update.js",
+    "/js/main.f0fc86b61f2d2ede77bc.hot-update.js": "/js/main.f0fc86b61f2d2ede77bc.hot-update.js",
+    "/js/main.173c10a7b1d8f3eddcfc.hot-update.js": "/js/main.173c10a7b1d8f3eddcfc.hot-update.js",
+    "/js/main.d481fca69b254965fa0d.hot-update.js": "/js/main.d481fca69b254965fa0d.hot-update.js"
 }
diff --git a/resources/js/components/FilesView/SortingAndPreview.vue b/resources/js/components/FilesView/SortingAndPreview.vue
index 64e68633..2ab814dd 100644
--- a/resources/js/components/FilesView/SortingAndPreview.vue
+++ b/resources/js/components/FilesView/SortingAndPreview.vue
@@ -1,22 +1,28 @@
 <template>
-    <div  v-if="isVisible" @click="close" class="sorting-preview" ref="contextmenu" >
-       
+     <div v-if="isVisible"  class="sorting-preview" >
+
         <div class="menu-options" id="menu-list">
             <ul class="menu-option-group">
-                <li class="menu-option" >
+                <li class="menu-option" @click="changePreview('grid')" >
                     <div class="icon">
                         <grid-icon size="17"/>
                     </div>
                     <div class="text-label">
-                       Grid View
+                      {{$t('preview_sorting.grid_view')}}
+                    </div>
+                    <div class="show-icon" v-if="isGrid">
+                        <check-icon size="17"/>
                     </div>
                 </li>
-                <li class="menu-option"> 
+                <li class="menu-option" @click="changePreview('list')"> 
                     <div class="icon">
                         <list-icon size="17"/>
                     </div>
                     <div class="text-label">
-                        List View
+                        {{$t('preview_sorting.list_view')}}
+                    </div>
+                    <div class="show-icon" v-if="isList">
+                        <check-icon size="17"/>
                     </div>
                 </li>
                 
@@ -27,10 +33,10 @@
                         <calendar-icon size="17"/>
                     </div>
                     <div class="text-label">
-                        Sort By Date
+                        {{$t('preview_sorting.sort_date')}}
                     </div>
-                    <div class="sort-row" v-show="sorting.filed === 'date'" >
-                        <chevron-up-icon/>
+                    <div class="show-icon" >
+                        <arrow-up-icon size="17" v-if="filter.field === 'date'" :class="{ 'arrow-down': filter.sort === 'ASC' }"/>
                     </div>
                 </li>
                 <li class="menu-option" @click="sort('name')"  >
@@ -38,10 +44,10 @@
                        <img class="aplhabet" src="/assets/icons/alphabet.svg" size="17">
                     </div>
                     <div class="text-label">
-                       Sort By Aplhabet
+                       {{$t('preview_sorting.sort_alphabet')}}
                     </div>
-                    <div class="sort-row" v-show="sorting.filed === 'name'">
-                        <chevron-up-icon/>
+                    <div class="show-icon">
+                        <arrow-up-icon size="17" v-if="filter.field === 'name'" :class="{ 'arrow-down': filter.sort === 'ASC' }"/>
                     </div>
                 </li>
             </ul>
@@ -50,67 +56,87 @@
 </template>
 
 <script>
-import { CalendarIcon,
-        ListIcon,
-        GridIcon,
-        ChevronUpIcon 
-        } from 'vue-feather-icons'
-import { mapGetters } from 'vuex'
-import { events } from '@/bus'
 
-export default {
-    name: 'SortingAndPreview',
-    components: {
-        CalendarIcon,
-        ListIcon,
-        GridIcon,
-        ChevronUpIcon
-    },
-    data() {
-        return {
-            isVisible: false,
-            sorting: {
-                sort: 'DESC',
-                field: undefined,
-            },
-        }
-    },
+    import { CalendarIcon, ListIcon, GridIcon, ArrowUpIcon, CheckIcon } from 'vue-feather-icons'
+    import { mapGetters } from 'vuex'
+    import { events } from '@/bus'
 
-    methods: {
-        close() {
-            // this.isVisible = false
+    export default {
+        name:'SortingAndPreview',
+        components: {
+            CalendarIcon,
+            ArrowUpIcon,
+            CheckIcon,
+            ListIcon,
+            GridIcon
         },
-        sort(field) {
-           
-           this.sorting.field = field
-
-            if (this.sorting.sort === 'DESC') {
-                this.sorting.sort = 'ASC'
-            } else if (this.sorting.sort === 'ASC') {
-                this.sorting.sort = 'DESC'
+        computed: {
+            ...mapGetters(['FilePreviewType']),
+            isGrid() {
+                return this.FilePreviewType === 'grid'
+            },
+            isList() {
+                return this.FilePreviewType === 'list'
+            },
+        },
+        data () {
+            return {
+                isVisible: false,
+                filter: {
+                    sort: 'DESC',
+                    field: undefined,
+                }
             }
+        },
+        methods: {
+            sort (field) {
+                this.filter.field = field
 
-            console.log(this.sorting)
+                 // Set sorting direction
+                if (this.filter.sort === 'DESC') {
+                    this.filter.sort = 'ASC'
+                } else if (this.filter.sort === 'ASC') {
+                    this.filter.sort = 'DESC'
+                }
 
+                localStorage.setItem('sorting', JSON.stringify({sort: this.filter.sort , field: this.filter.field}))
+                this.$getDataByLocation()
+            },
+            changePreview(previewType) {
+                this.$store.dispatch('changePreviewType' , previewType)
+            }
+        },
+        mounted () {
+
+            let sorting = JSON.parse(localStorage.getItem('sorting'))
+
+            this.filter.sort = sorting.sort
+            this.filter.field = sorting.field
+
+            events.$on('sortingAndPreview-open', () => {
+                this.isVisible = true
+            })
+
+             events.$on('sortingAndPreview-close', () => {
+                this.isVisible = false
+            })
         }
-    },
-    mounted () {
-        events.$on('sortingAndPreview-open' , () => {
-            this.isVisible = true
-        })
-
-        events.$on('sortingAndPreview-close', () => {
-            this.isVisible = false
-        })
+        
     }
-
-}
 </script>
 
 <style scoped lang="scss">
 @import "@assets/vue-file-manager/_variables";
 @import "@assets/vue-file-manager/_mixins";
 
+.show-icon {
+    margin-left: auto;
+    max-height: 19px;
+     .arrow-down {
+        @include transform(rotate(180deg));
+    }
+}
+
 .filePreviewFixed {
     position: fixed !important;
     display: flex;
@@ -122,8 +148,11 @@ export default {
     .icon {
         margin-right: 20px;
         line-height: 0;
-        svg {
-            color: red;
+        .alphabet {
+            svg {
+                fill: red !important;
+                stroke: red !important;
+            }
         }
     }
 
diff --git a/resources/js/helpers.js b/resources/js/helpers.js
index 2b822ee1..14fc052b 100644
--- a/resources/js/helpers.js
+++ b/resources/js/helpers.js
@@ -307,6 +307,13 @@ const Helpers = {
               } 
               return validated
         }
+        Vue.prototype.$getDataByLocation = function() {
+            let previousFolder = store.getters.browseHistory
+            
+            if(this.$isThisLocation('base')){
+            this.$store.dispatch('getFolder', [{folder: previousFolder, back: true, init: false}])
+            }
+        }
     }
 }
 
diff --git a/resources/js/i18n/lang/en.json b/resources/js/i18n/lang/en.json
index 9f2c2db0..7da06474 100644
--- a/resources/js/i18n/lang/en.json
+++ b/resources/js/i18n/lang/en.json
@@ -281,6 +281,12 @@
 		"upload": "Upload",
 		"select": "Select"
 	},
+	"preview_sorting": {
+		"grid_view": "Grid View",
+		"list_view": "List View",
+		"sort_date": "Sort By Date",
+		"sort_alphabet": "Sort By Aplhabet"
+	},
 	"cookie_disclaimer": {
 		"button": "cookies policy",
 		"description": "By browsing this website you are agreeing to our {0}."
diff --git a/resources/js/store/modules/app.js b/resources/js/store/modules/app.js
index 43dc6f89..58370b23 100644
--- a/resources/js/store/modules/app.js
+++ b/resources/js/store/modules/app.js
@@ -837,9 +837,10 @@ const defaultState = {
 	],
 }
 const actions = {
-	changePreviewType: ({commit, state}) => {
+	changePreviewType: ({commit, state}, preview) => {
+		
 		// Get preview type
-		let previewType = state.FilePreviewType == 'grid' ? 'list' : 'grid'
+		let previewType = preview
 
 		// Store preview type to localStorage
 		localStorage.setItem('preview_type', previewType)