feat: add lockbox layout with meta (#212)

frontend/app/lockbox/[boxId]/error.tsx

@@ -1,21 +1,15 @@
 'use client' // Error components must be Client components
 
-import { Button } from '@/components/common/Button'
-import { HeroPattern } from '@/components/common/HeroPattern'
-import OnboardingNavbar from '@/components/layout/OnboardingNavbar'
 import { useEffect } from 'react'
 import { FaBoxOpen } from 'react-icons/fa'
 
 export default function Error({ error, reset }: { error: Error; reset: () => void }) {
   useEffect(() => {
-    // Log the error to an error reporting service
     console.error(error)
   }, [error])
 
   return (
     <div className="h-screen w-full text-black dark:text-white flex flex-col md:gap-16">
-      <HeroPattern />
-      <OnboardingNavbar />
       <div className="mx-auto my-auto max-w-6xl p-4 text-center">
         <div className="space-y-2 my-auto">
           <FaBoxOpen className="text-neutral-500/40 size-40 mx-auto" />

frontend/app/lockbox/[boxId]/layout.tsx

@@ -0,0 +1,19 @@
+import { Metadata } from 'next'
+import { HeroPattern } from '@/components/common/HeroPattern'
+import OnboardingNavbar from '@/components/layout/OnboardingNavbar'
+
+export const metadata: Metadata = {
+  title: 'Phase Lockbox',
+  description:
+    'You've recieved a secret via Phase Lockbox, secured with zero-trust encryption.',
+}
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <HeroPattern />
+      <OnboardingNavbar />
+      {children}
+    </>
+  )
+}

frontend/app/lockbox/[boxId]/page.tsx

@@ -1,6 +1,4 @@
 import { LockboxType } from '@/apollo/graphql'
-import { HeroPattern } from '@/components/common/HeroPattern'
-import OnboardingNavbar from '@/components/layout/OnboardingNavbar'
 import { LockboxViewer } from '@/components/lockbox/LockboxViewer'
 import { getBox } from '@/utils/lockbox'
 
@@ -10,8 +8,6 @@ export default async function Lockbox({ params }: { params: { boxId: string } })
   return (
     <>
       <div className="h-screen w-full text-black dark:text-white flex flex-col md:gap-16">
-        <HeroPattern />
-        <OnboardingNavbar />
         <div className="mx-auto my-auto max-w-7xl p-4 grid md:grid-cols-2 gap-16 text-center md:text-left">
           <div className="space-y-2 my-auto max-w-md">
             <div className="text-4xl font-semibold">Phase Lockbox</div>