wip

Author: PanchoutNathan

src/frontend/apps/impress/package.json

@@ -71,6 +71,7 @@
     "stylelint-config-standard": "36.0.1",
     "stylelint-prettier": "5.0.2",
     "typescript": "*",
+    "use-resize-observer": "^9.1.0",
     "webpack": "5.97.1",
     "workbox-webpack-plugin": "7.1.0"
   }

src/frontend/apps/impress/src/components/common/tree/TreeView.tsx

@@ -1,7 +1,13 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 import { clsx } from 'clsx';
 import { useEffect, useRef, useState } from 'react';
-import { MoveHandler, NodeApi, NodeRendererProps, Tree } from 'react-arborist';
+import {
+  CursorProps,
+  MoveHandler,
+  NodeApi,
+  NodeRendererProps,
+  Tree,
+} from 'react-arborist';
 
 import { Box } from '../../Box';
 import { Icon } from '../../Icon';
@@ -21,14 +27,19 @@ const addAllChildren = <T,>(
   data: TreeViewDataType<T>[],
 ): TreeViewDataType<T>[] => {
   return data.map((item) => {
-    return { ...item, children: item.children ?? [] };
+    console.log('item', item);
+    return {
+      ...item,
+      children: item.children ? addAllChildren(item.children) : [],
+    };
   });
 };
 
 export type TreeViewProps<T> = {
   data: TreeViewDataType<T>[];
+  width?: number;
   allCanBeFolder?: boolean;
-  rootNode: BaseType<T>;
+
   renderNode?: (node: TreeViewDataType<T>) => React.ReactNode;
   loadChildren?: (node: TreeViewDataType<T>) => Promise<TreeViewDataType<T>[]>;
   afterMove?: (
@@ -38,12 +49,11 @@ export type TreeViewProps<T> = {
   ) => void;
 };
 
-type ArgumentTypes<T> = Parameters<MoveHandler<TreeViewDataType<T>>>;
-
 export const TreeView = <T,>({
   data: initialData,
+  width,
   allCanBeFolder,
-  rootNode,
+
   renderNode,
   loadChildren,
   afterMove,
@@ -52,47 +62,6 @@ export const TreeView = <T,>({
     allCanBeFolder ? addAllChildren(initialData) : initialData,
   );
 
-  const onMove3 = (args: {
-    dragIds: string[];
-    dragNodes: NodeApi<BaseType<T>>[];
-    parentId: string | null;
-    parentNode: NodeApi<BaseType<T>> | null;
-    index: number;
-  }): {
-    targetNodeId: string;
-    mode: 'first-child' | 'last-child' | 'left' | 'right';
-  } | null => {
-    const newData = JSON.parse(JSON.stringify(data)) as TreeViewDataType<T>[];
-
-    const newIndex = args.index;
-    const targetNodeId = args.parentId ?? rootNode.id;
-    const children = args.parentId
-      ? (args.parentNode?.children ?? [])
-      : newData;
-
-    if (newIndex === 0) {
-      return { targetNodeId: targetNodeId, mode: 'first-child' };
-    }
-    if (newIndex === children.length) {
-      return { targetNodeId: targetNodeId, mode: 'last-child' };
-    }
-
-    const siblingIndex = newIndex - 1;
-    const sibling = children[siblingIndex];
-
-    if (sibling) {
-      return { targetNodeId: sibling.id, mode: 'right' };
-    }
-
-    const nextSiblingIndex = newIndex + 1;
-    const nextSibling = children[nextSiblingIndex];
-    if (nextSibling) {
-      return { targetNodeId: nextSibling.id, mode: 'left' };
-    }
-
-    return null;
-  };
-
   const onMove = (args: {
     dragIds: string[];
     dragNodes: NodeApi<BaseType<T>>[];
@@ -182,7 +151,6 @@ export const TreeView = <T,>({
       findParentAndInsert(newData);
     }
 
-    console.log('onMove --- ', onMove3(args));
     setData(newData);
   };
 
@@ -192,30 +160,24 @@ export const TreeView = <T,>({
   }, [initialData, setData, allCanBeFolder]);
 
   return (
-    <Box className={styles.container}>
-      <Tree
-        data={data}
-        openByDefault={false}
-        height={1000}
-        indent={20}
-        width={280}
-        rowHeight={28}
-        overscanCount={1}
-        paddingTop={30}
-        paddingBottom={10}
-        padding={25}
-        onMove={onMove as MoveHandler<TreeViewDataType<T>>}
-      >
-        {(props) => (
-          <Node
-            {...props}
-            renderNode={renderNode}
-            loadChildren={loadChildren}
-          />
-        )}
-      </Tree>
-      e
-    </Box>
+    <Tree
+      data={data}
+      openByDefault={false}
+      height={1000}
+      indent={20}
+      openByDefault={true}
+      // width={280}
+      width={width}
+      rowHeight={32}
+      overscanCount={20}
+      padding={25}
+      renderCursor={Cursor}
+      onMove={onMove as MoveHandler<TreeViewDataType<T>>}
+    >
+      {(props) => (
+        <Node {...props} renderNode={renderNode} loadChildren={loadChildren} />
+      )}
+    </Tree>
   );
 };
 
@@ -224,6 +186,18 @@ export type NodeProps<T> = NodeRendererProps<TreeViewDataType<T>> & {
   loadChildren?: (node: TreeViewDataType<T>) => Promise<TreeViewDataType<T>[]>;
 };
 
+function Cursor({ top, left }: CursorProps) {
+  return (
+    <div
+      className={styles.cursor}
+      style={{
+        top,
+        left: left + 10,
+      }}
+    ></div>
+  );
+}
+
 export const Node = <T,>({
   renderNode,
   node,
@@ -275,6 +249,7 @@ export const Node = <T,>({
     if (timeoutRef.current && !node.willReceiveDrop) {
       clearTimeout(timeoutRef.current);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [node]);
 
   return (
@@ -283,9 +258,11 @@ export const Node = <T,>({
       className={clsx(styles.node, {
         [styles.willReceiveDrop]: node.willReceiveDrop,
         [styles.selected]: node.isSelected,
+        toto: true,
       })}
       style={{
         ...style,
+        width: `calc(100% + ${node.level * 20}px)`,
       }}
       ref={dragHandle}
     >

src/frontend/apps/impress/src/components/common/tree/treeview.module.scss

@@ -1,12 +1,23 @@
 .container {
+  [role='treeitem'] {
+    display: flex;
+    align-items: center;
+  }
 }
 
 .node {
+  // padding-left: 0px !important;
+  // margin-left: 180px;
+  min-width: 300px;
+  height: calc(100% - 2px);
+  overflow: hidden;
   display: flex;
   align-items: center;
+  flex-wrap: nowrap;
   border-radius: 4px;
   border: 1.5px solid rgba(0, 0, 0, 0);
   cursor: pointer;
+
   padding: var(--c--theme--spacings--4xs) 0;
   gap: var(--c--theme--spacings--3xs);
 
@@ -16,10 +27,19 @@
 
   &.selected {
     background-color: var(--c--theme--colors--greyscale-100);
+
+    font-weight: 700;
   }
 
   &.willReceiveDrop {
     background-color: var(--c--theme--colors--primary-100);
     border: 1.5px solid var(--c--theme--colors--primary-500);
   }
 }
+
+.cursor {
+  position: absolute;
+  width: 100%;
+  height: 0;
+  border-top: 2px solid var(--c--theme--colors--primary-500);
+}

src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx

@@ -68,10 +68,14 @@ export const DocsGridItem = ({ doc }: DocsGridItemProps) => {
             <SimpleDocItem isPinned={doc.is_favorite} doc={doc} />
             {showAccesses && (
               <Box
-                $padding={{ top: '3xs' }}
-                $css={css`
-                  align-self: flex-start;
-                `}
+                $padding={{ top: !isDesktop ? '4xs' : undefined }}
+                $css={
+                  !isDesktop
+                    ? css`
+                        align-self: flex-start;
+                      `
+                    : undefined
+                }
               >
                 <Tooltip
                   content={