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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
import React, { useState } from "react";
import { View } from "react-native";
import { router } from "expo-router";
import { Button } from "@/components/ui/Button";
import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
import { Input } from "@/components/ui/Input";
import { Text } from "@/components/ui/Text";
import { useToast } from "@/components/ui/Toast";
import { useCreateBookmarkList } from "@karakeep/shared-react/hooks/lists";
type ListType = "manual" | "smart";
const NewListPage = () => {
const dismiss = () => {
router.back();
};
const { toast } = useToast();
const [text, setText] = useState("");
const [listType, setListType] = useState<ListType>("manual");
const [query, setQuery] = useState("");
const { mutate, isPending } = useCreateBookmarkList({
onSuccess: () => {
dismiss();
},
onError: (error) => {
// Extract error message from the error object
let errorMessage = "Something went wrong";
if (error.data?.zodError) {
errorMessage = Object.values(error.data.zodError.fieldErrors)
.flat()
.join("\n");
} else if (error.message) {
errorMessage = error.message;
}
toast({
message: errorMessage,
variant: "destructive",
});
},
});
const onSubmit = () => {
// Validate smart list has a query
if (listType === "smart" && !query.trim()) {
toast({
message: "Smart lists must have a search query",
variant: "destructive",
});
return;
}
mutate({
name: text,
icon: "🚀",
type: listType,
query: listType === "smart" ? query : undefined,
});
};
return (
<CustomSafeAreaView>
<View className="gap-3 px-4">
{/* List Type Selector */}
<View className="gap-2">
<Text className="text-sm text-muted-foreground">List Type</Text>
<View className="flex flex-row gap-2">
<Button
variant={listType === "manual" ? "primary" : "secondary"}
onPress={() => setListType("manual")}
className="flex-1"
>
<Text>Manual</Text>
</Button>
<Button
variant={listType === "smart" ? "primary" : "secondary"}
onPress={() => setListType("smart")}
className="flex-1"
>
<Text>Smart</Text>
</Button>
</View>
</View>
{/* List Name */}
<View className="flex flex-row items-center gap-1">
<Text className="shrink p-2">🚀</Text>
<Input
className="flex-1 bg-card"
onChangeText={setText}
placeholder="List Name"
autoFocus
autoCapitalize={"none"}
/>
</View>
{/* Smart List Query Input */}
{listType === "smart" && (
<View className="gap-2">
<Text className="text-sm text-muted-foreground">Search Query</Text>
<Input
className="bg-card"
onChangeText={setQuery}
value={query}
placeholder="e.g., #important OR list:work"
autoCapitalize={"none"}
/>
<Text className="text-xs italic text-muted-foreground">
Smart lists automatically show bookmarks matching your search
query
</Text>
</View>
)}
<Button disabled={isPending} onPress={onSubmit}>
<Text>Save</Text>
</Button>
</View>
</CustomSafeAreaView>
);
};
export default NewListPage;
|
