From f5052f39bcd9a9199017495aae93e50940856f59 Mon Sep 17 00:00:00 2001
From: NeonPimpZ <31969444+NeonPimpZ@users.noreply.github.com>
Date: Thu, 23 Apr 2026 21:10:37 +0200
Subject: [PATCH] feat(filebrowser): add toggle to show/hide hidden files and
 .env syntax highlighting

---
 src/components/filebrowser/FilePanel.vue      | 19 +++++++++++++++----
 .../filebrowser/viewers/CodeEditor.vue        |  2 ++
 src/store/mutations.js                        |  4 ++++
 src/store/state.js                            |  1 +
 4 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/components/filebrowser/FilePanel.vue b/src/components/filebrowser/FilePanel.vue
index bccc087d..3aef6bf8 100644
--- a/src/components/filebrowser/FilePanel.vue
+++ b/src/components/filebrowser/FilePanel.vue
@@ -132,6 +132,11 @@
 										</b-field>
 									</div>
 									<div class="view-btns is-flex-shrink-0">
+										<b-tooltip :label="$t('Show Hidden Files')" position="is-left" type="is-dark">
+											<p class="is-clickable none-line-height mr-2" :class="{ 'has-text-primary': showHiddenFiles }" role="button" @click="toggleHiddenFiles">
+												<b-icon icon="eye-outline"></b-icon>
+											</p>
+										</b-tooltip>
 										<b-tooltip :label="$t('Change View')" position="is-left" type="is-dark">
 											<p class="is-clickable none-line-height" role="button" @click="changeView">
 												<b-icon :icon="viewIcon"></b-icon>
@@ -382,6 +387,9 @@ export default {
 				? "view-grid-outline"
 				: "format-list-bulleted";
 		},
+		showHiddenFiles() {
+			return this.$store.state.showHiddenFiles;
+		},
 		listView() {
 			return this.$store.state.isViewGird ? "gird-view" : "list-view";
 		},
@@ -578,10 +586,9 @@ export default {
 								extensions: item.extensions,
 							};
 						});
-						// filter hidden files
-						const filterList = newFileList.filter((item) => {
-							return !item.name.startsWith(".");
-						});
+						const filterList = this.showHiddenFiles
+							? newFileList
+							: newFileList.filter((item) => !item.name.startsWith("."));
 						this.listData = orderBy(filterList, ["is_dir"], ["desc"]);
 						this.handelListChange(this.listData);
 						this.errorMsg = "";
@@ -616,6 +623,10 @@ export default {
 			this.isViewGird = !this.$store.state.isViewGird;
 			this.$store.commit("SET_IS_VIEW_GRID", this.isViewGird);
 		},
+		toggleHiddenFiles() {
+			this.$store.commit('SET_SHOW_HIDDEN_FILES', !this.$store.state.showHiddenFiles);
+			this.reload();
+		},
 
 		/**
 		 * @description: Handle Select All Action
diff --git a/src/components/filebrowser/viewers/CodeEditor.vue b/src/components/filebrowser/viewers/CodeEditor.vue
index eaa4b8b2..e5abc240 100644
--- a/src/components/filebrowser/viewers/CodeEditor.vue
+++ b/src/components/filebrowser/viewers/CodeEditor.vue
@@ -219,6 +219,8 @@ export default {
 				mode = 'text/x-go'
 			} else if (ext.toLowerCase() == "vue") {
 				mode = 'text/x-vue'
+			} else if (ext.toLowerCase() === 'env' || this.item.name.toLowerCase().startsWith('.env')) {
+				mode = 'text/x-sh'
 			}
 			this.codemirror.setOption("mode", mode);
 			this.$api.file.download(this.item.path).then(res => {
diff --git a/src/store/mutations.js b/src/store/mutations.js
index fc49acf7..316bda2d 100644
--- a/src/store/mutations.js
+++ b/src/store/mutations.js
@@ -81,6 +81,10 @@ const mutations = {
     state.isViewGird = val
   },
 
+  SET_SHOW_HIDDEN_FILES(state, val) {
+    state.showHiddenFiles = val
+  },
+
   SET_OPERATE_OBJECT(state, val) {
     state.operateObject = val
   },
diff --git a/src/store/state.js b/src/store/state.js
index 1a66b7c7..a39aa47e 100644
--- a/src/store/state.js
+++ b/src/store/state.js
@@ -33,6 +33,7 @@ const state = {
   operateObject: null,
   currentPath: '',
   isViewGird: true,
+  showHiddenFiles: false,
 
   // Wallpaper
   wallpaperObject: {