Start implementation of FileTreeView

gameyfin/src/main/frontend/components/general/input/FileTreeView.tsx

@@ -0,0 +1,69 @@
+import TreeView, {flattenTree} from "react-accessible-treeview";
+import {File, Folder, FolderOpen, IconContext} from "@phosphor-icons/react";
+
+const folder = {
+    name: "",
+    children: [
+        {
+            name: "src",
+            children: [{name: "index.js"}, {name: "styles.css"}],
+        },
+        {
+            name: "node_modules",
+            children: [
+                {
+                    name: "react-accessible-treeview",
+                    children: [{name: "index.js"}],
+                },
+                {name: "react", children: [{name: "index.js"}]},
+            ],
+        },
+        {
+            name: ".npmignore",
+        },
+        {
+            name: "package.json",
+        },
+        {
+            name: "webpack.config.js",
+        },
+    ],
+};
+
+const data = flattenTree(folder);
+
+export default function FileTreeView({}) {
+    return (
+        <div className="flex flex-col gap-4">
+            <TreeView
+                data={data}
+                aria-label="directory tree"
+                nodeRenderer={({
+                                   element,
+                                   isBranch,
+                                   isExpanded,
+                                   getNodeProps,
+                                   level,
+                               }) => (
+                    <IconContext.Provider value={{size: 32, weight: "regular"}}>
+                        <div {...getNodeProps()} className="flex flex-row items-center gap-2"
+                             style={{paddingLeft: 10 * (level - 1)}}>
+                            {isBranch ? <FolderIcon isOpen={isExpanded}/> : <FileIcon fileName={element.name}/>}
+                            {element.name}
+                        </div>
+                    </IconContext.Provider>
+                )}
+                className="w-full"
+            />
+            <pre>{JSON.stringify(data, null, 2)}</pre>
+        </div>
+    );
+}
+
+function FolderIcon({isOpen}: { isOpen: boolean }) {
+    return isOpen ? <FolderOpen/> : <Folder/>;
+}
+
+function FileIcon({fileName}: { fileName: string }) {
+    return <File/>;
+}

gameyfin/src/main/frontend/components/general/modals/LibraryCreationModal.tsx

@@ -4,6 +4,7 @@ import {Form, Formik} from "formik";
 import LibraryDto from "Frontend/generated/de/grimsi/gameyfin/libraries/LibraryDto";
 import {LibraryEndpoint} from "Frontend/generated/endpoints";
 import Input from "Frontend/components/general/input/Input";
+import FileTreeView from "Frontend/components/general/input/FileTreeView";
 
 interface LibraryCreationModalProps {
     libraries: LibraryDto[];
@@ -70,6 +71,8 @@ export default function LibraryCreationModal({
                                             required
                                         />
                                     </div>
+
+                                    <FileTreeView/>
                                 </ModalBody>
                                 <ModalFooter>
                                     <Button variant="light" onPress={onClose}>

gameyfin/src/main/frontend/views/TestView.tsx

@@ -4,6 +4,7 @@ import {LibraryEndpoint, SystemEndpoint} from "Frontend/generated/endpoints";
 import {useState} from "react";
 import GameDto from "Frontend/generated/de/grimsi/gameyfin/games/dto/GameDto";
 import {GameOverviewCard} from "Frontend/components/general/cards/GameOverviewCard";
+import FileTreeView from "Frontend/components/general/input/FileTreeView";
 
 export default function TestView() {
     const [gameTitle, setGameTitle] = useState("");
@@ -72,6 +73,8 @@ export default function TestView() {
                 </div>
                 {game && <GameOverviewCard game={game}></GameOverviewCard>}
                 {game && <>{JSON.stringify(game, null, 2)}</>}
+
+                <FileTreeView/>
             </div>
         </div>
     );