fix: layouts composit°, userimage flickering, navbar toggle

.ts-prune/artifacts/tsprune-false-positives.conf

@@ -22,9 +22,9 @@ src/app/error.tsx:7 - default
 src/app/layout.tsx:4 - default
 src/app/not-found.tsx:1 - default
 src/contexts/SessionProvider.tsx:2 - default
-src/app/[locale]/not-found.tsx:18 - default
-src/app/[locale]/not-found.tsx:9 - generateMetadata
-src/app/[locale]/layout.tsx:7 - default
+src/app/[locale]/layout.tsx:13 - default
+src/app/[locale]/not-found.tsx:27 - default
+src/app/[locale]/not-found.tsx:12 - generateMetadata
 
 #--------------------
 # **** I. 3) SHADCN
@@ -287,7 +287,7 @@ src/types/adapters/PageAdapter.ts:12 - TopLevelRoot (used in module)
 # DO NOT DELETE THIS BEFORE A DOUBLE-CHECK!
 # Try to ts-prune with and without the .next folder, and see if
 # those false positives are always evaluated as outdated.
-# 📊 Entries: 43
+# 📊 Entries: 41
 #=================================================================
 
 #------------------------
@@ -299,47 +299,45 @@ src/app/api/auth/[...nextauth]/route.ts:8 - GET
 #-------------------
 # **** II. 2) NEXT
 #-------------------
-src/app/[locale]/(dashboard)/dashboard/bar/page.tsx:9 - generateMetadata
-src/app/[locale]/(dashboard)/dashboard/[notfound]/page.tsx:6 - default
-src/app/[locale]/(dashboard)/dashboard/foo/page.tsx:16 - default
-src/app/[locale]/(dashboard)/dashboard/foo/page.tsx:9 - generateMetadata
-src/app/[locale]/(dashboard)/dashboard/[...notfound]/page.tsx:10 - default
-src/app/[locale]/(dashboard)/dashboard/bar/page.tsx:16 - default
-src/app/[locale]/(dashboard)/dashboard/page.tsx:9 - generateMetadata
-src/app/[locale]/(dashboard)/dashboard/layout.tsx:17 - default
-src/app/[locale]/(dashboard)/dashboard/layout.tsx:13 - generateStaticParams
-src/app/[locale]/(dashboard)/layout.tsx:8 - default
-src/app/[locale]/(dashboard)/dashboard/page.tsx:16 - default
-src/app/[locale]/(pages)/page.tsx:26 - default
-src/app/[locale]/(pages)/layout.tsx:7 - default
-src/app/[locale]/lp/page.tsx:11 - generateStaticParams
-src/app/[locale]/lp/sign-up/page.tsx:23 - generateStaticParams
-src/app/[locale]/(pages)/blog/[categ]/[subcateg]/[slug]/page.tsx:18 - generateMetadata
-src/app/[locale]/(pages)/blog/[categ]/[subcateg]/[slug]/page.tsx:24 - generateStaticParams
-src/app/[locale]/(pages)/blog/page.tsx:9 - generateStaticParams
-src/app/[locale]/(pages)/blog/[categ]/[subcateg]/page.tsx:22 - default
-src/app/[locale]/(pages)/blog/[categ]/page.tsx:22 - default
-src/app/[locale]/(pages)/[...path]/page.tsx:43 - default
-src/app/[locale]/(pages)/blog/[categ]/[subcateg]/page.tsx:17 - generateStaticParams
-src/app/[locale]/(pages)/page.tsx:22 - generateStaticParams
-src/app/[locale]/(pages)/blog/[categ]/[subcateg]/[slug]/page.tsx:29 - default
-src/app/[locale]/lp/sign-up/page.tsx:27 - default
-src/app/[locale]/(pages)/page.tsx:14 - generateMetadata
-src/app/[locale]/(pages)/blog/[categ]/[subcateg]/[slug]/[...notfound]/page.tsx:9 - default
-src/app/[locale]/(pages)/blog/[categ]/[subcateg]/page.tsx:11 - generateMetadata
-src/app/[locale]/(pages)/blog/page.tsx:13 - default
-src/app/[locale]/(pages)/blog/[categ]/page.tsx:11 - generateMetadata
-src/app/[locale]/lp/[lp-slug]/page.tsx:20 - generateStaticParams
-src/app/[locale]/(pages)/blog/[categ]/page.tsx:17 - generateStaticParams
-src/app/[locale]/lp/sign-up/page.tsx:15 - generateMetadata
-src/app/[locale]/lp/page.tsx:15 - default
-src/app/[locale]/(pages)/[...path]/page.tsx:31 - generateStaticParams
-src/app/[locale]/lp/sign-up/layout.tsx:8 - default
-src/app/[locale]/lp/[lp-slug]/page.tsx:25 - default
-src/app/[locale]/lp/[lp-slug]/page.tsx:15 - generateMetadata
-src/app/[locale]/(pages)/blog/[categ]/layout.tsx:8 - default
-src/app/[locale]/lp/layout.tsx:7 - default
-src/app/[locale]/(pages)/[...path]/page.tsx:16 - generateMetadata
+src/app/[locale]/(pages)/(withfooter)/[...path]/page.tsx:12 - generateMetadata
+src/app/[locale]/(pages)/(withfooter)/blog/page.tsx:13 - default
+src/app/[locale]/(pages)/(withfooter)/blog/[categ]/[subcateg]/[slug]/page.tsx:26 - generateStaticParams
+src/app/[locale]/(pages)/(withfooter)/blog/[categ]/[subcateg]/[slug]/page.tsx:19 - generateMetadata
+src/app/[locale]/(pages)/(withfooter)/blog/page.tsx:9 - generateStaticParams
+src/app/[locale]/(pages)/dashboard/[notfound]/page.tsx:6 - default
+src/app/[locale]/(pages)/(withfooter)/[...path]/page.tsx:22 - default
+src/app/[locale]/(pages)/(withfooter)/blog/[categ]/[subcateg]/[slug]/page.tsx:33 - default
+src/app/[locale]/(pages)/dashboard/[...notfound]/page.tsx:10 - default
+src/app/[locale]/(pages)/(withfooter)/[...path]/page.tsx:17 - generateStaticParams
+src/app/[locale]/(pages)/(withfooter)/blog/[categ]/[subcateg]/[slug]/[...notfound]/page.tsx:10 - default
+src/app/[locale]/(pages)/(withfooter)/blog/[categ]/[subcateg]/page.tsx:12 - generateMetadata
+src/app/[locale]/lp/layout.tsx:8 - default
+src/app/[locale]/lp/[lp-slug]/page.tsx:21 - generateStaticParams
+src/app/[locale]/lp/sign-up/page.tsx:34 - default
+src/app/[locale]/(pages)/dashboard/layout.tsx:13 - generateStaticParams
+src/app/[locale]/(pages)/(withfooter)/blog/[categ]/page.tsx:12 - generateMetadata
+src/app/[locale]/(pages)/(withfooter)/layout.tsx:8 - default
+src/app/[locale]/lp/sign-up/page.tsx:30 - generateStaticParams
+src/app/[locale]/lp/[lp-slug]/page.tsx:26 - default
+src/app/[locale]/(pages)/(withfooter)/blog/[categ]/[subcateg]/page.tsx:19 - generateStaticParams
+src/app/[locale]/lp/sign-up/layout.tsx:9 - default
+src/app/[locale]/(pages)/dashboard/foo/page.tsx:9 - generateMetadata
+src/app/[locale]/(pages)/dashboard/bar/page.tsx:16 - default
+src/app/[locale]/(pages)/dashboard/bar/page.tsx:9 - generateMetadata
+src/app/[locale]/(pages)/dashboard/layout.tsx:17 - default
+src/app/[locale]/(pages)/layout.tsx:8 - default
+src/app/[locale]/(pages)/(withfooter)/blog/[categ]/[subcateg]/page.tsx:24 - default
+src/app/[locale]/(pages)/(withfooter)/page.tsx:28 - generateStaticParams
+src/app/[locale]/lp/[lp-slug]/page.tsx:16 - generateMetadata
+src/app/[locale]/lp/sign-up/page.tsx:18 - generateMetadata
+src/app/[locale]/(pages)/(withfooter)/page.tsx:32 - default
+src/app/[locale]/(pages)/dashboard/foo/page.tsx:16 - default
+src/app/[locale]/(pages)/(withfooter)/page.tsx:18 - generateMetadata
+src/app/[locale]/(pages)/(withfooter)/blog/[categ]/page.tsx:19 - generateStaticParams
+src/app/[locale]/(pages)/(withfooter)/blog/[categ]/page.tsx:24 - default
+src/app/[locale]/(pages)/(withfooter)/blog/[categ]/layout.tsx:9 - default
+src/app/[locale]/(pages)/dashboard/page.tsx:9 - generateMetadata
+src/app/[locale]/(pages)/dashboard/page.tsx:16 - default
 
 #=====================================================================
 # § III. 🥚 INCUBATOR

src/app/[locale]/(pages)/(withfooter)/layout.tsx

@@ -0,0 +1,13 @@
+/* v8 ignore start */
+// Stryker disable all
+
+import type { WithChildren } from '@rtm/shared-types/Next';
+
+import PagesWithFooterRootElement from '@/components/layouts/base/PagesWithFooterRootElement';
+
+export default function PagesLayout({ children }: WithChildren) {
+  return <PagesWithFooterRootElement>{children}</PagesWithFooterRootElement>;
+}
+
+// Stryker restore all
+/* v8 ignore stop */

src/components/layouts/base/DocumentRoot.tsx

@@ -6,7 +6,6 @@ import type { FunctionComponent } from 'react';
 
 import SitewideNavbar from '@/components/ui/navbar/SitewideNavbar';
 import PROGRESSBAR_CONFIG from '@/config/progressbar';
-import Footer from '@/components/ui/Footer';
 import dynamic from 'next/dynamic';
 
 const NextTopLoader = dynamic(() => import('./NextTopLoader'), { ssr: false });
@@ -16,15 +15,13 @@ interface DocumentRootProps extends WithChildren {
   disableGoToTopButton?: boolean;
   disableTopLoader?: boolean;
   withNavbar?: boolean;
-  withFooter?: boolean;
 }
 
-const DocumentRoot: FunctionComponent<DocumentRootProps> = ({ disableGoToTopButton, disableTopLoader, withNavbar, withFooter, children }) => (
+const DocumentRoot: FunctionComponent<DocumentRootProps> = ({ disableGoToTopButton, disableTopLoader, withNavbar, children }) => (
   <>
     {!disableTopLoader && <NextTopLoader {...PROGRESSBAR_CONFIG} />}
     {withNavbar && <SitewideNavbar />}
     {children}
-    {withFooter && <Footer />}
     {!disableGoToTopButton && <GoToTopButton />}
   </>
 );

src/components/layouts/base/PagesRootElement.tsx

@@ -8,11 +8,7 @@ import DocumentRoot from '@/components/layouts/base/DocumentRoot';
 
 interface HtmlElementProps extends WithChildren {}
 
-const PagesRootElement: FunctionComponent<HtmlElementProps> = ({ children }) => (
-  <DocumentRoot withNavbar withFooter>
-    {children}
-  </DocumentRoot>
-);
+const PagesRootElement: FunctionComponent<HtmlElementProps> = ({ children }) => <DocumentRoot withNavbar>{children}</DocumentRoot>;
 
 export default PagesRootElement;
 

src/components/layouts/base/DashboardRootElement.tsx → src/components/layouts/base/PagesWithFooterRootElement.tsx

@@ -4,17 +4,18 @@
 import type { WithChildren } from '@rtm/shared-types/Next';
 import type { FunctionComponent } from 'react';
 
-import DocumentRoot from '@/components/layouts/base/DocumentRoot';
+import Footer from '@/components/ui/Footer';
 
 interface HtmlElementProps extends WithChildren {}
 
-const DashboardRootElement: FunctionComponent<HtmlElementProps> = ({ children }) => (
-  <DocumentRoot disableGoToTopButton withNavbar>
+const PagesWithFooterRootElement: FunctionComponent<HtmlElementProps> = ({ children }) => (
+  <>
     {children}
-  </DocumentRoot>
+    <Footer />
+  </>
 );
 
-export default DashboardRootElement;
+export default PagesWithFooterRootElement;
 
 // Stryker restore all
 /* v8 ignore stop */

src/components/layouts/navbar/NavbarToggle.tsx

@@ -8,23 +8,20 @@ import preserveKeyboardNavigation from '@rtm/shared-lib/portable/html/preserveKe
 import getRefCurrentPtr from '@rtm/shared-lib/portable/react/getRefCurrentPtr';
 import useIsLargeScreen from '@/components/hooks/useIsLargeScreen';
 import { getClientSideI18n, useScopedI18n } from '@/i18n/client';
-import { useCallback, useEffect, useState, useRef } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import { i18ns } from '##/config/i18n';
 
 interface NavbarToggleProps {
   items: NavbarItems;
 }
 
-const menuItemsGenerator = (items: NavbarItems, closeMenu: () => void) => {
+const menuItemsGenerator = (items: NavbarItems) => {
   const globalT = getClientSideI18n();
 
   return items.map((item, index) => {
     return (
       <DropdownMenuItem
-        onClick={(event) => {
-          preserveKeyboardNavigation(event.target);
-          closeMenu();
-        }}
+        onClick={(event) => preserveKeyboardNavigation(event.target)}
         key={`navbar-hamburger-menu-item-${index}`}
         textValue={globalT(item.i18nTitle)}
         className="my-1 p-0"
@@ -39,8 +36,6 @@ const NavbarToggle: FunctionComponent<NavbarToggleProps> = ({ items }) => {
   const [isOpened, setIsOpened] = useState<boolean>(false);
   const onOpenChange = (opened: boolean) => setIsOpened(opened);
 
-  const closeMenu = useCallback(() => setIsOpened(false), []);
-
   const isLargeScreen = useIsLargeScreen();
   const scopedT = useScopedI18n(`${i18ns.navbar}.sr-only`);
 
@@ -65,8 +60,11 @@ const NavbarToggle: FunctionComponent<NavbarToggleProps> = ({ items }) => {
         <button className={className} ref={togglerRef} />
       </DropdownMenuTrigger>
 
-      <DropdownMenuContent className="relative min-w-[145px] dark:border-card ltr:right-4 rtl:left-4" aria-label={scopedT('hamburger-menu')}>
-        <nav className="max-w-[156px] text-center text-black [&>*>*]:h-12">{menuItemsGenerator(items, closeMenu)}</nav>
+      <DropdownMenuContent
+        className="relative min-w-[145px] dark:border-card dark:bg-card ltr:right-4 rtl:left-4"
+        aria-label={scopedT('hamburger-menu')}
+      >
+        <nav className="max-w-[156px] text-center text-black [&>*>*]:h-12">{menuItemsGenerator(items)}</nav>
       </DropdownMenuContent>
     </DropdownMenu>
   );