Mathis/lemma
1
0
Fork 0
mirror of https://github.com/lordmathis/lemma.git synced 2025-11-06 07:54:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use react arborist

Browse Source
This commit is contained in:
Matúš Námešný
2024-10-09 21:59:30 +02:00
parent 7d21b3066d
commit 859c460d84
4 changed files with 230 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
backend/internal/filesystem/filesystem.go
View File

@@ -7,6 +7,7 @@ import (
"novamd/internal/models"
"os"
"path/filepath"
"sort"
"strings"
)
@@ -17,9 +18,10 @@ type FileSystem struct {
}
type FileNode struct {
Type string `json:"type"`
Name string `json:"name"`
Files []FileNode `json:"files,omitempty"`
ID string `json:"id"`
Name string `json:"name"`
Path string `json:"path"`
Children []FileNode `json:"children,omitempty"`
}
func New(rootDir string, settings *models.Settings) *FileSystem {
@@ -73,40 +75,52 @@ func (fs *FileSystem) validatePath(path string) (string, error) {
}
func (fs *FileSystem) ListFilesRecursively() ([]FileNode, error) {
return fs.walkDirectory(fs.RootDir)
return fs.walkDirectory(fs.RootDir, "")
}
func (fs *FileSystem) walkDirectory(dir string) ([]FileNode, error) {
var nodes []FileNode
func (fs *FileSystem) walkDirectory(dir, prefix string) ([]FileNode, error) {
entries, err := os.ReadDir(dir)
if err != nil {
return nil, err
}
var folders []FileNode
var files []FileNode
for _, entry := range entries {
name := entry.Name()
path := filepath.Join(prefix, name)
fullPath := filepath.Join(dir, name)
if entry.IsDir() {
subdir := filepath.Join(dir, entry.Name())
subFiles, err := fs.walkDirectory(subdir)
children, err := fs.walkDirectory(fullPath, path)
if err != nil {
return nil, err
}
nodes = append(nodes, FileNode{
Type: "directory",
Name: entry.Name(),
Files: subFiles,
folders = append(folders, FileNode{
ID: path, // Using path as ID ensures uniqueness
Name: name,
Path: path,
Children: children,
})
} else {
nodes = append(nodes, FileNode{
Type: "file",
Name: entry.Name(),
files = append(files, FileNode{
ID: path, // Using path as ID ensures uniqueness
Name: name,
Path: path,
})
}
}
return nodes, nil
// Sort folders and files alphabetically
sort.Slice(folders, func(i, j int) bool { return folders[i].Name < folders[j].Name })
sort.Slice(files, func(i, j int) bool { return files[i].Name < files[i].Name })
// Combine folders and files, with folders first
return append(folders, files...), nil
}
func (fs *FileSystem) FindFileByName(filenameOrPath string) ([]string, error) {
var foundPaths []string
var searchPattern string

147
frontend/package-lock.json generated
View File

@@ -25,6 +25,7 @@
"codemirror": "^6.0.1",
"katex": "^0.16.11",
"react": "^18.3.1",
"react-arborist": "^3.4.0",
"react-dom": "^18.3.1",
"react-markdown": "^9.0.1",
"react-syntax-highlighter": "^15.5.0",
@@ -2549,6 +2550,24 @@
"node": ">= 8"
}
},
"node_modules/@react-dnd/asap": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-4.0.1.tgz",
"integrity": "sha512-kLy0PJDDwvwwTXxqTFNAAllPHD73AycE9ypWeln/IguoGBEbvFcPDbCV03G52bEcC5E+YgupBE0VzHGdC8SIXg==",
"license": "MIT"
},
"node_modules/@react-dnd/invariant": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@react-dnd/invariant/-/invariant-2.0.0.tgz",
"integrity": "sha512-xL4RCQBCBDJ+GRwKTFhGUW8GXa4yoDfJrPbLblc3U09ciS+9ZJXJ3Qrcs/x2IODOdIE5kQxvMmE2UKyqUictUw==",
"license": "MIT"
},
"node_modules/@react-dnd/shallowequal": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-2.0.0.tgz",
"integrity": "sha512-Pc/AFTdwZwEKJxFJvlxrSmGe/di+aAOBn60sremrpLo6VI/6cmiUYNNwlI5KNYttg7uypzA3ILPMPgxB2GYZEg==",
"license": "MIT"
},
"node_modules/@tabler/icons": {
"version": "3.19.0",
"resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.19.0.tgz",
@@ -2739,7 +2758,7 @@
"version": "22.7.0",
"resolved": "https://registry.npmjs.org/@types/node/-/node-22.7.0.tgz",
"integrity": "sha512-MOdOibwBs6KW1vfqz2uKMlxq5xAfAZ98SZjO8e3XnAbFnTJtAspqhWk7hrdSAs9/Y14ZWMiy7/MxMUzAOadYEw==",
"dev": true,
"devOptional": true,
"license": "MIT",
"dependencies": {
"undici-types": "~6.19.2"
@@ -4242,6 +4261,26 @@
"url": "https://github.com/sponsors/wooorm"
}
},
"node_modules/dnd-core": {
"version": "14.0.1",
"resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-14.0.1.tgz",
"integrity": "sha512-+PVS2VPTgKFPYWo3vAFEA8WPbTf7/xo43TifH9G8S1KqnrQu0o77A3unrF5yOugy4mIz7K5wAVFHUcha7wsz6A==",
"license": "MIT",
"dependencies": {
"@react-dnd/asap": "^4.0.0",
"@react-dnd/invariant": "^2.0.0",
"redux": "^4.1.1"
}
},
"node_modules/dnd-core/node_modules/redux": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
"integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.9.2"
}
},
"node_modules/dns-packet": {
"version": "5.6.1",
"resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-5.6.1.tgz",
@@ -4647,7 +4686,6 @@
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
"dev": true,
"license": "MIT"
},
"node_modules/fast-glob": {
@@ -5344,6 +5382,15 @@
"node": "*"
}
},
"node_modules/hoist-non-react-statics": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
"license": "BSD-3-Clause",
"dependencies": {
"react-is": "^16.7.0"
}
},
"node_modules/hpack.js": {
"version": "2.1.6",
"resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
@@ -6458,6 +6505,12 @@
"url": "https://github.com/sponsors/streamich"
}
},
"node_modules/memoize-one": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
"integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==",
"license": "MIT"
},
"node_modules/merge-descriptors": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
@@ -7883,6 +7936,62 @@
"node": ">=0.10.0"
}
},
"node_modules/react-arborist": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/react-arborist/-/react-arborist-3.4.0.tgz",
"integrity": "sha512-QI46oRGXJr0oaQfqqVobIiIoqPp5Y5gM69D2A2P7uHVif+X75XWnScR5drC7YDKgJ4CXVaDeFwnYKOWRRfncMg==",
"license": "MIT",
"dependencies": {
"react-dnd": "^14.0.3",
"react-dnd-html5-backend": "^14.0.3",
"react-window": "^1.8.10",
"redux": "^5.0.0",
"use-sync-external-store": "^1.2.0"
},
"peerDependencies": {
"react": ">= 16.14",
"react-dom": ">= 16.14"
}
},
"node_modules/react-dnd": {
"version": "14.0.5",
"resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-14.0.5.tgz",
"integrity": "sha512-9i1jSgbyVw0ELlEVt/NkCUkxy1hmhJOkePoCH713u75vzHGyXhPDm28oLfc2NMSBjZRM1Y+wRjHXJT3sPrTy+A==",
"license": "MIT",
"dependencies": {
"@react-dnd/invariant": "^2.0.0",
"@react-dnd/shallowequal": "^2.0.0",
"dnd-core": "14.0.1",
"fast-deep-equal": "^3.1.3",
"hoist-non-react-statics": "^3.3.2"
},
"peerDependencies": {
"@types/hoist-non-react-statics": ">= 3.3.1",
"@types/node": ">= 12",
"@types/react": ">= 16",
"react": ">= 16.14"
},
"peerDependenciesMeta": {
"@types/hoist-non-react-statics": {
"optional": true
},
"@types/node": {
"optional": true
},
"@types/react": {
"optional": true
}
}
},
"node_modules/react-dnd-html5-backend": {
"version": "14.1.0",
"resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-14.1.0.tgz",
"integrity": "sha512-6ONeqEC3XKVf4eVmMTe0oPds+c5B9Foyj8p/ZKLb7kL2qh9COYxiBHv3szd6gztqi/efkmriywLUVlPotqoJyw==",
"license": "MIT",
"dependencies": {
"dnd-core": "14.0.1"
}
},
"node_modules/react-dom": {
"version": "18.3.1",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
@@ -8057,6 +8166,23 @@
"react-dom": ">=16.6.0"
}
},
"node_modules/react-window": {
"version": "1.8.10",
"resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.10.tgz",
"integrity": "sha512-Y0Cx+dnU6NLa5/EvoHukUD0BklJ8qITCtVEPY1C/nL8wwoZ0b5aEw8Ff1dOVHw7fCzMt55XfJDd8S8W8LCaUCg==",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.0.0",
"memoize-one": ">=3.1.1 <6"
},
"engines": {
"node": ">8.0.0"
},
"peerDependencies": {
"react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/readable-stream": {
"version": "3.6.2",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
@@ -8098,6 +8224,12 @@
"node": ">= 10.13.0"
}
},
"node_modules/redux": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
"integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
"license": "MIT"
},
"node_modules/refractor": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/refractor/-/refractor-3.6.0.tgz",
@@ -9386,7 +9518,7 @@
"version": "6.19.8",
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
"integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
"dev": true,
"devOptional": true,
"license": "MIT"
},
"node_modules/unicode-canonical-property-names-ecmascript": {
@@ -9694,6 +9826,15 @@
}
}
},
"node_modules/use-sync-external-store": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz",
"integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==",
"license": "MIT",
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/util-deprecate": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",

1
frontend/package.json
View File

@@ -38,6 +38,7 @@
"codemirror": "^6.0.1",
"katex": "^0.16.11",
"react": "^18.3.1",
"react-arborist": "^3.4.0",
"react-dom": "^18.3.1",
"react-markdown": "^9.0.1",
"react-syntax-highlighter": "^15.5.0",

71
frontend/src/components/FileTree.js
View File

@@ -1,28 +1,65 @@
import React, { useMemo } from 'react';
import { Tree } from '@geist-ui/core';
import { File, Folder, Image } from '@geist-ui/icons';
import React from 'react';
import { Tree } from 'react-arborist';
import { Group, Text } from '@mantine/core';
import { IconFile, IconFolder, IconFolderOpen } from '@tabler/icons-react';
import { isImageFile } from '../utils/fileHelpers';
const FileTree = ({ files, handleFileSelect }) => {
if (files.length === 0) {
return <div>No files to display</div>;
const FileIcon = ({ isFolder, isOpen }) => {
if (isFolder) {
return isOpen ? (
<IconFolderOpen size={16} color="var(--mantine-color-yellow-filled)" />
) : (
<IconFolder size={16} color="var(--mantine-color-yellow-filled)" />
);
}
return <IconFile size={16} />;
};
const renderIcon = useMemo(
() =>
({ type, name }) => {
if (type === 'directory') return <Folder />;
return isImageFile(name) ? <Image /> : <File />;
},
[]
const Node = ({ node, style, dragHandle }) => {
const isFolder = Array.isArray(node.data.children);
return (
<Group
ref={dragHandle}
style={style}
pl={node.level * 20}
py={4}
onClick={() => node.toggle()}
sx={(theme) => ({
cursor: 'pointer',
'&:hover': {
backgroundColor:
theme.colorScheme === 'dark'
? theme.colors.dark[6]
: theme.colors.gray[0],
},
})}
>
<FileIcon isFolder={isFolder} isOpen={node.isOpen} />
<Text size="sm">{node.data.name}</Text>
</Group>
);
};
const FileTree = ({ files, handleFileSelect }) => {
const handleNodeClick = (node) => {
if (!node.isInternal) {
handleFileSelect(node.data.path);
}
};
return (
<Tree
value={files}
onClick={(filePath) => handleFileSelect(filePath)}
renderIcon={renderIcon}
/>
data={files}
openByDefault={false}
width="100%"
height={400} // Adjust this value as needed
indent={24}
rowHeight={28}
onActivate={handleNodeClick}
>
{Node}
</Tree>
);
};