file loadig and file tree working

src-tauri/Cargo.lock

@@ -144,6 +144,7 @@ name = "apographe"
 version = "0.1.0"
 dependencies = [
  "comrak",
+ "html_tag",
  "serde",
  "serde_json",
  "shellexpand",
@@ -1582,6 +1583,12 @@ dependencies = [
  "syn 1.0.109",
 ]
 
+[[package]]
+name = "html_tag"
+version = "0.1.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "258c462501ea394856d3c6cf7ca16f384dfb928766617bf018af0068c6935dee"
+
 [[package]]
 name = "http"
 version = "1.1.0"

src-tauri/Cargo.toml

@@ -26,4 +26,5 @@ comrak = "0.29.0"
 tauri-plugin-fs = "2"
 tauri-plugin-log = "2"
 shellexpand = "3.1.0"
+html_tag = "0.1.3"
 

src-tauri/src/lib.rs

@@ -1,9 +1,16 @@
-use std::path::Path;
-
 use comrak::{format_html, nodes::NodeValue, parse_document, Arena, Options};
+use html_tag::HtmlTag;
 use shellexpand;
-use tauri::Manager;
+use std::{
+    collections::BTreeMap,
+    env,
+    ffi::{OsStr, OsString},
+    fs,
+    path::{absolute, Path},
+};
+use tauri::{ipc::IpcResponse, Manager};
 use tauri_plugin_fs::FsExt;
+
 // Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
 #[tauri::command]
 fn greet(name: &str) -> String {
@@ -11,7 +18,7 @@ fn greet(name: &str) -> String {
 }
 
 #[tauri::command]
-fn parse_markdown(document: &str, pathtemplate: &str) -> String {
+fn parse_markdown(document: &str, pathtemplate: &str, basepath: &str) -> String {
     let mut rendered_markdown: String = String::new();
     let path = "/foo/bar.txt";
     println!("{:?}", shellexpand::full(path));
@@ -25,9 +32,16 @@ fn parse_markdown(document: &str, pathtemplate: &str) -> String {
     let root = parse_document(&arena, document, &options);
 
     // Iterate over all the descendants of root.
+    env::set_current_dir(basepath);
     for node in root.descendants() {
         if let NodeValue::Image(ref mut image_node) = node.data.borrow_mut().value {
-            if let Ok(resolved_path) = shellexpand::full(&image_node.url) {
+            let image_path = Path::new(&image_node.url).to_path_buf();
+            let absolute_image_path = absolute(image_node.url.clone());
+            let absolute_image_path = 
+.unwrap_or(image_path)
+                .as_path()
+                .to_string_lossy()
+            if let Ok(resolved_path) = shellexpand::full(&absolute_image_path) {
                 image_node.url = pathtemplate.replace("FILEPATH", &resolved_path);
             }
         }
@@ -39,7 +53,100 @@ fn parse_markdown(document: &str, pathtemplate: &str) -> String {
     return rendered_markdown.to_owned();
     // String::from_str("lololo").unwrap()
 }
+// <div class="filetree-node" id="folder3">
+//     <button class="filetree-element">
+//         <img class="topbar_icon" src="images/dropdown.svg" />folder 3
+//     </button>
+// </div>
 
+fn add_dir_tree_node(path: &Path, filter: &Vec<String>) -> HtmlTag {
+    let mut html = HtmlTag::new("div")
+        .with_class("filetree-node")
+        .with_id(&format!(
+            "{}",
+            Path::new(path)
+                .file_name()
+                .unwrap_or_default()
+                .to_string_lossy()
+        ))
+        .with_attribute("expanded", "false")
+        .with_child(
+            HtmlTag::new("button")
+                .with_class("filetree-directory-button")
+                .with_child(
+                    HtmlTag::new("img")
+                        .with_class("filetree-icon")
+                        .with_attribute("src", "images/directory.svg"),
+                )
+                .with_child(
+                    HtmlTag::new("a").with_body(
+                        &Path::new(path)
+                            .file_name()
+                            .unwrap_or_default()
+                            .to_string_lossy(),
+                    ),
+                ),
+        );
+    if let Ok(entries) = fs::read_dir(path) {
+        for dir_entry_res in entries {
+            println!("{:?}", dir_entry_res);
+            if let Ok(dir_entry) = dir_entry_res {
+                if let Ok(metadata) = fs::metadata(dir_entry.path()) {
+                    if metadata.is_file() {
+                        let mut file_div = HtmlTag::new("div")
+                            .with_class("filetree-node")
+                            .with_id(&format!("{}", dir_entry.path().to_string_lossy()))
+                            .with_attribute("style", "visibility: hidden; height: 0px;");
+                        let mut file_button =
+                            HtmlTag::new("button").with_class("filetree-file-button");
+                        match dir_entry
+                            .path()
+                            .extension()
+                            .unwrap_or_default()
+                            .to_string_lossy()
+                            .to_string()
+                            .as_str()
+                        {
+                            "md" => file_button.add_child(
+                                HtmlTag::new("img")
+                                    .with_class("filetree-icon")
+                                    .with_attribute("src", "images/markdown.svg"),
+                            ),
+
+                            _ => file_button.add_child(
+                                HtmlTag::new("img")
+                                    .with_class("filetree-icon")
+                                    .with_attribute("src", "images/file.svg"),
+                            ),
+                        };
+
+                        file_button.add_child(
+                            HtmlTag::new("a").with_body(&dir_entry.file_name().to_string_lossy()),
+                        );
+                        file_div.add_child(file_button);
+
+                        html.add_child(file_div)
+                    } else if metadata.is_dir() {
+                        html.add_child(
+                            add_dir_tree_node(&dir_entry.path(), &filter)
+                                .with_attribute("style", "visibility: hidden; height: 0px;"), // .with_style("visibility", "hidden")
+                                                                                              // .with_style("height", "0px"),
+                        );
+                    }
+                }
+            }
+        }
+    }
+    return html;
+}
+#[tauri::command]
+fn dir_tree_html(basepath: &str, filter: Vec<String>) -> String {
+    match shellexpand::full(basepath) {
+        Ok(path) => add_dir_tree_node(&Path::new(&path.into_owned()), &filter).to_html(),
+
+        Err(_) => String::new(),
+    }
+}
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
     tauri::Builder::default()
@@ -54,8 +161,7 @@ pub fn run() {
 
             Ok(())
         })
-        .invoke_handler(tauri::generate_handler![greet])
+        .invoke_handler(tauri::generate_handler![dir_tree_html, parse_markdown])
-        .invoke_handler(tauri::generate_handler![parse_markdown])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");
 }

src-tauri/tauri.conf.json

@@ -11,6 +11,7 @@
     "windows": [
       {
         "title": "apographe",
+        "decorations": false,
         "width": 800,
         "height": 600
       }

src/filesystem.js

@@ -0,0 +1,79 @@
+const { convertFileSrc, invoke } = window.__TAURI__.core;
+const { homeDir, join } = window.__TAURI__.path;
+const { readTextFile } = window.__TAURI__.fs;
+
+function handle_file_select(filename){
+    if (filename.endsWith("md")){
+        readTextFile(convertFileSrc(filename)  ).then(
+            (ret)=>{    
+                var tag_id = document.getElementById('markdown_input');
+                tag_id.innerHTML = "<pre>".concat("", ret).concat("", "</pre>");
+            }
+        );
+        var tag_id = document.getElementById('rendered_markdown');
+        tag_id.dispatchEvent(new Event("input"));
+    }
+}
+
+function dropdown(id) {
+    var dropdown_element = document.getElementById(id);
+    var dropdown_children = dropdown_element.children;
+    console.log(dropdown_element.getAttribute("expanded"));
+    if (dropdown_element.getAttribute("expanded") == "false") {
+        dropdown_element.setAttribute("expanded", "true");               
+    }
+    else{
+        dropdown_element.setAttribute("expanded", "false");
+    }
+    for (var i = 0; i < dropdown_children.length; i++) {
+        var child = dropdown_children[i];
+        console.log(child.id);
+        if (child.className === "filetree-node") {
+            if (document.getElementById(id).getAttribute("expanded") == "true") {
+                document.getElementById(child.id).style.visibility = "visible";
+                document.getElementById(child.id).style.height = "auto";
+            } else {
+                document.getElementById(child.id).style.visibility = "hidden";
+                document.getElementById(child.id).style.height = 0;
+            }
+        }
+    }
+
+}
+window.onload = function () {
+    invoke("dir_tree_html", { basepath: "~/Documents/Knowledgebase", filter: ["*"]}).then(
+        (ret)=>{    
+            var tag_id = document.getElementById('filetree');
+            tag_id.innerHTML = ret;
+        }
+    )
+}
+let filetree = document.getElementById('filetree');
+// Options for the observer (which mutations to observe)
+const config = { attributes: true, childList: true, subtree: true };
+
+// Callback function to execute when mutations are observed
+const callback = (mutationList, observer) => {
+    var anchors = document.getElementsByClassName("filetree-directory-button");
+    for (var i = 0; i < anchors.length; i++) {
+        var anchor = anchors[i];
+        anchor.onclick = function () {
+            dropdown(this.parentElement.id);
+        };
+    };
+    var anchors = document.getElementsByClassName("filetree-file-button");
+    for (var i = 0; i < anchors.length; i++) {
+        var anchor = anchors[i];
+        anchor.onclick = function () {
+            handle_file_select(this.parentElement.id);
+        };
+    };
+
+};
+
+// Create an observer instance linked to the callback function
+const observer = new MutationObserver(callback);
+
+// Start observing the target node for configured mutations
+observer.observe(filetree, config);
+

src/images/directory.svg

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="27.574734mm"
+   height="19.91688mm"
+   viewBox="0 0 27.574734 19.91688"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-16.675,-10.324561)">
+    <path
+       id="path6"
+       style="fill:#7b7b7b;fill-opacity:1;stroke:#1f4c1f;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+       d="m 17.175,14.891444 v -4.066883 h 6 l 3,4.066879 h 11.75393 v 14.85 H 17.175 Z" />
+  </g>
+  <g
+     id="layer2"
+     transform="translate(-16.675,-10.324561)">
+    <path
+       id="rect1"
+       style="fill:#8d8d8d;fill-opacity:1;stroke:#1f4c1f;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:25.5;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+       d="m 21.108646,21.060923 3.474687,-8.119695 6.804375,0.03094 0.608125,4.035941 h 11.75393 L 37.92893,29.74144 H 17.175 Z" />
+  </g>
+</svg>

src/images/dropdown.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="4.0000005mm"
+   height="3.4864769mm"
+   viewBox="0 0 4.0000005 3.4864769"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-5.4999998,-6.0000005)">
+    <path
+       style="fill:#898989;fill-opacity:1;stroke:#424242;stroke-width:0.15;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="path42"
+       d="M 7.6121703,4.8876915 5.8906701,1.905966 l 3.4430002,-1e-7 z"
+       transform="matrix(1.1132792,0,0,1.1132792,-0.9744707,3.961624)" />
+  </g>
+</svg>

src/images/file.svg

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="15.447813mm"
+   height="20.119375mm"
+   viewBox="0 0 15.447813 20.119375"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer2"
+     transform="translate(-49.61875,-9.9878121)">
+    <path
+       id="rect6"
+       style="fill:#6c6c6c;stroke:#1f4c1f;stroke-linejoin:round;stroke-miterlimit:25.5;stroke-opacity:1;paint-order:stroke fill markers"
+       d="m 62.834065,12.127499 1.7325,1.701562 V 29.607186 H 50.118752 V 10.487812 h 10.967345 z" />
+    <path
+       id="path7"
+       style="fill:#7b7b7b;fill-opacity:1;stroke:#1f4c1f;stroke-linejoin:round;stroke-miterlimit:25.5;stroke-opacity:1;paint-order:stroke fill markers"
+       d="m 61.070627,13.829062 c 0.358028,0.238093 3.495938,-1e-6 3.495938,-1e-6 V 29.607186 H 50.118752 V 10.487812 h 10.967345 z" />
+  </g>
+</svg>

src/images/markdown.svg

@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="15.447813mm"
+   height="20.119373mm"
+   viewBox="0 0 15.447813 20.119373"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1">
+    <rect
+       x="285.77481"
+       y="53.202755"
+       width="56.125984"
+       height="51.214962"
+       id="rect8" />
+  </defs>
+  <g
+     id="layer2"
+     transform="translate(-70.114011,-9.8599625)">
+    <path
+       id="rect6-4"
+       style="fill:#bababa;fill-opacity:1;stroke:#1f4c1f;stroke-linejoin:round;stroke-miterlimit:25.5;stroke-opacity:1;paint-order:stroke fill markers"
+       d="m 83.329329,11.999649 1.7325,1.701562 V 29.479336 H 70.614016 V 10.359962 h 10.967345 z" />
+    <path
+       id="path7-9"
+       style="fill:#bababa;fill-opacity:1;stroke:#1f4c1f;stroke-linejoin:round;stroke-miterlimit:25.5;stroke-opacity:1;paint-order:stroke fill markers"
+       d="m 81.565891,13.701212 c 0.358028,0.238093 3.495938,-10e-7 3.495938,-10e-7 V 29.479336 H 70.614016 V 10.359962 h 10.967345 z" />
+    <text
+       xml:space="preserve"
+       transform="matrix(0.18089399,0,0,0.18790056,22.65461,1.4354568)"
+       id="text7"
+       style="text-align:start;writing-mode:lr-tb;direction:ltr;white-space:pre;shape-inside:url(#rect8);fill:#1d4a1d;fill-opacity:1;stroke:#1d491d;stroke-width:3.77953;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:25.5;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"><tspan
+         x="285.77539"
+         y="89.598132"
+         id="tspan2"><tspan
+           style="font-size:40px;font-family:Sans;-inkscape-font-specification:'Sans, Normal'"
+           id="tspan1">M</tspan></tspan></text>
+    <rect
+       style="fill:#1d4a1d;fill-opacity:1;stroke:#1d491d;stroke-width:0.599626;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:3.3;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+       id="rect12"
+       width="1.0527325"
+       height="3.7217491"
+       x="77.175468"
+       y="21.155254" />
+    <path
+       style="fill:#1d4a1d;fill-opacity:1;stroke:#1d491d;stroke-width:0.900731;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:3.3;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+       id="path12"
+       d="m 102.61969,22.958655 -3.967938,-6.87267 7.935878,0 z"
+       transform="matrix(0.36867589,0,0,0.37368403,39.919915,18.066577)" />
+  </g>
+</svg>

src/images/menu_button.svg

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="4.7828827mm"
+   height="3.7828834mm"
+   viewBox="0 0 4.7828827 3.7828834"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-15.108558,-5.6085582)">
+    <rect
+       style="fill:#898989;fill-opacity:1;stroke:#424242;stroke-width:0.15;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       id="rect41"
+       width="4.6328835"
+       height="0.63288289"
+       x="15.183558"
+       y="5.6835585" />
+    <rect
+       style="fill:#898989;fill-opacity:1;stroke:#424242;stroke-width:0.15;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       id="rect41-7"
+       width="4.6328835"
+       height="0.63288289"
+       x="15.183558"
+       y="7.1835585" />
+    <rect
+       style="fill:#898989;fill-opacity:1;stroke:#424242;stroke-width:0.15;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       id="rect41-7-0"
+       width="4.6328835"
+       height="0.63288289"
+       x="15.183558"
+       y="8.6835585" />
+  </g>
+</svg>

src/images/path6.svg

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="27.574734mm"
+   height="19.91688mm"
+   viewBox="0 0 27.574734 19.91688"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-16.675,-10.324561)">
+    <path
+       id="path6"
+       style="fill:#7b7b7b;fill-opacity:1;stroke:#1f4c1f;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+       d="m 17.175,14.891444 v -4.066883 h 6 l 3,4.066879 h 11.75393 v 14.85 H 17.175 Z" />
+  </g>
+  <g
+     id="layer2"
+     transform="translate(-16.675,-10.324561)">
+    <path
+       id="rect1"
+       style="fill:#8d8d8d;fill-opacity:1;stroke:#1f4c1f;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:25.5;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+       d="m 21.108646,21.060923 3.474687,-8.119695 6.804375,0.03094 0.608125,4.035941 h 11.75393 L 37.92893,29.74144 H 17.175 Z" />
+  </g>
+</svg>

src/index.html

@@ -1,33 +1,68 @@
 <!doctype html>
 <html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <link rel="stylesheet" href="styles.css" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Tauri App</title>
-        <script type="module" src="./main.js" defer></script>
-        <script src="./main.js"></script>
-          <script src="//unpkg.com/force-graph"></script>
-    </head>
 
-    <body>
+<head>
-        <div class="main">
+  <meta charset="UTF-8" />
-            <div class="top-bar">
+  <link rel="stylesheet" href="styles.css" />
-                <button class="topbar_button" id="hide-sidebar"><img class="topbar_icon" src="images/graph_icon.svg" /></button>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-            </div>
+  <title>Tauri App</title>
-            <div class="container">
+  <!-- <script src="./main.js"></script> -->
-                <div id="sidebar">
+  <script type="module" src="./main.js" defer></script>
-                    <button class="sidebar_button"><img class="sidebar_icon" src="images/graph_icon.svg" /></button>
+  <!-- <script src="./ui.js"></script> -->
-                    <button class="sidebar_button"><img class="sidebar_icon" src="images/graph_icon.svg" /></button>
+  <script type="module" src="./ui.js" defer></script>
-                    <button class="sidebar_button"><img class="sidebar_icon" src="images/graph_icon.svg" /></button>
+  <!-- <script src="./filesystem.js"></script> -->
-                </div>
+  <script type="module" src="./filesystem.js" defer></script>
-                <div class="row" id="main_editor">
+  <script src="//unpkg.com/force-graph"></script>
-                    <div class="col" id="markdown_input" contenteditable></div>
+</head>
-                    <div class="col" id="rendered_markdown"></div>
 
-                </div>
+<body>
-                  <div id="graph"></div>
+  <div class="main">
-            </div>
+    <dialog>
-        </div>
+      <button autofocus>Close</button>
-    </body>
+      <p>This modal dialog has a groovy backdrop!</p>
-</html>
+    </dialog>
+
+    <div class="top-bar">
+      <button class="topbar_button" id="hide-sidebar">
+        <img class="topbar_icon" src="images/menu_button.svg" />
+      </button>
+    </div>
+    <div class="container">
+      <div id="sidebar">
+        <button class="sidebar_button"><img class="sidebar_icon" src="images/graph_icon.svg" /></button>
+        <button class="sidebar_button"><img class="sidebar_icon" src="images/graph_icon.svg" /></button>
+        <button class="sidebar_button"><img class="sidebar_icon" src="images/graph_icon.svg" /></button>
+      </div>
+
+      <div class="filetree" id="filetree">
+        <!-- <div class="filetree-node"> -->
+        <!-- <button class="filetree-element"> -->
+        <!-- <img class="topbar_icon" src="images/dropdown.svg" />folder 1 -->
+        <!-- </button> -->
+        <!-- <div class="filetree-node" id="folder2"> -->
+        <!-- <button class="filetree-element"> -->
+        <!-- <img class="topbar_icon" src="images/dropdown.svg" />folder 2 -->
+        <!-- </button> -->
+        <!-- <div class="filetree-node" id="folder3"> -->
+        <!-- <button class="filetree-element"> -->
+        <!-- <img class="topbar_icon" src="images/dropdown.svg" />folder 3 -->
+        <!-- </button> -->
+        <!-- </div> -->
+        <!-- <div class="filetree-node" id="folder4"> -->
+        <!-- <button class="filetree-element"> -->
+        <!-- <img class="topbar_icon" src="images/dropdown.svg" />folder 4 -->
+        <!-- </button> -->
+        <!-- </div> -->
+        <!-- </div> -->
+        <!-- </div> -->
+      </div>
+      <div class="row" id="main_editor">
+        <div class="col" id="markdown_input" contenteditable></div>
+        <div class="col" id="rendered_markdown"></div>
+      </div>
+      <div id="graph"></div>
+    </div>
+  </div>
+</body>
+
+</html>

src/main.js

@@ -1,5 +1,4 @@
 const { convertFileSrc, invoke } = window.__TAURI__.core;
-// const {  invoke } = window.__TAURI__.core;
 const { homeDir, join } = window.__TAURI__.path;
 const { readFile } = window.__TAURI__.fs;
 
@@ -9,16 +8,10 @@ const filePath = await join(appDataDirPath, 'Pictures/wallpaper.png');
 const assetUrl = convertFileSrc(filePath);
 
 let text = "";
-// window.addEventListener("DOMCharacterDataModified", () => {
-  // var tag_id = document.getElementById('rendered_markdown');
-  // tag_id.innerHTML = "<p>HI</p>"
-// window.addEventListener("DOMContentLoaded", () => {
-let textarea = document.getElementById('markdown_input');
-
-
 let placeholder_path = "FILEPATH";
 let path_template = convertFileSrc(placeholder_path);
 
+let textarea = document.getElementById('markdown_input');
 textarea.addEventListener('input', ()=> {
     text = textarea.innerText;
     var tag_id = document.getElementById('rendered_markdown');
@@ -32,31 +25,7 @@ textarea.addEventListener('input', ()=> {
 
 // });
 });
-document.getElementById("hide-sidebar").onclick = function() {toggle_visibility("sidebar");};
-function toggle_visibility(id) {
-    if (document.getElementById(id).style.visibility == "hidden"){
-        document.getElementById(id).style.visibility = "visible";
-        var style = window.getComputedStyle(document.body);
-        document.getElementById(id).style.width = style.getPropertyValue("--sidebar-width");
-    }else{
-        
-        document.getElementById(id).style.visibility = "hidden";
-        document.getElementById(id).style.width = 0;
-    }
-    
-}
-function handleShortcut(event) {
-    var markdown_editor = document.getElementById('markdown_input');
 
-    if (document.activeElement === markdown_editor){
-        if (event.ctrlKey) {
-            if (event.key === "l"){            
-                event.preventDefault();
-            }
-        }
-    }
-}
-document.addEventListener("keydown", handleShortcut);
  // Random tree
 // const N = 300;
 // const gData = {

src/styles.css

@@ -1,31 +1,35 @@
-
-
 .logo.vanilla:hover {
   filter: drop-shadow(0 0 2em #ffe21c);
 }
+
 :root {
-    --main-bg-color: #4f4f4f;
+  --main-bg-color: #2f2f2f;
-    --sidebar-width: 3em;
+  --sidebar-width: 3em;
-    font-family: Avenir, Helvetica, Arial, sans-serif;
+  --highlight-color: #5f5f5f;
-    font-size: 16px;
+  --text-color: #ffffff;
-    line-height: 24px;
 
-    color: #f6f6f6;
+  font-family: Avenir, Helvetica, Arial, sans-serif;
-    background-color: var(--main-bg-color);
+  font-size: 16px;
+  line-height: 24px;
+
+  color: #f6f6f6;
+  background-color: var(--main-bg-color);
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
 
-    font-synthesis: none;
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-text-size-adjust: 100%;
-  
 
 }
-*{
+
+* {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
 }
+
 .container {
   height: 100%;
   margin: 0;
@@ -38,35 +42,41 @@
 
 
 .col {
-    width: 50%;
+  width: 50%;
-    padding: 0.5em;
+  padding: 0.5em;
-    margin: .1em;
+  margin: .1em;
-    border: solid;
+  border: solid;
-    border-radius: .5em;
+  border-radius: .5em;
 }
-#markdown_input
-{
-    grid-column: 1;
-    grid-row: 1;
-    text-align: left;
-    /*float:left;*/
-    color: #f6f6f6;
-    background: var(--main-bg-color);
-}
-#rendered_markdown {
-    grid-column: 2;
-    grid-row: 1;
-    
 
-    /*float:right;*/
+#markdown_input {
-    text-align: left;
+  grid-column: 1;
-    color: #f6f6f6;
+  grid-row: 1;
-    background-color: var(--main-bg-color);
+  text-align: left;
-    img {
+  /*float:left;*/
-      width: 100%;
+  color: #f6f6f6;
-    }
+  background: var(--main-bg-color);
+  overflow: scroll;
 }
-.main_editor{
+
+#rendered_markdown {
+  grid-column: 2;
+  grid-row: 1;
+
+
+  /*float:right;*/
+  text-align: left;
+  color: #f6f6f6;
+  background-color: var(--main-bg-color);
+
+  img {
+    width: 100%;
+  }
+
+  overflow: scroll;
+}
+
+.main_editor {
   width: 100%;
   text-align: center;
   font-size: 16px;
@@ -78,10 +88,11 @@
   color: #f6f6f6;
   background-color: var(--main-bg-color);
 }
+
 h1 {
   text-align: left;
   line-height: 18px;
-    margin-top: 0.067em;
+  margin-top: 0.067em;
   margin-bottom: 0.067em;
   color: red;
 }
@@ -94,22 +105,26 @@ li {
 }
 
 .sidebar_button {
-    width: 100%;
+  width: 100%;
-    background-color: var(--main-bg-color);
+  background-color: var(--main-bg-color);
-    border: none;
+  border: none;
 }
 
 .sidebar_icon {
-    width: 100%;
+  width: 100%;
 }
+
 .topbar_button {
-    height: 2em;
+  height: 2em;
-    background-color: var(--main-bg-color);
+  background-color: transparent;
-    border: none;
+  border: none;
 }
+
 .topbar_icon {
-    height: 100%;
+  height: 100%;
+  background-color: transparent;
 }
+
 @media (prefers-color-scheme: dark) {
   :root {
     color: #f6f6f6;
@@ -117,22 +132,61 @@ li {
   }
 
 }
+
 #main_editor {
-    display: flex;
+  display: flex;
-    width: 100%;
+  width: 100%;
-    height: 100%;
+  height: 100%;
 }
 
 .main {
-    display: flex;
+  display: flex;
-    height:100vh;
+  height: 95vh;
-    flex-direction: column;
+  flex-direction: column;
 }
 
 #sidebar {
-    visibility: visible;
+  visibility: visible;
-    width: var(--sidebar-width);
+  width: var(--sidebar-width);
-    transition: all 0.1s ease-out;
+  transition: all 0.1s ease-out;
 }
 
 
+
+.filetree {
+  width: 10em;
+  overflow-x: scroll;
+  overflow-y: scroll;
+}
+
+.filetree-directory-button,
+.filetree-file-button {
+  background-color: transparent;
+  border: none;
+  width: 100%;
+  height: inherit;
+  text-align: left;
+  transition: all 0.01s ease-out;
+  white-space: nowrap;
+  overflow-y: visible;
+  color: var(--text-color);
+
+}
+
+.filetree-icon {
+  height: 1em;
+  background-color: transparent;
+  margin-right: 5px;
+}
+
+
+.filetree_expand {
+  background-color: transparent;
+  border: none;
+}
+
+.filetree-file-button:hover,
+.filetree-directory-button:hover {
+  background-color: var(--highlight-color);
+  /* Green */
+}

src/ui.js

@@ -0,0 +1,25 @@
+function toggle_visibility(id) {
+    if (document.getElementById(id).style.visibility == "hidden") {
+        document.getElementById(id).style.visibility = "visible";
+        var style = window.getComputedStyle(document.body);
+        document.getElementById(id).style.width = style.getPropertyValue("--sidebar-width");
+    } else {
+        document.getElementById(id).style.visibility = "hidden";
+        document.getElementById(id).style.width = 0;
+    }
+}
+function handleShortcut(event) {
+    var markdown_editor = document.getElementById("markdown_input");
+
+    if (document.activeElement === markdown_editor) {
+        if (event.ctrlKey) {
+            if (event.key === "l") {
+                event.preventDefault();
+            }
+        }
+    }
+}
+document.addEventListener("keydown", handleShortcut);
+document.getElementById("hide-sidebar").onclick = function () {
+    toggle_visibility("sidebar");
+};