frontend/src/App.vue

@@ -21,7 +21,6 @@ import { useMainStore } from '@/stores/main'
 
 import { computed } from 'vue'
 import Router from '@/router/index'
-import type { SortOrder } from './utils/docsort'
 
 interface Path {
   path: string
@@ -103,9 +102,9 @@ const globalShortcutHandler = (event: KeyboardEvent) => {
   else if (
     !input &&
     keyup &&
-    (event.code === 'Backquote' || event.key === '1' || event.key === '2' || event.key === '3')
+    (event.key === '1' || event.key === '2' || event.key === '3')
   ) {
-    store.sort(['', 'name', 'modified', 'size'][+event.key || 0] as SortOrder)
+    fileExplorer.toggleSortColumn(+event.key)
   }
   // Rename
   else if (c && keyup && !event.ctrlKey && (event.key === 'F2' || event.key === 'r')) {

frontend/src/components/BreadCrumb.vue

@@ -113,11 +113,11 @@ watchEffect(() => {
   padding: 0 1em 0 0;
 }
 .breadcrumb > a {
-  flex: 0 4 auto;
   display: flex;
   align-items: center;
   margin: 0 -0.5em 0 -0.5em;
   padding: 0;
+  max-width: 8em;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
@@ -126,13 +126,13 @@ watchEffect(() => {
   clip-path: polygon(0 0, 1em 50%, 0 100%, 100% 100%, 100% 0, 0 0);
   transition: all var(--breadcrumb-transtime);
 }
-.breadcrumb > a:first-child {
+.breadcrumb a:first-child {
-  flex: 0 0 auto;
   padding-left: 1.5em;
   padding-right: 1.7em;
   clip-path: none;
 }
-.breadcrumb > a:last-child {
+.breadcrumb a:last-child {
+  max-width: none;
   clip-path: polygon(
     0 0,
     calc(100% - 1em) 0,
@@ -143,7 +143,7 @@ watchEffect(() => {
     0 0
   );
 }
-.breadcrumb > a:only-child {
+.breadcrumb a:only-child {
   clip-path: polygon(
     0 0,
     calc(100% - 1em) 0,
@@ -177,6 +177,6 @@ watchEffect(() => {
 }
 .breadcrumb a:hover { color: var(--breadcrumb-hover-color) }
 .breadcrumb a:hover svg { fill: var(--breadcrumb-hover-color) }
-.breadcrumb a.current { color: var(--accent-color); max-width: none; flex: 0 1 auto; }
+.breadcrumb a.current { color: var(--accent-color) }
 .breadcrumb a.current svg { fill: var(--accent-color) }
 </style>

frontend/src/components/HeaderMain.vue

@@ -23,7 +23,6 @@
       />
     </template>
     <SvgButton ref="searchButton" name="find" @click.prevent="toggleSearchInput" />
-    <SvgButton name="eye" @click="store.gallery = !store.gallery" />
     <SvgButton name="cog" @click="settingsMenu" />
   </nav>
 </template>
@@ -73,6 +72,7 @@ watchEffect(() => {
 const settingsMenu = (e: Event) => {
   // show the context menu
   const items = []
+  items.push({ label: 'Gallery', onClick: () => store.gallery = !store.gallery })
   if (store.user.isLoggedIn) {
     items.push({ label: `Logout ${store.user.username ?? ''}`, onClick: () => store.logout() })
   } else {

frontend/src/stores/main.ts

@@ -79,10 +79,6 @@ export const useMainStore = defineStore({
       if (this.query) this.prefs.sortFiltered = this.prefs.sortFiltered === name ? '' : name
       else this.prefs.sortListing = this.prefs.sortListing === name ? '' : name
     },
-    sort(name: SortOrder | '') {
-      if (this.query) this.prefs.sortFiltered = name
-      else this.prefs.sortListing = name
-    },
   },
   getters: {
     sortOrder(): SortOrder { return this.query ? this.prefs.sortFiltered : this.prefs.sortListing },