diff --git a/vibn-frontend/components/project/dashboard-ui.tsx b/vibn-frontend/components/project/dashboard-ui.tsx
index d3e8bf91..0dfac28a 100644
--- a/vibn-frontend/components/project/dashboard-ui.tsx
+++ b/vibn-frontend/components/project/dashboard-ui.tsx
@@ -202,25 +202,34 @@ export function SectionHeader({
style={{
display: "flex",
alignItems: "center",
- gap: 8,
+ justifyContent: "space-between",
marginBottom: 14,
+ paddingBottom: 8,
+ borderBottom: `1px solid ${THEME.borderSoft}`,
}}
>
{title}
{typeof count === "number" && (
-
- ({count})
+
+ {count}
)}
diff --git a/vibn-frontend/components/ui/file-tree.tsx b/vibn-frontend/components/ui/file-tree.tsx
new file mode 100644
index 00000000..4a6738bd
--- /dev/null
+++ b/vibn-frontend/components/ui/file-tree.tsx
@@ -0,0 +1,511 @@
+"use client";
+
+import React, {
+ createContext,
+ forwardRef,
+ useCallback,
+ useContext,
+ useEffect,
+ useState,
+} from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { FileIcon, FolderIcon, FolderOpenIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+
+type TreeViewElement = {
+ id: string;
+ name: string;
+ type?: "file" | "folder";
+ isSelectable?: boolean;
+ children?: TreeViewElement[];
+};
+
+type TreeSortMode =
+ | "default"
+ | "none"
+ | ((a: TreeViewElement, b: TreeViewElement) => number);
+
+type TreeContextProps = {
+ selectedId: string | undefined;
+ expandedItems: string[] | undefined;
+ indicator: boolean;
+ handleExpand: (id: string) => void;
+ selectItem: (id: string) => void;
+ setExpandedItems?: React.Dispatch>;
+ openIcon?: React.ReactNode;
+ closeIcon?: React.ReactNode;
+ direction: "rtl" | "ltr";
+ onExpandItem?: (id: string) => void;
+};
+
+const TreeContext = createContext(null);
+
+const useTree = () => {
+ const context = useContext(TreeContext);
+ if (!context) {
+ throw new Error("useTree must be used within a TreeProvider");
+ }
+ return context;
+};
+
+type Direction = "rtl" | "ltr" | undefined;
+
+const isFolderElement = (element: TreeViewElement) => {
+ if (element.type) {
+ return element.type === "folder";
+ }
+
+ return Array.isArray(element.children);
+};
+
+const mergeExpandedItems = (
+ currentItems: string[] | undefined,
+ nextItems: string[],
+) => [...new Set([...(currentItems ?? []), ...nextItems])];
+
+const treeCollator = new Intl.Collator("en", {
+ numeric: true,
+ sensitivity: "base",
+});
+
+const defaultTreeComparator = (a: TreeViewElement, b: TreeViewElement) => {
+ const aIsFolder = isFolderElement(a);
+ const bIsFolder = isFolderElement(b);
+
+ if (aIsFolder !== bIsFolder) {
+ return aIsFolder ? -1 : 1;
+ }
+
+ return treeCollator.compare(a.name, b.name);
+};
+
+const getTreeComparator = (sort: TreeSortMode) => {
+ if (sort === "none") {
+ return undefined;
+ }
+
+ if (sort === "default") {
+ return defaultTreeComparator;
+ }
+
+ return sort;
+};
+
+const sortTreeElements = (
+ elements: TreeViewElement[],
+ sort: TreeSortMode,
+): TreeViewElement[] => {
+ const comparator = getTreeComparator(sort);
+
+ const nextElements = elements.map((element) => {
+ if (!Array.isArray(element.children)) {
+ return element;
+ }
+
+ return {
+ ...element,
+ children: sortTreeElements(element.children, sort),
+ };
+ });
+
+ if (!comparator) {
+ return nextElements;
+ }
+
+ return [...nextElements].sort(comparator);
+};
+
+const renderTreeElements = (
+ elements: TreeViewElement[],
+ sort: TreeSortMode,
+): React.ReactNode =>
+ sortTreeElements(elements, sort).map((element) => {
+ if (isFolderElement(element)) {
+ return (
+
+ {Array.isArray(element.children)
+ ? renderTreeElements(element.children, sort)
+ : null}
+
+ );
+ }
+
+ return (
+
+ {element.name}
+
+ );
+ });
+
+type TreeViewProps = {
+ initialSelectedId?: string;
+ indicator?: boolean;
+ elements?: TreeViewElement[];
+ initialExpandedItems?: string[];
+ onExpandItem?: (id: string) => void;
+ openIcon?: React.ReactNode;
+ closeIcon?: React.ReactNode;
+ sort?: TreeSortMode;
+} & Omit<
+ React.ComponentPropsWithoutRef,
+ "defaultValue" | "onValueChange" | "type" | "value"
+>;
+
+const Tree = forwardRef(
+ (
+ {
+ className,
+ elements,
+ initialSelectedId,
+ initialExpandedItems,
+ onExpandItem,
+ children,
+ indicator = true,
+ openIcon,
+ closeIcon,
+ sort = "default",
+ dir,
+ ...props
+ },
+ ref,
+ ) => {
+ const [selectedId, setSelectedId] = useState(
+ initialSelectedId,
+ );
+ const [expandedItems, setExpandedItems] = useState(
+ initialExpandedItems,
+ );
+
+ const selectItem = useCallback((id: string) => {
+ setSelectedId(id);
+ }, []);
+
+ const handleExpand = useCallback(
+ (id: string) => {
+ setExpandedItems((prev) => {
+ if (prev?.includes(id)) {
+ return prev.filter((item) => item !== id);
+ }
+ return [...(prev ?? []), id];
+ });
+ onExpandItem?.(id);
+ },
+ [onExpandItem],
+ );
+
+ const expandSpecificTargetedElements = useCallback(
+ (elements?: TreeViewElement[], selectId?: string) => {
+ if (!elements || !selectId) return;
+ const findParent = (
+ currentElement: TreeViewElement,
+ currentPath: string[] = [],
+ ) => {
+ const isSelectable = currentElement.isSelectable ?? true;
+ const newPath = [...currentPath, currentElement.id];
+ if (currentElement.id === selectId) {
+ if (isSelectable) {
+ setExpandedItems((prev) => mergeExpandedItems(prev, newPath));
+ } else {
+ if (newPath.includes(currentElement.id)) {
+ newPath.pop();
+ setExpandedItems((prev) => mergeExpandedItems(prev, newPath));
+ }
+ }
+ return;
+ }
+ if (
+ Array.isArray(currentElement.children) &&
+ currentElement.children.length > 0
+ ) {
+ currentElement.children.forEach((child) => {
+ findParent(child, newPath);
+ });
+ }
+ };
+ elements.forEach((element) => {
+ findParent(element);
+ });
+ },
+ [],
+ );
+
+ useEffect(() => {
+ if (initialSelectedId) {
+ expandSpecificTargetedElements(elements, initialSelectedId);
+ }
+ }, [initialSelectedId, elements, expandSpecificTargetedElements]);
+
+ const direction = dir === "rtl" ? "rtl" : "ltr";
+ const treeChildren =
+ children ?? (elements ? renderTreeElements(elements, sort) : null);
+
+ return (
+
+
+
+
+ {treeChildren}
+
+
+