Switch to NextJS

src/app/Globals.css

@@ -1,7 +1,6 @@
 @import 'tailwindcss';
 
 body {
-  font-family: 'Ubuntu', sans-serif;
   @apply bg-[rgb(16,16,24)] text-white select-none;
 }
 

src/app/layout.tsx

@@ -0,0 +1,22 @@
+'use client'
+
+import React from 'react'
+import './Globals.css'
+import { Ubuntu } from 'next/font/google'
+
+const ubuntu = Ubuntu({
+  weight: ['400'],
+  subsets: ['latin']
+})
+
+const Layout = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <>
+      <html lang='en' className={ubuntu.className}>
+        <body>{children}</body>
+      </html>
+    </>
+  )
+}
+
+export default Layout

src/app/newproject/page.tsx

@@ -1,10 +1,12 @@
+'use client'
+
 import { useEffect, useState } from 'react'
-import OptionButtons from '../components/OptionButtons'
-import './Home.css'
+import OptionButtons from '@/components/OptionButtons'
+import './NewProject_page.css'
 import { documentDir } from '@tauri-apps/api/path'
 import { open } from '@tauri-apps/plugin-dialog'
 
-export default function Home () {
+export default function NewProject_page () {
   const [projectType, setProjectType] = useState<string>('empty')
   const [projectFolder, setProjectFolder] = useState<string>('')
   const [projectName, setProjectName] = useState<string>('')
@@ -49,6 +51,7 @@ export default function Home () {
         <OptionButtons
           buttons={[
             <button
+              key='emptybutton'
               onClick={() => setProjectType('empty')}
               className='projecttypebutton'
               disabled={projectType == 'empty'}
@@ -56,6 +59,7 @@ export default function Home () {
               Empty
             </button>,
             <button
+              key='websitebutton'
               onClick={() => setProjectType('website')}
               className='projecttypebutton'
               disabled={projectType == 'website'}
@@ -63,6 +67,7 @@ export default function Home () {
               Website
             </button>,
             <button
+              key='webserverbutton'
               onClick={() => setProjectType('webserver')}
               className='projecttypebutton'
               disabled={projectType == 'webserver'}

src/app/projectmanager/layout.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import './ProjectManager_layout.css'
+import { app } from '@tauri-apps/api'
+import Image from 'next/image'
+
+export default function 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>
+          <button
+            onClick={() =>
+              (window.location.pathname = '/projectmanager/projects')
+            }
+          >
+            Projects
+          </button>
+          <button
+            onClick={() =>
+              (window.location.pathname = '/projectmanager/settings')
+            }
+          >
+            Settings
+          </button>
+          {version != null && (
+            <p className='mt-auto mr-auto ml-2 mb-2 text-gray-400'>
+              PHP Fly v{version}
+            </p>
+          )}
+        </div>
+        <div className='relative z-0 flex-1'>
+          <main>{children}</main>
+        </div>
+      </div>
+    </>
+  )
+}

src/app/projectmanager/projects/page.tsx

@@ -1,5 +1,7 @@
+'use client'
+
 import { WebviewWindow } from '@tauri-apps/api/webviewWindow'
-import './Projects.css'
+import './ProjecftManager_projects.css'
 
 export default function Projects () {
   return (
@@ -15,7 +17,7 @@ export default function Projects () {
             if (!mainWindow) return
             const popup = new WebviewWindow('new_project_popup', {
               title: 'PHP Fly: New Project',
-              url: '/newproject.html',
+              url: '/newproject',
               width: 600,
               height: 500,
               resizable: false,

src/app/projectmanager/settings/page.tsx

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

src/components/OptionButtons.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { JSX } from 'react'
 import './OptionButtons.css'
 
@@ -8,11 +10,9 @@ type OptionButtonsProps = {
 
 export default function OptionButtons ({ buttons, name }: OptionButtonsProps) {
   return (
-    <>
-      <div className='container'>
-        <h2 style={{ display: name == null ? 'none' : 'block' }}>{name}</h2>
-        <div className='flex gap-2'>{buttons}</div>
-      </div>
-    </>
+    <div className='container'>
+      <h2 style={{ display: name == null ? 'none' : 'block' }}>{name}</h2>
+      <div className='flex gap-2'>{buttons}</div>
+    </div>
   )
 }

src/editor/main.tsx

@@ -1,16 +0,0 @@
-import ReactDOM from 'react-dom/client'
-import '@fontsource/ubuntu'
-import '../Globals.css'
-import Home from './routes/Home'
-
-export default function App () {
-  return (
-    <>
-      <Home />
-    </>
-  )
-}
-
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-  <App />
-)

src/editor/routes/Home.tsx

@@ -1,3 +0,0 @@
-export default function Home () {
-  return <></>
-}

src/newproject/main.tsx

@@ -1,16 +0,0 @@
-import ReactDOM from 'react-dom/client'
-import '@fontsource/ubuntu'
-import '../Globals.css'
-import Home from './routes/Home'
-
-export default function App () {
-  return (
-    <>
-      <Home />
-    </>
-  )
-}
-
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-  <App />
-)

src/projectmanager/componets/Sidebar.tsx

@@ -1,50 +0,0 @@
-import './Sidebar.css'
-import Icon from '../../Icon.png'
-import { app } from '@tauri-apps/api'
-import { useEffect, useState } from 'react'
-
-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'>
-        <img
-          src={Icon}
-          width={64}
-          height={64}
-          className='m-2 transition-transform duration-[1.5s]'
-          draggable={false}
-          style={{
-            rotate: `${rotation}deg`
-          }}
-          onClick={() => {
-            setRotation(rotation + 1800)
-          }}
-          onContextMenu={() => {
-            setRotation(rotation - 1800)
-          }}
-        ></img>
-        <button onClick={() => (window.location.hash = 'projects')}>
-          Projects
-        </button>
-        <button onClick={() => (window.location.hash = 'settings')}>
-          Settings
-        </button>
-        {version != null && (
-          <p className='mt-auto mr-auto ml-2 mb-2 text-gray-400'>
-            PHP Fly v{version}
-          </p>
-        )}
-      </div>
-    </>
-  )
-}

src/projectmanager/main.tsx

@@ -1,47 +0,0 @@
-import ReactDOM from 'react-dom/client'
-import '@fontsource/ubuntu'
-import '../Globals.css'
-import Sidebar from './componets/Sidebar'
-import { useEffect, useState } from 'react'
-import Projects from './routes/Projects'
-import Settings from './routes/Settings'
-
-export default function App () {
-  const [hash, setHash] = useState(window.location.hash || '#projects')
-
-  useEffect(() => {
-    const onHashChange = () => setHash(window.location.hash || '#projects')
-    window.addEventListener('hashchange', onHashChange)
-    return () => window.removeEventListener('hashchange', onHashChange)
-  }, [])
-
-  useEffect(() => {
-    const handler = (e: MouseEvent) => e.preventDefault()
-    document.addEventListener('contextmenu', handler)
-    return () => document.removeEventListener('contextmenu', handler)
-  }, [])
-
-  function renderContent () {
-    if (hash === '#projects') {
-      return <Projects />
-    } else if (hash === '#settings') {
-      return <Settings />
-    }
-    return null
-  }
-
-  return (
-    <>
-      <div className='flex'>
-        <Sidebar />
-        <div className='relative z-0 flex-1'>
-          <main>{renderContent()}</main>
-        </div>
-      </div>
-    </>
-  )
-}
-
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-  <App />
-)

src/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />