Added stash sorting to stash tooltip menu and profile page.

components/stashes/menu.vue

@@ -1,7 +1,9 @@
 <script setup>
+import { computed, ref } from 'vue';
+
 import Checkbox from '#/components/form/checkbox.vue';
 
-defineProps({
+const props = defineProps({
 	stashes: {
 		type: Array,
 		default: () => [],
@@ -10,16 +12,63 @@ defineProps({
 		type: Array,
 		default: () => [],
 	},
+	domain: {
+		type: String,
+		default: 'scenes',
+	},
 });
 
 const emit = defineEmits(['stash', 'unstash', 'create']);
+
+const sortings = ['used', 'name', 'size', 'created'];
+const sorting = ref(localStorage.getItem('stashMenuSorting') || 'used');
+
+const domainKey = {
+	actors: 'stashedActors',
+	scenes: 'stashedScenes',
+	movies: 'stashedMovies',
+}[props.domain];
+
+const sortedStashes = computed(() => props.stashes
+	.toSorted((stashA, stashB) => {
+		return stashA.createdAt - stashB.createdAt;
+	})
+	.toSorted((stashA, stashB) => {
+		if (sorting.value === 'used') {
+			return stashB.lastStashAt - stashA.lastStashAt;
+		}
+
+		if (sorting.value === 'name') {
+			return stashA.name.localeCompare(stashB.name);
+		}
+
+		if (sorting.value === 'size') {
+			return stashB[domainKey] - stashA[domainKey];
+		}
+
+		if (sorting.value === 'created') {
+			return stashA.createdAt - stashB.createdAt;
+		}
+
+		return 0;
+	}));
+	/*
+	.toSorted((stashA, stashB) => {
+		return stashB.isPrimary - stashA.isPrimary;
+	}));
+	 */
+
+function toggleSorting() {
+	sorting.value = sortings[(sortings.indexOf(sorting.value) + 1) % sortings.length];
+	localStorage.setItem('stashMenuSorting', sorting.value);
+}
 </script>
 
 <template>
 	<div class="stash-menu noselect">
 		<ul class="stash-list nolist noselect">
 			<li
-				v-for="userStash in stashes"
+				v-for="userStash in sortedStashes"
 				:key="`stash-${userStash.id}`"
 				class="menu-item"
 			>
@@ -32,13 +81,47 @@ const emit = defineEmits(['stash', 'unstash', 'create']);
 			</li>
 		</ul>
 
-		<div
-			v-close-popper
-			class="menu-item menu-stash create"
-			@click="emit('create')"
-		>
-			<Icon icon="plus3" />
-			New
+		<div class="menu-actions">
+			<div
+				v-close-popper
+				class="menu-item menu-stash menu-create"
+				@click="emit('create')"
+			>
+				<Icon icon="plus3" />
+				New
+			</div>
+
+			<Icon
+				v-if="sorting === 'used'"
+				v-tooltip="'By last stash'"
+				icon="sort-heart"
+				class="menu-sort"
+				@click="toggleSorting"
+			/>
+
+			<Icon
+				v-if="sorting === 'name'"
+				v-tooltip="'By name'"
+				icon="sort-alpha-asc"
+				class="menu-sort"
+				@click="toggleSorting"
+			/>
+
+			<Icon
+				v-if="sorting === 'size'"
+				v-tooltip="`By total stashed ${domain}`"
+				icon="sort-amount-desc"
+				class="menu-sort"
+				@click="toggleSorting"
+			/>
+
+			<Icon
+				v-if="sorting === 'created'"
+				v-tooltip="'By stash age'"
+				icon="sort-time-asc"
+				class="menu-sort"
+				@click="toggleSorting"
+			/>
 		</div>
 	</div>
 </template>
@@ -85,10 +168,22 @@ const emit = defineEmits(['stash', 'unstash', 'create']);
 	.check-container {
 		margin-right: .5rem;
 	}
+}
 
-	&.create {
-		flex-shrink: 0;
-		border-top: 1px solid var(--glass-weak-40);
+.menu-actions {
+	flex-shrink: 0;
+	display: flex;
+	border-top: solid 1px var(--glass-weak-40);
+}
+
+.menu-sort {
+	padding: .75rem 1rem;
+	fill: var(--glass);
+	border-left: solid 1px var(--glass-weak-40);
+
+	&:hover {
+		fill: var(--primary);
+		cursor: pointer;
 	}
 }
 </style>