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 "<name> | Karakeep"
- Tag pages: Show tag name in format "<name> | 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 <noreply@anthropic.com>

6 files changed, 75 insertions, 0 deletions

diff --git a/apps/web/app/dashboard/archive/page.tsx b/apps/web/app/dashboard/archive/page.tsx
index becb6a58..33a6e610 100644
--- a/apps/web/app/dashboard/archive/page.tsx
+++ b/apps/web/app/dashboard/archive/page.tsx
@@ -1,5 +1,15 @@
+import type { Metadata } from "next";
 import Bookmarks from "@/components/dashboard/bookmarks/Bookmarks";
 import InfoTooltip from "@/components/ui/info-tooltip";
+import { useTranslation } from "@/lib/i18n/server";
+
+export async function generateMetadata(): Promise<Metadata> {
+  // oxlint-disable-next-line rules-of-hooks
+  const { t } = await useTranslation();
+  return {
+    title: `${t("common.archive")} | Karakeep`,
+  };
+}
 
 function header() {
   return (
diff --git a/apps/web/app/dashboard/favourites/page.tsx b/apps/web/app/dashboard/favourites/page.tsx
index be20bd2f..7ece9cdf 100644
--- a/apps/web/app/dashboard/favourites/page.tsx
+++ b/apps/web/app/dashboard/favourites/page.tsx
@@ -1,4 +1,14 @@
+import type { Metadata } from "next";
 import Bookmarks from "@/components/dashboard/bookmarks/Bookmarks";
+import { useTranslation } from "@/lib/i18n/server";
+
+export async function generateMetadata(): Promise<Metadata> {
+  // oxlint-disable-next-line rules-of-hooks
+  const { t } = await useTranslation();
+  return {
+    title: `${t("lists.favourites")} | Karakeep`,
+  };
+}
 
 export default async function FavouritesBookmarkPage() {
   return (
diff --git a/apps/web/app/dashboard/highlights/page.tsx b/apps/web/app/dashboard/highlights/page.tsx
index 1410d1fd..5945de00 100644
--- a/apps/web/app/dashboard/highlights/page.tsx
+++ b/apps/web/app/dashboard/highlights/page.tsx
@@ -1,9 +1,18 @@
+import type { Metadata } from "next";
 import AllHighlights from "@/components/dashboard/highlights/AllHighlights";
 import { Separator } from "@/components/ui/separator";
 import { useTranslation } from "@/lib/i18n/server";
 import { api } from "@/server/api/client";
 import { Highlighter } from "lucide-react";
 
+export async function generateMetadata(): Promise<Metadata> {
+  // oxlint-disable-next-line rules-of-hooks
+  const { t } = await useTranslation();
+  return {
+    title: `${t("common.highlights")} | Karakeep`,
+  };
+}
+
 export default async function HighlightsPage() {
   // oxlint-disable-next-line rules-of-hooks
   const { t } = await useTranslation();
diff --git a/apps/web/app/dashboard/lists/[listId]/page.tsx b/apps/web/app/dashboard/lists/[listId]/page.tsx
index 4714a71c..3f9c3416 100644
--- a/apps/web/app/dashboard/lists/[listId]/page.tsx
+++ b/apps/web/app/dashboard/lists/[listId]/page.tsx
@@ -1,3 +1,4 @@
+import type { Metadata } from "next";
 import { notFound } from "next/navigation";
 import Bookmarks from "@/components/dashboard/bookmarks/Bookmarks";
 import ListHeader from "@/components/dashboard/lists/ListHeader";
@@ -6,6 +7,23 @@ import { TRPCError } from "@trpc/server";
 
 import { BookmarkListContextProvider } from "@karakeep/shared-react/hooks/bookmark-list-context";
 
+export async function generateMetadata(props: {
+  params: Promise<{ listId: string }>;
+}): Promise<Metadata> {
+  const params = await props.params;
+  try {
+    const list = await api.lists.get({ listId: params.listId });
+    return {
+      title: `${list.name} | Karakeep`,
+    };
+  } catch (e) {
+    if (e instanceof TRPCError && e.code === "NOT_FOUND") {
+      notFound();
+    }
+    throw e;
+  }
+}
+
 export default async function ListPage(props: {
   params: Promise<{ listId: string }>;
   searchParams?: Promise<{
diff --git a/apps/web/app/dashboard/tags/[tagId]/page.tsx b/apps/web/app/dashboard/tags/[tagId]/page.tsx
index 7971da1e..fcb5010e 100644
--- a/apps/web/app/dashboard/tags/[tagId]/page.tsx
+++ b/apps/web/app/dashboard/tags/[tagId]/page.tsx
@@ -1,3 +1,4 @@
+import type { Metadata } from "next";
 import { notFound } from "next/navigation";
 import Bookmarks from "@/components/dashboard/bookmarks/Bookmarks";
 import EditableTagName from "@/components/dashboard/tags/EditableTagName";
@@ -7,6 +8,23 @@ import { api } from "@/server/api/client";
 import { TRPCError } from "@trpc/server";
 import { MoreHorizontal } from "lucide-react";
 
+export async function generateMetadata(props: {
+  params: Promise<{ tagId: string }>;
+}): Promise<Metadata> {
+  const params = await props.params;
+  try {
+    const tag = await api.tags.get({ tagId: params.tagId });
+    return {
+      title: `${tag.name} | Karakeep`,
+    };
+  } catch (e) {
+    if (e instanceof TRPCError && e.code === "NOT_FOUND") {
+      notFound();
+    }
+    throw e;
+  }
+}
+
 export default async function TagPage(props: {
   params: Promise<{ tagId: string }>;
   searchParams?: Promise<{
diff --git a/apps/web/app/dashboard/tags/page.tsx b/apps/web/app/dashboard/tags/page.tsx
index b2acd45b..2ebcf2f7 100644
--- a/apps/web/app/dashboard/tags/page.tsx
+++ b/apps/web/app/dashboard/tags/page.tsx
@@ -1,4 +1,14 @@
+import type { Metadata } from "next";
 import AllTagsView from "@/components/dashboard/tags/AllTagsView";
+import { useTranslation } from "@/lib/i18n/server";
+
+export async function generateMetadata(): Promise<Metadata> {
+  // oxlint-disable-next-line rules-of-hooks
+  const { t } = await useTranslation();
+  return {
+    title: `${t("tags.all_tags")} | Karakeep`,
+  };
+}
 
 export default async function TagsPage() {
   return <AllTagsView />;