milestone 1

apps/app/src/client/components/Common/SimplifiedItemsTree/SimplifiedItemsTree.module.scss

@@ -0,0 +1,26 @@
+.simplified-items-tree {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.simplified-tree-item {
+  padding: 8px 12px;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+
+  &[aria-current='page'] {
+    font-weight: 600;
+    background-color: rgba(0, 123, 255, 0.1);
+  }
+}
+
+.item-path {
+  font-size: 14px;
+  color: inherit;
+}

apps/app/src/client/components/Common/SimplifiedItemsTree/SimplifiedItemsTree.tsx

@@ -0,0 +1,66 @@
+import type { FC } from 'react';
+import { useMemo } from 'react';
+
+import type { IPageForTreeItem } from '~/interfaces/page';
+
+import { SimplifiedTreeItem } from './SimplifiedTreeItem';
+
+import styles from './SimplifiedItemsTree.module.scss';
+
+
+type Props = {
+  targetPathOrId?: string | null;
+};
+
+// Mock data for M1 - will be replaced with real API in M2
+const MOCK_DATA: IPageForTreeItem[] = [
+  {
+    _id: '1',
+    path: '/page1',
+    parent: '/',
+    descendantCount: 0,
+    revision: 'rev1',
+    grant: 1,
+    isEmpty: false,
+    wip: false,
+  },
+  {
+    _id: '2',
+    path: '/page2',
+    parent: '/',
+    descendantCount: 0,
+    revision: 'rev2',
+    grant: 1,
+    isEmpty: false,
+    wip: false,
+  },
+  {
+    _id: '3',
+    path: '/page3',
+    parent: '/',
+    descendantCount: 0,
+    revision: 'rev3',
+    grant: 1,
+    isEmpty: false,
+    wip: false,
+  },
+];
+
+export const SimplifiedItemsTree: FC<Props> = ({ targetPathOrId }) => {
+  const items = useMemo(() => MOCK_DATA, []);
+
+  return (
+    <div className={styles['simplified-items-tree']}>
+      {items.map((item) => {
+        const isSelected = targetPathOrId === item._id || targetPathOrId === item.path;
+        return (
+          <SimplifiedTreeItem
+            key={item._id}
+            item={item}
+            isSelected={isSelected}
+          />
+        );
+      })}
+    </div>
+  );
+};

apps/app/src/client/components/Common/SimplifiedItemsTree/SimplifiedTreeItem.tsx

@@ -0,0 +1,34 @@
+import type { FC } from 'react';
+import { useCallback } from 'react';
+
+import { useRouter } from 'next/router';
+
+import type { IPageForTreeItem } from '~/interfaces/page';
+
+import styles from './SimplifiedItemsTree.module.scss';
+
+
+type Props = {
+  item: IPageForTreeItem;
+  isSelected: boolean;
+};
+
+export const SimplifiedTreeItem: FC<Props> = ({ item, isSelected }) => {
+  const router = useRouter();
+
+  const handleClick = useCallback(() => {
+    router.push(item.path);
+  }, [router, item.path]);
+
+  return (
+    <div
+      className={styles['simplified-tree-item']}
+      onClick={handleClick}
+      aria-current={isSelected ? 'page' : undefined}
+      role="button"
+      tabIndex={0}
+    >
+      <span className={styles['item-path']}>{item.path}</span>
+    </div>
+  );
+};

apps/app/src/client/components/Common/SimplifiedItemsTree/index.ts

@@ -0,0 +1,2 @@
+export { SimplifiedItemsTree } from './SimplifiedItemsTree';
+export { SimplifiedTreeItem } from './SimplifiedTreeItem';

apps/app/src/client/components/Sidebar/PageTree/PageTreeSubstance.tsx

@@ -13,8 +13,7 @@ import {
 } from '~/stores/page-listing';
 import loggerFactory from '~/utils/logger';
 
-import { ItemsTree } from '../../ItemsTree/ItemsTree';
-import { PageTreeItem } from '../PageTreeItem';
+import { SimplifiedItemsTree } from '../../Common/SimplifiedItemsTree';
 import { SidebarHeaderReloadButton } from '../SidebarHeaderReloadButton';
 
 import { PrivateLegacyPagesLink } from './PrivateLegacyPagesLink';
@@ -179,6 +178,7 @@ export const PageTreeContent = memo(({ isWipPageShown }: PageTreeContentProps) =
 
   return (
     <div ref={rootElemRef} className="pt-4">
+      {/*
       <ItemsTree
         isEnableActions={!isGuestUser}
         isReadOnlyUser={!!isReadOnlyUser}
@@ -187,6 +187,10 @@ export const PageTreeContent = memo(({ isWipPageShown }: PageTreeContentProps) =
         targetPathOrId={targetPathOrId}
         CustomTreeItem={PageTreeItem}
       />
+      */}
+      <SimplifiedItemsTree
+        targetPathOrId={targetPathOrId}
+      />
 
       {!isGuestUser && !isReadOnlyUser && migrationStatus?.migratablePagesCount != null && migrationStatus.migratablePagesCount !== 0 && (
         <div className="grw-pagetree-footer border-top mt-4 py-2 w-100">