feat: implement scroll position restoration for mobile tabs and add double-tap home navigation to refresh feed views.
This commit is contained in:
@@ -145,3 +145,13 @@ This document records planned features, UX enhancements, and architectural exten
|
||||
- Outbound webhook action in rule engine supporting Telegram, Discord, Slack, and generic JSON HTTP POST.
|
||||
- Template engine with interpolation of article variables (`title`, `feed_title`, `url`, `published_at`, `ai_summary`, `tags`).
|
||||
- Retry mechanism with exponential backoff on delivery failure.
|
||||
|
||||
---
|
||||
|
||||
## 15. Infinite Scrolling Pagination for Desktop 3-Pane Middle List
|
||||
|
||||
- **Goal**: Seamlessly load more articles as the user scrolls down the middle pane in Desktop 3-Split view.
|
||||
- **Scope**:
|
||||
- Integrate windowed offset pagination (`limit: 50`, `offset: entries.length`) with bottom scroll threshold detection on `.desktop-articles-scroll`.
|
||||
- Display non-intrusive loading spinner at the bottom of the article list while fetching subsequent pages.
|
||||
- Maintain active selection index and scroll position during page append.
|
||||
|
||||
@@ -1,12 +1,14 @@
|
||||
# 008 - Desktop 3-Pane View Feedback & Design Specifications
|
||||
# 008 - Desktop & Mobile View Feedback & Design Specifications
|
||||
|
||||
This document comprehensively records all user feedback, UX directives, and architectural decisions made for the **Desktop 3-Pane View** in RSSPipe.
|
||||
This document comprehensively records all user feedback, UX directives, and architectural decisions made for both the **Desktop 3-Pane View** and the **Mobile Waterfall View** in RSSPipe.
|
||||
|
||||
---
|
||||
|
||||
# PART A: Desktop 3-Pane View Specifications
|
||||
|
||||
## 1. Design Aesthetics & Visual Identity
|
||||
|
||||
- **Theme Palette**: Metal-inspired, refined monochrome with sleek slate/zinc surfaces (`#09090b`, `#18181b`, `#27272a`), crisp typography (Inter/system), and subtle color accents (Gold for Starred, Emerald for Tags, Blue for Keywords/AI).
|
||||
- **Theme Palette**: Metal-inspired, refined monochrome with sleek slate/zinc surfaces (`#09090b`, `#18181b`, `#27272a`), crisp typography (Inter/system), and dedicated functional color accents (Gold for Starred, Emerald for Tags, Blue for Keywords/AI).
|
||||
- **Surface Elevation**: Clean hairline borders (`1px solid var(--border-subtle)`), eliminating heavy shadows or dated blue-gray tints.
|
||||
|
||||
---
|
||||
@@ -114,7 +116,7 @@ This document comprehensively records all user feedback, UX directives, and arch
|
||||
|
||||
### Automatic Read Triggers
|
||||
|
||||
When the reading preference is enabled (`rsspipe_auto_read_scroll`):
|
||||
When the reading preference is enabled (`auto_read`):
|
||||
|
||||
1. **Short Articles (Content ≤ 1 Page)**: Automatically marked as read after staying on the article for **3 seconds**.
|
||||
2. **Content Click**: Clicking anywhere inside the reader content canvas (excluding the toolbar) immediately marks as read.
|
||||
@@ -122,7 +124,94 @@ When the reading preference is enabled (`rsspipe_auto_read_scroll`):
|
||||
|
||||
---
|
||||
|
||||
## 6. Real-Time State Synchronization
|
||||
# PART B: Mobile Waterfall View & Reader Specifications
|
||||
|
||||
- **Sidebar Counts**: Toggling `is_read`, `is_starred`, or `share_uuid` immediately triggers a stats reload to keep sidebar counters (`inbox`, `starred`, `shared`) synchronized in real time.
|
||||
- **Persistence**: Switching feeds or categories in the sidebar updates the middle article list without abruptly reloading or clearing the active reading canvas.
|
||||
## 6. General Layout & Safe Area
|
||||
|
||||
- **iOS Bottom Bar Safe Area**:
|
||||
- The 5-button bottom navigation bar (`.ios-bottom-nav`) is elevated with dedicated safe area breathing room (`height: 72px`, `padding-bottom: calc(16px + env(safe-area-inset-bottom))`) above the iOS virtual home bar.
|
||||
- **Top Header Bar Removal**:
|
||||
- Removed top branding header, search icon, and view switcher to maximize vertical reading canvas on mobile screens.
|
||||
- **Interactive Left-Edge Gesture**:
|
||||
- Swiping from within 45px of the left screen edge provides interactive horizontal dragging (`translateX`) with smooth slide-out dismissal animation instead of an abrupt jump.
|
||||
- **Scroll Position Retention**:
|
||||
- Returning from a post waterfall feed back to the previous list (Subscriptions or Starred) preserves the exact list scroll location.
|
||||
|
||||
---
|
||||
|
||||
## 7. Home Tab (Discovery Waterfall)
|
||||
|
||||
- **Categories Bar at Top**:
|
||||
- The horizontal scrollable category pill bar sits directly at the top of the Home tab, with the `"All"` tab active by default.
|
||||
- **Floating Integrated Search Bar**:
|
||||
- Placed on the same top row as categories on the far right.
|
||||
- Tapping the search icon smoothly expands the search bar from right to left with an integrated clear button and auto-focus.
|
||||
- **Pull-to-Refresh & Discovery Reshuffle**:
|
||||
- Dragging down at the top of the waterfall feed (~1/3 screen threshold) reveals a pull indicator (*"Pull down to refresh"* ➔ *"Release to reload & shuffle"*).
|
||||
- Releasing triggers a refresh and **randomly reshuffles post cards** for an engaging discovery experience.
|
||||
- **SmartArt Post Cards (No-Image Fallback)**:
|
||||
- For articles without images, SmartArt cards render clean post description text snippets instead of raw article URLs or empty containers.
|
||||
- **Automatic Infinite Scroll**:
|
||||
- Automatically loads more articles when scrolling to the bottom of the feed.
|
||||
- **Double-Tap Home Tab**:
|
||||
- Double-tapping the 🏠 Home icon on the bottom navigation bar smoothly scrolls the waterfall feed back to the top.
|
||||
|
||||
---
|
||||
|
||||
## 8. Mobile Full-Screen Article Reader (`MobileArticleSheet`)
|
||||
|
||||
### Top Navigation Row
|
||||
|
||||
- **Single-Row Layout (`.mobile-sheet-top-nav`)**:
|
||||
- `[ < Return Button ] [ Feed Favicon ] [ Feed Title ]`
|
||||
- Eliminates clutter and keeps the feed identity anchored at the top.
|
||||
|
||||
### Article Content Layout
|
||||
|
||||
```
|
||||
1. Post Title (h1)
|
||||
2. Author · Published Date · Estimated Reading Time
|
||||
────────────────────────────────────────────────────
|
||||
3. AI Summary Box (Purple theme, copy button)
|
||||
4. Article Content Body (HTML / Full Text)
|
||||
```
|
||||
|
||||
### No Horizontal Page Scrolling
|
||||
|
||||
- Universal horizontal overflow protection (`overflow-x: hidden; width: 100%; max-width: 100vw;`).
|
||||
- Forced word wrapping (`word-break: break-word; overflow-wrap: anywhere;`) on all article canvas text, links, and code blocks to prevent unwrapped URLs from causing horizontal viewport shifts.
|
||||
|
||||
### Docked Bottom Action Toolbar (`.mobile-sheet-bottom-bar`)
|
||||
|
||||
- **Bottom-Left Corner (Action Icons)**:
|
||||
- ⭐ **Star**: Toggles between empty star and filled **Yellow/Gold** (`#d97706`).
|
||||
- 🔗 **Share**: Toggles public share link, copies URL to clipboard with confirmation banner, and highlights in **Electric Blue** (`#2563eb`).
|
||||
- 🎧 **Audio / TTS**: Shows in **Emerald Green** (`#059669`) with live play/pause control when narration is available.
|
||||
- ↗️ **Original Link**: Opens original web link in a new browser tab.
|
||||
- **Bottom-Right Corner (Popup Split Action)**:
|
||||
- Split button (`Get Full Text` / `Original`) with an upward chevron that opens a **Dropup Popup Menu**:
|
||||
- 🔮 **Generate AI Summary**: **Purple** (`#7c3aed`).
|
||||
- 🎙️ **Generate Audio (TTS)**: **Emerald Green** (`#059669`).
|
||||
|
||||
---
|
||||
|
||||
## 9. Harmonized Color Identity System
|
||||
|
||||
| Feature | Primary Hex Code | CSS Variable / Token | State Appearance |
|
||||
| :--- | :--- | :--- | :--- |
|
||||
| **Star / Favorited** | `#d97706` (Amber/Gold) | `--badge-star` | Solid filled star |
|
||||
| **Public Share** | `#2563eb` (Electric Blue) | `--badge-shared` | Solid blue icon + soft tint background |
|
||||
| **AI Summary** | `#7c3aed` (Royal Purple) | `--badge-ai` | Purple icon, border & chip |
|
||||
| **Audio / TTS** | `#059669` (Emerald Green) | `--badge-tts` | Emerald icon + soft green pill |
|
||||
| **Keywords** | `#0284c7` (Sky Blue) | `--badge-keyword` | Sky blue badge chip |
|
||||
| **Tags** | `#10b981` (Emerald Green) | `--badge-tag` | Emerald `#tag` chip |
|
||||
|
||||
---
|
||||
|
||||
## 10. Cross-Device Settings & Real-Time Sync
|
||||
|
||||
- **Server-Side Persistence**:
|
||||
- All user reading preferences (`auto_read`, `view_preference`, theme) are stored in the SQLite `users.preferences` column via `GET/PUT /api/user/preferences`.
|
||||
- **Multi-Session Synchronization**:
|
||||
- Preferences automatically sync with `localStorage` on session start.
|
||||
- Added window `focus` and tab `visibilitychange` listeners in `App.tsx` and `SettingsView.tsx`, ensuring setting changes made on mobile immediately reflect on desktop when switching windows.
|
||||
|
||||
@@ -134,6 +134,50 @@ func (h *Handler) UpdatePassword(w http.ResponseWriter, r *http.Request) {
|
||||
h.writeJSON(w, http.StatusOK, map[string]string{"message": "password updated successfully"})
|
||||
}
|
||||
|
||||
// User Preferences Handlers
|
||||
func (h *Handler) GetUserPreferences(w http.ResponseWriter, r *http.Request) {
|
||||
claims, ok := r.Context().Value(auth.UserContextKey).(*auth.Claims)
|
||||
if !ok {
|
||||
h.writeError(w, http.StatusUnauthorized, "unauthorized")
|
||||
return
|
||||
}
|
||||
user, err := h.db.GetUserByUsername(claims.Username)
|
||||
if err != nil {
|
||||
h.writeError(w, http.StatusNotFound, "user not found")
|
||||
return
|
||||
}
|
||||
h.writeJSON(w, http.StatusOK, user.Preferences)
|
||||
}
|
||||
|
||||
func (h *Handler) UpdateUserPreferences(w http.ResponseWriter, r *http.Request) {
|
||||
claims, ok := r.Context().Value(auth.UserContextKey).(*auth.Claims)
|
||||
if !ok {
|
||||
h.writeError(w, http.StatusUnauthorized, "unauthorized")
|
||||
return
|
||||
}
|
||||
user, err := h.db.GetUserByUsername(claims.Username)
|
||||
if err != nil {
|
||||
h.writeError(w, http.StatusNotFound, "user not found")
|
||||
return
|
||||
}
|
||||
var newPrefs map[string]interface{}
|
||||
if err := json.NewDecoder(r.Body).Decode(&newPrefs); err != nil {
|
||||
h.writeError(w, http.StatusBadRequest, "invalid request payload")
|
||||
return
|
||||
}
|
||||
if user.Preferences == nil {
|
||||
user.Preferences = make(map[string]interface{})
|
||||
}
|
||||
for k, v := range newPrefs {
|
||||
user.Preferences[k] = v
|
||||
}
|
||||
if err := h.db.UpdateUserPreferences(user.ID, user.Preferences); err != nil {
|
||||
h.writeError(w, http.StatusInternalServerError, err.Error())
|
||||
return
|
||||
}
|
||||
h.writeJSON(w, http.StatusOK, user.Preferences)
|
||||
}
|
||||
|
||||
// Stats Handler
|
||||
func (h *Handler) GetStats(w http.ResponseWriter, r *http.Request) {
|
||||
stats, err := h.db.GetStats()
|
||||
|
||||
@@ -45,6 +45,8 @@ func NewRouter(h *Handler, authService *auth.AuthService, staticDir string) http
|
||||
|
||||
r.Get("/auth/me", h.GetMe)
|
||||
r.Put("/auth/password", h.UpdatePassword)
|
||||
r.Get("/user/preferences", h.GetUserPreferences)
|
||||
r.Put("/user/preferences", h.UpdateUserPreferences)
|
||||
r.Get("/stats", h.GetStats)
|
||||
|
||||
// Categories
|
||||
|
||||
+28
-4
@@ -168,6 +168,9 @@ func (d *DB) migrate() error {
|
||||
WHERE (icon_url IS NULL OR icon_url = '') AND site_url IS NOT NULL AND site_url != ''
|
||||
`)
|
||||
|
||||
// Migration for preferences column on users table if older DB exists
|
||||
_, _ = d.Exec("ALTER TABLE users ADD COLUMN preferences TEXT DEFAULT '{}'")
|
||||
|
||||
// Migration for rules table schema if older table exists
|
||||
var testCol string
|
||||
err := d.QueryRow("SELECT trigger FROM rules LIMIT 1").Scan(&testCol)
|
||||
@@ -199,13 +202,20 @@ func (d *DB) CountUsers() (int, error) {
|
||||
|
||||
func (d *DB) GetUserByUsername(username string) (*models.User, error) {
|
||||
var u models.User
|
||||
var prefsRaw sql.NullString
|
||||
err := d.QueryRow(
|
||||
"SELECT id, username, password_hash, created_at, updated_at FROM users WHERE username = ?",
|
||||
"SELECT id, username, password_hash, preferences, created_at, updated_at FROM users WHERE username = ?",
|
||||
username,
|
||||
).Scan(&u.ID, &u.Username, &u.PasswordHash, &u.CreatedAt, &u.UpdatedAt)
|
||||
).Scan(&u.ID, &u.Username, &u.PasswordHash, &prefsRaw, &u.CreatedAt, &u.UpdatedAt)
|
||||
if err != nil {
|
||||
return nil, err
|
||||
}
|
||||
if prefsRaw.Valid && prefsRaw.String != "" {
|
||||
_ = json.Unmarshal([]byte(prefsRaw.String), &u.Preferences)
|
||||
}
|
||||
if u.Preferences == nil {
|
||||
u.Preferences = make(map[string]interface{})
|
||||
}
|
||||
return &u, nil
|
||||
}
|
||||
|
||||
@@ -215,12 +225,13 @@ func (d *DB) CreateUser(username, passwordHash string) (*models.User, error) {
|
||||
ID: uuid.New().String(),
|
||||
Username: username,
|
||||
PasswordHash: passwordHash,
|
||||
Preferences: make(map[string]interface{}),
|
||||
CreatedAt: now,
|
||||
UpdatedAt: now,
|
||||
}
|
||||
_, err := d.Exec(
|
||||
"INSERT INTO users (id, username, password_hash, created_at, updated_at) VALUES (?, ?, ?, ?, ?)",
|
||||
u.ID, u.Username, u.PasswordHash, u.CreatedAt, u.UpdatedAt,
|
||||
"INSERT INTO users (id, username, password_hash, preferences, created_at, updated_at) VALUES (?, ?, ?, ?, ?, ?)",
|
||||
u.ID, u.Username, u.PasswordHash, "{}", u.CreatedAt, u.UpdatedAt,
|
||||
)
|
||||
if err != nil {
|
||||
return nil, err
|
||||
@@ -237,6 +248,19 @@ func (d *DB) UpdateUserPassword(userID, passwordHash string) error {
|
||||
return err
|
||||
}
|
||||
|
||||
func (d *DB) UpdateUserPreferences(userID string, prefs map[string]interface{}) error {
|
||||
raw, err := json.Marshal(prefs)
|
||||
if err != nil {
|
||||
return err
|
||||
}
|
||||
now := time.Now().UTC()
|
||||
_, err = d.Exec(
|
||||
"UPDATE users SET preferences = ?, updated_at = ? WHERE id = ?",
|
||||
string(raw), now, userID,
|
||||
)
|
||||
return err
|
||||
}
|
||||
|
||||
// Category operations
|
||||
func (d *DB) ListCategories() ([]models.Category, error) {
|
||||
query := `
|
||||
|
||||
@@ -6,11 +6,12 @@ import (
|
||||
|
||||
// User represents the single admin user
|
||||
type User struct {
|
||||
ID string `json:"id"`
|
||||
Username string `json:"username"`
|
||||
PasswordHash string `json:"-"`
|
||||
CreatedAt time.Time `json:"created_at"`
|
||||
UpdatedAt time.Time `json:"updated_at"`
|
||||
ID string `json:"id"`
|
||||
Username string `json:"username"`
|
||||
PasswordHash string `json:"-"`
|
||||
Preferences map[string]interface{} `json:"preferences,omitempty"`
|
||||
CreatedAt time.Time `json:"created_at"`
|
||||
UpdatedAt time.Time `json:"updated_at"`
|
||||
}
|
||||
|
||||
// SearchHistoryItem tracks user search history for autocomplete
|
||||
|
||||
+73
-2
@@ -113,6 +113,15 @@ export const App: React.FC = () => {
|
||||
try {
|
||||
const user = await api.getMe();
|
||||
setCurrentUser(user);
|
||||
if (user.preferences) {
|
||||
if (user.preferences.auto_read !== undefined) {
|
||||
localStorage.setItem('rsspipe_auto_read_scroll', user.preferences.auto_read ? 'true' : 'false');
|
||||
}
|
||||
if (user.preferences.view_preference) {
|
||||
setViewPreference(user.preferences.view_preference);
|
||||
localStorage.setItem('rsspipe_view_preference', user.preferences.view_preference);
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
localStorage.removeItem('rsspipe_jwt');
|
||||
} finally {
|
||||
@@ -125,7 +134,37 @@ export const App: React.FC = () => {
|
||||
setCurrentUser(null);
|
||||
};
|
||||
window.addEventListener('auth:unauthorized', handleUnauthorized);
|
||||
return () => window.removeEventListener('auth:unauthorized', handleUnauthorized);
|
||||
|
||||
const syncPreferences = async () => {
|
||||
const token = localStorage.getItem('rsspipe_jwt');
|
||||
if (!token) return;
|
||||
try {
|
||||
const prefs = await api.getUserPreferences();
|
||||
if (prefs) {
|
||||
if (prefs.auto_read !== undefined) {
|
||||
localStorage.setItem('rsspipe_auto_read_scroll', prefs.auto_read ? 'true' : 'false');
|
||||
}
|
||||
if (prefs.view_preference) {
|
||||
setViewPreference(prefs.view_preference);
|
||||
localStorage.setItem('rsspipe_view_preference', prefs.view_preference);
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('focus', syncPreferences);
|
||||
const handleVisibilityChange = () => {
|
||||
if (document.visibilityState === 'visible') syncPreferences();
|
||||
};
|
||||
document.addEventListener('visibilitychange', handleVisibilityChange);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('auth:unauthorized', handleUnauthorized);
|
||||
window.removeEventListener('focus', syncPreferences);
|
||||
document.removeEventListener('visibilitychange', handleVisibilityChange);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Load sidebar data (Categories, Feeds, Stats)
|
||||
@@ -145,6 +184,9 @@ export const App: React.FC = () => {
|
||||
}
|
||||
}, [currentUser]);
|
||||
|
||||
const [totalEntries, setTotalEntries] = useState(0);
|
||||
const [isLoadingMore, setIsLoadingMore] = useState(false);
|
||||
|
||||
// Load entries matching filter
|
||||
const loadEntries = useCallback(async () => {
|
||||
if (!currentUser) return;
|
||||
@@ -154,9 +196,11 @@ export const App: React.FC = () => {
|
||||
feed_id: filter.feedId,
|
||||
category_id: filter.categoryId,
|
||||
search: filter.search || undefined,
|
||||
limit: 200,
|
||||
limit: 50,
|
||||
offset: 0,
|
||||
});
|
||||
setEntries(res.entries || []);
|
||||
setTotalEntries(res.total || 0);
|
||||
|
||||
if (res.entries && res.entries.length > 0) {
|
||||
setSelectedEntryId((prev) => {
|
||||
@@ -173,6 +217,30 @@ export const App: React.FC = () => {
|
||||
}
|
||||
}, [currentUser, filter]);
|
||||
|
||||
// Load more entries for infinite scrolling
|
||||
const handleLoadMore = async () => {
|
||||
if (isLoadingMore || entries.length >= totalEntries || !currentUser) return;
|
||||
setIsLoadingMore(true);
|
||||
try {
|
||||
const res = await api.listEntries({
|
||||
view: filter.view,
|
||||
feed_id: filter.feedId,
|
||||
category_id: filter.categoryId,
|
||||
search: filter.search || undefined,
|
||||
limit: 50,
|
||||
offset: entries.length,
|
||||
});
|
||||
if (res.entries && res.entries.length > 0) {
|
||||
setEntries((prev) => [...prev, ...res.entries]);
|
||||
}
|
||||
setTotalEntries(res.total || 0);
|
||||
} catch (err) {
|
||||
console.error('Failed to load more entries:', err);
|
||||
} finally {
|
||||
setIsLoadingMore(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (currentUser) {
|
||||
loadSidebarData();
|
||||
@@ -464,6 +532,9 @@ export const App: React.FC = () => {
|
||||
viewPreference={viewPreference}
|
||||
onChangeViewPreference={handleChangeViewPreference}
|
||||
onSwitchToDesktop={() => setViewMode('split')}
|
||||
hasMore={entries.length < totalEntries}
|
||||
isLoadingMore={isLoadingMore}
|
||||
onLoadMore={handleLoadMore}
|
||||
/>
|
||||
) : (
|
||||
<SettingsView
|
||||
|
||||
@@ -1,12 +1,15 @@
|
||||
import React from 'react';
|
||||
import React, { useRef, useEffect } from 'react';
|
||||
import { Category, Feed } from '../../types';
|
||||
import { Rss, Folder, Plus, ChevronRight } from 'lucide-react';
|
||||
import { Folder, Plus, ChevronRight } from 'lucide-react';
|
||||
import { FeedIcon } from '../desktop/DesktopSidebar';
|
||||
|
||||
interface FeedsTabViewProps {
|
||||
categories: Category[];
|
||||
feeds: Feed[];
|
||||
onSelectFeed: (feed: Feed) => void;
|
||||
onOpenAddFeed: () => void;
|
||||
savedScrollTop?: number;
|
||||
onScrollPosChange?: (pos: number) => void;
|
||||
}
|
||||
|
||||
export const FeedsTabView: React.FC<FeedsTabViewProps> = ({
|
||||
@@ -14,7 +17,25 @@ export const FeedsTabView: React.FC<FeedsTabViewProps> = ({
|
||||
feeds,
|
||||
onSelectFeed,
|
||||
onOpenAddFeed,
|
||||
savedScrollTop = 0,
|
||||
onScrollPosChange,
|
||||
}) => {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Restore scroll position once on initial mount
|
||||
useEffect(() => {
|
||||
if (containerRef.current && savedScrollTop > 0) {
|
||||
containerRef.current.scrollTop = savedScrollTop;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleFeedClick = (feed: Feed) => {
|
||||
if (containerRef.current && onScrollPosChange) {
|
||||
onScrollPosChange(containerRef.current.scrollTop);
|
||||
}
|
||||
onSelectFeed(feed);
|
||||
};
|
||||
|
||||
const feedsByCategory = categories.map((cat) => ({
|
||||
category: cat,
|
||||
feeds: feeds.filter((f) => f.category_id === cat.id),
|
||||
@@ -23,7 +44,16 @@ export const FeedsTabView: React.FC<FeedsTabViewProps> = ({
|
||||
const uncategorizedFeeds = feeds.filter((f) => !f.category_id);
|
||||
|
||||
return (
|
||||
<div style={{ flex: 1, overflowY: 'auto', padding: '1rem', paddingBottom: 'calc(var(--bottom-nav-height) + 1.5rem)' }}>
|
||||
<div
|
||||
ref={containerRef}
|
||||
style={{
|
||||
flex: 1,
|
||||
overflowY: 'auto',
|
||||
WebkitOverflowScrolling: 'touch',
|
||||
padding: '1rem',
|
||||
paddingBottom: 'calc(var(--bottom-nav-height) + 1.5rem)',
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '1rem' }}>
|
||||
<h2 style={{ fontSize: '1.2rem', fontWeight: 800, color: 'var(--text-primary)' }}>Subscriptions</h2>
|
||||
<button
|
||||
@@ -52,10 +82,10 @@ export const FeedsTabView: React.FC<FeedsTabViewProps> = ({
|
||||
key={feed.id}
|
||||
className="sidebar-item"
|
||||
style={{ padding: '0.65rem 0.5rem' }}
|
||||
onClick={() => onSelectFeed(feed)}
|
||||
onClick={() => handleFeedClick(feed)}
|
||||
>
|
||||
<div className="sidebar-item-left">
|
||||
<Rss size={15} className="sidebar-item-icon" />
|
||||
<FeedIcon feed={feed} size={16} />
|
||||
<span style={{ fontSize: '0.88rem', color: 'var(--text-primary)' }}>{feed.title}</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.4rem' }}>
|
||||
@@ -84,10 +114,10 @@ export const FeedsTabView: React.FC<FeedsTabViewProps> = ({
|
||||
key={feed.id}
|
||||
className="sidebar-item"
|
||||
style={{ padding: '0.65rem 0.5rem' }}
|
||||
onClick={() => onSelectFeed(feed)}
|
||||
onClick={() => handleFeedClick(feed)}
|
||||
>
|
||||
<div className="sidebar-item-left">
|
||||
<Rss size={15} className="sidebar-item-icon" />
|
||||
<FeedIcon feed={feed} size={16} />
|
||||
<span style={{ fontSize: '0.88rem', color: 'var(--text-primary)' }}>{feed.title}</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.4rem' }}>
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
import React, { useState, useRef } from 'react';
|
||||
import { FeedEntry } from '../../types';
|
||||
import { formatRelativeDate, estimateReadingTime, renderMarkdownText } from '../../utils';
|
||||
import React, { useState, useRef, useEffect } from 'react';
|
||||
import { Feed, FeedEntry } from '../../types';
|
||||
import { api } from '../../services/api';
|
||||
import { formatDateTime, estimateReadingTime, renderMarkdownText } from '../../utils';
|
||||
import { FeedIcon } from '../desktop/DesktopSidebar';
|
||||
import {
|
||||
ChevronLeft,
|
||||
Star,
|
||||
@@ -9,13 +11,23 @@ import {
|
||||
Sparkles,
|
||||
Volume2,
|
||||
Pause,
|
||||
ChevronUp,
|
||||
FileText,
|
||||
Zap,
|
||||
Loader2,
|
||||
AlertCircle,
|
||||
X,
|
||||
Copy,
|
||||
CheckCircle2,
|
||||
} from 'lucide-react';
|
||||
|
||||
interface MobileArticleSheetProps {
|
||||
entry: FeedEntry;
|
||||
feeds?: Feed[];
|
||||
onClose: () => void;
|
||||
onToggleStar: (entry: FeedEntry) => void;
|
||||
onToggleRead?: (entry: FeedEntry) => void;
|
||||
onUpdateEntry?: (entry: FeedEntry) => void;
|
||||
onPlayAudio?: (entry: FeedEntry, streamUrl: string) => void;
|
||||
currentAudioUrl?: string | null;
|
||||
isPlayingAudio?: boolean;
|
||||
@@ -23,33 +35,101 @@ interface MobileArticleSheetProps {
|
||||
|
||||
export const MobileArticleSheet: React.FC<MobileArticleSheetProps> = ({
|
||||
entry,
|
||||
feeds = [],
|
||||
onClose,
|
||||
onToggleStar,
|
||||
onUpdateEntry,
|
||||
onPlayAudio,
|
||||
currentAudioUrl,
|
||||
isPlayingAudio,
|
||||
}) => {
|
||||
const [selectedVariantKey, setSelectedVariantKey] = useState<string>('original');
|
||||
const [isScraping, setIsScraping] = useState(false);
|
||||
const [isGeneratingAI, setIsGeneratingAI] = useState(false);
|
||||
const [aiError, setAiError] = useState<string | null>(null);
|
||||
const [isSharing, setIsSharing] = useState(false);
|
||||
const [showActionDropdown, setShowActionDropdown] = useState(false);
|
||||
const [copiedSummary, setCopiedSummary] = useState(false);
|
||||
const [shareCopiedNotice, setShareCopiedNotice] = useState(false);
|
||||
|
||||
// Left-Edge Interactive Swipe Gesture
|
||||
const [touchStartX, setTouchStartX] = useState<number | null>(null);
|
||||
const [touchDeltaX, setTouchDeltaX] = useState<number>(0);
|
||||
const [isFromLeftEdge, setIsFromLeftEdge] = useState(false);
|
||||
const sheetRef = useRef<HTMLDivElement>(null);
|
||||
const [isEdgeSwiping, setIsEdgeSwiping] = useState(false);
|
||||
const [isDismissing, setIsDismissing] = useState(false);
|
||||
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
const feed = feeds.find((f) => f.id === entry.feed_id);
|
||||
|
||||
// Sync variant state on entry change
|
||||
useEffect(() => {
|
||||
setAiError(null);
|
||||
if (entry.variants?.['readability_full_text']) {
|
||||
setSelectedVariantKey('readability_full_text');
|
||||
} else {
|
||||
setSelectedVariantKey('original');
|
||||
}
|
||||
}, [entry.id]);
|
||||
|
||||
// Click outside to close dropdown
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (e: MouseEvent) => {
|
||||
if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
|
||||
setShowActionDropdown(false);
|
||||
}
|
||||
};
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||
}, []);
|
||||
|
||||
// Safe clipboard helper
|
||||
const copyToClipboard = (text: string) => {
|
||||
try {
|
||||
if (navigator.clipboard && navigator.clipboard.writeText) {
|
||||
navigator.clipboard.writeText(text).catch(() => {
|
||||
fallbackCopy(text);
|
||||
});
|
||||
} else {
|
||||
fallbackCopy(text);
|
||||
}
|
||||
} catch {
|
||||
fallbackCopy(text);
|
||||
}
|
||||
};
|
||||
|
||||
const fallbackCopy = (text: string) => {
|
||||
try {
|
||||
const el = document.createElement('textarea');
|
||||
el.value = text;
|
||||
el.setAttribute('readonly', '');
|
||||
el.style.position = 'absolute';
|
||||
el.style.left = '-9999px';
|
||||
document.body.appendChild(el);
|
||||
el.select();
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(el);
|
||||
} catch (err) {
|
||||
console.warn('Clipboard fallback copy error:', err);
|
||||
}
|
||||
};
|
||||
|
||||
// Left-edge swipe to dismiss gesture handlers
|
||||
const handleTouchStart = (e: React.TouchEvent) => {
|
||||
if (e.touches.length !== 1) return;
|
||||
const startX = e.touches[0].clientX;
|
||||
// Only activate if swipe originates from within 45px of the left edge
|
||||
if (startX <= 45) {
|
||||
setIsFromLeftEdge(true);
|
||||
setIsEdgeSwiping(true);
|
||||
setTouchStartX(startX);
|
||||
setTouchDeltaX(0);
|
||||
} else {
|
||||
setIsFromLeftEdge(false);
|
||||
setIsEdgeSwiping(false);
|
||||
setTouchStartX(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleTouchMove = (e: React.TouchEvent) => {
|
||||
if (!isFromLeftEdge || touchStartX === null) return;
|
||||
if (!isEdgeSwiping || touchStartX === null) return;
|
||||
const currentX = e.touches[0].clientX;
|
||||
const delta = currentX - touchStartX;
|
||||
if (delta > 0) {
|
||||
@@ -58,142 +138,247 @@ export const MobileArticleSheet: React.FC<MobileArticleSheetProps> = ({
|
||||
};
|
||||
|
||||
const handleTouchEnd = () => {
|
||||
if (isFromLeftEdge && touchDeltaX > 90) {
|
||||
onClose();
|
||||
if (isEdgeSwiping && touchDeltaX > 80) {
|
||||
setIsDismissing(true);
|
||||
setTimeout(() => {
|
||||
onClose();
|
||||
}, 200);
|
||||
} else {
|
||||
setTouchDeltaX(0);
|
||||
}
|
||||
setIsFromLeftEdge(false);
|
||||
setIsEdgeSwiping(false);
|
||||
setTouchStartX(null);
|
||||
};
|
||||
|
||||
const handleShare = async () => {
|
||||
if (navigator.share && entry.url) {
|
||||
try {
|
||||
await navigator.share({
|
||||
title: entry.title,
|
||||
url: entry.url,
|
||||
});
|
||||
} catch {
|
||||
// ignore share cancellation
|
||||
// Full Text Scraper
|
||||
const handleScrapeFullText = async () => {
|
||||
if (isScraping) return;
|
||||
setIsScraping(true);
|
||||
setAiError(null);
|
||||
try {
|
||||
const updated = await api.scrapeEntry(entry.id);
|
||||
onUpdateEntry?.(updated);
|
||||
setSelectedVariantKey('readability_full_text');
|
||||
} catch (err: any) {
|
||||
setAiError(`Full text extraction failed: ${err?.message || err}`);
|
||||
} finally {
|
||||
setIsScraping(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Primary Action Button (Toggle Full Text vs Original)
|
||||
const handlePrimaryActionClick = () => {
|
||||
if (!entry.variants?.['readability_full_text']?.text_value) {
|
||||
handleScrapeFullText();
|
||||
} else if (selectedVariantKey === 'readability_full_text') {
|
||||
setSelectedVariantKey('original');
|
||||
} else {
|
||||
setSelectedVariantKey('readability_full_text');
|
||||
}
|
||||
};
|
||||
|
||||
// Generate AI Summary
|
||||
const handleGenerateAISummary = async () => {
|
||||
setShowActionDropdown(false);
|
||||
if (isGeneratingAI) return;
|
||||
setIsGeneratingAI(true);
|
||||
setAiError(null);
|
||||
try {
|
||||
const updated = await api.generateAISummary(entry.id);
|
||||
onUpdateEntry?.(updated);
|
||||
} catch (err: any) {
|
||||
setAiError(err?.message || 'AI generation failed. Please check AI settings.');
|
||||
} finally {
|
||||
setIsGeneratingAI(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Toggle Public Share
|
||||
const handleToggleShare = async () => {
|
||||
if (isSharing || !entry?.id) return;
|
||||
setIsSharing(true);
|
||||
setAiError(null);
|
||||
try {
|
||||
const res = await api.toggleShare(entry.id);
|
||||
if (res && res.entry) {
|
||||
onUpdateEntry?.(res.entry);
|
||||
}
|
||||
} else if (entry.url) {
|
||||
navigator.clipboard.writeText(entry.url);
|
||||
alert('Link copied to clipboard!');
|
||||
if (res && res.shared && res.share_uuid) {
|
||||
const shareUrl = `${window.location.origin}/share/${res.share_uuid}`;
|
||||
copyToClipboard(shareUrl);
|
||||
setShareCopiedNotice(true);
|
||||
setTimeout(() => setShareCopiedNotice(false), 2500);
|
||||
}
|
||||
} catch (err: any) {
|
||||
setAiError(`Sharing failed: ${err?.message || err}`);
|
||||
} finally {
|
||||
setIsSharing(false);
|
||||
}
|
||||
};
|
||||
|
||||
const variants = entry.variants || {};
|
||||
const hasAISummary = Boolean(variants['ai_summary']);
|
||||
const hasReadability = Boolean(variants['readability_full_text']?.text_value);
|
||||
const hasAISummary = Boolean(variants['ai_summary']?.text_value);
|
||||
const ttsVariant = variants['tts'] || variants['podcast_tts'];
|
||||
const isShared = Boolean(entry.share_uuid);
|
||||
|
||||
const isCurrentAudioActive = Boolean(
|
||||
ttsVariant?.stream_url && currentAudioUrl === ttsVariant.stream_url && isPlayingAudio
|
||||
);
|
||||
|
||||
const getArticleBody = () => {
|
||||
if (variants['readability_full_text']?.text_value) {
|
||||
if (selectedVariantKey === 'readability_full_text' && variants['readability_full_text']?.text_value) {
|
||||
return variants['readability_full_text'].text_value;
|
||||
}
|
||||
return entry.content || entry.raw_content || '';
|
||||
};
|
||||
|
||||
const handleCopySummary = () => {
|
||||
if (!variants['ai_summary']?.text_value) return;
|
||||
copyToClipboard(variants['ai_summary'].text_value);
|
||||
setCopiedSummary(true);
|
||||
setTimeout(() => setCopiedSummary(false), 2000);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={sheetRef}
|
||||
className="mobile-article-sheet slide-in"
|
||||
className={`mobile-article-sheet ${!isDismissing && touchDeltaX === 0 ? 'slide-in' : ''}`}
|
||||
style={{
|
||||
transform: touchDeltaX > 0 ? `translateX(${touchDeltaX}px)` : undefined,
|
||||
transition: touchDeltaX > 0 ? 'none' : undefined,
|
||||
transform: isDismissing
|
||||
? 'translateX(100%)'
|
||||
: touchDeltaX > 0
|
||||
? `translateX(${touchDeltaX}px)`
|
||||
: undefined,
|
||||
transition: isEdgeSwiping ? 'none' : 'transform 0.22s cubic-bezier(0.32, 0.72, 0, 1)',
|
||||
}}
|
||||
onTouchStart={handleTouchStart}
|
||||
onTouchMove={handleTouchMove}
|
||||
onTouchEnd={handleTouchEnd}
|
||||
>
|
||||
{/* Top Header */}
|
||||
<div className="mobile-sheet-header">
|
||||
{/* 1. Top Single-Row Header: Return Button + Feed Favicon + Feed Title */}
|
||||
<div className="mobile-sheet-top-nav">
|
||||
<button
|
||||
className="btn-icon"
|
||||
style={{ border: 'none', background: 'transparent' }}
|
||||
style={{ border: 'none', background: 'transparent', padding: '0.25rem', marginLeft: '-0.35rem' }}
|
||||
onClick={onClose}
|
||||
title="Back to Feed"
|
||||
>
|
||||
<ChevronLeft size={22} />
|
||||
<ChevronLeft size={24} />
|
||||
</button>
|
||||
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.35rem' }}>
|
||||
{ttsVariant?.stream_url && (
|
||||
<button
|
||||
className="btn-icon"
|
||||
style={{ border: 'none', background: 'transparent' }}
|
||||
onClick={() => onPlayAudio?.(entry, ttsVariant.stream_url!)}
|
||||
title="Play Audio"
|
||||
>
|
||||
{isCurrentAudioActive ? (
|
||||
<Pause size={18} color="var(--badge-tts)" />
|
||||
) : (
|
||||
<Volume2 size={18} color="var(--badge-tts)" />
|
||||
)}
|
||||
</button>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.45rem',
|
||||
flex: 1,
|
||||
overflow: 'hidden',
|
||||
minWidth: 0,
|
||||
}}
|
||||
>
|
||||
{feed ? (
|
||||
<FeedIcon feed={feed} size={16} />
|
||||
) : (
|
||||
<span style={{ fontSize: '0.85rem' }}>📰</span>
|
||||
)}
|
||||
|
||||
<button
|
||||
className="btn-icon"
|
||||
style={{ border: 'none', background: 'transparent' }}
|
||||
onClick={() => onToggleStar(entry)}
|
||||
title="Star article"
|
||||
<span
|
||||
style={{
|
||||
fontSize: '0.88rem',
|
||||
fontWeight: 600,
|
||||
color: 'var(--text-secondary)',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
>
|
||||
<Star
|
||||
size={18}
|
||||
color={entry.is_starred ? 'var(--star-gold)' : 'var(--text-muted)'}
|
||||
fill={entry.is_starred ? 'var(--star-gold)' : 'none'}
|
||||
/>
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="btn-icon"
|
||||
style={{ border: 'none', background: 'transparent' }}
|
||||
onClick={handleShare}
|
||||
title="Share"
|
||||
>
|
||||
<Share2 size={18} />
|
||||
</button>
|
||||
|
||||
<a
|
||||
href={entry.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="btn-icon"
|
||||
style={{ border: 'none', background: 'transparent' }}
|
||||
title="Open original link"
|
||||
>
|
||||
<ExternalLink size={18} />
|
||||
</a>
|
||||
{entry.feed_title}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Share Copied Banner Notice */}
|
||||
{shareCopiedNotice && (
|
||||
<div
|
||||
style={{
|
||||
background: 'rgba(37, 99, 235, 0.1)',
|
||||
color: '#2563eb',
|
||||
padding: '0.45rem 1rem',
|
||||
fontSize: '0.8rem',
|
||||
fontWeight: 600,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.4rem',
|
||||
borderBottom: '1px solid rgba(37, 99, 235, 0.2)',
|
||||
}}
|
||||
>
|
||||
<CheckCircle2 size={15} />
|
||||
<span>Public share link copied to clipboard!</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Scrollable Article Body */}
|
||||
<div className="mobile-sheet-scroll">
|
||||
<div style={{ marginBottom: '1.25rem' }}>
|
||||
<h1 style={{ fontSize: '1.45rem', fontWeight: 800, lineHeight: 1.3, color: 'var(--text-primary)', marginBottom: '0.5rem' }}>
|
||||
<div className="reader-meta-header" style={{ marginBottom: '1.25rem' }}>
|
||||
{/* Post Title */}
|
||||
<h1 className="reader-post-title" style={{ fontSize: '1.45rem', marginTop: 0 }}>
|
||||
{entry.title}
|
||||
</h1>
|
||||
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '0.78rem', color: 'var(--text-muted)' }}>
|
||||
<span style={{ fontWeight: 600, color: 'var(--text-secondary)' }}>{entry.feed_title}</span>
|
||||
<span>•</span>
|
||||
<span>{formatRelativeDate(entry.published_at)}</span>
|
||||
<span>•</span>
|
||||
{/* Author, Published Date & Reading Time */}
|
||||
<div className="reader-meta-row" style={{ marginTop: '0.5rem' }}>
|
||||
<span>by {entry.author || 'Unknown'}</span>
|
||||
<span>·</span>
|
||||
<span>{formatDateTime(entry.published_at)}</span>
|
||||
<span>·</span>
|
||||
<span>{estimateReadingTime(entry.content || entry.raw_content)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* AI Summary Box */}
|
||||
{/* Transient Error Notice Banner */}
|
||||
{aiError && (
|
||||
<div
|
||||
className="reader-error-banner"
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
padding: '0.65rem 0.85rem',
|
||||
marginBottom: '1rem',
|
||||
borderRadius: 'var(--radius-sm)',
|
||||
background: 'var(--danger-soft)',
|
||||
color: 'var(--danger)',
|
||||
fontSize: '0.82rem',
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
|
||||
<AlertCircle size={15} />
|
||||
<span>{aiError}</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setAiError(null)}
|
||||
style={{ background: 'transparent', border: 'none', color: 'inherit', cursor: 'pointer' }}
|
||||
>
|
||||
<X size={14} />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* AI Summary Box (Purple Accent) */}
|
||||
{hasAISummary && (
|
||||
<div className="desktop-ai-summary-box" style={{ margin: '1rem 0' }}>
|
||||
<div className="desktop-ai-summary-box" style={{ margin: '1rem 0 1.5rem', borderColor: 'rgba(124, 58, 237, 0.3)' }}>
|
||||
<div className="ai-summary-header">
|
||||
<Sparkles size={15} />
|
||||
<span>AI Summary</span>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.4rem' }}>
|
||||
<Sparkles size={15} color="#7c3aed" />
|
||||
<span style={{ fontWeight: 700, fontSize: '0.88rem', color: '#7c3aed' }}>AI Summary</span>
|
||||
</div>
|
||||
<button
|
||||
className="ai-summary-copy-btn"
|
||||
onClick={handleCopySummary}
|
||||
title="Copy AI summary"
|
||||
>
|
||||
{copiedSummary ? <CheckCircle2 size={13} color="var(--success)" /> : <Copy size={13} />}
|
||||
<span>{copiedSummary ? 'Copied' : 'Copy'}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
className="ai-summary-body"
|
||||
@@ -204,12 +389,156 @@ export const MobileArticleSheet: React.FC<MobileArticleSheetProps> = ({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Rendered HTML/Markdown Content */}
|
||||
{/* Rendered Article Content */}
|
||||
<div
|
||||
className="reader-body-rendered"
|
||||
dangerouslySetInnerHTML={{ __html: getArticleBody() }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 2. Docked Bottom Action Toolbar */}
|
||||
<div className="mobile-sheet-bottom-bar">
|
||||
{/* Left Bottom Corner: Star, Share, Audio, Original Link */}
|
||||
<div className="mobile-sheet-bottom-left">
|
||||
{/* Star Button (Yellow fill when active) */}
|
||||
<button
|
||||
className={`sheet-action-btn ${entry.is_starred ? 'starred' : ''}`}
|
||||
onClick={() => onToggleStar(entry)}
|
||||
title={entry.is_starred ? 'Unstar' : 'Star article'}
|
||||
>
|
||||
<Star
|
||||
size={19}
|
||||
color={entry.is_starred ? '#d97706' : 'var(--text-muted)'}
|
||||
fill={entry.is_starred ? '#d97706' : 'none'}
|
||||
/>
|
||||
</button>
|
||||
|
||||
{/* Share Button (Blue icon + fill when shared) */}
|
||||
<button
|
||||
className={`sheet-action-btn ${isShared ? 'shared' : ''}`}
|
||||
onClick={handleToggleShare}
|
||||
disabled={isSharing}
|
||||
title={isShared ? 'Shared publicly (click to toggle)' : 'Share article'}
|
||||
>
|
||||
{isSharing ? (
|
||||
<Loader2 size={18} className="spinning" />
|
||||
) : (
|
||||
<Share2
|
||||
size={18}
|
||||
color={isShared ? '#2563eb' : 'var(--text-muted)'}
|
||||
fill={isShared ? '#2563eb' : 'none'}
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Audio / TTS Button (Green/Emerald when active) */}
|
||||
{ttsVariant?.stream_url && (
|
||||
<button
|
||||
className={`sheet-action-btn ${isCurrentAudioActive ? 'audio-active' : ''}`}
|
||||
onClick={() => onPlayAudio?.(entry, ttsVariant.stream_url!)}
|
||||
title="Play Audio"
|
||||
>
|
||||
{isCurrentAudioActive ? (
|
||||
<Pause size={18} color="#059669" />
|
||||
) : (
|
||||
<Volume2 size={18} color="#059669" />
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Original Link Button */}
|
||||
<a
|
||||
href={entry.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="sheet-action-btn"
|
||||
title="Open original webpage"
|
||||
>
|
||||
<ExternalLink size={18} color="var(--text-muted)" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Right Bottom Corner: Popup Split Action Button */}
|
||||
<div className="mobile-sheet-bottom-right" ref={dropdownRef}>
|
||||
<div className="split-action-container">
|
||||
<button
|
||||
className="split-action-main-btn"
|
||||
onClick={handlePrimaryActionClick}
|
||||
disabled={isScraping}
|
||||
title={
|
||||
!hasReadability
|
||||
? 'Extract full text using Readability'
|
||||
: selectedVariantKey === 'readability_full_text'
|
||||
? 'Show original feed content'
|
||||
: 'Show full text'
|
||||
}
|
||||
>
|
||||
{isScraping ? (
|
||||
<>
|
||||
<Loader2 size={13} className="spinning" />
|
||||
<span>Scraping...</span>
|
||||
</>
|
||||
) : !hasReadability ? (
|
||||
<>
|
||||
<Zap size={13} color="var(--accent-primary)" />
|
||||
<span>Get Full Text</span>
|
||||
</>
|
||||
) : selectedVariantKey === 'readability_full_text' ? (
|
||||
<>
|
||||
<FileText size={13} color="var(--accent-primary)" />
|
||||
<span>Original</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Zap size={13} color="var(--accent-primary)" />
|
||||
<span>Full Text</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="split-action-arrow-btn"
|
||||
onClick={() => setShowActionDropdown((prev) => !prev)}
|
||||
title="More Actions"
|
||||
>
|
||||
<ChevronUp size={13} style={{ transform: showActionDropdown ? 'rotate(180deg)' : 'none', transition: 'transform 0.2s' }} />
|
||||
</button>
|
||||
|
||||
{/* Popup Upwards Menu (Dropup) */}
|
||||
{showActionDropdown && (
|
||||
<div className="split-dropdown-menu dropup-menu">
|
||||
<button
|
||||
className="split-dropdown-item"
|
||||
onClick={handleGenerateAISummary}
|
||||
disabled={isGeneratingAI}
|
||||
>
|
||||
{isGeneratingAI ? (
|
||||
<Loader2 size={14} className="spinning" />
|
||||
) : (
|
||||
<Sparkles size={14} color="#7c3aed" />
|
||||
)}
|
||||
<span>Generate AI Summary</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="split-dropdown-item"
|
||||
onClick={() => {
|
||||
setShowActionDropdown(false);
|
||||
if (ttsVariant?.stream_url) {
|
||||
onPlayAudio?.(entry, ttsVariant.stream_url);
|
||||
} else {
|
||||
setAiError('Audio generation is queued by backend rule.');
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Volume2 size={14} color="#059669" />
|
||||
<span>Generate Audio (TTS)</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -9,7 +9,9 @@ interface SmartArtCardProps {
|
||||
|
||||
export const SmartArtCard: React.FC<SmartArtCardProps> = ({ title, seed, excerpt }) => {
|
||||
const theme = getSmartArtTheme(seed);
|
||||
const textToShow = excerpt ? stripHtml(excerpt, 90) : title;
|
||||
// Clean description text without HTML tags or raw URLs
|
||||
const cleanExcerpt = excerpt ? stripHtml(excerpt, 130) : '';
|
||||
const textToShow = cleanExcerpt.length > 15 ? cleanExcerpt : title;
|
||||
|
||||
return (
|
||||
<div
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import React, { useRef, useEffect } from 'react';
|
||||
import { Feed, FeedEntry } from '../../types';
|
||||
import { Star, ChevronRight } from 'lucide-react';
|
||||
|
||||
@@ -7,6 +7,8 @@ interface StarredTabViewProps {
|
||||
feeds: Feed[];
|
||||
onSelectFeedFilter: (feedId?: string) => void;
|
||||
onOpenAllStarred: () => void;
|
||||
savedScrollTop?: number;
|
||||
onScrollPosChange?: (pos: number) => void;
|
||||
}
|
||||
|
||||
export const StarredTabView: React.FC<StarredTabViewProps> = ({
|
||||
@@ -14,7 +16,32 @@ export const StarredTabView: React.FC<StarredTabViewProps> = ({
|
||||
feeds,
|
||||
onSelectFeedFilter,
|
||||
onOpenAllStarred,
|
||||
savedScrollTop = 0,
|
||||
onScrollPosChange,
|
||||
}) => {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Restore scroll position on mount
|
||||
useEffect(() => {
|
||||
if (containerRef.current && savedScrollTop > 0) {
|
||||
containerRef.current.scrollTop = savedScrollTop;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleAllStarredClick = () => {
|
||||
if (containerRef.current && onScrollPosChange) {
|
||||
onScrollPosChange(containerRef.current.scrollTop);
|
||||
}
|
||||
onOpenAllStarred();
|
||||
};
|
||||
|
||||
const handleFeedClick = (feedId: string) => {
|
||||
if (containerRef.current && onScrollPosChange) {
|
||||
onScrollPosChange(containerRef.current.scrollTop);
|
||||
}
|
||||
onSelectFeedFilter(feedId);
|
||||
};
|
||||
|
||||
const starredEntries = entries.filter((e) => e.is_starred);
|
||||
|
||||
// Group starred count by feed
|
||||
@@ -26,7 +53,16 @@ export const StarredTabView: React.FC<StarredTabViewProps> = ({
|
||||
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
|
||||
ref={containerRef}
|
||||
style={{
|
||||
flex: 1,
|
||||
overflowY: 'auto',
|
||||
WebkitOverflowScrolling: 'touch',
|
||||
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)' }}>
|
||||
@@ -38,7 +74,7 @@ export const StarredTabView: React.FC<StarredTabViewProps> = ({
|
||||
<div
|
||||
className="sidebar-item"
|
||||
style={{ padding: '0.75rem 0.6rem', borderBottom: '1px solid var(--border-light)' }}
|
||||
onClick={onOpenAllStarred}
|
||||
onClick={handleAllStarredClick}
|
||||
>
|
||||
<div className="sidebar-item-left">
|
||||
<Star size={18} color="var(--star-gold)" fill="var(--star-gold)" />
|
||||
@@ -57,7 +93,7 @@ export const StarredTabView: React.FC<StarredTabViewProps> = ({
|
||||
key={feed.id}
|
||||
className="sidebar-item"
|
||||
style={{ padding: '0.75rem 0.6rem', borderBottom: '1px solid var(--border-light)' }}
|
||||
onClick={() => onSelectFeedFilter(feed.id)}
|
||||
onClick={() => handleFeedClick(feed.id)}
|
||||
>
|
||||
<div className="sidebar-item-left">
|
||||
<span style={{ fontSize: '0.88rem', color: 'var(--text-primary)' }}>{feed.title}</span>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useState } from 'react';
|
||||
import React, { useState, useRef } from 'react';
|
||||
import { Category, Feed, FeedEntry, FilterState, Stats, User, ViewPreference } from '../../types';
|
||||
import { extractFirstImage, formatRelativeDate } from '../../utils';
|
||||
import { XHSBottomNav, MobileTab } from './XHSBottomNav';
|
||||
@@ -9,12 +9,13 @@ import { FeedsTabView } from './FeedsTabView';
|
||||
import { StarredTabView } from './StarredTabView';
|
||||
import { SettingsView } from '../settings/SettingsView';
|
||||
import {
|
||||
Search,
|
||||
Headphones,
|
||||
Sparkles,
|
||||
ArrowLeft,
|
||||
RefreshCw,
|
||||
Loader2,
|
||||
Search,
|
||||
X,
|
||||
Columns3,
|
||||
} from 'lucide-react';
|
||||
|
||||
interface WaterfallViewProps {
|
||||
@@ -39,6 +40,9 @@ interface WaterfallViewProps {
|
||||
viewPreference: ViewPreference;
|
||||
onChangeViewPreference: (pref: ViewPreference) => void;
|
||||
onSwitchToDesktop?: () => void;
|
||||
hasMore?: boolean;
|
||||
isLoadingMore?: boolean;
|
||||
onLoadMore?: () => void;
|
||||
}
|
||||
|
||||
export const WaterfallView: React.FC<WaterfallViewProps> = ({
|
||||
@@ -51,6 +55,7 @@ export const WaterfallView: React.FC<WaterfallViewProps> = ({
|
||||
currentUser,
|
||||
onToggleRead,
|
||||
onToggleStar,
|
||||
onUpdateEntry,
|
||||
onRefreshData,
|
||||
onOpenAddFeed,
|
||||
onPlayAudio,
|
||||
@@ -61,29 +66,140 @@ export const WaterfallView: React.FC<WaterfallViewProps> = ({
|
||||
playingEntry,
|
||||
viewPreference,
|
||||
onChangeViewPreference,
|
||||
onSwitchToDesktop,
|
||||
hasMore = false,
|
||||
isLoadingMore = false,
|
||||
onLoadMore,
|
||||
}) => {
|
||||
const [mobileTab, setMobileTab] = useState<MobileTab>('home');
|
||||
const [selectedEntry, setSelectedEntry] = useState<FeedEntry | null>(null);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [showSearchInput, setShowSearchInput] = useState(false);
|
||||
const [parentTab, setParentTab] = useState<MobileTab>('home');
|
||||
const [selectedEntryId, setSelectedEntryId] = useState<string | null>(null);
|
||||
const selectedEntry = entries.find((e) => e.id === selectedEntryId) || null;
|
||||
const [shuffledSeed, setShuffledSeed] = useState<number>(0);
|
||||
|
||||
// Tab Scroll Position Retention
|
||||
const [feedsScrollPos, setFeedsScrollPos] = useState<number>(0);
|
||||
const [starredScrollPos, setStarredScrollPos] = useState<number>(0);
|
||||
|
||||
// Search Bar Expand State
|
||||
const [isSearchOpen, setIsSearchOpen] = useState(false);
|
||||
const [searchQuery, setSearchQuery] = useState(filter.search || '');
|
||||
|
||||
// Pull-to-Refresh & Edge Gesture State
|
||||
const [pullDistance, setPullDistance] = useState<number>(0);
|
||||
const [isPullRefreshing, setIsPullRefreshing] = useState<boolean>(false);
|
||||
const [edgeDeltaX, setEdgeDeltaX] = useState<number>(0);
|
||||
const [isFeedDismissing, setIsFeedDismissing] = useState<boolean>(false);
|
||||
|
||||
const touchStartY = useRef<number | null>(null);
|
||||
const edgeSwipeRef = useRef<{ startX: number; startY: number } | null>(null);
|
||||
const scrollAreaRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const pullThreshold = Math.min(window.innerHeight / 3, 110);
|
||||
const currentFeedFilter = feeds.find((f) => f.id === filter.feedId);
|
||||
|
||||
const handleCardClick = (entry: FeedEntry) => {
|
||||
setSelectedEntry(entry);
|
||||
setSelectedEntryId(entry.id);
|
||||
if (!entry.is_read) {
|
||||
onToggleRead(entry);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSearchSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
onFilterChange({ search: searchQuery.trim() });
|
||||
// Return to the originating tab when exiting a feed's waterfall view
|
||||
const handleReturnFromFeed = () => {
|
||||
onFilterChange({ feedId: undefined });
|
||||
setMobileTab(parentTab);
|
||||
};
|
||||
|
||||
const clearSearch = () => {
|
||||
setSearchQuery('');
|
||||
setShowSearchInput(false);
|
||||
onFilterChange({ search: '' });
|
||||
// Double Tap Home to Scroll to Top
|
||||
const handleDoubleTapHome = () => {
|
||||
scrollAreaRef.current?.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
};
|
||||
|
||||
// Touch Event Handlers (Pull-to-refresh + Left Edge Swipe to Return)
|
||||
const handleTouchStart = (e: React.TouchEvent | React.MouseEvent) => {
|
||||
if ('touches' in e && e.touches.length === 1 && currentFeedFilter) {
|
||||
const touch = e.touches[0];
|
||||
if (touch.clientX < 45) {
|
||||
edgeSwipeRef.current = { startX: touch.clientX, startY: touch.clientY };
|
||||
setEdgeDeltaX(0);
|
||||
} else {
|
||||
edgeSwipeRef.current = null;
|
||||
}
|
||||
}
|
||||
|
||||
if (scrollAreaRef.current && scrollAreaRef.current.scrollTop <= 0 && !isPullRefreshing) {
|
||||
const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
|
||||
touchStartY.current = clientY;
|
||||
} else {
|
||||
touchStartY.current = null;
|
||||
}
|
||||
};
|
||||
|
||||
const handleTouchMove = (e: React.TouchEvent | React.MouseEvent) => {
|
||||
// 1. Check Left-Edge Swipe to Return Gesture with live translation
|
||||
if (edgeSwipeRef.current && 'touches' in e && e.touches.length === 1 && currentFeedFilter) {
|
||||
const touch = e.touches[0];
|
||||
const deltaX = touch.clientX - edgeSwipeRef.current.startX;
|
||||
const deltaY = Math.abs(touch.clientY - edgeSwipeRef.current.startY);
|
||||
if (deltaX > 0 && deltaX > deltaY * 1.2) {
|
||||
setEdgeDeltaX(deltaX);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// 2. Pull-to-refresh
|
||||
if (touchStartY.current === null || isPullRefreshing) return;
|
||||
const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
|
||||
const deltaY = clientY - touchStartY.current;
|
||||
|
||||
if (deltaY > 0 && scrollAreaRef.current && scrollAreaRef.current.scrollTop <= 0) {
|
||||
const damped = Math.min(deltaY * 0.45, pullThreshold + 30);
|
||||
setPullDistance(damped);
|
||||
} else {
|
||||
setPullDistance(0);
|
||||
}
|
||||
};
|
||||
|
||||
const handleTouchEnd = () => {
|
||||
// Check if edge swipe gesture met threshold for return
|
||||
if (edgeSwipeRef.current && edgeDeltaX > 80 && currentFeedFilter) {
|
||||
setIsFeedDismissing(true);
|
||||
setTimeout(() => {
|
||||
handleReturnFromFeed();
|
||||
setIsFeedDismissing(false);
|
||||
setEdgeDeltaX(0);
|
||||
}, 200);
|
||||
} else {
|
||||
setEdgeDeltaX(0);
|
||||
}
|
||||
edgeSwipeRef.current = null;
|
||||
|
||||
if (touchStartY.current === null || isPullRefreshing) return;
|
||||
touchStartY.current = null;
|
||||
|
||||
if (pullDistance >= pullThreshold) {
|
||||
setIsPullRefreshing(true);
|
||||
setPullDistance(55);
|
||||
setShuffledSeed(Date.now());
|
||||
onRefreshData();
|
||||
|
||||
setTimeout(() => {
|
||||
setIsPullRefreshing(false);
|
||||
setPullDistance(0);
|
||||
}, 700);
|
||||
} else {
|
||||
setPullDistance(0);
|
||||
}
|
||||
};
|
||||
|
||||
// Infinite Scroll Trigger
|
||||
const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
|
||||
const el = e.currentTarget;
|
||||
if (el.scrollHeight - el.scrollTop - el.clientHeight < 350) {
|
||||
if (hasMore && !isLoadingMore && onLoadMore) {
|
||||
onLoadMore();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Filter entries based on active tab and search
|
||||
@@ -96,6 +212,16 @@ export const WaterfallView: React.FC<WaterfallViewProps> = ({
|
||||
);
|
||||
}
|
||||
|
||||
// Shuffle display order when pull-to-refresh is triggered in Home tab
|
||||
if (mobileTab === 'home' && shuffledSeed > 0) {
|
||||
const shuffled = [...displayedEntries];
|
||||
for (let i = shuffled.length - 1; i > 0; i--) {
|
||||
const j = (shuffledSeed + i * 37) % (i + 1);
|
||||
[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
|
||||
}
|
||||
displayedEntries = shuffled;
|
||||
}
|
||||
|
||||
// Split into 2 columns for Masonry layout
|
||||
const col1: FeedEntry[] = [];
|
||||
const col2: FeedEntry[] = [];
|
||||
@@ -108,89 +234,99 @@ export const WaterfallView: React.FC<WaterfallViewProps> = ({
|
||||
(e) => e.variants?.['tts'] || e.variants?.['podcast_tts']
|
||||
).length;
|
||||
|
||||
const currentFeedFilter = feeds.find((f) => f.id === filter.feedId);
|
||||
|
||||
return (
|
||||
<div className="waterfall-app-root">
|
||||
{/* Mobile Top Header */}
|
||||
<header className="mobile-top-header">
|
||||
{currentFeedFilter ? (
|
||||
<button
|
||||
className="btn-icon"
|
||||
style={{ border: 'none', background: 'transparent' }}
|
||||
onClick={() => onFilterChange({ feedId: undefined })}
|
||||
>
|
||||
<ArrowLeft size={20} />
|
||||
</button>
|
||||
) : (
|
||||
<div className="mobile-header-title">RSSPipe</div>
|
||||
)}
|
||||
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.4rem', flex: showSearchInput ? 1 : 'none', marginLeft: showSearchInput ? '0.5rem' : 0 }}>
|
||||
{showSearchInput ? (
|
||||
<form onSubmit={handleSearchSubmit} style={{ display: 'flex', width: '100%', alignItems: 'center', gap: '0.3rem' }}>
|
||||
<input
|
||||
type="text"
|
||||
className="search-input"
|
||||
placeholder="Search articles..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
autoFocus
|
||||
/>
|
||||
{/* Top Category Pill Tabs & Floating Search Row (Home View) */}
|
||||
{mobileTab === 'home' && (
|
||||
<div className="mobile-categories-search-row">
|
||||
{isSearchOpen ? (
|
||||
<div className="mobile-search-bar-expanded">
|
||||
<div className="mobile-search-input-wrapper">
|
||||
<Search size={14} className="mobile-search-leading-icon" />
|
||||
<input
|
||||
type="text"
|
||||
className="mobile-search-input-field"
|
||||
placeholder="Search all posts..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => {
|
||||
setSearchQuery(e.target.value);
|
||||
onFilterChange({ search: e.target.value });
|
||||
}}
|
||||
autoFocus
|
||||
/>
|
||||
{searchQuery && (
|
||||
<button
|
||||
className="mobile-search-clear-btn"
|
||||
onClick={() => {
|
||||
setSearchQuery('');
|
||||
onFilterChange({ search: '' });
|
||||
}}
|
||||
title="Clear search"
|
||||
>
|
||||
<X size={12} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="btn-icon"
|
||||
style={{ border: 'none', background: 'transparent' }}
|
||||
onClick={clearSearch}
|
||||
className="mobile-search-cancel-btn"
|
||||
onClick={() => {
|
||||
setIsSearchOpen(false);
|
||||
setSearchQuery('');
|
||||
onFilterChange({ search: '' });
|
||||
}}
|
||||
>
|
||||
<X size={16} />
|
||||
Cancel
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<button
|
||||
className="btn-icon"
|
||||
style={{ border: 'none', background: 'transparent' }}
|
||||
onClick={() => setShowSearchInput(true)}
|
||||
title="Search"
|
||||
>
|
||||
<Search size={18} />
|
||||
</button>
|
||||
{/* Category Scrollable Pill Bar */}
|
||||
<div className="mobile-tabs-pill-bar">
|
||||
{currentFeedFilter ? (
|
||||
<button
|
||||
className="mobile-tab-pill active"
|
||||
onClick={handleReturnFromFeed}
|
||||
style={{ display: 'flex', alignItems: 'center', gap: '0.35rem' }}
|
||||
title={`Return to ${parentTab === 'starred' ? 'Starred' : parentTab === 'feeds' ? 'Feeds' : 'All'}`}
|
||||
>
|
||||
<ArrowLeft size={13} />
|
||||
<span>{currentFeedFilter.title}</span>
|
||||
</button>
|
||||
) : (
|
||||
<>
|
||||
{/* Default "All" Tab */}
|
||||
<button
|
||||
className={`mobile-tab-pill ${!filter.categoryId && (!filter.view || filter.view === 'inbox' || filter.view === 'all') ? 'active' : ''}`}
|
||||
onClick={() => onFilterChange({ categoryId: undefined, feedId: undefined, view: 'inbox' })}
|
||||
>
|
||||
All
|
||||
</button>
|
||||
|
||||
{onSwitchToDesktop && (
|
||||
<button
|
||||
className="btn-icon"
|
||||
style={{ border: 'none', background: 'transparent' }}
|
||||
onClick={onSwitchToDesktop}
|
||||
title="Switch to 3-Split Desktop View (V)"
|
||||
>
|
||||
<Columns3 size={18} />
|
||||
</button>
|
||||
)}
|
||||
{/* Category Folders */}
|
||||
{categories.map((cat) => (
|
||||
<button
|
||||
key={cat.id}
|
||||
className={`mobile-tab-pill ${filter.categoryId === cat.id ? 'active' : ''}`}
|
||||
onClick={() => onFilterChange({ categoryId: cat.id, feedId: undefined, view: 'all' })}
|
||||
>
|
||||
{cat.title}
|
||||
</button>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Floating Search Button on Far Right */}
|
||||
<button
|
||||
className="mobile-floating-search-btn"
|
||||
onClick={() => setIsSearchOpen(true)}
|
||||
title="Search posts"
|
||||
>
|
||||
<Search size={17} />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Top Category Pill Tabs (In Home View) */}
|
||||
{mobileTab === 'home' && !filter.feedId && (
|
||||
<div className="mobile-tabs-pill-bar">
|
||||
<button
|
||||
className={`mobile-tab-pill ${!filter.categoryId && filter.view === 'inbox' ? 'active' : ''}`}
|
||||
onClick={() => onFilterChange({ categoryId: undefined, view: 'inbox' })}
|
||||
>
|
||||
All
|
||||
</button>
|
||||
{categories.map((cat) => (
|
||||
<button
|
||||
key={cat.id}
|
||||
className={`mobile-tab-pill ${filter.categoryId === cat.id ? 'active' : ''}`}
|
||||
onClick={() => onFilterChange({ categoryId: cat.id, view: 'all' })}
|
||||
>
|
||||
{cat.title}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Main Tab Content */}
|
||||
@@ -199,23 +335,30 @@ export const WaterfallView: React.FC<WaterfallViewProps> = ({
|
||||
categories={categories}
|
||||
feeds={feeds}
|
||||
onSelectFeed={(feed) => {
|
||||
setParentTab('feeds');
|
||||
onFilterChange({ feedId: feed.id, view: 'all' });
|
||||
setMobileTab('home');
|
||||
}}
|
||||
onOpenAddFeed={onOpenAddFeed}
|
||||
savedScrollTop={feedsScrollPos}
|
||||
onScrollPosChange={setFeedsScrollPos}
|
||||
/>
|
||||
) : mobileTab === 'starred' ? (
|
||||
<StarredTabView
|
||||
entries={entries.filter((e) => e.is_starred)}
|
||||
feeds={feeds}
|
||||
onSelectFeedFilter={(feedId) => {
|
||||
setParentTab('starred');
|
||||
onFilterChange({ feedId, view: 'starred' });
|
||||
setMobileTab('home');
|
||||
}}
|
||||
onOpenAllStarred={() => {
|
||||
setParentTab('starred');
|
||||
onFilterChange({ view: 'starred', feedId: undefined });
|
||||
setMobileTab('home');
|
||||
}}
|
||||
savedScrollTop={starredScrollPos}
|
||||
onScrollPosChange={setStarredScrollPos}
|
||||
/>
|
||||
) : mobileTab === 'settings' ? (
|
||||
<div style={{ flex: 1, overflowY: 'auto' }}>
|
||||
@@ -232,28 +375,89 @@ export const WaterfallView: React.FC<WaterfallViewProps> = ({
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
/* Waterfall 2-Column Grid (Home / Listen / Filtered Feeds) */
|
||||
<div className="waterfall-scroll-area">
|
||||
/* Waterfall 2-Column Grid (Home / Listen / Filtered Feeds) with Pull-To-Refresh & Infinite Scroll */
|
||||
<div
|
||||
className="waterfall-scroll-area"
|
||||
ref={scrollAreaRef}
|
||||
onScroll={handleScroll}
|
||||
onTouchStart={handleTouchStart}
|
||||
onTouchMove={handleTouchMove}
|
||||
onTouchEnd={handleTouchEnd}
|
||||
onMouseDown={handleTouchStart}
|
||||
onMouseMove={handleTouchMove}
|
||||
onMouseUp={handleTouchEnd}
|
||||
style={{
|
||||
transform: isFeedDismissing
|
||||
? 'translateX(100%)'
|
||||
: edgeDeltaX > 0
|
||||
? `translateX(${edgeDeltaX}px)`
|
||||
: undefined,
|
||||
transition: edgeDeltaX > 0 ? 'none' : 'transform 0.22s cubic-bezier(0.32, 0.72, 0, 1)',
|
||||
}}
|
||||
>
|
||||
{/* Pull-to-Refresh & Reshuffle Indicator */}
|
||||
{(pullDistance > 0 || isPullRefreshing) && (
|
||||
<div
|
||||
className="pull-to-refresh-container"
|
||||
style={{
|
||||
height: `${pullDistance}px`,
|
||||
opacity: Math.min(pullDistance / 40, 1),
|
||||
}}
|
||||
>
|
||||
{isPullRefreshing ? (
|
||||
<div className="pull-to-refresh-content">
|
||||
<Loader2 size={16} className="spinning" color="var(--accent-primary)" />
|
||||
<span>Refreshing & shuffling posts...</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="pull-to-refresh-content">
|
||||
<RefreshCw
|
||||
size={15}
|
||||
style={{
|
||||
transform: `rotate(${pullDistance * 3}deg)`,
|
||||
transition: 'transform 0.05s linear',
|
||||
}}
|
||||
/>
|
||||
<span>
|
||||
{pullDistance >= pullThreshold
|
||||
? 'Release to reload & shuffle'
|
||||
: 'Pull down to refresh'}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{displayedEntries.length === 0 ? (
|
||||
<div className="reader-empty-state" style={{ height: '300px' }}>
|
||||
<div style={{ fontSize: '1rem', fontWeight: 600, color: 'var(--text-secondary)' }}>
|
||||
No posts found
|
||||
</div>
|
||||
<div style={{ fontSize: '0.82rem', color: 'var(--text-muted)' }}>
|
||||
Pull to refresh or check other categories
|
||||
Pull down to refresh or check other categories
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="waterfall-masonry-grid">
|
||||
{/* Column 1 */}
|
||||
<div className="waterfall-column">
|
||||
{col1.map((entry) => renderCard(entry))}
|
||||
<>
|
||||
<div className="waterfall-masonry-grid">
|
||||
{/* Column 1 */}
|
||||
<div className="waterfall-column">
|
||||
{col1.map((entry) => renderCard(entry))}
|
||||
</div>
|
||||
{/* Column 2 */}
|
||||
<div className="waterfall-column">
|
||||
{col2.map((entry) => renderCard(entry))}
|
||||
</div>
|
||||
</div>
|
||||
{/* Column 2 */}
|
||||
<div className="waterfall-column">
|
||||
{col2.map((entry) => renderCard(entry))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Infinite Scroll Loading Indicator */}
|
||||
{isLoadingMore && (
|
||||
<div className="waterfall-infinite-loader">
|
||||
<Loader2 size={16} className="spinning" color="var(--accent-primary)" />
|
||||
<span>Loading more posts...</span>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
@@ -269,7 +473,7 @@ export const WaterfallView: React.FC<WaterfallViewProps> = ({
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* iOS 5-Tab Bottom Navigation Bar */}
|
||||
{/* iOS 5-Tab Bottom Navigation Bar (Elevated for Home Virtual Bar) */}
|
||||
<XHSBottomNav
|
||||
activeTab={mobileTab}
|
||||
onTabChange={(tab) => {
|
||||
@@ -282,15 +486,18 @@ export const WaterfallView: React.FC<WaterfallViewProps> = ({
|
||||
}}
|
||||
stats={stats}
|
||||
playableCount={playableCount}
|
||||
onDoubleTapHome={handleDoubleTapHome}
|
||||
/>
|
||||
|
||||
{/* Slide-In Full-Screen Article Reader Sheet with Left-Edge Swipe Dismiss */}
|
||||
{selectedEntry && (
|
||||
<MobileArticleSheet
|
||||
entry={selectedEntry}
|
||||
onClose={() => setSelectedEntry(null)}
|
||||
feeds={feeds}
|
||||
onClose={() => setSelectedEntryId(null)}
|
||||
onToggleStar={onToggleStar}
|
||||
onToggleRead={onToggleRead}
|
||||
onUpdateEntry={onUpdateEntry}
|
||||
onPlayAudio={onPlayAudio}
|
||||
currentAudioUrl={currentAudioUrl}
|
||||
isPlayingAudio={isPlayingAudio}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import React, { useRef } from 'react';
|
||||
import { Home, Rss, Headphones, Star, Settings } from 'lucide-react';
|
||||
import { Stats } from '../../types';
|
||||
|
||||
@@ -9,6 +9,7 @@ interface XHSBottomNavProps {
|
||||
onTabChange: (tab: MobileTab) => void;
|
||||
stats: Stats | null;
|
||||
playableCount?: number;
|
||||
onDoubleTapHome?: () => void;
|
||||
}
|
||||
|
||||
export const XHSBottomNav: React.FC<XHSBottomNavProps> = ({
|
||||
@@ -16,12 +17,24 @@ export const XHSBottomNav: React.FC<XHSBottomNavProps> = ({
|
||||
onTabChange,
|
||||
stats,
|
||||
playableCount = 0,
|
||||
onDoubleTapHome,
|
||||
}) => {
|
||||
const lastHomeTapRef = useRef<number>(0);
|
||||
|
||||
const handleHomeClick = () => {
|
||||
const now = Date.now();
|
||||
if (activeTab === 'home' && now - lastHomeTapRef.current < 350) {
|
||||
onDoubleTapHome?.();
|
||||
}
|
||||
lastHomeTapRef.current = now;
|
||||
onTabChange('home');
|
||||
};
|
||||
|
||||
return (
|
||||
<nav className="ios-bottom-nav">
|
||||
<button
|
||||
className={`bottom-nav-item ${activeTab === 'home' ? 'active' : ''}`}
|
||||
onClick={() => onTabChange('home')}
|
||||
onClick={handleHomeClick}
|
||||
>
|
||||
<Home className="bottom-nav-icon" />
|
||||
<span>Home</span>
|
||||
|
||||
@@ -61,15 +61,61 @@ export const SettingsView: React.FC<SettingsViewProps> = ({
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [message, setMessage] = useState<string | null>(null);
|
||||
|
||||
// General Preferences State
|
||||
// General Preferences State (Synchronized with Backend & LocalStorage)
|
||||
const [autoMarkReadOnScroll, setAutoMarkReadOnScroll] = useState<boolean>(() => {
|
||||
if (currentUser?.preferences?.auto_read !== undefined) {
|
||||
return Boolean(currentUser.preferences.auto_read);
|
||||
}
|
||||
return localStorage.getItem('rsspipe_auto_read_scroll') === 'true';
|
||||
});
|
||||
|
||||
const handleToggleAutoReadScroll = (checked: boolean) => {
|
||||
// Fetch latest preferences from server on mount and window focus
|
||||
useEffect(() => {
|
||||
const fetchLatestPreferences = async () => {
|
||||
try {
|
||||
const prefs = await api.getUserPreferences();
|
||||
if (prefs && prefs.auto_read !== undefined) {
|
||||
setAutoMarkReadOnScroll(Boolean(prefs.auto_read));
|
||||
localStorage.setItem('rsspipe_auto_read_scroll', prefs.auto_read ? 'true' : 'false');
|
||||
}
|
||||
} catch (err) {
|
||||
console.warn('Failed to fetch user preferences:', err);
|
||||
}
|
||||
};
|
||||
|
||||
fetchLatestPreferences();
|
||||
|
||||
const handleFocus = () => {
|
||||
fetchLatestPreferences();
|
||||
};
|
||||
|
||||
window.addEventListener('focus', handleFocus);
|
||||
document.addEventListener('visibilitychange', () => {
|
||||
if (document.visibilityState === 'visible') fetchLatestPreferences();
|
||||
});
|
||||
|
||||
const handleStorage = (e: StorageEvent) => {
|
||||
if (e.key === 'rsspipe_auto_read_scroll') {
|
||||
setAutoMarkReadOnScroll(e.newValue === 'true');
|
||||
}
|
||||
};
|
||||
window.addEventListener('storage', handleStorage);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('focus', handleFocus);
|
||||
window.removeEventListener('storage', handleStorage);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleToggleAutoReadScroll = async (checked: boolean) => {
|
||||
setAutoMarkReadOnScroll(checked);
|
||||
localStorage.setItem('rsspipe_auto_read_scroll', checked ? 'true' : 'false');
|
||||
showNotification('Reading preference saved');
|
||||
try {
|
||||
await api.updateUserPreferences({ auto_read: checked });
|
||||
} catch (err) {
|
||||
console.warn('Failed to sync preference to server:', err);
|
||||
}
|
||||
};
|
||||
|
||||
// AI Settings State
|
||||
|
||||
@@ -71,6 +71,17 @@ export const api = {
|
||||
});
|
||||
},
|
||||
|
||||
async getUserPreferences(): Promise<Record<string, any>> {
|
||||
return request<Record<string, any>>('/user/preferences');
|
||||
},
|
||||
|
||||
async updateUserPreferences(preferences: Record<string, any>): Promise<Record<string, any>> {
|
||||
return request<Record<string, any>>('/user/preferences', {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify(preferences),
|
||||
});
|
||||
},
|
||||
|
||||
// Stats
|
||||
async getStats(): Promise<Stats> {
|
||||
return request<Stats>('/stats');
|
||||
|
||||
@@ -64,7 +64,7 @@
|
||||
|
||||
/* Layout Dimensions */
|
||||
--header-height: 50px;
|
||||
--bottom-nav-height: 58px;
|
||||
--bottom-nav-height: 72px;
|
||||
--docked-audio-height: 56px;
|
||||
--sidebar-min-width: 200px;
|
||||
--sidebar-default-width: 250px;
|
||||
|
||||
+296
-13
@@ -31,19 +31,29 @@
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Mobile Category Pill Tabs */
|
||||
/* Mobile Category Pill Tabs & Floating Search Row */
|
||||
.mobile-categories-search-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: var(--bg-surface);
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
position: relative;
|
||||
z-index: 25;
|
||||
height: 48px;
|
||||
min-height: 48px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mobile-tabs-pill-bar {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
padding: 0.5rem 0.85rem;
|
||||
background: var(--bg-surface);
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
padding: 0 0.75rem;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
flex-shrink: 0;
|
||||
z-index: 25;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mobile-tabs-pill-bar::-webkit-scrollbar {
|
||||
@@ -61,6 +71,7 @@
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
transition: var(--transition-fast);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.mobile-tab-pill.active {
|
||||
@@ -69,6 +80,129 @@
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Floating Search Button on Far Right */
|
||||
.mobile-floating-search-btn {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
margin-right: 0.45rem;
|
||||
border-radius: var(--radius-full);
|
||||
transition: var(--transition-fast);
|
||||
}
|
||||
|
||||
.mobile-floating-search-btn:active {
|
||||
background: var(--bg-subtle);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Expandable Slide-In Search Bar (iOS Style) */
|
||||
.mobile-search-bar-expanded {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
padding: 0 0.85rem;
|
||||
background: var(--bg-surface);
|
||||
z-index: 30;
|
||||
animation: searchFadeSlide 0.2s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
@keyframes searchFadeSlide {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(18px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-search-input-wrapper {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mobile-search-leading-icon {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
color: var(--text-muted);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.mobile-search-input-field {
|
||||
width: 100%;
|
||||
height: 34px;
|
||||
background: var(--bg-subtle);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-full);
|
||||
padding: 0 1.85rem 0 2rem;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-primary);
|
||||
outline: none;
|
||||
transition: border-color var(--transition-fast);
|
||||
}
|
||||
|
||||
.mobile-search-input-field:focus {
|
||||
border-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.mobile-search-clear-btn {
|
||||
position: absolute;
|
||||
right: 6px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--border-subtle);
|
||||
border: none;
|
||||
color: var(--text-muted);
|
||||
border-radius: var(--radius-full);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mobile-search-cancel-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-primary);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
padding: 0.35rem 0.25rem;
|
||||
white-space: nowrap;
|
||||
transition: opacity var(--transition-fast);
|
||||
}
|
||||
|
||||
.mobile-search-cancel-btn:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* Infinite Scroll Loading & End Indicator */
|
||||
.waterfall-infinite-loader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.45rem;
|
||||
padding: 1.25rem 0 1.75rem;
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-muted);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Waterfall Scroll Area */
|
||||
.waterfall-scroll-area {
|
||||
flex: 1;
|
||||
@@ -76,6 +210,29 @@
|
||||
-webkit-overflow-scrolling: touch;
|
||||
padding: 0.65rem;
|
||||
padding-bottom: calc(var(--bottom-nav-height) + var(--docked-audio-height) + 1rem);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Pull to Refresh Indicator */
|
||||
.pull-to-refresh-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
transition: height 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.pull-to-refresh-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.45rem;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-muted);
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
/* 2-Column Waterfall Masonry Grid */
|
||||
@@ -218,9 +375,9 @@
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
justify-content: space-around;
|
||||
padding: 0 0.5rem;
|
||||
padding: 6px 0.5rem calc(16px + env(safe-area-inset-bottom, 0px));
|
||||
z-index: 50;
|
||||
user-select: none;
|
||||
}
|
||||
@@ -230,9 +387,9 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 2px;
|
||||
gap: 3px;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
padding: 4px 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-muted);
|
||||
@@ -274,6 +431,8 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100vw;
|
||||
max-width: 100vw;
|
||||
background: var(--bg-surface);
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
@@ -291,14 +450,14 @@
|
||||
to { transform: translateY(0); }
|
||||
}
|
||||
|
||||
.mobile-sheet-header {
|
||||
.mobile-sheet-top-nav {
|
||||
height: 48px;
|
||||
min-height: 48px;
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 0.75rem;
|
||||
gap: 0.5rem;
|
||||
background: var(--bg-surface);
|
||||
z-index: 10;
|
||||
}
|
||||
@@ -306,8 +465,132 @@
|
||||
.mobile-sheet-scroll {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
padding: 1.25rem 1.15rem 4rem;
|
||||
padding: 1.15rem 1rem calc(65px + env(safe-area-inset-bottom, 0px));
|
||||
width: 100%;
|
||||
max-width: 100vw;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Mobile Sheet Bottom Action Toolbar */
|
||||
.mobile-sheet-bottom-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: calc(52px + env(safe-area-inset-bottom, 0px));
|
||||
padding: 0 0.85rem env(safe-area-inset-bottom, 0px);
|
||||
background: var(--bg-docked);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
z-index: 110;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.mobile-sheet-bottom-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.mobile-sheet-bottom-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sheet-action-btn {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: var(--radius-md);
|
||||
border: none;
|
||||
background: transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
color: var(--text-muted);
|
||||
transition: background var(--transition-fast), color var(--transition-fast), transform 0.1s;
|
||||
}
|
||||
|
||||
.sheet-action-btn:active {
|
||||
transform: scale(0.92);
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.sheet-action-btn.starred {
|
||||
color: #d97706;
|
||||
}
|
||||
|
||||
.sheet-action-btn.shared {
|
||||
color: #2563eb;
|
||||
background: rgba(37, 99, 235, 0.12);
|
||||
}
|
||||
|
||||
.sheet-action-btn.audio-active {
|
||||
color: #059669;
|
||||
background: rgba(5, 150, 105, 0.12);
|
||||
}
|
||||
|
||||
/* Dropup menu for bottom popup split button */
|
||||
.dropup-menu {
|
||||
top: auto !important;
|
||||
bottom: calc(100% + 8px) !important;
|
||||
right: 0 !important;
|
||||
transform-origin: bottom right;
|
||||
box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.15), 0 0 0 1px var(--border-subtle) !important;
|
||||
}
|
||||
|
||||
/* Enforce Strict Horizontal Overflow Containment & Word Wrapping */
|
||||
.mobile-sheet-scroll * {
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.mobile-sheet-scroll .reader-body-rendered {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
word-break: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.mobile-sheet-scroll .reader-body-rendered a,
|
||||
.mobile-sheet-scroll .reader-body-rendered p,
|
||||
.mobile-sheet-scroll .reader-body-rendered h1,
|
||||
.mobile-sheet-scroll .reader-body-rendered h2,
|
||||
.mobile-sheet-scroll .reader-body-rendered h3,
|
||||
.mobile-sheet-scroll .reader-body-rendered h4,
|
||||
.mobile-sheet-scroll .reader-body-rendered span {
|
||||
word-break: break-word;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.mobile-sheet-scroll .reader-body-rendered pre,
|
||||
.mobile-sheet-scroll .reader-body-rendered code {
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.mobile-sheet-scroll .reader-body-rendered img,
|
||||
.mobile-sheet-scroll .reader-body-rendered video,
|
||||
.mobile-sheet-scroll .reader-body-rendered iframe {
|
||||
max-width: 100% !important;
|
||||
height: auto !important;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mobile-sheet-scroll .reader-body-rendered table {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
/* Docked Mini Audio Player */
|
||||
|
||||
@@ -1,6 +1,14 @@
|
||||
export interface UserPreferences {
|
||||
auto_read?: boolean;
|
||||
view_preference?: ViewPreference;
|
||||
theme?: string;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
export interface User {
|
||||
id: string;
|
||||
username: string;
|
||||
preferences?: UserPreferences;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user