feat: saved search

src/components/explore/my-feeds-section.tsx

···
 
 import type { SavedFeed } from '~/lib/preferences/account';
 import { useSession } from '~/lib/states/session';
+import { assertUnreachable } from '~/lib/utils/invariant';
 import { reconcile } from '~/lib/utils/misc';
 
 import Avatar from '../avatar';
+import MagnifyingGlassOutlinedIcon from '../icons-central/magnifying-glass-outline';
 
 const MyFeedsSection = () => {
 	const { currentAccount } = useSession();
···
 	}
 
 	const feeds = createMemo((prev: SavedFeed[] | undefined) => {
-		return reconcile(prev, currentAccount.preferences.feeds, (item) => item.info.uri);
+		return reconcile(prev, currentAccount.preferences.feeds, (feed) => {
+			switch (feed.type) {
+				case 'generator':
+				case 'list': {
+					return `${feed.type}:${feed.info.uri}`;
+				}
+				case 'search': {
+					return `${feed.type}:${feed.query}:${feed.kind}`;
+				}
+			}
+		});
 	});
 
 	return (
···
 				{(feed) => {
 					const type = feed.type;
 
-					let href: string | undefined;
-					{
-						const uri = parseAtUri(feed.info.uri);
-						if (type === 'generator') {
+					let href: string;
+					switch (type) {
+						case 'generator': {
+							const uri = parseAtUri(feed.info.uri);
 							href = `/${uri.repo}/feeds/${uri.rkey}`;
-						} else if (type === 'list') {
+							break;
+						}
+						case 'list': {
+							const uri = parseAtUri(feed.info.uri);
 							href = `/${uri.repo}/lists/${uri.rkey}`;
+							break;
+						}
+						case 'search': {
+							href = `/search?q=${encodeURIComponent(feed.query)}&t=${feed.kind}`;
+							break;
+						}
+						default: {
+							assertUnreachable(feed);
 						}
 					}
 
···
 							href={href}
 							class="flex items-center gap-4 px-4 py-3 hover:bg-contrast/sm-pressed active:bg-contrast/md"
 						>
-							<Avatar type={feed.type} src={feed.info.avatar} />
+							{type === 'generator' || type === 'list' ? (
+								<Avatar type={type} src={feed.info.avatar} />
+							) : type === 'search' ? (
+								<div class="grid h-9 w-9 place-items-center rounded-md bg-accent text-xl text-accent-fg">
+									<MagnifyingGlassOutlinedIcon />
+								</div>
+							) : null}
+
 							<span class="text-sm font-bold">
 								{(() => {
-									if (type === 'generator') {
-										return feed.info.displayName;
-									} else if (type === 'list') {
-										return feed.info.name;
+									switch (type) {
+										case 'generator': {
+											return feed.info.displayName;
+										}
+										case 'list': {
+											return feed.info.name;
+										}
+										case 'search': {
+											return feed.name || feed.query;
+										}
 									}
 								})()}
 							</span>

src/components/search/search-overflow-menu.tsx

···
+import { createMemo } from 'solid-js';
+
+import { useModalContext } from '~/globals/modals';
+
+import { useSession } from '~/lib/states/session';
+
+import AddOutlinedIcon from '~/components/icons-central/add-outline';
+import LinkOutlinedIcon from '~/components/icons-central/link-outline';
+import OpenInNewOutlinedIcon from '~/components/icons-central/open-in-new-outline';
+import ShareOutlinedIcon from '~/components/icons-central/share-outline';
+import TrashOutlinedIcon from '~/components/icons-central/trash-outline';
+import * as Menu from '~/components/menu';
+
+export interface SearchOverflowMenuProps {
+	anchor: HTMLElement;
+	query: string;
+	kind: string;
+}
+
+const hasWebShare = typeof navigator.share === 'function';
+
+const SearchOverflowMenu = (props: SearchOverflowMenuProps) => {
+	const { close } = useModalContext();
+	const { currentAccount } = useSession();
+
+	const isSaveable = createMemo(() => {
+		const kind = props.kind;
+		return kind === 'latest_posts' || kind === 'top_posts';
+	});
+
+	const saved = createMemo(() => {
+		if (!currentAccount || !isSaveable()) {
+			return -1;
+		}
+
+		const query = props.query;
+		const kind = props.kind;
+
+		const feeds = currentAccount.preferences.feeds;
+		const index = feeds.findIndex((f) => f.type === 'search' && f.query === query && f.kind === kind);
+
+		return index;
+	});
+
+	return (
+		<Menu.Container anchor={props.anchor}>
+			{currentAccount && isSaveable() && (
+				<Menu.Item
+					icon={saved() === -1 ? AddOutlinedIcon : TrashOutlinedIcon}
+					label={saved() === -1 ? `Save to my feeds` : `Remove from my feeds`}
+					onClick={() => {
+						const query = props.query;
+						const kind = props.kind;
+
+						const feeds = currentAccount.preferences.feeds;
+						const index = saved();
+
+						close();
+
+						if (index !== -1) {
+							feeds.splice(index, 1);
+						} else {
+							feeds.push({ type: 'search', name: '', query, kind });
+						}
+					}}
+				/>
+			)}
+
+			<Menu.Item
+				icon={hasWebShare ? ShareOutlinedIcon : LinkOutlinedIcon}
+				label={`${hasWebShare ? `Share` : `Copy`} link`}
+				onClick={() => {
+					const url = location.origin + location.pathname + location.search;
+
+					close();
+
+					if (hasWebShare) {
+						navigator.share({ url });
+					} else {
+						navigator.clipboard.writeText(url);
+					}
+				}}
+			/>
+
+			<Menu.Item
+				icon={OpenInNewOutlinedIcon}
+				label="Open in Bluesky app"
+				onClick={() => {
+					const url = `https://bsky.app/search?q=${encodeURIComponent(props.query)}`;
+
+					close();
+					window.open(url, '_blank');
+				}}
+			/>
+		</Menu.Container>
+	);
+};
+
+export default SearchOverflowMenu;

src/lib/preferences/account.ts

···
 	definitions: Record<At.DID, ModerationLabeler>;
 }
 
-export type SavedFeed = SavedGeneratorFeed | SavedListFeed;
+export type SavedFeed = SavedGeneratorFeed | SavedListFeed | SavedSearchFeed;
 
 export interface SavedGeneratorFeed {
 	readonly type: 'generator';
···
 	readonly type: 'list';
 	pinned: boolean;
 	info: AppBskyGraphDefs.ListView;
+}
+
+export interface SavedSearchFeed {
+	readonly type: 'search';
+	name: string;
+	query: string;
+	kind: string;
 }
 
 export interface PersistedThreadgate {

src/views/search.tsx

···
 import { tokenize } from '@atcute/bluesky-search-parser';
 import { Freeze, ShowFreeze } from '@mary/solid-freeze';
 
-import { hasModals } from '~/globals/modals';
+import { hasModals, openModal } from '~/globals/modals';
 
 import { parseEndDate, parseStartDate, splitFilters, stringifySearch } from '~/lib/bsky/search';
 import { createDerivedSignal } from '~/lib/hooks/derived-signal';
···
 import SearchBar from '~/components/main/search-bar';
 import * as Page from '~/components/page';
 import { SearchBarProvider } from '~/components/search/context';
+import SearchOverflowMenu from '~/components/search/search-overflow-menu';
 import SearchSuggestionsView from '~/components/search/search-suggestions-view';
 import TabBar from '~/components/tab-bar';
 
···
 
 				{!isInputFocused() && (
 					<Page.HeaderAccessory>
-						<IconButton icon={MoreHorizOutlinedIcon} title="Search actions" />
+						<IconButton
+							icon={MoreHorizOutlinedIcon}
+							title="Search actions"
+							onClick={(ev) => {
+								const anchor = ev.currentTarget;
+
+								openModal(() => <SearchOverflowMenu anchor={anchor} query={params.q} kind={params.t} />);
+							}}
+						/>
 					</Page.HeaderAccessory>
 				)}
 			</Page.Header>