blob: b6cadea955fd81695a8b6f58696fe62c56ad20dc (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
|
"use client";
import { useCallback } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { Button } from "@/components/ui/button";
import { CollapsibleTriggerTriangle } from "@/components/ui/collapsible";
import { MoreHorizontal, Plus } from "lucide-react";
import type { ZBookmarkList } from "@hoarder/shared/types/lists";
import { ZBookmarkListTreeNode } from "@hoarder/shared/utils/listUtils";
import { CollapsibleBookmarkLists } from "../lists/CollapsibleBookmarkLists";
import { EditListModal } from "../lists/EditListModal";
import { ListOptions } from "../lists/ListOptions";
import SidebarItem from "./SidebarItem";
export default function AllLists({
initialData,
}: {
initialData: { lists: ZBookmarkList[] };
}) {
const pathName = usePathname();
const isNodeOpen = useCallback(
(node: ZBookmarkListTreeNode) => pathName.includes(node.item.id),
[pathName],
);
return (
<ul className="max-h-full gap-y-2 overflow-auto text-sm font-medium">
<li className="flex justify-between pb-2 font-bold">
<p>Lists</p>
<EditListModal>
<Link href="#">
<Plus />
</Link>
</EditListModal>
</li>
<SidebarItem
logo={<span className="text-lg">📋</span>}
name="All Lists"
path={`/dashboard/lists`}
linkClassName="py-0.5"
/>
<SidebarItem
logo={<span className="text-lg">⭐️</span>}
name="Favourites"
path={`/dashboard/favourites`}
linkClassName="py-0.5"
/>
{
<CollapsibleBookmarkLists
initialData={initialData.lists}
isOpenFunc={isNodeOpen}
render={({ item: node, level, open }) => (
<SidebarItem
collapseButton={
node.children.length > 0 && (
<CollapsibleTriggerTriangle
className="absolute left-0 top-1/2 size-2 -translate-y-1/2"
open={open}
/>
)
}
logo={
<span className="flex">
<span className="text-lg"> {node.item.icon}</span>
</span>
}
name={node.item.name}
path={`/dashboard/lists/${node.item.id}`}
right={
<ListOptions list={node.item}>
<Button
size="none"
variant="ghost"
className="invisible group-hover:visible"
>
<MoreHorizontal className="size-4" />
</Button>
</ListOptions>
}
linkClassName="group py-0.5"
style={{ marginLeft: `${level * 1}rem` }}
/>
)}
/>
}
</ul>
);
}
|
