index.tsx•3.42 kB
import { Platform, Pressable, View } from "react-native";
import * as Haptics from "expo-haptics";
import * as ImagePicker from "expo-image-picker";
import { router } from "expo-router";
import UpdatingBookmarkList from "@/components/bookmarks/UpdatingBookmarkList";
import { TailwindResolver } from "@/components/TailwindResolver";
import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
import PageTitle from "@/components/ui/PageTitle";
import { Text } from "@/components/ui/Text";
import { useToast } from "@/components/ui/Toast";
import useAppSettings from "@/lib/settings";
import { useUploadAsset } from "@/lib/upload";
import { MenuView } from "@react-native-menu/menu";
import { Plus, Search } from "lucide-react-native";
function HeaderRight({
openNewBookmarkModal,
}: {
openNewBookmarkModal: () => void;
}) {
const { toast } = useToast();
const { settings } = useAppSettings();
const { uploadAsset } = useUploadAsset(settings, {
onError: (e) => {
toast({ message: e, variant: "destructive" });
},
});
return (
<MenuView
onPressAction={async ({ nativeEvent }) => {
Haptics.selectionAsync();
if (nativeEvent.event === "new") {
openNewBookmarkModal();
} else if (nativeEvent.event === "library") {
const result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
quality: settings.imageQuality,
allowsMultipleSelection: false,
});
if (!result.canceled) {
uploadAsset({
type: result.assets[0].mimeType ?? "",
name: result.assets[0].fileName ?? "",
uri: result.assets[0].uri,
});
}
}
}}
actions={[
{
id: "new",
title: "New Bookmark",
image: Platform.select({
ios: "note.text",
}),
},
{
id: "library",
title: "Photo Library",
image: Platform.select({
ios: "photo",
}),
},
]}
shouldOpenOnLongPress={false}
>
<View className="my-auto px-4">
<Plus
color="rgb(0, 122, 255)"
onPress={() => Haptics.selectionAsync()}
/>
</View>
</MenuView>
);
}
export default function Home() {
return (
<CustomSafeAreaView>
<UpdatingBookmarkList
query={{ archived: false }}
header={
<View className="flex flex-col gap-1">
<View className="flex flex-row justify-between">
<PageTitle title="Home" className="pb-2" />
<HeaderRight
openNewBookmarkModal={() =>
router.push("/dashboard/bookmarks/new")
}
/>
</View>
<Pressable
className="flex flex-row items-center gap-1 rounded-lg border border-input bg-card px-4 py-1"
onPress={() => router.push("/dashboard/search")}
>
<TailwindResolver
className="text-muted"
comp={(styles) => (
<Search size={16} color={styles?.color?.toString()} />
)}
/>
<Text className="text-muted">Search</Text>
</Pressable>
</View>
}
/>
</CustomSafeAreaView>
);
}