Added stash archiving.

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>

components/stashes/menu.vue

@@ -30,6 +30,7 @@ const domainKey = {
 }[props.domain];
 
 const sortedStashes = computed(() => props.stashes
+	.filter((stash) => !stash.isArchived)
 	.toSorted((stashA, stashB) => {
 		return stashA.createdAt - stashB.createdAt;
 	})

components/stashes/stashes.vue

@@ -13,6 +13,7 @@ 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');
 
@@ -50,6 +51,9 @@ const sortedStashes = computed(() => stashes.value
 		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];
 }
@@ -108,7 +112,29 @@ function toggleSorting() {
 
 		<ul class="stashes nolist">
 			<li
-				v-for="stash in sortedStashes"
+				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
@@ -146,6 +172,20 @@ function toggleSorting() {
 	}
 }
 
+.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 {

src/stashes.js

@@ -25,6 +25,7 @@ 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,
@@ -65,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,
 	};