Merge pull request #274 from kimatata/develop

2025-08-10 13:11:01 +09:00
parent d4c5f59755 da550c3024
commit 720ec7c508
18 changed files with 590 additions and 112 deletions
--- a/backend/migrations/20250804175803-add-cascade-delete-parent-folder.js
+++ b/backend/migrations/20250804175803-add-cascade-delete-parent-folder.js
@@ -0,0 +1,22 @@
+'use strict';
+
+/** @type {import('sequelize-cli').Migration} */
+module.exports = {
+  async up(queryInterface) {
+    await queryInterface.addConstraint('folders', {
+      fields: ['parentFolderId'],
+      type: 'foreign key',
+      name: 'fk_folders_parentFolderId',
+      references: {
+        table: 'folders',
+        field: 'id',
+      },
+      onDelete: 'CASCADE',
+      onUpdate: 'CASCADE',
+    });
+  },
+
+  async down(queryInterface) {
+    await queryInterface.removeConstraint('folders', 'fk_folders_parentFolderId');
+  },
+};
--- a/backend/models/folders.js
+++ b/backend/models/folders.js
@@ -11,6 +11,11 @@ function defineFolder(sequelize, DataTypes) {
    parentFolderId: {
      type: DataTypes.INTEGER,
      allowNull: true,
+      references: {
+        model: 'folder',
+        key: 'id',
+      },
+      onDelete: 'CASCADE',
    },
    projectId: {
      type: DataTypes.INTEGER,
@@ -25,6 +30,7 @@ function defineFolder(sequelize, DataTypes) {

  Folder.associate = (models) => {
    Folder.belongsTo(models.Project, { foreignKey: 'projectId', onDelete: 'CASCADE' });
+    Folder.belongsTo(models.folder, { foreignKey: 'parentFolderId', onDelete: 'CASCADE' });
    Folder.hasMany(models.Case, { foreignKey: 'folderId' });
  };

--- a/frontend/components/TreeItem.tsx
+++ b/frontend/components/TreeItem.tsx
@@ -0,0 +1,46 @@
+import { cn } from '@heroui/react';
+import { ReactNode } from 'react';
+
+interface TreeItemProps {
+  style: React.CSSProperties;
+  isSelected: boolean | null;
+  onClick: () => void;
+  toggleButton?: ReactNode;
+  icon: ReactNode;
+  label: string;
+  actions?: ReactNode;
+  className?: string;
+}
+
+export default function TreeItem({
+  style,
+  isSelected,
+  onClick,
+  toggleButton,
+  icon,
+  label,
+  actions,
+  className,
+}: TreeItemProps) {
+  const baseClass = '';
+  const selectedClass = `${baseClass} bg-neutral-200 dark:bg-neutral-700 dark:hover:bg-neutral-600 hover:bg-neutral-300`;
+
+  return (
+    <div className="mx-2">
+      <div
+        style={style}
+        className={cn(
+          'w-full py-1 pr-2 flex items-center rounded-md cursor-pointer transition-colors hover:bg-neutral-100 dark:hover:bg-neutral-600',
+          isSelected ? selectedClass : baseClass,
+          className
+        )}
+        onClick={onClick}
+      >
+        {toggleButton || <div className="ml-2" />}
+        {icon}
+        <span className="truncate ml-1.5">{label}</span>
+        {actions && <div className="ml-auto flex items-center">{actions}</div>}
+      </div>
+    </div>
+  );
+}
--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -154,6 +154,7 @@
  },
  "Project": {
    "project": "Project",
+    "toggle_sidebar": "Toggle Sidebar",
    "home": "Home",
    "test_cases": "Test Cases",
    "test_runs": "Test Runs",
--- a/frontend/messages/ja.json
+++ b/frontend/messages/ja.json
@@ -155,6 +155,7 @@
  },
  "Project": {
    "project": "プロジェクト",
+    "toggle_sidebar": "サイドバーの切り替え",
    "home": "ホーム",
    "test_cases": "テストケース",
    "test_runs": "テストラン",
--- a/frontend/messages/pt-BR.json
+++ b/frontend/messages/pt-BR.json
@@ -154,6 +154,7 @@
  },
  "Project": {
    "project": "Projeto",
+    "toggle_sidebar": "Alternar barra lateral",
    "home": "Início",
    "test_cases": "Casos de Teste",
    "test_runs": "Execuções de Teste",
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -23,13 +23,14 @@
        "dayjs": "^1.11.13",
        "framer-motion": "^11.18.2",
        "intl-messageformat": "^10.7.15",
-        "lucide-react": "^0.475.0",
+        "lucide-react": "^0.539.0",
        "next": "^14.2.24",
        "next-intl": "^3.26.5",
        "next-themes": "^0.4.4",
        "postcss": "8.5.3",
        "react": "^18.3.1",
        "react-apexcharts": "^1.7.0",
+        "react-arborist": "^3.4.3",
        "react-dom": "18.3.1",
        "sharp": "^0.33.5",
        "tailwind-variants": "^0.3.1",
@@ -9310,6 +9311,24 @@
        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
      }
    },
+    "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/@react-stately/flags": {
      "version": "3.0.5",
      "resolved": "https://registry.npmjs.org/@react-stately/flags/-/flags-3.0.5.tgz",
@@ -10135,6 +10154,26 @@
      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
    },
+    "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/eastasianwidth": {
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -10158,6 +10197,12 @@
        "node": ">=6"
      }
    },
+    "node_modules/fast-deep-equal": {
+      "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==",
+      "license": "MIT"
+    },
    "node_modules/fast-glob": {
      "version": "3.3.2",
      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
@@ -10312,6 +10357,15 @@
        "node": ">= 0.4"
      }
    },
+    "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/input-otp": {
      "version": "1.4.1",
      "resolved": "https://registry.npmjs.org/input-otp/-/input-otp-1.4.1.tgz",
@@ -10448,13 +10502,20 @@
      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ=="
    },
    "node_modules/lucide-react": {
-      "version": "0.475.0",
-      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.475.0.tgz",
-      "integrity": "sha512-NJzvVu1HwFVeZ+Gwq2q00KygM1aBhy/ZrhY9FsAgJtpB+E4R7uxRk9M2iKvHa6/vNxZydIB59htha4c2vvwvVg==",
+      "version": "0.539.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.539.0.tgz",
+      "integrity": "sha512-VVISr+VF2krO91FeuCrm1rSOLACQUYVy7NQkzrOty52Y8TlTPcXcMdQFj9bYzBgXbWCiywlwSZ3Z8u6a+6bMlg==",
+      "license": "ISC",
      "peerDependencies": {
        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
      }
    },
+    "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/merge2": {
      "version": "1.4.1",
      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -10934,6 +10995,62 @@
        "react": ">=0.13"
      }
    },
+    "node_modules/react-arborist": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/react-arborist/-/react-arborist-3.4.3.tgz",
+      "integrity": "sha512-yFnq1nIQhT2uJY4TZVz2tgAiBb9lxSyvF4vC3S8POCK8xLzjGIxVv3/4dmYquQJ7AHxaZZArRGHiHKsEewKdTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "react-dnd": "^14.0.3",
+        "react-dnd-html5-backend": "^14.0.3",
+        "react-window": "^1.8.11",
+        "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",
@@ -10967,6 +11084,23 @@
        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
      }
    },
+    "node_modules/react-window": {
+      "version": "1.8.11",
+      "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.11.tgz",
+      "integrity": "sha512-+SRbUVT2scadgFSWx+R1P754xHPEqvcfSfVX10QYg6POOz+WNgkN48pS+BtZNIMGiL1HYrSEiCkwsMS15QogEQ==",
+      "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 || ^19.0.0",
+        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
    "node_modules/read-cache": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -10986,6 +11120,12 @@
        "node": ">=8.10.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/regenerator-runtime": {
      "version": "0.14.0",
      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -24,13 +24,14 @@
    "dayjs": "^1.11.13",
    "framer-motion": "^11.18.2",
    "intl-messageformat": "^10.7.15",
-    "lucide-react": "^0.475.0",
+    "lucide-react": "^0.539.0",
    "next": "^14.2.24",
    "next-intl": "^3.26.5",
    "next-themes": "^0.4.4",
    "postcss": "8.5.3",
    "react": "^18.3.1",
    "react-apexcharts": "^1.7.0",
+    "react-arborist": "^3.4.3",
    "react-dom": "18.3.1",
    "sharp": "^0.33.5",
    "tailwind-variants": "^0.3.1",
--- a/frontend/src/app/[locale]/health/HealthPage.tsx
+++ b/frontend/src/app/[locale]/health/HealthPage.tsx
@@ -62,7 +62,7 @@ export default function HealthPage({ messages, locale }: Props) {
          <TableBody>
            <TableRow key="1">
              <TableCell>{messages.unittcms_version}</TableCell>
-              <TableCell>1.0.0-beta.17</TableCell>
+              <TableCell>1.0.0-beta.18</TableCell>
            </TableRow>
            <TableRow key="2">
              <TableCell>{messages.api_server}</TableCell>
--- a/frontend/src/app/[locale]/projects/[projectId]/Sidebar.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/Sidebar.tsx
@@ -1,7 +1,15 @@
 'use client';
 import { useState, useEffect } from 'react';
-import { Listbox, ListboxItem } from '@heroui/react';
-import { Home, Files, FlaskConical, Users, Settings } from 'lucide-react';
+import { Button, Tooltip } from '@heroui/react';
+import {
+  PanelLeftClose,
+  PanelLeftOpen,
+  ChartColumnStacked,
+  ClipboardList,
+  FlaskConical,
+  UserRound,
+  Settings,
+} from 'lucide-react';
 import { usePathname, useRouter } from '@/src/i18n/routing';
 import useGetCurrentIds from '@/utils/useGetCurrentIds';
 import { ProjectMessages } from '@/types/project';
@@ -16,11 +24,15 @@ export default function Sidebar({ messages, locale }: Props) {
  const router = useRouter();
  const pathname = usePathname();

-  const [currentKey, setCurrentTab] = useState('home');
-  const baseClass = 'p-3';
-  const selectedClass = `${baseClass} bg-neutral-200 dark:bg-neutral-700`;
+  const [currentKey, setCurrentKey] = useState('home');
+  const [isSideBarOpen, setIsSideBarOpen] = useState(true);

-  const handleTabClick = (key: string) => {
+  const TOGGLE_ICON_STROKE_WIDTH = 1;
+  const TOGGLE_ICON_SIZE = 18;
+  const ICON_STROKE_WIDTH = 1;
+  const ICON_SIZE = 26;
+
+  const handleClick = (key: string) => {
    if (key === 'home') {
      router.push(`/projects/${projectId}/home`, { locale: locale });
    } else if (key === 'cases') {
@@ -37,15 +49,15 @@ export default function Sidebar({ messages, locale }: Props) {
  useEffect(() => {
    const handleRouteChange = (currentPath: string) => {
      if (currentPath.includes('home')) {
-        setCurrentTab('home');
+        setCurrentKey('home');
      } else if (currentPath.includes('folders')) {
-        setCurrentTab('cases');
+        setCurrentKey('cases');
      } else if (currentPath.includes('runs')) {
-        setCurrentTab('runs');
+        setCurrentKey('runs');
      } else if (currentPath.includes('members')) {
-        setCurrentTab('members');
+        setCurrentKey('members');
      } else if (currentPath.includes('settings')) {
-        setCurrentTab('settings');
+        setCurrentKey('settings');
      }
    };

@@ -56,44 +68,63 @@ export default function Sidebar({ messages, locale }: Props) {
    {
      key: 'home',
      text: messages.home,
-      startContent: <Home strokeWidth={1} size={20} />,
+      startContent: <ChartColumnStacked strokeWidth={ICON_STROKE_WIDTH} size={ICON_SIZE} />,
    },
    {
      key: 'cases',
      text: messages.testCases,
-      startContent: <Files strokeWidth={1} size={20} />,
+      startContent: <ClipboardList strokeWidth={ICON_STROKE_WIDTH} size={ICON_SIZE} />,
    },
    {
      key: 'runs',
      text: messages.testRuns,
-      startContent: <FlaskConical strokeWidth={1} size={20} />,
+      startContent: <FlaskConical strokeWidth={ICON_STROKE_WIDTH} size={ICON_SIZE} />,
    },
    {
      key: 'members',
      text: messages.members,
-      startContent: <Users strokeWidth={1} size={20} />,
+      startContent: <UserRound strokeWidth={ICON_STROKE_WIDTH} size={ICON_SIZE} />,
    },
    {
      key: 'settings',
      text: messages.settings,
-      startContent: <Settings strokeWidth={1} size={20} />,
+      startContent: <Settings strokeWidth={ICON_STROKE_WIDTH} size={ICON_SIZE} />,
    },
  ];

  return (
-    <div className="w-48 border-r-1 dark:border-neutral-700">
-      <Listbox aria-label="Listbox Variants" variant="light">
+    <div className="border-r-1 dark:border-neutral-700">
+      <div className="w-full flex justify-end">
+        <Tooltip content={messages.toggleSidebar} placement="right">
+          <Button size="lg" isIconOnly variant="light" onPress={() => setIsSideBarOpen(!isSideBarOpen)}>
+            {isSideBarOpen ? (
+              <PanelLeftClose strokeWidth={TOGGLE_ICON_STROKE_WIDTH} size={TOGGLE_ICON_SIZE} />
+            ) : (
+              <PanelLeftOpen strokeWidth={TOGGLE_ICON_STROKE_WIDTH} size={TOGGLE_ICON_SIZE} />
+            )}
+          </Button>
+        </Tooltip>
+      </div>
+
+      <div className="border-t-1 dark:border-neutral-700">
        {tabItems.map((itr) => (
-          <ListboxItem
-            key={itr.key}
-            startContent={itr.startContent}
-            onPress={() => handleTabClick(itr.key)}
-            className={currentKey === itr.key ? selectedClass : baseClass}
-          >
-            {itr.text}
-          </ListboxItem>
+          <div key={itr.key}>
+            <Tooltip hidden={isSideBarOpen} content={itr.text} placement="right">
+              <Button
+                size="lg"
+                isIconOnly={!isSideBarOpen}
+                startContent={itr.startContent}
+                isDisabled={itr.key === currentKey}
+                variant="light"
+                className={isSideBarOpen ? 'w-full justify-start' : ''}
+                onPress={() => handleClick(itr.key)}
+              >
+                {isSideBarOpen ? itr.text : ''}
+              </Button>
+            </Tooltip>
+          </div>
        ))}
-      </Listbox>
+      </div>
    </div>
  );
 }
--- a/frontend/src/app/[locale]/projects/[projectId]/folders/FolderItem.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/folders/FolderItem.tsx
@@ -0,0 +1,83 @@
+import { Button } from '@heroui/react';
+import { ChevronDown, ChevronRight, Folder, Plus } from 'lucide-react';
+import { NodeApi } from 'react-arborist';
+import { useContext } from 'react';
+import FolderEditMenu from './FolderEditMenu';
+
+import { FolderType, FoldersMessages, TreeNodeData } from '@/types/folder';
+import { useRouter } from '@/src/i18n/routing';
+import { TokenContext } from '@/utils/TokenProvider';
+import TreeItem from '@/components/TreeItem';
+
+interface FolderItemProps {
+  node: NodeApi<TreeNodeData>;
+  style: React.CSSProperties;
+  projectId: string;
+  selectedFolder: FolderType | null;
+  locale: string;
+  messages: FoldersMessages;
+  openDialogForCreate: (folderId: number | null) => void;
+  onEditClick: (folder: FolderType) => void;
+  onDeleteClick: (folderId: number) => void;
+}
+
+export default function FolderItem({
+  node,
+  style,
+  projectId,
+  selectedFolder,
+  locale,
+  messages,
+  openDialogForCreate,
+  onEditClick,
+  onDeleteClick,
+}: FolderItemProps) {
+  const router = useRouter();
+  const context = useContext(TokenContext);
+  const isSelected = selectedFolder && node.data.folderData.id === selectedFolder.id;
+
+  const toggleButton =
+    node.data.children && node.data.children.length > 0 ? (
+      <Button
+        size="sm"
+        className="bg-transparent rounded-full h-6 w-6 min-w-4"
+        isIconOnly
+        onPress={() => node.toggle()}
+      >
+        {node.isOpen ? <ChevronDown size={20} color="#F7C24E" /> : <ChevronRight size={20} color="#F7C24E" />}
+      </Button>
+    ) : null;
+
+  const actions = (
+    <>
+      <Button
+        size="sm"
+        isIconOnly
+        className="bg-transparent rounded-full"
+        isDisabled={!context.isProjectDeveloper(Number(projectId))}
+        onPress={() => openDialogForCreate(node.data.folderData.id)}
+      >
+        <Plus size={16} />
+      </Button>
+      <FolderEditMenu
+        folder={node.data.folderData}
+        isDisabled={!context.isProjectDeveloper(Number(projectId))}
+        onEditClick={onEditClick}
+        onDeleteClick={onDeleteClick}
+        messages={messages}
+      />
+    </>
+  );
+
+  return (
+    <TreeItem
+      style={style}
+      isSelected={isSelected}
+      onClick={() => router.push(`/projects/${projectId}/folders/${node.data.folderData.id}/cases`, { locale })}
+      toggleButton={toggleButton}
+      icon={<Folder size={20} color="#F7C24E" fill="#F7C24E" className="flex-shrink-0" />}
+      label={node.data.name}
+      actions={actions}
+    />
+  );
+}
--- a/frontend/src/app/[locale]/projects/[projectId]/folders/FoldersPane.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/folders/FoldersPane.tsx
@@ -1,16 +1,18 @@
 'use client';
 import { useState, useEffect, useContext } from 'react';
-import { Button, Listbox, ListboxItem } from '@heroui/react';
-import { Folder, Plus } from 'lucide-react';
+import { Button } from '@heroui/react';
+import { Plus } from 'lucide-react';
+import { Tree } from 'react-arborist';
 import FolderDialog from './FolderDialog';
-import FolderEditMenu from './FolderEditMenu';
+import FolderItem from './FolderItem';
 import { fetchFolders, createFolder, updateFolder, deleteFolder } from './foldersControl';
 import { usePathname, useRouter } from '@/src/i18n/routing';
 import { TokenContext } from '@/utils/TokenProvider';
 import useGetCurrentIds from '@/utils/useGetCurrentIds';
 import DeleteConfirmDialog from '@/components/DeleteConfirmDialog';
-import { FolderType, FoldersMessages } from '@/types/folder';
+import { FolderType, FoldersMessages, TreeNodeData } from '@/types/folder';
 import { logError } from '@/utils/errorHandler';
+import { buildFolderTree } from '@/utils/buildFolderTree';

 type Props = {
  projectId: string;
@@ -22,11 +24,12 @@ export default function FoldersPane({ projectId, messages, locale }: Props) {
  const router = useRouter();
  const pathname = usePathname();
  const context = useContext(TokenContext);
-  const [folders, setFolders] = useState<FolderType[]>([]);
+  const [treeData, setTreeData] = useState<TreeNodeData[]>([]);
  const [selectedFolder, setSelectedFolder] = useState<FolderType | null>(null);
  const { folderId } = useGetCurrentIds();
  const [isFolderDialogOpen, setIsFolderDialogOpen] = useState(false);
  const [editingFolder, setEditingFolder] = useState<FolderType | null>(null);
+  const [parentFolderId, setParentFolderId] = useState<number | null>(null);

  useEffect(() => {
    async function fetchDataEffect() {
@@ -34,21 +37,20 @@ export default function FoldersPane({ projectId, messages, locale }: Props) {
        return;
      }
      try {
-        const folders: FolderType[] = await fetchFolders(context.token.access_token, Number(projectId));
-        setFolders(folders);
+        const fetchedFolders: FolderType[] = await fetchFolders(context.token.access_token, Number(projectId));
+        const tree = buildFolderTree(fetchedFolders);
+        setTreeData(tree);

-        // no folder on project
-        if (folders.length === 0) {
+        if (tree.length === 0) {
          return;
        }

-        const selectedFolderFromUrl = folders.find((folder) => folder.id === folderId);
+        const selectedFolderFromUrl = fetchedFolders.find((folder) => folder.id === folderId);
        setSelectedFolder(selectedFolderFromUrl ? selectedFolderFromUrl : null);

-        // Redirect to the smallest folder ID page if the path is "projects/[projectId]/folders
        if (pathname === `/projects/${projectId}/folders`) {
-          const smallestFolderId = Math.min(...folders.map((folder) => folder.id));
-          router.push(`/projects/${projectId}/folders/${smallestFolderId}/cases`, { locale: locale });
+          const smallestFolderId = Math.min(...fetchedFolders.map((folder) => folder.id));
+          router.push(`/projects/${projectId}/folders/${smallestFolderId}/cases`, { locale });
        }
      } catch (error: unknown) {
        logError('Error fetching folders:', error);
@@ -58,7 +60,8 @@ export default function FoldersPane({ projectId, messages, locale }: Props) {
    fetchDataEffect();
  }, [context, folderId, locale, pathname, projectId, router]);

-  const openDialogForCreate = () => {
+  const openDialogForCreate = (folderId: number | null = null) => {
+    setParentFolderId(folderId);
    setIsFolderDialogOpen(true);
    setEditingFolder(null);
  };
@@ -66,35 +69,30 @@ export default function FoldersPane({ projectId, messages, locale }: Props) {
  const closeDialog = () => {
    setIsFolderDialogOpen(false);
    setEditingFolder(null);
+    setParentFolderId(null);
  };

  const onSubmit = async (name: string, detail: string) => {
    if (editingFolder) {
-      const updatedProject = await updateFolder(
-        context.token.access_token,
-        editingFolder.id,
-        name,
-        detail,
-        projectId,
-        null
-      );
-      const updatedProjects = folders.map((project) => (project.id === updatedProject.id ? updatedProject : project));
-      setFolders(updatedProjects);
+      await updateFolder(context.token.access_token, editingFolder.id, name, detail, projectId, parentFolderId);
    } else {
-      const newProject = await createFolder(context.token.access_token, name, detail, projectId, null);
-      setFolders([...folders, newProject]);
+      await createFolder(context.token.access_token, name, detail, projectId, parentFolderId);
    }
+    const fetchedFolders: FolderType[] = await fetchFolders(context.token.access_token, Number(projectId));
+    const tree = buildFolderTree(fetchedFolders);
+    setTreeData(tree);
    closeDialog();
  };

  const onEditClick = (folder: FolderType) => {
    setEditingFolder(folder);
+    setParentFolderId(folder.parentFolderId);
    setIsFolderDialogOpen(true);
  };

-  // Delete confirm dialog
  const [isDeleteConfirmDialogOpen, setIsDeleteConfirmDialogOpen] = useState(false);
  const [deleteFolderId, setDeleteFolderId] = useState<number | null>(null);
+
  const closeDeleteConfirmDialog = () => {
    setIsDeleteConfirmDialogOpen(false);
    setDeleteFolderId(null);
@@ -108,48 +106,57 @@ export default function FoldersPane({ projectId, messages, locale }: Props) {
  const onConfirm = async () => {
    if (deleteFolderId) {
      await deleteFolder(context.token.access_token, deleteFolderId);
-      router.push(`/projects/${projectId}/folders`, { locale: locale });
+      const fetchedFolders: FolderType[] = await fetchFolders(context.token.access_token, Number(projectId));
+      const tree = buildFolderTree(fetchedFolders);
+      setTreeData(tree);
+      router.push(`/projects/${projectId}/folders`, { locale });
      closeDeleteConfirmDialog();
    }
  };

-  const baseClass = '';
-  const selectedClass = `${baseClass} bg-neutral-200 dark:bg-neutral-700`;
-
  return (
    <>
-      <div className="w-64 min-h-[calc(100vh-64px)] border-r-1 dark:border-neutral-700">
+      <div className="w-80 min-h-[calc(100vh-64px)] border-r-1 dark:border-neutral-700">
        <Button
          startContent={<Plus size={16} />}
          size="sm"
          variant="bordered"
          className="m-2"
          isDisabled={!context.isProjectDeveloper(Number(projectId))}
-          onPress={openDialogForCreate}
+          onPress={() => openDialogForCreate()}
        >
          {messages.newFolder}
        </Button>
-        <Listbox aria-label="Listbox Variants" variant="light">
-          {folders.map((folder, index) => (
-            <ListboxItem
-              key={index}
-              onPress={() => router.push(`/projects/${projectId}/folders/${folder.id}/cases`, { locale: locale })}
-              startContent={<Folder size={20} color="#F7C24E" fill="#F7C24E" />}
-              className={selectedFolder && folder.id === selectedFolder.id ? selectedClass : baseClass}
-              endContent={
-                <FolderEditMenu
-                  folder={folder}
-                  isDisabled={!context.isProjectDeveloper(Number(projectId))}
-                  onEditClick={onEditClick}
-                  onDeleteClick={onDeleteClick}
-                  messages={messages}
-                />
-              }
-            >
-              {folder.name}
-            </ListboxItem>
-          ))}
-        </Listbox>
+
+        {treeData.length > 0 && (
+          <Tree
+            data={treeData}
+            className="w-full"
+            indent={16}
+            rowHeight={42}
+            overscanCount={5}
+            paddingTop={20}
+            paddingBottom={20}
+            padding={20}
+            width="100%"
+            openByDefault={false}
+            disableDrop={true}
+            disableDrag={true}
+          >
+            {(props) => (
+              <FolderItem
+                {...props}
+                projectId={projectId}
+                selectedFolder={selectedFolder}
+                locale={locale}
+                messages={messages}
+                openDialogForCreate={openDialogForCreate}
+                onEditClick={onEditClick}
+                onDeleteClick={onDeleteClick}
+              />
+            )}
+          </Tree>
+        )}
      </div>

      <FolderDialog
--- a/frontend/src/app/[locale]/projects/[projectId]/layout.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/layout.tsx
@@ -11,6 +11,7 @@ export default function SidebarLayout({
 }) {
  const t = useTranslations('Project');
  const messages: ProjectMessages = {
+    toggleSidebar: t('toggle_sidebar'),
    home: t('home'),
    testCases: t('test_cases'),
    testRuns: t('test_runs'),
--- a/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/RunEditor.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/RunEditor.tsx
@@ -7,8 +7,6 @@ import {
  Select,
  SelectItem,
  Tooltip,
-  Listbox,
-  ListboxItem,
  Divider,
  Selection,
  DropdownTrigger,
@@ -22,7 +20,6 @@ import {
 import {
  Save,
  ArrowLeft,
-  Folder,
  ChevronDown,
  CopyPlus,
  CopyMinus,
@@ -31,8 +28,11 @@ import {
  FileSpreadsheet,
  FileCode,
  FileJson,
+  ChevronRight,
+  Folder,
 } from 'lucide-react';
 import { useTheme } from 'next-themes';
+import { NodeApi, Tree } from 'react-arborist';
 import {
  fetchRun,
  updateRun,
@@ -49,13 +49,15 @@ import { useRouter } from '@/src/i18n/routing';
 import { testRunStatus } from '@/config/selection';
 import { RunType, RunStatusCountType, RunMessages } from '@/types/run';
 import { CaseType } from '@/types/case';
-import { FolderType } from '@/types/folder';
+import { TreeNodeData } from '@/types/folder';
 import { TokenContext } from '@/utils/TokenProvider';
 import { useFormGuard } from '@/utils/formGuard';
 import { PriorityMessages } from '@/types/priority';
 import { RunStatusMessages, TestRunCaseStatusMessages } from '@/types/status';
 import { TestTypeMessages } from '@/types/testType';
 import { logError } from '@/utils/errorHandler';
+import TreeItem from '@/components/TreeItem';
+import { buildFolderTree } from '@/utils/buildFolderTree';

 const defaultTestRun = {
  id: 0,
@@ -92,10 +94,10 @@ export default function RunEditor({
  const tokenContext = useContext(TokenContext);
  const { theme } = useTheme();
  const [testRun, setTestRun] = useState<RunType>(defaultTestRun);
-  const [folders, setFolders] = useState<FolderType[]>([]);
+  const [treeData, setTreeData] = useState<TreeNodeData[]>([]);
  const [runStatusCounts, setRunStatusCounts] = useState<RunStatusCountType[]>([]);
  const [selectedKeys, setSelectedKeys] = useState<Selection>(new Set([]));
-  const [selectedFolder, setSelectedFolder] = useState<FolderType | null>(null);
+  const [selectedFolder, setSelectedFolder] = useState<TreeNodeData | null>(null);
  const [testCases, setTestCases] = useState<CaseType[]>([]);
  const [filteredTestCases, setFilteredTestCases] = useState<CaseType[]>([]);
  const [isNameInvalid] = useState<boolean>(false);
@@ -130,7 +132,8 @@ export default function RunEditor({
      try {
        await fetchRunAndStatusCount();
        const foldersData = await fetchFolders(tokenContext.token.access_token, Number(projectId));
-        setFolders(foldersData);
+        const tree = buildFolderTree(foldersData);
+        setTreeData(tree);
        setSelectedFolder(foldersData[0]);
        initTestCases();
      } catch (error: unknown) {
@@ -146,7 +149,7 @@ export default function RunEditor({
    function onFilter() {
      if (selectedFolder && selectedFolder.id) {
        try {
-          const filteredData = testCases.filter((testCase) => testCase.folderId === selectedFolder.id);
+          const filteredData = testCases.filter((testCase) => testCase.folderId.toString() === selectedFolder.id);
          setFilteredTestCases(filteredData);
        } catch (error: unknown) {
          logError('Error filtering test cases', error);
@@ -198,9 +201,6 @@ export default function RunEditor({
    setIsDirty(false);
  };

-  const baseClass = '';
-  const selectedClass = `${baseClass} bg-neutral-200 dark:bg-neutral-700`;
-
  const handleExportTypeChange = (keys: Selection) => {
    setExportType(new Set(Array.from(keys as Set<string>)));
  };
@@ -386,21 +386,49 @@ export default function RunEditor({

        <div className="mt-3 flex rounded-small border-2 dark:border-neutral-700 mb-12">
          <div className="w-3/12 border-r-1 dark:border-neutral-700">
-            <Listbox aria-label="Listbox Variants" variant="light">
-              {folders.map((folder, index) => (
-                <ListboxItem
-                  key={index}
-                  onPress={() => {
-                    setSelectedKeys(new Set([])); // reset selection
-                    setSelectedFolder(folder);
+            <Tree
+              data={treeData}
+              className="w-full"
+              indent={16}
+              rowHeight={42}
+              overscanCount={5}
+              paddingTop={20}
+              paddingBottom={20}
+              padding={20}
+              width="100%"
+              openByDefault={false}
+              disableDrop={true}
+              disableDrag={true}
+            >
+              {({ node, style }: { node: NodeApi<TreeNodeData>; style: React.CSSProperties }) => (
+                <TreeItem
+                  style={style}
+                  isSelected={selectedFolder ? node.data.id === selectedFolder.id : false}
+                  onClick={() => {
+                    setSelectedKeys(new Set([]));
+                    setSelectedFolder(node.data);
                  }}
-                  startContent={<Folder size={20} color="#F7C24E" fill="#F7C24E" />}
-                  className={selectedFolder && folder.id === selectedFolder.id ? selectedClass : baseClass}
-                >
-                  {folder.name}
-                </ListboxItem>
-              ))}
-            </Listbox>
+                  toggleButton={
+                    node.data.children && node.data.children.length > 0 ? (
+                      <Button
+                        size="sm"
+                        className="bg-transparent rounded-full h-6 w-6 min-w-4"
+                        isIconOnly
+                        onPress={() => node.toggle()}
+                      >
+                        {node.isOpen ? (
+                          <ChevronDown size={20} color="#F7C24E" />
+                        ) : (
+                          <ChevronRight size={20} color="#F7C24E" />
+                        )}
+                      </Button>
+                    ) : null
+                  }
+                  icon={<Folder size={20} color="#F7C24E" fill="#F7C24E" />}
+                  label={node.data.name}
+                />
+              )}
+            </Tree>
          </div>
          <div className="w-9/12">
            <TestCaseSelector
--- a/frontend/types/folder.ts
+++ b/frontend/types/folder.ts
@@ -25,3 +25,13 @@ export type FoldersMessages = {
  delete: string;
  areYouSure: string;
 };
+
+export type TreeNodeData = {
+  id: string;
+  name: string;
+  detail: string;
+  parentFolderId: number | null;
+  projectId: number;
+  folderData: FolderType;
+  children?: TreeNodeData[];
+};
--- a/frontend/types/project.ts
+++ b/frontend/types/project.ts
@@ -40,6 +40,7 @@ export type ProjectsMessages = {
 };

 export type ProjectMessages = {
+  toggleSidebar: string;
  home: string;
  testCases: string;
  testRuns: string;
--- a/frontend/utils/buildFolderTree.test.ts
+++ b/frontend/utils/buildFolderTree.test.ts
@@ -0,0 +1,63 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import { describe, it, expect } from 'vitest';
+import { buildFolderTree } from './buildFolderTree';
+import type { FolderType } from '@/types/folder';
+
+describe('buildFolderTree', () => {
+  it('should return an empty array when input is empty', () => {
+    expect(buildFolderTree([])).toEqual([]);
+  });
+
+  it('should build a single root node', () => {
+    const folders: FolderType[] = [
+      { id: 1, name: 'root', detail: '', projectId: 1, parentFolderId: null, createdAt: '', updatedAt: '', Cases: [] },
+    ];
+    const tree = buildFolderTree(folders);
+    expect(tree.length).toBe(1);
+    expect(tree[0].id).toBe('1');
+    expect(tree[0].children).toEqual([]);
+  });
+
+  it('should build a tree with parent and child', () => {
+    const folders: FolderType[] = [
+      { id: 1, name: 'root', detail: '', projectId: 1, parentFolderId: null, createdAt: '', updatedAt: '', Cases: [] },
+      { id: 2, name: 'child', detail: '', projectId: 1, parentFolderId: 1, createdAt: '', updatedAt: '', Cases: [] },
+    ];
+    const tree = buildFolderTree(folders);
+    expect(tree.length).toBe(1);
+    expect(tree[0].id).toBe('1');
+    expect(tree[0]!.children!.length).toBe(1);
+    expect(tree[0]!.children![0].id).toBe('2');
+  });
+
+  it('should build a tree with multiple levels', () => {
+    const folders: FolderType[] = [
+      { id: 1, name: 'root', detail: '', projectId: 1, parentFolderId: null, createdAt: '', updatedAt: '', Cases: [] },
+      { id: 2, name: 'child', detail: '', projectId: 1, parentFolderId: 1, createdAt: '', updatedAt: '', Cases: [] },
+      {
+        id: 3,
+        name: 'grandchild',
+        detail: '',
+        projectId: 1,
+        parentFolderId: 2,
+        createdAt: '',
+        updatedAt: '',
+        Cases: [],
+      },
+    ];
+    const tree = buildFolderTree(folders);
+    expect(tree.length).toBe(1);
+    expect(tree![0].children![0].children![0].id).toBe('3');
+  });
+
+  it('should build a forest if multiple roots', () => {
+    const folders: FolderType[] = [
+      { id: 1, name: 'root1', detail: '', projectId: 1, parentFolderId: null, createdAt: '', updatedAt: '', Cases: [] },
+      { id: 2, name: 'root2', detail: '', projectId: 1, parentFolderId: null, createdAt: '', updatedAt: '', Cases: [] },
+    ];
+    const tree = buildFolderTree(folders);
+    expect(tree.length).toBe(2);
+    expect(tree.map((n) => n.id)).toContain('1');
+    expect(tree.map((n) => n.id)).toContain('2');
+  });
+});
--- a/frontend/utils/buildFolderTree.ts
+++ b/frontend/utils/buildFolderTree.ts
@@ -0,0 +1,36 @@
+import { FolderType, TreeNodeData } from '@/types/folder';
+
+export function buildFolderTree(folders: FolderType[]): TreeNodeData[] {
+  const folderMap = new Map<number, TreeNodeData>();
+
+  folders.forEach((folder) => {
+    folderMap.set(folder.id, {
+      id: folder.id.toString(),
+      name: folder.name,
+      detail: folder.detail,
+      parentFolderId: folder.parentFolderId,
+      projectId: folder.projectId,
+      folderData: folder,
+      children: [],
+    });
+  });
+
+  const tree: TreeNodeData[] = [];
+
+  folders.forEach((folder) => {
+    const currentNode = folderMap.get(folder.id);
+
+    if (!currentNode) return;
+
+    if (folder.parentFolderId === null) {
+      tree.push(currentNode);
+    } else {
+      const parent = folderMap.get(folder.parentFolderId);
+      if (parent && parent.children) {
+        parent.children.push(currentNode);
+      }
+    }
+  });
+
+  return tree;
+}