v3: journal becomes the default feed tab for visitors and for users who haven't picked one

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
khannurien
2026-09-19 20:39:17 +00:00
parent 20d717f879
commit 6026286bbf
6 changed files with 14 additions and 9 deletions

View File

@@ -12,6 +12,7 @@ import { RestrictedGuest } from "./pages/RestrictedGuest.tsx";
import { RestrictedLoggedIn } from "./pages/RestrictedLoggedIn.tsx"; import { RestrictedLoggedIn } from "./pages/RestrictedLoggedIn.tsx";
import { useAuth } from "./hooks/useAuth.ts"; import { useAuth } from "./hooks/useAuth.ts";
import { useDefaultFeedTab } from "./hooks/useDefaultFeedTab.ts"; import { useDefaultFeedTab } from "./hooks/useDefaultFeedTab.ts";
import { DEFAULT_FEED_TAB } from "./config/feedTabs.ts";
import { AuthProvider } from "./contexts/AuthProvider.tsx"; import { AuthProvider } from "./contexts/AuthProvider.tsx";
import { PlayerProvider } from "./contexts/PlayerProvider.tsx"; import { PlayerProvider } from "./contexts/PlayerProvider.tsx";
@@ -83,7 +84,7 @@ const NotFound = lazy(() =>
function useResolvedDefaultTab() { function useResolvedDefaultTab() {
const { user } = useAuth(); const { user } = useAuth();
const [preferredTab] = useDefaultFeedTab(); const [preferredTab] = useDefaultFeedTab();
return preferredTab === "followed" && !user ? "hot" : preferredTab; return preferredTab === "followed" && !user ? DEFAULT_FEED_TAB : preferredTab;
} }
// The query string has to survive the hop: the Web Share Target posts to "/", // The query string has to survive the hop: the Web Share Target posts to "/",

View File

@@ -9,6 +9,7 @@ import { createPortal } from "react-dom";
import { useNavigate, useParams } from "react-router"; import { useNavigate, useParams } from "react-router";
import { t } from "@lingui/core/macro"; import { t } from "@lingui/core/macro";
import { useCategories } from "../hooks/useCategories.ts"; import { useCategories } from "../hooks/useCategories.ts";
import { DEFAULT_FEED_TAB } from "../config/feedTabs.ts";
/** /**
* Header dropdown that switches the feed scope between "All" and a category, * Header dropdown that switches the feed scope between "All" and a category,
@@ -73,7 +74,7 @@ export function CategorySwitcher() {
if (categories.length === 0) return null; if (categories.length === 0) return null;
const value = categorySlug ?? "~"; const value = categorySlug ?? "~";
const tab = feedTab ?? "hot"; const tab = feedTab ?? DEFAULT_FEED_TAB;
const currentLabel = categorySlug const currentLabel = categorySlug
? categories.find((c) => c.slug === categorySlug)?.name ?? categorySlug ? categories.find((c) => c.slug === categorySlug)?.name ?? categorySlug
: t`All`; : t`All`;

View File

@@ -1,7 +1,7 @@
import { useNavigate, useParams } from "react-router"; import { useNavigate, useParams } from "react-router";
import { Trans } from "@lingui/react/macro"; import { Trans } from "@lingui/react/macro";
import { useAuth } from "../hooks/useAuth.ts"; import { useAuth } from "../hooks/useAuth.ts";
import { FEED_TABS, type FeedTab } from "../config/feedTabs.ts"; import { DEFAULT_FEED_TAB, FEED_TABS, type FeedTab } from "../config/feedTabs.ts";
import { useDefaultFeedTab } from "../hooks/useDefaultFeedTab.ts"; import { useDefaultFeedTab } from "../hooks/useDefaultFeedTab.ts";
import { TabBar } from "./TabBar.tsx"; import { TabBar } from "./TabBar.tsx";
import { CategorySwitcher } from "./CategorySwitcher.tsx"; import { CategorySwitcher } from "./CategorySwitcher.tsx";
@@ -18,7 +18,7 @@ export function FeedTabBar() {
const [preferredTab] = useDefaultFeedTab(); const [preferredTab] = useDefaultFeedTab();
const defaultTab: FeedTab = preferredTab === "followed" && !user const defaultTab: FeedTab = preferredTab === "followed" && !user
? "hot" ? DEFAULT_FEED_TAB
: preferredTab; : preferredTab;
const active: FeedTab = (FEED_TABS as readonly string[]).includes(feedTab ?? "") const active: FeedTab = (FEED_TABS as readonly string[]).includes(feedTab ?? "")
? (feedTab as FeedTab) ? (feedTab as FeedTab)

View File

@@ -1,2 +1,5 @@
export const FEED_TABS = ["hot", "new", "journal", "followed"] as const; export const FEED_TABS = ["hot", "new", "journal", "followed"] as const;
export type FeedTab = (typeof FEED_TABS)[number]; export type FeedTab = (typeof FEED_TABS)[number];
// Tab the index opens on for visitors and for users who haven't picked one.
export const DEFAULT_FEED_TAB: FeedTab = "journal";

View File

@@ -1,5 +1,5 @@
import { useCallback, useState } from "react"; import { useCallback, useState } from "react";
import { FEED_TABS, type FeedTab } from "../config/feedTabs.ts"; import { DEFAULT_FEED_TAB, FEED_TABS, type FeedTab } from "../config/feedTabs.ts";
const STORAGE_KEY = "default-feed-tab"; const STORAGE_KEY = "default-feed-tab";
@@ -7,12 +7,12 @@ function readStored(): FeedTab {
const stored = localStorage.getItem(STORAGE_KEY); const stored = localStorage.getItem(STORAGE_KEY);
return stored && (FEED_TABS as readonly string[]).includes(stored) return stored && (FEED_TABS as readonly string[]).includes(stored)
? stored as FeedTab ? stored as FeedTab
: "hot"; : DEFAULT_FEED_TAB;
} }
/** /**
* User preference for which feed tab the index opens on, persisted to * User preference for which feed tab the index opens on, persisted to
* localStorage (defaults to "hot"). Returns the stored tab and a setter that * localStorage (defaults to DEFAULT_FEED_TAB). Returns the stored tab and a setter that
* persists the choice. Consumers that only need to honour the preference (e.g. * persists the choice. Consumers that only need to honour the preference (e.g.
* the index default) can ignore the setter. * the index default) can ignore the setter.
*/ */

View File

@@ -11,7 +11,7 @@ import { useLocation, useParams } from "react-router";
import { AppHeader } from "../components/AppHeader.tsx"; import { AppHeader } from "../components/AppHeader.tsx";
import { PresenceRow } from "../components/PresenceRow.tsx"; import { PresenceRow } from "../components/PresenceRow.tsx";
import { FeedTabBar } from "../components/FeedTabBar.tsx"; import { FeedTabBar } from "../components/FeedTabBar.tsx";
import { FEED_TABS, type FeedTab } from "../config/feedTabs.ts"; import { DEFAULT_FEED_TAB, FEED_TABS, type FeedTab } from "../config/feedTabs.ts";
import { useDefaultFeedTab } from "../hooks/useDefaultFeedTab.ts"; import { useDefaultFeedTab } from "../hooks/useDefaultFeedTab.ts";
import { API_URL, DEFAULT_PAGE_SIZE } from "../config/api.ts"; import { API_URL, DEFAULT_PAGE_SIZE } from "../config/api.ts";
@@ -89,7 +89,7 @@ export function Index({ categorySlug }: { categorySlug?: string }) {
const { feedTab: rawTab } = useParams(); const { feedTab: rawTab } = useParams();
const [preferredTab] = useDefaultFeedTab(); const [preferredTab] = useDefaultFeedTab();
const defaultTab: FeedTab = preferredTab === "followed" && !user const defaultTab: FeedTab = preferredTab === "followed" && !user
? "hot" ? DEFAULT_FEED_TAB
: preferredTab; : preferredTab;
const tab: FeedTab = (FEED_TABS as readonly string[]).includes(rawTab ?? "") const tab: FeedTab = (FEED_TABS as readonly string[]).includes(rawTab ?? "")
? (rawTab as FeedTab) ? (rawTab as FeedTab)