feat: toggle visibility of dotfiles on frontend (#2)

frontend/src/components/Sidebar.vue

@@ -11,7 +11,7 @@
         <span>{{ $t("sidebar.myFiles") }}</span>
       </button>
 
-      <div v-if="user.perm.create">
+      <div v-if="user.perm.create && isListing">
         <button
           @click="$store.commit('showHover', 'newDir')"
           class="action"
@@ -33,6 +33,19 @@
         </button>
       </div>
 
+      <div>
+        <button
+            v-if="isListing && !userHiddenDotfiles"
+            class="action"
+            @click="toggleDotfiles"
+            :aria-label="$t('sidebar.dotfiles')"
+            :title="this.$store.state.showDotfiles ? $t('sidebar.dotfiles_hide') : $t('sidebar.dotfiles_show')"
+        >
+          <i class="material-icons">{{ toggleDotfilesIcon }}</i>
+          <span>{{ $t("sidebar.dotfiles") }}</span>
+        </button>
+      </div>
+
       <div>
         <button
           class="action"
@@ -134,14 +147,20 @@ export default {
   },
   computed: {
     ...mapState(["user"]),
-    ...mapGetters(["isLogged"]),
+    ...mapGetters(["isLogged", "isListing"]),
     active() {
       return this.$store.state.show === "sidebar";
     },
     signup: () => signup,
     version: () => version,
     disableExternal: () => disableExternal,
     disableUsedPercentage: () => disableUsedPercentage,
+    toggleDotfilesIcon() {
+      return this.$store.state.showDotfiles ? "visibility" : "visibility_off";
+    },
+    userHiddenDotfiles() {
+      return this.user.hideDotfiles;
+    },
     canLogout: () => (!noAuth && loginPage) || authMethod === "oidc",
   },
   asyncComputed: {
@@ -181,6 +200,9 @@ export default {
       this.$router.push({ path: "/settings" }, () => {});
       this.$store.commit("closeHovers");
     },
+    toggleDotfiles() {
+      this.$store.commit("toggleDotfiles", true);
+    },
     help() {
       this.$store.commit("showHover", "help");
     },

frontend/src/components/files/ListingItem.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="item"
+    :class="{ item: true, dotfile: this.isDotFile, hidden: this.isDotFile && !showDotfiles }"
     role="button"
     tabindex="0"
     :draggable="isDraggable"
@@ -61,7 +61,7 @@ export default {
     "path",
   ],
   computed: {
-    ...mapState(["user", "selected", "req", "jwt"]),
+    ...mapState(["user", "selected", "req", "jwt", "showDotfiles"]),
     ...mapGetters(["selectedCount"]),
     singleClick() {
       return this.readOnly == undefined && this.user.singleClick;
@@ -94,6 +94,9 @@ export default {
     isThumbsEnabled() {
       return enableThumbs;
     },
+    isDotFile: function () {
+      return this.name[0] === ".";
+    },
   },
   methods: {
     ...mapMutations(["addSelected", "removeSelected", "resetSelected"]),

frontend/src/css/listing.css

@@ -69,6 +69,10 @@ body.rtl #listing {
   vertical-align: bottom;
 }
 
+#listing .item.dotfile.hidden {
+  display: none;
+}
+
 .message {
   text-align: center;
   font-size: 2em;

frontend/src/i18n/en.json

@@ -250,6 +250,9 @@
     "users": "Users"
   },
   "sidebar": {
+    "dotfiles": "Dotfiles",
+    "dotfiles_show": "Dotfiles are hidden, click to show them",
+    "dotfiles_hide": "Dotfiles are shown, click to hide them",
     "help": "Help",
     "hugoNew": "Hugo New",
     "login": "Login",

frontend/src/store/index.js

@@ -23,6 +23,7 @@ const state = {
   show: null,
   showShell: false,
   showConfirm: null,
+  showDotfiles: true,
 };
 
 export default new Vuex.Store({

frontend/src/store/mutations.js

@@ -9,6 +9,9 @@ const mutations = {
   toggleShell: (state) => {
     state.showShell = !state.showShell;
   },
+  toggleDotfiles: (state) => {
+    state.showDotfiles = !state.showDotfiles;
+  },
   showHover: (state, value) => {
     if (typeof value !== "object") {
       state.show = value;