feat(ui): favicon, dynamic tab title, clickable logo, styled module headers

Session-close cosmetics:
1. Favicon — an 'S' monogram (indigo→violet rounded square, path-drawn so it's font-independent)
   at public/favicon.svg, linked in index.html (tab had none before).
2. Dynamic document.title — reflects the current module ('Downloads · Siftlode'); Feed = brand
   only; an open channel page shows the channel name. Shared pageTitleKey() in lib/pageMeta.ts
   keeps the tab title and the top-bar header in lockstep.
3. The 'Siftlode' logo already navigated to Feed but read as static text — added a hover
   background + cursor affordance so it's clearly clickable.
4. Module header — new shared PageTitle component (used by every non-feed module via Header) with
   a tracked small-caps 'eyebrow' + leading accent dot (user-picked style B), styled in one place.
Verified in a real browser: favicon served (image/svg+xml), title updates per module, logo→feed,
header restyled; no console errors.
This commit is contained in:
npeter83 2026-07-04 06:17:40 +02:00
parent 4493501d10
commit 7ab76ccafb
7 changed files with 74 additions and 21 deletions

View file

@ -18,6 +18,7 @@ import {
type ThemePrefs,
} from "./lib/theme";
import { hasFilterParams, isPage, paramsToFilters, readPage, stripUrlParams, type Page } from "./lib/urlState";
import { pageTitleKey } from "./lib/pageMeta";
import {
loadLayout,
normalizeLayout,
@ -284,6 +285,18 @@ export default function App() {
// Expose the current setPage to decoupled callers (download toast "View", etc.).
useEffect(() => setNavigator(setPage));
// Reflect the current module in the browser tab title so open tabs are distinguishable and the
// history reads sensibly. Feed = brand only; an open channel page shows the channel name.
useEffect(() => {
const brand = "Siftlode";
const label = channelView
? channelView.name || t("header.channelManager")
: page === "feed"
? null
: t(pageTitleKey(page));
document.title = label ? `${label} · ${brand}` : brand;
}, [page, channelView, i18n.language, t]);
function setSidebarLayout(next: SidebarLayout) {
setSidebarLayoutState(next);
saveLayoutLocal(next);