From 3083be0c9dc9ec0ded58eda937b83fbdf511f386 Mon Sep 17 00:00:00 2001 From: Mohamed Bassem Date: Sun, 9 Nov 2025 11:50:58 +0000 Subject: feat: Add page titles (#2109) * feat: add Next.js metadata titles to dynamic and settings pages Add page titles using Next.js metadata API for better SEO and user experience: - List pages: Show list name in format " | Karakeep" - Tag pages: Show tag name in format " | Karakeep" - Admin pages: Add titles for overview, users, and background jobs pages - Settings pages: Add titles for all settings pages (API keys, AI, feeds, import, info, webhooks, subscription, rules, stats, assets, broken links) For client components (rules, stats, assets, broken-links), created layout.tsx files to export metadata since metadata can only be exported from server components. * feat: add Next.js metadata titles to dashboard pages Add page titles using Next.js metadata API to archive, favourites, highlights, and all tags pages: - Archive page: Show "Archive | Karakeep" - Favourites page: Show "Favourites | Karakeep" - Highlights page: Show "Highlights | Karakeep" - All Tags page: Show "All Tags | Karakeep" Improves SEO and user experience across all dashboard browsing pages. * refactor: use i18n translations for dashboard page titles Convert hardcoded page titles to use translations via generateMetadata: - Archive page: Uses common.archive translation - Favourites page: Uses lists.favourites translation - Highlights page: Uses common.highlights translation - All Tags page: Uses tags.all_tags translation Improves localization support across dashboard pages. * feat: add i18n translations to admin and settings page titles Convert hardcoded page titles to use translations via generateMetadata: - Admin Overview: Uses admin.admin_settings translation - AI Settings: Uses settings.ai.ai_settings translation - API Keys: Uses settings.api_keys.api_keys translation - Feed Settings: Uses settings.feeds.rss_subscriptions translation - Import/Export: Uses settings.import.import_export translation - Account Info: Uses settings.info.user_info translation - Subscription: Uses settings.subscription.subscription translation - Webhooks: Uses settings.webhooks.webhooks translation Improves localization support across admin and settings pages. * revert accidental commit * more translations * more fixes --------- Co-authored-by: Claude --- apps/web/app/settings/ai/page.tsx | 10 ++++++++++ apps/web/app/settings/api-keys/page.tsx | 10 ++++++++++ apps/web/app/settings/assets/layout.tsx | 18 ++++++++++++++++++ apps/web/app/settings/broken-links/layout.tsx | 18 ++++++++++++++++++ apps/web/app/settings/feeds/page.tsx | 10 ++++++++++ apps/web/app/settings/import/page.tsx | 10 ++++++++++ apps/web/app/settings/info/page.tsx | 10 ++++++++++ apps/web/app/settings/rules/layout.tsx | 18 ++++++++++++++++++ apps/web/app/settings/stats/layout.tsx | 18 ++++++++++++++++++ apps/web/app/settings/subscription/page.tsx | 10 ++++++++++ apps/web/app/settings/webhooks/page.tsx | 10 ++++++++++ 11 files changed, 142 insertions(+) create mode 100644 apps/web/app/settings/assets/layout.tsx create mode 100644 apps/web/app/settings/broken-links/layout.tsx create mode 100644 apps/web/app/settings/rules/layout.tsx create mode 100644 apps/web/app/settings/stats/layout.tsx (limited to 'apps/web/app/settings') diff --git a/apps/web/app/settings/ai/page.tsx b/apps/web/app/settings/ai/page.tsx index 2b3d7a8d..02e2ae4b 100644 --- a/apps/web/app/settings/ai/page.tsx +++ b/apps/web/app/settings/ai/page.tsx @@ -1,4 +1,14 @@ +import type { Metadata } from "next"; import AISettings from "@/components/settings/AISettings"; +import { useTranslation } from "@/lib/i18n/server"; + +export async function generateMetadata(): Promise { + // oxlint-disable-next-line rules-of-hooks + const { t } = await useTranslation(); + return { + title: `${t("settings.ai.ai_settings")} | Karakeep`, + }; +} export default function AISettingsPage() { return ; diff --git a/apps/web/app/settings/api-keys/page.tsx b/apps/web/app/settings/api-keys/page.tsx index 1c3718d6..494a0b5c 100644 --- a/apps/web/app/settings/api-keys/page.tsx +++ b/apps/web/app/settings/api-keys/page.tsx @@ -1,4 +1,14 @@ +import type { Metadata } from "next"; import ApiKeySettings from "@/components/settings/ApiKeySettings"; +import { useTranslation } from "@/lib/i18n/server"; + +export async function generateMetadata(): Promise { + // oxlint-disable-next-line rules-of-hooks + const { t } = await useTranslation(); + return { + title: `${t("settings.api_keys.api_keys")} | Karakeep`, + }; +} export default async function ApiKeysPage() { return ( diff --git a/apps/web/app/settings/assets/layout.tsx b/apps/web/app/settings/assets/layout.tsx new file mode 100644 index 00000000..2324c83a --- /dev/null +++ b/apps/web/app/settings/assets/layout.tsx @@ -0,0 +1,18 @@ +import type { Metadata } from "next"; +import { useTranslation } from "@/lib/i18n/server"; + +export async function generateMetadata(): Promise { + // oxlint-disable-next-line rules-of-hooks + const { t } = await useTranslation(); + return { + title: `${t("settings.manage_assets.manage_assets")} | Karakeep`, + }; +} + +export default function AssetsLayout({ + children, +}: { + children: React.ReactNode; +}) { + return <>{children}; +} diff --git a/apps/web/app/settings/broken-links/layout.tsx b/apps/web/app/settings/broken-links/layout.tsx new file mode 100644 index 00000000..45f3dadf --- /dev/null +++ b/apps/web/app/settings/broken-links/layout.tsx @@ -0,0 +1,18 @@ +import type { Metadata } from "next"; +import { useTranslation } from "@/lib/i18n/server"; + +export async function generateMetadata(): Promise { + // oxlint-disable-next-line rules-of-hooks + const { t } = await useTranslation(); + return { + title: `${t("settings.broken_links.broken_links")} | Karakeep`, + }; +} + +export default function BrokenLinksLayout({ + children, +}: { + children: React.ReactNode; +}) { + return <>{children}; +} diff --git a/apps/web/app/settings/feeds/page.tsx b/apps/web/app/settings/feeds/page.tsx index d2d1f182..603e9a09 100644 --- a/apps/web/app/settings/feeds/page.tsx +++ b/apps/web/app/settings/feeds/page.tsx @@ -1,4 +1,14 @@ +import type { Metadata } from "next"; import FeedSettings from "@/components/settings/FeedSettings"; +import { useTranslation } from "@/lib/i18n/server"; + +export async function generateMetadata(): Promise { + // oxlint-disable-next-line rules-of-hooks + const { t } = await useTranslation(); + return { + title: `${t("settings.feeds.rss_subscriptions")} | Karakeep`, + }; +} export default function FeedSettingsPage() { return ; diff --git a/apps/web/app/settings/import/page.tsx b/apps/web/app/settings/import/page.tsx index 11780d51..23ef4019 100644 --- a/apps/web/app/settings/import/page.tsx +++ b/apps/web/app/settings/import/page.tsx @@ -1,4 +1,14 @@ +import type { Metadata } from "next"; import ImportExport from "@/components/settings/ImportExport"; +import { useTranslation } from "@/lib/i18n/server"; + +export async function generateMetadata(): Promise { + // oxlint-disable-next-line rules-of-hooks + const { t } = await useTranslation(); + return { + title: `${t("settings.import.import_export")} | Karakeep`, + }; +} export default function ImportSettingsPage() { return ; diff --git a/apps/web/app/settings/info/page.tsx b/apps/web/app/settings/info/page.tsx index 96deab96..1807b538 100644 --- a/apps/web/app/settings/info/page.tsx +++ b/apps/web/app/settings/info/page.tsx @@ -1,7 +1,17 @@ +import type { Metadata } from "next"; import { ChangePassword } from "@/components/settings/ChangePassword"; import { DeleteAccount } from "@/components/settings/DeleteAccount"; import UserDetails from "@/components/settings/UserDetails"; import UserOptions from "@/components/settings/UserOptions"; +import { useTranslation } from "@/lib/i18n/server"; + +export async function generateMetadata(): Promise { + // oxlint-disable-next-line rules-of-hooks + const { t } = await useTranslation(); + return { + title: `${t("settings.info.user_info")} | Karakeep`, + }; +} export default async function InfoPage() { return ( diff --git a/apps/web/app/settings/rules/layout.tsx b/apps/web/app/settings/rules/layout.tsx new file mode 100644 index 00000000..03b4316e --- /dev/null +++ b/apps/web/app/settings/rules/layout.tsx @@ -0,0 +1,18 @@ +import type { Metadata } from "next"; +import { useTranslation } from "@/lib/i18n/server"; + +export async function generateMetadata(): Promise { + // oxlint-disable-next-line rules-of-hooks + const { t } = await useTranslation(); + return { + title: `${t("settings.rules.rules")} | Karakeep`, + }; +} + +export default function RulesLayout({ + children, +}: { + children: React.ReactNode; +}) { + return <>{children}; +} diff --git a/apps/web/app/settings/stats/layout.tsx b/apps/web/app/settings/stats/layout.tsx new file mode 100644 index 00000000..0f24c049 --- /dev/null +++ b/apps/web/app/settings/stats/layout.tsx @@ -0,0 +1,18 @@ +import type { Metadata } from "next"; +import { useTranslation } from "@/lib/i18n/server"; + +export async function generateMetadata(): Promise { + // oxlint-disable-next-line rules-of-hooks + const { t } = await useTranslation(); + return { + title: `${t("settings.stats.usage_statistics")} | Karakeep`, + }; +} + +export default function StatsLayout({ + children, +}: { + children: React.ReactNode; +}) { + return <>{children}; +} diff --git a/apps/web/app/settings/subscription/page.tsx b/apps/web/app/settings/subscription/page.tsx index e8c46460..5b06798e 100644 --- a/apps/web/app/settings/subscription/page.tsx +++ b/apps/web/app/settings/subscription/page.tsx @@ -1,9 +1,19 @@ +import type { Metadata } from "next"; import { redirect } from "next/navigation"; import SubscriptionSettings from "@/components/settings/SubscriptionSettings"; import { QuotaProgress } from "@/components/subscription/QuotaProgress"; +import { useTranslation } from "@/lib/i18n/server"; import serverConfig from "@karakeep/shared/config"; +export async function generateMetadata(): Promise { + // oxlint-disable-next-line rules-of-hooks + const { t } = await useTranslation(); + return { + title: `${t("settings.subscription.subscription")} | Karakeep`, + }; +} + export default async function SubscriptionPage() { if (!serverConfig.stripe.isConfigured) { redirect("/settings"); diff --git a/apps/web/app/settings/webhooks/page.tsx b/apps/web/app/settings/webhooks/page.tsx index 327d0d8f..4f798aa1 100644 --- a/apps/web/app/settings/webhooks/page.tsx +++ b/apps/web/app/settings/webhooks/page.tsx @@ -1,4 +1,14 @@ +import type { Metadata } from "next"; import WebhookSettings from "@/components/settings/WebhookSettings"; +import { useTranslation } from "@/lib/i18n/server"; + +export async function generateMetadata(): Promise { + // oxlint-disable-next-line rules-of-hooks + const { t } = await useTranslation(); + return { + title: `${t("settings.webhooks.webhooks")} | Karakeep`, + }; +} export default function WebhookSettingsPage() { return ; -- cgit v1.2.3-70-g09d2