feat: directory support (beta) + fix: small bug fix on graph

Author: thomscoder

README.md

@@ -4,7 +4,7 @@ Quickly upload, create, open, read, modify and download files, on the fly.
 
 Harmony also keep tracks of your changes or "workspaces" through git branches and git commits, all in-memory in your browser.
 
-<img src="https://i.ibb.co/brDw78C/Schermata-2022-10-08-alle-14-56-53.png" width=80% />
+<img src="https://i.ibb.co/pRbfJwT/Schermata-2022-10-09-alle-14-51-59-min.png" width=80% />
 
 > Just me experimenting with WebAssembly.
 <br/>

client/public/helpers/wasm/main.wasm

@@ -20,6 +20,15 @@
   transition: all 0.3s ease;
 }
 
+.virtual-file-wrapper svg path {
+  stroke: #000;
+  stroke-width: 5;
+}
+
+.virtual-file-wrapper.dir svg path {
+  fill: #ffca8e;
+}
+
 .virtual-file-wrapper:hover {
   background-color: rgba(68, 214, 255, 0.3);
   border: 0.01em solid white;
@@ -84,14 +93,14 @@ input[type='file'] {
 }
 
 .files-area.dir-open {
-    position: relative;
-    background-color: #1e1e1e;
-    width: 70%;
-    height: 70vh;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+  position: relative;
+  background-color: rgba(30, 30, 30, 0.9);
+  width: 70%;
+  height: 70vh;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 
 .files-area.dir-open .dir-menu {
@@ -101,7 +110,7 @@ input[type='file'] {
   top: 0;
   width: 100%;
   text-align: center;
-    z-index: 1;
+  z-index: 1;
 }
 
 .files-area.dir-open .dir-menu svg {
@@ -111,12 +120,18 @@ input[type='file'] {
   cursor: pointer;
 }
 
+.file {
+  text-align: center;
+  background-color: #1e1e1e;
+  padding: 0.2em 0.5em;
+}
+
 @media screen and (max-width: 768px) {
   .file-selectors p + div form {
     text-align: center;
   }
   .files-area.dir-open {
     background-color: #1e1e1e;
     width: 100%;
-}
+  }
 }

client/src/App.css

@@ -30,13 +30,13 @@ function App() {
   const [prevOpenedFiles, setPrevOpenedFiles] = useState<Array<string>>([]);
   const [openDir, setOpenDir] = useState<string>('');
   const [oldVirtualFiles, setOldVirtualFiles] = useState<Array<never>>([]);
-  
+
   const goBackInDirectories = () => {
     if (oldVirtualFiles.length > 0) {
       setVirtualFiles([...oldVirtualFiles]);
-      return setOldVirtualFiles([])
+      return setOldVirtualFiles([]);
     }
-  }
+  };
 
   const clickOnFileHandler = (virtualFile: never, isDirectory: boolean = false) => {
     if (!isDirectory) {
@@ -73,10 +73,13 @@ function App() {
 
   useEffect(() => {
     window.addEventListener('keydown', keyboardShortcut);
+    if (localStorage.getItem('harmony-tutorial')) {
+      localStorage.removeItem('harmony-tutorial');
+    }
     // Show the tutorial
-    if (!localStorage.getItem('harmony-tutorial')) {
+    if (!localStorage.getItem('new-harmony-tutorial')) {
       setAction(HELP);
-      localStorage.setItem('harmony-tutorial', 'true');
+      localStorage.setItem('new-harmony-tutorial', 'true');
     }
 
     return () => {
@@ -91,10 +94,12 @@ function App() {
       <Files />
       <div className="App">
         <div className={`files-area ${oldVirtualFiles.length > 0 ? 'dir-open' : ''}`} style={filesAreaStyle}>
-          {oldVirtualFiles.length > 0 && <div className="dir-menu">
-            {openDir}
-            <BackArrowIcon onClick={goBackInDirectories}/>
-            </div>}
+          {oldVirtualFiles.length > 0 && (
+            <div className="dir-menu">
+              {openDir}
+              <BackArrowIcon onClick={goBackInDirectories} />
+            </div>
+          )}
           {virtualFiles.map((virtualFile, index) => {
             // Check if directory
             const isDirectory = isDirectoryWrapper(virtualFile);
@@ -109,10 +114,10 @@ function App() {
                   onDoubleClick={() => {
                     clickOnFileHandler(virtualFile, isDirectory);
                   }}
-                  className={`virtual-file-wrapper ${prevOpened}`}
+                  className={`virtual-file-wrapper ${prevOpened} ${isDirectory ? 'dir' : ''}`}
                 >
-                  {isDirectory ?  <FolderIcon size={60} /> : <DocumentIcon size={60} />}
-                  <div key={index} className="file">
+                  {isDirectory ? <FolderIcon size={60} /> : <DocumentIcon size={60} />}
+                  <div key={index} className={`file`}>
                     {virtualFileName}
                   </div>
                 </div>

client/src/App.tsx

@@ -48,9 +48,11 @@ const GitGraph = () => {
     });
 
     gitFootPrints.forEach((footPrint: gitFootPrintType, index: number) => {
+      const branchName: string = footPrint.branch;
+
       gitgraph.branch(footPrint.branch).commit({
         hash: footPrint.commit?.hash ?? '',
-        subject: footPrint.commit?.message ?? index === 0 ? '' : `Checkout to ${footPrint.branch}`,
+        subject: index === 0 ? branchName : footPrint.commit?.message ?? `Checkout to ${footPrint.branch}`,
         onClick: () => clickOnCommitHandler(footPrint.commit.hash),
         onMessageClick: () => clickOnCommitHandler(footPrint.commit.hash),
         style: {

client/src/components/Git/GitGraph.tsx

@@ -85,6 +85,16 @@ const Help = () => {
               <br />
               Harmony keeps track of the branches and commits you create allowing you to go back to a specific commit.
               <video width="100%" src="https://user-images.githubusercontent.com/78874117/194714002-f6ec20c5-c7cc-4144-85e1-0bdb65097b7d.mov" controls autoPlay></video>
+              <br />
+              Click on the commits with the Hash (not the Checkout commits) to visit that particular commit.
+              <br />
+              <br />
+              <br />
+              <strong>Harmony also has a basic support for Folders</strong> (does not support nested folders yet)
+              <video width="100%" src="https://user-images.githubusercontent.com/78874117/194757713-771d1df7-3272-497b-9973-2e253da13e20.mp4" controls autoPlay></video>
+              <br />
+              Create one by simply creating a new file with this format: <strong>"DIRECTORY_NAME/FILE_NAME"</strong>.
+              <br />
               {(action === HELP || open) && (
                 <Button
                   sx={{

client/src/components/Menu/Help.tsx

@@ -48,7 +48,7 @@ export const goToCommitWrapper = (hash: string) => goToCommit(hash);
 
 export const exploreDirectoryWrapper = (filename: string) => {
   // @ts-ignore
-  const filepath = `./${filename}/`+ exploreDirectory(filename);
+  const filepath = `./${filename}/` + exploreDirectory(filename);
   return filepath.split(' ');
 };
 

client/src/img/desktop.jpg

@@ -24,6 +24,8 @@ type StoreInterface interface {
 	Screenshot(store billy.Filesystem, wt *git.Worktree, msg string) string
 	GotoBranch(repo *git.Repository, branchName string) error
 	GoToCommit(repo *git.Repository, commitHash string) error
+	IsDirectory(store billy.Filesystem, dir string, filename string) bool
+	ExploreDirectory(store billy.Filesystem, dir string, filename string) []string
 }
 type NovaStore struct {
 	Watcher       map[string]string