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:
parent
4493501d10
commit
7ab76ccafb
7 changed files with 74 additions and 21 deletions
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue