2 files changed, 7 insertions, 8 deletions

diff --git a/viewer/src/components/LdCommandSort.vue b/viewer/src/components/LdCommandSort.vue
index 30644c1..cfaa5c1 100644
--- a/viewer/src/components/LdCommandSort.vue
+++ b/viewer/src/components/LdCommandSort.vue
@@ -23,8 +23,8 @@
     <a slot="trigger" class="link">
       <fa-icon icon="sort-amount-down" size="lg" />
     </a>
-    <b-dropdown-item v-for="(sort, idx) in ITEM_SORTS" :key="idx" :value="idx">
-      <fa-icon :icon="['far', idx === selectedSort ? 'dot-circle' : 'circle']" />
+    <b-dropdown-item v-for="(sort, idx) in ITEM_SORTS" :key="idx" :value="sort">
+      <fa-icon :icon="['far', sort === selectedSort ? 'dot-circle' : 'circle']" />
       <span :class="$style.dropdownLabel">{{ sort.text }}</span>
     </b-dropdown-item>
   </b-dropdown>
@@ -32,19 +32,18 @@
 
 <script lang="ts">
 import { Component, Vue, Prop } from "vue-property-decorator";
-import { RawLocation } from "vue-router";
-import ItemComparators, { ItemComparator } from "@/services/itemComparators";
+import ItemComparators, { ItemSort } from "@/services/itemComparators";
 
 @Component
 export default class LdCommandSort extends Vue {
   readonly ITEM_SORTS = ItemComparators.ITEM_SORTS;
 
   get selectedSort() {
-    return this.ITEM_SORTS.map(s => s.fn).indexOf(this.$uiStore.sortFn);
+    return this.$uiStore.sort;
   }
 
-  set selectedSort(newValue: number) {
-    this.$uiStore.setSortFn(this.ITEM_SORTS[newValue].fn);
+  set selectedSort(newValue: ItemSort) {
+    this.$uiStore.setSort(newValue);
   }
 }
 </script>
diff --git a/viewer/src/components/LdGallery.vue b/viewer/src/components/LdGallery.vue
index 0c0a43c..edd479c 100644
--- a/viewer/src/components/LdGallery.vue
+++ b/viewer/src/components/LdGallery.vue
@@ -36,7 +36,7 @@ export default class LdPicture extends Vue {
   @Prop(String) readonly noresult?: string;
 
   get sortedItems() {
-    return this.items.sort(this.$uiStore.sortFn);
+    return this.items.sort(this.$uiStore.sort.fn);
   }
 
   get hasNoResults(): boolean {