+
{/* Desktop sidebar */}
-
+ {isDesktopSidebarOpen && (
+
+ )}
{!isDesktopSidebarOpen && (
@@ -419,19 +109,21 @@ export default function App() {
)}
+ {/* Mobile sidebar */}
- {sidebarContent}
+
{/* Main content */}
-
-
+
+ {/* Mobile top bar */}
+
-
+
{selectedFeed?.title || selectedFeed?.url || "RuFeed"}
{loadingView ? (
-
- {Array.from({ length: 6 }).map((_, i) => (
-
-
-
-
-
- ))}
-
-
-
{feeds.length === 0 ? "Add a feed to get started" : "Select a feed"}
-
- {view.feed.icon && (
-
- )}
-
- {view.feed.title || view.feed.url}
-
-
-
-
-
- {view.items.length === 0 ? (
-
- No items found.
-
- ) : (
- view.items.map((item, i) => (
-
- ))
- )}
-
-
-
{view.feed.title}
-
-
-
-
- {view.entry.title}
-
-
- {view.entry.authors.length > 0 && (
-
- {view.entry.authors.map((author, index) => renderAuthor(author, index))}
-
- )}
- {view.entry.published && (
-
{formatPublishedDate(view.entry.published, true)}
- )}
-
- {view.entry.summary}
-
- )}
-
-
-
-
+
) : null}
{uiError && (
-
-
-
-
-
-
-
-
{uiError.title}
-
{uiError.message}
-
-
-
-
-
+
setUiError(null)} />
)}
+
+
+ {hasFeedsConfigured ? "Select a feed to read" : "Add a feed to get started"}
+
+
+
+
+
+
+
+
+
{error.title}
+
+ {error.message}
+
+
+
+
+
+
+ {Array.from({ length: 6 }).map((_, i) => (
+
+
+
+ {i < 5 && }
+
+ ))}
+
+
+
+ {feed.title || feed.url}
+
+
+
+
+
+ {entry.title}
+
+
+ {/* Meta: authors + date */}
+
+ {entry.authors.length > 0 && (
+
+ {entry.authors.map((author, index) => (
+
+ ))}
+
+ )}
+ {entry.published && (
+
+ )}
+
+ {entry.summary}
+
+ )}
+
+ {/* Article HTML content */}
+
+
+
+
+ );
+});
diff --git a/src/components/article/AuthorTag.tsx b/src/components/article/AuthorTag.tsx
new file mode 100644
index 0000000..2736867
--- /dev/null
+++ b/src/components/article/AuthorTag.tsx
@@ -0,0 +1,43 @@
+import { memo } from "react";
+import { ExternalLink } from "lucide-react";
+import { Person } from "../../bindings";
+import { getAuthorUriLabel, normalizeAuthorUri } from "../../utils";
+
+interface AuthorTagProps {
+ author: Person;
+ index: number;
+}
+
+export const AuthorTag = memo(function AuthorTag({ author, index }: AuthorTagProps) {
+ const normalizedUri = author.uri ? normalizeAuthorUri(author.uri) : "";
+
+ return (
+
+ );
+});
diff --git a/src/components/feed/FeedItemCard.tsx b/src/components/feed/FeedItemCard.tsx
new file mode 100644
index 0000000..4977403
--- /dev/null
+++ b/src/components/feed/FeedItemCard.tsx
@@ -0,0 +1,34 @@
+import { memo } from "react";
+import { FeedItem } from "../../bindings";
+import { formatPublishedDate } from "../../utils";
+
+interface FeedItemCardProps {
+ item: FeedItem;
+ onClick: (item: FeedItem) => void;
+}
+
+/**
+ * Memoized card for a single feed item in the list.
+ * Prevents re-rendering all cards when one item changes.
+ */
+export const FeedItemCard = memo(function FeedItemCard({
+ item,
+ onClick,
+}: FeedItemCardProps) {
+ return (
+
+ );
+});
diff --git a/src/components/feed/FeedItemsList.tsx b/src/components/feed/FeedItemsList.tsx
new file mode 100644
index 0000000..f3443d6
--- /dev/null
+++ b/src/components/feed/FeedItemsList.tsx
@@ -0,0 +1,84 @@
+import { memo, useCallback } from "react";
+import { ExternalLink } from "lucide-react";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Feed, FeedItem } from "../../bindings";
+import { FeedItemCard } from "./FeedItemCard";
+
+interface FeedItemsListProps {
+ feed: Feed;
+ items: FeedItem[];
+ loading: boolean;
+ onSelectItem: (feed: Feed, item: FeedItem) => void;
+}
+
+export const FeedItemsList = memo(function FeedItemsList({
+ feed,
+ items,
+ loading,
+ onSelectItem,
+}: FeedItemsListProps) {
+ const handleItemClick = useCallback(
+ (item: FeedItem) => {
+ onSelectItem(feed, item);
+ },
+ [feed, onSelectItem]
+ );
+
+ return (
+ <>
+ {/* Feed header */}
+
+ {feed.icon && (
+
+ )}
+
+ {feed.title || feed.url}
+
+
+
+
+
+ {Array.from({ length: 6 }).map((_, i) => (
+
+
+
+ {i < 5 && }
+
+ ))}
+
+ {items.map((item, i) => (
+
+ ))}
+
+ )}
+
+
+ );
+});
diff --git a/src/components/sidebar/AddFeedInput.tsx b/src/components/sidebar/AddFeedInput.tsx
new file mode 100644
index 0000000..9ce9191
--- /dev/null
+++ b/src/components/sidebar/AddFeedInput.tsx
@@ -0,0 +1,42 @@
+import { memo, useRef } from "react";
+import { Button } from "@/components/ui/button";
+
+interface AddFeedInputProps {
+ value: string;
+ adding: boolean;
+ onChange: (value: string) => void;
+ onAdd: () => void;
+}
+
+export const AddFeedInput = memo(function AddFeedInput({
+ value,
+ adding,
+ onChange,
+ onAdd,
+}: AddFeedInputProps) {
+ const inputRef = useRef(null);
+
+ return (
+
+ onChange(e.target.value)}
+ onKeyDown={(e) => e.key === "Enter" && onAdd()}
+ autoFocus
+ disabled={adding}
+ aria-label="Feed URL"
+ />
+
+
+ );
+});
diff --git a/src/components/sidebar/FeedListItem.tsx b/src/components/sidebar/FeedListItem.tsx
new file mode 100644
index 0000000..eaf8708
--- /dev/null
+++ b/src/components/sidebar/FeedListItem.tsx
@@ -0,0 +1,50 @@
+import { memo } from "react";
+import { Rss, Trash2 } from "lucide-react";
+import { Feed } from "../../bindings";
+
+interface FeedListItemProps {
+ feed: Feed;
+ isSelected: boolean;
+ onSelect: (feed: Feed) => void;
+ onRemove: (feed: Feed, e: React.MouseEvent) => void;
+}
+
+export const FeedListItem = memo(function FeedListItem({
+ feed,
+ isSelected,
+ onSelect,
+ onRemove,
+}: FeedListItemProps) {
+ return (
+
+ );
+});
diff --git a/src/components/sidebar/SidebarContent.tsx b/src/components/sidebar/SidebarContent.tsx
new file mode 100644
index 0000000..3f521fc
--- /dev/null
+++ b/src/components/sidebar/SidebarContent.tsx
@@ -0,0 +1,171 @@
+import { memo, useCallback, useState } from "react";
+import {
+ Moon,
+ PanelLeftClose,
+ PlusCircle,
+ RefreshCw,
+ Rss,
+ Sun,
+} from "lucide-react";
+import { useTheme } from "next-themes";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Feed } from "../../bindings";
+import { AddFeedInput } from "./AddFeedInput";
+import { FeedListItem } from "./FeedListItem";
+
+interface SidebarContentProps {
+ feeds: Feed[];
+ loading: boolean;
+ selectedFeedId?: string;
+ onSelectFeed: (feed: Feed) => void;
+ onRemoveFeed: (feed: Feed, e: React.MouseEvent) => void;
+ onAddFeed: (url: string) => Promise;
+ onRefresh: () => void;
+ onHideSidebar?: () => void;
+ showHideButton?: boolean;
+}
+
+export const SidebarContent = memo(function SidebarContent({
+ feeds,
+ loading,
+ selectedFeedId,
+ onSelectFeed,
+ onRemoveFeed,
+ onAddFeed,
+ onRefresh,
+ onHideSidebar,
+ showHideButton = false,
+}: SidebarContentProps) {
+ const { resolvedTheme, setTheme } = useTheme();
+ const [showAddInput, setShowAddInput] = useState(false);
+ const [addUrl, setAddUrl] = useState("");
+ const [adding, setAdding] = useState(false);
+
+ const toggleTheme = useCallback(() => {
+ setTheme(resolvedTheme === "dark" ? "light" : "dark");
+ }, [resolvedTheme, setTheme]);
+
+ const handleAdd = useCallback(async () => {
+ if (!addUrl.trim()) return;
+ setAdding(true);
+ try {
+ await onAddFeed(addUrl.trim());
+ setAddUrl("");
+ setShowAddInput(false);
+ } finally {
+ setAdding(false);
+ }
+ }, [addUrl, onAddFeed]);
+
+ return (
+
+ {/* Header */}
+
+
+
+ RuFeed
+
+
+
+
+
+
+
+
+ {showHideButton && onHideSidebar && (
+
+ )}
+
+
+
+ {/* Add feed input */}
+ {showAddInput && (
+
+ )}
+
+ {/* Feed list */}
+
+
+ {loading ? (
+ Array.from({ length: 5 }).map((_, i) => (
+
+
+
+
+ ))
+ ) : feeds.length === 0 ? (
+
+ No feeds yet. Add one above.
+
+ ) : (
+ feeds.map((feed) => (
+
+ ))
+ )}
+
+
+
+ {/* Footer */}
+
+
+ {feeds.length} feed{feeds.length !== 1 ? "s" : ""}
+
+
+