add sort option on feeds #69

Author: disnet

src/lib/components/Icon.svelte

@@ -22,7 +22,9 @@
 		| 'list'
 		| 'newspaper'
 		| 'layers'
-		| 'external-link';
+		| 'external-link'
+		| 'arrow-down'
+		| 'arrow-up';
 
 	interface Props {
 		name: IconName;
@@ -132,6 +134,12 @@
 		<path d="M15 3h6v6" />
 		<path d="M10 14 21 3" />
 		<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h6" />
+	{:else if name === 'arrow-down'}
+		<path d="M12 5v14" />
+		<path d="m19 12-7 7-7-7" />
+	{:else if name === 'arrow-up'}
+		<path d="M12 19V5" />
+		<path d="m5 12 7-7 7 7" />
 	{/if}
 </svg>
 

src/lib/components/feed/FeedPageHeader.svelte

@@ -5,6 +5,7 @@
 	import Icon from '$lib/components/Icon.svelte';
 	import { sidebarStore } from '$lib/stores/sidebar.svelte';
 	import { formatRelativeTime } from '$lib/utils/date';
+	import { preferences } from '$lib/stores/preferences.svelte';
 
 	interface Props {
 		title: string;
@@ -155,6 +156,21 @@
 						<span class="toggle-divider"></span>
 					{/if}
 					{#if showViewToggle}
+						<button
+							class="sort-toggle"
+							onclick={() => preferences.toggleSortOrder()}
+							aria-label={preferences.sortOrder === 'newest'
+								? 'Sorted by newest first, click to sort by oldest'
+								: 'Sorted by oldest first, click to sort by newest'}
+							title={preferences.sortOrder === 'newest' ? 'Newest first' : 'Oldest first'}
+						>
+							<Icon
+								name={preferences.sortOrder === 'newest' ? 'arrow-down' : 'arrow-up'}
+								size={16}
+							/>
+							<span class="btn-label">{preferences.sortOrder === 'newest' ? 'New' : 'Old'}</span>
+						</button>
+						<span class="toggle-divider"></span>
 						<button
 							class:active={showOnlyUnread}
 							onclick={() => onToggleUnread(true)}

src/lib/stores/feedView.svelte.ts

@@ -4,6 +4,7 @@ import { readingStore } from './reading.svelte';
 import { shareReadingStore } from './shareReading.svelte';
 import { sharesStore } from './shares.svelte';
 import { socialStore } from './social.svelte';
+import { preferences } from './preferences.svelte';
 import type { Article, SocialShare, CombinedFeedItem, UserShare } from '$lib/types';
 
 export type ViewMode = 'articles' | 'shares' | 'userShares' | 'combined';
@@ -57,34 +58,44 @@ function createFeedViewStore() {
 		// Access articlesStore version for reactivity
 		const allArticles = articlesStore.allArticles;
 		const positions = readingStore.readPositions;
+		const sortOrder = preferences.sortOrder;
+
+		let articles: Article[];
 
 		if (starredFilter) {
 			// Starred view
-			return allArticles.filter((a) => positions.get(a.guid)?.starred === true);
-		}
-
-		let articles = allArticles;
+			articles = allArticles.filter((a) => positions.get(a.guid)?.starred === true);
+		} else {
+			articles = allArticles;
 
-		// Filter by subscription
-		if (feedFilter) {
-			const feedId = parseInt(feedFilter);
-			articles = articles.filter((a) => a.subscriptionId === feedId);
-		}
+			// Filter by subscription
+			if (feedFilter) {
+				const feedId = parseInt(feedFilter);
+				articles = articles.filter((a) => a.subscriptionId === feedId);
+			}
 
-		// Filter to unread only, but keep articles read this session visible
-		if (showOnlyUnread) {
-			articles = articles.filter(
-				(a) => !positions.has(a.guid) || readArticleGuidsThisSession.has(a.guid)
-			);
+			// Filter to unread only, but keep articles read this session visible
+			if (showOnlyUnread) {
+				articles = articles.filter(
+					(a) => !positions.has(a.guid) || readArticleGuidsThisSession.has(a.guid)
+				);
+			}
 		}
 
 		// Deduplicate by GUID
 		const seen = new Set<string>();
-		return articles.filter((a) => {
+		articles = articles.filter((a) => {
 			if (seen.has(a.guid)) return false;
 			seen.add(a.guid);
 			return true;
 		});
+
+		// Apply sort order (articles come from liveDb sorted newest first)
+		if (sortOrder === 'oldest') {
+			articles = [...articles].reverse();
+		}
+
+		return articles;
 	});
 
 	// Derived: paginated articles (limited to loadedArticleCount)
@@ -94,6 +105,7 @@ function createFeedViewStore() {
 	let displayedShares = $derived.by((): SocialShare[] => {
 		const shares = socialStore.shares;
 		const positions = shareReadingStore.shareReadPositions;
+		const sortOrder = preferences.sortOrder;
 
 		let filtered: SocialShare[];
 		if (sharerFilter) {
@@ -109,15 +121,26 @@ function createFeedViewStore() {
 			);
 		}
 
+		// Apply sort order
+		filtered.sort((a, b) => {
+			const dateA = new Date(a.itemPublishedAt || a.createdAt).getTime();
+			const dateB = new Date(b.itemPublishedAt || b.createdAt).getTime();
+			return sortOrder === 'newest' ? dateB - dateA : dateA - dateB;
+		});
+
 		return filtered;
 	});
 
 	// Derived: user's own shares
 	let displayedUserShares = $derived.by((): UserShare[] => {
 		if (!sharedFilter) return [];
 
+		const sortOrder = preferences.sortOrder;
 		const shares = Array.from(sharesStore.userShares.values());
-		shares.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
+		shares.sort((a, b) => {
+			const diff = new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
+			return sortOrder === 'newest' ? diff : -diff;
+		});
 		return shares;
 	});
 
@@ -138,7 +161,11 @@ function createFeedViewStore() {
 			})),
 		];
 
-		combined.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+		const sortOrder = preferences.sortOrder;
+		combined.sort((a, b) => {
+			const diff = new Date(b.date).getTime() - new Date(a.date).getTime();
+			return sortOrder === 'newest' ? diff : -diff;
+		});
 		return combined;
 	});
 

src/lib/stores/preferences.svelte.ts

@@ -2,6 +2,7 @@ import { browser } from '$app/environment';
 
 export type ArticleFont = 'sans-serif' | 'serif' | 'mono';
 export type ArticleFontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type SortOrder = 'newest' | 'oldest';
 
 const FONT_SIZE_ORDER: ArticleFontSize[] = ['xs', 'sm', 'md', 'lg', 'xl'];
 
@@ -10,6 +11,7 @@ interface PreferencesState {
 	articleFontSize: ArticleFontSize;
 	scrollToMarkAsRead: boolean;
 	expandAllItems: boolean;
+	sortOrder: SortOrder;
 }
 
 const STORAGE_KEY = 'skyreader-preferences';
@@ -20,6 +22,7 @@ function createPreferencesStore() {
 		articleFontSize: 'md',
 		scrollToMarkAsRead: false,
 		expandAllItems: false,
+		sortOrder: 'newest',
 	});
 
 	// Restore from localStorage on init
@@ -40,6 +43,9 @@ function createPreferencesStore() {
 				if (parsed.expandAllItems !== undefined) {
 					state.expandAllItems = parsed.expandAllItems;
 				}
+				if (parsed.sortOrder) {
+					state.sortOrder = parsed.sortOrder;
+				}
 			} catch {
 				localStorage.removeItem(STORAGE_KEY);
 			}
@@ -93,6 +99,16 @@ function createPreferencesStore() {
 		save();
 	}
 
+	function setSortOrder(order: SortOrder) {
+		state.sortOrder = order;
+		save();
+	}
+
+	function toggleSortOrder() {
+		state.sortOrder = state.sortOrder === 'newest' ? 'oldest' : 'newest';
+		save();
+	}
+
 	return {
 		get articleFont() {
 			return state.articleFont;
@@ -106,13 +122,18 @@ function createPreferencesStore() {
 		get expandAllItems() {
 			return state.expandAllItems;
 		},
+		get sortOrder() {
+			return state.sortOrder;
+		},
 		setArticleFont,
 		setArticleFontSize,
 		increaseFontSize,
 		decreaseFontSize,
 		resetFontSize,
 		setScrollToMarkAsRead,
 		setExpandAllItems,
+		setSortOrder,
+		toggleSortOrder,
 	};
 }