feat: Remember selected item sort in UXSettings

Author: 3urobeat

src/components/titleBarFull.vue

@@ -5,7 +5,7 @@
  * Created Date: 2025-09-17 17:25:36
  * Author: 3urobeat
  *
- * Last Modified: 2026-04-28 21:58:45
+ * Last Modified: 2026-04-29 18:45:52
  * Modified By: 3urobeat
  *
  * Copyright (c) 2025 - 2026 3urobeat <https://github.com/3urobeat>
@@ -26,11 +26,11 @@
         <div class="flex w-full justify-between md:justify-end gap-x-4 p-1.5 rounded-2xl backdrop-blur-lg">
             <!-- Sort dropdown -->
             <div class="flex min-w-18 sm:min-w-32 justify-end rounded-xl shadow-md select-none bg-bg-field-light dark:bg-bg-field-dark">
-                <select class="w-full px-2 m-0.5" v-model="selectedSort">
-                    <option :value="sortModes.dateDesc">{{ $t('sortByDateDesc') }}</option>
-                    <option :value="sortModes.dateAsc">{{ $t('sortByDateAsc') }}</option>
-                    <option :value="sortModes.nameDesc">{{ $t('sortByNameDesc') }}</option>
-                    <option :value="sortModes.nameAsc">{{ $t('sortByNameAsc') }}</option>
+                <select class="w-full px-2 m-0.5" v-model="selectedSort" v-on:change="saveUxSetting">
+                    <option :value="SortMode.dateDesc">{{ $t('sortByDateDesc') }}</option>
+                    <option :value="SortMode.dateAsc">{{ $t('sortByDateAsc') }}</option>
+                    <option :value="SortMode.nameDesc">{{ $t('sortByNameDesc') }}</option>
+                    <option :value="SortMode.nameAsc">{{ $t('sortByNameAsc') }}</option>
                 </select>
             </div>
 
@@ -95,26 +95,28 @@
 <script setup lang="ts">
     import { defaultUXSettings } from '~/model/storage';
     import type { Label } from '~/model/label';
-    import { sortModes } from '~/model/sort-modes';
+    import { SortMode } from '~/model/sort-modes';
 
 
     // Get global cache from app.vue
     const storedLabels = getAllLabelsFromServer();
 
     // Refs
-    const selectedSort:    Ref<sortModes> = ref(sortModes.dateDesc);
+    const selectedSort:    Ref<SortMode>  = ref(SortMode.dateDesc);
     const selectedFilters: Ref<string[]>  = ref([]);
     const selectedScaling: Ref<number>    = ref(defaultUXSettings.selectedItemCardsScaling);
 
     // Client side only
     onBeforeMount(() => {
         selectedScaling.value = getUXSettings().selectedItemCardsScaling;
+        selectedSort.value    = getUXSettings().selectedItemSort;
     });
 
 
     // Save scaling setting
     function saveUxSetting() {
         setUXSetting("selectedItemCardsScaling", selectedScaling.value);
+        setUXSetting("selectedItemSort", selectedSort.value);
     }
 
 

src/composables/getItemsToShow.ts

@@ -4,7 +4,7 @@
  * Created Date: 2025-09-17 17:25:36
  * Author: 3urobeat
  *
- * Last Modified: 2026-04-29 17:45:11
+ * Last Modified: 2026-04-29 18:44:22
  * Modified By: 3urobeat
  *
  * Copyright (c) 2025 - 2026 3urobeat <https://github.com/3urobeat>
@@ -16,7 +16,7 @@
 
 
 import type { Item } from "~/model/item";
-import { sortModes } from "~/model/sort-modes";
+import { SortMode } from "~/model/sort-modes";
 import { State } from "./state";
 
 
@@ -26,7 +26,7 @@ import { State } from "./state";
  * @param selectedSort
  * @param selectedFilters
  */
-export default function(storedItems: Item[], selectedSort?: sortModes, selectedFilters?: string[]): Item[] {
+export default function(storedItems: Item[], selectedSort?: SortMode, selectedFilters?: string[]): Item[] {
 
     // Get search string ref from app.vue
     const searchStr: Ref<string|null> = useState(State.GLOBAL_SEARCH_STRING);
@@ -43,19 +43,19 @@ export default function(storedItems: Item[], selectedSort?: sortModes, selectedF
 
     // Apply sort to storedItems
     switch (selectedSort) {
-        case sortModes.dateDesc:
+        case SortMode.dateDesc:
             storedItems = storedItems.sort((a, b) => b.addedTimestamp - a.addedTimestamp);
             break;
 
-        case sortModes.dateAsc:
+        case SortMode.dateAsc:
             storedItems = storedItems.sort((a, b) => a.addedTimestamp - b.addedTimestamp);
             break;
 
-        case sortModes.nameDesc:
+        case SortMode.nameDesc:
             storedItems = storedItems.sort((a, b) => a.title.charCodeAt(0) - b.title.charCodeAt(0)); /* TODO: Does not sort e.g. "Bc 1" & "Bd 2" */
             break;
 
-        case sortModes.nameAsc:
+        case SortMode.nameAsc:
             storedItems = storedItems.sort((a, b) => b.title.charCodeAt(0) - a.title.charCodeAt(0));
             break;
 

src/model/sort-modes.ts

@@ -4,7 +4,7 @@
  * Created Date: 2025-09-21 00:07:44
  * Author: 3urobeat
  *
- * Last Modified: 2026-02-02 21:32:26
+ * Last Modified: 2026-04-29 18:44:22
  * Modified By: 3urobeat
  *
  * Copyright (c) 2025 - 2026 3urobeat <https://github.com/3urobeat>
@@ -15,11 +15,11 @@
  */
 
 
-export enum sortModes {
+export enum SortMode {
     dateDesc,
     dateAsc,
     nameDesc,
     nameAsc
 }
 
-export const defaultSortMode = sortModes.dateDesc;
+export const defaultSortMode = SortMode.dateDesc;

src/model/storage.ts

@@ -4,7 +4,7 @@
  * Created Date: 2025-09-08 15:21:35
  * Author: 3urobeat
  *
- * Last Modified: 2026-04-05 21:01:49
+ * Last Modified: 2026-04-29 18:48:38
  * Modified By: 3urobeat
  *
  * Copyright (c) 2025 - 2026 3urobeat <https://github.com/3urobeat>
@@ -18,6 +18,7 @@
 import type { Clothing, Outfit } from "./item";
 import type { Label } from "./label";
 import type { Category } from "./label-category";
+import { SortMode } from "./sort-modes";
 import type { Unit } from "./unit";
 
 
@@ -58,8 +59,9 @@ export type UXSettings = {
     // Boolean if user changed dark mode, null if automatic
     darkModeEnabled: boolean | null, // WARN: Used in public/global.js as well
 
-    // Selected scaling for item cards in titleBarFull
+    // Selected scaling and sort mode for item cards in titleBarFull
     selectedItemCardsScaling: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9,
+    selectedItemSort: SortMode,
 
     // Whether user enabled if selected filters should be persisted
     saveSelectedFilters: boolean // TODO
@@ -70,6 +72,7 @@ export type UXSettings = {
 export const defaultUXSettings: UXSettings = {
     darkModeEnabled: null,
     selectedItemCardsScaling: 6,
+    selectedItemSort: SortMode.dateDesc,
     saveSelectedFilters: false
 };
 

src/pages/clothing/index.vue

@@ -5,7 +5,7 @@
  * Created Date: 2024-03-23 13:03:16
  * Author: 3urobeat
  *
- * Last Modified: 2026-04-28 22:19:29
+ * Last Modified: 2026-04-29 18:44:22
  * Modified By: 3urobeat
  *
  * Copyright (c) 2024 - 2026 3urobeat <https://github.com/3urobeat>
@@ -86,7 +86,7 @@
     import TitleBarFull from "~/components/titleBarFull.vue";
     import { getAllClothesFromServer } from "~/composables/storage";
     import type { Clothing } from "~/model/item";
-    import { defaultSortMode, sortModes } from "~/model/sort-modes";
+    import { defaultSortMode, SortMode } from "~/model/sort-modes";
 
 
     // Set page properties
@@ -100,7 +100,7 @@
     const storedClothing = await getAllClothesFromServer();
 
     // Get refs to props exported by defineExpose() in TitleBarFull
-    const titleBarFull: Ref<{ selectedSort: sortModes, selectedFilters: string[], selectedScaling: number, toggleFilter: (thisFilter: string) => void }> = ref({ selectedSort: defaultSortMode, selectedFilters: [], selectedScaling: 0, toggleFilter: () => {} }); // TODO: Can this be an exported type somewhere?
+    const titleBarFull: Ref<{ selectedSort: SortMode, selectedFilters: string[], selectedScaling: number, toggleFilter: (thisFilter: string) => void }> = ref({ selectedSort: defaultSortMode, selectedFilters: [], selectedScaling: 0, toggleFilter: () => {} }); // TODO: Can this be an exported type somewhere?
 
 
     // Pre-calculate items that should be shown. Can be accessed multiple times in template without re-calculation. Updates when sort/filter/search changes due to reactivity

src/pages/outfits/index.vue

@@ -5,7 +5,7 @@
  * Created Date: 2025-09-08 15:40:46
  * Author: 3urobeat
  *
- * Last Modified: 2026-04-28 22:18:48
+ * Last Modified: 2026-04-29 18:44:22
  * Modified By: 3urobeat
  *
  * Copyright (c) 2025 - 2026 3urobeat <https://github.com/3urobeat>
@@ -93,7 +93,7 @@
     import ImgLazy from "~/components/imgLazy.vue";
     import TitleBarFull from "~/components/titleBarFull.vue";
     import type { Outfit } from "~/model/item";
-    import { defaultSortMode, type sortModes } from "~/model/sort-modes";
+    import { defaultSortMode, type SortMode } from "~/model/sort-modes";
     import { getAllOutfitsFromServer } from "~/composables/storage";
 
 
@@ -108,7 +108,7 @@
     const storedOutfits = await getAllOutfitsFromServer();
 
     // Get refs to props exported by defineExpose() in TitleBarFull
-    const titleBarFull: Ref<{ selectedSort: sortModes, selectedFilters: string[], selectedScaling: number, toggleFilter: (thisFilter: string) => void }> = ref({ selectedSort: defaultSortMode, selectedFilters: [], selectedScaling: 0, toggleFilter: () => {} }); // TODO: Can this be an exported type somewhere?
+    const titleBarFull: Ref<{ selectedSort: SortMode, selectedFilters: string[], selectedScaling: number, toggleFilter: (thisFilter: string) => void }> = ref({ selectedSort: defaultSortMode, selectedFilters: [], selectedScaling: 0, toggleFilter: () => {} }); // TODO: Can this be an exported type somewhere?
 
 
     // Pre-calculate items that should be shown. Can be accessed multiple times in template without re-calculation. Updates when sort/filter/search changes due to reactivity