feat(PageTitle): provide alternate title for app details page

src/app/(dashboard)/components/PageTitle/PageTitle.tsx

@@ -5,14 +5,18 @@ import clsx from 'clsx';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
-import React from 'react';
+import React, { useMemo } from 'react';
 
-export const PageTitle = () => {
+type Props = {
+  apps: { id: string; name: string }[];
+};
+
+export const PageTitle = ({ apps }: Props) => {
   const t = useTranslations();
 
   const path = usePathname();
 
-  const pathArray = path?.substring(1).split('/') || [];
+  const pathArray = useMemo(() => path?.substring(1).split('/') || [], [path]);
 
   const renderBreadcrumbs = () => {
     return (

src/app/(dashboard)/layout.tsx

@@ -4,6 +4,7 @@ import { getUserFromCookie } from '@/server/common/session.helpers';
 import { SystemServiceClass } from '@/server/services/system';
 import semver from 'semver';
 import clsx from 'clsx';
+import { AppServiceClass } from '@/server/services/apps/apps.service';
 import { Header } from './components/Header';
 import { PageTitle } from './components/PageTitle';
 import styles from './layout.module.scss';
@@ -12,6 +13,8 @@ import { LayoutActions } from './components/LayoutActions/LayoutActions';
 export default async function DashboardLayout({ children }: { children: React.ReactNode }) {
   const user = await getUserFromCookie();
 
+  const { apps } = await AppServiceClass.listApps();
+
   if (!user) {
     redirect('/login');
   }
@@ -28,7 +31,7 @@ export default async function DashboardLayout({ children }: { children: React.Re
           <div className="container-xl">
             <div className={clsx(styles.title, 'align-items-stretch align-items-md-center d-flex flex-column flex-md-row ')}>
               <div className="me-3 text-white">
-                <PageTitle />
+                <PageTitle apps={apps} />
               </div>
               <div className="flex-fill">
                 <LayoutActions />