🗑️ chore: Remove and reorganize bookmark-related components

- Deleted `bookmark-sidebar-content.tsx`, `bookmark-sidebar.tsx`, and `bookmarks-list.tsx`
- Renamed and moved `content-reader.tsx` to `bookmarks/bookmark-content.tsx`
- Updated imports in `bookmark-detail.tsx` to use new paths
- Created new `bookmarks-list-page.tsx` component
- Renamed and moved `bookmarks-sidebar-content.tsx` and `bookmarks-sidebar.tsx` to `bookmarks` directory
- Updated `index.lazy.tsx` to import from new `bookmarks-list-page.tsx`

web/src/components/content-reader.tsx → web/src/components/bookmarks/bookmark-content.tsx

@@ -4,7 +4,7 @@ import { ArticleSummary } from "@/components/article/article-summary";
 import MarkdownRenderer from "@/components/markdown-render";
 import type { Bookmark as BookmarkType } from "@/lib/apis/bookmarks";
 import type React from "react";
-import { Separator } from "./ui/separator";
+import { Separator } from "../ui/separator";
 
 interface ArticleReaderProps {
 	bookmark: BookmarkType;

web/src/components/bookmarks/bookmark-detail.tsx

@@ -2,8 +2,8 @@ import {
 	ArticleActions,
 	type FetcherType,
 } from "@/components/article/article-actions";
-import { BookmarkSidebar } from "@/components/bookmark-sidebar";
-import { ArticleReader } from "@/components/content-reader";
+import { BookmarksSidebar } from "@/components/bookmarks/bookmarks-sidebar";
+import { ArticleReader } from "@/components/bookmarks/bookmark-content";
 import {
 	AlertDialog,
 	AlertDialogAction,
@@ -104,7 +104,7 @@ export default function BookmarkDetailPage({ id }: { id: string }) {
 
 	return (
 		<SidebarProvider>
-			<BookmarkSidebar />
+			<BookmarksSidebar />
 			<SidebarInset className="overflow-auto">
 				<div className="flex flex-col h-full w-full">
 					<header className="flex h-12 shrink-0 items-center justify-between bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b">

web/src/components/bookmarks/bookmarks-list-page.tsx

@@ -0,0 +1,76 @@
+import BookmarkList from "@/components/bookmarks/bookmarks-list";
+import { BookmarksSidebar } from "@/components/bookmarks/bookmarks-sidebar";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import {
+	SidebarInset,
+	SidebarProvider,
+	SidebarTrigger,
+} from "@/components/ui/sidebar";
+import { useBookmarkMutations, useBookmarks } from "@/lib/apis/bookmarks";
+import { PlusCircle } from "lucide-react";
+import { useState } from "react";
+
+export default function BookmarksListView() {
+	const { data: bookmarks = [] } = useBookmarks();
+	const { createBookmark } = useBookmarkMutations();
+	const [open, setOpen] = useState(false);
+	const [url, setUrl] = useState("");
+
+	const handleSubmit = async (e: React.FormEvent) => {
+		e.preventDefault();
+		if (!url) return;
+		await createBookmark({ url });
+		setUrl("");
+		setOpen(false);
+	};
+
+	const AddBookmarkModal = () => {
+		return (
+			<Dialog open={open} onOpenChange={setOpen}>
+				<DialogTrigger asChild>
+					<Button variant="ghost" size="icon" className="h-7 w-7">
+						<PlusCircle className="size-6" />
+					</Button>
+				</DialogTrigger>
+				<DialogContent>
+					<DialogHeader>
+						<DialogTitle>Add New Bookmark</DialogTitle>
+					</DialogHeader>
+					<form onSubmit={handleSubmit} className="space-y-4">
+						<Input
+							placeholder="Enter URL"
+							value={url}
+							onChange={(e) => setUrl(e.target.value)}
+						/>
+						<Button type="submit">Add Bookmark</Button>
+					</form>
+				</DialogContent>
+			</Dialog>
+		);
+	};
+
+	return (
+		<SidebarProvider>
+			<BookmarksSidebar />
+			<SidebarInset>
+				<div className="flex flex-col h-full">
+					<header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+						<div className="flex items-center gap-1 px-4">
+							<SidebarTrigger className="-ml-1" />
+							<AddBookmarkModal />
+						</div>
+					</header>
+					<BookmarkList bookmarks={bookmarks} />
+				</div>
+			</SidebarInset>
+		</SidebarProvider>
+	);
+}