refactor: implement new UI/UX architecture with redesigned desktop and mobile layouts, CSS-in-CSS modularization, and updated components.

2026-08-29 00:53:57 -07:00
parent dfbf646332
commit cd98c0120e
47 changed files with 8039 additions and 7236 deletions
@@ -0,0 +1,74 @@
+import React from 'react';
+import { Feed, FeedEntry } from '../../types';
+import { Star, ChevronRight } from 'lucide-react';
+
+interface StarredTabViewProps {
+  entries: FeedEntry[];
+  feeds: Feed[];
+  onSelectFeedFilter: (feedId?: string) => void;
+  onOpenAllStarred: () => void;
+}
+
+export const StarredTabView: React.FC<StarredTabViewProps> = ({
+  entries,
+  feeds,
+  onSelectFeedFilter,
+  onOpenAllStarred,
+}) => {
+  const starredEntries = entries.filter((e) => e.is_starred);
+
+  // Group starred count by feed
+  const starredCountsByFeed: Record<string, number> = {};
+  starredEntries.forEach((e) => {
+    starredCountsByFeed[e.feed_id] = (starredCountsByFeed[e.feed_id] || 0) + 1;
+  });
+
+  const feedsWithStarred = feeds.filter((f) => starredCountsByFeed[f.id] > 0);
+
+  return (
+    <div style={{ flex: 1, overflowY: 'auto', padding: '1rem', paddingBottom: 'calc(var(--bottom-nav-height) + 1.5rem)' }}>
+      <div style={{ marginBottom: '1.25rem' }}>
+        <h2 style={{ fontSize: '1.2rem', fontWeight: 800, color: 'var(--text-primary)' }}>Starred Items</h2>
+        <div style={{ fontSize: '0.82rem', color: 'var(--text-muted)' }}>
+          {starredEntries.length} saved articles across {feedsWithStarred.length} sources
+        </div>
+      </div>
+
+      <div className="settings-section-card" style={{ padding: '0.5rem' }}>
+        <div
+          className="sidebar-item"
+          style={{ padding: '0.75rem 0.6rem', borderBottom: '1px solid var(--border-light)' }}
+          onClick={onOpenAllStarred}
+        >
+          <div className="sidebar-item-left">
+            <Star size={18} color="var(--star-gold)" fill="var(--star-gold)" />
+            <span style={{ fontWeight: 600, fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+              All Starred Articles
+            </span>
+          </div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '0.4rem' }}>
+            <span className="badge badge-starred">{starredEntries.length}</span>
+            <ChevronRight size={16} color="var(--text-dim)" />
+          </div>
+        </div>
+
+        {feedsWithStarred.map((feed) => (
+          <div
+            key={feed.id}
+            className="sidebar-item"
+            style={{ padding: '0.75rem 0.6rem', borderBottom: '1px solid var(--border-light)' }}
+            onClick={() => onSelectFeedFilter(feed.id)}
+          >
+            <div className="sidebar-item-left">
+              <span style={{ fontSize: '0.88rem', color: 'var(--text-primary)' }}>{feed.title}</span>
+            </div>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '0.4rem' }}>
+              <span className="badge badge-starred">{starredCountsByFeed[feed.id]}</span>
+              <ChevronRight size={16} color="var(--text-dim)" />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};