up

src/app/main.tsx

@@ -24,6 +24,9 @@ import { useIO } from "@/services/io/useIO"
 import { ChatView } from "@/components/assistant/ChatView"
 import { ScriptEditor } from "@/components/editor/ScriptEditor"
 import { useSearchParams } from "next/navigation"
+import EditorMenu from "@/components/toolbars/editor-menu/EditorSideMenu"
+import EditorSideMenu from "@/components/toolbars/editor-menu/EditorSideMenu"
+import { Editor } from "@/components/editor/Editor"
 
 type DroppableThing = { files: File[] }
 
@@ -95,7 +98,7 @@ function MainContent() {
                       minSize={showTimeline ? 100 : 1}
                       maxSize={showTimeline ? 1600 : 1}
                       >
-                      <ScriptEditor />
+                      <Editor />
                     </ReflexElement>
                     <ReflexSplitter />
                     <ReflexElement

src/components/editor/Editor.tsx

@@ -0,0 +1,28 @@
+import { EditorView } from "@aitube/clapper-services"
+
+import { useEditor } from "@/services"
+
+import EditorSideMenu from "../toolbars/editor-menu/EditorSideMenu"
+
+import { ScriptEditor } from "./ScriptEditor"
+
+export function Editor() {
+const view = useEditor(s => s.view)
+
+return <ScriptEditor />
+/*
+this doesn't work yet:
+return (
+  <div className="flex flex-row flex-grow w-full overflow-hidden">
+    <EditorSideMenu />
+    <div className="flex flex-row flex-grow w-full overflow-hidden">
+      {view === EditorView.SCRIPT 
+        ? <ScriptEditor />
+        : view === EditorView.PROJECT
+        ? <div>TODO</div>
+        : <div>TODO</div>}
+    </div>
+  </div>
+  )
+  */
+}

src/components/toolbars/editor-menu/EditorSideMenu.tsx

@@ -7,12 +7,18 @@ import { LuClapperboard } from "react-icons/lu"
 import { useEditor } from "@/services/editor/useEditor"
 import { EditorSideMenuItem } from "./EditorSideMenuItem"
 import { EditorView } from "@aitube/clapper-services"
+import { useTheme } from "@/services/ui/useTheme"
 
-export default function EditorMenu() {
+export default function EditorSideMenu() {
+  const theme = useTheme()
   return (
 
-    <div className="flex flex-col w-14 h-full items-center justify-between border-r border-gray-800">
-      <div className="flex flex-col w-full items-center">
+    <div className="flex flex-col w-14 h-full items-center justify-between border-r"
+    style={{
+      borderRightColor: theme.defaultTextColor || "#eeeeee"
+    }}
+    >
+      <div className="flex flex-col h-full w-full items-center">
 
         <EditorSideMenuItem view={EditorView.PROJECT}><LuClapperboard /></EditorSideMenuItem>
         <EditorSideMenuItem view={EditorView.SCRIPT} label="Script editor"><MdOutlineHistoryEdu /></EditorSideMenuItem>

src/components/toolbars/editor-menu/EditorSideMenuItem.tsx

@@ -5,6 +5,7 @@ import { cn } from "@/lib/utils"
 
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
 import { useEditor } from "@/services/editor/useEditor"
+import { useTheme } from "@/services/ui/useTheme"
 
 export function EditorSideMenuItem({
   children,
@@ -29,6 +30,7 @@ export function EditorSideMenuItem({
    */
   unmanaged?: boolean
 }) {
+  const theme = useTheme()
   const view = useEditor(s => s.view)
   const setView = useEditor(s => s.setView)
 
@@ -59,10 +61,14 @@ export function EditorSideMenuItem({
           unmanaged || isActive ? '' :  `cursor-pointer`,
           `border-l-[3px]`,
           isActive
-          ? 'border-fuchsia-400 hover:border-fuchsia-400 text-gray-50 fill-gray-50 hover:text-gray-50 hover:fill-gray-50'
-          : 'border-gray-900 hover:border-gray-900  text-gray-400 fill-gray-400 hover:text-gray-200 hover:tefillxt-gray-200',
+          ? ' text-gray-50 fill-gray-50 hover:text-gray-50 hover:fill-gray-50'
+          : ' text-gray-400 fill-gray-400 hover:text-gray-200 hover:tefillxt-gray-200',
           `group`
         )}
+        style={{
+          background: theme.editorBgColor || "#eeeeee",
+          borderColor: isActive ? theme.defaultPrimaryColor || "#ffffff" : "#111827"
+        }}
         onClick={handleClick}>
           <div className={cn(
             `flex-col items-center justify-center`,

src/lib/core/constants.ts

@@ -4,7 +4,7 @@
 export const HARD_LIMIT_NB_MAX_ASSETS_TO_GENERATE_IN_PARALLEL = 32
 
 export const APP_NAME = "Clapper.app"
-export const APP_REVISION = "r20240626-1350"
+export const APP_REVISION = "r20240626-2017"
 
 export const APP_DOMAIN = "Clapper.app"
 export const APP_LINK = "https://clapper.app"