fix(react-email): Active state for root emails not appearing

Author: gabrielmfern

.changeset/dry-adults-grab.md

@@ -0,0 +1,5 @@
+---
+"react-email": patch
+---
+
+Fixes active state for root email templats on file tree

packages/react-email/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

packages/react-email/src/components/sidebar/sidebar-directory-children.tsx

@@ -3,7 +3,6 @@ import * as Collapsible from '@radix-ui/react-collapsible';
 import Link from 'next/link';
 import { useSearchParams } from 'next/navigation';
 import type { EmailsDirectory } from '../../utils/get-emails-directory-metadata';
-import { emailsDirectoryAbsolutePath } from '../../utils/emails-directory-absolute-path';
 import { cn } from '../../utils';
 import { IconFile } from '../icons/icon-file';
 import { SidebarDirectory } from './sidebar-directory';
@@ -15,15 +14,13 @@ export const SidebarDirectoryChildren = (props: {
   isRoot?: boolean;
 }) => {
   const searchParams = useSearchParams();
-  const isBaseEmailsDirectory =
-    props.emailsDirectoryMetadata.absolutePath === emailsDirectoryAbsolutePath;
 
   return (
     <AnimatePresence initial={false}>
       {props.open ? (
         <Collapsible.Content
           asChild
-          className="relative data-[root=true]:mt-2 overflow-y-hidden pl-1"
+          className="relative overflow-y-hidden pl-1"
           forceMount
         >
           <motion.div
@@ -35,7 +32,7 @@ export const SidebarDirectoryChildren = (props: {
               <div className="line absolute left-2.5 w-px h-full bg-slate-6" />
             )}
 
-            <div className="data-[root=true]:py-2 flex flex-col truncate">
+            <div className="flex flex-col truncate">
               <LayoutGroup id="sidebar">
                 {props.emailsDirectoryMetadata.subDirectories.map(
                   (subDirectory) => (
@@ -50,7 +47,7 @@ export const SidebarDirectoryChildren = (props: {
 
                 {props.emailsDirectoryMetadata.emailFilenames.map(
                   (emailFilename, index) => {
-                    const emailSlug = isBaseEmailsDirectory
+                    const emailSlug = props.isRoot
                       ? emailFilename
                       : `${props.emailsDirectoryMetadata.relativePath}/${emailFilename}`;
 
@@ -67,7 +64,7 @@ export const SidebarDirectoryChildren = (props: {
                     };
                     const isCurrentPage = props.currentEmailOpenSlug
                       ? removeExtensionFrom(props.currentEmailOpenSlug) ===
-                        emailSlug
+                      emailSlug
                       : false;
 
                     return (

packages/react-email/src/components/sidebar/sidebar.tsx

@@ -29,7 +29,7 @@ export const Sidebar = ({
         <Logo />
       </div>
       <nav className="p-4 flex-grow lg:pt-0 pl-0 w-screen h-[calc(100vh_-_70px)] lg:w-full lg:min-w-[275px] lg:max-w-[275px] flex flex-col overflow-y-auto">
-        <Collapsible.Root>
+        <Collapsible.Root open>
           <React.Suspense>
             <SidebarDirectoryChildren
               currentEmailOpenSlug={currentEmailOpenSlug}