Extend sorting options

src/lib/styles/main.css

@@ -858,7 +858,7 @@ select option:hover {
 }
 
 .sort-container {
-  min-width: 8rem;
+  min-width: 11rem;
   max-width: 50%;
 }
 

src/routes/+page.svelte

@@ -245,9 +245,11 @@
 						bind:value={sortOption}
 						onchange={handleSortChange}>
 						<option value="alphabetical">A-Z</option>
-						<option value="lastAdded">Newest</option>
-						<option value="firstAdded">Oldest</option>
-						<option value="recentlyChanged">Recently Changed</option>
+						<option value="reverseAlphabetical">Z-A</option>
+						<option value="lastAdded">Newest Created</option>
+						<option value="firstAdded">Oldest Created</option>
+						<option value="recentlyChanged">Newest Updated</option>
+						<option value="oldestChanged">Oldest Updated</option>
 					</select>
 				</div>
 			{/if}

src/routes/api/items/search/+server.ts

@@ -10,12 +10,16 @@ function sortItems(items: IBasicItemPopulated[], sortOption: string): IBasicItem
 		switch (sortOption) {
 			case 'alphabetical':
 				return a.name.localeCompare(b.name);
+			case 'reverseAlphabetical':
+				return b.name.localeCompare(a.name);
 			case 'firstAdded':
 				return new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
 			case 'lastAdded':
 				return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
 			case 'recentlyChanged':
 				return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime();
+			case 'oldestChanged':
+				return new Date(a.updatedAt).getTime() - new Date(b.updatedAt).getTime();
 			default:
 				return a.name.localeCompare(b.name);
 		}