Redesign sidebar and header for Pocket-like UX#3
Merged
Conversation
- Remove "All" from sidebar navigation - Rename "Unread" to "My List" - Change My List filtering to show not-archived bookmarks instead of unread - Remove content type filters: Articles, Videos, Pictures - Update header to dynamically display current view (My List, Archive, Favorites) - Set My List as default view on app launch - Clean up unused icon imports This transforms the app from a Readeck-style interface to a more streamlined Pocket-like experience with simpler navigation focused on reading lists. https://claude.ai/code/session_01Cdt7eLRMUau8mbQPu8hvxN
Update BookmarkListViewModelTest to reflect the changes from Unread to My List: - Rename test from 'onClickUnread' to 'onClickMyList' - Update filter expectations from 'unread = true' to 'archived = false' - Update default filter mocks to use 'archived = false' instead of 'archived = null' - Simplify observeBookmarks test to focus on My List filtering https://claude.ai/code/session_01Cdt7eLRMUau8mbQPu8hvxN
Delete tests for UI features that were removed in the sidebar redesign: - Remove onClickAll test (All menu item was removed) - Remove onClickArticles test (Articles filter was removed) - Remove onClickPictures test (Pictures filter was removed) - Remove onClickVideos test (Videos filter was removed) These functions still exist in the ViewModel for potential future use, but are no longer exposed in the UI. https://claude.ai/code/session_01Cdt7eLRMUau8mbQPu8hvxN
Update all toggle operation tests to mock archived = false instead of archived = null to match the new default filter state. This fixes: - onToggleFavoriteBookmark tests (Success, GenericError, NetworkError) - onToggleArchiveBookmark tests (Success, GenericError, NetworkError) - onToggleMarkReadBookmark tests (Success, GenericError, NetworkError) The ViewModel now initializes with FilterState(archived = false) for the My List view, so all test mocks must match this default state. https://claude.ai/code/session_01Cdt7eLRMUau8mbQPu8hvxN
Created analysis tools and findings report: - analyze_log.py: Python script to parse and analyze log files - performance_analysis.md: Detailed performance analysis report Key findings: - Bookmark updates complete instantly (~1ms) - Slowness caused by 1,246 LoadArticleWorker tasks running concurrently - Unnecessary full sync triggered after every bookmark update - Issue is app logic, not data Recommendations: 1. Remove aggressive article loading during sync (lazy load instead) 2. Remove LoadBookmarksWorker trigger from UpdateBookmarkUseCase 3. Load articles on-demand when user opens bookmark detail https://claude.ai/code/session_01Cdt7eLRMUau8mbQPu8hvxN
NateEaton
pushed a commit
that referenced
this pull request
Jan 28, 2026
…layed delete This commit fixes three major issues: 1. Fixed JSON parsing error for labels (Issue #1) - Changed EditBookmarkResponseDto.labels from String to List<String> - API returns labels as array but DTO expected string, causing parse error 2. Implemented automatic read progress tracking (Issue #2) - Added updateReadProgress() method to BookmarkRepository - Auto-sets readProgress to 1 when bookmark detail view is opened - Added readProgress field to BookmarkListItem model - Updated checkmark icon logic: * No icon if readProgress == 0 (not started) * Outline checkmark if 0 < readProgress < 100 (in progress) * Filled checkmark if readProgress == 100 (completed) - Imported Icons.Outlined.CheckCircle for outline icon 3. Implemented delayed delete with undo functionality (Issue #3) - Added pendingDeletionJob and pendingDeletionBookmarkId state - Delete now waits 10 seconds before executing - User can undo within 10-second window via snackbar - onCancelDeleteBookmark() cancels pending deletion - Multiple deletes properly cancel previous pending deletions Changes: - Modified BookmarkRepository.kt to add updateReadProgress method - Implemented updateReadProgress in BookmarkRepositoryImpl.kt - Added readProgress field to BookmarkListItem.kt - Fixed EditBookmarkResponseDto.kt labels type (String → List<String>) - Added init block in BookmarkDetailViewModel.kt for auto-tracking - Updated BookmarkCard.kt with smart checkmark icons - Added readProgress to preview samples in BookmarkListScreen.kt - Implemented delayed delete in BookmarkListViewModel.kt https://claude.ai/code/session_01LpN9kF9sGziGcGGt5fj946
NateEaton
added a commit
that referenced
this pull request
Feb 16, 2026
Enhanced fromStringList converter to prevent silent data loss: - Added Timber.w logging when deserialization fails - Added CSV fallback for v6 compatibility and data recovery - Log includes the corrupted value for debugging This makes it possible to diagnose data corruption issues in production. Refs: Phase 1 Item #3 (Medium severity) from post-refactor-code-review.md Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
NateEaton
pushed a commit
that referenced
this pull request
Feb 26, 2026
Carousel (screenshots 1–9): - Fill all 9 slides with actual phone screenshots; remove sph placeholders and the "coming soon" paragraph - Add new Compact View slide (#3) that was missing from the original placeholder set - Slides: My List · Grid Layout · Compact View · Mosaic View · Article Reader · Reading Settings · Label Filter · Save to MyDeck · App Settings Panels: - Panel 1 (list): top-third crop of screenshot11 (tablet portrait, navigation rail + article grid) - Panel 2 (layouts/tablet): full screenshot10 (tablet landscape, nav drawer + grid view — natural fit for the tablet copy) - Panel 3 (reader): top-quarter crop of screenshot12 (tablet portrait, reading view header and first paragraph) - Add .panel-shot CSS for border, shadow, and overflow clip Tablet screenshots: - Move screenshot10–12 from phoneScreenshots/ to new tabletScreenshots/ folder for correct Fastlane/F-Droid metadata https://claude.ai/code/session_019uGqZvUNpyZoopwFVMP6MV
NateEaton
added a commit
that referenced
this pull request
Feb 26, 2026
Starting from first draft version created based on inspiration from landing page of My PT app, the Readeck site and historical views of getpockeet.com * Remove card grid band, use real app icon and screenshot - Remove the card-band section (HTML + CSS) that used extracted Readeck images - Replace the inline SVG nav icon with the actual icon.png from metadata/ - Use the draft screenshot1.png from metadata/ in the first carousel slide https://claude.ai/code/session_019uGqZvUNpyZoopwFVMP6MV * Additional content edits * Polish landing page: backgrounds, font, links, footer - Hero: swap to dark green (#1c2c1c) background with subtle radial gradients matching the CTA band, giving the page bookended dark sections - Screenshot carousel: use the hero's former teal (#1E5F5E) background; update heading, label, and dot colours for contrast - Hero h1: font-weight 800 → 200 (much lighter / more editorial feel) - External links (readeck.org, jensomato/ReadeckApp): open in new tab - Footer: merge two link columns into one "Links" column; remove redundant Download and "Get Readeck" entries; update grid from 3-col to 2-col https://claude.ai/code/session_019uGqZvUNpyZoopwFVMP6MV * Unify panel backgrounds with teal left-accent on headings - Replace alternating panel-light/panel-mid backgrounds with a single rgb(var(--c-gray-100)) across all three panels — cleaner, less busy - Add border-left: 3px solid (teal primary) + padding-left to .panel-text h2, giving each panel heading a consistent left-accent rule that ties back to the callout block style used in the same section https://claude.ai/code/session_019uGqZvUNpyZoopwFVMP6MV * Upgrade screenshot carousel: drag interaction + lightbox Carousel: - Widen slides from 175px → 220px for better visual weight - Replace touch-only swipe with Pointer Events (works for mouse, touch, and pen — no separate handlers needed) - Add momentum: velocity is tracked during drag and projected forward ~150ms on release, then snapped to nearest slide - Rubber-band effect at both ends of the track - Grab/grabbing cursor feedback; suppress click when drag occurred - Arrow key navigation (left/right) added Lightbox: - Clicking any real screenshot (img, not placeholder) opens a full-screen overlay showing the image at natural size - Caption from the slide label displayed below the image - Close via × button, click-outside, or Escape key - Body scroll locked while open https://claude.ai/code/session_019uGqZvUNpyZoopwFVMP6MV * Fix lightbox, mobile swipe; update copy and footer layout Bug fixes: - Lightbox was broken: the <script> IIFE captured lbOverlay via getElementById at parse time, but the lightbox <div> appeared after the </script> tag, so overlay was null and every click silently threw. Fixed by moving the lightbox HTML before <script>. - Mobile swipe not working: added touch-action: pan-y to .car-track so the browser yields horizontal pointer events to our JS while still allowing vertical page scroll. Copy: - Remove "library" from Panel 2 heading (not a Readeck/Pocket concept); changed to "Three layouts. One list." Footer: - Split the single Links column into two CSS columns (columns: 2) under one "Links" heading — reduces height, groups MyDeck links and external links side by side naturally. https://claude.ai/code/session_019uGqZvUNpyZoopwFVMP6MV * Fix desktop lightbox click; bump nav icon and brand size 20% Lightbox desktop fix: - setPointerCapture redirects pointer events to the track element, which means click events fire on the track rather than the slide — so the bubble-phase slide click listener never received them on desktop (mobile synthesized clicks go to the original target, which is why mobile worked but desktop didn't). - Replaced click-based lightbox trigger with tap detection in pointerup: measure absolute distance from startX/startY; if < 10px use elementFromPoint to find the slide under the pointer and open the lightbox. Works identically on desktop and mobile. - Removed the now-unnecessary capture-phase click suppressor and the per-slide click listeners. - Added startY tracking; simplified didDrag out of the logic. - Added draggable="false" on carousel img to suppress browser image-drag on desktop. Nav: - Icon: 32px → 38px (border-radius 7px → 8px, HTML attrs updated) - Brand name: 1.5rem → 1.8rem https://claude.ai/code/session_019uGqZvUNpyZoopwFVMP6MV * Clean up CSS provenance comments and dead variables - Replace two broken .panel-text mark / .feat mark SVG background-image rules (invalid bare-string syntax, never rendered) with simple background-color: #ffe1a1 that actually works - Remove four unused :root variables: --panel-light, --panel-mid, --grad-from, --grad-to - Reword design-tokens header: drop "faithfully derived from actual source CSS / MHT inspection" language - Remove or reword stale inline comments that referenced "exact Readeck style", "Pocket style", "exact from CSS", etc. throughout the file https://claude.ai/code/session_019uGqZvUNpyZoopwFVMP6MV * Replace mark highlight with teal color; strip features marks Panel h2 key words (your/list/way): background-color highlight → color: rgb(var(--c-primary)) with no background — on-brand teal accent, no borrowed highlight aesthetic. Features section: remove all <mark> tags from inline prose; terms read clearly without emphasis decoration. Drop the now-unused .feat mark CSS rule entirely. https://claude.ai/code/session_019uGqZvUNpyZoopwFVMP6MV * Interim screenshot changes * Add screenshots * Add real screenshots to carousel and panels Carousel (screenshots 1–9): - Fill all 9 slides with actual phone screenshots; remove sph placeholders and the "coming soon" paragraph - Add new Compact View slide (#3) that was missing from the original placeholder set - Slides: My List · Grid Layout · Compact View · Mosaic View · Article Reader · Reading Settings · Label Filter · Save to MyDeck · App Settings Panels: - Panel 1 (list): top-third crop of screenshot11 (tablet portrait, navigation rail + article grid) - Panel 2 (layouts/tablet): full screenshot10 (tablet landscape, nav drawer + grid view — natural fit for the tablet copy) - Panel 3 (reader): top-quarter crop of screenshot12 (tablet portrait, reading view header and first paragraph) - Add .panel-shot CSS for border, shadow, and overflow clip Tablet screenshots: - Move screenshot10–12 from phoneScreenshots/ to new tabletScreenshots/ folder for correct Fastlane/F-Droid metadata https://claude.ai/code/session_019uGqZvUNpyZoopwFVMP6MV * Additional/changed screenshots * Fix carousel cutoff; widen panel 3 reader crop Carousel: fix last-slide clipping by computing maxOff() from the actual track container width (offsetWidth) instead of vis()*slideW(). The old formula used window.innerWidth which ignored the 70rem container cap, causing the final slide to land partially past the right edge at typical desktop sizes. Panel 3 (reader): show ~37% of the portrait height instead of 25% so the article title, lead paragraph, and section heading are all visible. Narrow the visual column slightly (52%→47%) and widen the text column (42%→46%) via a .panel--reader modifier class so the image stays proportionate to the text block beside it. https://claude.ai/code/session_019uGqZvUNpyZoopwFVMP6MV * Dropped settings and user guide from carousel, changed Mosaic screenshot * Fix carousel end-snap and dot count; increase panel 1 crop Carousel (two bugs fixed): 1. go() now uses maxOff() for the last position instead of cur * slideW(). The previous attempt added a correct maxOff() but never called it from go(), so the last slide still landed ~70 px past the right edge of the container. 2. Dots now represent navigatable positions (n - vis() + 1), not individual slides (n). The old static loop created one dot per slide, but only n - vis() positions are reachable, so the last several dots were permanently unlit. buildDots() is now a function called at init and on resize so the count stays correct when the viewport changes. Panel 1: increase crop from top-33% (aspect-ratio 1837/932) to top-45% (1837/1250) so the image height better matches the tall text block (h2 + two paragraphs + callout). https://claude.ai/code/session_019uGqZvUNpyZoopwFVMP6MV * Fine tune language * Address code review: pointerdown preventDefault + hero-inner cleanup - Add e.preventDefault() in the carousel pointerdown handler after the button check. touch-action: pan-y on .car-track suppresses vertical scroll hijacking, but doesn't prevent text-selection or back-navigation gestures on all mobile browsers; preventDefault() closes that gap. - Remove the duplicate max-width: var(--mw) from .hero-inner. The 680px override below it was the intended value; the first declaration was dead code and made the rule confusing to read. https://claude.ai/code/session_019uGqZvUNpyZoopwFVMP6MV --------- Co-authored-by: Claude <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This transforms the app from a Readeck-style interface to a more streamlined
Pocket-like experience with simpler navigation focused on reading lists.
https://claude.ai/code/session_01Cdt7eLRMUau8mbQPu8hvxN