improve theming

package.json

@@ -38,7 +38,7 @@
   "dependencies": {
     "@aitube/broadway": "0.1.2",
     "@aitube/clap": "0.1.2",
-    "@aitube/clapper-services": "0.1.2-1",
+    "@aitube/clapper-services": "0.1.2-2",
     "@aitube/engine": "0.1.2",
     "@aitube/timeline": "0.1.2-0",
     "@fal-ai/serverless-client": "^0.13.0",

src/app/main.tsx

@@ -70,8 +70,11 @@ function MainContent() {
       <TopBar />
       <div
         className={cn(
-          `flex h-[calc(100vh-68px)] w-screen flex-row overflow-hidden`
+          `flex h-[calc(100vh-64px)] w-screen flex-row overflow-hidden`
         )}
+        style={{
+          backgroundColor: theme.defaultBgColor || '#090909',
+        }}
       >
         <ReflexContainer orientation="vertical">
           <ReflexElement>
@@ -82,14 +85,16 @@ function MainContent() {
                 size={showTimeline ? 1200 : 400}
               >
                 <ReflexContainer orientation="vertical">
-                  <ReflexElement
-                    size={showExplorer ? undefined : 1}
-                    minSize={showExplorer ? 100 : 1}
-                    maxSize={showExplorer ? 2000 : 1}
-                  >
-                    <Editors />
-                  </ReflexElement>
-                  {showVideoPlayer && <ReflexSplitter />}
+                  {showExplorer && (
+                    <ReflexElement
+                      size={showExplorer ? undefined : 1}
+                      minSize={showExplorer ? 100 : 1}
+                      maxSize={showExplorer ? 2000 : 1}
+                    >
+                      <Editors />
+                    </ReflexElement>
+                  )}
+                  {showExplorer && showVideoPlayer && <ReflexSplitter />}
                   {showVideoPlayer && (
                     <ReflexElement
                       minSize={showVideoPlayer ? 200 : 1}
@@ -125,7 +130,7 @@ function MainContent() {
           showWelcomeScreen
             ? 'pointer-events-auto z-[101] flex'
             : 'pointer-events-none hidden',
-          `fixed top-[40px] h-[calc(100vh-40px)] w-screen flex-row overflow-hidden`,
+          `fixed top-9 h-[calc(100vh-36px)] w-screen flex-row overflow-hidden`,
           `items-center justify-center`,
           `bg-stone-950`
         )}
@@ -139,7 +144,7 @@ function MainContent() {
         >
           <div
             className={cn(
-              `pointer-events-none absolute left-[100px] top-[20px]`,
+              `pointer-events-none absolute left-[100px] top-[16px]`,
               `opacity-90`
             )}
           >
@@ -151,7 +156,7 @@ function MainContent() {
           </div>
           <div
             className={cn(
-              `pointer-events-none absolute left-[305px] top-[140px]`,
+              `pointer-events-none absolute left-[305px] top-[136px]`,
               `transition-all duration-200 ease-out`,
               isTopMenuOpen ? 'scale-100 opacity-90' : 'scale-90 opacity-0'
             )}

src/app/styles/react-reflex-custom.css

@@ -7,31 +7,35 @@ This extends the original react-reflex.css (from [email protected]),
 with some custom colors and sizes
 */
 
+body .reflex-splitter {
+  opacity: 0.2;
+}
+
 @layer components {
   body .reflex-container > .reflex-splitter {
-    @apply bg-stone-600 transition-all duration-200 ease-in-out;
+    @apply bg-neutral-400 transition-all duration-200 ease-in-out;
   }
 
   body .reflex-container > .reflex-splitter.active,
   body .reflex-container > .reflex-splitter:hover {
-    @apply bg-stone-400 transition-all duration-200 ease-in-out;
+    @apply bg-neutral-200 transition-all duration-200 ease-in-out;
   }
 
   body .horizontal > .reflex-splitter {
-    @apply h-[3px] border-b-stone-600 border-t-stone-600 bg-stone-600;
+    @apply h-[3px] border-b-neutral-400 border-t-neutral-400 bg-neutral-400;
   }
 
   body .reflex-container.horizontal > .reflex-splitter:hover,
   body .reflex-container.horizontal > .reflex-splitter.active {
-    @apply h-[3px] border-b-stone-400 border-t-stone-400 bg-stone-400;
+    @apply h-[3px] border-b-neutral-200 border-t-neutral-200 bg-neutral-200;
   }
 
   body .reflex-container.vertical > .reflex-splitter {
-    @apply w-[3px] border-l-stone-600 border-r-stone-600 bg-stone-600;
+    @apply w-[3px] border-l-neutral-400 border-r-neutral-400 bg-neutral-400;
   }
 
   body .reflex-container.vertical > .reflex-splitter:hover,
   body .reflex-container.vertical > .reflex-splitter.active {
-    @apply w-[3px] border-l-stone-400 border-r-stone-400 bg-stone-400;
+    @apply w-[3px] border-l-neutral-200 border-r-neutral-200 bg-neutral-200;
   }
 }

src/components/editors/WorkflowEditor/viewer/NodeView.tsx

@@ -2,25 +2,48 @@ import React, { memo } from 'react'
 import { Handle, Position } from '@xyflow/react'
 
 import { ReactWorkflowNode } from '../types'
+import { useTheme } from '@/services'
+import { cn } from '@/lib/utils'
 
 function NodeComponent({ data }: ReactWorkflowNode) {
+  const theme = useTheme()
   return (
-    <div className="rounded-md border-2 border-stone-400 bg-stone-50 px-4 py-2 shadow-md">
-      <div className="flex flex-col">
-        <div className="text-lg font-bold text-gray-950">
-          {data?.name || ''}
-        </div>
+    <div
+      className={cn(
+        `flex min-w-32 flex-col items-center justify-center border-2 px-4 py-2 shadow-md`
+      )}
+      style={{
+        backgroundColor: theme.workflow.node.bgColor || '#ffffff',
+        borderColor:
+          theme.workflow.node.borderColor ||
+          theme.defaultBorderColor ||
+          '#eeeeee',
+        borderRadius: theme.workflow.node.radius || '0px',
+        color:
+          theme.workflow.node.textPrimaryColor ||
+          theme.defaultTextColor ||
+          '#000000',
+      }}
+    >
+      <div className="flex w-full flex-col items-center justify-center text-center">
+        <div className="text-lg">{data?.name || ''}</div>
       </div>
 
       <Handle
         type="target"
         position={Position.Top}
-        className="w-16 !bg-indigo-500"
+        className="-mt-0.5 w-8 rounded-t-full opacity-90"
+        style={{
+          backgroundColor: theme.workflow.handle.inputColor || '#ccffcc',
+        }}
       />
       <Handle
         type="source"
         position={Position.Bottom}
-        className="w-16 !bg-indigo-500"
+        className="-mb-0.5 w-8 rounded-b-full opacity-90"
+        style={{
+          backgroundColor: theme.workflow.handle.outputColor || '#ffcccc',
+        }}
       />
     </div>
   )

src/components/editors/WorkflowEditor/viewer/WorkflowView.tsx

@@ -19,12 +19,14 @@ import { useWorkflowEditor } from '@/services/editors'
 
 import { glifs } from '../samples/glif'
 import { glifToReactWorkflow } from '../specialized/glif/glifToReactWorkflow'
+import { useTheme } from '@/services'
 
 const nodeTypes = {
   custom: NodeView,
 }
 
 export function WorkflowView() {
+  const theme = useTheme()
   const current = useWorkflowEditor((s) => s.current)
   const [nodes, setNodes, onNodesChange] = useNodesState<ReactWorkflowNode>([])
   const [edges, setEdges, onEdgesChange] = useEdgesState<ReactWorkflowEdge>([])
@@ -49,9 +51,16 @@ export function WorkflowView() {
       onConnect={onConnect}
       nodeTypes={nodeTypes as any}
       fitView
-      className="bg-teal-50"
+      className="bg-transparent"
+      // TODO: the "light" / "dark" string should be
+      // defined in the theme, eg. colorMode={theme.mode}
+      colorMode="dark"
+      style={{
+        backgroundColor:
+          theme.workflow.bgColor || theme.defaultBgColor || '#000000',
+      }}
     >
-      <MiniMap />
+      <MiniMap nodeStrokeWidth={3} pannable zoomable className="scale-75" />
       <Controls />
     </ReactFlow>
   )

src/components/toolbars/bottom-bar/index.tsx

@@ -31,7 +31,15 @@ export function BottomToolbar() {
           <span className="text-stone-300/70">{APP_REVISION}</span>
         </div>
 
-        {/* <Metrics /> */}
+        {/*
+        Note sure that's really useful since there is a garbage collector,
+        I got a situation where I had 1.2 Gb when loaded empty,
+        and it turned into 800 Mb after loading a big project,
+        thanks to the GC kicking in.
+
+        what would be more useful is to collect system metrics in the Desktop version.
+        <Metrics />
+        */}
       </div>
       <div className="flex flex-row space-x-6">
         <Tasks />

src/components/toolbars/bottom-bar/tasks/index.tsx

@@ -33,8 +33,11 @@ export function Tasks() {
   return (
     <div className={cn(``)}>
       <Popover>
-        <PopoverTrigger>
-          {nbRunningBackgroundTasks || 'no'} pending tasks
+        <PopoverTrigger className="group opacity-70 transition-all duration-100 ease-out hover:opacity-100">
+          <span className="mr-0.5 text-stone-300">
+            {nbRunningBackgroundTasks || 'no'}
+          </span>
+          <span className="text-stone-400">pending tasks</span>
         </PopoverTrigger>
         <PopoverContent>
           <div className={cn(`flex flex-col text-xs font-light`)}>

src/components/toolbars/editors-menu/EditorsSideMenu.tsx

@@ -3,23 +3,32 @@
 import { LiaCogSolid, LiaTheaterMasksSolid } from 'react-icons/lia'
 import {
   MdAccountCircle,
+  MdMovieEdit,
   MdLocalMovies,
   MdOutlineAccountTree,
   MdOutlineHistoryEdu,
+  MdOutlineNaturePeople,
 } from 'react-icons/md'
+import { FaPersonShelter } from 'react-icons/fa6'
 import { LuClapperboard } from 'react-icons/lu'
-import { PiTreeStructureBold } from 'react-icons/pi'
+import {
+  PiTreeViewLight,
+  PiTreeStructureLight,
+  PiBookOpenTextLight,
+} from 'react-icons/pi'
 import { IoFilmOutline } from 'react-icons/io5'
+import { CiViewTimeline } from 'react-icons/ci'
 import { EditorView } from '@aitube/clapper-services'
 
 import { useTheme } from '@/services/ui/useTheme'
 import { EditorsSideMenuItem } from './EditorsSideMenuItem'
+import { NatureIcon } from './NatureIcon'
 
 export function EditorsSideMenu() {
   const theme = useTheme()
   return (
     <div
-      className="flex h-full w-14 flex-col items-center justify-between border-r"
+      className="flex h-full w-[3.25rem] flex-col items-center justify-between border-r"
       style={{
         backgroundColor:
           theme.editorMenuBgColor || theme.defaultBgColor || '#eeeeee',
@@ -28,20 +37,20 @@ export function EditorsSideMenu() {
       }}
     >
       <div className="flex h-full w-full flex-col items-center">
-        <EditorsSideMenuItem view={EditorView.PROJECT}>
-          <MdLocalMovies />
+        <EditorsSideMenuItem view={EditorView.PROJECT} label="Project settings">
+          <MdMovieEdit />
         </EditorsSideMenuItem>
-        <EditorsSideMenuItem view={EditorView.SCRIPT} label="Script editor">
-          <MdOutlineHistoryEdu />
+        <EditorsSideMenuItem view={EditorView.SCRIPT} label="Story">
+          <PiBookOpenTextLight />
         </EditorsSideMenuItem>
-        <EditorsSideMenuItem view={EditorView.ENTITY} label="Entity editor">
-          <LiaTheaterMasksSolid />
+        <EditorsSideMenuItem view={EditorView.ENTITY} label="Entities">
+          <NatureIcon />
         </EditorsSideMenuItem>
         <EditorsSideMenuItem view={EditorView.SEGMENT} label="Segment editor">
-          <IoFilmOutline />
+          <CiViewTimeline />
         </EditorsSideMenuItem>
-        <EditorsSideMenuItem view={EditorView.WORKFLOW} label="Workflow editor">
-          <PiTreeStructureBold />
+        <EditorsSideMenuItem view={EditorView.WORKFLOW} label="Workflows">
+          <PiTreeStructureLight />
         </EditorsSideMenuItem>
       </div>
     </div>

src/components/toolbars/editors-menu/EditorsSideMenuItem.tsx

@@ -54,17 +54,17 @@ export function EditorsSideMenuItem({
 
   return (
     <Tooltip delayDuration={0}>
-      <TooltipTrigger asChild disabled={!tooltipLabel} className="h-14 w-full">
+      <TooltipTrigger asChild disabled={!tooltipLabel} className="h-12 w-full">
         <div
           className={cn(
-            `flex h-14 w-full flex-col`,
-            `transition-all duration-200 ease-out`,
+            `flex h-12 w-full flex-col`,
+            `transition-all duration-150 ease-out`,
             `items-center justify-center`,
             unmanaged || isActive ? '' : `cursor-pointer`,
             `border-l-[2px]`,
             isActive
-              ? 'fill-gray-50 text-gray-50 hover:fill-gray-50 hover:text-gray-50'
-              : 'fill-gray-400 text-gray-400 hover:fill-gray-200 hover:text-gray-200',
+              ? 'fill-stone-50/80 text-stone-50 opacity-100 hover:fill-stone-50 hover:text-stone-50'
+              : 'fill-stone-400/80 text-gray-400 opacity-80 hover:fill-stone-200 hover:text-stone-200 hover:opacity-100',
             `group`
           )}
           style={{
@@ -89,7 +89,7 @@ export function EditorsSideMenuItem({
         </div>
       </TooltipTrigger>
       <TooltipContent side="right">
-        <p className="">{tooltipLabel}</p>
+        <p className="text-xs">{tooltipLabel}</p>
       </TooltipContent>
     </Tooltip>
   )

src/components/toolbars/editors-menu/NatureIcon.tsx

@@ -0,0 +1,28 @@
+import { cn } from '@/lib/utils'
+
+export function NatureIcon({
+  className = '',
+}: {
+  className?: string
+} = {}) {
+  return (
+    <svg
+      id="nature-icon-svg"
+      xmlns="http://www.w3.org/2000/svg"
+      className={cn(`h-full w-full fill-current`, className)}
+      width="400"
+      height="400"
+      viewBox="0, 0, 400,400"
+    >
+      <g id="nature-icon-svg-g">
+        <path
+          id="nature-icon-svg-g-path-0"
+          d="M232.037 90.250 C 199.735 91.563,171.332 112.931,161.107 143.613 C 146.391 187.767,172.994 234.758,218.426 244.860 L 222.222 245.705 222.222 267.482 L 222.222 289.259 177.778 289.259 L 133.333 289.259 133.333 272.778 L 133.333 256.296 138.902 256.296 L 144.470 256.296 144.365 232.492 L 144.259 208.687 143.032 206.194 C 141.635 203.357,139.564 201.518,136.693 200.564 C 133.477 199.496,96.654 199.895,94.547 201.021 C 92.095 202.331,90.487 203.948,89.367 206.229 L 88.333 208.333 88.230 232.315 L 88.127 256.296 93.693 256.296 L 99.259 256.296 99.259 280.185 L 99.259 304.074 188.889 304.074 L 278.519 304.074 278.519 296.667 L 278.519 289.259 261.667 289.259 L 244.815 289.259 244.815 267.795 L 244.815 246.330 246.204 246.101 C 286.135 239.514,313.759 207.681,313.689 168.333 C 313.610 123.724,276.708 88.435,232.037 90.250 M243.829 103.518 C 297.210 110.516,319.864 175.463,282.345 213.937 C 248.411 248.733,189.607 235.521,173.752 189.538 C 158.036 143.962,196.084 97.260,243.829 103.518 M112.721 155.711 C 102.056 158.298,96.730 169.900,101.644 179.842 C 107.743 192.183,126.047 191.965,131.889 179.481 C 137.934 166.563,126.490 152.371,112.721 155.711 "
+          stroke="none"
+          // fill="#000000"
+          fillRule="evenodd"
+        ></path>
+      </g>
+    </svg>
+  )
+}

src/components/toolbars/top-bar/index.tsx

@@ -12,7 +12,7 @@ export function TopBar() {
     <div
       className={cn(
         `flex flex-row`,
-        `h-10 w-full`,
+        `h-9 w-full`,
         `items-center bg-stone-900`,
         `border-b`,
         `border-b-stone-700`

src/components/toolbars/top-menu/index.tsx

@@ -64,14 +64,13 @@ export function TopMenu() {
         {
           // clap?.meta?.title || "Untitled"
         }
-
-        {/*
         <ToggleView
-          className="row-start-1 col-span-1 row-span-4 border-r"
-          isVisible={}
-          setVisible={}
-        >Toggle Tree browser</ToggleView>
-        */}
+          className="col-span-1 row-span-4 row-start-1 border-r"
+          isVisible={showExplorer}
+          setVisible={setShowExplorer}
+        >
+          Toggle Explorer
+        </ToggleView>
         {/*
         <ToggleView
           className="col-span-4 row-span-1 row-start-4 border-t"