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.
|
||||
|
||||
Reference in New Issue
Block a user