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
92
93
94
95
96
97
|
"use client";
import { useMemo } from "react";
import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { useTranslation } from "@/lib/i18n/client";
import { MoreHorizontal, SearchIcon, Users } from "lucide-react";
import { api } from "@karakeep/shared-react/trpc";
import { parseSearchQuery } from "@karakeep/shared/searchQueryParser";
import { ZBookmarkList } from "@karakeep/shared/types/lists";
import QueryExplainerTooltip from "../search/QueryExplainerTooltip";
import { ListOptions } from "./ListOptions";
export default function ListHeader({
initialData,
}: {
initialData: ZBookmarkList;
}) {
const { t } = useTranslation();
const router = useRouter();
const { data: list, error } = api.lists.get.useQuery(
{
listId: initialData.id,
},
{
initialData,
},
);
const parsedQuery = useMemo(() => {
if (!list.query) {
return null;
}
return parseSearchQuery(list.query);
}, [list.query]);
if (error) {
// This is usually exercised during list deletions.
if (error.data?.code == "NOT_FOUND") {
router.push("/dashboard/lists");
}
}
return (
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<span className="text-2xl">
{list.icon} {list.name}
</span>
{list.hasCollaborators && (
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Users className="size-5 text-primary" />
</TooltipTrigger>
<TooltipContent>
<p>{t("lists.shared")}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
)}
{list.description && (
<span className="text-lg text-gray-400">
{`(${list.description})`}
</span>
)}
</div>
<div className="flex items-center">
{parsedQuery && (
<QueryExplainerTooltip
header={
<div className="flex items-center justify-center gap-1">
<SearchIcon className="size-3" />
<span className="text-sm">{t("lists.smart_list")}</span>
</div>
}
parsedSearchQuery={parsedQuery}
className="size-6 stroke-foreground"
/>
)}
<ListOptions list={list}>
<Button variant="ghost">
<MoreHorizontal />
</Button>
</ListOptions>
</div>
</div>
);
}
|
