import { Command, Plus, RotateCw } from "lucide-react";

import { NavFeeds } from "@/components/nav-feeds";

	SidebarGroupLabel,

import { Label } from "@/components/ui/label";

import {

	allFeedsQuery,

	allPostsQuery,

	postsByFeedQuery,

	useEvolu,

	reset,

} from "@/lib/evolu";

import { XMLParser } from "fast-xml-parser";

interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> {

	selectedFeedId?: string | null;

	onFeedSelect?: (feedId: string | null) => void;

	selectedPostId?: string | null;

	onPostSelect?: (postId: string) => void;

}

export function AppSidebar({

	selectedFeedId = null,

	onFeedSelect = () => {},

	selectedPostId = null,

	onPostSelect = () => {},

	...props

}: AppSidebarProps) {

	const [searchQuery, setSearchQuery] = React.useState("");

	// Get posts based on selected feed

	const allPosts = useQuery(allPostsQuery);

	const feedPosts = selectedFeedId

		? useQuery(postsByFeedQuery(selectedFeedId))

		: allPosts;

	// Filter posts by search query

	const filteredPosts = React.useMemo(() => {

		if (!searchQuery) return feedPosts;

		return feedPosts.filter((post) =>

			post.title?.toLowerCase().includes(searchQuery.toLowerCase()),

		);

	}, [feedPosts, searchQuery]);

				category: categoryInput || "Uncategorized",

				insert("rssPost", {

			setUrlInput("");

			setCategoryInput("");

		<>

			<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>

				<Sidebar collapsible="icon" {...props}>

											<span className="truncate font-medium">Alcove</span>

											<span className="truncate text-xs">RSS Reader</span>

							<SidebarGroupLabel>Actions</SidebarGroupLabel>

							<SidebarGroupContent>

									<DialogTrigger asChild>

											<SidebarMenuButton>

												<Plus className="size-4" />

												<span>Add Feed</span>

											<span>Reset</span>

						<NavFeeds

							feeds={allFeeds}

							selectedFeedId={selectedFeedId}

							onFeedSelect={onFeedSelect}

						/>

				<DialogContent className="sm:max-w-[425px]">

					<DialogHeader>

						<DialogTitle>Add Feed</DialogTitle>

						<DialogDescription>

							Add a new feed with the RSS URL

						</DialogDescription>

					</DialogHeader>

					<div className="grid gap-4">

						<div className="grid gap-3">

							<Label htmlFor="url-input">URL</Label>

							<Input

								id="url-input"

								name="url"

								value={urlInput}

								onChange={(e) => setUrlInput(e.target.value)}

							/>

						</div>

						<div className="grid gap-3">

							<Label htmlFor="category-input">Category</Label>

							<Input

								id="category-input"

								name="category"

								value={categoryInput}

								onChange={(e) => setCategoryInput(e.target.value)}

								placeholder="e.g., Tech, News, Blogs"

							/>

						</div>

					</div>

					<DialogFooter>

						<DialogClose asChild>

							<Button variant="outline">Cancel</Button>

						</DialogClose>

						<Button onClick={addFeed} type="submit">

							Submit

						</Button>

					</DialogFooter>

				</DialogContent>

			</Dialog>

			{/* Posts List Panel - Separate from main sidebar */}

			<div className="bg-sidebar text-sidebar-foreground hidden md:flex h-full w-[320px] flex-col border-r">

				<div className="gap-2 border-b p-3 flex flex-col">

					<div className="flex w-full items-center justify-between">

						<div className="text-foreground text-sm font-semibold truncate">

							{selectedFeedId

								? allFeeds.find((f) => f.id === selectedFeedId)?.title ||

									"Posts"

								: "All Posts"}

						<span className="text-muted-foreground text-xs whitespace-nowrap ml-2">

							{filteredPosts.length}

						</span>

					</div>

					<Input

						placeholder="Search..."

						value={searchQuery}

						onChange={(e) => setSearchQuery(e.target.value)}

						className="h-8"

					/>

				</div>

				<div className="flex-1 overflow-y-auto">

					{filteredPosts.length === 0 ? (

						<div className="p-4 text-center text-sm text-muted-foreground">

							No posts found

						</div>

					) : (

						filteredPosts.map((post) => (

							<button

								key={post.id}

								onClick={() => onPostSelect(post.id)}

								className={`hover:bg-sidebar-accent flex flex-col items-start gap-1.5 border-b px-3 py-3 text-sm text-left w-full last:border-b-0 transition-colors ${

									selectedPostId === post.id ? "bg-sidebar-accent" : ""

								}`}

							>

								<span className="font-medium line-clamp-2 leading-snug">

									{post.title}

								</span>

								{post.author && (

									<span className="text-muted-foreground text-xs">

										{post.author}

									</span>

								)}

							</button>

						))

					)}

				</div>

			</div>

		</>

"use client";

import * as React from "react";

import { Button } from "@/components/ui/button";

import { ExternalLink } from "lucide-react";

import { useQuery } from "@evolu/react";

import { allFeedsQuery, allPostsQuery } from "@/lib/evolu";

	const [selectedFeedId, setSelectedFeedId] = React.useState<string | null>(

		null,

	);

	const [selectedPostId, setSelectedPostId] = React.useState<string | null>(

		null,

	);

	const allFeeds = useQuery(allFeedsQuery);

	const allPosts = useQuery(allPostsQuery);

	const selectedFeed = selectedFeedId

		? allFeeds.find((f) => f.id === selectedFeedId)

		: null;

	const selectedPost = selectedPostId

		? allPosts.find((p) => p.id === selectedPostId)

		: null;

		<main className="min-h-screen w-full">

						"--sidebar-width": "250px",

						"--sidebar-width-icon": "3rem",

				<AppSidebar

					selectedFeedId={selectedFeedId}

					onFeedSelect={setSelectedFeedId}

					selectedPostId={selectedPostId}

					onPostSelect={setSelectedPostId}

				/>

									<BreadcrumbLink

										href="#"

										onClick={() => {

											setSelectedFeedId(null);

											setSelectedPostId(null);

										}}

									>

										All Feeds

									</BreadcrumbLink>

								{selectedFeed && (

									<>

										<BreadcrumbSeparator className="hidden md:block" />

										<BreadcrumbItem>

											<BreadcrumbPage>{selectedFeed.title}</BreadcrumbPage>

										</BreadcrumbItem>

									</>

								)}

						{selectedPost ? (

							<div className="flex flex-col gap-6 max-w-4xl mx-auto w-full">

								<div className="flex flex-col gap-3">

									<h1 className="text-3xl font-bold tracking-tight">

										{selectedPost.title}

									</h1>

									<div className="flex items-center gap-4 text-sm text-muted-foreground">

										{selectedPost.author && (

											<span>By {selectedPost.author}</span>

										)}

										{selectedPost.link && (

											<Button variant="outline" size="sm" asChild>

												<a

													href={selectedPost.link}

													target="_blank"

													rel="noopener noreferrer"

													className="flex items-center gap-2"

												>

													<ExternalLink className="h-3 w-3" />

													Open Original

												</a>

											</Button>

										)}

									</div>

								</div>

								<Separator />

								<div className="prose prose-sm dark:prose-invert max-w-none">

									{selectedPost.content ? (

										<div

											dangerouslySetInnerHTML={{ __html: selectedPost.content }}

										/>

									) : (

										<p className="text-muted-foreground">

											No content available. Click "Open Original" to read the

											full article.

										</p>

									)}

								</div>

							</div>

						) : (

							<div className="flex flex-col items-center justify-center h-full text-center gap-4">

								<div className="text-muted-foreground">

									<p className="text-lg font-medium">No post selected</p>

									<p className="text-sm">

										Select a post from the sidebar to read it here

									</p>

								</div>

							</div>

						)}

"use client";

import { ChevronRight, Rss } from "lucide-react";

import {

	Collapsible,

	CollapsibleContent,

	CollapsibleTrigger,

} from "@/components/ui/collapsible";

import {

	SidebarGroup,

	SidebarGroupLabel,

	SidebarMenu,

	SidebarMenuButton,

	SidebarMenuItem,

	SidebarMenuSub,

	SidebarMenuSubButton,

	SidebarMenuSubItem,

} from "@/components/ui/sidebar";

interface Feed {

	id: string;

	title: string;

	category: string | null;

}

interface NavFeedsProps {

	feeds: Feed[];

	selectedFeedId?: string | null;

	onFeedSelect: (feedId: string | null) => void;

}

export function NavFeeds({

	feeds,

	selectedFeedId,

	onFeedSelect,

}: NavFeedsProps) {

	// Group feeds by category

	const feedsByCategory = feeds.reduce(

		(acc, feed) => {

			const category = feed.category || "Uncategorized";

			if (!acc[category]) {

				acc[category] = [];

			}

			acc[category].push(feed);

			return acc;

		},

		{} as Record<string, Feed[]>,

	);

	const categories = Object.keys(feedsByCategory).sort();

	return (

		<SidebarGroup>

			<SidebarGroupLabel>Feeds</SidebarGroupLabel>

			<SidebarMenu>

				{/* All Feeds option */}

				<SidebarMenuItem>

					<SidebarMenuButton

						onClick={() => onFeedSelect(null)}

						isActive={selectedFeedId === null}

					>

						<Rss className="h-4 w-4" />

						<span>All Feeds</span>

					</SidebarMenuButton>

				</SidebarMenuItem>

				{/* Categories with feeds */}

				{categories.map((category) => (

					<Collapsible

						key={category}

						asChild

						defaultOpen={true}

						className="group/collapsible"

					>

						<SidebarMenuItem>

							<CollapsibleTrigger asChild>

								<SidebarMenuButton tooltip={category}>

									<span className="font-medium">{category}</span>

									<ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />

								</SidebarMenuButton>

							</CollapsibleTrigger>

							<CollapsibleContent>

								<SidebarMenuSub>

									{feedsByCategory[category].map((feed) => (

										<SidebarMenuSubItem key={feed.id}>

											<SidebarMenuSubButton

												onClick={() => onFeedSelect(feed.id)}

												isActive={selectedFeedId === feed.id}

											>

												<span>{feed.title}</span>

											</SidebarMenuSubButton>

										</SidebarMenuSubItem>

									))}

								</SidebarMenuSub>

							</CollapsibleContent>

						</SidebarMenuItem>

					</Collapsible>

				))}

			</SidebarMenu>

		</SidebarGroup>

	);

}

export const postsByFeedQuery = (feedId: string) =>

	evolu.createQuery((db) =>

		db

			.selectFrom("rssPost")

			.selectAll()

			.where("feedId", "=", feedId as any)

			.orderBy("id", "desc"),

	);

export const allPostsQuery = evolu.createQuery((db) =>

	db.selectFrom("rssPost").selectAll().orderBy("id", "desc"),

);

export const feedsByCategoryQuery = evolu.createQuery((db) =>

	db.selectFrom("rssFeed").selectAll().orderBy("category", "asc"),

);