Added stash archiving.

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 {