564 lines
17 KiB
TypeScript
564 lines
17 KiB
TypeScript
import React, { useState, useEffect, useCallback } from 'react';
|
|
import { api } from './services/api';
|
|
import { Category, Feed, FeedEntry, FilterState, Stats, User, ViewMode } from './types';
|
|
import { LoginView } from './components/LoginView';
|
|
import { Header } from './components/Header';
|
|
import { ThreePaneView } from './components/ThreePaneView';
|
|
import { WaterfallView } from './components/WaterfallView';
|
|
import { SettingsView } from './components/SettingsView';
|
|
import { AddFeedModal } from './components/AddFeedModal';
|
|
import { OPMLModal } from './components/OPMLModal';
|
|
import { KeyboardShortcutsModal } from './components/KeyboardShortcutsModal';
|
|
|
|
export const App: React.FC = () => {
|
|
const [currentUser, setCurrentUser] = useState<User | null>(null);
|
|
const [authLoading, setAuthLoading] = useState(true);
|
|
|
|
// App State with localStorage Persistence
|
|
const [filter, setFilter] = useState<FilterState>(() => {
|
|
const saved = localStorage.getItem('rsspipe_filter');
|
|
if (saved) {
|
|
try {
|
|
return JSON.parse(saved);
|
|
} catch {
|
|
// ignore
|
|
}
|
|
}
|
|
return { view: 'inbox', search: '' };
|
|
});
|
|
|
|
const [viewMode, setViewMode] = useState<ViewMode>(() => {
|
|
const saved = localStorage.getItem('rsspipe_view_mode') as ViewMode | null;
|
|
if (saved && (saved === 'split' || saved === 'waterfall' || saved === 'settings')) {
|
|
return saved;
|
|
}
|
|
return window.innerWidth < 768 ? 'waterfall' : 'split';
|
|
});
|
|
|
|
const [sidebarCollapsed, setSidebarCollapsed] = useState<boolean>(() => {
|
|
return localStorage.getItem('rsspipe_sidebar_collapsed') === 'true';
|
|
});
|
|
|
|
const [selectedEntryId, setSelectedEntryId] = useState<string | null>(() => {
|
|
return localStorage.getItem('rsspipe_selected_entry_id');
|
|
});
|
|
|
|
const [activeArticle, setActiveArticle] = useState<FeedEntry | null>(null);
|
|
|
|
const [categories, setCategories] = useState<Category[]>([]);
|
|
const [feeds, setFeeds] = useState<Feed[]>([]);
|
|
const [entries, setEntries] = useState<FeedEntry[]>([]);
|
|
const [stats, setStats] = useState<Stats | null>(null);
|
|
const [focusedIndex, setFocusedIndex] = useState(0);
|
|
|
|
const [isRefreshing, setIsRefreshing] = useState(false);
|
|
const [showAddFeedModal, setShowAddFeedModal] = useState(false);
|
|
const [showOPMLModal, setShowOPMLModal] = useState(false);
|
|
const [showShortcutsModal, setShowShortcutsModal] = useState(false);
|
|
|
|
// Persist state updates to localStorage
|
|
useEffect(() => {
|
|
localStorage.setItem('rsspipe_filter', JSON.stringify(filter));
|
|
}, [filter]);
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('rsspipe_view_mode', viewMode);
|
|
}, [viewMode]);
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('rsspipe_sidebar_collapsed', sidebarCollapsed ? 'true' : 'false');
|
|
}, [sidebarCollapsed]);
|
|
|
|
// Check auth session
|
|
useEffect(() => {
|
|
const checkAuth = async () => {
|
|
const token = localStorage.getItem('rsspipe_jwt');
|
|
if (!token) {
|
|
setAuthLoading(false);
|
|
return;
|
|
}
|
|
try {
|
|
const user = await api.getMe();
|
|
setCurrentUser(user);
|
|
} catch {
|
|
localStorage.removeItem('rsspipe_jwt');
|
|
} finally {
|
|
setAuthLoading(false);
|
|
}
|
|
};
|
|
checkAuth();
|
|
|
|
const handleUnauthorized = () => {
|
|
setCurrentUser(null);
|
|
};
|
|
window.addEventListener('auth:unauthorized', handleUnauthorized);
|
|
return () => window.removeEventListener('auth:unauthorized', handleUnauthorized);
|
|
}, []);
|
|
|
|
// Load sidebar data (Feeds, Categories, Stats)
|
|
const loadSidebarData = useCallback(async () => {
|
|
if (!currentUser) return;
|
|
try {
|
|
const [catList, feedList, statData] = await Promise.all([
|
|
api.listCategories(),
|
|
api.listFeeds(),
|
|
api.getStats(),
|
|
]);
|
|
setCategories(catList);
|
|
setFeeds(feedList);
|
|
setStats(statData);
|
|
} catch (err) {
|
|
console.error('Failed to load sidebar data:', err);
|
|
}
|
|
}, [currentUser]);
|
|
|
|
// Load entries matching current filter
|
|
const loadEntries = useCallback(async () => {
|
|
if (!currentUser) return;
|
|
try {
|
|
const res = await api.listEntries({
|
|
view: filter.view,
|
|
category_id: filter.categoryId,
|
|
feed_id: filter.feedId,
|
|
search: filter.search,
|
|
limit: 100,
|
|
});
|
|
setEntries(res.entries);
|
|
} catch (err) {
|
|
console.error('Failed to load entries:', err);
|
|
}
|
|
}, [currentUser, filter]);
|
|
|
|
// Initial load
|
|
useEffect(() => {
|
|
if (currentUser) {
|
|
loadSidebarData();
|
|
loadEntries();
|
|
}
|
|
}, [currentUser, loadSidebarData, loadEntries]);
|
|
|
|
// Sync focused index & active article when entries change without disrupting reading state
|
|
useEffect(() => {
|
|
if (entries.length > 0) {
|
|
if (activeArticle) {
|
|
const found = entries.find((e) => e.id === activeArticle.id);
|
|
if (found) {
|
|
setActiveArticle(found);
|
|
setFocusedIndex(entries.findIndex((e) => e.id === activeArticle.id));
|
|
return;
|
|
}
|
|
// Active article remains in reader canvas from prior feed, but list is unselected
|
|
setFocusedIndex(-1);
|
|
return;
|
|
}
|
|
|
|
if (selectedEntryId) {
|
|
const found = entries.find((e) => e.id === selectedEntryId);
|
|
if (found) {
|
|
setActiveArticle(found);
|
|
setFocusedIndex(entries.findIndex((e) => e.id === selectedEntryId));
|
|
return;
|
|
}
|
|
// If not found in current list, load directly so reading pane stays populated
|
|
api.getEntry(selectedEntryId).then((entry) => {
|
|
setActiveArticle(entry);
|
|
}).catch(() => {
|
|
// fallback to top
|
|
if (entries[0]) {
|
|
setFocusedIndex(0);
|
|
setActiveArticle(entries[0]);
|
|
setSelectedEntryId(entries[0].id);
|
|
localStorage.setItem('rsspipe_selected_entry_id', entries[0].id);
|
|
}
|
|
});
|
|
return;
|
|
}
|
|
|
|
setFocusedIndex(0);
|
|
setActiveArticle(entries[0]);
|
|
setSelectedEntryId(entries[0].id);
|
|
localStorage.setItem('rsspipe_selected_entry_id', entries[0].id);
|
|
}
|
|
}, [entries]);
|
|
|
|
const handleSelectEntry = (index: number) => {
|
|
setFocusedIndex(index);
|
|
if (entries[index]) {
|
|
setActiveArticle(entries[index]);
|
|
setSelectedEntryId(entries[index].id);
|
|
localStorage.setItem('rsspipe_selected_entry_id', entries[index].id);
|
|
}
|
|
};
|
|
|
|
// Refresh data only on initial mount or when user clicks refresh / changes filter
|
|
|
|
// Toggle Read Action with optimistic update
|
|
const handleToggleRead = async (entry: FeedEntry, e?: React.MouseEvent) => {
|
|
if (e) e.stopPropagation();
|
|
const newStatus = !entry.is_read;
|
|
|
|
// Optimistic update
|
|
setEntries((prev) =>
|
|
prev.map((item) =>
|
|
item.id === entry.id ? { ...item, is_read: newStatus } : item
|
|
)
|
|
);
|
|
if (activeArticle && activeArticle.id === entry.id) {
|
|
setActiveArticle((prev) => (prev ? { ...prev, is_read: newStatus } : prev));
|
|
}
|
|
|
|
try {
|
|
await api.updateRead(entry.id, newStatus);
|
|
loadSidebarData();
|
|
} catch (err) {
|
|
console.error('Failed to update read status:', err);
|
|
// Revert on error
|
|
setEntries((prev) =>
|
|
prev.map((item) =>
|
|
item.id === entry.id ? { ...item, is_read: !newStatus } : item
|
|
)
|
|
);
|
|
if (activeArticle && activeArticle.id === entry.id) {
|
|
setActiveArticle((prev) => (prev ? { ...prev, is_read: !newStatus } : prev));
|
|
}
|
|
}
|
|
};
|
|
|
|
// Toggle Star Action with optimistic update
|
|
const handleToggleStar = async (entry: FeedEntry, e?: React.MouseEvent) => {
|
|
if (e) e.stopPropagation();
|
|
const newStatus = !entry.is_starred;
|
|
|
|
// Optimistic update
|
|
setEntries((prev) =>
|
|
prev.map((item) =>
|
|
item.id === entry.id ? { ...item, is_starred: newStatus } : item
|
|
)
|
|
);
|
|
if (activeArticle && activeArticle.id === entry.id) {
|
|
setActiveArticle((prev) => (prev ? { ...prev, is_starred: newStatus } : prev));
|
|
}
|
|
|
|
try {
|
|
await api.updateStar(entry.id, newStatus);
|
|
loadSidebarData();
|
|
} catch (err) {
|
|
console.error('Failed to update star status:', err);
|
|
setEntries((prev) =>
|
|
prev.map((item) =>
|
|
item.id === entry.id ? { ...item, is_starred: !newStatus } : item
|
|
)
|
|
);
|
|
if (activeArticle && activeArticle.id === entry.id) {
|
|
setActiveArticle((prev) => (prev ? { ...prev, is_starred: !newStatus } : prev));
|
|
}
|
|
}
|
|
};
|
|
|
|
// Mark All Read
|
|
const handleMarkAllRead = async () => {
|
|
try {
|
|
await api.markAllRead(filter.feedId, filter.categoryId);
|
|
setEntries((prev) => prev.map((item) => ({ ...item, is_read: true })));
|
|
if (activeArticle) {
|
|
setActiveArticle((prev) => (prev ? { ...prev, is_read: true } : prev));
|
|
}
|
|
loadSidebarData();
|
|
} catch (err) {
|
|
console.error('Failed to mark all read:', err);
|
|
}
|
|
};
|
|
|
|
// Refresh All Feeds
|
|
const handleRefreshAll = async () => {
|
|
setIsRefreshing(true);
|
|
try {
|
|
await api.refreshAllFeeds();
|
|
setTimeout(() => {
|
|
loadSidebarData();
|
|
loadEntries();
|
|
setIsRefreshing(false);
|
|
}, 2500);
|
|
} catch (err) {
|
|
console.error('Failed to refresh feeds:', err);
|
|
setIsRefreshing(false);
|
|
}
|
|
};
|
|
|
|
// Global Keyboard Shortcuts
|
|
useEffect(() => {
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
// Don't intercept inside input fields
|
|
if (
|
|
document.activeElement?.tagName === 'INPUT' ||
|
|
document.activeElement?.tagName === 'TEXTAREA' ||
|
|
document.activeElement?.tagName === 'SELECT'
|
|
) {
|
|
if (e.key === 'Escape') {
|
|
(document.activeElement as HTMLElement).blur();
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (e.key === 'Escape') {
|
|
setShowAddFeedModal(false);
|
|
setShowOPMLModal(false);
|
|
setShowShortcutsModal(false);
|
|
return;
|
|
}
|
|
|
|
switch (e.key) {
|
|
case '[': // Toggle Sidebar
|
|
e.preventDefault();
|
|
setSidebarCollapsed((prev) => !prev);
|
|
break;
|
|
|
|
case 'j':
|
|
case 'J': // Next item
|
|
e.preventDefault();
|
|
if (entries.length > 0) {
|
|
setFocusedIndex((prev) => {
|
|
const next = prev < 0 ? 0 : Math.min(prev + 1, entries.length - 1);
|
|
if (entries[next]) {
|
|
setActiveArticle(entries[next]);
|
|
setSelectedEntryId(entries[next].id);
|
|
localStorage.setItem('rsspipe_selected_entry_id', entries[next].id);
|
|
}
|
|
return next;
|
|
});
|
|
}
|
|
break;
|
|
|
|
case 'k':
|
|
case 'K': // Previous item
|
|
e.preventDefault();
|
|
if (entries.length > 0) {
|
|
setFocusedIndex((prev) => {
|
|
const next = prev < 0 ? 0 : Math.max(prev - 1, 0);
|
|
if (entries[next]) {
|
|
setActiveArticle(entries[next]);
|
|
setSelectedEntryId(entries[next].id);
|
|
localStorage.setItem('rsspipe_selected_entry_id', entries[next].id);
|
|
}
|
|
return next;
|
|
});
|
|
}
|
|
break;
|
|
|
|
case 'v':
|
|
case 'V': // Open original link
|
|
{
|
|
const targetUrl = activeArticle?.url || entries[focusedIndex]?.url;
|
|
if (targetUrl) {
|
|
e.preventDefault();
|
|
window.open(targetUrl, '_blank');
|
|
}
|
|
}
|
|
break;
|
|
|
|
case 's':
|
|
case 'S': // Toggle Star
|
|
{
|
|
const target = activeArticle || entries[focusedIndex];
|
|
if (target) {
|
|
e.preventDefault();
|
|
handleToggleStar(target);
|
|
}
|
|
}
|
|
break;
|
|
|
|
case 'm':
|
|
case 'M': // Toggle Read / Unread
|
|
{
|
|
const target = activeArticle || entries[focusedIndex];
|
|
if (target) {
|
|
e.preventDefault();
|
|
handleToggleRead(target);
|
|
}
|
|
}
|
|
break;
|
|
|
|
case 'e':
|
|
case 'E': // Archive / Mark read and advance
|
|
{
|
|
const target = activeArticle || entries[focusedIndex];
|
|
if (target) {
|
|
e.preventDefault();
|
|
if (!target.is_read) {
|
|
handleToggleRead(target);
|
|
}
|
|
if (entries.length > 0) {
|
|
setFocusedIndex((prev) => {
|
|
const next = prev < 0 ? 0 : Math.min(prev + 1, entries.length - 1);
|
|
if (entries[next]) {
|
|
setActiveArticle(entries[next]);
|
|
setSelectedEntryId(entries[next].id);
|
|
localStorage.setItem('rsspipe_selected_entry_id', entries[next].id);
|
|
}
|
|
return next;
|
|
});
|
|
}
|
|
}
|
|
}
|
|
break;
|
|
|
|
case 'a':
|
|
case 'A': // Add feed modal
|
|
if (!e.shiftKey && !e.metaKey && !e.ctrlKey) {
|
|
e.preventDefault();
|
|
setShowAddFeedModal(true);
|
|
}
|
|
break;
|
|
|
|
case 'r':
|
|
case 'R': // Refresh feeds
|
|
e.preventDefault();
|
|
handleRefreshAll();
|
|
break;
|
|
|
|
case '1': // Switch to Desktop 3-Split View
|
|
e.preventDefault();
|
|
setViewMode('split');
|
|
break;
|
|
|
|
case '2': // Switch to Xiaohongshu Waterfall View
|
|
e.preventDefault();
|
|
setViewMode('waterfall');
|
|
break;
|
|
|
|
case '3': // Switch to Settings View
|
|
e.preventDefault();
|
|
setViewMode('settings');
|
|
break;
|
|
|
|
case '?': // Shortcuts modal
|
|
e.preventDefault();
|
|
setShowShortcutsModal(true);
|
|
break;
|
|
|
|
default:
|
|
if (e.shiftKey && e.key === 'A') {
|
|
e.preventDefault();
|
|
if (window.confirm('Mark all items in this view as read?')) {
|
|
handleMarkAllRead();
|
|
}
|
|
}
|
|
break;
|
|
}
|
|
};
|
|
|
|
window.addEventListener('keydown', handleKeyDown);
|
|
return () => window.removeEventListener('keydown', handleKeyDown);
|
|
}, [entries, focusedIndex, activeArticle]);
|
|
|
|
if (authLoading) {
|
|
return (
|
|
<div className="login-container">
|
|
<div style={{ color: 'var(--text-main)', fontSize: '1.1rem', fontWeight: 600 }}>
|
|
Loading RSSPipe...
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!currentUser) {
|
|
return <LoginView onLoginSuccess={(user) => setCurrentUser(user)} />;
|
|
}
|
|
|
|
return (
|
|
<div className="app-container">
|
|
{/* App Header */}
|
|
<Header
|
|
search={filter.search}
|
|
onSearchChange={(val) => setFilter((prev) => ({ ...prev, search: val }))}
|
|
viewMode={viewMode}
|
|
onViewModeChange={setViewMode}
|
|
isRefreshing={isRefreshing}
|
|
onRefreshAll={handleRefreshAll}
|
|
onOpenAddFeed={() => setShowAddFeedModal(true)}
|
|
onOpenShortcuts={() => setShowShortcutsModal(true)}
|
|
onLogout={async () => {
|
|
await api.logout();
|
|
setCurrentUser(null);
|
|
}}
|
|
sidebarCollapsed={sidebarCollapsed}
|
|
onToggleSidebar={() => setSidebarCollapsed((prev) => !prev)}
|
|
/>
|
|
|
|
{/* Main View Mode Content */}
|
|
{viewMode === 'split' ? (
|
|
<ThreePaneView
|
|
filter={filter}
|
|
onFilterChange={(newF) => setFilter((prev) => ({ ...prev, ...newF }))}
|
|
categories={categories}
|
|
feeds={feeds}
|
|
stats={stats}
|
|
entries={entries}
|
|
selectedIndex={focusedIndex}
|
|
activeArticle={activeArticle}
|
|
onSelectEntry={handleSelectEntry}
|
|
onToggleRead={handleToggleRead}
|
|
onToggleStar={handleToggleStar}
|
|
onMarkAllRead={handleMarkAllRead}
|
|
onUpdateEntry={(updated) => {
|
|
setActiveArticle(updated);
|
|
setEntries((prev) => prev.map((e) => (e.id === updated.id ? updated : e)));
|
|
}}
|
|
sidebarCollapsed={sidebarCollapsed}
|
|
/>
|
|
) : viewMode === 'waterfall' ? (
|
|
<WaterfallView
|
|
filter={filter}
|
|
onFilterChange={(newF) => setFilter((prev) => ({ ...prev, ...newF }))}
|
|
categories={categories}
|
|
entries={entries}
|
|
onToggleRead={handleToggleRead}
|
|
onToggleStar={handleToggleStar}
|
|
onUpdateEntry={(updated) => {
|
|
setActiveArticle(updated);
|
|
setEntries((prev) => prev.map((e) => (e.id === updated.id ? updated : e)));
|
|
}}
|
|
/>
|
|
) : (
|
|
<SettingsView
|
|
currentUser={currentUser}
|
|
feeds={feeds}
|
|
categories={categories}
|
|
stats={stats}
|
|
onRefreshData={() => {
|
|
loadSidebarData();
|
|
loadEntries();
|
|
}}
|
|
onOpenAddFeed={() => setShowAddFeedModal(true)}
|
|
/>
|
|
)}
|
|
|
|
{/* Modals */}
|
|
{showAddFeedModal && (
|
|
<AddFeedModal
|
|
categories={categories}
|
|
onClose={() => setShowAddFeedModal(false)}
|
|
onFeedAdded={() => {
|
|
loadSidebarData();
|
|
loadEntries();
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{showOPMLModal && (
|
|
<OPMLModal
|
|
onClose={() => setShowOPMLModal(false)}
|
|
onImportComplete={() => {
|
|
loadSidebarData();
|
|
loadEntries();
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{showShortcutsModal && (
|
|
<KeyboardShortcutsModal onClose={() => setShowShortcutsModal(false)} />
|
|
)}
|
|
</div>
|
|
);
|
|
};
|