Changed UI to be a little bit better

package.json

@@ -13,20 +13,22 @@
     "@fortawesome/fontawesome-svg-core": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@headlessui/react": "^1.7.15",
+    "@heroicons/react": "^2.0.18",
     "@reduxjs/toolkit": "^1.9.5",
     "@tauri-apps/api": "^1.3.0",
     "@types/react-redux": "^7.1.25",
     "autoprefixer": "^10.4.14",
+    "lodash": "^4.17.21",
     "postcss": "^8.4.24",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.1.1",
-    "tailwindcss": "^3.3.2",
-    "lodash": "^4.17.21"
+    "tailwindcss": "^3.3.2"
   },
   "devDependencies": {
-    "@types/lodash": "^4.14.195",
     "@tauri-apps/cli": "^1.3.1",
+    "@types/lodash": "^4.14.195",
     "@types/node": "^18.7.10",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",

src/App.tsx

@@ -1,21 +1,21 @@
-import {useEffect, useState} from "react";
-import {invoke} from "@tauri-apps/api/tauri";
-import {DirectoryContent, Volume} from "./types";
-import {openDirectory} from "./ipc";
+import { useEffect, useState } from "react";
+import { invoke } from "@tauri-apps/api/tauri";
+import { DirectoryContent, Volume } from "./types";
+import { openDirectory } from "./ipc";
 import VolumeList from "./components/MainBody/Volumes/VolumeList";
 import FolderNavigation from "./components/TopBar/FolderNavigation";
-import {DirectoryContents} from "./components/MainBody/DirectoryContents";
+import { DirectoryContents } from "./components/MainBody/DirectoryContents";
 import useNavigation from "./hooks/useNavigation";
 import SearchBar from "./components/TopBar/SearchBar";
-import {useAppDispatch, useAppSelector} from "./state/hooks";
+import { useAppDispatch, useAppSelector } from "./state/hooks";
 import useContextMenu from "./hooks/useContextMenu";
 import ContextMenus from "./components/ContextMenus/ContextMenus";
 import {
   selectDirectoryContents,
   unselectDirectoryContents,
-  updateDirectoryContents
+  updateDirectoryContents,
 } from "./state/slices/currentDirectorySlice";
-import {DIRECTORY_ENTITY_ID} from "./components/MainBody/DirectoryEntity";
+import { DIRECTORY_ENTITY_ID } from "./components/MainBody/DirectoryEntity";
 
 function App() {
   const [volumes, setVolumes] = useState<Volume[]>([]);
@@ -79,7 +79,7 @@ function App() {
     }
 
     render += 1; // I don't know why but the use effect runs twice causing the "get_volumes" to be called twice.
-  }, [])
+  }, []);
 
   useEffect(() => {
     if (pathHistory[historyPlace] == "") {
@@ -90,49 +90,51 @@ function App() {
     getNewDirectoryContents().catch(console.error);
   }, [historyPlace]);
 
-  const [handleMainContextMenu, handleCloseContextMenu] = useContextMenu(dispatch, pathHistory[historyPlace]);
+  const [handleMainContextMenu, handleCloseContextMenu] = useContextMenu(
+    dispatch,
+    pathHistory[historyPlace]
+  );
 
   return (
-    <div className="h-full" onClick={(e) => {
-      handleCloseContextMenu(e);
-
-      if (e.target instanceof HTMLElement) {
-        if (e.target.id === DIRECTORY_ENTITY_ID) return;
-      }
-
-      dispatch(unselectDirectoryContents());
-    }} onContextMenu={handleMainContextMenu}>
+    <div
+      className="h-full"
+      onClick={(e) => {
+        handleCloseContextMenu(e);
+
+        if (e.target instanceof HTMLElement) {
+          if (e.target.id === DIRECTORY_ENTITY_ID) return;
+        }
+
+        dispatch(unselectDirectoryContents());
+      }}
+      onContextMenu={handleMainContextMenu}
+    >
       <ContextMenus />
 
       <div className="p-4">
         <FolderNavigation
-            onBackArrowClick={onBackArrowClick}
-            canGoBackward={canGoBackward()}
-            onForwardArrowClick={onForwardArrowClick}
-            canGoForward={canGoForward()}
+          onBackArrowClick={onBackArrowClick}
+          canGoBackward={canGoBackward()}
+          onForwardArrowClick={onForwardArrowClick}
+          canGoForward={canGoForward()}
+          currentVolume={currentVolume}
+          currentDirectoryPath={pathHistory[historyPlace]}
+          setSearchResults={setSearchResults}
         />
-
         <div className="pb-5">
-          <SearchBar
-              currentVolume={currentVolume}
-              currentDirectoryPath={pathHistory[historyPlace]}
-              setSearchResults={setSearchResults}
-          />
-
-          <div className="w-7/12">
+          <div>
             {pathHistory[historyPlace] === "" && searchResults.length === 0 ? (
-                <VolumeList volumes={volumes} onClick={onVolumeClick} />
+              <VolumeList volumes={volumes} onClick={onVolumeClick} />
             ) : (
-                <DirectoryContents
-                    content={
-                      searchResults.length === 0 ? directoryContents : searchResults
-                    }
-                    onDirectoryClick={onDirectoryClick}
-                />
+              <DirectoryContents
+                content={
+                  searchResults.length === 0 ? directoryContents : searchResults
+                }
+                onDirectoryClick={onDirectoryClick}
+              />
             )}
           </div>
         </div>
-
       </div>
     </div>
   );

src/components/InputModal.tsx

@@ -18,7 +18,7 @@ export default function InputModal({ shown, setShown, title, onSubmit, submitNam
             <div className="absolute w-full h-full z-10" style={{
                 backgroundColor: "rgba(0,0,0, 0.4)"
             }}>
-                <div className="flex justify-around flex-col absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-darker rounded-lg w-60 h-32 z-20 border-gray-700 border-1">
+                <div className="flex justify-around flex-col absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-darker rounded-lg w-60 h-32 z-20 border-zinc-700 border-1">
                     <h3 className="text-center">{title}</h3>
                     <Input value={inputValue} setValue={setInputValue} size={InputSize.Tiny} className="block mr-auto ml-auto text-center w-48" />
 

src/components/MainBody/DirectoryEntity.tsx

@@ -41,7 +41,7 @@ export default function DirectoryEntity({ idx, name, path, type, onDoubleClick }
             <button
                 id={DIRECTORY_ENTITY_ID}
                 onContextMenu={handleContextMenu}
-                className={`directory-entity bg-background hover:bg-bright cursor-pointer w-full h-7 flex ${selectedContentIdx === idx ? "bg-bright" : "" }`}
+                className={`directory-entity bg-background hover:bg-bright rounded-xl px-2 items-center cursor-pointer m-[1px] w-full h-7 flex ${selectedContentIdx === idx ? "bg-bright" : "" }`}
                 onDoubleClick={(e) => {
                     onDoubleClick(e);
                     dispatch(unselectDirectoryContents());
@@ -50,7 +50,7 @@ export default function DirectoryEntity({ idx, name, path, type, onDoubleClick }
                 ref={buttonRef}
             >
                 <div className="mr-1 ml-1">
-                    <FontAwesomeIcon icon={type == "File" ? faFile : faFolder} size="lg" color={type == "File" ? "gray" : "#FFD54F"} />
+                    <FontAwesomeIcon icon={type == "File" ? faFile : faFolder} size="lg" color={type == "File" ? "zinc" : "#FFD54F"} />
                 </div>
                 {name}
             </button>

src/components/MainBody/Volumes/VolumeComponent.tsx

@@ -8,10 +8,13 @@ interface Props {
 
 export default function VolumeComponent({ volume, onClick }: Props) {
     return (
-        <button onClick={onClick} className="p-5 w-56 bg-darker radius rounded cursor-pointer">
+        <button onClick={onClick} className="p-4 bg-zinc-900 rounded-xl cursor-pointer justify-between flex flex-col">
             <h3>{volume.name} ({volume.mountpoint})</h3>
-            <progress max="100" value={(volume.used_gb / volume.total_gb) * 100} /> <br/>
-            {volume.available_gb} GB free of {volume.total_gb} GB
+
+            <div className="mt-2">
+            <progress max="100" className={`${((volume.used_gb / volume.total_gb) * 100) > 50 && ((volume.used_gb / volume.total_gb) * 100) < 90 ? "mid" : ""} ${((volume.used_gb / volume.total_gb) * 100) > 90 ? "full" : ""}`} value={(volume.used_gb / volume.total_gb) * 100} />
+            <p>{volume.available_gb} GB free of {volume.total_gb} GB</p>
+            </div>
         </button>
     )
 }

src/components/MainBody/Volumes/VolumeList.tsx

@@ -1,6 +1,7 @@
 import VolumeComponent from "./VolumeComponent";
 import {Volume} from "../../../types";
 import LoadingPlaceholder from "../Util/LoadingPlaceholder";
+import { Fragment } from "react";
 
 interface Props {
     volumes: Volume[];
@@ -9,14 +10,20 @@ interface Props {
 
 export default function VolumeList({ volumes, onClick }: Props) {
     return (
-        <div className="space-x-4">
-            {volumes.length == 0 ? <LoadingPlaceholder/> : volumes.map((volume, idx) => (
+        <Fragment>
+        <div className={`${volumes.length == 0 ? "opacity-0 translate-y-96" : "opacity-100 translate-y-0"} grid grid-cols-4 gap-4 transition-all duration-300 ease-out`}>
+            {volumes.length != 0 && volumes.map((volume, idx) => (
                 <VolumeComponent
                     onClick={() => onClick(volume.mountpoint)}
                     volume={volume}
                     key={idx}
                 />
             ))}
         </div>
+        <div className={`w-full h-full flex flex-col items-center justify-center ${volumes.length == 0 ? "opacity-100" : "opacity-0"} transition-all duration-300 ease-in-out`}>
+            <LoadingPlaceholder/>
+        </div>
+
+        </Fragment>
     )
 }

src/components/TopBar/FolderNavigation.tsx

@@ -1,27 +1,99 @@
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faArrowLeft, faArrowRight} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faArrowLeft, faArrowRight } from "@fortawesome/free-solid-svg-icons";
+import { AdjustmentsVerticalIcon } from "@heroicons/react/20/solid";
+import Input, { InputSize } from "../../ui/Input";
+import { Dispatch, Fragment, SetStateAction, useEffect, useState } from "react";
+import { DirectoryContent } from "../../types";
+import { invoke } from "lodash";
+import SearchFilter from "./SearchFilter";
 
 export interface Props {
-    onBackArrowClick: () => void;
-    canGoBackward: boolean;
-    onForwardArrowClick: () => void;
-    canGoForward: boolean;
+  onBackArrowClick: () => void;
+  canGoBackward: boolean;
+  onForwardArrowClick: () => void;
+  canGoForward: boolean;
+  currentVolume: string;
+  currentDirectoryPath: string;
+  setSearchResults: Dispatch<SetStateAction<DirectoryContent[]>>;
 }
 
-export default function FolderNavigation({ onBackArrowClick, canGoBackward, onForwardArrowClick, canGoForward }: Props) {
-    return <div className="mb-5 w-full">
-        <div className="space-x-4">
-            <button onClick={onBackArrowClick} disabled={!canGoBackward}>
-                <FontAwesomeIcon
-                    icon={faArrowLeft}
-                    size="xl"
-                    className={canGoBackward ? undefined : "text-gray-600"}
-                />
-            </button>
+export interface ISearchFilter {
+  extension: string;
+  acceptFiles: boolean;
+  acceptDirectories: boolean;
+}
+
+export default function FolderNavigation({
+  onBackArrowClick,
+  canGoBackward,
+  onForwardArrowClick,
+  canGoForward,
+  currentVolume,
+  currentDirectoryPath,
+  setSearchResults,
+}: Props) {
+  const [searchValue, setSearchValue] = useState("");
+  const [searchFilter, setSearchFilter] = useState<ISearchFilter>({
+    extension: "",
+    acceptFiles: true,
+    acceptDirectories: true,
+  });
+  const [currentPlace, setCurrentPlace] = useState<string | undefined>();
+  const [isFilterOpen, setIsFilterOpen] = useState(false);
+
+  useEffect(() => {
+    const split = currentDirectoryPath.split("\\");
+    setCurrentPlace(split[split.length - 2]);
+  }, [currentDirectoryPath]);
 
-            <button onClick={onForwardArrowClick} disabled={!canGoForward}>
-                <FontAwesomeIcon icon={faArrowRight} size="xl" className={canGoForward ? undefined : "text-gray-600"}/>
-            </button>
+  function onSearch() {
+    throw new Error("Function not implemented.");
+  }
+
+  return (
+    <Fragment>
+      <div className="mb-5 w-full flex flex-row justify-start items-center">
+        <div className="inline-flex mr-2">
+          <button onClick={onBackArrowClick} disabled={!canGoBackward}>
+            <FontAwesomeIcon
+              icon={faArrowLeft}
+              size="xl"
+              className={canGoBackward ? undefined : "text-zinc-600"}
+            />
+          </button>
+          <button
+            onClick={onForwardArrowClick}
+            disabled={!canGoForward}
+            className="ml-2"
+          >
+            <FontAwesomeIcon
+              icon={faArrowRight}
+              size="xl"
+              className={canGoForward ? undefined : "text-zinc-600"}
+            />
+          </button>
+        </div>
+        <input
+          type="text"
+          value={currentDirectoryPath || "SUCC"}
+          className="px-4 rounded-xl h-8 text-sm bg-zinc-600 text-zinc-400 w-full"
+        ></input>
+        <div className="inline-flex ml-2">
+          <Input
+            value={searchValue}
+            setValue={setSearchValue}
+            placeholder={`Search ${currentPlace || "PC"}`}
+            onSubmit={onSearch}
+            size={InputSize.Large}
+          />
+          <button onClick={() => {setIsFilterOpen(!isFilterOpen)}}>
+            <AdjustmentsVerticalIcon className="w-6 h-6 text-zinc-400 ml-2" />
+          </button>
         </div>
-    </div>;
+      </div>
+      <div className={`${isFilterOpen ? "h-auto opacity-100 mb-2" : "h-0 opacity-0 mb-0"} ml-[3.7rem] transition-all duration-300 ease-in-out`}>
+        <SearchFilter filters={searchFilter} setFilters={setSearchFilter} />
+      </div>
+    </Fragment>
+  );
 }