0.57.15

assets/css/tooltip.css

@@ -1,7 +1,7 @@
 /* Content */
 
 .v-popper__popper {
-  z-index: 10000;
+  z-index: 1000;
   top: 0;
   left: 0;
   outline: none;
@@ -45,6 +45,10 @@
   overflow-y: auto;
 }
 
+.no-outer-scroll .v-popper__inner {
+	overflow: hidden;
+}
+
 .v-popper__inner > div {
   position: relative;
   z-index: 1;
@@ -82,6 +86,10 @@
   border-width: 6px;
 }
 
+.v-popper__popper[data-popper-placement^="top"] .v-popper__arrow-container {
+  bottom: -6px;
+}
+
 .v-popper__popper[data-popper-placement^="top"] .v-popper__arrow-inner,
 .v-popper__popper[data-popper-placement^="bottom"] .v-popper__arrow-inner {
   left: -2px;
@@ -105,7 +113,7 @@
 }
 
 .v-popper__popper[data-popper-placement^="bottom"] .v-popper__arrow-container {
-  top: 0;
+  top: -2px;
 }
 
 .v-popper__popper[data-popper-placement^="bottom"] .v-popper__arrow-inner,
@@ -151,7 +159,11 @@
 }
 
 .v-popper__popper[data-popper-placement^="left"] .v-popper__arrow-container {
-  right: -10px;
+  right: -7px;
+}
+
+.v-popper__popper[data-popper-placement^="right"] .v-popper__arrow-container {
+  left: 2px;
 }
 
 .v-popper__popper[data-popper-placement^="left"] .v-popper__arrow-inner,

assets/img/icons/drawer-out.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<path d="M15.89 10.188l-4-5c-0.172-0.216-0.487-0.251-0.703-0.078s-0.251 0.487-0.078 0.703l3.89 4.863v0.325h-3.5l-2 2h-3l-2-2h-3.5v-0.325l3.89-4.863c0.173-0.216 0.138-0.53-0.078-0.703s-0.53-0.138-0.703 0.078l-4 5c-0.071 0.089-0.11 0.199-0.11 0.312v4.5c0 0.552 0.448 1 1 1h14c0.552 0 1-0.448 1-1v-4.5c0-0.114-0.039-0.224-0.11-0.312z"></path>
+<path d="M8 0.5l-3.5 3.5h2.5v5h2v-5h2.5z"></path>
+</svg>

assets/img/icons/sort-add-asc.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   width="16"
+   height="16"
+   viewBox="0 0 16 16"
+   id="svg3"
+   xml:space="preserve"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs3" /><path
+     d="M5 12v-12h-2v12h-2.5l3.5 3.5 3.5-3.5h-2.5z"
+     id="path1" /><path
+     id="path1-3"
+     style="stroke-width:0.348033"
+     d="M 10.443359 2.2773438 C 10.354073 2.2861032 10.283203 2.3587981 10.283203 2.4472656 L 10.283203 4.328125 L 8.3339844 4.328125 C 8.2362054 4.328125 8.1582031 4.4056346 8.1582031 4.5 L 8.1582031 5.5253906 C 8.1582031 5.6197556 8.2362047 5.6953125 8.3339844 5.6953125 L 10.283203 5.6953125 L 10.283203 7.5292969 L 11.556641 6.46875 A 0.14617623 0.14617623 0 0 0 11.556641 6.4667969 C 11.601003 6.4299705 11.650097 6.3991617 11.701172 6.375 L 11.701172 5.6953125 L 13.648438 5.6953125 C 13.746218 5.6953125 13.826172 5.619755 13.826172 5.5253906 L 13.826172 4.5 C 13.826172 4.405635 13.746225 4.328125 13.648438 4.328125 L 11.701172 4.328125 L 11.701172 2.4472656 C 11.701172 2.3529006 11.621224 2.2773437 11.523438 2.2773438 L 10.460938 2.2773438 C 10.454826 2.2773438 10.449312 2.2767598 10.443359 2.2773438 z " /><path
+     d="M 16,5 C 16,2.243 13.757,0 11,0 8.243,0 6,2.243 6,5 V 5.5 C 6,5.776 6.224,6 6.5,6 6.776,6 7,5.776 7,5.5 V 5 c 0,-2.206 1.794,-4 4,-4 2.206,0 4,1.794 4,4 0,1.86 -1.277,3.428 -3,3.873 V 7 L 9,9.5 12,12 V 9.899 C 14.279,9.434 16,7.414 16,5 Z"
+     id="path3" /></svg>

assets/img/icons/sort-add-desc.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   width="16"
+   height="16"
+   viewBox="0 0 16 16"
+   id="svg3"
+   xml:space="preserve"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs3" /><path
+     d="M5 12v-12h-2v12h-2.5l3.5 3.5 3.5-3.5h-2.5z"
+     id="path1" /><path
+     id="path1-3"
+     style="stroke-width:0.348033"
+     d="M 10.443359 2.2773438 C 10.354073 2.2861032 10.283203 2.3587981 10.283203 2.4472656 L 10.283203 4.328125 L 8.3339844 4.328125 C 8.2362054 4.328125 8.1582031 4.4056346 8.1582031 4.5 L 8.1582031 5.5253906 C 8.1582031 5.6197556 8.2362047 5.6953125 8.3339844 5.6953125 L 10.283203 5.6953125 L 10.283203 6.3671875 C 10.340222 6.3923929 10.394355 6.4261166 10.443359 6.4667969 A 0.14617623 0.14617623 0 0 1 10.443359 6.46875 L 11.701172 7.5175781 L 11.701172 5.6953125 L 13.648438 5.6953125 C 13.746218 5.6953125 13.826172 5.619755 13.826172 5.5253906 L 13.826172 4.5 C 13.826172 4.405635 13.746225 4.328125 13.648438 4.328125 L 11.701172 4.328125 L 11.701172 2.4472656 C 11.701172 2.3529006 11.621224 2.2773437 11.523438 2.2773438 L 10.460938 2.2773438 C 10.454826 2.2773438 10.449312 2.2767598 10.443359 2.2773438 z " /><path
+     d="m 6,5 c 0,-2.757 2.243,-5 5,-5 2.757,0 5,2.243 5,5 V 5.5 C 16,5.776 15.776,6 15.5,6 15.224,6 15,5.776 15,5.5 V 5 C 15,2.794 13.206,1 11,1 8.794,1 7,2.794 7,5 7,6.86 8.277,8.428 10,8.873 V 7 L 13,9.5 10,12 V 9.899 C 7.721,9.434 6,7.414 6,5 Z"
+     id="path3" /></svg>

assets/img/icons/sort-add.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   width="16"
+   height="16"
+   viewBox="0 0 16 16"
+   id="svg3"
+   xml:space="preserve"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs3" /><path
+     d="M5 12v-12h-2v12h-2.5l3.5 3.5 3.5-3.5h-2.5z"
+     id="path1" /><path
+     d="M 14.334849,4.1517112 H 11.883382 V 1.785868 c 0,-0.1187227 -0.09983,-0.2150766 -0.222859,-0.2150766 h -1.337165 c -0.12302,0 -0.222861,0.096353 -0.222861,0.2150766 V 4.1517112 H 7.6490291 c -0.1230181,0 -0.2228598,0.096353 -0.2228598,0.2150768 v 1.2904597 c 0,0.1187229 0.099841,0.2150767 0.2228598,0.2150767 h 2.4514679 v 2.365843 c 0,0.1187227 0.09983,0.2150768 0.222861,0.2150768 h 1.337165 c 0.123019,0 0.222859,-0.096353 0.222859,-0.2150768 v -2.365843 h 2.451467 c 0.12302,0 0.22286,-0.096355 0.22286,-0.2150767 V 4.366788 c 0,-0.1187229 -0.09983,-0.2150768 -0.22286,-0.2150768 z"
+     id="path1-3"
+     style="stroke-width:0.437868" /></svg>

assets/img/icons/sort-heart.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   width="16"
+   height="16"
+   viewBox="0 0 16 16"
+   id="svg3"
+   sodipodi:docname="sort-heart.svg"
+   xml:space="preserve"
+   inkscape:version="1.4.3 (0d15f75042, 2025-12-25)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs3" /><sodipodi:namedview
+     id="namedview3"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="26.077075"
+     inkscape:cx="4.0265253"
+     inkscape:cy="4.640091"
+     inkscape:window-width="1920"
+     inkscape:window-height="1020"
+     inkscape:window-x="0"
+     inkscape:window-y="32"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg3"
+     showguides="true" /><path
+     d="M5 12v-12h-2v12h-2.5l3.5 3.5 3.5-3.5h-2.5z"
+     id="path1" /><path
+     d="M 13.78723,0 C 12.941692,0 12.207573,0.47431375 11.834786,1.1709458 11.461999,0.47431375 10.72788,0 9.8823418,0 c -1.2219697,0 -2.21277,0.99080032 -2.21277,2.2127699 0,2.9937477 4.1652142,5.0763547 4.1652142,5.0763547 0,0 4.165214,-2.082607 4.165214,-5.0763547 C 16,0.99080032 15.0092,0 13.78723,0 Z"
+     id="path1-5"
+     style="stroke-width:0.520651" /></svg>

components/actors/bio.vue

@@ -77,12 +77,15 @@ function getSocialUrl(social) {
 	return null;
 }
 
-const socials = props.actor.socials.slice(0, 10).map((social) => ({
-	...social,
-	handle: social.url
-		? new URL(social.url).hostname
-		: social.handle,
-}));
+const socials = props.actor.socials
+	.filter((social) => social.platform)
+	.slice(0, 10)
+	.map((social) => ({
+		...social,
+		handle: social.url
+			? new URL(social.url).hostname
+			: social.handle,
+	}));
 
 const aliases = Object
 	.entries(props.actor.aliases.reduce((acc, alias) => {

components/actors/merge.vue

@@ -148,6 +148,7 @@ onMounted(() => {
 					:triggers="[]"
 					:shown="actorResults.length > 0"
 					:auto-hide="false"
+					placement="auto"
 				>
 					<input
 						ref="actorInput"

components/alerts/create.vue

@@ -37,17 +37,14 @@ const {
 
 const actors = ref(props.presetActors);
 const actorResults = ref([]);
-const actorInput = ref(null);
 const actorQuery = ref('');
 
 const entities = ref(props.presetEntities);
 const entityResults = ref([]);
-const entityInput = ref(null);
 const entityQuery = ref('');
 
 const tags = ref(props.presetTags);
 const tagResults = ref([]);
-const tagInput = ref(null);
 const tagQuery = ref('');
 
 const scenes = ref(props.presetScenes);
@@ -61,6 +58,8 @@ const actorAnd = ref(true);
 const tagAnd = ref(true);
 const matchAnd = ref(true);
 
+const inputs = {};
+
 const fieldsLogicTooltipId = useId();
 const addActorDropdownId = useId();
 const addTagDropdownId = useId();
@@ -132,9 +131,9 @@ async function searchTags() {
 	tagResults.value = res;
 }
 
-function focusActorInput() {
+function focusInput(target) {
 	setTimeout(() => {
-		actorInput.value.focus();
+		inputs[target]?.focus();
 	}, 100);
 }
 
@@ -263,7 +262,8 @@ function rememberThen(domain, checked) {
 						<li class="field-add">
 							<VDropdown
 								:aria-id="addActorDropdownId"
-								@show="focusActorInput"
+								placement="auto"
+								@show="focusInput('actor')"
 							>
 								<button
 									class="button"
@@ -272,7 +272,7 @@ function rememberThen(domain, checked) {
 
 								<template #popper>
 									<input
-										ref="actorInput"
+										:ref="(el) => inputs.actor = el"
 										v-model="actorQuery"
 										class="input"
 										@input="searchActors"
@@ -339,7 +339,11 @@ function rememberThen(domain, checked) {
 						</li>
 
 						<li class="field-add">
-							<VDropdown :aria-id="addTagDropdownId">
+							<VDropdown
+								placement="auto"
+								:aria-id="addTagDropdownId"
+								@show="focusInput('tag')"
+							>
 								<button
 									type="button"
 									class="button"
@@ -347,7 +351,7 @@ function rememberThen(domain, checked) {
 
 								<template #popper>
 									<input
-										ref="tagInput"
+										:ref="(el) => inputs.tag = el"
 										v-model="tagQuery"
 										class="input"
 										@input="searchTags"
@@ -403,7 +407,11 @@ function rememberThen(domain, checked) {
 						</li>
 
 						<li class="field-add">
-							<VDropdown :aria-id="addEntityDropdownId">
+							<VDropdown
+								placement="auto"
+								:aria-id="addEntityDropdownId"
+								@show="focusInput('entity')"
+							>
 								<button
 									type="button"
 									class="button"
@@ -411,7 +419,7 @@ function rememberThen(domain, checked) {
 
 								<template #popper>
 									<input
-										ref="entityInput"
+										:ref="(el) => inputs.entity = el"
 										v-model="entityQuery"
 										class="input"
 										@input="searchEntities"
@@ -465,7 +473,10 @@ function rememberThen(domain, checked) {
 						</li>
 
 						<li class="field-add">
-							<VDropdown :aria-id="addMatchDropdownId">
+							<VDropdown
+								:aria-id="addMatchDropdownId"
+								@show="focusInput('expression')"
+							>
 								<button
 									type="button"
 									class="button"
@@ -482,6 +493,7 @@ function rememberThen(domain, checked) {
 										</select>
 
 										<input
+											:ref="(el) => inputs.expression = el"
 											v-model="matchExpression"
 											placeholder="Expression, // for regex"
 											class="input"

components/stashes/heart.vue

@@ -41,8 +41,6 @@ const itemAlerts = ref(props.item.alerts);
 const itemAlerted = ref(props.item.alerts?.only.length > 0);
 const hasSecondaryStash = computed(() => itemStashes.value.some((itemStash) => !itemStash.isPrimary));
 
-// console.log(props.item);
-
 const done = ref(true);
 const stashMenuDropdownId = useId();
 const stashTogglesDropdownId = useId();
@@ -248,6 +246,8 @@ async function reloadStashes(newStash) {
 			v-if="itemStashes && (showSecondary || (hasSecondaryStash && pageStash?.user.id !== user.id))"
 			:aria-id="stashMenuDropdownId"
 			:shown="showStashes"
+			placement="auto"
+			popper-class="no-outer-scroll"
 			@hide="showStashes = false"
 		>
 			<Icon
@@ -261,6 +261,7 @@ async function reloadStashes(newStash) {
 				<StashMenu
 					:stashes="stashes"
 					:item-stashes="itemStashes"
+					:domain="domain"
 					@stash="(stash) => stashItem(stash)"
 					@unstash="(stash) => unstashItem(stash)"
 					@create="showStashDialog = true"
@@ -274,6 +275,8 @@ async function reloadStashes(newStash) {
 			:triggers="[]"
 			:shown="showStashes"
 			:disabled="showSecondary"
+			placement="auto"
+			popper-class="no-outer-scroll"
 			@hide="showStashes = false"
 		>
 			<template v-if="pageStash?.user.id === user.id">
@@ -316,6 +319,7 @@ async function reloadStashes(newStash) {
 				<StashMenu
 					:stashes="stashes"
 					:item-stashes="itemStashes"
+					:domain="domain"
 					@stash="(stash) => stashItem(stash)"
 					@unstash="(stash) => unstashItem(stash)"
 					@create="showStashDialog = true"

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,46 +12,141 @@ 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
+	.filter((stash) => !stash.isArchived)
+	.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>
-	<ul class="stash-menu nolist noselect">
-		<li
-			v-for="userStash in stashes"
-			:key="`stash-${userStash.id}`"
-			class="menu-item"
-		>
-			<label class="menu-stash">
-				<Checkbox
-					:checked="itemStashes.some((itemStash) => itemStash.id === userStash.id)"
-					@change="(checked) => checked ? emit('stash', userStash) : emit('unstash', userStash)"
-				/>{{ userStash.name }}
-			</label>
-		</li>
+	<div class="stash-menu noselect">
+		<ul class="stash-list nolist noselect">
+			<li
+				v-for="userStash in sortedStashes"
+				:key="`stash-${userStash.id}`"
+				class="menu-item"
+			>
+				<label class="menu-stash">
+					<Checkbox
+						:checked="itemStashes.some((itemStash) => itemStash.id === userStash.id)"
+						@change="(checked) => checked ? emit('stash', userStash) : emit('unstash', userStash)"
+					/>{{ userStash.name }}
+				</label>
+			</li>
+		</ul>
 
-		<li class="menu-item create">
-			<label
+		<div class="menu-actions">
+			<div
 				v-close-popper
-				class="menu-stash"
+				class="menu-item menu-stash menu-create"
 				@click="emit('create')"
 			>
 				<Icon icon="plus3" />
 				New
-			</label>
-		</li>
-	</ul>
+			</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>
 
 <style scoped>
+.stash-menu {
+	display: flex;
+	flex-direction: column;
+	max-height: inherit;
+	overflow: hidden;
+}
+
+.stash-list {
+	overflow-y: auto;
+	min-height: 0; /* lets this flex child actually shrink and scroll instead of pushing the container taller */
+}
+
 .menu-item {
 	display: flex;
 
 	.icon {
 		fill: var(--shadow-weak-10);
 		padding: 0 .55rem 0 .2rem;
+		transform: translateY(-1px);
 	}
 }
 
@@ -58,6 +155,7 @@ const emit = defineEmits(['stash', 'unstash', 'create']);
 	width: 100%;
 	align-items: center;
 	padding: .5rem;
+	box-sizing: border-box;
 
 	&:hover {
 		cursor: pointer;
@@ -72,4 +170,21 @@ const emit = defineEmits(['stash', 'unstash', 'create']);
 		margin-right: .5rem;
 	}
 }
+
+.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>

components/stashes/stashes.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { inject, ref } from 'vue';
+import { computed, inject, ref } from 'vue';
 
 import StashDialog from '#/components/stashes/create.vue';
 import StashTile from '#/components/stashes/tile.vue';
@@ -13,16 +13,55 @@ const stashes = ref(pageContext.pageProps.stashes);
 const profile = ref(pageContext.pageProps.profile);
 
 const showStashDialog = ref(false);
+const showArchived = ref(false);
+const sortings = ['used', 'name', 'size', 'created'];
+const sorting = ref('size');
 
 async function reloadStashes() {
 	// profile.value = await get(`/users/${profile.value.id}`);
 	stashes.value = await get(`/users/${profile.value.id}/stashes`);
 }
+
+const sortedStashes = computed(() => stashes.value
+	.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.stashedScenes + stashB.stashedMovies + stashB.stashedActors)
+				- (stashA.stashedScenes + stashA.stashedMovies + stashA.stashedActors);
+		}
+
+		if (sorting.value === 'created') {
+			return stashA.createdAt - stashB.createdAt;
+		}
+
+		return 0;
+	})
+	.toSorted((stashA, stashB) => {
+		// always put favorites first
+		return stashB.isPrimary - stashA.isPrimary;
+	}));
+
+const activeStashes = computed(() => sortedStashes.value.filter((stash) => !stash.isArchived));
+const archivedStashes = computed(() => sortedStashes.value.filter((stash) => stash.isArchived));
+
+function toggleSorting() {
+	sorting.value = sortings[(sortings.indexOf(sorting.value) + 1) % sortings.length];
+}
 </script>
 
 <template>
 	<section class="profile-section">
-		<div class="section-header">
+		<div class="section-header noselect">
 			<button
 				v-if="profile.id === user?.id"
 				class="button"
@@ -31,6 +70,38 @@ async function reloadStashes() {
 				<Icon icon="folder-plus2" />
 				<span class="button-label">New stash</span>
 			</button>
+
+			<Icon
+				v-if="sorting === 'used'"
+				v-tooltip="'By last stash'"
+				icon="sort-heart"
+				class="sort"
+				@click="toggleSorting"
+			/>
+
+			<Icon
+				v-if="sorting === 'name'"
+				v-tooltip="'By name'"
+				icon="sort-alpha-asc"
+				class="sort"
+				@click="toggleSorting"
+			/>
+
+			<Icon
+				v-if="sorting === 'size'"
+				v-tooltip="'By total stashed'"
+				icon="sort-amount-desc"
+				class="sort"
+				@click="toggleSorting"
+			/>
+
+			<Icon
+				v-if="sorting === 'created'"
+				v-tooltip="'By stash age'"
+				icon="sort-time-asc"
+				class="sort"
+				@click="toggleSorting"
+			/>
 		</div>
 
 		<StashDialog
@@ -41,7 +112,29 @@ async function reloadStashes() {
 
 		<ul class="stashes nolist">
 			<li
-				v-for="stash in stashes"
+				v-for="stash in activeStashes"
+				:key="`stash-${stash.id}`"
+			>
+				<StashTile
+					:stash="stash"
+					:profile="profile"
+					@reload="reloadStashes"
+				/>
+			</li>
+		</ul>
+
+		<h3
+			v-if="archivedStashes.length > 0"
+			class="archived-heading"
+			@click="showArchived = !showArchived"
+		><Icon icon="drawer3" />{{ showArchived ? 'Hide' : `Show ${archivedStashes.length}` }} archived {{ archivedStashes.length > 1 ? 'stashes' : 'stash' }}</h3>
+
+		<ul
+			v-if="showArchived"
+			class="stashes nolist"
+		>
+			<li
+				v-for="stash in archivedStashes"
 				:key="`stash-${stash.id}`"
 			>
 				<StashTile
@@ -59,6 +152,7 @@ async function reloadStashes() {
 	display: flex;
 	justify-content: center;
 	margin-bottom: .5rem;
+	gap: 1rem;
 }
 
 .stashes {
@@ -68,6 +162,30 @@ async function reloadStashes() {
 	padding: 0 0 1rem 0;
 }
 
+.sort {
+	padding: .5rem 1rem;
+	fill: var(--glass);
+
+	&:hover {
+		fill: var(--primary);
+		cursor: pointer;
+	}
+}
+
+.archived-heading {
+	display: flex;
+	align-items: center;
+	font-size: 1rem;
+	color: var(--glass);
+	cursor: pointer;
+
+	.icon {
+		fill: var(--glass);
+		margin-right: .75rem;
+		transform: translateY(-1px);
+	}
+}
+
 @media(--compact) {
 	.stashes {
 		padding: 0 1rem 1rem 1rem;

components/stashes/tile.vue

@@ -91,6 +91,30 @@ async function rename() {
 
 	showRenameDialog.value = false;
 }
+
+async function archive(isArchived = true) {
+	if (done.value === false) {
+		return;
+	}
+
+	done.value = false;
+
+	await patch(`/stashes/${props.stash.id}`, { isArchived }, {
+		...isArchived
+			? {
+					undoFeedback: `Stash archived`,
+				}
+			: {
+					successFeedback: `Stash revived`,
+				},
+		errorFeedback: `Failed to ${isArchived ? 'archive' : 'revive'} stash`,
+		appendErrorMessage: true,
+	}).finally(() => { done.value = true; });
+
+	emit('reload');
+
+	showRenameDialog.value = false;
+}
 </script>
 
 <template>
@@ -159,6 +183,28 @@ async function rename() {
 							/>Rename
 						</li>
 
+						<li
+							v-if="stash.isArchived"
+							class="menu-item"
+							@click="archive(false)"
+						>
+							<Icon
+								icon="drawer-out"
+								class="noselect"
+							/>Revive
+						</li>
+
+						<li
+							v-else
+							class="menu-item"
+							@click="archive()"
+						>
+							<Icon
+								icon="drawer-in"
+								class="noselect"
+							/>Archive
+						</li>
+
 						<li
 							v-if="!stash.isPrimary"
 							class="menu-item remove"
@@ -306,6 +352,7 @@ async function rename() {
 		display: flex;
 		margin-right: .75rem;
 		fill: var(--glass);
+		transform: translateY(-1px);
 	}
 
 	&.remove {

package-lock.json

@@ -1,11 +1,11 @@
 {
   "name": "traxxx-web",
-  "version": "0.57.7",
+  "version": "0.57.15",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "version": "0.57.7",
+      "version": "0.57.15",
       "dependencies": {
         "@brillout/json-serializer": "^0.5.25",
         "@dicebear/collection": "7.0.5",

package.json

@@ -92,7 +92,7 @@
   "overrides": {
     "vite": "$vite"
   },
-  "version": "0.57.7",
+  "version": "0.57.15",
   "imports": {
     "#/*": "./*.js"
   },

pages/users/@username/+Page.vue

@@ -20,7 +20,7 @@ const domain = pageContext.routeParams.domain;
 
 const user = pageContext.user;
 const profile = ref(pageContext.pageProps.profile);
-const primaryStash = pageContext.assets.primaryStash;
+const primaryStash = pageContext.assets?.primaryStash;
 
 const showFilters = ref(false);
 

pages/users/@username/+onBeforeRender.js

@@ -31,7 +31,7 @@ async function fetchRevisions(pageContext) {
 
 export async function onBeforeRender(pageContext) {
 	const [profile, alerts, userRevisions, keys] = await Promise.all([
-		fetchUser(pageContext.routeParams.username, {}, pageContext.user),
+		fetchUser(pageContext.routeParams.username, { throwError: false }, pageContext.user),
 		pageContext.routeParams.section === 'alerts' && pageContext.routeParams.username === pageContext.user?.username
 			? fetchAlerts(pageContext.user)
 			: [],

renderer/app.js

@@ -32,7 +32,14 @@ function createApp(Page, pageProps, pageContext) {
 
 	app.provide('pageContext', pageContext);
 
-	app.use(FloatingVue, { container: '#container' });
+	app.use(FloatingVue, {
+		container: '#container',
+		autoBoundaryMaxSize: true,
+		shiftCrossAxis: true,
+		overflowPadding: 10,
+		arrowPadding: 10,
+	});
+
 	app.use(VueVirtualScroller);
 
 	app.component('Link', Link);

renderer/container.vue

@@ -189,7 +189,7 @@ onMounted(() => {
 	justify-content: center;
 	position: fixed;
 	bottom: 2rem;
-	z-index: 1000;
+	z-index: 10000;
 	pointer-events: none;
 }
 

src/alerts.js

@@ -754,7 +754,7 @@ export async function notify(sceneIds, options = {}) {
 
 		const docs = stashedEntries.map((stash) => ({
 			replace: {
-				index: 'scenes_stashed',
+				table: 'scenes_stashed',
 				id: stash.id,
 				doc: {
 					scene_id: stash.scene_id,

src/stashes.js

@@ -25,10 +25,12 @@ export function curateStash(stash, assets = {}) {
 		slug: stash.slug,
 		isPrimary: stash.primary,
 		isPublic: stash.public,
+		isArchived: stash.archived,
 		createdAt: stash.created_at,
 		stashedScenes: stash.stashed_scenes ?? null,
 		stashedMovies: stash.stashed_movies ?? null,
 		stashedActors: stash.stashed_actors ?? null,
+		lastStashAt: stash.last_stash_at,
 		user: assets.user
 			? {
 					id: assets.user.id,
@@ -64,7 +66,8 @@ function curateStashEntry(stash, user) {
 		user_id: user?.id || undefined,
 		name: stash.name || undefined,
 		slug: slugify(stash.name) || undefined,
-		public: stash.isPublic ?? false,
+		public: stash.isPublic ?? undefined,
+		archived: stash.isArchived ?? undefined,
 		comment: stash.comment,
 		meta: stash.meta,
 	};
@@ -150,7 +153,12 @@ export async function fetchUserStashes(usernameOrId, reqUser) {
 			if (userId !== reqUser?.id) {
 				builder.where('public', true);
 			}
-		});
+		})
+		.orderBy([
+			{ column: 'stashes.primary', order: 'desc' },
+			{ column: 'stashes_meta.last_stash_at', order: 'desc' },
+			{ column: 'stashes.name', order: 'asc' },
+		]);
 
 	return stashes.map((stash) => curateStash(stash, { user: reqUser }));
 }