Adding extra side panel

app/src/routes/editor/LayersPanel/LayersTab.tsx

@@ -81,7 +81,7 @@ const LayersTab = observer(() => {
  return (
  <div
  ref={ref}
- className="flex h-[calc(100vh-8.25rem)] text-xs text-active flex-grow min-w-fit"
+ className="flex h-[calc(93vh-5.25rem)] text-xs text-active flex-grow min-w-fit"
  onMouseOver={() => setTreeHovered(true)}
  onMouseLeave={() => handleMouseLeaveTree()}
  >

app/src/routes/editor/LayersPanel/index.tsx

@@ -2,17 +2,22 @@ import { useEditorEngine } from '@/components/Context';
 import { Separator } from '@/components/ui/separator';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { EditorMode } from '@/lib/models';
-import { PinLeftIcon, PinRightIcon } from '@radix-ui/react-icons';
+import { LayersIcon, PinLeftIcon } from '@radix-ui/react-icons';
 import clsx from 'clsx';
 import { observer } from 'mobx-react-lite';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import ComponentsTab from './ComponentsTab';
 import LayersTab from './LayersTab';
 import { capitalizeFirstLetter } from '/common/helpers';
 
 const COMPONENT_DISCOVERY_ENABLED = false;
 
-const LayersPanel = observer(() => {
+interface LayersPanelProps {
+ openPanels: ('layers' | 'theming')[];
+ setOpenPanels: React.Dispatch<React.SetStateAction<('layers' | 'theming')[]>>;
+}
+
+const LayersPanel = observer(({ openPanels, setOpenPanels }: LayersPanelProps) => {
  const editorEngine = useEditorEngine();
  enum TabValue {
  LAYERS = 'layers',
@@ -21,10 +26,21 @@ const LayersPanel = observer(() => {
  const selectedTab: string = TabValue.LAYERS;
  const [isOpen, setIsOpen] = useState(true);
 
+ useEffect(() => setIsOpen(openPanels.includes('layers')), [openPanels]);
+
+ const togglePanelOpen = () => {
+ if (isOpen) {
+ setOpenPanels(openPanels.filter((panel) => panel !== 'layers'));
+ } else {
+ setOpenPanels([...openPanels, 'layers']);
+ }
+ };
+
  function renderTabs() {
  return (
  <Tabs defaultValue={selectedTab}>
  <TabsList className="bg-transparent w-full gap-2 select-none justify-start pr-1 pl-3 pt-2">
+ <LayersIcon />
  <TabsTrigger
  className="bg-transparent py-2 px-1 text-xs hover:text-text-hover"
  value={TabValue.LAYERS}
@@ -40,13 +56,18 @@ const LayersPanel = observer(() => {
  <div className="flex-grow"></div>
  <button
  className="text-default rounded-lg p-2 bg-transparent hover:text-text-hover"
- onClick={() => setIsOpen(false)}
+ onClick={togglePanelOpen}
  >
  <PinLeftIcon />
  </button>
  </TabsList>
  <Separator className="mt-1" />
- <div className="h-[calc(100vh-7.75rem)] overflow-auto mx-2">
+ <div
+ className={clsx(
+ 'overflow-auto mx-2',
+ openPanels.length > 1 ? 'h-[calc(48vh-4.5rem)]' : 'h-[calc(93vh-7.5rem)]',
+ )}
+ >
  <TabsContent value={TabValue.LAYERS}>
  <LayersTab />
  </TabsContent>
@@ -64,22 +85,27 @@ const LayersPanel = observer(() => {
  return (
  <div
  className={clsx(
- 'left-0 top-20 transition-width duration-300 opacity-100 bg-black/80 rounded-tr-xl',
+ 'left-0 top-20 transition-width duration-300 opacity-100 bg-black/80 rounded-r-xl',
  editorEngine.mode === EditorMode.INTERACT ? 'hidden' : 'visible',
- isOpen ? 'w-full h-[calc(100vh-5rem)]' : 'w-12 h-12 rounded-r-xl cursor-pointer',
+ isOpen ? 'w-full' : 'w-12 h-12 rounded-r-xl cursor-pointer',
+ isOpen
+ ? openPanels.length > 1
+ ? 'h-[calc(52.5vh-5rem)]'
+ : 'h-[calc(93vh-5rem)]'
+ : '',
  )}
  >
  {!isOpen && (
  <div
  className="w-full h-full flex justify-center items-center text-white hover:text-text"
- onClick={() => setIsOpen(true)}
+ onClick={togglePanelOpen}
  >
- <PinRightIcon className="z-51" />
+ <LayersIcon className="z-51" />
  </div>
  )}
  <div
  className={clsx(
- 'border backdrop-blur shadow h-full relative transition-opacity duration-300 rounded-tr-xl',
+ 'border backdrop-blur shadow relative transition-opacity duration-300 rounded-r-xl',
  isOpen ? 'opacity-100 visible' : 'opacity-0 hidden',
  )}
  >

app/src/routes/editor/ThemingPanel/AssetsTab.tsx

@@ -0,0 +1,11 @@
+import { observer } from 'mobx-react-lite';
+
+const AssetsTab = observer(() => {
+ return (
+ <div className="w-full">
+ <div className="w-full pt-20 text-center opacity-70">ASSETS</div>
+ </div>
+ );
+});
+
+export default AssetsTab;

app/src/routes/editor/ThemingPanel/VariablesTab.tsx

@@ -0,0 +1,11 @@
+import { observer } from 'mobx-react-lite';
+
+const VariablesTab = observer(() => {
+ return (
+ <div className="w-full">
+ <div className="w-full pt-20 text-center opacity-70">VARIABLES</div>
+ </div>
+ );
+});
+
+export default VariablesTab;

app/src/routes/editor/ThemingPanel/index.tsx

@@ -0,0 +1,112 @@
+import { useEditorEngine } from '@/components/Context';
+import { Separator } from '@/components/ui/separator';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { EditorMode } from '@/lib/models';
+import { BlendingModeIcon, PinLeftIcon } from '@radix-ui/react-icons';
+import clsx from 'clsx';
+import { observer } from 'mobx-react-lite';
+import { useEffect, useState } from 'react';
+import AssetsTab from './AssetsTab';
+import VariablesTab from './VariablesTab';
+import { capitalizeFirstLetter } from '/common/helpers';
+
+interface ThemingPanelProps {
+ openPanels: ('layers' | 'theming')[];
+ setOpenPanels: React.Dispatch<React.SetStateAction<('layers' | 'theming')[]>>;
+}
+
+const ThemingPanel = observer(({ openPanels, setOpenPanels }: ThemingPanelProps) => {
+ const editorEngine = useEditorEngine();
+ enum TabValue {
+ ASSETS = 'assets',
+ VARIABLES = 'variables',
+ }
+ const selectedTab: string = TabValue.ASSETS;
+ const [isOpen, setIsOpen] = useState(false);
+
+ useEffect(() => setIsOpen(openPanels.includes('theming')), [openPanels]);
+
+ const togglePanelOpen = () => {
+ if (isOpen) {
+ setOpenPanels(openPanels.filter((panel) => panel !== 'theming'));
+ } else {
+ setOpenPanels([...openPanels, 'theming']);
+ }
+ };
+
+ function renderTabs() {
+ return (
+ <Tabs defaultValue={selectedTab}>
+ <TabsList className="bg-transparent w-full gap-2 select-none justify-start pr-1 pl-3 pt-2">
+ <BlendingModeIcon />
+ <TabsTrigger
+ className="bg-transparent py-2 px-1 text-xs hover:text-text-hover"
+ value={TabValue.ASSETS}
+ >
+ {capitalizeFirstLetter(TabValue.ASSETS)}
+ </TabsTrigger>
+ <TabsTrigger
+ className="bg-transparent py-2 px-1 text-xs hover:text-text-hover"
+ value={TabValue.VARIABLES}
+ >
+ {capitalizeFirstLetter(TabValue.VARIABLES)}
+ </TabsTrigger>
+ <div className="flex-grow"></div>
+ <button
+ className="text-default rounded-lg p-2 bg-transparent hover:text-text-hover"
+ onClick={togglePanelOpen}
+ >
+ <PinLeftIcon />
+ </button>
+ </TabsList>
+ <Separator className="mt-1" />
+ <div
+ className={clsx(
+ 'overflow-auto mx-2',
+ openPanels.length > 1 ? 'h-[calc(48vh-4.5rem)]' : 'h-[calc(93vh-7.5rem)]',
+ )}
+ >
+ <TabsContent value={TabValue.ASSETS}>
+ <AssetsTab />
+ </TabsContent>
+ <TabsContent value={TabValue.VARIABLES}>
+ <VariablesTab />
+ </TabsContent>
+ </div>
+ </Tabs>
+ );
+ }
+ return (
+ <div
+ className={clsx(
+ 'left-0 top-20 transition-width duration-300 opacity-100 bg-black/80 rounded-r-xl',
+ editorEngine.mode === EditorMode.INTERACT ? 'hidden' : 'visible',
+ isOpen ? 'w-full' : 'w-12 h-12 rounded-r-xl cursor-pointer',
+ isOpen
+ ? openPanels.length > 1
+ ? 'h-[calc(52.5vh-5rem)]'
+ : 'h-[calc(93vh-5rem)]'
+ : '',
+ )}
+ >
+ {!isOpen && (
+ <div
+ className="w-full h-full flex justify-center items-center text-white hover:text-text"
+ onClick={togglePanelOpen}
+ >
+ <BlendingModeIcon className="z-51" />
+ </div>
+ )}
+ <div
+ className={clsx(
+ 'border backdrop-blur shadow relative transition-opacity duration-300 rounded-r-xl',
+ isOpen ? 'opacity-100 visible' : 'opacity-0 hidden',
+ )}
+ >
+ {renderTabs()}
+ </div>
+ </div>
+ );
+});
+
+export default ThemingPanel;

app/src/routes/editor/index.tsx

@@ -1,12 +1,16 @@
+import { useState } from 'react';
 import Canvas from './Canvas';
 import EditPanel from './EditPanel';
 import LayersPanel from './LayersPanel';
 import ResizablePanel from './LayersPanel/ResizablePanel';
+import ThemingPanel from './ThemingPanel';
 import Toolbar from './Toolbar';
 import EditorTopBar from './TopBar';
 import WebviewArea from './WebviewArea';
 
 function ProjectEditor() {
+ const [openPanels, setOpenPanels] = useState<('layers' | 'theming')[]>(['layers']);
+
  return (
  <>
  <div className="relative flex flex-row h-[calc(100vh-2.5rem)] select-none">
@@ -15,7 +19,10 @@ function ProjectEditor() {
  </Canvas>
  <ResizablePanel>
  <div className="left-0 animate-layer-panel-in">
- <LayersPanel />
+ <LayersPanel openPanels={openPanels} setOpenPanels={setOpenPanels} />
+ </div>
+ <div className="left-0 mt-2 animate-layer-panel-in">
+ <ThemingPanel openPanels={openPanels} setOpenPanels={setOpenPanels} />
  </div>
  </ResizablePanel>
  <div className="fixed right-0 top-20 animate-edit-panel-in">