fix(ui): keep sidebar scroll when switching emails

packages/ui/src/app/layout.tsx

@@ -1,6 +1,7 @@
 import './globals.css';
 
 import type { Metadata } from 'next';
+import { Shell } from '../components/shell';
 import { EmailsProvider } from '../contexts/emails';
 import { WorkspaceProvider } from '../contexts/workspace';
 import { getEmailsDirectoryMetadata } from '../utils/get-emails-directory-metadata';
@@ -42,7 +43,7 @@ export default async function RootLayout({
             <EmailsProvider
               initialEmailsDirectoryMetadata={emailsDirectoryMetadata}
             >
-              {children}
+              <Shell>{children}</Shell>
             </EmailsProvider>
           </WorkspaceProvider>
         </div>

packages/ui/src/app/page.tsx

@@ -3,42 +3,39 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { Button, Heading, Text } from '../components';
 import CodeSnippet from '../components/code-snippet';
-import { Shell } from '../components/shell';
 import { emailsDirectoryAbsolutePath } from './env';
 import logo from './logo.png';
 
 export default function Home() {
   const baseEmailsDirectoryName = path.basename(emailsDirectoryAbsolutePath);
 
   return (
-    <Shell>
-      <div className="w-full h-full flex items-center justify-center p-8">
-        <div className="-mt-10 relative max-w-lg flex flex-col items-center gap-3 text-center">
-          <Image
-            alt="React Email Icon"
-            className="mb-8"
-            height={144}
-            src={logo}
-            style={{
-              borderRadius: 34,
-              boxShadow: '0 .625rem 12.5rem 1.25rem #2B7CA080',
-            }}
-            width={141}
-          />
-          <Heading as="h2" size="6" weight="medium">
-            Welcome to React Email
-          </Heading>
-          <Text as="p">
-            To start developing your emails, you can create a<br />
-            <CodeSnippet>.jsx</CodeSnippet> or <CodeSnippet>.tsx</CodeSnippet>{' '}
-            file under your <CodeSnippet>{baseEmailsDirectoryName}</CodeSnippet>{' '}
-            folder.
-          </Text>
-          <Button asChild className="mt-3" size="3">
-            <Link href="https://react.email/docs">Check the docs</Link>
-          </Button>
-        </div>
+    <div className="w-full h-full flex items-center justify-center p-8">
+      <div className="-mt-10 relative max-w-lg flex flex-col items-center gap-3 text-center">
+        <Image
+          alt="React Email Icon"
+          className="mb-8"
+          height={144}
+          src={logo}
+          style={{
+            borderRadius: 34,
+            boxShadow: '0 .625rem 12.5rem 1.25rem #2B7CA080',
+          }}
+          width={141}
+        />
+        <Heading as="h2" size="6" weight="medium">
+          Welcome to React Email
+        </Heading>
+        <Text as="p">
+          To start developing your emails, you can create a<br />
+          <CodeSnippet>.jsx</CodeSnippet> or <CodeSnippet>.tsx</CodeSnippet>{' '}
+          file under your <CodeSnippet>{baseEmailsDirectoryName}</CodeSnippet>{' '}
+          folder.
+        </Text>
+        <Button asChild className="mt-3" size="3">
+          <Link href="https://react.email/docs">Check the docs</Link>
+        </Button>
       </div>
-    </Shell>
+    </div>
   );
 }

packages/ui/src/app/preview/[...slug]/page.tsx

@@ -7,7 +7,6 @@ import {
 } from '../../../actions/email-validation/check-compatibility';
 import { getEmailPathFromSlug } from '../../../actions/get-email-path-from-slug';
 import { renderEmailByPath } from '../../../actions/render-email-by-path';
-import { Shell } from '../../../components/shell';
 import { Toolbar } from '../../../components/toolbar';
 import type { LintingRow } from '../../../components/toolbar/linter';
 import type { SpamCheckingResult } from '../../../components/toolbar/spam-assassin';
@@ -135,23 +134,21 @@ This is most likely not an issue with the preview server. Maybe there was a typo
       emailPath={emailPath}
       serverRenderingResult={serverEmailRenderingResult}
     >
-      <Shell currentEmailOpenSlug={slug}>
-        {/* This suspense is so that this page doesn't throw warnings */}
-        {/* on the build of the preview server de-opting into         */}
-        {/* client-side rendering on build                            */}
-        <Suspense>
-          <Preview emailTitle={path.basename(emailPath)} />
-
-          <ToolbarProvider hasApiKey={(resendApiKey ?? '').trim().length > 0}>
-            <Toolbar
-              serverLintingRows={lintingRows}
-              serverSpamCheckingResult={spamCheckingResult}
-              serverCompatibilityResults={compatibilityCheckingResults}
-              serverCompatibilityClients={getRelevantEmailClients()}
-            />
-          </ToolbarProvider>
-        </Suspense>
-      </Shell>
+      {/* This suspense is so that this page doesn't throw warnings */}
+      {/* on the build of the preview server de-opting into         */}
+      {/* client-side rendering on build                            */}
+      <Suspense>
+        <Preview emailTitle={path.basename(emailPath)} />
+
+        <ToolbarProvider hasApiKey={(resendApiKey ?? '').trim().length > 0}>
+          <Toolbar
+            serverLintingRows={lintingRows}
+            serverSpamCheckingResult={spamCheckingResult}
+            serverCompatibilityResults={compatibilityCheckingResults}
+            serverCompatibilityClients={getRelevantEmailClients()}
+          />
+        </ToolbarProvider>
+      </Suspense>
     </PreviewProvider>
   );
 }

packages/ui/src/components/shell.tsx

@@ -7,7 +7,6 @@ import { Sidebar } from './sidebar';
 
 interface ShellProps {
   children: React.ReactNode;
-  currentEmailOpenSlug?: string;
 }
 
 interface ShellContextValue {
@@ -19,7 +18,7 @@ export const ShellContext = React.createContext<ShellContextValue | undefined>(
   undefined,
 );
 
-export const Shell = ({ children, currentEmailOpenSlug }: ShellProps) => {
+export const Shell = ({ children }: ShellProps) => {
   const [sidebarToggled, setSidebarToggled] = React.useState(true);
 
   return (
@@ -73,7 +72,6 @@ export const Shell = ({ children, currentEmailOpenSlug }: ShellProps) => {
                 'lg:w-0': !sidebarToggled,
               },
             )}
-            currentEmailOpenSlug={currentEmailOpenSlug}
           />
         </React.Suspense>
         <main

packages/ui/src/components/sidebar/sidebar.tsx

@@ -1,17 +1,21 @@
 'use client';
 import { clsx } from 'clsx';
+import { useParams } from 'next/navigation';
 import { useEmails } from '../../contexts/emails';
 import { cn } from '../../utils';
 import { Logo } from '../logo';
 import { FileTree } from './file-tree';
 
 interface SidebarProps {
   className?: string;
-  currentEmailOpenSlug?: string;
 }
 
-export const Sidebar = ({ className, currentEmailOpenSlug }: SidebarProps) => {
+export const Sidebar = ({ className }: SidebarProps) => {
   const { emailsDirectoryMetadata } = useEmails();
+  const params = useParams();
+  const currentEmailOpenSlug = Array.isArray(params.slug)
+    ? decodeURIComponent(params.slug.join('/'))
+    : undefined;
 
   return (
     <aside