feat: implement scroll position restoration for mobile tabs and add double-tap home navigation to refresh feed views.

docs/003_backlog.md

@@ -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.

docs/008_desktop_view_feedback_and_specifications.md

@@ -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.
+## 6. General Layout & Safe Area
-- **Persistence**: Switching feeds or categories in the sidebar updates the middle article list without abruptly reloading or clearing the active reading canvas.
+
+- **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.

internal/api/handlers.go

@@ -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()

internal/api/server.go

@@ -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

internal/db/db.go

@@ -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 (?, ?, ?, ?, ?)",
+		"INSERT INTO users (id, username, password_hash, preferences, created_at, updated_at) VALUES (?, ?, ?, ?, ?, ?)",
-		u.ID, u.Username, u.PasswordHash, u.CreatedAt, u.UpdatedAt,
+		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 := `

internal/models/models.go

@@ -9,6 +9,7 @@ type User struct {
 	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"`
 }

web/src/App.tsx

@@ -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

web/src/components/mobile/FeedsTabView.tsx

@@ -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' }}>

web/src/components/mobile/MobileArticleSheet.tsx

@@ -1,6 +1,8 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
-import { FeedEntry } from '../../types';
+import { Feed, FeedEntry } from '../../types';
-import { formatRelativeDate, estimateReadingTime, renderMarkdownText } from '../../utils';
+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 [isEdgeSwiping, setIsEdgeSwiping] = useState(false);
-  const sheetRef = useRef<HTMLDivElement>(null);
+  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) {
+    if (isEdgeSwiping && touchDeltaX > 80) {
+      setIsDismissing(true);
+      setTimeout(() => {
         onClose();
+      }, 200);
     } else {
       setTouchDeltaX(0);
     }
-    setIsFromLeftEdge(false);
+    setIsEdgeSwiping(false);
     setTouchStartX(null);
   };
 
-  const handleShare = async () => {
+  // Full Text Scraper
-    if (navigator.share && entry.url) {
+  const handleScrapeFullText = async () => {
+    if (isScraping) return;
+    setIsScraping(true);
+    setAiError(null);
     try {
-        await navigator.share({
+      const updated = await api.scrapeEntry(entry.id);
-          title: entry.title,
+      onUpdateEntry?.(updated);
-          url: entry.url,
+      setSelectedVariantKey('readability_full_text');
-        });
+    } catch (err: any) {
-      } catch {
+      setAiError(`Full text extraction failed: ${err?.message || err}`);
-        // ignore share cancellation
+    } finally {
+      setIsScraping(false);
     }
-    } else if (entry.url) {
+  };
-      navigator.clipboard.writeText(entry.url);
+
-      alert('Link copied to clipboard!');
+  // 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);
+      }
+      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 ${!isDismissing && touchDeltaX === 0 ? 'slide-in' : ''}`}
-      className="mobile-article-sheet slide-in"
       style={{
-        transform: touchDeltaX > 0 ? `translateX(${touchDeltaX}px)` : undefined,
+        transform: isDismissing
-        transition: touchDeltaX > 0 ? 'none' : undefined,
+          ? '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 */}
+      {/* 1. Top Single-Row Header: Return Button + Feed Favicon + Feed Title */}
-      <div className="mobile-sheet-header">
+      <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' }}>
+        <div
-          {ttsVariant?.stream_url && (
+          style={{
-            <button
+            display: 'flex',
-              className="btn-icon"
+            alignItems: 'center',
-              style={{ border: 'none', background: 'transparent' }}
+            gap: '0.45rem',
-              onClick={() => onPlayAudio?.(entry, ttsVariant.stream_url!)}
+            flex: 1,
-              title="Play Audio"
+            overflow: 'hidden',
+            minWidth: 0,
+          }}
         >
-              {isCurrentAudioActive ? (
+          {feed ? (
-                <Pause size={18} color="var(--badge-tts)" />
+            <FeedIcon feed={feed} size={16} />
           ) : (
-                <Volume2 size={18} color="var(--badge-tts)" />
+            <span style={{ fontSize: '0.85rem' }}>📰</span>
           )}
-            </button>
+          <span
-          )}
+            style={{
-
+              fontSize: '0.88rem',
-          <button
+              fontWeight: 600,
-            className="btn-icon"
+              color: 'var(--text-secondary)',
-            style={{ border: 'none', background: 'transparent' }}
+              overflow: 'hidden',
-            onClick={() => onToggleStar(entry)}
+              textOverflow: 'ellipsis',
-            title="Star article"
+              whiteSpace: 'nowrap',
+            }}
           >
-            <Star
+            {entry.feed_title}
-              size={18}
+          </span>
-              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>
         </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' }}>
+        <div className="reader-meta-header" style={{ marginBottom: '1.25rem' }}>
-          <h1 style={{ fontSize: '1.45rem', fontWeight: 800, lineHeight: 1.3, color: 'var(--text-primary)', marginBottom: '0.5rem' }}>
+          {/* 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)' }}>
+          {/* Author, Published Date & Reading Time */}
-            <span style={{ fontWeight: 600, color: 'var(--text-secondary)' }}>{entry.feed_title}</span>
+          <div className="reader-meta-row" style={{ marginTop: '0.5rem' }}>
-            <span>•</span>
+            <span>by {entry.author || 'Unknown'}</span>
-            <span>{formatRelativeDate(entry.published_at)}</span>
+            <span>·</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} />
+              <div style={{ display: 'flex', alignItems: 'center', gap: '0.4rem' }}>
-              <span>AI Summary</span>
+                <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>
   );
 };

web/src/components/mobile/SmartArtCard.tsx

@@ -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

web/src/components/mobile/StarredTabView.tsx

@@ -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>

web/src/components/mobile/WaterfallView.tsx

@@ -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 [parentTab, setParentTab] = useState<MobileTab>('home');
-  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedEntryId, setSelectedEntryId] = useState<string | null>(null);
-  const [showSearchInput, setShowSearchInput] = useState(false);
+  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) => {
+  // Return to the originating tab when exiting a feed's waterfall view
-    e.preventDefault();
+  const handleReturnFromFeed = () => {
-    onFilterChange({ search: searchQuery.trim() });
+    onFilterChange({ feedId: undefined });
+    setMobileTab(parentTab);
   };
 
-  const clearSearch = () => {
+  // Double Tap Home to Scroll to Top
-    setSearchQuery('');
+  const handleDoubleTapHome = () => {
-    setShowSearchInput(false);
+    scrollAreaRef.current?.scrollTo({ top: 0, behavior: 'smooth' });
-    onFilterChange({ search: '' });
+  };
+
+  // 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,88 +234,98 @@ 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 */}
+      {/* Top Category Pill Tabs & Floating Search Row (Home View) */}
-      <header className="mobile-top-header">
+      {mobileTab === 'home' && (
-        {currentFeedFilter ? (
+        <div className="mobile-categories-search-row">
-          <button
+          {isSearchOpen ? (
-            className="btn-icon"
+            <div className="mobile-search-bar-expanded">
-            style={{ border: 'none', background: 'transparent' }}
+              <div className="mobile-search-input-wrapper">
-            onClick={() => onFilterChange({ feedId: undefined })}
+                <Search size={14} className="mobile-search-leading-icon" />
-          >
-            <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"
+                  className="mobile-search-input-field"
-                placeholder="Search articles..."
+                  placeholder="Search all posts..."
                   value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
+                  onChange={(e) => {
+                    setSearchQuery(e.target.value);
+                    onFilterChange({ search: e.target.value });
+                  }}
                   autoFocus
                 />
+                {searchQuery && (
                   <button
-                type="button"
+                    className="mobile-search-clear-btn"
-                className="btn-icon"
+                    onClick={() => {
-                style={{ border: 'none', background: 'transparent' }}
+                      setSearchQuery('');
-                onClick={clearSearch}
+                      onFilterChange({ search: '' });
+                    }}
+                    title="Clear search"
                   >
-                <X size={16} />
+                    <X size={12} />
                   </button>
-            </form>
-          ) : (
-            <>
-              <button
-                className="btn-icon"
-                style={{ border: 'none', background: 'transparent' }}
-                onClick={() => setShowSearchInput(true)}
-                title="Search"
-              >
-                <Search size={18} />
-              </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>
-              )}
-            </>
                 )}
               </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' : ''}`}
+                className="mobile-search-cancel-btn"
-            onClick={() => onFilterChange({ categoryId: undefined, view: 'inbox' })}
+                onClick={() => {
+                  setIsSearchOpen(false);
+                  setSearchQuery('');
+                  onFilterChange({ search: '' });
+                }}
+              >
+                Cancel
+              </button>
+            </div>
+          ) : (
+            <>
+              {/* 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>
+
+                    {/* Category Folders */}
                     {categories.map((cat) => (
                       <button
                         key={cat.id}
                         className={`mobile-tab-pill ${filter.categoryId === cat.id ? 'active' : ''}`}
-              onClick={() => onFilterChange({ categoryId: cat.id, view: 'all' })}
+                        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>
       )}
 
@@ -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,18 +375,70 @@ export const WaterfallView: React.FC<WaterfallViewProps> = ({
           />
         </div>
       ) : (
-        /* Waterfall 2-Column Grid (Home / Listen / Filtered Feeds) */
+        /* Waterfall 2-Column Grid (Home / Listen / Filtered Feeds) with Pull-To-Refresh & Infinite Scroll */
-        <div className="waterfall-scroll-area">
+        <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">
@@ -254,6 +449,15 @@ export const WaterfallView: React.FC<WaterfallViewProps> = ({
                   {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}

web/src/components/mobile/XHSBottomNav.tsx

@@ -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>

web/src/components/settings/SettingsView.tsx

@@ -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

web/src/services/api.ts

@@ -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');

web/src/styles/tokens.css

@@ -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;

web/src/styles/waterfall.css

@@ -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;
+  padding: 0 0.75rem;
-  background: var(--bg-surface);
-  border-bottom: 1px solid var(--border-light);
   overflow-x: auto;
   scrollbar-width: none;
   -webkit-overflow-scrolling: touch;
-  flex-shrink: 0;
+  height: 100%;
-  z-index: 25;
 }
 
 .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 */

web/src/types.ts

@@ -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;
 }