Prepare for Puppet to work on Editor Window

src/app/Globals.css

@@ -1,4 +1,4 @@
-@import 'tailwindcss';
+@import "tailwindcss";
 
 body {
   @apply bg-[rgb(16,16,24)] text-white select-none;

src/app/editor/Editor_Globals.css

@@ -0,0 +1 @@
+@import "tailwindcss";

src/app/editor/page.tsx

@@ -0,0 +1,11 @@
+'use client'
+
+import './Editor_Globals.css'
+
+export default function Editor_page () {
+  return (
+    <>
+      <p>Editor page</p>
+    </>
+  )
+}

src/app/projectmanager/components/Sidebar.css

@@ -1,4 +1,4 @@
-@import 'tailwindcss';
+@import "tailwindcss";
 
 .sidebar {
   @apply w-50 h-screen bg-[rgb(24,24,36)] flex flex-col items-center justify-start border-r border-r-[rgb(48,48,72)] z-1;

src/app/projectmanager/components/Sidebar.tsx

@@ -0,0 +1,48 @@
+'use client'
+
+import Image from 'next/image'
+import './Sidebar.css'
+import { useEffect, useState } from 'react'
+import { app } from '@tauri-apps/api'
+import Link from 'next/link'
+
+export default function Sidebar () {
+  const [version, setVersion] = useState<string | null>(null)
+  const [rotation, setRotation] = useState<number>(0)
+
+  useEffect(() => {
+    ;(async () => {
+      const tempVersion = await app.getVersion()
+      setVersion(tempVersion)
+    })()
+  }, [])
+
+  return (
+    <div className='sidebar'>
+      <Image
+        src='/Icon.png'
+        width={64}
+        height={64}
+        alt='CodeFly Logo'
+        className='m-2 transition-transform duration-[1.5s]'
+        draggable={false}
+        style={{
+          rotate: `${rotation}deg`
+        }}
+        onClick={() => {
+          setRotation(rotation + 1800)
+        }}
+        onContextMenu={() => {
+          setRotation(rotation - 1800)
+        }}
+      ></Image>
+      <Link href='/projectmanager/projects'>Projects</Link>
+      <Link href='/projectmanager/settings'>Settings</Link>
+      {version != null && (
+        <p className='mt-auto mr-auto ml-2 mb-2 text-gray-400'>
+          PHP Fly v{version}
+        </p>
+      )}
+    </div>
+  )
+}

src/app/projectmanager/layout.tsx

@@ -1,55 +1,14 @@
-'use client'
-
-import { useEffect, useState } from 'react'
-import './ProjectManager_layout.css'
-import { app } from '@tauri-apps/api'
-import Image from 'next/image'
-import Link from 'next/link'
+import Sidebar from './components/Sidebar'
 
 export default function ProjectManageR_Layout ({
   children
 }: {
   children: React.ReactNode
 }) {
-  const [version, setVersion] = useState<string | null>(null)
-  const [rotation, setRotation] = useState<number>(0)
-
-  useEffect(() => {
-    ;(async () => {
-      const tempVersion = await app.getVersion()
-      setVersion(tempVersion)
-    })()
-  }, [])
-
   return (
     <>
       <div className='flex'>
-        <div className='sidebar'>
-          <Image
-            src='/Icon.png'
-            width={64}
-            height={64}
-            alt='CodeFly Logo'
-            className='m-2 transition-transform duration-[1.5s]'
-            draggable={false}
-            style={{
-              rotate: `${rotation}deg`
-            }}
-            onClick={() => {
-              setRotation(rotation + 1800)
-            }}
-            onContextMenu={() => {
-              setRotation(rotation - 1800)
-            }}
-          ></Image>
-          <Link href='/projectmanager/projects'>Projects</Link>
-          <Link href='/projectmanager/settings'>Settings</Link>
-          {version != null && (
-            <p className='mt-auto mr-auto ml-2 mb-2 text-gray-400'>
-              PHP Fly v{version}
-            </p>
-          )}
-        </div>
+        <Sidebar />
         <div className='relative z-0 flex-1'>
           <main>{children}</main>
         </div>

src/app/projectmanager/projects/ProjecftManager_projects.css

@@ -1,4 +1,4 @@
-@import 'tailwindcss';
+@import "tailwindcss";
 
 .topbar {
   @apply bg-[rgb(24,24,36)] m-2 p-2 border border-[rgb(48,48,72)] rounded-lg justify-center mx-auto w-fit flex gap-2;

src/app/projectmanager/projects/page.tsx

@@ -2,6 +2,7 @@
 
 import { WebviewWindow } from '@tauri-apps/api/webviewWindow'
 import './ProjecftManager_projects.css'
+import { invoke } from '@tauri-apps/api/core'
 
 export default function ProjectManager_Projects () {
   return (
@@ -13,24 +14,20 @@ export default function ProjectManager_Projects () {
               'newprojectpopup'
             )
             if (windowExists) return
-            const mainWindow = await WebviewWindow.getByLabel('projectmanager')
-            if (!mainWindow) return
-            const popup = new WebviewWindow('newprojectpopup', {
-              title: 'PHP Fly: New Project',
-              url: '/newproject',
-              width: 400,
-              height: 500,
-              resizable: false,
-              maximizable: false,
-              parent: mainWindow
-            })
-            await mainWindow.setClosable(false)
-            await mainWindow.setEnabled(false)
+            const projectManager = await WebviewWindow.getByLabel(
+              'projectmanager'
+            )
+            if (!projectManager) return
+            invoke('create_window', { windowType: 1 })
+            const popup = await WebviewWindow.getByLabel('newprojectpopup')
+            if (!popup) return
+            await projectManager.setClosable(false)
+            await projectManager.setEnabled(false)
             await popup.setFocus()
             popup.once('tauri://destroyed', async () => {
-              await mainWindow.setEnabled(true)
-              await mainWindow.setClosable(true)
-              await mainWindow.setFocus()
+              await projectManager.setEnabled(true)
+              await projectManager.setClosable(true)
+              await projectManager.setFocus()
             })
           }}
         >
@@ -38,6 +35,20 @@ export default function ProjectManager_Projects () {
         </button>
         <button>Open</button>
         <button>Clone Repository</button>
+        <button
+          onClick={async () => {
+            const projectManager = await WebviewWindow.getByLabel(
+              'projectmanager'
+            )
+            if (!projectManager) return
+            invoke('create_window', { windowType: 2 })
+            const editor = await WebviewWindow.getByLabel('editor')
+            if (!editor) return
+            projectManager.close()
+          }}
+        >
+          dbg: open editor
+        </button>
       </div>
       <div className='content'></div>
     </>

src/app/projectmanager/settings/page.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 export default function ProjectManager_Settings () {
   return (
     <>

src/components/OptionButtons.css

@@ -1,4 +1,4 @@
-@import 'tailwindcss';
+@import "tailwindcss";
 
 button {
   @apply bg-[rgb(54,54,72)] hover:bg-[rgb(72,72,96)];

src/components/OptionButtons.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import { JSX } from 'react'
 import './OptionButtons.css'