peter/siftlode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

24
frontend/src/components/Header.tsx
View file

@ -2,6 +2,8 @@ import { useTranslation } from "react-i18next";
import { Search, X, Youtube } from "lucide-react";
import type { FeedFilters, Me } from "../lib/api";
import type { Page } from "../lib/urlState";
import { pageTitleKey } from "../lib/pageMeta";
import PageTitle from "./PageTitle";
// Contextual top bar over the content column. Primary navigation, account and the per-user sync
// status live in the left NavSidebar; the feed's scope toggle now lives in the filter sidebar.
@ -72,26 +74,8 @@ export default function Header({
)}
</div>
) : (
<div className="flex-1 text-center text-sm font-semibold">
{page === "stats"
? t("header.usageStats")
: page === "playlists"
? t("header.account.playlists")
: page === "settings"
? t("settings.title")
: page === "scheduler"
? t("header.scheduler")
: page === "config"
? t("header.configuration")
: page === "users"
? t("header.users")
: page === "notifications"
? t("inbox.navLabel")
: page === "messages"
? t("messages.navLabel")
: page === "downloads"
? t("downloads.navLabel")
: t("header.channelManager")}
<div className="flex-1 flex justify-center">
<PageTitle label={t(pageTitleKey(page))} />
</div>
)}
</header>