refactor(web): move changelog out of settings into its own route

Product changelog isn't an account setting. Give it a dedicated
/dashboard/changelog route and a "What's New" sidebar link (Support
section), and drop the changelog tab from settings. The header page
title now resolves support-section routes too.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/web/src/components/settings/settings-content.tsx

@@ -26,7 +26,6 @@ import { Skeleton } from "@sase/ui";
 import { useQuery } from "@tanstack/react-query";
 import {
   AlertTriangle,
-  CalendarDays,
   Copy,
   Eye,
   EyeOff,
@@ -42,7 +41,6 @@ import {
   User,
 } from "lucide-react";
 import { useEffect, useState } from "react";
-import { ChangelogTab } from "./changelog-tab";
 
 const TAB_ITEMS = [
   { value: "profile", icon: User, labelKey: "settings.tabs.profile" },
@@ -51,7 +49,6 @@ const TAB_ITEMS = [
   { value: "connections", icon: Link2, labelKey: "settings.tabs.connections" },
   { value: "referral", icon: Gift, labelKey: "settings.tabs.referral" },
   { value: "account", icon: Trash2, labelKey: "settings.tabs.account" },
-  { value: "changelog", icon: CalendarDays, labelKey: "settings.tabs.changelog" },
 ] as const;
 
 type ThemePref = "light" | "dark" | "system";
@@ -618,11 +615,6 @@ export function SettingsContent({
               </CardContent>
             </Card>
           </TabsContent>
-
-          {/* Changelog Tab */}
-          <TabsContent value="changelog">
-            <ChangelogTab />
-          </TabsContent>
         </div>
       </Tabs>
     </div>

apps/web/src/messages/en.json

@@ -42,6 +42,7 @@
     "logout": "Log Out",
     "contact": "Contact",
     "blog": "Blog",
+    "changelog": "What's New",
     "account": "Account",
     "sectionMain": "Main Menu",
     "sectionAccount": "Account",

apps/web/src/messages/tr.json

@@ -42,6 +42,7 @@
     "logout": "Çıkış Yap",
     "contact": "İletişim",
     "blog": "Blog",
+    "changelog": "Yenilikler",
     "account": "Hesap",
     "sectionMain": "Ana Menü",
     "sectionAccount": "Hesap",

apps/web/src/routeTree.gen.ts

@@ -25,6 +25,7 @@ import { Route as DashboardSettingsRouteImport } from './routes/dashboard/settin
 import { Route as DashboardServiceTestRouteImport } from './routes/dashboard/service-test'
 import { Route as DashboardSearchRouteImport } from './routes/dashboard/search'
 import { Route as DashboardHistoryRouteImport } from './routes/dashboard/history'
+import { Route as DashboardChangelogRouteImport } from './routes/dashboard/changelog'
 import { Route as DashboardBillingRouteImport } from './routes/dashboard/billing'
 import { Route as BlogSlugRouteImport } from './routes/blog_/$slug'
 import { Route as AuthResetPasswordRouteImport } from './routes/_auth/reset-password'
@@ -131,6 +132,11 @@ const DashboardHistoryRoute = DashboardHistoryRouteImport.update({
   path: '/history',
   getParentRoute: () => DashboardRoute,
 } as any)
+const DashboardChangelogRoute = DashboardChangelogRouteImport.update({
+  id: '/changelog',
+  path: '/changelog',
+  getParentRoute: () => DashboardRoute,
+} as any)
 const DashboardBillingRoute = DashboardBillingRouteImport.update({
   id: '/billing',
   path: '/billing',
@@ -293,6 +299,7 @@ export interface FileRoutesByFullPath {
   '/reset-password': typeof AuthResetPasswordRoute
   '/blog/$slug': typeof BlogSlugRoute
   '/dashboard/billing': typeof DashboardBillingRoute
+  '/dashboard/changelog': typeof DashboardChangelogRoute
   '/dashboard/history': typeof DashboardHistoryRoute
   '/dashboard/search': typeof DashboardSearchRoute
   '/dashboard/service-test': typeof DashboardServiceTestRoute
@@ -335,6 +342,7 @@ export interface FileRoutesByTo {
   '/reset-password': typeof AuthResetPasswordRoute
   '/blog/$slug': typeof BlogSlugRoute
   '/dashboard/billing': typeof DashboardBillingRoute
+  '/dashboard/changelog': typeof DashboardChangelogRoute
   '/dashboard/history': typeof DashboardHistoryRoute
   '/dashboard/search': typeof DashboardSearchRoute
   '/dashboard/service-test': typeof DashboardServiceTestRoute
@@ -380,6 +388,7 @@ export interface FileRoutesById {
   '/_auth/reset-password': typeof AuthResetPasswordRoute
   '/blog_/$slug': typeof BlogSlugRoute
   '/dashboard/billing': typeof DashboardBillingRoute
+  '/dashboard/changelog': typeof DashboardChangelogRoute
   '/dashboard/history': typeof DashboardHistoryRoute
   '/dashboard/search': typeof DashboardSearchRoute
   '/dashboard/service-test': typeof DashboardServiceTestRoute
@@ -425,6 +434,7 @@ export interface FileRouteTypes {
     | '/reset-password'
     | '/blog/$slug'
     | '/dashboard/billing'
+    | '/dashboard/changelog'
     | '/dashboard/history'
     | '/dashboard/search'
     | '/dashboard/service-test'
@@ -467,6 +477,7 @@ export interface FileRouteTypes {
     | '/reset-password'
     | '/blog/$slug'
     | '/dashboard/billing'
+    | '/dashboard/changelog'
     | '/dashboard/history'
     | '/dashboard/search'
     | '/dashboard/service-test'
@@ -511,6 +522,7 @@ export interface FileRouteTypes {
     | '/_auth/reset-password'
     | '/blog_/$slug'
     | '/dashboard/billing'
+    | '/dashboard/changelog'
     | '/dashboard/history'
     | '/dashboard/search'
     | '/dashboard/service-test'
@@ -666,6 +678,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof DashboardHistoryRouteImport
       parentRoute: typeof DashboardRoute
     }
+    '/dashboard/changelog': {
+      id: '/dashboard/changelog'
+      path: '/changelog'
+      fullPath: '/dashboard/changelog'
+      preLoaderRoute: typeof DashboardChangelogRouteImport
+      parentRoute: typeof DashboardRoute
+    }
     '/dashboard/billing': {
       id: '/dashboard/billing'
       path: '/billing'
@@ -871,6 +890,7 @@ const AuthRouteWithChildren = AuthRoute._addFileChildren(AuthRouteChildren)
 
 interface DashboardRouteChildren {
   DashboardBillingRoute: typeof DashboardBillingRoute
+  DashboardChangelogRoute: typeof DashboardChangelogRoute
   DashboardHistoryRoute: typeof DashboardHistoryRoute
   DashboardSearchRoute: typeof DashboardSearchRoute
   DashboardServiceTestRoute: typeof DashboardServiceTestRoute
@@ -899,6 +919,7 @@ interface DashboardRouteChildren {
 
 const DashboardRouteChildren: DashboardRouteChildren = {
   DashboardBillingRoute: DashboardBillingRoute,
+  DashboardChangelogRoute: DashboardChangelogRoute,
   DashboardHistoryRoute: DashboardHistoryRoute,
   DashboardSearchRoute: DashboardSearchRoute,
   DashboardServiceTestRoute: DashboardServiceTestRoute,

apps/web/src/routes/dashboard.tsx

@@ -30,6 +30,7 @@ import { Link, Outlet, createFileRoute, useNavigate, useRouterState } from "@tan
 import {
   BarChart3,
   BookOpen,
+  CalendarDays,
   ChevronsUpDown,
   Copy,
   CreditCard,
@@ -81,6 +82,7 @@ const accountItems: readonly NavItem[] = [
 ];
 
 const supportItems: readonly NavItem[] = [
+  { to: "/dashboard/changelog", labelKey: "nav.changelog", icon: CalendarDays },
   { to: "/contact", labelKey: "nav.contact", icon: Mail },
   { to: "/blog", labelKey: "nav.blog", icon: BookOpen },
 ];
@@ -240,7 +242,7 @@ function DashboardLayout() {
   const userEmail = user.email;
 
   // Current page title for the header — longest matching nav `to` wins.
-  const allNavItems = [...mainMenuItems, ...accountItems, ...adminItems];
+  const allNavItems = [...mainMenuItems, ...accountItems, ...supportItems, ...adminItems];
   const currentItem = allNavItems
     .filter((i) =>
       i.exact ? pathname === i.to : pathname === i.to || pathname.startsWith(`${i.to}/`),

apps/web/src/routes/dashboard/changelog.tsx

@@ -0,0 +1,14 @@
+import { ChangelogTab } from "@/components/settings/changelog-tab";
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/dashboard/changelog")({
+  component: ChangelogPage,
+});
+
+function ChangelogPage() {
+  return (
+    <div className="mx-auto max-w-3xl">
+      <ChangelogTab />
+    </div>
+  );
+}

apps/web/src/routes/dashboard/settings.tsx

@@ -15,7 +15,6 @@ export const SETTINGS_TABS = [
   "connections",
   "referral",
   "account",
-  "changelog",
 ] as const;
 export type SettingsTab = (typeof SETTINGS_TABS)[number];