But those who disbelieve and reject Our revelations—these will have a…

… humiliating punishment.

The Holy Quran · Al-Hajj (The Pilgrimage) · 22:57

src-tauri/src/main.rs

@@ -5,7 +5,7 @@ mod data;
 use std::fs::read_dir;
 use std::path::PathBuf;
 use fs::encryption::aes_decrypt;
-use tauri::Runtime;
+use tauri::{Manager, Runtime};
 use crate::data::json::{init_user_data, user_get, create_value, user_make, system_get, system_make};
 use dirs::data_dir;
 use base64::{decode_config, encode_config, URL_SAFE};
@@ -53,10 +53,12 @@ async fn first_init<R: Runtime>(app: tauri::AppHandle<R>, window: tauri::Window<
 
 #[tauri::command]
 async fn console(value: String) {println!("{}", value)}
+#[tauri::command]
+async fn close_app<R: Runtime>(window: tauri::Window<R>) -> tauri::Result<()> {window.close()}
 
 fn main() {
    tauri::Builder::default().invoke_handler(tauri::generate_handler![
     first_init, console, user_get, authenticate_user, save_user, user_exists, load_user, ls, pwd, cd, create_user,
-    create_value, mkdir, system_get, system_make, user_make,
+    create_value, mkdir, system_get, system_make, user_make, close_app,
 ]).run(tauri::generate_context!()).expect("failed to run the code");
    }

src/pages/main_page/internal_apps/App.css

@@ -24,8 +24,10 @@
 }
 
 .ApplicationDirectory {
-    position: absolute;
+    position:relative;
     display: block;
+    margin-bottom: 1px;
+    height: 10svh;
     border-top: 2px #0202022f;
     border-left: 2px #0202022f;
     border-top-right-radius: 20px;
@@ -87,7 +89,6 @@ border-radius: 20px;
     font-size: 1.5em;
     text-align: left;
     font-weight: lighter;
-
     color: rgb(189, 184, 184);
 
     font-style: italic;

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

@@ -1,14 +1,11 @@
 import App from '../App';
 import { invoke } from '@tauri-apps/api';
 import { useState, useEffect } from 'react';
-
-async function create_file(){
-    console.log(await invoke('system_get', {key: 'name'}));
-}
+import img from '../../assets/terminal.png';
 
 function file_system() : [JSX.Element, React.Dispatch<React.SetStateAction<string>>, JSX.Element]{
     const [location, set_location] = useState("Home");
-    const [files, set_files] = useState([]);
+    const [files, set_files] = useState<React.JSX.Element[]>([]);
     //@ts-expect-error
     invoke("ls", {}).then(result => set_files(result)).catch(console.log);
     //@ts-expect-error
@@ -20,27 +17,40 @@ function file_system() : [JSX.Element, React.Dispatch<React.SetStateAction<strin
         document.addEventListener("click", () => set_ctx_display('none'));
         return () => document.removeEventListener("click", () => set_ctx_display('none'));
     }, [])
-
     const right_click = (ev: React.MouseEvent) => {
         ev.preventDefault();
-        console.log("right clicked");
         set_ctx_display('inherit');
         set_positions({dx: ev.clientX, dy: ev.clientY});
     }
+    const make_files = () => {
+        const NewFile = () =>{
+            const [editing, set_editing] = useState(true);
+            const [text, set_text] = useState('');
+            const done_editing = () => {set_editing(false);}
 
+            return <div className='file'>
+            <img src={img} className='file_img'/><br />
+            {editing ? <input className='editing' onChange={e => set_text(e.target.value)}
+            onBlur={done_editing} onKeyDownCapture={e => {if (e.key == 'Enter'){done_editing()}}} autoFocus></input>
+         : <p className='file_name'>{text}</p>}
+        </div>
+        }
+        set_files([...files, <NewFile/>]);
+    }
     let context_menu = <div className='ContextMenu'
     style={{
         top: dy + 2 + 'px',
         left: dx + 2 + 'px',
         display: `${ctx_display}`,
     }}
-    ><button onClick={create_file}>create dir</button></div>;
+    ><button onClick={make_files}>
+        create dir</button></div>;
     let Application = <div className='ApplicationDirectory'>
             <h1 className='filesystemtxt2'>/{location}/</h1>
-            <>{files}</>
         </div>
     let app_html = <div className='frametest2' onContextMenu={right_click}>
-    {Application}
+        {Application}
+        <>{files}</>
     </div>;
     const [display, set_display] = useState('none');
     let app = <App element={app_html} display={display} set_display={set_display} name='File System'/>;

src/pages/main_page/main_page.tsx

@@ -15,7 +15,6 @@ import daddy from './assets/daddyishome.png';
 import { invoke } from '@tauri-apps/api';
 
 
-
 export default function MainPage() {
     const navigate = useNavigate();
     const [app, fs_display, ctx_menu] = file_system();
@@ -43,7 +42,7 @@ export default function MainPage() {
                     <img src={leaveicon} alt="leaveicon" />
                 </button>
                 <p className='hiddentxt'>Logout​</p>
-                <button className='exit' onClick={() => window.close()}>
+                <button className='exit' onClick={async () => await invoke('close_app', {})}>
                     <img src={exit} alt="exiticon" />
                 </button>
                 <p className='hiddenclose'>Exit 😭​</p>