;
+ labelKey: 'all' | 'myNetwork' | 'following' | 'friends' | 'me';
+ }
+> = {
+ [REACH.ALL]: { icon: Radio, labelKey: 'all' },
+ [REACH.NETWORK]: { icon: Waypoints, labelKey: 'myNetwork' },
+ [REACH.FOLLOWING]: { icon: UsersRound2, labelKey: 'following' },
+ [REACH.FRIENDS]: { icon: HeartHandshake, labelKey: 'friends' },
+ [REACH.ME]: { icon: UserRound, labelKey: 'me' },
+};
+
interface FeedNavigationProps {
className?: string;
}
export const FeedNavigation = ({ className }: FeedNavigationProps) => {
const pathname = usePathname();
const tHeader = useTranslations('header');
+ const tReach = useTranslations('filters.reach');
const tDialog = useTranslations('dialogs.customFeed');
const { isAuthenticated, requireAuth } = useRequireAuth();
+ const reach = useHomeStore((state) => state.reach);
+ const effectiveReach = isAuthenticated || reach === REACH.NETWORK ? reach : REACH.ALL;
+ const homeFeedReach = HOME_FEED_REACH[effectiveReach];
+ const HomeFeedReachIcon = homeFeedReach.icon;
const customFeeds = useLiveQuery(
async () => {
try {
@@ -56,8 +79,8 @@ export const FeedNavigation = ({ className }: FeedNavigationProps) => {
}));
const feeds = [
{
- name: tHeader('home'),
- icon:
,
+ name: tReach(homeFeedReach.labelKey),
+ icon:
,
href: APP_ROUTES.HOME,
},
...customFeedsMapped,
diff --git a/src/components/organisms/HomeFeedSidebar/HomeFeedSidebar.test.tsx b/src/components/organisms/HomeFeedSidebar/HomeFeedSidebar.test.tsx
index 0e0c9d30a1..bba144e752 100644
--- a/src/components/organisms/HomeFeedSidebar/HomeFeedSidebar.test.tsx
+++ b/src/components/organisms/HomeFeedSidebar/HomeFeedSidebar.test.tsx
@@ -3,35 +3,60 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
import { TIMELINE_FEED_VARIANT } from '@/config/feed';
import { HomeFeedDrawer, HomeFeedDrawerMobile, HomeFeedSidebar } from './HomeFeedSidebar';
-const { mockSetContent, mockUseHomeStore, mockFilterContent, mockUseFeedLayoutResolution, mockCurrentUserPubky } =
- vi.hoisted(() => ({
- mockSetContent: vi.fn(),
- mockUseHomeStore: vi.fn(),
- mockFilterContent: vi.fn(({ disabledTabs, selectedTab }: { disabledTabs?: string[]; selectedTab?: string }) => (
+const {
+ mockSetContent,
+ mockUseHomeStore,
+ mockFilterContent,
+ mockFilterProfileTags,
+ mockUseFeedLayoutResolution,
+ mockCurrentUserPubky,
+ mockSetReach,
+ mockSetProfileTagScope,
+} = vi.hoisted(() => ({
+ mockSetContent: vi.fn(),
+ mockUseHomeStore: vi.fn(),
+ mockFilterContent: vi.fn(({ disabledTabs, selectedTab }: { disabledTabs?: string[]; selectedTab?: string }) => (
+
+ FilterContent
+
+ )),
+ mockFilterProfileTags: vi.fn(
+ ({ hidden, inputDisabled, scope }: { hidden?: boolean; inputDisabled?: boolean; scope?: string }) => (
- FilterContent
+ FilterProfileTags
- )),
- mockUseFeedLayoutResolution: vi.fn(() => ({
- requestedLayout: 'columns',
- effectiveLayout: 'columns',
- isVisualRequested: false,
- isVisualActive: false,
- isPhoneViewport: false,
- })),
- mockCurrentUserPubky: { value: 'viewer-pubky' as string | null },
- }));
+ ),
+ ),
+ mockUseFeedLayoutResolution: vi.fn(() => ({
+ requestedLayout: 'columns',
+ effectiveLayout: 'columns',
+ isVisualRequested: false,
+ isVisualActive: false,
+ isPhoneViewport: false,
+ })),
+ mockCurrentUserPubky: { value: 'viewer-pubky' as string | null },
+ mockSetReach: vi.fn(),
+ mockSetProfileTagScope: vi.fn(),
+}));
// Mock useHomeStore
vi.mock('@/stores/home/home.types', () => ({
+ HOME_PROFILE_TAGS_MAX_SELECTED: 5,
REACH: {
- ALL: 'all',
- FOLLOWING: 'following',
+ ME: 'me',
FRIENDS: 'friends',
+ FOLLOWING: 'following',
+ NETWORK: 'network',
+ ALL: 'all',
},
CONTENT: {
ALL: 'all',
@@ -94,6 +119,11 @@ vi.mock('@/molecules/Filters/FilterReach/FilterReach', () => {
};
});
+vi.mock('@/molecules/Filters/FilterProfileTags/FilterProfileTags', () => ({
+ FilterProfileTags: (props: { hidden?: boolean; inputDisabled?: boolean; scope?: string }) =>
+ mockFilterProfileTags(props),
+}));
+
vi.mock('@/molecules/Filters/FilterSort/FilterSort', () => {
return {
FilterSort: () =>
FilterSort
,
@@ -102,18 +132,26 @@ vi.mock('@/molecules/Filters/FilterSort/FilterSort', () => {
beforeEach(() => {
mockSetContent.mockClear();
+ mockSetReach.mockClear();
+ mockSetProfileTagScope.mockClear();
mockCurrentUserPubky.value = 'viewer-pubky';
mockUseHomeStore.mockReturnValue({
layout: 'columns',
setLayout: vi.fn(),
reach: 'following',
- setReach: vi.fn(),
+ setReach: mockSetReach,
sort: 'timeline',
setSort: vi.fn(),
content: 'all',
setContent: mockSetContent,
+ profileTags: [],
+ profileTagScope: 'network',
+ addProfileTag: vi.fn(),
+ removeProfileTag: vi.fn(),
+ setProfileTagScope: mockSetProfileTagScope,
});
mockFilterContent.mockClear();
+ mockFilterProfileTags.mockClear();
mockUseFeedLayoutResolution.mockReturnValue({
requestedLayout: 'columns',
effectiveLayout: 'columns',
@@ -128,6 +166,8 @@ describe('HomeFeedSidebar', () => {
render(
);
expect(screen.getByTestId('filter-reach')).toBeInTheDocument();
+ expect(screen.getByTestId('filter-profile-tags')).toHaveAttribute('data-hidden', 'false');
+ expect(screen.getByTestId('filter-profile-tags')).toHaveAttribute('data-scope', 'network');
expect(screen.getByTestId('filter-sort')).toBeInTheDocument();
expect(screen.getByTestId('filter-content')).toBeInTheDocument();
expect(screen.getByTestId('filter-layout')).toBeInTheDocument();
@@ -161,11 +201,16 @@ describe('HomeFeedSidebar', () => {
layout: 'visual',
setLayout: vi.fn(),
reach: 'following',
- setReach: vi.fn(),
+ setReach: mockSetReach,
sort: 'timeline',
setSort: vi.fn(),
content: 'short',
setContent: mockSetContent,
+ profileTags: [],
+ profileTagScope: 'network',
+ addProfileTag: vi.fn(),
+ removeProfileTag: vi.fn(),
+ setProfileTagScope: mockSetProfileTagScope,
});
mockUseFeedLayoutResolution.mockReturnValue({
requestedLayout: 'visual',
@@ -187,6 +232,56 @@ describe('HomeFeedSidebar', () => {
render(
);
expect(screen.getByTestId('filter-reach')).toHaveAttribute('data-selected-tab', 'all');
+ expect(screen.getByTestId('filter-profile-tags')).toHaveAttribute('data-hidden', 'false');
+ expect(screen.getByTestId('filter-profile-tags')).toHaveAttribute('data-input-disabled', 'true');
+ });
+
+ it('keeps Network selected when logged out because it aliases the public All stream', () => {
+ mockCurrentUserPubky.value = null;
+ mockUseHomeStore.mockReturnValue({
+ layout: 'columns',
+ setLayout: vi.fn(),
+ reach: 'network',
+ setReach: mockSetReach,
+ sort: 'timeline',
+ setSort: vi.fn(),
+ content: 'all',
+ setContent: mockSetContent,
+ profileTags: [],
+ profileTagScope: 'network',
+ addProfileTag: vi.fn(),
+ removeProfileTag: vi.fn(),
+ setProfileTagScope: mockSetProfileTagScope,
+ });
+
+ render(
);
+
+ expect(screen.getByTestId('filter-reach')).toHaveAttribute('data-selected-tab', 'network');
+ expect(screen.getByTestId('filter-profile-tags')).toHaveAttribute('data-hidden', 'false');
+ expect(screen.getByTestId('filter-profile-tags')).toHaveAttribute('data-input-disabled', 'true');
+ });
+
+ it('hides Tagged as only for Me reach', () => {
+ mockUseHomeStore.mockReturnValue({
+ layout: 'columns',
+ setLayout: vi.fn(),
+ reach: 'me',
+ setReach: mockSetReach,
+ sort: 'timeline',
+ setSort: vi.fn(),
+ content: 'all',
+ setContent: mockSetContent,
+ profileTags: ['bitcoiner'],
+ profileTagScope: 'following',
+ addProfileTag: vi.fn(),
+ removeProfileTag: vi.fn(),
+ setProfileTagScope: mockSetProfileTagScope,
+ });
+
+ render(
);
+
+ expect(screen.getByTestId('filter-profile-tags')).toHaveAttribute('data-hidden', 'true');
+ expect(screen.getByTestId('filter-profile-tags')).toHaveAttribute('data-scope', 'following');
});
});
diff --git a/src/components/organisms/HomeFeedSidebar/HomeFeedSidebar.test.tsx.snap b/src/components/organisms/HomeFeedSidebar/HomeFeedSidebar.test.tsx.snap
index 995693bd0c..02b4024ab3 100644
--- a/src/components/organisms/HomeFeedSidebar/HomeFeedSidebar.test.tsx.snap
+++ b/src/components/organisms/HomeFeedSidebar/HomeFeedSidebar.test.tsx.snap
@@ -7,10 +7,23 @@ exports[`HomeFeedDrawer - Snapshots > matches snapshot 1`] = `
data-testid="container"
>
- FilterReach
+
+ FilterReach
+
+
+ FilterProfileTags
+
matches snapshot 1`] = `
data-testid="container"
>
- FilterReach
+
+ FilterReach
+
+
+ FilterProfileTags
+
matches snapshot 1`] = `
data-testid="container"
>
- FilterReach
+
+ FilterReach
+
+
+ FilterProfileTags
+
state.currentUserPubky);
const { requireAuth } = useRequireAuth();
const isAuthenticated = Boolean(currentUserPubky);
- const effectiveReach = isAuthenticated ? reach : REACH.ALL;
+ const effectiveReach = isAuthenticated || reach === REACH.NETWORK ? reach : REACH.ALL;
+ const showProfileTags = effectiveReach !== REACH.ME;
const { isPhoneViewport, isVisualActive } = useFeedLayoutResolution(feedVariant);
- // "All" reach is public; "Following"/"Friends" require an account, so prompt Join Pubky in Explore mode.
+ // ALL and its temporary NETWORK alias are public. Personalized reaches require an account.
const handleReachChange = (value: ReachType) => {
- if (value === REACH.ALL) {
+ if (value === REACH.ALL || value === REACH.NETWORK) {
setReach(value);
return;
}
requireAuth(() => setReach(value));
};
+ const handleProfileTagAdd = (tag: string) => {
+ requireAuth(() => addProfileTag(tag));
+ };
const resolvedContent = resolveVisualFeedContent({
content,
variant: feedVariant,
@@ -59,7 +79,24 @@ function HomeFeedFilters({
return (
- {!hideReachFilter && }
+ {!hideReachFilter && (
+
+
+ requireAuth(() => undefined)}
+ />
+
+ )}
{variant === 'sidebar' ? (
diff --git a/src/components/organisms/HotFeedFilters/HotFeedFilters.tsx b/src/components/organisms/HotFeedFilters/HotFeedFilters.tsx
index 8efeef2f39..94d6208fc4 100644
--- a/src/components/organisms/HotFeedFilters/HotFeedFilters.tsx
+++ b/src/components/organisms/HotFeedFilters/HotFeedFilters.tsx
@@ -88,13 +88,13 @@ export function FilterTimeframe({ selectedTab = TIMEFRAME.THIS_MONTH, onTabChang
/**
* useGatedReachChange
*
- * "All" reach is public; "Following"/"Friends" require an account, so prompt
+ * "All" and its temporary "Network" alias are public; personalized reaches prompt
* Join Pubky in Explore mode (logged out) instead of changing the reach.
*/
function useGatedReachChange(setReach: (reach: ReachType) => void) {
const { requireAuth } = useRequireAuth();
return (value: ReachType) => {
- if (value === REACH.ALL) {
+ if (value === REACH.ALL || value === REACH.NETWORK) {
setReach(value);
return;
}
@@ -113,7 +113,7 @@ export function HotFeedSidebar() {
const { reach, setReach, timeframe, setTimeframe } = useHotStore();
const currentUserPubky = useAuthStore((state) => state.currentUserPubky);
const isAuthenticated = Boolean(currentUserPubky);
- const effectiveReach = isAuthenticated ? reach : REACH.ALL;
+ const effectiveReach = isAuthenticated || reach === REACH.NETWORK ? reach : REACH.ALL;
const handleReachChange = useGatedReachChange(setReach);
@@ -137,7 +137,7 @@ export function HotFeedDrawer() {
const { reach, setReach, timeframe, setTimeframe } = useHotStore();
const currentUserPubky = useAuthStore((state) => state.currentUserPubky);
const isAuthenticated = Boolean(currentUserPubky);
- const effectiveReach = isAuthenticated ? reach : REACH.ALL;
+ const effectiveReach = isAuthenticated || reach === REACH.NETWORK ? reach : REACH.ALL;
const handleReachChange = useGatedReachChange(setReach);
diff --git a/src/components/organisms/PostHeader/PostHeader.test.tsx b/src/components/organisms/PostHeader/PostHeader.test.tsx
index 768d79428c..d07b1857ae 100644
--- a/src/components/organisms/PostHeader/PostHeader.test.tsx
+++ b/src/components/organisms/PostHeader/PostHeader.test.tsx
@@ -113,6 +113,12 @@ vi.mock('@/molecules/PostHeaderUserInfo/PostHeaderUserInfo', () => {
};
});
+vi.mock('@/organisms/AvatarWithFallback/AvatarWithFallback', () => ({
+ AvatarWithFallback: vi.fn(({ fallbackSeed, size, 'data-testid': dataTestId }) => (
+
+ )),
+}));
+
// Use real libs - use actual implementations
const mockUsePostDetails = vi.mocked(usePostDetails);
@@ -192,6 +198,18 @@ describe('PostHeader', () => {
expect(screen.getAllByRole('generic').some((el) => el.getAttribute('data-slot') === 'skeleton')).toBe(true);
});
+ it('renders only an avatar for the minimal new-post header state', () => {
+ mockUsePostDetails.mockReturnValue({ postDetails: null, isLoading: false });
+ mockUseUserDetails.mockReturnValue({ userDetails: null, isLoading: false });
+ mockUseAvatarUrl.mockReturnValue(undefined);
+
+ renderPostHeader();
+
+ expect(screen.getByTestId('post-header-avatar')).toHaveAttribute('data-fallback-seed', 'userpubkykey');
+ expect(screen.queryByTestId('post-header-user-info')).not.toBeInTheDocument();
+ expect(screen.queryByText('Test User')).not.toBeInTheDocument();
+ });
+
it('passes size prop to PostHeaderUserInfo', () => {
mockUsePostDetails.mockReturnValue({
postDetails: {
diff --git a/src/components/organisms/PostHeader/PostHeader.tsx b/src/components/organisms/PostHeader/PostHeader.tsx
index cde265a9ef..00fa41e76f 100644
--- a/src/components/organisms/PostHeader/PostHeader.tsx
+++ b/src/components/organisms/PostHeader/PostHeader.tsx
@@ -7,6 +7,7 @@ import { useRelativeTime } from '@/hooks/useRelativeTime/useRelativeTime';
import { useUserDetails } from '@/hooks/useUserDetails/useUserDetails';
import { PostHeaderTimestamp } from '@/molecules/PostHeaderTimestamp/PostHeaderTimestamp';
import { PostHeaderUserInfo } from '@/molecules/PostHeaderUserInfo/PostHeaderUserInfo';
+import { AvatarWithFallback } from '@/organisms/AvatarWithFallback/AvatarWithFallback';
import { PostHeaderSkeleton } from './PostHeader.skeleton';
import type { PostHeaderProps } from './PostHeader.types';
@@ -17,6 +18,7 @@ export function PostHeader({
showPopover = true,
size = 'normal',
timeAgoPlacement = 'top-right',
+ avatarOnly = false,
}: PostHeaderProps) {
// Extract userId from postId (format: userId:postId or just userId if isReplyInput is true)
const userId = isReplyInput ? postId : postId.split(':')[0];
@@ -34,6 +36,18 @@ export function PostHeader({
const isLoading = !userDetails || (!isReplyInput && !postDetails);
+ if (avatarOnly) {
+ return (
+
+ );
+ }
+
if (isLoading) {
return ;
}
diff --git a/src/components/organisms/PostHeader/PostHeader.types.ts b/src/components/organisms/PostHeader/PostHeader.types.ts
index d2f04ca432..8879326d57 100644
--- a/src/components/organisms/PostHeader/PostHeader.types.ts
+++ b/src/components/organisms/PostHeader/PostHeader.types.ts
@@ -8,4 +8,5 @@ export interface PostHeaderProps {
showPopover?: boolean;
size?: 'normal' | 'large';
timeAgoPlacement?: 'top-right' | 'bottom-left';
+ avatarOnly?: boolean;
}
diff --git a/src/components/organisms/PostInput/PostInput.test.tsx b/src/components/organisms/PostInput/PostInput.test.tsx
index 7a19c8e2d1..79058a2fad 100644
--- a/src/components/organisms/PostInput/PostInput.test.tsx
+++ b/src/components/organisms/PostInput/PostInput.test.tsx
@@ -153,7 +153,7 @@ vi.mock('@/atoms/Typography/Typography', () => {
vi.mock('@/organisms/PostHeader/PostHeader', () => {
return {
- PostHeader: vi.fn(({ postId, isReplyInput, characterLimit, size }) => (
+ PostHeader: vi.fn(({ postId, isReplyInput, characterLimit, size, avatarOnly }) => (
{
data-count={characterLimit?.count}
data-max={characterLimit?.max}
data-size={size}
+ data-avatar-only={avatarOnly ? 'true' : 'false'}
/>
)),
};
@@ -540,10 +541,25 @@ describe('PostInput', () => {
render(
);
expect(screen.getByTestId('post-header')).toBeInTheDocument();
+ expect(screen.getByTestId('post-header')).toHaveAttribute('data-avatar-only', 'false');
expect(screen.getByTestId('textarea')).toBeInTheDocument();
expect(screen.getByPlaceholderText("What's on your mind?")).toBeInTheDocument();
});
+ it('uses the minimal avatar and prompt layout for a collapsed new post', () => {
+ mockUsePostInput.mockImplementationOnce((options: UsePostInputOptions) =>
+ createUsePostInputReturn(options, { isExpanded: false }),
+ );
+
+ render(
);
+
+ expect(screen.getByTestId('post-header')).toHaveAttribute('data-avatar-only', 'true');
+ expect(screen.getByPlaceholderText("What's on your mind?")).toBeInTheDocument();
+ expect(
+ screen.getAllByTestId('container').find((container) => container.className.includes('contain-inline-size')),
+ ).toHaveClass('flex-row', 'items-center');
+ });
+
it('passes characterLimit to header and action bar for non-article mode', () => {
mockUsePostReturn.content = 'Hello world';
render(
);
@@ -912,7 +928,7 @@ describe('PostInput', () => {
render(
);
const outerContainer = screen.getAllByTestId('container')[0];
- expect(outerContainer.className).toContain('p-4');
+ expect(outerContainer.className).toContain('p-6');
expect(outerContainer.className).not.toContain('p-12');
const postHeader = screen.getByTestId('post-header');
@@ -930,7 +946,7 @@ describe('PostInput', () => {
const outerContainer = screen.getAllByTestId('container')[0];
expect(outerContainer.className).toContain('p-12');
- expect(outerContainer.className).not.toContain('p-4');
+ expect(outerContainer.className).not.toContain('p-6');
const postHeader = screen.getByTestId('post-header');
expect(postHeader).toHaveAttribute('data-size', 'large');
@@ -961,7 +977,7 @@ describe('PostInput', () => {
);
const outerContainer = screen.getAllByTestId('container')[0];
- expect(outerContainer.className).toContain('p-4');
+ expect(outerContainer.className).toContain('p-6');
expect(outerContainer.className).not.toContain('p-12');
const postHeader = screen.getByTestId('post-header');
diff --git a/src/components/organisms/PostInput/PostInput.test.tsx.snap b/src/components/organisms/PostInput/PostInput.test.tsx.snap
index 105552389e..97b47213d4 100644
--- a/src/components/organisms/PostInput/PostInput.test.tsx.snap
+++ b/src/components/organisms/PostInput/PostInput.test.tsx.snap
@@ -2,7 +2,7 @@
exports[`PostInput - Mobile Snapshots > matches snapshot on mobile viewport 1`] = `