My name... Is Josuke Higashikata... And my memories from when I was b…

…orn... Are long gone from this world... And they'll never... Come back... But even so, there's something I'm certain of. I am your son. No matter where I go, or what era I live in, that's something certain that I can believe in. Mom...

src/pages/main_page/internal_apps/apps/file_system/file_system.tsx

@@ -26,13 +26,14 @@ async function upload_file(update_fs: () => Promise<void>, set_files: React.Disp
     }
 }
 
-function File(props: {name: string, type: FileType, update_fs: () => Promise<void>, is_selected: Dispatch<string>}){
+function File(props: {name: string, type: FileType, update_fs: () => Promise<void>, 
+    is_selected: Dispatch<string>, open_file: (file: string) => Promise<void>}){
     async function cd(){
         await invoke('cd', {new: props.name});
         await props.update_fs();
     }
     if (props.name.length > 10){
-        return <div className='file' onDoubleClick={cd} 
+        return <div className='file' onDoubleClick={() => props.open_file(props.name)}
         onContextMenu={() => props.is_selected(props.name)}>
         <img src={props.type == FileType.File ? alpha: folder} className='file_img'/><br />
         <p className='file_name'>{props.name.slice(0, 7) + '...'}</p>
@@ -57,7 +58,7 @@ async function make_file(name: string, password: string, file: string, type: Fil
     }
 }
 
-function file_system() : AppInterface{
+function file_system(open_file: (file: string) => Promise<void>) : AppInterface{
     const [location, set_location] = useState("Home");
     const [selected, set_selected] = useState('');
     const [files, set_files] = useState<React.JSX.Element[]>([]);
@@ -69,14 +70,16 @@ function file_system() : AppInterface{
         let files_divs = [];
         for (let i = 0;i < files.length;i++){
             let file_type = (files[i][1] == 'File') ? FileType.File : FileType.Directory;
-            files_divs.push(<File name={files[i][0]} key={i} type={file_type} update_fs={update} is_selected={set_selected}/>);
+            files_divs.push(<File name={files[i][0]} key={i} type={file_type} 
+                update_fs={update} is_selected={set_selected}open_file={open_file}/>);
         }
         set_files(files_divs);
         set_location(pwd);
     }
     useEffect(() => {
-        document.addEventListener("click", () => {set_ctx_display('none');set_selected('')});
-        return () => document.removeEventListener("click", () => set_ctx_display('none'));
+        let click = () => {set_ctx_display('none');set_selected('');};
+        document.addEventListener("click", click);
+        return () => document.removeEventListener("click", click);
     }, [])
     const right_click = (ev: React.MouseEvent) => {
         ev.preventDefault();

src/pages/main_page/internal_apps/apps/text_editor/text_editor.tsx

@@ -0,0 +1,20 @@
+import { AppInterface } from "../../App";
+import App from "../../App";
+
+export default function text_editor(file_selected: string | null) : AppInterface{
+    let update = async () => {
+
+    }
+    if (file_selected){
+
+    }
+    let context_menu = <div>
+
+    </div>
+    let html = <div>
+        <textarea>
+        </textarea>
+    </div>
+    let [screen, set_display, fullscreen] = App(html, 'text editor');
+    return {screen, set_display, fullscreen, context_menu, update};
+}

src/pages/main_page/main_page.tsx

@@ -13,6 +13,8 @@ import exit from './assets/exit.png';
 import { invoke } from '@tauri-apps/api';
 import Settings from './internal_apps/apps/settings/settings';
 import sudo from './internal_apps/apps/sudo/sudo';
+import text_editor from './internal_apps/apps/text_editor/text_editor';
+import text_icon from './assets/pencil-square-icon.svg';
 
 function BinIcon(props: {display: () => Promise<void>, name: string, img: string}){
     return   <div className='appsmenu'onClick={props.display}>
@@ -52,11 +54,17 @@ const Clock = () => {
 
 export default function MainPage() {
     const navigate = useNavigate();
-    const fs_props = file_system();
+    const [file_selected, set_file_selected] = useState<string | null>(null);
     const sudo_props = sudo('you have been logged out, please log in');
     useEffect(()=>{sudo_props.set_display('none')}, []);
+    const text_editor_props = text_editor(file_selected);
     const settings_props = Settings();
     const settings_app = desktop_app("settings", settings, settings_props);
+    const text_app = desktop_app("text editor", text_icon, text_editor_props);
+    let open_file = async (file: string) => {
+        set_file_selected(file);
+    }
+    const fs_props = file_system(open_file);
     const explorer_app = desktop_app("Files", folder, fs_props);
     const [menu, set_menu] = useState(false);
     useEffect(() => {
@@ -76,7 +84,7 @@ export default function MainPage() {
     return (
         <div id='background' onContextMenu={e => {e.preventDefault();}} onClick={() => {if (menu) {set_menu(false)}}}>
             {sudo_props.screen}
-            <Grid  apps={[explorer_app, settings_app]} gridSize={50} margin={120} />
+            <Grid  apps={[explorer_app, settings_app, text_app]} gridSize={50} margin={120} />
             <nav className='navbar' onContextMenu={e => e.preventDefault()}>
                 <img className='homeimg' onClick={() => set_menu(!menu)} src={menu_icon} alt="" />
                 <Clock></Clock>