Feature: rework file trees

package.json

@@ -42,6 +42,7 @@
         "@mdi/react": "^1.6.1",
         "@mdx-js/react": "^3.1.1",
         "@mermaid-js/layout-elk": "^0.2.1",
+        "@pierre/trees": "^1.0.0-beta.6",
         "@sentry/react": "^10.64.0",
         "@sentry/webpack-plugin": "^3.3.1",
         "ace-builds": "^1.44.0",

src/api/OfflineApi/index.ts

@@ -13,7 +13,7 @@ import _ from 'es-toolkit/compat';
 import { DB_NAME } from '@tdev-api/config';
 
 const TIME_NOW = new Date().toISOString();
-const LOG_REQUESTS = false;
+const LOG_REQUESTS = true;
 
 export const DEFAULT_OFFLINE_USER: User = {
     id: 'c23c0238-4aeb-457f-9a2c-3d2d5d8931c0',
@@ -406,7 +406,7 @@ export default class OfflineApi {
                     if (parts[0] === 'linkTo') {
                         document = {
                             ...document,
-                            documentRootId: parts[1],
+                            parentId: parts[1],
                             updatedAt: updatedAt
                         };
                     } else {

src/components/HomepageFeatures/index.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import React from 'react';
 import styles from './styles.module.scss';
 import { useStore } from '@tdev-hooks/useStore';
 import { observer } from 'mobx-react-lite';
@@ -10,76 +10,101 @@ import { useIsLive } from '@tdev-hooks/useIsLive';
 import Card from '@tdev-components/shared/Card';
 import customFields from '@tdev-components/utils/customFields';
 const { BACKEND_URL, NO_AUTH, OFFLINE_API } = customFields;
+import { useFirstMainDocument } from '@tdev-hooks/useFirstMainDocument';
+import { ModelMeta } from '@tdev-models/documents/FileSystem/Directory';
+import { MetaInit } from '@tdev-models/documents/FileSystem/iFileSystem';
+import DocumentFileTree from '@tdev-components/documents/FileSystem/DocumentFileTree';
 
 const HomepageFeatures = observer(() => {
     const socketStore = useStore('socketStore');
     const sessionStore = useStore('sessionStore');
     const userStore = useStore('userStore');
     const isLive = useIsLive();
+    const [meta] = React.useState(
+        new ModelMeta({ id: '2686fc4e-10e7-4288-bf41-e6175e489b8e', readonly: false } as MetaInit)
+    );
+    const root = useFirstMainDocument('2686fc4e-10e7-4288-bf41-e6175e489b8e', meta);
+
     return (
-        <section className={styles.features}>
-            {sessionStore.apiMode === 'api' ? (
-                <div className="container">
-                    <h2>Socket.IO</h2>
-                    <DefinitionList>
-                        <dt>URL</dt>
-                        <dd>{BACKEND_URL}</dd>
-                        <dt>Connected?</dt>
-                        <dd>
-                            {isLive ? (
-                                <span>
-                                    <Icon path={mdiCheckCircle} size={0.8} color="var(--ifm-color-success)" />{' '}
-                                    Live
-                                </span>
-                            ) : (
-                                <span>
-                                    <Icon path={mdiCloseCircle} size={0.8} color="var(--ifm-color-danger)" />{' '}
-                                    Offline
-                                </span>
-                            )}
-                        </dd>
-                        {isLive && (
-                            <>
-                                <dt>Clients</dt>
-                                <dd>
-                                    {socketStore.connectedClients.get(userStore.viewedUser?.id ?? '') ?? 0}
-                                </dd>
-                            </>
-                        )}
-                        <dt>Offline API</dt>
-                        <dd>{OFFLINE_API || '-'}</dd>
-                        <dt>No Auth</dt>
-                        <dd>{NO_AUTH ? 'Ja' : 'Nein'}</dd>
-                        <dt>Connection</dt>
-                        <dd>
-                            <Button
-                                icon={mdiConnection}
-                                text="Connect"
-                                onClick={() => {
-                                    socketStore.resetUserData();
-                                    socketStore.connect();
-                                }}
-                                disabled={isLive}
-                                color="blue"
-                            />
-                        </dd>
-                        <dd>
-                            <Button
-                                icon={mdiCloseCircle}
-                                text="Disconnect"
-                                onClick={() => socketStore.disconnect()}
-                                disabled={!isLive}
-                                color="red"
-                            />
-                        </dd>
-                    </DefinitionList>
-                </div>
-            ) : (
-                <Card classNames={{ card: 'container' }}>
-                    <h2>Willkommen 🥳</h2>
-                </Card>
+        <>
+            {root && (
+                <section className={styles.features}>
+                    <DocumentFileTree dir={root} />
+                </section>
             )}
-        </section>
+            <section className={styles.features}>
+                {sessionStore.apiMode === 'api' ? (
+                    <div className="container">
+                        <h2>Socket.IO</h2>
+                        <DefinitionList>
+                            <dt>URL</dt>
+                            <dd>{BACKEND_URL}</dd>
+                            <dt>Connected?</dt>
+                            <dd>
+                                {isLive ? (
+                                    <span>
+                                        <Icon
+                                            path={mdiCheckCircle}
+                                            size={0.8}
+                                            color="var(--ifm-color-success)"
+                                        />{' '}
+                                        Live
+                                    </span>
+                                ) : (
+                                    <span>
+                                        <Icon
+                                            path={mdiCloseCircle}
+                                            size={0.8}
+                                            color="var(--ifm-color-danger)"
+                                        />{' '}
+                                        Offline
+                                    </span>
+                                )}
+                            </dd>
+                            {isLive && (
+                                <>
+                                    <dt>Clients</dt>
+                                    <dd>
+                                        {socketStore.connectedClients.get(userStore.viewedUser?.id ?? '') ??
+                                            0}
+                                    </dd>
+                                </>
+                            )}
+                            <dt>Offline API</dt>
+                            <dd>{OFFLINE_API || '-'}</dd>
+                            <dt>No Auth</dt>
+                            <dd>{NO_AUTH ? 'Ja' : 'Nein'}</dd>
+                            <dt>Connection</dt>
+                            <dd>
+                                <Button
+                                    icon={mdiConnection}
+                                    text="Connect"
+                                    onClick={() => {
+                                        socketStore.resetUserData();
+                                        socketStore.connect();
+                                    }}
+                                    disabled={isLive}
+                                    color="blue"
+                                />
+                            </dd>
+                            <dd>
+                                <Button
+                                    icon={mdiCloseCircle}
+                                    text="Disconnect"
+                                    onClick={() => socketStore.disconnect()}
+                                    disabled={!isLive}
+                                    color="red"
+                                />
+                            </dd>
+                        </DefinitionList>
+                    </div>
+                ) : (
+                    <Card classNames={{ card: 'container' }}>
+                        <h2>Willkommen 🥳</h2>
+                    </Card>
+                )}
+            </section>
+        </>
     );
 });
 

src/components/documents/FileSystem/DocumentFileTree/index.tsx

@@ -0,0 +1,155 @@
+import React from 'react';
+import { useStore } from '@tdev-hooks/useStore';
+import { observer } from 'mobx-react-lite';
+import { FileTree, useFileTree } from '@pierre/trees/react';
+import Directory from '@tdev-models/documents/FileSystem/Directory';
+import { preparePresortedFileTreeInput } from '@pierre/trees';
+import { isFileSystemType } from '@tdev-models/documents/FileSystem/iFileSystem';
+import styles from './styles.module.scss';
+import clsx from 'clsx';
+import { default as FileModel } from '@tdev-models/documents/FileSystem/File';
+import File from '../File';
+import DocumentView from '../DocumentView';
+import { mdiExcalidraw } from '@tdev/excalidoc/Component';
+
+interface Props {
+    dir: Directory;
+}
+const DocumentFileTree = observer((props: Props) => {
+    const { dir } = props;
+    const dirId = dir.id;
+    const rootId = dir.documentRootId;
+    const documentStore = useStore('documentStore');
+    const docRootStore = useStore('documentRootStore');
+    const [selected, setSelected] = React.useState<FileModel | null>(null);
+    const { model } = useFileTree({
+        preparedInput: preparePresortedFileTreeInput(dir?.fileTree ?? []),
+        search: true,
+        id: dir.id,
+        initialVisibleRowCount: 11,
+        icons: {
+            set: 'complete',
+            colored: true,
+            spriteSheet: `
+                <svg aria-hidden="true" width="0" height="0">
+                    <symbol id="mdi-excalidraw" viewBox="0 0 24 24">
+                        <path d="${mdiExcalidraw}" style="fill: #6965db;" />
+                    </symbol>
+                </svg>
+                `,
+            byFileExtension: {
+                excalidraw: 'mdi-excalidraw'
+            }
+        },
+        renaming: {
+            canRename: (item) => item.path !== 'package.json',
+            onRename: ({ sourcePath, destinationPath }) => {
+                const dir = documentStore.find(dirId) as Directory;
+                const file = dir.allFiles.find((d) => d.filePath === sourcePath);
+                const hasConflict = dir.allFiles.some((d) => d.filePath === destinationPath);
+                if (!file) {
+                    console.error(`File not found for path: ${sourcePath}`);
+                    return;
+                }
+                if (hasConflict) {
+                    console.error(`Destination path already exists: ${destinationPath}`);
+                    return;
+                }
+                const newName = destinationPath.replace(file.basePath, '');
+                if (newName.includes('/')) {
+                    console.error(`New name cannot contain slashes: ${newName}`);
+                    return;
+                }
+                file.setName(newName);
+            },
+            onError: (message) => {
+                console.error(message);
+            }
+        },
+        dragAndDrop: {
+            canDrag: (draggedPaths) => true,
+            canDrop: ({ target }) => true,
+            onDropComplete: ({ draggedPaths, target }) => {
+                const targetDoc =
+                    target.kind === 'root'
+                        ? dir
+                        : dir.allFiles.find((d) => d.filePath === target.directoryPath);
+                const files = dir.allFiles.filter((d) => draggedPaths.includes(d.filePath));
+                if (targetDoc && files.length > 0) {
+                    files.forEach((f) => {
+                        documentStore.relinkParent(f, targetDoc);
+                    });
+                }
+            },
+            onDropError: (message) => {
+                console.error(message);
+            }
+        },
+        composition: {
+            contextMenu: {
+                enabled: true,
+                triggerMode: 'both',
+                buttonVisibility: 'when-needed'
+            }
+        },
+        flattenEmptyDirectories: false,
+        onSelectionChange: (selectedPaths) => {
+            const root = docRootStore.find<'dir'>(rootId);
+            if (!root) {
+                return;
+            }
+            const selected = root.documents
+                .filter((d) => isFileSystemType(d))
+                .filter((d) => selectedPaths.includes(d.filePath));
+            if (selected.length === 1) {
+                if (selected[0].type === 'file') {
+                    setSelected(selected[0]);
+                }
+                selected[0].setIsOpen(true);
+            }
+        }
+    });
+
+    /**
+     * useFileTree only builds the model once, from the initial props - it never
+     * reacts to prop changes. Paths often arrive asynchronously (e.g. after a
+     * page reload, before the document is fetched), so the tree must be
+     * re-synced whenever the paths change after mount.
+     */
+    React.useEffect(() => {
+        const openPaths = dir?.allFiles
+            .filter((d) => d.type === 'dir' && d.filePath && d.isOpen)
+            .map((d) => d.filePath);
+        console.log('open', openPaths);
+        model.resetPaths({
+            preparedInput: preparePresortedFileTreeInput(dir.fileTree ?? []),
+            initialExpandedPaths: openPaths
+        });
+    }, [model, dir.fileTree]);
+
+    return (
+        <div className={clsx(styles.container)}>
+            <FileTree
+                model={model}
+                className={clsx(styles.tree, 'rounded-lg border')}
+                style={{ height: '320px' }}
+                renderContextMenu={(item, context) => (
+                    <div className="rounded-md border bg-background p-2 shadow">
+                        <button
+                            onClick={() => {
+                                context.close({ restoreFocus: false });
+                                model.startRenaming(item.path);
+                            }}
+                            type="button"
+                        >
+                            Rename
+                        </button>
+                    </div>
+                )}
+            />
+            <div className={clsx(styles.selectedFile)}>{<DocumentView document={selected?.document} />}</div>
+        </div>
+    );
+});
+
+export default DocumentFileTree;

src/components/documents/FileSystem/DocumentFileTree/styles.module.scss

@@ -0,0 +1,30 @@
+.container {
+    display: flex;
+    align-items: flex-start;
+    width: 100%;
+    flex-wrap: wrap;
+    .tree {
+        --trees-search-bg: var(--ifm-background-surface-color);
+        --trees-bg: var(--ifm-background-color);
+        // --trees-search-fg
+        // --trees-border-color
+        // --trees-accent
+        // --trees-fg-muted
+        // --trees-bg-muted
+        color-scheme: light;
+    }
+    .selectedFile {
+        flex-grow: 1;
+        flex-shrink: 1;
+        flex-basis: 300px;
+        max-width: 1200px;
+    }
+}
+
+[data-theme='dark'] {
+    .container {
+        .tree {
+            color-scheme: dark;
+        }
+    }
+}