Added stash archiving.

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;