Added a really terrible looking file list to the editor

I cant make it look good rn cuz I am leaving for a sleep over soon

src-tauri/src/lib.rs

@@ -140,6 +140,20 @@ async fn create_project(
     let _ = app.emit("new_project_update_message", "");
 }
 
+#[tauri::command]
+fn read_dir(path: String) -> Vec<String> {
+    let mut files = Vec::new();
+    if let Ok(entries) = std::fs::read_dir(path) {
+        for entry in entries.flatten() {
+            if let Ok(file_name) = entry.file_name().into_string() {
+                files.push(file_name.clone());
+                println!("{}", file_name);
+            }
+        }
+    }
+    files
+}
+
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
     tauri::Builder::default()
@@ -151,7 +165,7 @@ pub fn run() {
                 .title("Warning")
                 .blocking_show();
         }))
-        .invoke_handler(tauri::generate_handler![create_project, create_window])
+        .invoke_handler(tauri::generate_handler![create_project, create_window, read_dir])
         .setup(|app| {
             let handle = app.handle();
             create_window(handle.clone(), 0, None);

src/app/editor/Editor_globals.css

@@ -16,6 +16,6 @@
 }
 
 .separator {
-  @apply ml-2;
+  @apply ml-2 mr-2;
   @apply h-full border-l border-[rgb(48,48,72)];
 }

src/app/editor/components/FileList.css

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

src/app/editor/components/FileList.tsx

@@ -0,0 +1,26 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { invoke } from '@tauri-apps/api/core'
+import './FileList.css'
+import FileTreeRow from './components/FileTreeRow'
+
+export default function FileList({ projectFolder }: { projectFolder: string }) {
+  const [files, setFiles] = useState<string[]>([])
+
+  useEffect(() => {
+    if (projectFolder) {
+      invoke<string[]>('read_dir', { path: projectFolder })
+        .then(setFiles)
+        .catch(err => console.error('Failed to read dir:', err))
+    }
+  }, [projectFolder])
+
+  return (
+    <div className="filelist">
+      {files.map((file, i) => (
+        <FileTreeRow key={i} name={file} />
+      ))}
+    </div>
+  )
+}

src/app/editor/components/components/FileTreeRow.css

@@ -0,0 +1,9 @@
+@import "tailwindcss";
+
+.file-tree-row {
+  @apply flex flex-row;
+}
+
+.file-tree-row h1 {
+  @apply text-3xl mt-2;
+}

src/app/editor/components/components/FileTreeRow.tsx

@@ -0,0 +1,16 @@
+'use client'
+
+import './FileTreeRow.css'
+
+import Image from "next/image";
+
+import php_icon from "./icons/php.svg";
+
+export default function FileTreeRow({ name }: { name: string }) {
+  return (
+    <div className="file-tree-row">
+      {name.endsWith(".php") && <Image src={php_icon} alt="PHP Icon" width={50} height={50} />}
+      <h1>{name}</h1>
+    </div>
+  )
+}

src/app/editor/components/components/icons/php.svg

@@ -0,0 +1,26 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  fill="currentColor"
+>
+  <ellipse
+    cx="12"
+    cy="12"
+    rx="8"
+    ry="5"
+    fill="transparent"
+    stroke="rgb(120, 124, 181)"
+    strokeWidth="0.5"
+  />
+
+  <text
+    x="12"
+    y="12.3"
+    font-size="5"
+    text-anchor="middle"
+    dominant-baseline="middle"
+    fill="#acb2ff"
+  >
+    PHP
+  </text>
+</svg>

src/app/editor/layout.tsx

@@ -2,9 +2,11 @@
 
 import './Editor_globals.css'
 
+import FileList from './components/FileList'
+
 import Image from "next/image";
-// import { useSearchParams } from 'next/navigation';
+import { useSearchParams } from 'next/navigation';
-// import { useState } from 'react'
+import { useState } from 'react'
 
 import file_list_icon from "./assets/file_list_icon.svg";
 
@@ -13,18 +15,23 @@ export default function Editor_Layout ({
 }: {
   children: React.ReactNode
 }) {
-  // const [projectType, setProjectType] = useState<string>(useSearchParams().get("folder") ?? "")
+  const [projectFolder, setProjectFolder] = useState<string>(useSearchParams().get("folder") ?? "")
+  const [sideBarPage, setSideBarPage] = useState<string>("file-list");
 
   return (
     <>
       <div className='sidebar'>
         <div className='sidebar-tabs'>
-          <button>
+          <button onClick={() => setSideBarPage("file-list")}>
             <Image src={file_list_icon} alt="File list icon" width={60} height={60} />
           </button>
         </div>
 
         <div className="separator"></div>
+
+        <div className='sidebar-content'>
+          {sideBarPage === "file-list" && <FileList projectFolder={projectFolder}/>}
+        </div>
       </div>
 
       <main>{children}</main>

src/app/projectmanager/projects/page.tsx

@@ -3,6 +3,7 @@
 import { WebviewWindow } from '@tauri-apps/api/webviewWindow'
 import './ProjecftManager_projects.css'
 import { invoke } from '@tauri-apps/api/core'
+import { desktopDir } from '@tauri-apps/api/path'
 
 export default function ProjectManager_Projects () {
   return (
@@ -41,7 +42,7 @@ export default function ProjectManager_Projects () {
               'projectmanager'
             )
             if (!projectManager) return
-            invoke('create_window', { windowType: 2, editorFolder: "~/Desktop/php-fly-debug-folder" })
+            invoke('create_window', { windowType: 2, editorFolder: await desktopDir() + "/php-fly-debug-folder" })
             const editor = await WebviewWindow.getByLabel('editor')
             if (!editor) return
             projectManager.close()