feat(editor-standalone): theme switcher and header

Picalines · Picalines · commit ac78fa9d4355 · 2025-07-29T23:47:55.000+03:00
diff --git a/apps/editor-standalone/src/app/layout.tsx b/apps/editor-standalone/src/app/layout.tsx
@@ -1,4 +1,5 @@
 import { EffectorNext } from '@effector/next'
+import { ThemeProvider } from '@repo/ui-kit/components/theme'
 import type { Metadata } from 'next'
 import { JetBrains_Mono } from 'next/font/google'
 import type { FC, ReactNode } from 'react'
@@ -15,9 +16,11 @@ const monoFont = JetBrains_Mono({
 
 const RootLayout: FC<{ children: ReactNode }> = ({ children }) => {
   return (
-    <html lang="en" className="dark">
+    <html lang="en" suppressHydrationWarning>
       <body className={monoFont.className}>
-        <EffectorNext>{children}</EffectorNext>
+        <ThemeProvider>
+          <EffectorNext>{children}</EffectorNext>
+        </ThemeProvider>
       </body>
     </html>
   )
diff --git a/apps/editor-standalone/src/screens/editor/ui/editor-header.tsx b/apps/editor-standalone/src/screens/editor/ui/editor-header.tsx
@@ -0,0 +1,16 @@
+import { Heading } from '@repo/ui-kit/components/heading'
+import { ThemeSwitcher } from '@repo/ui-kit/components/theme'
+import type { FC } from 'react'
+
+export const EditorHeader: FC = () => {
+  return (
+    <div className="flex items-center gap-2 border-b-2 p-2">
+      <div className="grow" />
+      <Heading.Root align="end">
+        <Heading.SuperTitle>kepvox</Heading.SuperTitle>
+        <Heading.Title>editor</Heading.Title>
+      </Heading.Root>
+      <ThemeSwitcher variant="outline" size="lg" />
+    </div>
+  )
+}
diff --git a/apps/editor-standalone/src/screens/editor/ui/editor-menubar.tsx b/apps/editor-standalone/src/screens/editor/ui/editor-menubar.tsx
diff --git a/apps/editor-standalone/src/screens/editor/ui/editor-screen.tsx b/apps/editor-standalone/src/screens/editor/ui/editor-screen.tsx
@@ -3,12 +3,12 @@
 import { Editor } from '@repo/editor'
 import type { FC } from 'react'
 import { defaultProject } from '../model'
-import { EditorMenubar } from './editor-menubar'
+import { EditorHeader } from './editor-header'
 
 export const EditorScreen: FC = () => {
   return (
     <div className="flex h-screen w-screen flex-col">
-      <EditorMenubar />
+      <EditorHeader />
       <Editor initialProject={defaultProject} />
     </div>
   )
