refactor

src/shared/AppLayout.tsx

@@ -0,0 +1,30 @@
+import { type FC, type ReactNode } from 'react'
+import Header from './Header'
+import SideBar from './Sidebar'
+
+type AppLayoutProps = {
+  children: ReactNode
+}
+
+/**
+ * Authenticated app shell: fixed header + sidebar, one scrollable main column.
+ * Horizontal padding on the scrollport keeps content clear of the RTL scrollbar.
+ */
+const AppLayout: FC<AppLayoutProps> = ({ children }) => {
+  return (
+    <div className="box-border flex h-dvh flex-col overflow-hidden p-[var(--layout-frame)]">
+      <Header />
+      <SideBar />
+
+      <div className="flex min-h-0 flex-1 flex-col pt-[var(--layout-header-stack)] xl:ms-[var(--layout-main-offset)] xl:pt-[var(--layout-header-stack-xl)]">
+        <main className="app-main min-h-0 flex-1 overflow-y-auto overscroll-contain">
+          <div className="min-w-0 px-[var(--layout-content-pad-x)] pb-28 xl:pb-16">
+            {children}
+          </div>
+        </main>
+      </div>
+    </div>
+  )
+}
+
+export default AppLayout