rework following

Author: disnet

src/lib/components/Sidebar.svelte

@@ -177,33 +177,30 @@
 		return subs;
 	});
 
-	// Sort followed users: 1) with unread shares, 2) followed in-app, 3) others (by DID)
+	// Sort followed users: only Skyreader (in-app) follows, sorted by unread shares then by DID
 	let sortedFollowedUsers = $derived(() => {
 		const counts = sharerCounts();
-		let users = [...socialStore.followedUsers].sort((a, b) => {
-			const countA = counts.get(a.did) || 0;
-			const countB = counts.get(b.did) || 0;
-			const hasUnreadA = countA > 0;
-			const hasUnreadB = countB > 0;
-
-			// Tier 1: accounts with unread shares
-			if (hasUnreadA && !hasUnreadB) return -1;
-			if (!hasUnreadA && hasUnreadB) return 1;
-
-			// Within unread tier, sort by count descending
-			if (hasUnreadA && hasUnreadB) {
-				return countB - countA;
-			}
-
-			// Tier 2: accounts followed in-app
-			const aIsInApp = a.source === 'inapp' || a.source === 'both';
-			const bIsInApp = b.source === 'inapp' || b.source === 'both';
-			if (aIsInApp && !bIsInApp) return -1;
-			if (!aIsInApp && bIsInApp) return 1;
-
-			// Tier 3: by DID (stable sort - profiles are fetched async in UserItem)
-			return a.did.localeCompare(b.did);
-		});
+		// Filter to only Skyreader follows (source 'inapp' or 'both')
+		let users = [...socialStore.followedUsers]
+			.filter((u) => u.source === 'inapp' || u.source === 'both')
+			.sort((a, b) => {
+				const countA = counts.get(a.did) || 0;
+				const countB = counts.get(b.did) || 0;
+				const hasUnreadA = countA > 0;
+				const hasUnreadB = countB > 0;
+
+				// Tier 1: accounts with unread shares
+				if (hasUnreadA && !hasUnreadB) return -1;
+				if (!hasUnreadA && hasUnreadB) return 1;
+
+				// Within unread tier, sort by count descending
+				if (hasUnreadA && hasUnreadB) {
+					return countB - countA;
+				}
+
+				// Tier 2: by DID (stable sort - profiles are fetched async in UserItem)
+				return a.did.localeCompare(b.did);
+			});
 		if (sidebarStore.showOnlyUnread.shared) {
 			users = users.filter((u) => (counts.get(u.did) || 0) > 0);
 		}
@@ -394,6 +391,9 @@
 			onLabelClick={() => selectFilter('following')}
 			onUnreadToggle={() => sidebarStore.toggleShowOnlyUnread('shared')}
 		>
+			<a href="/following" class="manage-link" onclick={() => sidebarStore.closeMobile()}>
+				Manage
+			</a>
 			{@const allUsers = sortedFollowedUsers()}
 			{@const displayedUsers = allUsers.slice(0, 10)}
 			{#each displayedUsers as user (user.did)}
@@ -650,6 +650,21 @@
 		color: var(--color-text-secondary);
 	}
 
+	.manage-link {
+		display: block;
+		padding: 0.5rem 1.5rem;
+		font-size: 0.8125rem;
+		color: var(--color-text-secondary);
+		text-decoration: none;
+		transition: background-color 0.15s;
+		border-radius: 8px;
+	}
+
+	.manage-link:hover {
+		background-color: var(--color-bg-hover, rgba(0, 0, 0, 0.05));
+		color: var(--color-primary);
+	}
+
 	.add-feed-item {
 		display: flex;
 		align-items: center;

src/lib/services/api.ts

@@ -1,6 +1,7 @@
 import type {
 	DiscoverUser,
 	FeedItem,
+	FollowedUserDetailed,
 	GroupedShare,
 	ParsedFeed,
 	ReshareActivity,
@@ -178,6 +179,22 @@ class ApiClient {
 		return this.fetch(`/api/social/following${query ? `?${query}` : ''}`);
 	}
 
+	async getFollowingDetailed(
+		source: 'skyreader' | 'bluesky',
+		limit = 50,
+		offset = 0
+	): Promise<{
+		users: FollowedUserDetailed[];
+		nextOffset: number | null;
+	}> {
+		const params = new URLSearchParams({
+			source,
+			limit: limit.toString(),
+			offset: offset.toString(),
+		});
+		return this.fetch(`/api/social/following-detailed?${params}`);
+	}
+
 	async getDiscoverUsers(limit = 20): Promise<{ users: DiscoverUser[] }> {
 		const params = new URLSearchParams({ limit: limit.toString() });
 		return this.fetch(`/api/discover?${params}`);

src/lib/stores/social.svelte.ts

@@ -3,7 +3,7 @@ import { api } from '$lib/services/api';
 import { profileService } from '$lib/services/profiles';
 import { syncQueue, type FollowPayload } from '$lib/services/sync-queue';
 import { syncStore } from './sync.svelte';
-import type { DiscoverUser, SocialShare } from '$lib/types';
+import type { DiscoverUser, FollowedUserDetailed, SocialShare } from '$lib/types';
 import { generateTid } from '$lib/utils/tid';
 
 export interface FollowedUser {
@@ -16,8 +16,14 @@ function createSocialStore() {
 	let popularShares = $state<(SocialShare & { shareCount: number })[]>([]);
 	let followedUsers = $state<FollowedUser[]>([]);
 	let discoverUsers = $state<DiscoverUser[]>([]);
+	let skyreaderFollows = $state<FollowedUserDetailed[]>([]);
+	let blueskyFollows = $state<FollowedUserDetailed[]>([]);
+	let skyreaderFollowsNextOffset = $state<number | null>(null);
+	let blueskyFollowsNextOffset = $state<number | null>(null);
 	let isLoadingFeed = $state(false);
 	let isLoadingUsers = $state(false);
+	let isLoadingSkyreaderFollows = $state(false);
+	let isLoadingBlueskyFollows = $state(false);
 	let isDiscoverLoading = $state(false);
 	let isSyncing = $state(false);
 	let cursor = $state<string | null>(null);
@@ -131,6 +137,60 @@ function createSocialStore() {
 		}
 	}
 
+	async function loadSkyreaderFollows(reset = true) {
+		if (isLoadingSkyreaderFollows) return;
+		if (!reset && skyreaderFollowsNextOffset === null) return;
+
+		isLoadingSkyreaderFollows = true;
+		error = null;
+
+		try {
+			const offset = reset ? 0 : (skyreaderFollowsNextOffset ?? 0);
+			const result = await api.getFollowingDetailed('skyreader', 50, offset);
+
+			if (reset) {
+				skyreaderFollows = result.users;
+			} else {
+				skyreaderFollows = [...skyreaderFollows, ...result.users];
+			}
+			skyreaderFollowsNextOffset = result.nextOffset;
+
+			// Prefetch profiles from Bluesky
+			profileService.prefetch(result.users.map((u) => u.did));
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to load Skyreader follows';
+		} finally {
+			isLoadingSkyreaderFollows = false;
+		}
+	}
+
+	async function loadBlueskyFollows(reset = true) {
+		if (isLoadingBlueskyFollows) return;
+		if (!reset && blueskyFollowsNextOffset === null) return;
+
+		isLoadingBlueskyFollows = true;
+		error = null;
+
+		try {
+			const offset = reset ? 0 : (blueskyFollowsNextOffset ?? 0);
+			const result = await api.getFollowingDetailed('bluesky', 50, offset);
+
+			if (reset) {
+				blueskyFollows = result.users;
+			} else {
+				blueskyFollows = [...blueskyFollows, ...result.users];
+			}
+			blueskyFollowsNextOffset = result.nextOffset;
+
+			// Prefetch profiles from Bluesky
+			profileService.prefetch(result.users.map((u) => u.did));
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to load Bluesky follows';
+		} finally {
+			isLoadingBlueskyFollows = false;
+		}
+	}
+
 	async function followUser(did: string): Promise<boolean> {
 		const rkey = generateTid();
 
@@ -199,6 +259,10 @@ function createSocialStore() {
 		popularShares = [];
 		followedUsers = [];
 		discoverUsers = [];
+		skyreaderFollows = [];
+		blueskyFollows = [];
+		skyreaderFollowsNextOffset = null;
+		blueskyFollowsNextOffset = null;
 		cursor = null;
 		hasMore = true;
 		error = null;
@@ -221,9 +285,27 @@ function createSocialStore() {
 		get discoverUsers() {
 			return discoverUsers;
 		},
+		get skyreaderFollows() {
+			return skyreaderFollows;
+		},
+		get blueskyFollows() {
+			return blueskyFollows;
+		},
+		get hasMoreSkyreaderFollows() {
+			return skyreaderFollowsNextOffset !== null;
+		},
+		get hasMoreBlueskyFollows() {
+			return blueskyFollowsNextOffset !== null;
+		},
 		get isLoading() {
 			return isLoading;
 		},
+		get isLoadingSkyreaderFollows() {
+			return isLoadingSkyreaderFollows;
+		},
+		get isLoadingBlueskyFollows() {
+			return isLoadingBlueskyFollows;
+		},
 		get isDiscoverLoading() {
 			return isDiscoverLoading;
 		},
@@ -240,6 +322,8 @@ function createSocialStore() {
 		loadPopular,
 		loadFollowedUsers,
 		loadDiscoverUsers,
+		loadSkyreaderFollows,
+		loadBlueskyFollows,
 		followUser,
 		unfollowInApp,
 		syncFollows,

src/lib/types/index.ts

@@ -193,3 +193,17 @@ export interface InappFollow {
 	subjectDid: string;
 	createdAt: string;
 }
+
+export interface FollowedUserDetailed {
+	did: string;
+	source: 'bluesky' | 'inapp' | 'both';
+	shareCount: number;
+	lastSharedAt: string | null;
+	followedAt: number;
+	rkey?: string;
+	recentShares?: Array<{
+		itemUrl: string;
+		itemTitle?: string;
+		createdAt: string;
+	}>;
+}