refactor: revamp feed info

src/components/feeds/feed-info-prompt.tsx

···
+import type { AppBskyFeedDefs } from '@atcute/client/lexicons';
+
+import { parseAtUri } from '~/api/types/at-uri';
+
+import { useModalContext } from '~/globals/modals';
+
+import { formatLong } from '~/lib/intl/number';
+
+import Avatar from '~/components/avatar';
+import Button from '~/components/button';
+import Divider from '~/components/divider';
+import * as Prompt from '~/components/prompt';
+
+import HeartOutlinedIcon from '../icons-central/heart-outline';
+
+export interface FeedInfoPromptProps {
+	/** Expected to be static */
+	feed: AppBskyFeedDefs.GeneratorView;
+}
+
+const FeedInfoPrompt = (props: FeedInfoPromptProps) => {
+	const { close } = useModalContext();
+
+	const feed = props.feed;
+
+	const authorUrl = `/${feed.creator.did}`;
+	const feedUrl = `${authorUrl}/feeds/${parseAtUri(feed.uri).rkey}`;
+
+	return (
+		<Prompt.Container maxWidth="md">
+			<div>
+				<Avatar type="generator" src={/* @once */ feed.avatar} size={null} class="h-12 w-12" />
+
+				<p class="mt-4 text-xl font-bold">{/* @once */ feed.displayName.trim()}</p>
+				<p class="mt-2 text-sm empty:hidden">{feed.description}</p>
+
+				<div class="mt-2">
+					<a href={`${feedUrl}/likes`} onClick={close} class="text-de text-contrast-muted hover:underline">
+						{feed.likeCount === 1
+							? `Liked by ${formatLong(feed.likeCount)} user`
+							: `Liked by ${formatLong(feed.likeCount ?? 0)} users`}
+					</a>
+				</div>
+
+				<div class="mt-4 flex gap-2">
+					<Avatar
+						type="user"
+						src={/* @once */ feed.creator.avatar}
+						href={authorUrl}
+						onClick={close}
+						size="xs"
+					/>
+
+					<a href={authorUrl} onClick={close} class="text-sm font-medium text-contrast-muted">
+						{/* @once */ feed.creator.handle}
+					</a>
+				</div>
+			</div>
+		</Prompt.Container>
+	);
+};
+
+export default FeedInfoPrompt;

src/components/prompt.tsx

···
 
 const PromptContainer = (props: PromptContainerProps) => {
 	const { close, isActive } = useModalContext();
-	const isDesktop = useMediaQuery('(width >= 688px) and (height >= 500px)');
+	const isDesktop = useMediaQuery('((width >= 480px) and (height >= 500px))');
 
 	const isDisabled = () => !!props.disabled;
 
···
 		} else {
 			return (
 				<Fieldset standalone disabled={isDisabled()}>
-					<div class="flex grow flex-col self-stretch overflow-y-auto bg-contrast-overlay/40">
+					<div class="flex grow flex-col items-center self-stretch overflow-y-auto bg-contrast-overlay/40">
 						<div class="h-[40dvh] shrink-0"></div>
-						<div ref={containerRef} role="menu" class="mt-auto flex flex-col rounded-t-xl bg-background p-4">
+						<div
+							ref={containerRef}
+							role="menu"
+							class="mt-auto flex w-full max-w-120 flex-col rounded-t-xl bg-background p-4"
+						>
 							{props.children}
 						</div>
 					</div>

src/routes.ts

···
 			return isValidDidOrHandle(params.didOrHandle);
 		},
 	},
-	{
-		path: '/:did/feeds/:rkey/info',
-		component: lazy(() => import('./views/profile-feed-info')),
-		validate(params) {
-			return isValidDidOrHandle(params.did);
-		},
-	},
 
 	{
 		path: '/:did/lists',

src/views/profile-feed-info.tsx

···
-import { Match, Show, Switch, createMemo } from 'solid-js';
-
-import type { AppBskyFeedDefs } from '@atcute/client/lexicons';
-import { useQueryClient } from '@mary/solid-query';
-
-import { ContextContentMedia } from '~/api/moderation/constants';
-import { moderateGeneric } from '~/api/moderation/entities/generic';
-import { moderateProfile } from '~/api/moderation/entities/profile';
-import { precacheProfile } from '~/api/queries-cache/profile-precache';
-import { createFeedMetaQuery } from '~/api/queries/feed';
-import { makeAtUri } from '~/api/types/at-uri';
-
-import { useParams, useTitle } from '~/lib/navigation/router';
-import { inject } from '~/lib/states/singleton';
-import ModerationService from '~/lib/states/singletons/moderation';
-
-import Avatar, { getUserAvatarType } from '~/components/avatar';
-import * as Boxed from '~/components/boxed';
-import CircularProgressView from '~/components/circular-progress-view';
-import * as Page from '~/components/page';
-
-const FeedInfoPage = () => {
-	const { did, rkey } = useParams();
-
-	const uri = makeAtUri(did, 'app.bsky.feed.generator', rkey);
-	const feed = createFeedMetaQuery(() => uri);
-
-	useTitle(() => {
-		const data = feed.data;
-		if (data) {
-			return `Feed info (${data.displayName}) — ${import.meta.env.VITE_APP_NAME}`;
-		}
-
-		return `Feed info — ${import.meta.env.VITE_APP_NAME}`;
-	});
-
-	return (
-		<>
-			<Page.Header>
-				<Page.HeaderAccessory>
-					<Page.Back to={`/${did}/feeds/${rkey}`} />
-				</Page.HeaderAccessory>
-			</Page.Header>
-
-			<Switch>
-				<Match when={feed.data}>{(info) => <InfoView feed={info()} />}</Match>
-
-				<Match when>
-					<CircularProgressView />
-				</Match>
-			</Switch>
-		</>
-	);
-};
-
-export default FeedInfoPage;
-
-const InfoView = (props: { feed: AppBskyFeedDefs.GeneratorView }) => {
-	const queryClient = useQueryClient();
-
-	const moderationOptions = inject(ModerationService);
-
-	const feed = () => props.feed;
-	const creator = () => feed().creator;
-
-	const moderation = createMemo(() => {
-		return [
-			...moderateGeneric(feed(), creator().did, moderationOptions()),
-			...moderateProfile(creator(), moderationOptions()),
-		];
-	});
-
-	return (
-		<Boxed.Container>
-			<div class="px-4">
-				<div class="flex gap-4">
-					<Avatar
-						type="generator"
-						src={feed().avatar}
-						size={null}
-						moderation={moderation()}
-						modContext={ContextContentMedia}
-						class="h-13 w-13"
-					/>
-
-					<div class="flex min-w-0 grow flex-col">
-						<p class="mb-1 mt-0.75 overflow-hidden text-ellipsis break-words text-lg font-bold leading-none">
-							{feed().displayName}
-						</p>
-
-						<a
-							href={`/${creator().did}`}
-							onClick={() => precacheProfile(queryClient, creator())}
-							class="group mt-1 flex items-center"
-						>
-							<Avatar type={getUserAvatarType(creator())} src={creator().avatar} size="xs" class="mr-2" />
-
-							<span class="mr-1 overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium text-contrast-muted">
-								{creator().handle.toLowerCase()}
-							</span>
-						</a>
-					</div>
-				</div>
-			</div>
-
-			<Boxed.Group>
-				<Show when={feed().description?.trim()}>
-					{(description) => (
-						<Boxed.List>
-							<div class="flex flex-col whitespace-pre-wrap px-4 py-3 text-left text-sm empty:hidden">
-								{description()}
-							</div>
-						</Boxed.List>
-					)}
-				</Show>
-			</Boxed.Group>
-		</Boxed.Container>
-	);
-};

src/views/profile-feed.tsx

···
 
 import { useParams, useTitle } from '~/lib/navigation/router';
 
+import Avatar from '~/components/avatar';
 import CircularProgressView from '~/components/circular-progress-view';
 import ErrorView from '~/components/error-view';
+import FeedInfoPrompt from '~/components/feeds/feed-info-prompt';
 import FeedOverflowMenu from '~/components/feeds/feed-overflow-menu';
 import IconButton from '~/components/icon-button';
-import CircleInfoOutlinedIcon from '~/components/icons-central/circle-info-outline';
+import ChevronRightOutlinedIcon from '~/components/icons-central/chevron-right-outline';
 import MoreHorizOutlinedIcon from '~/components/icons-central/more-horiz-outline';
 import * as Page from '~/components/page';
 import TimelineList from '~/components/timeline/timeline-list';
···
 					<Page.Back to={`/${didOrHandle}`} />
 				</Page.HeaderAccessory>
 
-				<Page.Heading
+				<Avatar type="generator" src={meta.data?.avatar} size={null} class="-ml-4 h-7 w-7" />
+				{/* <Page.Heading
 					title={(() => {
 						const feed = meta.data;
 						if (feed) {
···
 
 						return `Feed`;
 					})()}
-				/>
+				/> */}
+
+				<div class="flex min-w-0 grow">
+					<button
+						disabled={!meta.data}
+						onClick={() => {
+							const feed = meta.data;
+							if (!feed) {
+								return;
+							}
+
+							openModal(() => <FeedInfoPrompt feed={feed} />);
+						}}
+						class="-mx-2 flex items-center gap-1 overflow-hidden rounded px-2 py-1 hover:bg-contrast-hinted/md active:bg-contrast-hinted/md-pressed"
+					>
+						<span class="overflow-hidden text-ellipsis whitespace-nowrap text-base font-bold">
+							{meta.data?.displayName.trim() || 'Feed'}
+						</span>
+						<ChevronRightOutlinedIcon class="-mr-1 shrink-0 rotate-90 text-lg text-contrast-muted" />
+					</button>
+				</div>
 
 				<Show when={meta.data}>
 					{(feed) => (
 						<Page.HeaderAccessory>
-							<IconButton
-								title="Feed information"
-								icon={CircleInfoOutlinedIcon}
-								onClick={() => {
-									history.navigate(`/${didOrHandle}/feeds/${rkey}/info`);
-								}}
-							/>
-
 							<IconButton
 								title="More actions"
 								icon={MoreHorizOutlinedIcon}